create decoration while typing

editors/editoria/src/layout/EditorElements.js

@@ -256,6 +256,10 @@ export default css`
     }
   }
 
+  span.search-result {
+    background: grey;
+  }
+
   /* == Math Nodes ======================================== */
 
   .math-node {

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

 /* eslint react/prop-types: 0 */
 
 import React, { useState, useRef, useContext } from 'react';
+import { Decoration, DecorationSet } from 'prosemirror-view';
 import styled from 'styled-components';
 import { grid, th } from '@pubsweet/ui-toolkit';
 import { WaxContext } from 'wax-prosemirror-core';
@@ -71,13 +72,12 @@ const FindComponent = ({ close, expand }) => {
   } = useContext(WaxContext);
 
   const {
-    state: { doc },
+    state: { doc, tr },
   } = main;
 
   const searchRef = useRef(null);
   const [searchValue, setsearchValue] = useState('');
   const [counterText, setCounterText] = useState('0 of 0');
-  const [stepCounter, setStepCounter] = useState('1');
   const findAndReplacePlugin = app.PmPlugins.get('findAndReplacePlugin');
 
   const onChange = () => {
@@ -125,7 +125,10 @@ const FindComponent = ({ close, expand }) => {
       }
     });
     findAndReplacePlugin.props.setResults(results);
+
     if (results.length > 0) setCounterText(`1 of ${results.length}`);
+    tr.setMeta('search', true);
+    main.dispatch(tr);
   };
 
   const closeFind = () => {

wax-prosemirror-plugins/src/findAndReplace/FindAndReplacePlugin.js

@@ -4,24 +4,48 @@ import { Decoration, DecorationSet } from 'prosemirror-view';
 
 const findAndReplacePlugin = new PluginKey('findAndReplacePlugin');
 
+let allResults = [];
 export default props => {
   return new Plugin({
     key: findAndReplacePlugin,
     state: {
       init: (_, state) => {
-        return {};
+        return DecorationSet.empty;
+      },
+      apply(tr, prev, _, newState) {
+        let createDecoration;
+        DecorationSet.empty;
+        console.log(allResults);
+        if (allResults.length > 0) {
+          createDecoration = DecorationSet.create(newState.doc, [
+            Decoration.inline(allResults[0].from, allResults[0].to, {
+              class: 'search-result',
+            }),
+          ]);
+        }
+        console.log(createDecoration);
+        return {
+          createDecoration,
+          DecorationSet,
+        };
       },
-      apply(tr, prev, _, newState) {},
     },
     props: {
       decorations: state => {
         const findAndReplacePluginState =
           state && findAndReplacePlugin.getState(state);
-        // return findAndReplacePluginState.createDecoration;
+        return findAndReplacePluginState.createDecoration;
       },
       setResults: results => {
-        console.log(results);
+        allResults = results;
       },
     },
+    view(editorState) {
+      return {
+        update: (view, _prevState) => {
+          console.log('in update');
+        },
+      };
+    },
   });
 };