link overlay funcionality

editors/editoria/package.json

@@ -9,9 +9,11 @@
     "react-dom": "^16.8.6",
     "styled-components": "^4.2.0",
     "wax-prosemirror-components": "^0.0.3",
+    "wax-prosemirror-services": "^0.0.3",
     "wax-prosemirror-core": "^0.0.3",
     "wax-prosemirror-layouts": "^0.0.3",
     "wax-prosemirror-themes": "^0.0.3",
+    "wax-prosemirror-plugins": "^0.0.3",
     "babel-plugin-parameter-decorator": "1.0.12"
   },
   "scripts": {

editors/editoria/src/Editoria.js

@@ -48,7 +48,9 @@ const Editoria = () => (
       autoFocus
       placeholder="Type Something..."
       fileUpload={file => renderImage(file)}
-      value="<p> this is some text and some more</p>"
+      value={
+        '<p class="paragraph">this is some text <a href="www.sss.ff" >some</a> more</p>'
+      }
       layout={EditoriaLayout}
       user={user}
       // onChange={content => {

wax-prosemirror-core/index.js

 export { default as Wax } from "./src/Wax";
 export { default as Service } from "./src/services/Service";
 export { default as WaxContext } from "./src/ioc-react";
-export { default as componentPlugin } from "./src/services/LayoutService/components/componentPlugin";
+export {
+  default as componentPlugin
+} from "./src/services/LayoutService/components/componentPlugin";

wax-prosemirror-core/package.json

@@ -27,7 +27,6 @@
     "inversify": "^5.0.1",
     "inversify-inject-decorators": "^3.1.0",
     "reflect-metadata": "^0.1.13",
-    "wax-prosemirror-services": "^0.0.3",
     "deepmerge": "^4.2.2"
   },
   "devDependencies": {

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

 import Service from "../Service";
 import Layout from "./Layout";
+
 export default class LayoutService extends Service {
   name = "LayoutService";
 

wax-prosemirror-schema/src/marks/linkMark.js

@@ -9,14 +9,15 @@ const link = {
   parseDOM: [
     {
       tag: "a[href]",
-      getAttrs: dom => {
-        const href = dom.getAttribute("href");
+      getAttrs(hook, next) {
+        const href = hook.dom.getAttribute("href");
         const target = href && href.indexOf("#") === 0 ? "" : "blank";
-        return {
-          href: dom.getAttribute("href"),
-          title: dom.getAttribute("title"),
+        Object.assign(hook, {
+          href: hook.dom.getAttribute("href"),
+          title: hook.dom.getAttribute("title"),
           target
-        };
+        });
+        next();
       }
     }
   ],

wax-prosemirror-services/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "inversify": "^5.0.1",
     "inversify-inject-decorators": "^3.1.0",
-    "wax-prosemirror-components": "^0.0.3",
     "wax-prosemirror-core": "^0.0.3",
+    "wax-prosemirror-components": "^0.0.3",
     "wax-prosemirror-layouts": "^0.0.3",
     "styled-components": "^4.2.0"
   }

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

-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState, useContext } from "react";
 import styled from "styled-components";
+import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
+import { DocumentHelpers } from "wax-prosemirror-utilities";
 // import { Button } from "wax-prosemirror-components";
 
 const LinkWrapper = styled.div`
@@ -13,7 +15,15 @@ const LinkWrapper = styled.div`
 const Button = styled.button``;
 
 const LinkComponent = ({ mark, setPosition, position }) => {
-  const ref = useRef(null);
+  const href = mark ? mark.attrs.href : null,
+    linkMark = mark ? mark : null,
+    { view: { main } } = useContext(WaxContext),
+    { state, dispatch } = main,
+    ref = useRef(null),
+    linkInput = useRef(null),
+    [addButtonText, setButtonText] = useState("Create"),
+    [lastLinkMark, setLLastLinkMark] = useState(linkMark),
+    [linkHref, setLinkHref] = useState(href);
 
   useEffect(
     () => {
@@ -21,15 +31,84 @@ const LinkComponent = ({ mark, setPosition, position }) => {
       const left = Math.abs(position.left - width / 2);
 
       setPosition({ ...position, left });
+      setLinkText();
+      removeMarkIfEmptyHref();
     },
-    [ref.current]
+    [ref.current, href]
   );
 
+  const addLink = () => {
+    const href = linkHref;
+    dispatch(
+      state.tr
+        .removeMark(mark.from, mark.to, state.schema.marks.link)
+        .addMark(mark.from, mark.to, state.schema.marks.link.create({ href }))
+    );
+    main.focus();
+  };
+
+  const removeLink = () => {
+    dispatch(state.tr.removeMark(mark.from, mark.to, state.schema.marks.link));
+    main.focus();
+  };
+
+  const handleKeyDown = event => {
+    if (event.key === "Enter" || event.which === 13) {
+      addLink();
+    }
+  };
+
+  const updateLink = () => {
+    const { current: { value } } = linkInput;
+    setLinkHref(value);
+  };
+
+  const setLinkText = () => {
+    if (mark && mark.attrs.href !== "") {
+      setButtonText("Update");
+      setLinkHref(mark.attrs.href);
+    } else {
+      setButtonText("Create");
+      setLinkHref("");
+      if (linkInput.current) linkInput.current.focus();
+    }
+  };
+
+  const removeMarkIfEmptyHref = () => {
+    const { selection: { $from, $to } } = state;
+    const PMLinkMark = state.schema.marks["link"];
+    const actualMark = DocumentHelpers.findMark(state, PMLinkMark);
+    setLLastLinkMark(actualMark);
+
+    if (
+      lastLinkMark.attrs.href === "" &&
+      ($from.pos < lastLinkMark.from || $to.pos > lastLinkMark.to)
+    ) {
+      dispatch(
+        state.tr
+          .setMeta("addToHistory", false)
+          .removeMark(
+            lastLinkMark.from,
+            lastLinkMark.to,
+            state.schema.marks.link
+          )
+      );
+    }
+  };
+
   return mark ? (
     <LinkWrapper ref={ref}>
-      <input type="text" onChange={() => {}} value={mark.attrs.href} />
-      <Button primary>Change</Button>
-      <Button>Cancel</Button>
+      <input
+        type="text"
+        ref={linkInput}
+        onChange={updateLink}
+        onKeyPress={handleKeyDown}
+        value={linkHref}
+      />
+      <Button primary onClick={addLink}>
+        {addButtonText}
+      </Button>
+      <Button onClick={removeLink}>Remove</Button>
     </LinkWrapper>
   ) : null;
 };

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

@@ -15,8 +15,16 @@ export default class LinkTool extends Tools {
         toggleMark(state.config.schema.marks.link)(state, dispatch);
         return true;
       }
-
-      toggleMark(state.config.schema.marks.link, { href: "" })(state, dispatch);
+      const { selection: { $from, $to } } = state;
+      dispatch(
+        state.tr
+          .setMeta("addToHistory", false)
+          .addMark(
+            $from.pos,
+            $to.pos,
+            state.schema.marks.link.create({ href: "" })
+          )
+      );
     };
   }
 

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

@@ -3,7 +3,7 @@ import Menu from "./Menu";
 import MenuCollection from "./MenuCollection";
 import Service from "wax-prosemirror-core/src/services/Service";
 
-export default class MenuService extends Service {
+class MenuService extends Service {
   name = "MenuService";
   boot() {
     const { menus } = this.container.get("MenuCollection");
@@ -45,7 +45,9 @@ export default class MenuService extends Service {
             tools.push(tl);
           } catch (error) {
             throw Error(
-              `Could not load Service ${tool.name}. Please configure service through config`
+              `Could not load Service ${
+                tool.name
+              }. Please configure service through config`
             );
           }
         });
@@ -54,3 +56,4 @@ export default class MenuService extends Service {
     });
   }
 }
+export default MenuService;

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

 import Service from "wax-prosemirror-core/src/services/Service";
-
 import OverlayComponent from "./OverlayComponent";
 
 export default class OverlayService extends Service {