feat(track-change): add active

wax-prosemirror-components/src/components/rightArea/RightArea.js

@@ -15,6 +15,8 @@ export default ({ area }) => {
     activeView,
   } = useContext(WaxContext);
   const commentPlugin = app.PmPlugins.get('commentPlugin');
+  const trakChangePlugin = app.PmPlugins.get('trackChngePlugin');
+
   const [marksNodes, setMarksNodes] = useState([]);
 
   const [position, setPosition] = useState();
@@ -39,9 +41,15 @@ export default ({ area }) => {
         markNode instanceof Mark ? markNode.attrs.id : markNode.node.attrs.id;
 
       const activeComment = commentPlugin.getState(activeView.state).comment;
+      const activeTrackChange = trakChangePlugin.getState(activeView.state)
+        .trackChange;
 
       let isActive = false;
-      if (activeComment && id === activeComment.attrs.id) isActive = true;
+      if (
+        (activeComment && id === activeComment.attrs.id) ||
+        (activeTrackChange && id === activeTrackChange.attrs.id)
+      )
+        isActive = true;
 
       // annotation top
       if (area === 'main') {
@@ -120,7 +128,6 @@ export default ({ area }) => {
         }
       }
     });
-    console.log(allCommentsTop);
     return allCommentsTop;
   });
 

wax-prosemirror-components/src/components/trackChanges/ConnectedTrackChange.js

@@ -29,12 +29,19 @@ export default ({ trackChangeId, top, recalculateTops }) => {
   } = useContext(WaxContext);
 
   const { state, dispatch } = activeView;
-  console.log('topp', top, trackChangeId);
+  let active = false;
   const styles = {
     top: `${top}px`,
   };
 
-  const active = false;
+  const trakChangePlugin = app.PmPlugins.get('trackChngePlugin');
+  const activeTrackChange = trakChangePlugin.getState(activeView.state)
+    .trackChange;
+
+  if (activeTrackChange && trackChangeId === activeTrackChange.attrs.id) {
+    active = true;
+    recalculateTops();
+  }
 
   const MemorizedTrackChange = useMemo(
     () => (

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

@@ -25,6 +25,7 @@ export default options => {
         } = state;
 
         let { decos } = this.getState(oldState);
+        let currentTrackSelected;
         decos = DecorationSet.empty;
         if (tr.selectionSet) {
           const { insertion, deletion, formatChange } = findSelectedChanges(
@@ -68,6 +69,7 @@ export default options => {
             ]);
           }
           if (formatChange) {
+            if (from === to) currentTrackSelected = formatChange;
             decos = decos.add(tr.doc, [
               decoType(formatChange.from, formatChange.to, {
                 class: 'selected-format-change',
@@ -78,6 +80,7 @@ export default options => {
           decos = decos.map(tr.mapping, tr.doc);
         }
         return {
+          trackChange: currentTrackSelected,
           decos,
         };
       },