From 8e7f468f5ad640e769b6c54fd95f7eabe83aa7fc Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 7 Apr 2020 13:56:31 +0300
Subject: [PATCH] pass id to comment mark
---
editors/editoria/src/Editoria.js | 6 ++++--
.../src/components/comments/CommentBox.js | 13 +++++++------
.../src/components/comments/CommentsBoxList.js | 7 ++++++-
wax-prosemirror-schema/src/marks/commentMark.js | 5 ++++-
wax-prosemirror-utilities/src/commands/Commands.js | 3 +++
5 files changed, 24 insertions(+), 10 deletions(-)
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index ae4e7c88f..b99067c7e 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -47,9 +47,11 @@ const Editoria = () => (
autoFocus
placeholder="Type Something..."
fileUpload={file => renderImage(file)}
- value={"this is some content"}
+ value={
+ '<p class="paragraph">this is <span class="comment" id="1b87a19d-891c-4329-9482-b8ab8523c129" data-viewid="main" data-conversation="[]">some</span> content</p>'
+ }
layout={EditoriaLayout}
- // onChange={source => console.log(source)}
+ onChange={source => console.log(source)}
user={user}
/>
</Fragment>
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index 32e0042cb..c2e5fa7b8 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -1,10 +1,6 @@
import React, { useEffect, useRef, useContext } from "react";
import styled from "styled-components";
-// export default ({ node, view }) => {
-// useEffect(() => {}, []);
-// };
-
const CommentBoxStyled = styled.div`
height: 50px;
width: 50px;
@@ -14,5 +10,10 @@ const CommentBoxStyled = styled.div`
background: black;
`;
-const CommentBox = () => <CommentBoxStyled />;
-export default CommentBox;
+export default ({ mark, view }) => {
+ useEffect(() => {
+ console.log(document.getElementById(mark.attrs.id));
+ }, []);
+
+ return <CommentBoxStyled />;
+};
diff --git a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
index 01299fe17..b30084e9a 100644
--- a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
+++ b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
@@ -1,11 +1,16 @@
import React, { Fragment } from "react";
import CommentBox from "./CommentBox";
+//TODO find from marks actual comment mark
export default ({ comments, view }) => {
return (
<Fragment>
{comments.map(comment => (
- <CommentBox key="" node={comment.node} view={view} />
+ <CommentBox
+ key={comment.node.marks[0].attrs.id}
+ mark={comment.node.marks[0]}
+ view={view}
+ />
))}
</Fragment>
);
diff --git a/wax-prosemirror-schema/src/marks/commentMark.js b/wax-prosemirror-schema/src/marks/commentMark.js
index 4dbaa4bc1..dc754efec 100644
--- a/wax-prosemirror-schema/src/marks/commentMark.js
+++ b/wax-prosemirror-schema/src/marks/commentMark.js
@@ -1,5 +1,6 @@
const comment = {
attrs: {
+ id: { default: "" },
viewId: { default: "" },
conversation: []
},
@@ -10,7 +11,8 @@ const comment = {
tag: "span.comment[data-conversation]",
getAttrs(dom) {
return {
- viewId: dom.dataset.viewId,
+ id: dom.id,
+ viewId: dom.dataset.viewid,
conversation: JSON.parse(dom.dataset.conversation)
};
}
@@ -21,6 +23,7 @@ const comment = {
"span",
{
class: "comment",
+ id: node.attrs.id,
"data-viewId": node.attrs.viewId,
"data-conversation": JSON.stringify(node.attrs.conversation)
}
diff --git a/wax-prosemirror-utilities/src/commands/Commands.js b/wax-prosemirror-utilities/src/commands/Commands.js
index 0c60f9dc9..27b25c3b5 100644
--- a/wax-prosemirror-utilities/src/commands/Commands.js
+++ b/wax-prosemirror-utilities/src/commands/Commands.js
@@ -1,3 +1,5 @@
+import { v4 as uuid } from "uuid";
+
const markActive = type => state => {
const { from, $from, to, empty } = state.selection;
@@ -64,6 +66,7 @@ const createComment = (state, dispatch, activeViewId) => {
$from.pos,
$to.pos,
state.schema.marks.comment.create({
+ id: uuid(),
viewId: activeViewId,
conversation: []
})
--
GitLab