comments on notes fix

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

@@ -16,6 +16,7 @@ export default ({ area }) => {
   } = useContext(WaxContext);
   const commentPlugin = app.PmPlugins.get('commentPlugin');
   const [marksNodes, setMarksNodes] = useState([]);
+
   const [position, setPosition] = useState();
   const [isFirstRun, setFirstRun] = useState(true);
 
@@ -63,12 +64,15 @@ export default ({ area }) => {
             markNodeEl.getBoundingClientRect().top - panelWrapperHeight - 50;
       }
 
+      let boxEl = null;
       // get height of this markNode box
-      const boxEl = document.querySelector(`div[data-box="${id}"]`);
+      if (markNodeEl) {
+        boxEl = document.querySelector(`div[data-box="${id}"]`);
+      }
       if (boxEl) boxHeight = parseInt(boxEl.offsetHeight, 10);
 
       // where the box should move to
-      top = annotationTop;
+      top = boxEl ? annotationTop : -2000;
 
       // if the above comment box has already taken up the height, move down
       if (pos > 0) {
@@ -156,7 +160,6 @@ export default ({ area }) => {
   return <>{CommentTrackComponent}</>;
 };
 
-//  TODO if allInlineNodes and allBlockNodes count don't change, do not compute again
 const updateMarks = view => {
   if (view.main) {
     const allInlineNodes = [];

wax-prosemirror-services/src/NoteService/NoteComponent.js

 import React, { useContext, useState, useMemo } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-
+import { differenceBy } from 'lodash';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
 import NoteEditor from './NoteEditor';
@@ -22,14 +22,17 @@ export default () => {
       );
       if (notes.length > currentNotes.length) {
         // TODO remove from context views that no loger exist
-        // console.log('to do cleanup');
+        const difference = differenceBy(notes, currentNotes, 'node.attrs.id');
+        difference.forEach((item, i) => {
+          // delete view[item.node.attrs.id];
+        });
       }
     }
   };
 
   useDeepCompareEffect(() => {
     setNotes(updateNotes(main));
-    cleanUpNoteViews();
+    // cleanUpNoteViews();
   }, [updateNotes(main)]);
 
   const noteComponent = useMemo(