fix

editors/editoria/src/Editoria.js

@@ -47,9 +47,11 @@ const Editoria = () => (
       autoFocus
       placeholder="Type Something..."
       fileUpload={file => renderImage(file)}
-      value={"this is some content"}
+      value={
+        '<p class="paragraph">this is some co<footnote id="7565fa74-d57d-4120-9867-aaf760c892f4">erafdd sfs<span class="comment" data-conversation="[]">fsdf sdfsdf </span>sfds fsdf sdfsd fs</footnote>ntent</p>'
+      }
       layout={EditoriaLayout}
-      // onChange={source => console.log(source)}
+      onChange={source => console.log(source)}
       user={user}
     />
   </Fragment>

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

@@ -9,7 +9,7 @@ const CommentBubbleComponent = ({ setPosition, position }) => {
   console.log("position", position);
   useEffect(
     () => {
-      const WaxSurface = activeView.dom.offsetParent.firstChild.getBoundingClientRect();
+      const WaxSurface = activeView.dom.getBoundingClientRect();
       const left = WaxSurface.width;
       setPosition({ ...position, left });
     },

wax-prosemirror-components/src/components/notes/NoteEditorContainer.js

@@ -12,7 +12,7 @@ const NoteEditorContainerStyled = styled.div`
 
 const NoteStyled = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   width: 100%;
   min-height: 20px;
   margin-top: 10px;
@@ -21,6 +21,10 @@ const NoteStyled = styled.div`
   &:focus {
     outline: none;
   }
+  span.comment {
+    border-bottom: 2px solid #ffab20;
+    border-radius: 3px 3px 0 0;
+  }
 `;
 
 const NoteEditorContainer = React.forwardRef((props, ref) => (

wax-prosemirror-services/src/OverlayService/usePosition.js

@@ -23,7 +23,7 @@ export default options => {
 
   //TODO probably is best each component to calculate it's own position and not have a default
   const calculatePositionTemp = (activeView, from, to) => {
-    const WaxSurface = activeView.dom.offsetParent.firstChild.getBoundingClientRect();
+    const WaxSurface = activeView.dom.getBoundingClientRect();
     const start = activeView.coordsAtPos(from);
     const end = activeView.coordsAtPos(to);
     let left = WaxSurface.width;
@@ -50,10 +50,8 @@ export default options => {
   const displayOnSelection = (activeView, options) => {
     const { selection } = activeView.state;
     const { from, to } = selection;
-    console.log(from, to);
     if (from === to) return defaultOverlay;
     const { left, top } = calculatePositionTemp(activeView, from, to);
-    // console.log("here?", left, top, from, to, selection);
     return {
       left,
       top,