From cb4c3c9a0f9b512e5eb83819d350afc2b9bab1b0 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 31 Dec 2020 22:30:52 +0200
Subject: [PATCH] feat(find and replace): match case
---
.../findAndReplace/FindComponent.js | 30 +++++++++++--------
.../src/components/findAndReplace/helpers.js | 8 ++---
.../trackChanges/TrackChangesBox.js | 5 ++--
.../findAndReplace/FindAndReplacePlugin.js | 6 +++-
4 files changed, 30 insertions(+), 19 deletions(-)
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
index 50977aa19..721460f20 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
@@ -34,28 +34,30 @@ const SearchInputWrapper = styled.div`
`;
const SearchInput = styled.input`
+ border: none;
+ border-radius: 2px;
+ box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
font-size: 15px;
font-weight: 400;
- border-radius: 2px;
- border: none;
padding: ${grid(1)} ${grid(10)} ${grid(1)} ${grid(1)};
width: 78%;
- box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
+
::placeholder {
color: #d8dae0;
}
+
&:focus {
outline: none;
}
`;
const CounterInput = styled.span`
+ font-size: 12px;
position: absolute;
right: 155px;
+ -webkit-text-fill-color: rgba(27, 43, 75, 0.28);
top: 13px;
z-index: 1;
- font-size: 12px;
- -webkit-text-fill-color: rgba(27, 43, 75, 0.28);
`;
const StyledIcon = styled(Icon)`
@@ -97,8 +99,10 @@ const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
const searchRef = useRef(null);
const [searchValue, setSearchValue] = useState('');
const [counterText, setCounterText] = useState('0 of 0');
+ const [matchCaseSearch, setMatchCaseSearch] = useState(false);
const findAndReplacePlugin = app.PmPlugins.get('findAndReplacePlugin');
const [isFirstRun, setFirstRun] = useState(true);
+
const allStates = [];
each(view, (singleView, viewId) => {
@@ -107,7 +111,7 @@ const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
const delayedSearch = useCallback(
debounce(() => searchDocument(), 300),
- [searchValue],
+ [searchValue, matchCaseSearch],
);
const onChange = () => {
@@ -122,13 +126,14 @@ const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
setFirstRun(false);
});
}
- }, [searchValue, delayedSearch, JSON.stringify(allStates)]);
+ }, [searchValue, delayedSearch, matchCaseSearch, JSON.stringify(allStates)]);
const searchDocument = () => {
setCounterText('0 of 0');
let counter = 0;
findAndReplacePlugin.props.setSearchText(searchValue);
- counter = helpers.getMatchesByView(view, searchValue);
+ findAndReplacePlugin.props.setSearchMatchCase(matchCaseSearch);
+ counter = helpers.getMatchesByView(view, searchValue, matchCaseSearch);
if (counter > 0) setCounterText(`1 of ${counter}`);
@@ -153,15 +158,16 @@ const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
};
const matchCase = () => {
- console.log('match case');
+ setMatchCaseSearch(!matchCaseSearch);
+ searchRef.current.focus();
};
const findNext = () => {
- console.log('next');
+ // console.log('next');
};
const findPrevious = () => {
- console.log('previous');
+ // console.log('previous');
};
return (
@@ -178,7 +184,7 @@ const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
<CounterInput> {counterText} </CounterInput>
</SearchInputWrapper>
<IconWrapper onClick={matchCase} role="button" tabIndex="0">
- <Svg active fill="none" viewBox="0 0 24 24">
+ <Svg active={matchCaseSearch} fill="none" viewBox="0 0 24 24">
<title> Match Case </title>
<path d="M2.5,4v3h5v12h3V7h5V4H2.5z M21.5,9h-9v3h3v7h3v-7h3V9z" />
</Svg>
diff --git a/wax-prosemirror-components/src/components/findAndReplace/helpers.js b/wax-prosemirror-components/src/components/findAndReplace/helpers.js
index 12602b236..622557b1f 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/helpers.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/helpers.js
@@ -1,6 +1,6 @@
import { each, eachRight } from 'lodash';
-const findMatches = (doc, searchValue) => {
+const findMatches = (doc, searchValue, matchCase) => {
const allNodes = [];
doc.descendants((node, pos) => {
@@ -35,7 +35,7 @@ const findMatches = (doc, searchValue) => {
}
});
mergedTextNodes.forEach(({ text, pos }) => {
- const search = RegExp(searchValue, 'gui');
+ const search = RegExp(searchValue, matchCase ? 'gu' : 'gui');
let m;
// eslint-disable-next-line no-cond-assign
while ((m = search.exec(text))) {
@@ -52,10 +52,10 @@ const findMatches = (doc, searchValue) => {
return results;
};
-const getMatchesByView = (views, searchValue) => {
+const getMatchesByView = (views, searchValue, matchCase) => {
let allResults = 0;
each(views, (singleView, viewId) => {
- const results = findMatches(singleView.state.doc, searchValue);
+ const results = findMatches(singleView.state.doc, searchValue, matchCase);
allResults += results.length;
});
return allResults;
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
index 0e10d9062..bb02b5df2 100644
--- a/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
+++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
@@ -8,10 +8,11 @@ import icons from '../../icons/icons';
const { check, times } = icons;
const activeBorder = css`
- border-color: gray;
+ border-color: #bfc4cd;
`;
const Wrapper = styled.div`
+ background: #f5f5f5;
border: 2px solid transparent;
border-radius: 5px;
cursor: pointer;
@@ -66,7 +67,7 @@ const Icon = styled.div`
width: 16px;
&:hover {
- background: gray;
+ background: #bfc4cd;
}
`;
diff --git a/wax-prosemirror-plugins/src/findAndReplace/FindAndReplacePlugin.js b/wax-prosemirror-plugins/src/findAndReplace/FindAndReplacePlugin.js
index d625d7b5a..3eafc6437 100644
--- a/wax-prosemirror-plugins/src/findAndReplace/FindAndReplacePlugin.js
+++ b/wax-prosemirror-plugins/src/findAndReplace/FindAndReplacePlugin.js
@@ -5,6 +5,7 @@ import { eachRight } from 'lodash';
const findAndReplacePlugin = new PluginKey('findAndReplacePlugin');
let searchText = '';
+let matchCase = false;
const findMatches = (doc, searchValue) => {
const allNodes = [];
@@ -41,7 +42,7 @@ const findMatches = (doc, searchValue) => {
}
});
mergedTextNodes.forEach(({ text, pos }) => {
- const search = RegExp(searchValue, 'gui');
+ const search = RegExp(searchValue, matchCase ? 'gu' : 'gui');
let m;
// eslint-disable-next-line no-cond-assign
while ((m = search.exec(text))) {
@@ -92,6 +93,9 @@ export default props => {
setSearchText: text => {
searchText = text;
},
+ setSearchMatchCase: searchCase => {
+ matchCase = searchCase;
+ },
},
view(editorState) {
return {
--
GitLab