fix position when it's first computed

wax-prosemirror-components/src/components/comments/Comment.js

@@ -34,7 +34,6 @@ export default ({ comment, activeView, user }) => {
 
     const obj = { [user.username]: value };
     commentAnnotation.attrs.conversation.push(obj);
-
     const allComments = DocumentHelpers.findAllCommentsWithSameId(state);
     allComments.forEach(singleComment => {
       dispatch(
@@ -67,7 +66,6 @@ export default ({ comment, activeView, user }) => {
       // saveComment();
     }
 
-    // TODO pass correct comment pos for notes
     if (conversation.length === 0 && value === '') {
       const commentPosition = DocumentHelpers.findMarkPosition(activeView, comment.pos, 'comment');
       dispatch(state.tr.removeMark(commentPosition.from, commentPosition.to, commentMark));
@@ -75,8 +73,7 @@ export default ({ comment, activeView, user }) => {
   };
 
   const resolveComment = () => {
-    // TODO pass correct comment pos for notes
-    const commentPosition = DocumentHelpers.findMarkPoistion(activeView, comment.pos, 'comment');
+    const commentPosition = DocumentHelpers.findMarkPosition(activeView, comment.pos, 'comment');
     dispatch(state.tr.removeMark(commentPosition.from, commentPosition.to, commentMark));
   };
 

wax-prosemirror-components/src/components/comments/CommentBox.js

@@ -60,29 +60,9 @@ export default ({ comment, top, dataBox }) => {
     let commentPos = comment.pos;
     const viewId = comment.attrs.viewid;
 
-    if (comment.attrs.group !== 'main') {
-      const allInlineNodes = DocumentHelpers.findInlineNodes(
-        view[viewId].state.doc,
-      );
-
-      allInlineNodes.forEach(node => {
-        if (node.node.marks.length > 0) {
-          node.node.marks.forEach(mark => {
-            if (
-              mark.type.name === 'comment' &&
-              mark.attrs.id === comment.attrs.id
-            ) {
-              commentPos = node.pos;
-            }
-          });
-        }
-      });
-    }
     view[viewId].dispatch(
       view[viewId].state.tr.setSelection(
-        new TextSelection(
-          view[viewId].state.tr.doc.resolve(commentPos + 1, commentPos + 1),
-        ),
+        new TextSelection(view[viewId].state.tr.doc.resolve(commentPos + 1, commentPos + 1)),
       ),
     );
 
@@ -93,19 +73,8 @@ export default ({ comment, top, dataBox }) => {
     <>
       <Transition in={animate} timeout={1000}>
         {state => (
-          <CommentBoxStyled
-            top={top}
-            state={state}
-            data-box={dataBox}
-            active={active}
-            onClick={setCommentActive}
-          >
-            <Comment
-              comment={comment}
-              active={active}
-              activeView={activeView}
-              user={user}
-            />
+          <CommentBoxStyled top={top} state={state} data-box={dataBox} active={active} onClick={setCommentActive}>
+            <Comment comment={comment} active={active} activeView={activeView} user={user} />
           </CommentBoxStyled>
         )}
       </Transition>

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

 import { Mark } from 'prosemirror-model';
-import React, {
-  useContext,
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-} from 'react';
-import { each, uniqBy, sortBy } from 'lodash';
+import React, { useContext, useState, useEffect, useMemo, useCallback } from 'react';
+import { each, uniqBy, sortBy, throttle } from 'lodash';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
 import BoxList from './BoxList';
 
 export default ({ area }) => {
   const {
+    view,
     view: { main },
     app,
     activeView,
@@ -29,10 +24,11 @@ export default ({ area }) => {
     let top = 0;
     const allCommentsTop = [];
 
-    each(marksNodes[area], (markNode, pos) => {
+    const nodesMarksToIterrate = marksNodes[area] === 'main' ? sortBy(marksNodes[area], ['pos']) : marksNodes[area];
+
+    each(nodesMarksToIterrate, (markNode, pos) => {
       const WaxSurface = main.dom.getBoundingClientRect();
-      const id =
-        markNode instanceof Mark ? markNode.attrs.id : markNode.node.attrs.id;
+      const id = markNode instanceof Mark ? markNode.attrs.id : markNode.node.attrs.id;
 
       const activeComment = commentPlugin.getState(activeView.state).comment;
 
@@ -42,19 +38,12 @@ export default ({ area }) => {
       // annotation top
       if (area === 'main') {
         markNodeEl = document.querySelector(`[data-id="${id}"]`);
-        if (markNodeEl)
-          annotationTop =
-            markNodeEl.getBoundingClientRect().top - WaxSurface.top;
+        if (markNodeEl) annotationTop = markNodeEl.getBoundingClientRect().top - WaxSurface.top;
       } else {
         const panelWrapper = document.getElementsByClassName('panelWrapper');
-        const panelWrapperHeight = panelWrapper[0].getBoundingClientRect()
-          .height;
-        markNodeEl = document
-          .querySelector('#notes-container')
-          .querySelector(`[data-id="${id}"]`);
-        if (markNodeEl)
-          annotationTop =
-            markNodeEl.getBoundingClientRect().top - panelWrapperHeight - 50;
+        const panelWrapperHeight = panelWrapper[0].getBoundingClientRect().height;
+        markNodeEl = document.querySelector('#notes-container').querySelector(`[data-id="${id}"]`);
+        if (markNodeEl) annotationTop = markNodeEl.getBoundingClientRect().top - panelWrapperHeight - 50;
       }
 
       // get height of this markNode box
@@ -118,28 +107,27 @@ export default ({ area }) => {
   });
 
   useEffect(() => {
-    setMarksNodes(updateMarks(main));
+    setMarksNodes(updateMarks(view));
     setPosition(setTops());
-  }, [JSON.stringify(updateMarks(main)), JSON.stringify(setTops())]);
+  }, [JSON.stringify(updateMarks(view)), JSON.stringify(setTops())]);
 
   const CommentTrackComponent = useMemo(
-    () => (
-      <BoxList
-        commentsTracks={marksNodes[area] || []}
-        area={area}
-        view={main}
-        position={position}
-      />
-    ),
+    () => <BoxList commentsTracks={marksNodes[area] || []} area={area} view={main} position={position} />,
     [marksNodes[area] || [], position],
   );
   return <>{CommentTrackComponent}</>;
 };
 
+//  TODO if allInlineNodes and allBlockNodes count don't change, do not compute again
 const updateMarks = view => {
-  if (view) {
-    const allBlockNodes = DocumentHelpers.findBlockNodes(view.state.doc);
-    const allInlineNodes = DocumentHelpers.findInlineNodes(view.state.doc);
+  if (view.main) {
+    const allInlineNodes = [];
+
+    Object.keys(view).forEach(eachView => {
+      allInlineNodes.push(...DocumentHelpers.findInlineNodes(view[eachView].state.doc));
+    });
+
+    const allBlockNodes = DocumentHelpers.findBlockNodes(view.main.state.doc);
     const finalMarks = [];
     const finalNodes = [];
 
@@ -152,7 +140,6 @@ const updateMarks = view => {
             mark.type.name === 'deletion' ||
             mark.type.name === 'format_change'
           ) {
-            // THIS POSITION REFERS TO THE MAIN VIEW
             mark.pos = node.pos;
             finalMarks.push(mark);
           }
@@ -170,10 +157,8 @@ const updateMarks = view => {
 
     const groupedMarkNodes = {};
 
-    sortBy(nodesAndMarks, ['pos']).forEach(markNode => {
-      const markNodeAttrs = markNode.attrs
-        ? markNode.attrs
-        : markNode.node.attrs;
+    nodesAndMarks.forEach(markNode => {
+      const markNodeAttrs = markNode.attrs ? markNode.attrs : markNode.node.attrs;
 
       if (!groupedMarkNodes[markNodeAttrs.group]) {
         groupedMarkNodes[markNodeAttrs.group] = [markNode];