From a04584ac861b8521831022ab7c7e4b12b091b2a8 Mon Sep 17 00:00:00 2001
From: Giannis Kopanas <jkopanas@gmail.com>
Date: Tue, 7 Jan 2020 13:13:29 +0200
Subject: [PATCH] feat(overlay): load overlay component
---
editors/editoria/src/Editoria.js | 1 +
.../src/config/defaultConfig.js | 2 -
.../components/componentPlugin.js | 4 +-
.../src/layouts/EditoriaLayout.js | 2 +-
.../src/LinkService/LinkComponent.js | 1 -
.../src/MenuService/Menu.js | 10 +--
.../src/OverlayService/OverlayComponent.js | 67 ++++++++++++++++---
7 files changed, 66 insertions(+), 21 deletions(-)
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index c06b17c1d..2ad25dee4 100644
--- a/editors/editoria/src/Editoria.js
+++ b/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>
diff --git a/wax-prosemirror-core/src/config/defaultConfig.js b/wax-prosemirror-core/src/config/defaultConfig.js
index f2f7f6324..bc8aa6b47 100644
--- a/wax-prosemirror-core/src/config/defaultConfig.js
+++ b/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(),
diff --git a/wax-prosemirror-core/src/services/LayoutService/components/componentPlugin.js b/wax-prosemirror-core/src/services/LayoutService/components/componentPlugin.js
index 5dcca89a4..f242dab50 100644
--- a/wax-prosemirror-core/src/services/LayoutService/components/componentPlugin.js
+++ b/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;
};
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 2ebe0d3d4..f4ef0a434 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/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>
diff --git a/wax-prosemirror-services/src/LinkService/LinkComponent.js b/wax-prosemirror-services/src/LinkService/LinkComponent.js
index 30dc630e6..1c5e4e2dd 100644
--- a/wax-prosemirror-services/src/LinkService/LinkComponent.js
+++ b/wax-prosemirror-services/src/LinkService/LinkComponent.js
@@ -10,7 +10,6 @@ class LinkComponent extends PureComponent {
// }
render() {
- console.log("paoooooooooo", this.props);
return (
<div>
<input
diff --git a/wax-prosemirror-services/src/MenuService/Menu.js b/wax-prosemirror-services/src/MenuService/Menu.js
index 6e09bfb33..cd05020c8 100644
--- a/wax-prosemirror-services/src/MenuService/Menu.js
+++ b/wax-prosemirror-services/src/MenuService/Menu.js
@@ -1,8 +1,9 @@
-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}</>;
diff --git a/wax-prosemirror-services/src/OverlayService/OverlayComponent.js b/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
index 65c06d28c..0f77e0215 100644
--- a/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
+++ b/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
@@ -1,17 +1,64 @@
-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;
};
--
GitLab