Merge branch 'remove-if-empty-comment' into 'master'

Remove if empty comment

See merge request !127

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

@@ -18,6 +18,7 @@ export default ({ comment, activeView, user }) => {
   const {
     attrs: { conversation },
   } = comment;
+  const commentMark = state.schema.marks.comment;
 
   const handleKeyDown = event => {
     if (event.key === 'Enter' || event.which === 13) {
@@ -30,7 +31,6 @@ export default ({ comment, activeView, user }) => {
       current: { value },
     } = commentInput;
     const { tr, doc } = state;
-    const commentMark = state.schema.marks.comment;
 
     const obj = { [user.username]: value };
     commentAnnotation.attrs.conversation.push(obj);
@@ -59,6 +59,27 @@ export default ({ comment, activeView, user }) => {
     setcommentInputValue(value);
   };
 
+  const onBlur = () => {
+    const {
+      current: { value },
+    } = commentInput;
+    if (value !== '') {
+      // saveComment();
+    }
+
+    // TODO Also find fragmented marks
+    if (conversation.length === 0 && value === '') {
+      const commentPosition = DocumentHelpers.findMarkPosition(activeView, comment.pos, 'comment');
+      dispatch(state.tr.removeMark(commentPosition.from, commentPosition.to, commentMark));
+    }
+  };
+
+  const resolveComment = () => {
+    // TODO Also find fragmented marks
+    const commentPosition = DocumentHelpers.findMarkPoistion(activeView, comment.pos, 'comment');
+    dispatch(state.tr.removeMark(commentPosition.from, commentPosition.to, commentMark));
+  };
+
   const commentInputReply = () => {
     return (
       <>
@@ -68,6 +89,7 @@ export default ({ comment, activeView, user }) => {
           placeholder="add a new comment"
           onChange={updateCommentInputValue}
           onKeyPress={handleKeyDown}
+          onBlur={onBlur}
           onClick={event => {
             event.stopPropagation();
           }}
@@ -77,7 +99,9 @@ export default ({ comment, activeView, user }) => {
         <button type="button" onClick={saveComment}>
           Post
         </button>
-        <button type="button">Cancel</button>
+        <button type="button" onClick={resolveComment}>
+          Resolve
+        </button>
       </>
     );
   };
@@ -88,9 +112,7 @@ export default ({ comment, activeView, user }) => {
     <>
       {conversation.map((singleComment, index) => {
         return (
-          <SinlgeCommentRow key={uuidv4()}>{`${user.username} : ${
-            singleComment[user.username]
-          }`}</SinlgeCommentRow>
+          <SinlgeCommentRow key={uuidv4()}>{`${user.username} : ${singleComment[user.username]}`}</SinlgeCommentRow>
         );
       })}
       {commentInputReply()}

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

@@ -88,10 +88,7 @@ const findAllCommentsWithSameId = state => {
   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);
       }
     });
@@ -99,6 +96,23 @@ const findAllCommentsWithSameId = state => {
   return allCommentsWithSameId;
 };
 
+const findMarkPosition = (activeView, initialPos, markType) => {
+  let $pos = activeView.state.tr.doc.resolve(initialPos);
+  let parent = $pos.parent;
+  let start = parent.childAfter($pos.parentOffset);
+  if (!start.node) return null;
+  const actualMark = start.node.marks.find(mark => mark.type.name === markType);
+  let startIndex = $pos.index();
+  let startPos = $pos.start() + start.offset;
+  while (startIndex > 0 && actualMark.isInSet(parent.child(startIndex - 1).marks))
+    startPos -= parent.child(--startIndex).nodeSize;
+  let endIndex = $pos.indexAfter();
+  let endPos = startPos + start.node.nodeSize;
+  while (endPos < parent.childCount && actualMark.isInSet(parent.child(endIndex).marks))
+    endPos += parent.child(endIndex++).nodeSize;
+  return { from: startPos, to: endPos };
+};
+
 export const flatten = (node, descend = true) => {
   if (!node) {
     throw new Error('Invalid "node" parameter');
@@ -152,4 +166,5 @@ export default {
   getSelectionMark,
   findFragmentedMark,
   findAllCommentsWithSameId,
+  findMarkPosition,
 };