diff --git a/wax-prosemirror-components/package.json b/wax-prosemirror-components/package.json
index 93df224406c99d304710db89387d046bbe7a1d21..572574f9c0c61b60f38262f3a6d3b98cd4f12335 100644
--- a/wax-prosemirror-components/package.json
+++ b/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"
}
diff --git a/wax-prosemirror-components/src/components/comments/Comment.js b/wax-prosemirror-components/src/components/comments/Comment.js
index c1672acb275b845cdf09c5d3d1c6390dbb3d1b22..01fa7b0e03cadaa1ed786dda7e68ebf24edf9e7d 100644
--- a/wax-prosemirror-components/src/components/comments/Comment.js
+++ b/wax-prosemirror-components/src/components/comments/Comment.js
@@ -1,15 +1,9 @@
-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>
+ </>
);
};
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index 436da90fe5144056613273bc7bcd0b7e18aa3554..f86ab3ad2901e480c88bf05f0dd3b525d2759977 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -1,15 +1,11 @@
-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>
+ </>
);
};
diff --git a/wax-prosemirror-components/src/components/rightArea/BoxList.js b/wax-prosemirror-components/src/components/rightArea/BoxList.js
index 3a29b7955628dc5dded54eac55ab0dc479619256..9cfaa38d0039d38482e254851437efa0423c706c 100644
--- a/wax-prosemirror-components/src/components/rightArea/BoxList.js
+++ b/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}
/>
diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
index 7d90df1b1abe15ceb522a5e86b254c5c01a13fba..cf2e8b704005909f0f8e2b0b4292d61d4d3d9385 100644
--- a/wax-prosemirror-components/src/components/rightArea/RightArea.js
+++ b/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);
}
diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json
index d66db02731566455b47a6c8e943e0c42519a9f7c..afb097b50bb7428240a119f99f538ac3c9cf969c 100644
--- a/wax-prosemirror-plugins/package.json
+++ b/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"
}
diff --git a/wax-prosemirror-plugins/src/comments/CommentPlugin.js b/wax-prosemirror-plugins/src/comments/CommentPlugin.js
index 7597afd04903ad99ad8076098c75dda83bda5790..e6c8976ec6c3b13fb88daefd243863fdf95066cb 100644
--- a/wax-prosemirror-plugins/src/comments/CommentPlugin.js
+++ b/wax-prosemirror-plugins/src/comments/CommentPlugin.js
@@ -1,15 +1,15 @@
-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 => {},
+ },
});
};
diff --git a/wax-prosemirror-schema/src/marks/commentMark.js b/wax-prosemirror-schema/src/marks/commentMark.js
index b946d7dd8c395a4b6f97b954a3a79c34307ca43d..9aab10d2b49267a026ab906bebc0b7e19d9ec7ee 100644
--- a/wax-prosemirror-schema/src/marks/commentMark.js
+++ b/wax-prosemirror-schema/src/marks/commentMark.js
@@ -1,38 +1,41 @@
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;
diff --git a/wax-prosemirror-utilities/src/document/DocumentHelpers.js b/wax-prosemirror-utilities/src/document/DocumentHelpers.js
index eb68c1c77c0b462732af3650f10a1424d9a8e64d..7eafe1041ac862bf2d210351104c090629af5ed9 100644
--- a/wax-prosemirror-utilities/src/document/DocumentHelpers.js
+++ b/wax-prosemirror-utilities/src/document/DocumentHelpers.js
@@ -73,6 +73,7 @@ const findFragmentedMark = (state, PMmark) => {
}
});
if (markFound) {
+ console.log(markFound);
return markFound;
}
}