cleanup plus layout positions

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()])],

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,

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]}

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`

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`