temp comment position

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>

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} />;
 };

wax-prosemirror-components/src/components/comments/CommentsBoxList.js

-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>
   );
 };