From 7ab917c5acd57b598918784cfc5ca918b527b48c Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sat, 11 Apr 2020 17:23:01 +0300
Subject: [PATCH] cleanup plus layout positions
---
editors/editoria/src/config/config.js | 1 -
.../components/comments/CommentComponent.js | 16 +++++++++++-----
.../src/components/comments/CommentsBoxList.js | 18 ++++++++++--------
.../components/notes/NoteEditorContainer.js | 1 +
.../src/layouts/EditoriaLayout.js | 2 ++
5 files changed, 24 insertions(+), 14 deletions(-)
diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 26becea37..40a9d1d2e 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -42,7 +42,6 @@ export default {
],
RulesService: [emDash, ellipsis],
- CommentsService: { groups: ["main", "notes"] },
ShortCutsService: {},
PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
diff --git a/wax-prosemirror-components/src/components/comments/CommentComponent.js b/wax-prosemirror-components/src/components/comments/CommentComponent.js
index 5bafdacf3..7c305d7ee 100644
--- a/wax-prosemirror-components/src/components/comments/CommentComponent.js
+++ b/wax-prosemirror-components/src/components/comments/CommentComponent.js
@@ -12,24 +12,30 @@ import { DocumentHelpers } from "wax-prosemirror-utilities";
import CommentsBoxList from "./CommentsBoxList";
export default ({ area }) => {
- const { view: { main } } = useContext(WaxContext);
+ const { view: { main }, activeView } = useContext(WaxContext);
const [comments, setComments] = useState([]);
useEffect(
() => {
- setComments(updateComments(main, area));
+ setComments(updateComments(main));
},
- [JSON.stringify(updateComments(main, area))]
+ [JSON.stringify(updateComments(main))]
);
const CommentComponent = useMemo(
- () => <CommentsBoxList comments={comments[area] || []} view={main} />,
+ () => (
+ <CommentsBoxList
+ comments={comments[area] || []}
+ area={area}
+ view={main}
+ />
+ ),
[comments[area] || []]
);
return <Fragment>{CommentComponent}</Fragment>;
};
-const updateComments = (view, area) => {
+const updateComments = view => {
if (view) {
const nodes = DocumentHelpers.findChildrenByMark(
view.state.doc,
diff --git a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
index 6795f49e3..4bc0f5e87 100644
--- a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
+++ b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
@@ -2,7 +2,7 @@ import React, { Fragment, useState, useEffect, useCallback } from "react";
import { each } from "lodash";
import CommentBox from "./CommentBox";
-export default ({ comments, view }) => {
+export default ({ comments, view, area }) => {
const [position, setPosition] = useState();
const setTops = useCallback(() => {
@@ -14,14 +14,16 @@ export default ({ comments, view }) => {
let top = 0;
const allCommentsTop = {};
- each(comments, (entry, pos) => {
+ each(comments, (comment, pos) => {
const WaxSurface = view.dom.getBoundingClientRect();
- const id = entry.attrs.id;
+ const { attrs: { id } } = comment;
let isActive = false;
- // if (entry.id === active) isActive = true
+ // if (comment.id === active) isActive = true
commentEl = document.getElementById(id);
//annotation top
+ console.log(commentEl.getBoundingClientRect().top, commentEl.offsetTop);
annotationTop = commentEl.getBoundingClientRect().top - WaxSurface.top;
+
// get height of this comment box
const boxEl = document.querySelector(`div[data-comment="comment-${id}"]`);
if (boxEl) boxHeight = parseInt(boxEl.offsetHeight);
@@ -41,12 +43,12 @@ export default ({ comments, view }) => {
}
}
// store where the box ends to be aware of overlaps in the next box
- entry.endHeight = top + boxHeight + 2;
+ comment.endHeight = top + boxHeight + 2;
result[pos] = top;
// if active, move as many boxes above as needed to bring it to the annotation's height
if (isActive) {
- entry.endHeight = annotationTop + boxHeight + 2;
+ comment.endHeight = annotationTop + boxHeight + 2;
result[pos] = annotationTop;
let b = true;
@@ -88,10 +90,10 @@ export default ({ comments, view }) => {
return (
<Fragment>
{comments.map(comment => {
- const id = comment.attrs.id;
+ const { attrs: { id } } = comment;
return (
<CommentBox
- key={comment.attrs.id}
+ key={id}
mark={comment}
view={view}
top={position[id]}
diff --git a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
index 3ca362cfd..fa78e434f 100644
--- a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
+++ b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
@@ -8,6 +8,7 @@ const NoteEditorContainerStyled = styled.div`
flex-direction: row;
min-height: 40px;
width: 100%;
+ position: relative;
`;
const NoteStyled = styled.div`
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index f5dc5c635..3f815e45c 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -163,6 +163,7 @@ const NotesAreaContainer = styled.div`
width: 100%;
height: 100%;
overflow-y: scroll;
+ position: absolute;
`;
const NotesContainer = styled.div`
@@ -172,6 +173,7 @@ const NotesContainer = styled.div`
padding: 0 0 10px 5px;
height: 100%;
width: 65%;
+ position: relative;
`;
const CommentsContainer = styled.div`
--
GitLab