show comments as one in plugin

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

@@ -59,6 +59,7 @@ export default {
   // Always load first CommentsService and LinkService,
   //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-plugins/src/comments/ActiveComment.js

+import { minBy, maxBy } from "lodash";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { DocumentHelpers } from "wax-prosemirror-utilities";
@@ -6,7 +7,37 @@ const activeComment = new PluginKey("activeComment");
 
 const getComment = state => {
   const commentMark = state.schema.marks["comment"];
-  return DocumentHelpers.findMark(state, commentMark);
+  const commentOnSelection = DocumentHelpers.findMark(state, commentMark);
+  if (commentOnSelection) {
+    const allInlineNodes = DocumentHelpers.findInlineNodes(state.doc);
+    const allCommentsWithSameId = [];
+
+    allInlineNodes.map(node => {
+      node.node.marks.filter(mark => {
+        if (
+          mark.type.name === "comment" &&
+          commentOnSelection.attrs.id === mark.attrs.id
+        ) {
+          mark.from = node.pos;
+          mark.to = node.pos + node.node.text.length;
+          allCommentsWithSameId.push(mark);
+        }
+      });
+    });
+    if (allCommentsWithSameId.length > 1) {
+      const minPos = minBy(allCommentsWithSameId, "from");
+      const maxPos = maxBy(allCommentsWithSameId, "to");
+
+      return {
+        from: minPos.from,
+        to: maxPos.to,
+        attrs: commentOnSelection.attrs,
+        contained: commentOnSelection.contained
+      };
+    }
+  }
+
+  return commentOnSelection;
 };
 
 export default props => {