@vonaffenfels/slate-editor 1.1.37 → 1.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.37",
+    "version": "1.1.39",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "23bd1926bceee0ce73a5d25f021c544ead009f77",
+    "gitHead": "5039c3a8ae4e6e90f31a2e832f55dc3e02fcb190",
     "publishConfig": {
         "access": "public"
     }

package/src/Nodes/Element.js

@@ -37,6 +37,7 @@ export const Element = ({
     switch (props.element.type) {
         case 'storybook':
             return <div
+                id={props?.element?.attributes?.id}
                 onClick={e => e.stopPropagation()}
                 className={"storybook-element-wrapper"}>
                 <StorybookNode

package/src/Toolbar/Anchor.js

@@ -0,0 +1,95 @@
+import {
+    ReactEditor, useSlate,
+} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React, {
+    useEffect, useState,
+} from "react";
+import classNames from "classnames";
+import {
+    Editor, Transforms, Element as SlateElement, Range, Node,
+} from "slate";
+import {
+    faAnchor, faLink,
+} from "@fortawesome/free-solid-svg-icons";
+
+export const AnchorButtonElement = ({
+    icon,
+    children,
+}) => {
+    const editor = useSlate();
+
+    const [anchor, setAnchor] = useState("");
+    const [node, setNode] = useState(undefined);
+
+    useEffect(() => {
+        if (editor?.selection?.anchor?.path?.[0] !== undefined) {
+            let node = Node.get(editor, [editor?.selection?.anchor?.path?.[0]]);
+
+            setAnchor(node?.attributes?.id || "");
+            setNode(node);
+        }
+    }, [editor?.selection?.anchor?.path?.[0], editor]);
+
+    const apply = (value) => {
+        // Node.get could return editor itself
+        if (!node?.type) {
+            return;
+        }
+
+        let path = ReactEditor.findPath(editor, node);
+
+        let newNode = {
+            ...node,
+            attributes: {
+                ...node.attributes,
+                id: anchor,
+            },
+        };
+
+        setNode(newNode);
+
+        Transforms.setNodes(editor, newNode, {at: path});
+    };
+
+    const reset = () => {
+        apply("");
+
+        return;
+    };
+
+    return (
+        <span
+            className={
+                classNames({
+                    "toolbar-btn": true,
+                    "active": node?.attributes?.id,
+                })
+            }
+        >
+            {!!icon && <FontAwesomeIcon icon={icon} />}
+            {children}
+            <span className="toolbar-btn-config">
+                <span className="toolbar-btn-config-inner">
+                    <span className="toolbar-btn-config-row">
+                        <label className="toolbar-form-label">
+                            Ankername
+                        </label>
+                        <span className="toolbar-form-input">
+                            <input type="text" value={anchor} onChange={(e) => setAnchor(e.target.value)}/>
+                        </span>
+                    </span>
+                    <span className="toolbar-btn-config-row">
+                        <span className="toolbar-btn" onMouseDown={() => apply(anchor)}>Apply</span>
+                        {node?.attributes?.id && <span className="toolbar-btn" onMouseDown={reset}>Remove</span>}
+                    </span>
+                </span>
+            </span>
+        </span>
+    );
+};
+
+
+export const AnchorButton = () => {
+    return <AnchorButtonElement icon={faAnchor}/>;
+};

package/src/Toolbar/Toolbar.js

@@ -25,6 +25,7 @@ import {
 } from "@contentful/forma-36-react-components";
 import {Transforms} from "slate";
 import {ElementAutocomplete} from "../ElementAutocomplete";
+import {AnchorButton} from "./Anchor";
 
 export const Portal = ({children}) => {
     return ReactDOM.createPortal(children, window.document.body);
@@ -166,6 +167,8 @@ export const Toolbar = ({
                             <AlignButtonRight/>
                         </ToobarHoverExpandButton>
 
+                        <AnchorButton />
+
                         <ToobarHoverExpandButton>
                             <InsertDividerButton/>
                             <InsertGridButton/>