feat(services): add services

editors/editoria/config-overrides.js

@@ -12,7 +12,11 @@ module.exports = function override(config, env) {
                 [require("@babel/preset-env"), { modules: false }],
                 require("@babel/preset-react")
               ],
-              plugins: [require("@babel/plugin-proposal-class-properties")]
+              plugins: [
+                ["@babel/plugin-proposal-decorators", { legacy: true }],
+                "babel-plugin-parameter-decorator",
+                ["@babel/plugin-proposal-class-properties", { loose: true }]
+              ]
             }
           },
           {

editors/editoria/jsconfig.json

+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}

editors/editoria/package.json

@@ -13,7 +13,8 @@
     "wax-prosemirror-core": "^0.0.3",
     "wax-prosemirror-layouts": "^0.0.3",
     "wax-prosemirror-schema": "^0.0.3",
-    "wax-prosemirror-themes": "^0.0.3"
+    "wax-prosemirror-themes": "^0.0.3",
+    "babel-plugin-parameter-decorator": "1.0.12"
   },
   "scripts": {
     "start": "react-app-rewired start",

editors/editoria/src/EditorConfig.js

@@ -31,7 +31,9 @@ import {
   LinkToolTipPlugin,
   FindAndReplacePlugin,
   TrackChangePlugin,
-  MenuBarPlugin
+  MenuBarPlugin,
+  LinkService,
+  LayoutService
 } from "wax-prosemirror-plugins";
 
 import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
@@ -98,7 +100,9 @@ const plugins = [
   })
 ];
 
+const services = [new LayoutService(), new LinkService()];
+
 // Add Rules
 const rules = [emDash, ellipsis];
 
-export { schema, keys, plugins, rules };
+export { schema, keys, plugins, rules, services };

editors/editoria/src/Editoria.js

@@ -3,7 +3,7 @@ import styled, { createGlobalStyle } from "styled-components";
 
 import { setLayout } from "wax-prosemirror-core";
 
-import { schema, keys, plugins, rules } from "./EditorConfig";
+import { schema, keys, plugins, rules, services } from "./EditorConfig";
 
 import text from "./text";
 
@@ -11,7 +11,8 @@ const options = {
   schema,
   plugins,
   keys,
-  rules
+  rules,
+  services
 };
 
 const GlobalStyle = createGlobalStyle`

package.json

@@ -3,8 +3,7 @@
   "version": "0.0.1",
   "main": "index.js",
   "author": "Collaborative Knowledge Foundation",
-  "description":
-    "Monorepo for wax-prosemirror, its components and its integrations",
+  "description": "Monorepo for wax-prosemirror, its components and its integrations",
   "repository": {
     "type": "git",
     "url": "git@gitlab.coko.foundation:wax/wax-prosemirror.git"
@@ -13,8 +12,7 @@
   "private": true,
   "scripts": {
     "bootstrap": "lerna bootstrap --no-ci --hoist",
-    "clean":
-      "yarn run clean:artifacts && yarn run clean:packages && yarn run clean:root",
+    "clean": "yarn run clean:artifacts && yarn run clean:packages && yarn run clean:root",
     "clean:artifacts": "lerna run clean --parallel",
     "clean:packages": "lerna clean --yes",
     "clean:root": "rm -rf node_modules",
@@ -26,6 +24,7 @@
   "dependencies": {},
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "css-loader": "^0.28.11",

wax-prosemirror-components/index.js

 export { default as MainMenuBar } from "./src/mainMenuBar/MainMenuBar";
 export { default as SideMenuBar } from "./src/sideMenuBar/SideMenuBar";
 export { default as InfoArea } from "./src/components/infoArea/InfoArea";
-export { default as componentPlugin } from "./src/components/componentPlugin";
+export { default as componentPlugin } from "wax-prosemirror-core/src/componentPlugin";
 export { default as Overlay } from "./src/components/Overlay";

wax-prosemirror-components/src/components/componentPlugin.js

-import React from "react";
-import WaxContext from "wax-prosemirror-core/src/helpers/WaxContext";
-
-const ComponentPlugin = renderArea => props => (
-  <WaxContext.Consumer>
-    {context => {
-      const { state = { plugins: [] } } = context.view;
-      const pluginComponent = state.plugins.map(plugin => {
-        if (
-          state[plugin.key] &&
-          state[plugin.key].renderArea === renderArea &&
-          state[plugin.key].component
-        ) {
-          const Component = state[plugin.key].component;
-          return (
-            <Component key={plugin.key} view={context.view} state={state} />
-          );
-        }
-
-        return null;
-      });
-
-      return pluginComponent;
-    }}
-  </WaxContext.Consumer>
-);
-
-export default ComponentPlugin;

wax-prosemirror-core/index.js

@@ -3,3 +3,4 @@ export { default as CreateSchema } from "./src/config/classes/CreateSchema";
 export { default as setLayout } from "./src/helpers/setLayout";
 export { default as CreateShortCuts } from "./src/config/classes/CreateShortCuts";
 export { default as WaxContext } from "./src/helpers/WaxContext";
+export { default as Container } from "./src/ioc";

wax-prosemirror-core/package.json

@@ -23,7 +23,10 @@
     "prosemirror-view": "^1.13.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "styled-components": "^4.2.0"
+    "styled-components": "^4.2.0",
+    "inversify": "^5.0.1",
+    "inversify-inject-decorators": "^3.1.0",
+    "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
     "mocha": "^3.4.2",

wax-prosemirror-core/src/Wax.js

 import React, { Component } from "react";
+import WaxProvider from "./ioc-react";
+import container from "./ioc";
+
 import debounce from "lodash/debounce";
 import styled from "styled-components";
 
 import { DOMParser, DOMSerializer } from "prosemirror-model";
 import { DefaultLayout } from "wax-prosemirror-layouts";
 
-import WaxContext from "./helpers/WaxContext";
 import WaxView from "./WaxView";
 import defaultPlugins from "./config/defaultPlugins";
 import placeholder from "./config/plugins/placeholder";
@@ -42,7 +44,7 @@ const LayoutWrapper = styled.div`
 class Wax extends Component {
   componentWillMount() {
     const { value, onChange, options } = this.props;
-    const { schema, plugins, keys, rules } = options;
+    const { schema, plugins, keys, rules, services } = options;
     const WaxOnchange = onChange ? onChange : value => true;
 
     const WaxShortCuts = keys
@@ -61,6 +63,12 @@ class Wax extends Component {
       WaxRules
     ]);
 
+    services.map(plugin => {
+      if (plugin.register) {
+        plugin.register();
+      }
+    });
+
     this.WaxOptions = {
       schema,
       plugins: finalPlugins
@@ -70,6 +78,12 @@ class Wax extends Component {
     const serialize = serializer(schema);
     this.WaxOptions.doc = parse(editorContent);
 
+    services.map(plugin => {
+      if (plugin.register) {
+        plugin.boot();
+      }
+    });
+
     this.onChange = debounce(
       value => {
         WaxOnchange(serialize(value));
@@ -115,9 +129,9 @@ class Wax extends Component {
           user={user}
         >
           {({ view, editor }) => (
-            <WaxContext.Provider value={{ view }}>
+            <WaxProvider view={view} container={container}>
               <WaxRender editor={editor} />
-            </WaxContext.Provider>
+            </WaxProvider>
           )}
         </WaxView>
       </LayoutWrapper>

wax-prosemirror-core/src/componentPlugin.js

+import React from "react";
+import { useInjection } from "./ioc-react";
+
+const ComponentPlugin = renderArea => props => {
+  const Layout = useInjection("Layout");
+  console.log(Layout);
+  const { Component } = Layout.render(renderArea);
+
+  return Component ? <Component renderArea={renderArea} /> : null;
+  return Component.map(Component =>
+    Component.renderArea === renderArea ? (
+      <Component.component renderArea={renderArea} />
+    ) : null
+  );
+};
+export default ComponentPlugin;

wax-prosemirror-core/src/ioc-react.js

+import React, { useContext } from "react";
+
+const WaxContext = React.createContext({ view: null, container: null });
+
+export default props => {
+  console.log(props);
+  return (
+    <WaxContext.Provider
+      value={{ container: props.container, view: props.view }}
+    >
+      {props.children}
+    </WaxContext.Provider>
+  );
+};
+
+export function useInjection(identifier) {
+  const { container } = useContext(WaxContext);
+
+  if (!container) {
+    throw new Error();
+  }
+
+  return container.isBound(identifier) ? container.get(identifier) : null;
+}

wax-prosemirror-core/src/ioc.js

+import { Container } from "inversify";
+import "reflect-metadata";
+
+const container = new Container();
+
+export default container;

wax-prosemirror-plugins/index.js

@@ -2,3 +2,5 @@ export { default as TrackChangePlugin } from "./src/trackChanges/TrackChangePlug
 export { default as FindAndReplacePlugin } from "./src/FindAndReplacePlugin";
 export { default as MenuBarPlugin } from "./src/menuBar/MenuBarPlugin";
 export { default as OverlayPlugin } from "./src/overlay/OverlayPlugin";
+export { default as LayoutService } from "./src/LayoutService/LayoutService";
+export { default as LinkService } from "./src/LinkService/LinkService";

wax-prosemirror-plugins/package.json

@@ -10,6 +10,9 @@
   },
   "dependencies": {
     "prosemirror-state": "^1.2.2",
-    "prosemirror-view": "^1.13.1"
+    "prosemirror-view": "^1.13.1",
+    "inversify": "^5.0.1",
+    "inversify-inject-decorators": "^3.1.0",
+    "reflect-metadata": "^0.1.13"
   }
 }

wax-prosemirror-plugins/src/LayoutService/Layout.js

+import { injectable, multiInject } from "inversify";
+
+@injectable()
+export default class Layout {
+  constructor() {
+    this.components = new Map();
+  }
+
+  addComponent(renderArea, component) {
+    this.components.set(renderArea, component);
+    return this;
+  }
+
+  render(renderArea) {
+    return { Component: this.components.get(renderArea) };
+  }
+}

wax-prosemirror-plugins/src/LayoutService/LayoutService.js

+import Service from "../Service";
+import Layout from "./Layout";
+export default class LayoutService extends Service {
+  name = "LayoutService";
+  register() {
+    this.container
+      .bind("Layout")
+      .to(Layout)
+      .inSingletonScope();
+  }
+}

wax-prosemirror-plugins/src/LinkService/LinkPlugin.js

+import React from "react";
+import { injectable, multiInject, inject, named } from "inversify";
+
+const Component1 = props => <div>{props.renderArea}</div>;
+const Component2 = props => <div>{props.renderArea}</div>;
+
+@injectable()
+export default class LinkPlugin {
+  items = [
+    {
+      link: "1",
+      link2: "3"
+    },
+    {
+      link: "2",
+      link2: "4"
+    }
+  ];
+  plugins = [];
+
+  constructor(
+    @inject("Layout") layout,
+    @inject("findPlugin") find,
+    @inject("placeholderPlugin") placeholder
+  ) {
+    this.find = find;
+    this.placeholder = placeholder;
+
+    //console.log(this.find, this.placeholder);
+    layout
+      .addComponent("topBar", Component2)
+      .addComponent("leftSideBar", Component1);
+
+    this.initPlugins();
+  }
+
+  initPlugins() {
+    this.plugins = [this.placeholder(this.items[1]), this.find("s")];
+  }
+}

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

+import LinkPlugin from "./LinkPlugin";
+import Service from "../Service";
+import find from "./pmPlugins/find";
+import placeholder from "./pmPlugins/placeholder";
+
+export default class myLinkPluginService extends Service {
+  name = "LinkPlugin";
+
+  boot() {
+    const test = this.container.get("LinkPlugin");
+    console.log(test);
+  }
+
+  register() {
+    this.container.bind(this.name).to(LinkPlugin);
+
+    this.container.bind("findPlugin").toFactory(find);
+
+    this.container.bind("placeholderPlugin").toFactory(placeholder);
+  }
+}