Merge branch 'display-comment-conversation' into 'master'

Display comment conversation

See merge request !110

editors/editoria/src/config/config.js

@@ -23,6 +23,8 @@ import {
   CommentsService
 } from "wax-prosemirror-services";
 
+import { WaxSelectionPlugin } from "wax-prosemirror-plugins";
+
 import invisibles, {
   space,
   hardBreak,
@@ -54,7 +56,12 @@ export default {
   RulesService: [emDash, ellipsis],
   ShortCutsService: {},
 
-  PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
+  PmPlugins: [
+    columnResizing(),
+    tableEditing(),
+    invisibles([hardBreak()]),
+    WaxSelectionPlugin
+  ],
 
   // Always load first CommentsService and LinkService,
   //as it matters on how PM treats nodes and marks

wax-prosemirror-components/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror UI components",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"

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

+import React, {
+  Fragment,
+  useState,
+  useEffect,
+  useContext,
+  useRef
+} from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import styled from "styled-components";
+import { WaxContext } from "wax-prosemirror-core";
+import { DocumentHelpers } from "wax-prosemirror-utilities";
+
+const SinlgeCommentRow = styled.div`
+  padding: 4px;
+  border-bottom: 1px solid #ffab20;
+`;
+
+export default ({ comment, activeView, user }) => {
+  const commentInput = useRef(null);
+  const [currentUser, setCurrentuser] = useState(user);
+  const [commentAnnotation, setCommentAnnotation] = useState(comment);
+  const [commentInputValue, setcommentInputValue] = useState("");
+  const { state, dispatch } = activeView;
+  const { attrs: { conversation } } = comment;
+
+  const handleKeyDown = event => {
+    if (event.key === "Enter" || event.which === 13) {
+      saveComment();
+    }
+  };
+
+  const saveComment = () => {
+    const { current: { value } } = commentInput;
+    const { tr, doc } = state;
+    const commentMark = state.schema.marks.comment;
+
+    const obj = { [user.username]: value };
+    commentAnnotation.attrs.conversation.push(obj);
+    const actualComment = DocumentHelpers.findMark(state, commentMark);
+
+    dispatch(
+      tr.addMark(
+        actualComment.from,
+        actualComment.to,
+        commentMark.create({
+          ...((commentAnnotation && commentAnnotation.attrs) || {}),
+          conversation: commentAnnotation.attrs.conversation
+        })
+      )
+    );
+    setcommentInputValue("");
+  };
+
+  const updateCommentInputValue = () => {
+    const { current: { value } } = commentInput;
+    setcommentInputValue(value);
+  };
+
+  const commentInputReply = () => {
+    return (
+      <Fragment>
+        <input
+          type="text"
+          ref={commentInput}
+          placeholder="add a new comment"
+          onChange={updateCommentInputValue}
+          onKeyPress={handleKeyDown}
+          autoFocus
+          value={commentInputValue}
+        />
+        <button onClick={saveComment}>Post</button>
+        <button>Cancel</button>
+      </Fragment>
+    );
+  };
+
+  return conversation.length === 0 ? (
+    <Fragment>{commentInputReply()}</Fragment>
+  ) : (
+    <Fragment>
+      {conversation.map((singleComment, index) => {
+        return (
+          <SinlgeCommentRow key={uuidv4()}>{`${user.username} : ${
+            singleComment[user.username]
+          }`}</SinlgeCommentRow>
+        );
+      })}
+      {commentInputReply()}
+    </Fragment>
+  );
+};

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

@@ -9,6 +9,7 @@ import React, {
 import { Transition } from "react-transition-group";
 import styled from "styled-components";
 import { WaxContext } from "wax-prosemirror-core";
+import Comment from "./Comment";
 
 const CommentBoxStyled = styled.div`
   display: flex;
@@ -37,11 +38,7 @@ export default ({ comment, view, top, dataBox }) => {
   const { view: { main: { props: { user } } }, app, activeView } = useContext(
       WaxContext
     ),
-    { state, dispatch } = activeView,
-    commentInput = useRef(null),
     [animate, setAnimate] = useState(false),
-    [commentAnnotation, setCommentAnnotation] = useState(comment),
-    [currentUser, setCurrentuser] = useState(user),
     { attrs: { id } } = comment,
     activeCommentPlugin = app.PmPlugins.get("activeComment"),
     activeComment = activeCommentPlugin.getState(activeView.state).comment;
@@ -52,32 +49,6 @@ export default ({ comment, view, top, dataBox }) => {
     setAnimate(true);
   }, []);
 
-  const handleKeyDown = event => {
-    if (event.key === "Enter" || event.which === 13) {
-      saveComment();
-    }
-  };
-
-  const saveComment = () => {
-    const { current: { value } } = commentInput;
-    const { tr, doc } = state;
-    const commentMark = state.schema.marks.comment;
-
-    const obj = { [user.username]: value };
-    commentAnnotation.attrs.conversation.push(obj);
-
-    dispatch(
-      tr.addMark(
-        commentAnnotation.pos,
-        commentAnnotation.pos + commentAnnotation.node.nodeSize,
-        commentMark.create({
-          ...((commentAnnotation && commentAnnotation.attrs) || {}),
-          conversation: commentAnnotation.attrs.conversation
-        })
-      )
-    );
-  };
-
   return (
     <Fragment>
       <Transition in={animate} timeout={1000}>
@@ -88,17 +59,12 @@ export default ({ comment, view, top, dataBox }) => {
             data-box={dataBox}
             active={active}
           >
-            <div>
-              <input
-                type="text"
-                ref={commentInput}
-                placeholder="add a new comment"
-                onKeyPress={handleKeyDown}
-                autoFocus
-              />
-              <button onClick={saveComment}>Post</button>
-              <button>Cancel</button>
-            </div>
+            <Comment
+              comment={comment}
+              active={active}
+              activeView={activeView}
+              user={user}
+            />
           </CommentBoxStyled>
         )}
       </Transition>

wax-prosemirror-components/src/components/link/LinkComponent.js

@@ -19,7 +19,6 @@ const Button = styled.button`
 `;
 
 const LinkComponent = ({ mark, setPosition, position }) => {
-  console.log(mark);
   const href = mark ? mark.attrs.href : null,
     linkMark = mark ? mark : null,
     { view: { main }, activeView } = useContext(WaxContext),

wax-prosemirror-components/src/components/rightArea/RightArea.js

@@ -156,7 +156,6 @@ const updateMarks = view => {
             mark.type.name === "format_change"
           ) {
             mark.pos = node.pos;
-            mark.node = node.node;
             finalMarks.push(mark);
           }
         });

wax-prosemirror-core/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror core",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"

wax-prosemirror-layouts/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror layouts",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"

wax-prosemirror-layouts/src/layouts/EditorElements.js

@@ -10,6 +10,12 @@ export default css`
       outline: none;
     }
   }
+
+  .ProseMirror .wax-selection-marker {
+    background: #0a78ff;
+    color: white;
+  }
+
   .ProseMirror footnote {
     font-size: 0;
     display: inline-block;
@@ -28,6 +34,7 @@ export default css`
     font-size: 16px;
     counter-increment: footnote;
   }
+
   hr {
     padding: 2px 10px;
     border: none;

wax-prosemirror-plugins/index.js

@@ -3,3 +3,4 @@ export {
 } from "./src/trackChanges/TrackChangePlugin";
 
 export { default as ActiveComment } from "./src/comments/ActiveComment";
+export { default as WaxSelectionPlugin } from "./src/WaxSelectionPlugin";

wax-prosemirror-plugins/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror plugins",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"

wax-prosemirror-plugins/src/WaxSelectionPlugin.js

+import { Decoration, DecorationSet } from "prosemirror-view";
+import { Plugin } from "prosemirror-state";
+
+const WaxSelectionPlugin = new Plugin({
+  state: {
+    init(config, instance) {
+      return { deco: DecorationSet.empty };
+    },
+    apply(transaction, state, prevEditorState, editorState) {
+      const sel = transaction.curSelection;
+      if (sel) {
+        const decos = [
+          Decoration.inline(sel.$from.pos, sel.$to.pos, {
+            class: "wax-selection-marker"
+          })
+        ];
+        const deco = DecorationSet.create(editorState.doc, decos);
+        return { deco };
+      }
+
+      return state;
+    }
+  },
+  props: {
+    decorations(state) {
+      if (state && this.getState(state)) {
+        return this.getState(state).deco;
+      }
+      return null;
+    }
+  }
+});
+
+export default WaxSelectionPlugin;

wax-prosemirror-schema/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror schema",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"

wax-prosemirror-services/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror services",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"

wax-prosemirror-themes/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror themes",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"

wax-prosemirror-utilities/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.8",
   "description": "Wax prosemirror utilities",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "BABEL_ENV=production rollup -c"