finish remove if empty and resolve comment

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

 import React, { useState, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-
+import { last } from 'lodash';
 import styled from 'styled-components';
-import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
 
 const SinlgeCommentRow = styled.div`
@@ -15,6 +14,7 @@ export default ({ comment, activeView, user }) => {
   const [commentAnnotation, setCommentAnnotation] = useState(comment);
   const [commentInputValue, setcommentInputValue] = useState('');
   const { state, dispatch } = activeView;
+  const allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(state, comment);
   const {
     attrs: { conversation },
   } = comment;
@@ -26,7 +26,9 @@ export default ({ comment, activeView, user }) => {
     }
   };
 
-  const saveComment = () => {
+  const saveComment = event => {
+    event.stopPropagation();
+
     const {
       current: { value },
     } = commentInput;
@@ -34,8 +36,8 @@ export default ({ comment, activeView, user }) => {
 
     const obj = { [user.username]: value };
     commentAnnotation.attrs.conversation.push(obj);
-    const allComments = DocumentHelpers.findAllCommentsWithSameId(state);
-    allComments.forEach(singleComment => {
+
+    allCommentsWithSameId.forEach(singleComment => {
       dispatch(
         tr.addMark(
           singleComment.pos,
@@ -67,14 +69,24 @@ export default ({ comment, activeView, user }) => {
     }
 
     if (conversation.length === 0 && value === '') {
-      const commentPosition = DocumentHelpers.findMarkPosition(activeView, comment.pos, 'comment');
-      dispatch(state.tr.removeMark(commentPosition.from, commentPosition.to, commentMark));
+      resolveComment();
     }
   };
 
-  const resolveComment = () => {
-    const commentPosition = DocumentHelpers.findMarkPosition(activeView, comment.pos, 'comment');
-    dispatch(state.tr.removeMark(commentPosition.from, commentPosition.to, commentMark));
+  const resolveComment = event => {
+    event.stopPropagation();
+    let maxPos = comment.pos;
+    let minPos = comment.pos;
+
+    allCommentsWithSameId.forEach(singleComment => {
+      const markPosition = DocumentHelpers.findMarkPosition(activeView, singleComment.pos, 'comment');
+      if (markPosition.from < minPos) minPos = markPosition.from;
+      if (markPosition.to > maxPos) maxPos = markPosition.to;
+    });
+
+    if (allCommentsWithSameId.length > 1) maxPos += last(allCommentsWithSameId).node.nodeSize;
+    dispatch(state.tr.removeMark(minPos, maxPos, commentMark));
+    activeView.focus();
   };
 
   const commentInputReply = () => {
@@ -93,10 +105,10 @@ export default ({ comment, activeView, user }) => {
           autoFocus
           value={commentInputValue}
         />
-        <button type="button" onClick={saveComment}>
+        <button type="button" onClick={event => saveComment(event)}>
           Post
         </button>
-        <button type="button" onClick={resolveComment}>
+        <button type="button" onClick={event => resolveComment(event)}>
           Resolve
         </button>
       </>

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

 import React, { useState, useEffect, useContext } from 'react';
 import { TextSelection } from 'prosemirror-state';
+import { last } from 'lodash';
 
 import { Transition } from 'react-transition-group';
 import styled from 'styled-components';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
 import { WaxContext } from 'wax-prosemirror-core';
 import Comment from './Comment';
-import { DocumentHelpers } from 'wax-prosemirror-utilities';
 
 const CommentBoxStyled = styled.div`
   display: flex;
@@ -57,13 +58,19 @@ export default ({ comment, top, dataBox }) => {
   }, []);
 
   const setCommentActive = () => {
-    let commentPos = comment.pos;
     const viewId = comment.attrs.viewid;
+    let maxPos = comment.pos;
+    const allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(view[viewId].state, comment);
+
+    allCommentsWithSameId.forEach(singleComment => {
+      const markPosition = DocumentHelpers.findMarkPosition(view[viewId], singleComment.pos, 'comment');
+      if (markPosition.to > maxPos) maxPos = markPosition.to;
+    });
+
+    if (!active && allCommentsWithSameId.length > 1) maxPos += last(allCommentsWithSameId).node.nodeSize;
 
     view[viewId].dispatch(
-      view[viewId].state.tr.setSelection(
-        new TextSelection(view[viewId].state.tr.doc.resolve(commentPos + 1, commentPos + 1)),
-      ),
+      view[viewId].state.tr.setSelection(new TextSelection(view[viewId].state.tr.doc.resolve(maxPos, maxPos))),
     );
 
     view[viewId].focus();

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, throttle } from 'lodash';
+import { each, uniqBy, sortBy } from 'lodash';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
 import BoxList from './BoxList';

wax-prosemirror-plugins/src/comments/CommentPlugin.js

@@ -7,10 +7,7 @@ const commentPlugin = new PluginKey('commentPlugin');
 
 const getComment = state => {
   const commentMark = state.schema.marks.comment;
-  const commentOnSelection = DocumentHelpers.findFragmentedMark(
-    state,
-    commentMark,
-  );
+  const commentOnSelection = DocumentHelpers.findFragmentedMark(state, commentMark);
 
   // Don't allow Active comment if selection is not collapsed
   if (
@@ -22,19 +19,12 @@ const getComment = state => {
   }
 
   if (commentOnSelection) {
-    const commentNodes = DocumentHelpers.findChildrenByMark(
-      state.doc,
-      commentMark,
-      true,
-    );
+    const commentNodes = DocumentHelpers.findChildrenByMark(state.doc, commentMark, true);
 
     const allCommentsWithSameId = [];
     commentNodes.map(node => {
       node.node.marks.filter(mark => {
-        if (
-          mark.type.name === 'comment' &&
-          commentOnSelection.attrs.id === mark.attrs.id
-        ) {
+        if (mark.type.name === 'comment' && commentOnSelection.attrs.id === mark.attrs.id) {
           allCommentsWithSameId.push(node);
         }
       });

wax-prosemirror-utilities/src/document/DocumentHelpers.js

@@ -48,7 +48,7 @@ const getSelectionMark = (state, PMmark) => {
 };
 
 /* this is a workaround for now to find marks
-  that are pm will break them
+  that are pm will break them.
 */
 const findFragmentedMark = (state, PMmark) => {
   const {
@@ -79,21 +79,21 @@ const findFragmentedMark = (state, PMmark) => {
   return markFound;
 };
 
-const findAllCommentsWithSameId = state => {
-  const commentMark = state.schema.marks.comment;
-  const commentOnSelection = findFragmentedMark(state, commentMark);
+const findAllMarksWithSameId = (state, mark) => {
+  const type = mark.type.name;
+  const markType = state.schema.marks[type];
 
-  const commentNodes = findChildrenByMark(state.doc, commentMark, true);
+  const allNodes = findChildrenByMark(state.doc, markType, true);
 
-  const allCommentsWithSameId = [];
-  commentNodes.map(node => {
-    node.node.marks.filter(mark => {
-      if (mark.type.name === 'comment' && commentOnSelection.attrs.id === mark.attrs.id) {
-        allCommentsWithSameId.push(node);
+  const allMarksWithSameId = [];
+  allNodes.map(node => {
+    node.node.marks.filter(value => {
+      if (mark.type.name === type && mark.attrs.id === value.attrs.id) {
+        allMarksWithSameId.push(node);
       }
     });
   });
-  return allCommentsWithSameId;
+  return allMarksWithSameId;
 };
 
 // TODO Also find fragmented marks
@@ -166,6 +166,6 @@ export default {
   findChildrenByAttr,
   getSelectionMark,
   findFragmentedMark,
-  findAllCommentsWithSameId,
+  findAllMarksWithSameId,
   findMarkPosition,
 };