set left of WaxSurface for comment

wax-prosemirror-services/src/CommentsService/CommentBubbleComponent.js

@@ -4,7 +4,20 @@ import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
 import { DocumentHelpers } from "wax-prosemirror-utilities";
 
 const CommentBubbleComponent = ({ setPosition, position }) => {
-  return <div>bubble</div>;
+  const { view: { main } } = useContext(WaxContext);
+  const { state, dispatch } = main;
+  const ref = useRef(null);
+
+  useEffect(
+    () => {
+      const WaxSurface = main.dom.offsetParent.firstChild.getBoundingClientRect();
+      const left = WaxSurface.width;
+      setPosition({ ...position, left });
+    },
+    [position.left]
+  );
+
+  return <div ref={ref}>bubble</div>;
 };
 
 export default CommentBubbleComponent;

wax-prosemirror-services/src/CommentsService/CommentsService.js

@@ -8,8 +8,9 @@ export default class CommentsService extends Service {
   boot() {
     const createOverlay = this.container.get("CreateOverlay");
     createOverlay(CommentBubbleComponent, {
-      markType: "selection",
-      followCursor: false
+      markType: "",
+      followCursor: false,
+      selection: true
     });
   }
 

wax-prosemirror-services/src/LinkService/LinkComponent.js

@@ -34,8 +34,6 @@ const LinkComponent = ({ mark, setPosition, position }) => {
       const width = ref.current ? ref.current.offsetWidth : 0;
       const left = Math.abs(position.left - width / 2);
 
-      //TODO Overwrite default position in order to position LinkOverlay
-      // setPosition({ ...position, left });
       setLinkText();
       removeMarkIfEmptyHref();
     },

wax-prosemirror-services/src/LinkService/LinkService.js

@@ -10,7 +10,11 @@ export default class LinkService extends Service {
 
   boot() {
     const createOverlay = this.container.get("CreateOverlay");
-    createOverlay(LinkComponent, { markType: "link", followCursor: false });
+    createOverlay(LinkComponent, {
+      markType: "link",
+      followCursor: false,
+      selection: false
+    });
   }
 
   register() {

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

@@ -35,7 +35,7 @@ export default options => {
     };
   };
 
-  const displayOnSelection = main => {
+  const displayOnSelection = (main, options) => {
     const { selection } = main.state;
     const { from, to } = selection;
     if (from === to) return defaultOverlay;
@@ -73,9 +73,9 @@ export default options => {
 
   const updatePosition = useCallback((followCursor = true) => {
     if (!main) return defaultOverlay;
-    const { markType } = options;
+    const { markType, selection } = options;
 
-    if (markType === "selection") return displayOnSelection(main);
+    if (selection) return displayOnSelection(main, options);
 
     return displayOnMark(main, options);
   });