feat(overlay): create overlay component

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

@@ -12,8 +12,6 @@ export default class LinkService extends Service {
   name = "LinkPlugin";
 
   boot() {
-    // this.app.PmPlugins.add(PLUGIN_KEY, LinkPlugin(PLUGIN_KEY));
-
     const createOverlay = this.container.get("CreateOverlay");
     createOverlay(LinkComponent);
   }

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

-import { Plugin, PluginKey } from "prosemirror-state";
-
-export default keyPlugin => {
-  const plugin_key = new PluginKey(keyPlugin);
-  return new Plugin({
-    key: plugin_key,
-    state: {
-      init: function init() {
-        return {
-          action: "HIDE_OVERLAY"
-        };
-      },
-      apply(tr, oldState, newState, test) {
-        const { key } = plugin_key;
-
-        newState[key].action = "OPEN_OVERLAY";
-        // console.log("first time");
-        // newState[key].action =
-        //   newState[key].action === "OPEN_OVERLAY"
-        //     ? "HIDE_OVERLAY"
-        //     : "OPEN_OVERLAY";
-        return this.getState(newState);
-      }
-    }
-  });
-};

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

-import React, { useMemo } from "react";
+import React from "react";
 
-export default () => {
-  return <div style={{ width: "100px", height: "100px" }}>Overlay Area</div>;
+export default Component => () => {
+  return (
+    <div style={{ width: "100px", height: "100px" }}>
+      Overlay Area
+      <Component />
+    </div>
+  );
 };

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

@@ -8,12 +8,11 @@ export default class OverlayService extends Service {
   boot() {}
 
   register() {
-    const Components = [];
     this.container.bind("CreateOverlay").toFactory(context => {
       return Component => {
-        const PmPlugins = context.container.get("PmPlugins");
-        Components.push(Component);
-        //PmPlugins.add(PLUGIN_KEY, OverlayPlugin(Components));
+        const layout = context.container.get("Layout");
+        debugger;
+        layout.addComponent("waxOverlays", OverlayComponent(Component));
       };
     });
   }

wax-prosemirror-services/src/OverlayService/pmPlugins/Overlay.js

-import React from "react";
-import { render as renderReact } from "react-dom";
-import OverlayComponent from "../OverlayComponent";
-
-export default class Overlay {
-  constructor(view) {
-    this.tooltip = document.createElement("div");
-    this.tooltip.className = "fds";
-    console.log(view.dom);
-
-    view.dom.parentNode.appendChild(this.tooltip);
-
-    this.update(view, null);
-  }
-
-  render(view) {
-    const { state } = view;
-    const { doc, selection, schema } = state;
-    const markType = schema.marks.link;
-    if (!markType) return;
-
-    const { from, to, empty } = view.state.selection;
-
-    const start = view.coordsAtPos(from);
-    const end = view.coordsAtPos(to);
-    const box = 0; //this.tooltip.getBoundingClientRect();
-    const left = Math.max((start.left + end.left) / 2, start.left + 3);
-
-    const leftSpacing = `${left - box}px`;
-    const bottomSpacing = `${box - start.top}px`;
-    const numberOfCharactersInSelection = to - from;
-
-    return (
-      <OverlayComponent
-        display={empty ? "none" : undefined}
-        left={leftSpacing}
-        bottom={bottomSpacing}
-      >
-        {numberOfCharactersInSelection}
-      </OverlayComponent>
-    );
-  }
-
-  update(view, lastState) {
-    const { state } = view;
-
-    const { doc, selection, schema } = state;
-    const markType = schema.marks.link;
-    if (!markType) return;
-    const { from, to } = selection;
-
-    const domFound = view.domAtPos(from);
-    if (!domFound) {
-      this.destroy();
-      return;
-    }
-
-    // debugger;
-    // const anchorEl = lookUpElement(domFound.node, el => el.nodeName === "A");
-    // if (!anchorEl) {
-    //   this.destroy();
-    //   return;
-    // }
-
-    //if (areStatesEqual(state, lastState)) return;
-
-    // Don't do anything if the document/selection didn't change
-    if (
-      lastState &&
-      lastState.doc.eq(state.doc) &&
-      lastState.selection.eq(state.selection)
-    )
-      return;
-
-    //const tooltipComponent = this.render(view);
-    console.log(view.dom);
-
-    //renderReact(tooltipComponent, view.dom);
-  }
-
-  destroy() {
-    //this.tooltip.remove();
-  }
-}

wax-prosemirror-services/src/OverlayService/pmPlugins/OverlayPlugin.js

-import { Plugin, PluginKey } from "prosemirror-state";
-import Overlay from "./Overlay";
-export default Components =>
-  new Plugin({
-    key: new PluginKey("test"),
-    view(editorView) {
-      return new Overlay(editorView);
-    }
-  });