feat(overlay): load overlay component

editors/editoria/src/Editoria.js

@@ -51,6 +51,7 @@ const Editoria = () => (
       value="<p> <span style='font-style:italic;'>test</span>hello <code> this is the code</code></p>"
       layout={EditoriaLayout}
       user={user}
+      debug
     />
     <div id="editors"></div>
   </Fragment>

wax-prosemirror-core/src/config/defaultConfig.js

@@ -5,7 +5,6 @@ import {
   RulesService,
   ShortCutsService,
   /*TODO MOVE FROM DEFAULT CONFIG*/
-  AnnotationToolGroupService,
   ImageService,
   PlaceholderService,
   TextStyleService,
@@ -28,7 +27,6 @@ export default {
     new ShortCutsService(),
     new LayoutService(),
     new MenuService(),
-    new AnnotationToolGroupService(),
     new ListToolGroupService(),
     new TextStyleService(),
     new PlaceholderService(),

wax-prosemirror-core/src/services/LayoutService/components/componentPlugin.js

@@ -19,13 +19,13 @@ class UpdateView extends Component {
 }
 
 const ComponentPlugin = renderArea => props => {
-  const { view, instance } = useInjection("Layout");
+  const { instance } = useInjection("Layout");
 
   const components = instance.render(renderArea);
 
   return components
     ? components.map((Component, key) => {
-        return <Component {...view} key={`${renderArea}-${key}`} />;
+        return <Component key={`${renderArea}-${key}`} />;
       })
     : null;
 };

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

@@ -105,7 +105,7 @@ const EditoriaLayout = ({ editor }) => {
               <LeftSideBar />
             </SideMenuInner>
           </SideMenuContainer>
-          <WaxSurfaceScroll className="wax-surface-scroll">
+          <WaxSurfaceScroll className="wax-surface-scroll test">
             {editor}
             <WaxOverlays />
           </WaxSurfaceScroll>

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

@@ -10,7 +10,6 @@ class LinkComponent extends PureComponent {
   // }
 
   render() {
-    console.log("paoooooooooo", this.props);
     return (
       <div>
         <input

wax-prosemirror-services/src/MenuService/Menu.js

-import React, { useMemo } from "react";
+import React, { useMemo, useContext } from "react";
 import { injectable } from "inversify";
 import ToolGroup from "../lib/ToolGroup";
 
 import MenuWrapper from "./MenuWrapper";
+import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
 
 @injectable()
 export default class Menu {
@@ -25,11 +26,10 @@ export default class Menu {
   }
 
   render() {
-    return view => {
-      //if (!view) return null;
-
+    return () => {
+      const { view } = useContext(WaxContext);
       const Bar = useMemo(
-        () => <MenuWrapper items={this.toolGroups} view={view} />,
+        () => <MenuWrapper items={this.toolGroups} view={view || {}} />,
         [view]
       );
       return <>{Bar}</>;

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

-import React from "react";
+import React, { useState, useContext, useEffect, useCallback } from "react";
 import { markActive } from "../lib/Utils";
+import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
+
+const usePosition = view => {
+  const [position, setPosition] = useState({
+    position: "absolute",
+    left: null,
+    top: null,
+    from: null,
+    to: null
+  });
+
+  const updatePosition = useCallback(view => {
+    let left = position.left;
+    let top = position.top;
+    if (!view) return { left, top };
+    view = view.view;
+    const { from: currentFrom, to: currentTo } = view.state.selection;
+
+    if (
+      currentFrom < position.from ||
+      position.to > currentTo ||
+      !position.from ||
+      !position.to
+    ) {
+      const start = view.coordsAtPos(currentFrom);
+
+      const box = view.dom.offsetParent.getBoundingClientRect();
+
+      left = start.left - box.left + "px";
+      top = start.top - box.top + 20 + "px";
+    }
+
+    console.log(left, top);
+    return { left, top, from: currentFrom, to: currentTo };
+  });
+
+  useEffect(() => {
+    setPosition({ position: "absolute", ...updatePosition(view) });
+  }, [JSON.stringify(updatePosition(view))]);
+
+  return [position, setPosition];
+};
+
+export default Component => () => {
+  let { view } = useContext(WaxContext);
+
+  const [position, setPosition] = usePosition(view);
+
+  console.log(position);
 
-export default Component => ({ view }) => {
   if (!view) return null;
 
-  if (!markActive(view.state.schema.marks.link)(view.state)) {
-    return null;
-  }
+  const mark = markActive(view.view.state.schema.marks.link)(view.view.state);
+
+  const visible = mark ? true : false;
 
-  return (
-    <div style={{ position: "relative", width: "100px", height: "100px" }}>
-      Overlay Area
-      <Component />
+  return visible ? (
+    <div style={position}>
+      <Component setPosition={setPosition} />
     </div>
-  );
+  ) : null;
 };