diff --git a/wax-prosemirror-components/src/components/comments/Comment.js b/wax-prosemirror-components/src/components/comments/Comment.js
index fd1c59c3a1687bb4fabe554981efac07054f8b74..81e9076e06db7730dc62c2405e7df3b98f3167fb 100644
--- a/wax-prosemirror-components/src/components/comments/Comment.js
+++ b/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));
};
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index d83be1b939837841e8fe6565a20534a8db4de23f..610bb3da8ce566b5d0cfe33ad884d7b88c31bb8c 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/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>
diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
index cf2e8b704005909f0f8e2b0b4292d61d4d3d9385..1be82ff3a65fe48ca0dfd1f68d46f0d16a40b11f 100644
--- a/wax-prosemirror-components/src/components/rightArea/RightArea.js
+++ b/wax-prosemirror-components/src/components/rightArea/RightArea.js
@@ -1,18 +1,13 @@
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];