@vonaffenfels/slate-editor 1.1.71 → 1.2.0

package/src/Toolbar/Link.js

@@ -1,165 +1,165 @@
-import {useSlate} from "slate-react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import React, {useState} from "react";
-import classNames from "classnames";
-import {
-    Editor, Transforms, Element as SlateElement, Range,
-} from "slate";
-import {faLink} from "@fortawesome/free-solid-svg-icons";
-
-const initialLinkState = {
-    href: "",
-    title: "",
-    noFollow: false,
-};
-
-export const LinkButtonElement = ({
-    icon,
-    children,
-}) => {
-    const [savedSelection, setSavedSelection] = useState(null);
-    const [linkState, setLinkState] = useState(initialLinkState);
-    const editor = useSlate();
-    const onClick = (event) => {
-        event.preventDefault();
-        editor.selection = savedSelection;
-        toggleLink(
-            editor, linkState.href, linkState.title, linkState.noFollow,
-        );
-    };
-
-    const onInputChange = (name, value) => {
-        setLinkState({
-            ...linkState,
-            [name]: value,
-        });
-    };
-
-    const saveSelection = () => {
-        if (editor.selection) {
-            const activeLink = getActiveLink(editor);
-            if (activeLink) {
-                setLinkState({
-                    href: activeLink[0].attributes.href,
-                    title: activeLink[0].attributes.title,
-                    noFollow: activeLink[0].attributes.noFollow,
-                });
-            }
-
-            setSavedSelection(editor.selection);
-        }
-    };
-
-    const removeLink = () => {
-        editor.selection = savedSelection;
-        toggleLink(editor);
-    };
-
-    const resetLinkState = () => {
-        setLinkState(initialLinkState);
-    };
-
-    const linkActive = isLinkActive(editor);
-
-    return (
-        <span
-            className={
-                classNames({
-                    "toolbar-btn": true,
-                    "active": linkActive,
-                })
-            }
-            onMouseEnter={saveSelection}
-            onMouseLeave={resetLinkState}
-        >
-            {!!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">
-                            URL
-                        </label>
-                        <span className="toolbar-form-input">
-                            <input type="text" value={linkState.href} onChange={(e) => onInputChange("href", e.target.value)}/>
-                        </span>
-                    </span>
-                    <span className="toolbar-btn-config-row">
-                        <label className="toolbar-form-label">
-                            Titel
-                        </label>
-                        <span className="toolbar-form-input">
-                            <input type="text" value={linkState.title} onChange={(e) => onInputChange("title", e.target.value)}/>
-                        </span>
-                    </span>
-                    <span className="toolbar-btn-config-row">
-                        <label className="toolbar-form-label">
-                            noFollow
-                        </label>
-                        <span className="toolbar-form-input">
-                            <input type="checkbox" value="1" checked={linkState.noFollow} onChange={(e) => onInputChange("noFollow", e.target.checked)}/>
-                        </span>
-                    </span>
-                    <span className="toolbar-btn-config-row">
-                        <span className="toolbar-btn" onMouseDown={onClick}>Apply</span>
-                        {linkActive && <span className="toolbar-btn" onMouseDown={removeLink}>Remove</span>}
-                    </span>
-                </span>
-            </span>
-        </span>
-    );
-};
-
-export const getActiveLink = (editor) => {
-    const [link] = Editor.nodes(editor, {
-        match: n => {
-            return !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === 'link';
-        },
-    });
-    return link;
-};
-
-export const isLinkActive = (editor) => {
-    return !!getActiveLink(editor);
-};
-
-
-const unwrapLink = editor => {
-    Transforms.unwrapNodes(editor, {
-        match: n =>
-            !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === 'link',
-    });
-};
-
-const toggleLink = (
-    editor, href, title = "", nofollow = false,
-) => {
-    if (isLinkActive(editor)) {
-        unwrapLink(editor);
-    }
-
-    if (href) {
-        const {selection} = editor;
-        const isCollapsed = selection && Range.isCollapsed(selection);
-        const link = {
-            type: 'link',
-            attributes: {
-                href: href,
-                title: title,
-                nofollow: !!nofollow,
-            },
-            children: isCollapsed ? [{text: href}] : [],
-        };
-
-        if (isCollapsed) {
-            Transforms.insertNodes(editor, link);
-        } else {
-            Transforms.wrapNodes(editor, link, {split: true});
-            Transforms.collapse(editor, {edge: 'end'});
-        }
-    }
-};
-
-export const LinkButton = () => {
-    return <LinkButtonElement icon={faLink}/>;
+import {useSlate} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React, {useState} from "react";
+import classNames from "classnames";
+import {
+    Editor, Transforms, Element as SlateElement, Range,
+} from "slate";
+import {faLink} from "@fortawesome/free-solid-svg-icons";
+
+const initialLinkState = {
+    href: "",
+    title: "",
+    noFollow: false,
+};
+
+export const LinkButtonElement = ({
+    icon,
+    children,
+}) => {
+    const [savedSelection, setSavedSelection] = useState(null);
+    const [linkState, setLinkState] = useState(initialLinkState);
+    const editor = useSlate();
+    const onClick = (event) => {
+        event.preventDefault();
+        editor.selection = savedSelection;
+        toggleLink(
+            editor, linkState.href, linkState.title, linkState.noFollow,
+        );
+    };
+
+    const onInputChange = (name, value) => {
+        setLinkState({
+            ...linkState,
+            [name]: value,
+        });
+    };
+
+    const saveSelection = () => {
+        if (editor.selection) {
+            const activeLink = getActiveLink(editor);
+            if (activeLink) {
+                setLinkState({
+                    href: activeLink[0].attributes.href,
+                    title: activeLink[0].attributes.title,
+                    noFollow: activeLink[0].attributes.noFollow,
+                });
+            }
+
+            setSavedSelection(editor.selection);
+        }
+    };
+
+    const removeLink = () => {
+        editor.selection = savedSelection;
+        toggleLink(editor);
+    };
+
+    const resetLinkState = () => {
+        setLinkState(initialLinkState);
+    };
+
+    const linkActive = isLinkActive(editor);
+
+    return (
+        <span
+            className={
+                classNames({
+                    "toolbar-btn": true,
+                    "active": linkActive,
+                })
+            }
+            onMouseEnter={saveSelection}
+            onMouseLeave={resetLinkState}
+        >
+            {!!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">
+                            URL
+                        </label>
+                        <span className="toolbar-form-input">
+                            <input type="text" value={linkState.href} onChange={(e) => onInputChange("href", e.target.value)}/>
+                        </span>
+                    </span>
+                    <span className="toolbar-btn-config-row">
+                        <label className="toolbar-form-label">
+                            Titel
+                        </label>
+                        <span className="toolbar-form-input">
+                            <input type="text" value={linkState.title} onChange={(e) => onInputChange("title", e.target.value)}/>
+                        </span>
+                    </span>
+                    <span className="toolbar-btn-config-row">
+                        <label className="toolbar-form-label">
+                            noFollow
+                        </label>
+                        <span className="toolbar-form-input">
+                            <input type="checkbox" value="1" checked={linkState.noFollow} onChange={(e) => onInputChange("noFollow", e.target.checked)}/>
+                        </span>
+                    </span>
+                    <span className="toolbar-btn-config-row">
+                        <span className="toolbar-btn" onMouseDown={onClick}>Apply</span>
+                        {linkActive && <span className="toolbar-btn" onMouseDown={removeLink}>Remove</span>}
+                    </span>
+                </span>
+            </span>
+        </span>
+    );
+};
+
+export const getActiveLink = (editor) => {
+    const [link] = Editor.nodes(editor, {
+        match: n => {
+            return !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === 'link';
+        },
+    });
+    return link;
+};
+
+export const isLinkActive = (editor) => {
+    return !!getActiveLink(editor);
+};
+
+
+const unwrapLink = editor => {
+    Transforms.unwrapNodes(editor, {
+        match: n =>
+            !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === 'link',
+    });
+};
+
+const toggleLink = (
+    editor, href, title = "", nofollow = false,
+) => {
+    if (isLinkActive(editor)) {
+        unwrapLink(editor);
+    }
+
+    if (href) {
+        const {selection} = editor;
+        const isCollapsed = selection && Range.isCollapsed(selection);
+        const link = {
+            type: 'link',
+            attributes: {
+                href: href,
+                title: title,
+                nofollow: !!nofollow,
+            },
+            children: isCollapsed ? [{text: href}] : [],
+        };
+
+        if (isCollapsed) {
+            Transforms.insertNodes(editor, link);
+        } else {
+            Transforms.wrapNodes(editor, link, {split: true});
+            Transforms.collapse(editor, {edge: 'end'});
+        }
+    }
+};
+
+export const LinkButton = () => {
+    return <LinkButtonElement icon={faLink}/>;
 };