From 1d3c6ea2c65605a2226e24fb570f8723485ef199 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 14 Apr 2021 14:12:16 +0300
Subject: [PATCH] fix find marking
---
wax-prosemirror-components/package.json | 2 +-
.../ExpandedFindAndReplaceComponent.js | 15 +++---
.../findAndReplace/FindComponent.js | 54 ++-----------------
.../src/helpers/useDebounce.js | 19 +++++++
wax-prosemirror-core/package.json | 2 +-
wax-prosemirror-plugins/package.json | 2 +-
wax-prosemirror-schema/package.json | 2 +-
wax-prosemirror-services/package.json | 2 +-
wax-prosemirror-utilities/package.json | 2 +-
9 files changed, 39 insertions(+), 61 deletions(-)
create mode 100644 wax-prosemirror-components/src/helpers/useDebounce.js
diff --git a/wax-prosemirror-components/package.json b/wax-prosemirror-components/package.json
index 27c88fbc0..19956e888 100644
--- a/wax-prosemirror-components/package.json
+++ b/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"
],
diff --git a/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js
index ab026e261..37436a96a 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js
+++ b/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');
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
index 3f103e40a..2a7b421c6 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
@@ -1,18 +1,13 @@
/* 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);
diff --git a/wax-prosemirror-components/src/helpers/useDebounce.js b/wax-prosemirror-components/src/helpers/useDebounce.js
new file mode 100644
index 000000000..63a074583
--- /dev/null
+++ b/wax-prosemirror-components/src/helpers/useDebounce.js
@@ -0,0 +1,19 @@
+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;
diff --git a/wax-prosemirror-core/package.json b/wax-prosemirror-core/package.json
index b61cdbf01..f1333a369 100644
--- a/wax-prosemirror-core/package.json
+++ b/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"
],
diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json
index 52755b313..04eb3e89e 100644
--- a/wax-prosemirror-plugins/package.json
+++ b/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"
],
diff --git a/wax-prosemirror-schema/package.json b/wax-prosemirror-schema/package.json
index a69f48741..c5aaf1444 100644
--- a/wax-prosemirror-schema/package.json
+++ b/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"
],
diff --git a/wax-prosemirror-services/package.json b/wax-prosemirror-services/package.json
index 79a224bfb..e1715d7cc 100644
--- a/wax-prosemirror-services/package.json
+++ b/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"
],
diff --git a/wax-prosemirror-utilities/package.json b/wax-prosemirror-utilities/package.json
index 1e4f33d6e..7fffb1f61 100644
--- a/wax-prosemirror-utilities/package.json
+++ b/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"
],
--
GitLab