plugin state

editors/editoria/src/layout/EditorElements.js

@@ -248,6 +248,14 @@ export default css`
     height: 100%;
   }
 
+  .insertion .show-insertion {
+    color: black;
+  }
+
+  .deletion .hide-deletion {
+    display: none;
+  }
+
   li[data-track]::before,
   li [data-track]::before {
     left: -5px;

wax-prosemirror-plugins/src/trackChanges/HideShowPlugin.js

@@ -6,19 +6,78 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
 
 const hideShowPlugin = new PluginKey('hideShowPlugin');
 
+const getTrackChanges = state => {
+  const finalTracks = [];
+  const allInlineNodes = DocumentHelpers.findInlineNodes(state.doc);
+  allInlineNodes.map(node => {
+    if (node.node.marks.length > 0) {
+      node.node.marks.filter(mark => {
+        if (
+          mark.type.name === 'insertion' ||
+          mark.type.name === 'deletion' ||
+          mark.type.name === 'format_change'
+        ) {
+          mark.pos = node.pos;
+          finalTracks.push(mark);
+        }
+      });
+    }
+  });
+  return finalTracks;
+};
+
 export default props => {
   return new Plugin({
     key: hideShowPlugin,
     state: {
-      init: (_, state) => {},
+      init: (_, state) => {
+        return DecorationSet.empty;
+      },
       apply(tr, prev, _, newState) {
-        console.log('in apply');
+        let decorations;
+        let createdDecorations = DecorationSet.empty;
+        const allMatches = getTrackChanges(newState);
+        console.log('in apply', allMatches);
+        if (allMatches.length > 0) {
+          decorations = allMatches.map((result, index) => {
+            if (result.type.name === 'insertion') {
+              const position = DocumentHelpers.findMarkPosition(
+                newState,
+                result.pos,
+                'insertion',
+              );
+
+              return Decoration.inline(position.from, position.to, {
+                class: 'show-insertion',
+              });
+            }
+            if (result.type.name === 'deletion') {
+              const position = DocumentHelpers.findMarkPosition(
+                newState,
+                result.pos,
+                'deletion',
+              );
+
+              return Decoration.inline(position.from, position.to, {
+                class: 'hide-deletion',
+              });
+            }
+          });
+          createdDecorations = DecorationSet.create(newState.doc, decorations);
+        }
+        return {
+          createdDecorations,
+          allMatches,
+        };
       },
     },
     props: {
       decorations: state => {
         const hideShowPluginState = state && hideShowPlugin.getState(state);
-        // return hideShowPluginState.createDecoration;
+        return hideShowPluginState.createdDecorations;
+      },
+      hideShow: show => {
+        console.log(show);
       },
     },
   });