active comment in progress

wax-prosemirror-components/package.json

@@ -22,6 +22,7 @@
     "styled-components": "^4.2.0",
     "uuid": "^7.0.3",
     "prosemirror-model": "^1.9.1",
+    "prosemirror-state": "^1.3.2",
     "wax-prosemirror-core": "^0.0.10",
     "wax-prosemirror-utilities": "^0.0.10"
   }

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

-import React, {
-  Fragment,
-  useState,
-  useEffect,
-  useContext,
-  useRef
-} from "react";
-import { v4 as uuidv4 } from "uuid";
+import React, { useState, 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";
+import styled from 'styled-components';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
 
 const SinlgeCommentRow = styled.div`
   padding: 4px;
@@ -18,20 +12,23 @@ const SinlgeCommentRow = styled.div`
 
 export default ({ comment, activeView, user }) => {
   const commentInput = useRef(null);
-  const [currentUser, setCurrentuser] = useState(user);
   const [commentAnnotation, setCommentAnnotation] = useState(comment);
-  const [commentInputValue, setcommentInputValue] = useState("");
+  const [commentInputValue, setcommentInputValue] = useState('');
   const { state, dispatch } = activeView;
-  const { attrs: { conversation } } = comment;
+  const {
+    attrs: { conversation },
+  } = comment;
 
   const handleKeyDown = event => {
-    if (event.key === "Enter" || event.which === 13) {
+    if (event.key === 'Enter' || event.which === 13) {
       saveComment();
     }
   };
 
   const saveComment = () => {
-    const { current: { value } } = commentInput;
+    const {
+      current: { value },
+    } = commentInput;
     const { tr, doc } = state;
     const commentMark = state.schema.marks.comment;
 
@@ -46,23 +43,25 @@ export default ({ comment, activeView, user }) => {
           singleComment.pos + singleComment.nodeSize,
           commentMark.create({
             ...((commentAnnotation && commentAnnotation.attrs) || {}),
-            conversation: commentAnnotation.attrs.conversation
-          })
-        )
+            conversation: commentAnnotation.attrs.conversation,
+          }),
+        ),
       );
     });
 
-    setcommentInputValue("");
+    setcommentInputValue('');
   };
 
   const updateCommentInputValue = () => {
-    const { current: { value } } = commentInput;
+    const {
+      current: { value },
+    } = commentInput;
     setcommentInputValue(value);
   };
 
   const commentInputReply = () => {
     return (
-      <Fragment>
+      <>
         <input
           type="text"
           ref={commentInput}
@@ -72,16 +71,18 @@ export default ({ comment, activeView, user }) => {
           autoFocus
           value={commentInputValue}
         />
-        <button onClick={saveComment}>Post</button>
-        <button>Cancel</button>
-      </Fragment>
+        <button type="button" onClick={saveComment}>
+          Post
+        </button>
+        <button type="button">Cancel</button>
+      </>
     );
   };
 
   return conversation.length === 0 ? (
-    <Fragment>{commentInputReply()}</Fragment>
+    <>{commentInputReply()}</>
   ) : (
-    <Fragment>
+    <>
       {conversation.map((singleComment, index) => {
         return (
           <SinlgeCommentRow key={uuidv4()}>{`${user.username} : ${
@@ -90,6 +91,6 @@ export default ({ comment, activeView, user }) => {
         );
       })}
       {commentInputReply()}
-    </Fragment>
+    </>
   );
 };

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

-import React, {
-  Fragment,
-  useState,
-  useEffect,
-  useContext,
-  useRef
-} from "react";
+import React, { useState, useEffect, useContext } from 'react';
+import { TextSelection } from 'prosemirror-state';
 
-import { Transition } from "react-transition-group";
-import styled from "styled-components";
-import { WaxContext } from "wax-prosemirror-core";
-import Comment from "./Comment";
+import { Transition } from 'react-transition-group';
+import styled from 'styled-components';
+import { WaxContext } from 'wax-prosemirror-core';
+import Comment from './Comment';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
 
 const CommentBoxStyled = styled.div`
   display: flex;
@@ -17,31 +13,81 @@ const CommentBoxStyled = styled.div`
   margin-top: 10px;
   border: 1px solid #ffab20;
   position: absolute;
-  transition: ${({ state }) => "top 1s, opacity 1.5s, left 1s"};
+  transition: ${({ state }) => 'top 1s, opacity 1.5s, left 1s'};
   top: ${props => (props.top ? `${props.top}px` : 0)};
   left: ${props => (props.active ? `${63}%` : `${65}%`)};
   opacity: ${({ state }) => {
     switch (state) {
-      case "exited":
+      case 'exited':
         return 0.2;
-      case "exiting":
+      case 'exiting':
         return 0.4;
-      case "entering":
+      case 'entering':
         return 0.6;
-      case "entered":
+      case 'entered':
         return 1;
     }
   }};
 `;
 
-export default ({ comment, view, top, dataBox }) => {
-  const { view: { main: { props: { user } } }, app, activeView } = useContext(
-      WaxContext
-    ),
-    [animate, setAnimate] = useState(false),
-    { attrs: { id } } = comment,
-    commentPlugin = app.PmPlugins.get("commentPlugin"),
-    activeComment = commentPlugin.getState(activeView.state).comment;
+export default ({ comment, top, dataBox }) => {
+  const {
+    view,
+    view: {
+      main: {
+        props: { user },
+      },
+    },
+    app,
+    activeView,
+    activeViewId,
+  } = useContext(WaxContext);
+
+  const [animate, setAnimate] = useState(false);
+  const {
+    attrs: { id },
+  } = comment;
+  const commentPlugin = app.PmPlugins.get('commentPlugin');
+  const activeComment = commentPlugin.getState(activeView.state).comment;
+
+  const setCommentActive = () => {
+    let commentPos = comment.pos + 1;
+    console.log(comment);
+    if (comment.attrs.group !== 'main') {
+      // const allInlineNodes = DocumentHelpers.findInlineNodes(activeView.state.doc);
+
+      allInlineNodes.forEach(node => {
+        console.log(node);
+      });
+    }
+
+    // activeView.dispatch(
+    //   activeView.state.tr.setSelection(
+    //     new TextSelection(
+    //       activeView.state.tr.doc.resolve(comment.pos + 1, comment.pos + 1),
+    //     ),
+    //   ),
+    // );
+    // let $pos = activeView.state.tr.doc.resolve(comment.pos);
+    // let parent = $pos.parent;
+    // let start = parent.childAfter($pos.parentOffset);
+    // if (!start.node) return null;
+    // let link = start.node.marks.find(mark => mark.type.name == 'comment');
+    // let startIndex = $pos.index();
+    // let startPos = $pos.start() + start.offset;
+    // while (startIndex > 0 && link.isInSet(parent.child(startIndex - 1).marks))
+    //   startPos -= parent.child(--startIndex).nodeSize;
+    // let endIndex = $pos.indexAfter(),
+    //   endPos = startPos + start.node.nodeSize;
+    // while (
+    //   endPos < parent.childCount &&
+    //   link.isInSet(parent.child(endIndex).marks)
+    // )
+    //   endPos += parent.child(endIndex++).nodeSize;
+    // // return { from: startPos, to: endPos };
+    // console.log('comment', $pos);
+    // activeView.focus();
+  };
 
   let active = false;
   if (activeComment && id === activeComment.attrs.id) active = true;
@@ -50,7 +96,7 @@ export default ({ comment, view, top, dataBox }) => {
   }, []);
 
   return (
-    <Fragment>
+    <>
       <Transition in={animate} timeout={1000}>
         {state => (
           <CommentBoxStyled
@@ -58,6 +104,7 @@ export default ({ comment, view, top, dataBox }) => {
             state={state}
             data-box={dataBox}
             active={active}
+            onClick={setCommentActive}
           >
             <Comment
               comment={comment}
@@ -68,6 +115,6 @@ export default ({ comment, view, top, dataBox }) => {
           </CommentBoxStyled>
         )}
       </Transition>
-    </Fragment>
+    </>
   );
 };

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

@@ -19,7 +19,6 @@ export default ({ commentsTracks, view, position }) => {
             <CommentBox
               key={id}
               comment={commentTrack}
-              view={view}
               top={top}
               dataBox={id}
             />

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

@@ -152,6 +152,7 @@ const updateMarks = view => {
             mark.type.name === 'deletion' ||
             mark.type.name === 'format_change'
           ) {
+            // THIS POSITION REFERS TO THE MAIN VIEW
             mark.pos = node.pos;
             finalMarks.push(mark);
           }

wax-prosemirror-plugins/package.json

@@ -10,7 +10,11 @@
     "build": "BABEL_ENV=production rollup -c"
   },
   "dependencies": {
+    "lodash": "^4.17.4",
+    "prosemirror-view": "^1.13.11",
+    "prosemirror-state": "^1.3.2",
     "wax-prosemirror-components": "^0.0.10",
+    "wax-prosemirror-utilities": "^0.0.10",
     "wax-prosemirror-core": "^0.0.10",
     "wax-prosemirror-layouts": "^0.0.10"
   }

wax-prosemirror-plugins/src/comments/CommentPlugin.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";
+import { minBy, maxBy, last } from 'lodash';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
 
-const commentPlugin = new PluginKey("commentPlugin");
+const commentPlugin = new PluginKey('commentPlugin');
 
 const getComment = state => {
-  const commentMark = state.schema.marks["comment"];
+  const commentMark = state.schema.marks.comment;
   const commentOnSelection = DocumentHelpers.findFragmentedMark(
     state,
-    commentMark
+    commentMark,
   );
 
   // Don't allow Active comment if selection is not collapsed
@@ -25,14 +25,14 @@ const getComment = state => {
     const commentNodes = DocumentHelpers.findChildrenByMark(
       state.doc,
       commentMark,
-      true
+      true,
     );
 
     const allCommentsWithSameId = [];
     commentNodes.map(node => {
       node.node.marks.filter(mark => {
         if (
-          mark.type.name === "comment" &&
+          mark.type.name === 'comment' &&
           commentOnSelection.attrs.id === mark.attrs.id
         ) {
           allCommentsWithSameId.push(node);
@@ -41,18 +41,18 @@ const getComment = state => {
     });
 
     if (allCommentsWithSameId.length > 1) {
-      const minPos = minBy(allCommentsWithSameId, "pos");
-      const maxPos = maxBy(allCommentsWithSameId, "pos");
+      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
+        contained: commentOnSelection.contained,
       };
     }
   }
-
+  console.log(commentOnSelection);
   return commentOnSelection;
 };
 
@@ -69,21 +69,22 @@ export default props => {
         if (comment) {
           createDecoration = DecorationSet.create(newState.doc, [
             Decoration.inline(comment.from, comment.to, {
-              class: "active-comment"
-            })
+              class: 'active-comment',
+            }),
           ]);
         }
         return {
           comment,
-          createDecoration
+          createDecoration,
         };
-      }
+      },
     },
     props: {
       decorations: state => {
         const commentPluginState = state && commentPlugin.getState(state);
         return commentPluginState.createDecoration;
-      }
-    }
+      },
+      setCommentActive: state => {},
+    },
   });
 };

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

 const comment = {
   attrs: {
-    class: { default: "comment" },
-    id: { default: "" },
-    group: { default: "" },
-    conversation: []
+    class: { default: 'comment' },
+    id: { default: '' },
+    group: { default: '' },
+    activeViewId: { default: '' },
+    conversation: [],
   },
   inclusive: false,
-  excludes: "",
+  excludes: '',
   parseDOM: [
     {
-      tag: "span.comment",
+      tag: 'span.comment',
       getAttrs(hook, next) {
         Object.assign(hook, {
-          class: hook.dom.getAttribute("class"),
+          class: hook.dom.getAttribute('class'),
           id: hook.dom.dataset.id,
           group: hook.dom.dataset.group,
-          conversation: JSON.parse(hook.dom.dataset.conversation)
+          activeViewId: hook.dom.dataset.activeViewId,
+          conversation: JSON.parse(hook.dom.dataset.conversation),
         });
         next();
-      }
-    }
+      },
+    },
   ],
   toDOM(hook, next) {
     hook.value = [
-      "span",
+      'span',
       {
         class: hook.node.attrs.class,
-        "data-id": hook.node.attrs.id,
-        "data-conversation": JSON.stringify(hook.node.attrs.conversation),
-        "data-group": hook.node.attrs.group
-      }
+        'data-id': hook.node.attrs.id,
+        'data-conversation': JSON.stringify(hook.node.attrs.conversation),
+        'data-activeViewId': hook.node.attrs.activeViewId,
+        'data-group': hook.node.attrs.group,
+      },
     ];
     next();
-  }
+  },
 };
 
 export default comment;

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

@@ -73,6 +73,7 @@ const findFragmentedMark = (state, PMmark) => {
       }
     });
     if (markFound) {
+      console.log(markFound);
       return markFound;
     }
   }