From f77a2320b4beb749605670faf2f4016296a01728 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 23 Jun 2020 02:14:11 +0300
Subject: [PATCH] set comments and track changes boxes in rightArea
---
.../src/components/comments/CommentBox.js | 8 +++++---
.../src/components/comments/CommentsBoxList.js | 4 ++--
.../src/components/rightArea/RightArea.js | 18 +++++++++++-------
3 files changed, 18 insertions(+), 12 deletions(-)
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index c394e7a9d..d9497b01b 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -28,13 +28,15 @@ const CommentBoxStyled = styled.div`
}};
`;
-export default ({ mark, view, top, dataComment }) => {
+export default ({ mark, view, top, dataBox }) => {
const [animate, setAnimate] = useState(false);
const { view: { main }, app, activeView } = useContext(WaxContext);
const activeCommentPlugin = app.PmPlugins.get("activeComment");
const activeComment = activeCommentPlugin.getState(activeView.state).comment;
let active = false;
- if (activeComment && mark.attrs.id === activeComment.attrs.id) active = true;
+ const id = mark.attrs ? mark.attrs.id : mark.node.attrs.id;
+
+ if (activeComment && id === activeComment.attrs.id) active = true;
useEffect(() => {
setAnimate(true);
}, []);
@@ -46,7 +48,7 @@ export default ({ mark, view, top, dataComment }) => {
<CommentBoxStyled
top={top}
state={state}
- data-comment={dataComment}
+ data-box={dataBox}
active={active}
/>
)}
diff --git a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
index 0722446cf..84514097a 100644
--- a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
+++ b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
@@ -5,7 +5,7 @@ export default ({ comments, view, position }) => {
return (
<Fragment>
{comments.map((comment, index) => {
- const { attrs: { id } } = comment;
+ const id = comment.attrs ? comment.attrs.id : comment.node.attrs.id;
const top = position[index] ? position[index][id] : 0;
return (
<CommentBox
@@ -13,7 +13,7 @@ export default ({ comments, view, position }) => {
mark={comment}
view={view}
top={top}
- dataComment={`comment-${id}`}
+ dataBox={id}
/>
);
})}
diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
index ea583a8de..9c2990918 100644
--- a/wax-prosemirror-components/src/components/rightArea/RightArea.js
+++ b/wax-prosemirror-components/src/components/rightArea/RightArea.js
@@ -28,17 +28,17 @@ export default ({ area }) => {
each(marks[area], (mark, pos) => {
const WaxSurface = main.dom.getBoundingClientRect();
- const { attrs: { id } } = mark;
+ const id = mark.attrs ? mark.attrs.id : mark.node.attrs.id;
+
const activeComment = activeCommentPlugin.getState(activeView.state)
.comment;
let isActive = false;
- if (activeComment && mark.attrs.id === activeComment.attrs.id)
- isActive = true;
+ if (activeComment && id === activeComment.attrs.id) isActive = true;
//annotation top
if (area === "main") {
- markEl = document.querySelector(`span[data-id="${id}"]`);
+ markEl = document.querySelector(`[data-id="${id}"]`);
if (markEl)
annotationTop = markEl.getBoundingClientRect().top - WaxSurface.top;
} else {
@@ -47,14 +47,14 @@ export default ({ area }) => {
.height;
markEl = document
.querySelector("#notes-container")
- .querySelector(`span[data-id="${id}"]`);
+ .querySelector(`[data-id="${id}"]`);
if (markEl)
annotationTop =
markEl.getBoundingClientRect().top - panelWrapperHeight - 50;
}
// get height of this mark box
- const boxEl = document.querySelector(`div[data-comment="comment-${id}"]`);
+ const boxEl = document.querySelector(`div[data-box="${id}"]`);
if (boxEl) boxHeight = parseInt(boxEl.offsetHeight);
// where the box should move to
@@ -95,7 +95,11 @@ export default ({ area }) => {
const overlap = boxAboveEnds - currentTop;
result[i - 1] -= overlap;
- allCommentsTop[i - 1][marks[area][i - 1].attrs.id] = result[i - 1];
+ const temp = marks[area][i - 1].attrs
+ ? marks[area][i - 1].attrs.id
+ : marks[area][i - 1].node.attrs.id;
+
+ allCommentsTop[i - 1][temp] = result[i - 1];
}
if (!doesOverlap) b = false;
--
GitLab