feat(find and replace): match case

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>

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

 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;

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;
   }
 `;
 

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 {