@vonaffenfels/slate-editor 1.1.71 → 1.2.0

package/src/Toolbar/Block.js

@@ -1,136 +1,136 @@
-import {useSlate} from "slate-react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import React from "react";
-import classNames from "classnames";
-import {
-    Editor, Transforms, Element as SlateElement,
-} from "slate";
-import {
-    faListUl, faListOl, faHeading, faQuoteLeft, faArrowRight,
-} from "@fortawesome/free-solid-svg-icons";
-
-const LIST_TYPES = ['unordered-list', 'ordered-list', 'arrow-list'];
-
-export const BlockButton = ({
-    block,
-    icon,
-    children,
-    attributes,
-}) => {
-    const editor = useSlate();
-    const onClick = (event) => {
-        event.preventDefault();
-        toggleBlock(editor, block, attributes);
-    };
-
-    return (
-        <span
-            onMouseDown={onClick}
-            className={
-                classNames({
-                    "toolbar-btn": true,
-                    "active": isBlockActive(editor, block, attributes),
-                })
-            }>
-            {!!icon && <FontAwesomeIcon icon={icon} />}
-            {children}
-        </span>
-    );
-};
-
-export const toggleBlock = (editor, format, attributes) => {
-    const isActive = isBlockActive(editor, format, attributes);
-    const isList = LIST_TYPES.includes(format);
-
-    Transforms.unwrapNodes(editor, {
-        match: n => {
-            return LIST_TYPES.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type);
-        },
-        split: true,
-    });
-
-    let newFormat = isActive ? "paragraph" : format;
-
-    if (!isActive && isList) {
-        newFormat = "list-item";
-    }
-
-    Transforms.setNodes(editor,
-        {
-            type: newFormat,
-            attributes: attributes,
-        });
-
-    if (!isActive && isList) {
-        const block = {
-            type: format,
-            children: [],
-        };
-
-        Transforms.wrapNodes(editor, block);
-    }
-};
-
-export const isBlockActive = (editor, format, attributes) => {
-    const {selection} = editor;
-
-    if (selection) {
-        let selected = editor;
-
-        let reducedPath = selection.anchor.path.slice(0, -1);
-
-        for (let i = 0; i < reducedPath.length; i++) {
-            let path = reducedPath[i];
-
-            selected = selected.children[path];
-
-            if (LIST_TYPES.includes(selected.type)) {
-                break;
-            }
-        }
-
-        const selectedNodes = [selected];
-
-        return !!selectedNodes.find(v => {
-            if (Editor.isEditor(v)) {
-                return false;
-            }
-
-            if (!SlateElement.isElement(v)) {
-                return false;
-            }
-
-            if (v.type !== format) {
-                return false;
-            }
-
-            if (format === "heading") {
-                return attributes.level === v.attributes.level;
-            }
-
-            return true;
-        });
-    } else {
-        return false;
-    }
-};
-
-export const BlockButtonHeading = ({level}) => {
-    return <BlockButton block="heading" attributes={{level: level}} icon={faHeading}><small>{level}</small></BlockButton>;
-};
-
-export const BlockButtonBlockquote = () => {
-    return <BlockButton block="blockquote" icon={faQuoteLeft}/>;
-};
-
-export const BlockButtonUnorderedList = () => {
-    return <BlockButton block="unordered-list" icon={faListUl}/>;
-};
-
-export const BlockButtonOrderedList = () => {
-    return <BlockButton block="ordered-list" icon={faListOl}/>;
-};
-
-export const BlockButtonArrowList = () => {
-    return <BlockButton block="arrow-list" icon={faArrowRight}/>;
+import {useSlate} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React from "react";
+import classNames from "classnames";
+import {
+    Editor, Transforms, Element as SlateElement,
+} from "slate";
+import {
+    faListUl, faListOl, faHeading, faQuoteLeft, faArrowRight,
+} from "@fortawesome/free-solid-svg-icons";
+
+const LIST_TYPES = ['unordered-list', 'ordered-list', 'arrow-list'];
+
+export const BlockButton = ({
+    block,
+    icon,
+    children,
+    attributes,
+}) => {
+    const editor = useSlate();
+    const onClick = (event) => {
+        event.preventDefault();
+        toggleBlock(editor, block, attributes);
+    };
+
+    return (
+        <span
+            onMouseDown={onClick}
+            className={
+                classNames({
+                    "toolbar-btn": true,
+                    "active": isBlockActive(editor, block, attributes),
+                })
+            }>
+            {!!icon && <FontAwesomeIcon icon={icon} />}
+            {children}
+        </span>
+    );
+};
+
+export const toggleBlock = (editor, format, attributes) => {
+    const isActive = isBlockActive(editor, format, attributes);
+    const isList = LIST_TYPES.includes(format);
+
+    Transforms.unwrapNodes(editor, {
+        match: n => {
+            return LIST_TYPES.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type);
+        },
+        split: true,
+    });
+
+    let newFormat = isActive ? "paragraph" : format;
+
+    if (!isActive && isList) {
+        newFormat = "list-item";
+    }
+
+    Transforms.setNodes(editor,
+        {
+            type: newFormat,
+            attributes: attributes,
+        });
+
+    if (!isActive && isList) {
+        const block = {
+            type: format,
+            children: [],
+        };
+
+        Transforms.wrapNodes(editor, block);
+    }
+};
+
+export const isBlockActive = (editor, format, attributes) => {
+    const {selection} = editor;
+
+    if (selection) {
+        let selected = editor;
+
+        let reducedPath = selection.anchor.path.slice(0, -1);
+
+        for (let i = 0; i < reducedPath.length; i++) {
+            let path = reducedPath[i];
+
+            selected = selected.children[path];
+
+            if (LIST_TYPES.includes(selected.type)) {
+                break;
+            }
+        }
+
+        const selectedNodes = [selected];
+
+        return !!selectedNodes.find(v => {
+            if (Editor.isEditor(v)) {
+                return false;
+            }
+
+            if (!SlateElement.isElement(v)) {
+                return false;
+            }
+
+            if (v.type !== format) {
+                return false;
+            }
+
+            if (format === "heading") {
+                return attributes.level === v.attributes.level;
+            }
+
+            return true;
+        });
+    } else {
+        return false;
+    }
+};
+
+export const BlockButtonHeading = ({level}) => {
+    return <BlockButton block="heading" attributes={{level: level}} icon={faHeading}><small>{level}</small></BlockButton>;
+};
+
+export const BlockButtonBlockquote = () => {
+    return <BlockButton block="blockquote" icon={faQuoteLeft}/>;
+};
+
+export const BlockButtonUnorderedList = () => {
+    return <BlockButton block="unordered-list" icon={faListUl}/>;
+};
+
+export const BlockButtonOrderedList = () => {
+    return <BlockButton block="ordered-list" icon={faListOl}/>;
+};
+
+export const BlockButtonArrowList = () => {
+    return <BlockButton block="arrow-list" icon={faArrowRight}/>;
 };

package/src/Toolbar/Element.js

@@ -1,45 +1,45 @@
-import {useSlate} from "slate-react";
-import {Transforms} from "slate";
-import React, {
-    useContext, useState,
-} from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faPlus} from "@fortawesome/free-solid-svg-icons";
-import {Storybook} from "../Storybook";
-import {StorybookContext} from "../Context/StorybookContext";
-
-export const StorybookButton = () => {
-    const editor = useSlate();
-
-    const onClick = (e) => {
-        e.preventDefault();
-        Transforms.insertNodes(editor, [
-            {
-                children: [{text: ''}],
-                block: "Blocks/Empty",
-                attributes: {blockWidth: "site"},
-                isEmpty: true,
-                type: "storybook",
-            },
-        ]);
-    };
-
-    const onClickInline = (e) => {
-        e.preventDefault();
-        Transforms.insertNodes(editor, {
-            children: [{text: ''}],
-            block: "Blocks/Empty",
-            attributes: {},
-            isInline: true,
-            isEmpty: true,
-            type: "storybook",
-        }, {select: true});
-    };
-
-    return <>
-        <span className={"toolbar-btn"} onMouseDown={onClick}>
-            <FontAwesomeIcon icon={faPlus} />
-            <span> Element hinzufügen</span>
-        </span>
-    </>;
+import {useSlate} from "slate-react";
+import {Transforms} from "slate";
+import React, {
+    useContext, useState,
+} from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPlus} from "@fortawesome/free-solid-svg-icons";
+import {Storybook} from "../Storybook";
+import {StorybookContext} from "../Context/StorybookContext";
+
+export const StorybookButton = () => {
+    const editor = useSlate();
+
+    const onClick = (e) => {
+        e.preventDefault();
+        Transforms.insertNodes(editor, [
+            {
+                children: [{text: ''}],
+                block: "Blocks/Empty",
+                attributes: {blockWidth: "site"},
+                isEmpty: true,
+                type: "storybook",
+            },
+        ]);
+    };
+
+    const onClickInline = (e) => {
+        e.preventDefault();
+        Transforms.insertNodes(editor, {
+            children: [{text: ''}],
+            block: "Blocks/Empty",
+            attributes: {},
+            isInline: true,
+            isEmpty: true,
+            type: "storybook",
+        }, {select: true});
+    };
+
+    return <>
+        <span className={"toolbar-btn"} onMouseDown={onClick}>
+            <FontAwesomeIcon icon={faPlus} />
+            <span> Element hinzufügen</span>
+        </span>
+    </>;
 };

package/src/Toolbar/Formats.js

@@ -1,72 +1,72 @@
-import {useSlate} from "slate-react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import React, {useState} from "react";
-import classNames from "classnames";
-import {
-    Editor, Text, Transforms,
-} from "slate";
-import {
-    faBold, faItalic, faUnderline, faStrikethrough, faSuperscript,
-} from "@fortawesome/free-solid-svg-icons";
-
-export const FormatButton = ({
-    format,
-    icon,
-    children,
-}) => {
-    const editor = useSlate();
-    const onClick = (event) => {
-        event.preventDefault();
-        toggleFormat(editor, format);
-    };
-
-    return (
-        <span
-            onMouseDown={onClick}
-            className={
-                classNames({
-                    "toolbar-btn": true,
-                    "active": isFormatActive(editor, format),
-                })
-            }>
-            {!!icon && <FontAwesomeIcon icon={icon} />}
-            {children}
-        </span>
-    );
-};
-
-export const toggleFormat = (editor, format) => {
-    const isActive = isFormatActive(editor, format);
-    Editor.addMark(editor, format, !isActive);
-};
-
-export const isFormatActive = (editor, format) => {
-    try {
-        const marks = Editor.marks(editor);
-        return marks ? marks[format] === true : false;
-    } catch (e) {
-        console.error(e);
-    }
-
-    return false;
-};
-
-export const FormatButtonBold = () => {
-    return <FormatButton format="bold" icon={faBold}/>;
-};
-
-export const FormatButtonItalic = () => {
-    return <FormatButton format="italic" icon={faItalic}/>;
-};
-
-export const FormatButtonUnderline = () => {
-    return <FormatButton format="underlined" icon={faUnderline}/>;
-};
-
-export const FormatButtonStrikethrough = () => {
-    return <FormatButton format="strikethrough" icon={faStrikethrough}/>;
-};
-
-export const FormatButtonSuperscriptUp = () => {
-    return <FormatButton format="superscriptUp" icon={faSuperscript}/>;
+import {useSlate} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React, {useState} from "react";
+import classNames from "classnames";
+import {
+    Editor, Text, Transforms,
+} from "slate";
+import {
+    faBold, faItalic, faUnderline, faStrikethrough, faSuperscript,
+} from "@fortawesome/free-solid-svg-icons";
+
+export const FormatButton = ({
+    format,
+    icon,
+    children,
+}) => {
+    const editor = useSlate();
+    const onClick = (event) => {
+        event.preventDefault();
+        toggleFormat(editor, format);
+    };
+
+    return (
+        <span
+            onMouseDown={onClick}
+            className={
+                classNames({
+                    "toolbar-btn": true,
+                    "active": isFormatActive(editor, format),
+                })
+            }>
+            {!!icon && <FontAwesomeIcon icon={icon} />}
+            {children}
+        </span>
+    );
+};
+
+export const toggleFormat = (editor, format) => {
+    const isActive = isFormatActive(editor, format);
+    Editor.addMark(editor, format, !isActive);
+};
+
+export const isFormatActive = (editor, format) => {
+    try {
+        const marks = Editor.marks(editor);
+        return marks ? marks[format] === true : false;
+    } catch (e) {
+        console.error(e);
+    }
+
+    return false;
+};
+
+export const FormatButtonBold = () => {
+    return <FormatButton format="bold" icon={faBold}/>;
+};
+
+export const FormatButtonItalic = () => {
+    return <FormatButton format="italic" icon={faItalic}/>;
+};
+
+export const FormatButtonUnderline = () => {
+    return <FormatButton format="underlined" icon={faUnderline}/>;
+};
+
+export const FormatButtonStrikethrough = () => {
+    return <FormatButton format="strikethrough" icon={faStrikethrough}/>;
+};
+
+export const FormatButtonSuperscriptUp = () => {
+    return <FormatButton format="superscriptUp" icon={faSuperscript}/>;
 };

package/src/Toolbar/Insert.js

@@ -1,29 +1,29 @@
-import {useSlate} from "slate-react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import React from "react";
-import {Transforms} from "slate";
-
-export const InsertButton = ({insert, icon, children}) => {
-    const editor = useSlate();
-    const onClick = (event) => {
-        event.preventDefault();
-        Transforms.insertNodes(editor, [insert]);
-    };
-
-    return (
-        <span onMouseDown={onClick} className="toolbar-btn">
-            {!!icon && <FontAwesomeIcon icon={icon} />}
-            {children}
-        </span>
-    );
-};
-
-
-export const InsertDividerButton = () => {
-    return <InsertButton insert={{
-        "type": "divider",
-        "children": [{"text": ""}],
-    }}>
-        <span>Trennlinie einfügen</span>
-    </InsertButton>;
+import {useSlate} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React from "react";
+import {Transforms} from "slate";
+
+export const InsertButton = ({insert, icon, children}) => {
+    const editor = useSlate();
+    const onClick = (event) => {
+        event.preventDefault();
+        Transforms.insertNodes(editor, [insert]);
+    };
+
+    return (
+        <span onMouseDown={onClick} className="toolbar-btn">
+            {!!icon && <FontAwesomeIcon icon={icon} />}
+            {children}
+        </span>
+    );
+};
+
+
+export const InsertDividerButton = () => {
+    return <InsertButton insert={{
+        "type": "divider",
+        "children": [{"text": ""}],
+    }}>
+        <span>Trennlinie einfügen</span>
+    </InsertButton>;
 };