new comment discussion structure

.prettierrc.js

@@ -6,6 +6,6 @@ const { prettier } = require('@coko/lint');
  * prettier.semi = true
  *
  */
-prettier.printWidth = 120;
+
 prettier.semi = true;
 module.exports = prettier;

editors/editoria/src/Editoria.js

@@ -47,9 +47,9 @@ const Editoria = () => (
       autoFocus
       placeholder="Type Something..."
       fileUpload={file => renderImage(file)}
-      value={`<p class="paragraph">This is the first paragraph</p><p class="paragraph">This is the <span class="comment" data-id="203df89d-294b-4e35-b48c-408e135ee8fa" data-conversation="[{&quot;demo&quot;:&quot;comment&quot;}]" data-viewid="main" data-group="main">second</span> paragraph</p><p class="author">This is an author</p>`}
+      value={`<p class="paragraph">This is the first paragraph</p><p class="paragraph">This is the second paragraph</p><p class="author">This is an author</p>`}
       layout={EditoriaLayout}
-      TrackChange
+      // TrackChange
       // onChange={source => console.log(source)}
       user={user}
     />

editors/editoria/src/config/config.js

-import { emDash, ellipsis } from "prosemirror-inputrules";
-import { columnResizing, tableEditing } from "prosemirror-tables";
+import { emDash, ellipsis } from 'prosemirror-inputrules';
+import { columnResizing, tableEditing } from 'prosemirror-tables';
 import {
   AnnotationToolGroupService,
   ImageService,
@@ -20,37 +20,37 @@ import {
   NoteService,
   NoteToolGroupService,
   TrackChangeService,
-  CommentsService
-} from "wax-prosemirror-services";
+  CommentsService,
+} from 'wax-prosemirror-services';
 
-import { WaxSelectionPlugin } from "wax-prosemirror-plugins";
+import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
 
 import invisibles, {
   space,
   hardBreak,
-  paragraph
-} from "@guardian/prosemirror-invisibles";
+  paragraph,
+} from '@guardian/prosemirror-invisibles';
 
 export default {
   MenuService: [
     {
-      templateArea: "topBar",
+      templateArea: 'topBar',
       toolGroups: [
-        "Base",
+        'Base',
         {
-          name: "Annotations",
-          more: ["Superscript", "Subscript", "SmallCaps"]
+          name: 'Annotations',
+          more: ['Superscript', 'Subscript', 'SmallCaps'],
         },
-        "Notes",
-        "Lists",
-        "Images",
-        "Tables"
-      ]
+        'Notes',
+        'Lists',
+        'Images',
+        'Tables',
+      ],
     },
     {
-      templateArea: "leftSideBar",
-      toolGroups: ["Display", "Text"]
-    }
+      templateArea: 'leftSideBar',
+      toolGroups: ['Display', 'Text'],
+    },
   ],
 
   RulesService: [emDash, ellipsis],
@@ -60,7 +60,7 @@ export default {
     columnResizing(),
     tableEditing(),
     invisibles([hardBreak()]),
-    WaxSelectionPlugin
+    WaxSelectionPlugin,
   ],
 
   // Always load first CommentsService and LinkService,
@@ -85,6 +85,6 @@ export default {
     new ImageToolGroupService(),
     new AnnotationToolGroupService(),
     new NoteToolGroupService(),
-    new ListToolGroupService()
-  ]
+    new ListToolGroupService(),
+  ],
 };

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

@@ -14,7 +14,10 @@ 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 allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(
+    state,
+    comment,
+  );
   const {
     attrs: { conversation },
   } = comment;
@@ -34,7 +37,12 @@ export default ({ comment, activeView, user }) => {
     } = commentInput;
     const { tr, doc } = state;
 
-    const obj = { [user.username]: value };
+    const obj = {
+      content: value,
+      displayName: user.username,
+      timestamp: Math.floor(Date.now() / 300000),
+    };
+
     commentAnnotation.attrs.conversation.push(obj);
 
     allCommentsWithSameId.forEach(singleComment => {
@@ -79,12 +87,17 @@ export default ({ comment, activeView, user }) => {
     let minPos = comment.pos;
 
     allCommentsWithSameId.forEach(singleComment => {
-      const markPosition = DocumentHelpers.findMarkPosition(activeView, singleComment.pos, 'comment');
+      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;
+    if (allCommentsWithSameId.length > 1)
+      maxPos += last(allCommentsWithSameId).node.nodeSize;
     dispatch(state.tr.removeMark(minPos, maxPos, commentMark));
     activeView.focus();
   };
@@ -121,7 +134,9 @@ export default ({ comment, activeView, user }) => {
     <>
       {conversation.map((singleComment, index) => {
         return (
-          <SinlgeCommentRow key={uuidv4()}>{`${user.username} : ${singleComment[user.username]}`}</SinlgeCommentRow>
+          <SinlgeCommentRow key={uuidv4()}>
+            {`${singleComment.displayName} : ${singleComment.content}`}
+          </SinlgeCommentRow>
         );
       })}
       {commentInputReply()}

wax-prosemirror-plugins/src/WaxSelectionPlugin.js

-import { Decoration, DecorationSet } from "prosemirror-view";
-import { Plugin } from "prosemirror-state";
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Plugin } from 'prosemirror-state';
 
 const WaxSelectionPlugin = new Plugin({
   state: {
@@ -8,18 +8,26 @@ const WaxSelectionPlugin = new Plugin({
     },
     apply(transaction, state, prevEditorState, editorState) {
       const sel = transaction.curSelection;
-      if (sel) {
+
+      // TODO fix the selection when a note is present.
+      let flag = false;
+      const difference = sel.$to.pos - sel.$from.pos;
+      editorState.doc.nodesBetween(sel.$from.pos, sel.$to.pos, (node, from) => {
+        if (node.type.name === 'footnote') flag = true;
+      });
+
+      if (sel && !flag) {
         const decos = [
           Decoration.inline(sel.$from.pos, sel.$to.pos, {
-            class: "wax-selection-marker"
-          })
+            class: 'wax-selection-marker',
+          }),
         ];
         const deco = DecorationSet.create(editorState.doc, decos);
         return { deco };
       }
 
       return state;
-    }
+    },
   },
   props: {
     decorations(state) {
@@ -27,8 +35,8 @@ const WaxSelectionPlugin = new Plugin({
         return this.getState(state).deco;
       }
       return null;
-    }
-  }
+    },
+  },
 });
 
 export default WaxSelectionPlugin;

wax-prosemirror-services/index.js

+export { default as Service } from './src/Service';
+
 export { default as componentPlugin } from './src/LayoutService/components/componentPlugin';
 export { default as LayoutService } from './src/LayoutService/LayoutService';
 export { default as MenuService } from './src/MenuService/MenuService';