fix find marking

wax-prosemirror-components/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.43",
   "description": "Wax prosemirror UI components",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js

@@ -14,6 +14,7 @@ import { grid, th } from '@pubsweet/ui-toolkit';
 import Icon from '../../helpers/Icon';
 import CheckBox from '../../ui/inputs/CheckBox';
 import helpers from './helpers';
+import useDebounce from '../../helpers/useDebounce';
 
 const Wrapper = styled.div`
   background: #fff;
@@ -165,21 +166,23 @@ const ExpandedFindAndReplaceComponent = ({
     allStates.push(singleView.state);
   });
 
-  const delayedSearch = useCallback(
-    debounce(() => searchDocument(), 300),
-    [searchValue, matchCaseSearch],
-  );
+  const debouncedSearchTerm = useDebounce(searchValue, 300);
+
+  // const delayedSearch = useCallback(
+  //   debounce(() => searchDocument(), 300),
+  //   [searchValue, matchCaseSearch],
+  // );
 
   const onChangeSearchInput = () => {
     setSearchValue(searchRef.current.value);
   };
 
   useEffect(() => {
-    delayedSearch();
+    searchDocument();
     let counter = 0;
     counter = helpers.getMatchesByView(view, searchValue, matchCaseSearch);
     setCounterSearches(counter);
-  }, [searchValue, delayedSearch, matchCaseSearch, JSON.stringify(allStates)]);
+  }, [debouncedSearchTerm, matchCaseSearch, JSON.stringify(allStates)]);
 
   const setCounterSearches = counter => {
     if (counter === 0) return setCounterText('0 of 0');

wax-prosemirror-components/src/components/findAndReplace/FindComponent.js

 /* eslint react/prop-types: 0 */
 
-import React, {
-  useState,
-  useRef,
-  useContext,
-  useCallback,
-  useEffect,
-} from 'react';
-import { debounce, each, eachRight } from 'lodash';
+import React, { useState, useRef, useContext, useEffect } from 'react';
+import { each, eachRight } from 'lodash';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 import { WaxContext } from 'wax-prosemirror-core';
 import Icon from '../../helpers/Icon';
 import helpers from './helpers';
+import useDebounce from '../../helpers/useDebounce';
 
 const Wrapper = styled.div`
   background: #fff;
@@ -100,38 +95,6 @@ const Svg = styled.svg.attrs(() => ({
   width: 24px;
 `;
 
-const useDebounce = (value, delay) => {
-  // State and setters for debounced value
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(
-    () => {
-      // Set debouncedValue to value (passed in) after the specified delay
-      const handler = setTimeout(() => {
-        setDebouncedValue(value);
-      }, delay);
-
-      // Return a cleanup function that will be called every time ...
-      // ... useEffect is re-called. useEffect will only be re-called ...
-      // ... if value changes (see the inputs array below).
-      // This is how we prevent debouncedValue from changing if value is ...
-      // ... changed within the delay period. Timeout gets cleared and restarted.
-      // To put it in context, if the user is typing within our app's ...
-      // ... search box, we don't want the debouncedValue to update until ...
-      // ... they've stopped typing for more than 500ms.
-      return () => {
-        clearTimeout(handler);
-      };
-    },
-    // Only re-call effect if value changes
-    // You could also add the "delay" var to inputs array if you ...
-    // ... need to be able to change that dynamically.
-    [value],
-  );
-
-  return debouncedValue;
-};
-
 const FindComponent = ({
   close,
   expand,
@@ -157,10 +120,6 @@ const FindComponent = ({
     allStates.push(singleView.state);
   });
 
-  // const delayedSearch = useCallback(searchDocument(), [
-  //   (debouncedSearchTerm, matchCaseSearch, activeViewId),
-  // ]);
-
   const onChange = () => {
     setSearchValue(searchRef.current.value);
   };
@@ -225,11 +184,8 @@ const FindComponent = ({
 
   const searchDocument = () => {
     let counter = 0;
-    if (searchValue === '') {
-      findAndReplacePlugin.props.setSearchText('');
-    } else {
-      findAndReplacePlugin.props.setSearchText(searchValue);
-    }
+    findAndReplacePlugin.props.setSearchText(searchValue);
+
     findAndReplacePlugin.props.setSearchMatchCase(matchCaseSearch);
     counter = helpers.getMatchesByView(view, searchValue, matchCaseSearch);
 

wax-prosemirror-components/src/helpers/useDebounce.js

+import React, { useState, useEffect } from 'react';
+
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;

wax-prosemirror-core/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.43",
   "description": "Wax prosemirror core",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-plugins/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.43",
   "description": "Wax prosemirror plugins",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-schema/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.43",
   "description": "Wax prosemirror schema",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-services/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.43",
   "description": "Wax prosemirror services",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-utilities/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.43",
   "description": "Wax prosemirror utilities",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],