Merge branch 'merge-annotations' into 'master'

show comments as one in plugin

See merge request !108

editors/editoria/src/Editoria.js

@@ -47,7 +47,7 @@ const Editoria = () => (
       autoFocus
       placeholder="Type Something..."
       fileUpload={file => renderImage(file)}
-      value={`<ul><li><p class="paragraph">this</p></li><li><p class="paragraph">that</p></li></ul><p class="paragraph">and a paragraph</p><p>more</p>`}
+      value={`<p class="paragraph"><span class="comment" data-id="834ba3c5-1fcf-4a42-8e2f-1f975f229716" data-conversation="[]" data-group="main">and a </span><span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="26541557" data-group=""><span class="comment" data-id="834ba3c5-1fcf-4a42-8e2f-1f975f229716" data-conversation="[]" data-group="main">sdasdssd</span></span><span class="comment" data-id="834ba3c5-1fcf-4a42-8e2f-1f975f229716" data-conversation="[]" data-group="main">paragraph</span></p><p class="paragraph">more</p>`}
       layout={EditoriaLayout}
       TrackChange
       // onChange={source => console.log(source)}

editors/editoria/src/config/config.js

@@ -56,9 +56,10 @@ export default {
 
   PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
 
-  // Always load first CommentsService and LinkService,
+  // Always load first TrackChangeService,
   //as it matters on how PM treats nodes and marks
   services: [
+    new TrackChangeService(),
     new CommentsService(),
     new LinkService(),
     new PlaceholderService(),
@@ -77,7 +78,6 @@ export default {
     new TextToolGroupService(),
     new AnnotationToolGroupService(),
     new NoteToolGroupService(),
-    new ListToolGroupService(),
-    new TrackChangeService()
+    new ListToolGroupService()
   ]
 };

wax-prosemirror-core/src/helpers/TransformPasted.js

+import { forEach } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { DocumentHelpers } from "wax-prosemirror-utilities";
 
@@ -15,15 +16,26 @@ const transformPasted = (slice, view) => {
     true
   );
 
-  const allComments = commentNodes.map(node => {
-    return node.node.marks.filter(comment => {
-      return comment.type.name === "comment";
+  const allComments = [];
+
+  commentNodes.map(node => {
+    node.node.marks.map(comment => {
+      if (comment.type.name === "comment") {
+        allComments.push(comment);
+      }
     });
   });
 
-  //TODO check to alter attr with transform
-  allComments.forEach(comment => {
-    comment[0].attrs.id = uuidv4();
+  let groupedCommentsById = allComments.reduce((obj, mark) => {
+    obj[mark.attrs.id] = [...(obj[mark.attrs.id] || []), mark];
+    return obj;
+  }, {});
+
+  forEach(Object.keys(groupedCommentsById), key => {
+    let id = uuidv4();
+    forEach(groupedCommentsById[key], comment => {
+      comment.attrs.id = id;
+    });
   });
 
   notes.forEach(note => {

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

+import { minBy, maxBy, last } from "lodash";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { DocumentHelpers } from "wax-prosemirror-utilities";
@@ -5,8 +6,44 @@ import { DocumentHelpers } from "wax-prosemirror-utilities";
 const activeComment = new PluginKey("activeComment");
 
 const getComment = state => {
+  if (state.selection.from !== state.selection.to) return;
+
   const commentMark = state.schema.marks["comment"];
-  return DocumentHelpers.findMark(state, commentMark);
+  const commentOnSelection = DocumentHelpers.findMark(state, commentMark);
+
+  if (commentOnSelection) {
+    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
+        ) {
+          allCommentsWithSameId.push(node);
+        }
+      });
+    });
+
+    if (allCommentsWithSameId.length > 1) {
+      const minPos = minBy(allCommentsWithSameId, "pos");
+      const maxPos = maxBy(allCommentsWithSameId, "pos");
+
+      return {
+        from: minPos.pos,
+        to: maxPos.pos + last(allCommentsWithSameId).node.nodeSize,
+        attrs: commentOnSelection.attrs,
+        contained: commentOnSelection.contained
+      };
+    }
+  }
+
+  return commentOnSelection;
 };
 
 export default props => {

wax-prosemirror-schema/src/marks/commentMark.js

@@ -6,6 +6,7 @@ const comment = {
     conversation: []
   },
   inclusive: false,
+  excludes: "",
   parseDOM: [
     {
       tag: "span.comment",

wax-prosemirror-services/src/NoteService/helpers/TransformPasted.js

+import { forEach } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { DocumentHelpers } from "wax-prosemirror-utilities";
 
@@ -9,15 +10,26 @@ const transformPasted = (slice, view) => {
     true
   );
 
-  const allComments = commentNodes.map(node => {
-    return node.node.marks.filter(comment => {
-      return comment.type.name === "comment";
+  const allComments = [];
+
+  commentNodes.map(node => {
+    node.node.marks.map(comment => {
+      if (comment.type.name === "comment") {
+        allComments.push(comment);
+      }
     });
   });
 
-  //TODO check to alter attr with transform
-  allComments.forEach(comment => {
-    comment[0].attrs.id = uuidv4();
+  let groupedCommentsById = allComments.reduce((obj, mark) => {
+    obj[mark.attrs.id] = [...(obj[mark.attrs.id] || []), mark];
+    return obj;
+  }, {});
+
+  forEach(Object.keys(groupedCommentsById), key => {
+    let id = uuidv4();
+    forEach(groupedCommentsById[key], comment => {
+      comment.attrs.id = id;
+    });
   });
 
   return slice;

wax-prosemirror-services/src/SchemaService/Mark.js

@@ -10,6 +10,7 @@ export default class Mark {
   group = "";
   content = "";
   draggable = false;
+  inclusive = true;
   _attrs = {};
   _parseRules = [];
 
@@ -60,6 +61,7 @@ export default class Mark {
       group: this.group,
       content: this.content,
       draggable: this.draggable,
+      inclusive: this.inclusive,
       attrs: this._attrs,
       parseDOM: this._parseRules.map(rule => rule.combineRules()),
       toDOM: node => {