From a34a4bafac9e283325c61d479dcac0e91e8eb441 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sat, 17 Oct 2020 16:40:35 +0300
Subject: [PATCH] find search term in document
---
.../findAndReplace/FindAndReplaceTool.js | 43 ++++---------
.../findAndReplace/FindComponent.js | 64 +++++++++++++++++--
2 files changed, 74 insertions(+), 33 deletions(-)
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 0f721a2c7..9bf822950 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -1,40 +1,25 @@
-import React, {
- useRef,
- useMemo,
- useContext,
- useState,
- useLayoutEffect,
-} from 'react';
-import { WaxContext } from 'wax-prosemirror-core';
+import React, { useRef, useMemo, useState, useLayoutEffect } from 'react';
+
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import MenuButton from '../../ui/buttons/MenuButton';
import FindAndReplaceComponent from './FindAndReplaceComponent';
-import useOnClickOutside from '../../helpers/useOnClickOutside';
-
-const FindAndReplaceTool = ({ view = {}, item }) => {
- const {
- view: { main },
- activeViewId,
- } = useContext(WaxContext);
- if (item.onlyOnMain) {
- view = main;
- }
- const Wrapper = styled.div`
- font-size: 0;
- position: relative;
- z-index: 2;
- `;
+const Wrapper = styled.div`
+ font-size: 0;
+ position: relative;
+ z-index: 2;
+`;
- const DropWrapper = styled.div`
- margin-top: ${grid(1)};
- position: absolute;
- background: white;
- top: 32px;
- `;
+const DropWrapper = styled.div`
+ margin-top: ${grid(1)};
+ position: absolute;
+ background: white;
+ top: 32px;
+`;
+const FindAndReplaceTool = ({ view = {}, item }) => {
const { state } = view;
const { enable, icon, run, select, title } = item;
const dropElement = useRef();
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
index d0bba955e..8e59f3f3d 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
@@ -1,8 +1,9 @@
/* eslint react/prop-types: 0 */
-import React from 'react';
+import React, { useState, useRef, useContext } from 'react';
import styled from 'styled-components';
import { grid, th } from '@pubsweet/ui-toolkit';
+import { WaxContext } from 'wax-prosemirror-core';
import Icon from '../../helpers/Icon';
const Wrapper = styled.div`
@@ -51,14 +52,68 @@ const CloseWrapper = styled.div`
const ExpandedWrapper = styled.div``;
const FindComponent = ({ close, expand }) => {
- const onChange = () => {};
+ const {
+ view: { main },
+ } = useContext(WaxContext);
+
+ const {
+ state: { doc },
+ } = main;
+
+ const searchRef = useRef(null);
+ const [searchValue, setsearchValue] = useState('');
+
+ const onChange = () => {
+ setsearchValue(searchRef.current.value);
+ searchDocument();
+ };
+
+ const searchDocument = () => {
+ const results = [];
+ const mergedTextNodes = [];
+ let index = 0;
+
+ doc.descendants((node, pos) => {
+ if (node.isText) {
+ if (mergedTextNodes[index]) {
+ mergedTextNodes[index] = {
+ text: mergedTextNodes[index].text + node.text,
+ pos: mergedTextNodes[index].pos,
+ };
+ } else {
+ mergedTextNodes[index] = {
+ text: node.text,
+ pos,
+ };
+ }
+ } else {
+ index += 1;
+ }
+ });
+
+ mergedTextNodes.forEach(({ text, pos }) => {
+ const search = RegExp(searchValue, 'gui');
+ let m;
+ // eslint-disable-next-line no-cond-assign
+ while ((m = search.exec(text))) {
+ if (m[0] === '') {
+ break;
+ }
+
+ results.push({
+ from: pos + m.index,
+ to: pos + m.index + m[0].length,
+ });
+ }
+ });
+ console.log(results);
+ };
const closeFind = () => {
close();
};
const showExpanded = () => {
- console.log('expanded');
expand();
};
@@ -66,9 +121,10 @@ const FindComponent = ({ close, expand }) => {
<Wrapper>
<SingleRow>
<SearchInput
+ ref={searchRef}
type="text"
placeholder="Find"
- value=""
+ value={searchValue}
onChange={onChange}
/>
<StyledIcon name="navigatePrevious" />
--
GitLab