From d06c3ae56509b272f3b18632d30159f530918d40 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 7 Apr 2020 15:52:31 +0300
Subject: [PATCH] temp comment position
---
editors/editoria/src/Editoria.js | 2 +-
.../src/components/comments/CommentBox.js | 10 ++--
.../components/comments/CommentsBoxList.js | 55 ++++++++++++++++---
3 files changed, 52 insertions(+), 15 deletions(-)
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index b99067c7e..7026299c1 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -51,7 +51,7 @@ const Editoria = () => (
'<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 c2e5fa7b8..5f4b145bc 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -8,12 +8,10 @@ const CommentBoxStyled = styled.div`
flex-direction: column;
margin-top: 10px;
background: black;
+ position: absolute;
+ top: ${props => (props.top ? `${props.top}px` : 0)};
`;
-export default ({ mark, view }) => {
- useEffect(() => {
- console.log(document.getElementById(mark.attrs.id));
- }, []);
-
- return <CommentBoxStyled />;
+export default ({ mark, view, top }) => {
+ return <CommentBoxStyled top={top} />;
};
diff --git a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
index b30084e9a..37bf58332 100644
--- a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
+++ b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
@@ -1,17 +1,56 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect } from "react";
+import { each } from "lodash";
import CommentBox from "./CommentBox";
//TODO find from marks actual comment mark
export default ({ comments, view }) => {
+ let commentEl = null;
+ let commentElTop = 0;
+ let top = 0;
+
+ if (comments.length > 0) {
+ const WaxSurface = view.dom.getBoundingClientRect();
+ each(comments, (entry, pos) => {
+ commentElTop = 0;
+ commentEl = document.getElementById(entry.node.marks[0].attrs.id);
+ commentElTop = commentEl.getBoundingClientRect().top - WaxSurface.top;
+ entry.node.marks[0].top = commentElTop;
+ });
+ }
+
+ const setTops = () => {
+ if (comments.length > 0) {
+ each(comments, (entry, pos) => {
+ const WaxSurface = view.dom.getBoundingClientRect();
+ commentElTop = 0;
+ commentEl = document.getElementById(entry.node.marks[0].attrs.id);
+ commentElTop = commentEl.getBoundingClientRect().top - WaxSurface.top;
+ entry.node.marks[0].top = commentElTop;
+ return commentElTop;
+ });
+ }
+ };
+
+ useEffect(
+ () => {
+ console.log("change");
+ },
+ [setTops]
+ );
return (
<Fragment>
- {comments.map(comment => (
- <CommentBox
- key={comment.node.marks[0].attrs.id}
- mark={comment.node.marks[0]}
- view={view}
- />
- ))}
+ {comments.map(comment => {
+ if (comment) top = comment.node.marks[0].top;
+ console.log(comment.node.marks[0].attrs.id);
+ return (
+ <CommentBox
+ key={comment.node.marks[0].top}
+ mark={comment.node.marks[0]}
+ view={view}
+ top={top}
+ />
+ );
+ })}
</Fragment>
);
};
--
GitLab