@vonaffenfels/slate-editor 1.0.1

package/src/Toolbar/Layout.js

@@ -0,0 +1,333 @@
+import {useSlate} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React from "react";
+import {Transforms} from "slate";
+import classNames from "classnames";
+
+
+export const InsertGridButton = () => {
+    return <span
+        className={
+            classNames({"toolbar-btn-expand": true})
+        }
+    >
+        <div className="toolbar-btn-expand-inner">
+            <span className="toolbar-btn">Grid hinzufügen</span>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-2"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>1 | 2</span>
+            </InsertLayoutButton>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-2"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>2 | 1</span>
+            </InsertLayoutButton>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-half"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-half"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>1 | 1 </span>
+            </InsertLayoutButton>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>1 | 1 | 1</span>
+            </InsertLayoutButton>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>1 | 1 | 1 | 1</span>
+            </InsertLayoutButton>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-auto"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-fill"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>auto | fill</span>
+            </InsertLayoutButton>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-fill"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-auto"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>fill | auto</span>
+            </InsertLayoutButton>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-auto"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-fill"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-auto"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>auto | fill | auto</span>
+            </InsertLayoutButton>
+        </div>
+    </span>;
+};
+
+export const InsertLayoutButton = ({
+    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>
+    );
+};

package/src/Toolbar/Link.js

@@ -0,0 +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}/>;
+};

package/src/Toolbar/Toolbar.js

@@ -0,0 +1,164 @@
+import ReactDOM from "react-dom";
+import React, {
+    useEffect, useRef, useState,
+} from "react";
+import {
+    ReactEditor, useSlate,
+} from "slate-react";
+import classNames from "classnames";
+// eslint-disable-next-line import/no-unresolved
+import "scss/toolbar.scss";
+import {
+    FormatButtonBold, FormatButtonItalic, FormatButtonStrikethrough, FormatButtonUnderline,
+} from "./Formats";
+import {
+    AlignButtonLeft, AlignButtonCenter, AlignButtonRight,
+} from "./Align";
+import {
+    BlockButtonHeading, BlockButtonUnorderedList, BlockButtonOrderedList, BlockButtonBlockquote, BlockButtonArrowList,
+} from "./Block";
+import {StorybookButton} from "./Element";
+import {LinkButton} from "./Link";
+import {InsertDividerButton} from "./Insert";
+import {InsertGridButton} from "./Layout";
+
+export const Portal = ({children}) => {
+    return ReactDOM.createPortal(children, window.document.body);
+};
+
+export const Toolbar = ({hover}) => {
+    const ref = useRef();
+    const editor = useSlate();
+
+    useEffect(() => {
+        if (!hover) {
+            return;
+        }
+
+        const el = ref.current;
+        const {selection} = editor;
+
+        if (!el) {
+            return;
+        }
+
+        if (
+            // !selection ||
+            !ReactEditor.isFocused(editor) // ||
+            // Range.isCollapsed(selection) ||
+            // Editor.string(editor, selection) === ''
+        ) {
+            el.removeAttribute('style');
+            el.classList.remove("active");
+            return;
+        }
+
+        try {
+            const domSelection = window.getSelection();
+            const domRange = domSelection.getRangeAt(0);
+            const rect = domRange.getBoundingClientRect();
+
+            el.classList.add("active");
+
+            let distanceToMouse = 10;
+            let top = rect.top + window.pageYOffset - el.offsetHeight - distanceToMouse;
+            let left = rect.left + window.pageXOffset - el.offsetWidth / 2 + rect.width / 2 + distanceToMouse;
+
+            if (top < 0) {
+                top = el.offsetHeight;
+            }
+
+            if (left < 0) {
+                left = 0;
+            }
+
+            el.style.top = `${top}px`;
+            el.style.left = `${left}px`;
+        } catch (e) {
+            el.removeAttribute('style');
+            el.classList.remove("active");
+        }
+    });
+
+    function renderMenu() {
+        return <Menu
+            ref={ref}
+            className={classNames({
+                active: !hover,
+                "toolbar-static": !hover,
+                toolbar: true,
+            })}
+        >
+            <div className="toolbar-btns">
+                <FormatButtonBold/>
+                <FormatButtonItalic/>
+                <FormatButtonUnderline/>
+                <FormatButtonStrikethrough/>
+
+                <LinkButton/>
+
+                <ToobarHoverExpandButton>
+                    <BlockButtonHeading level={2}/>
+                    <BlockButtonHeading level={3}/>
+                    <BlockButtonHeading level={4}/>
+                </ToobarHoverExpandButton>
+
+                <ToobarHoverExpandButton>
+                    <BlockButtonUnorderedList/>
+                    <BlockButtonOrderedList/>
+                    <BlockButtonArrowList/>
+                </ToobarHoverExpandButton>
+
+                <BlockButtonBlockquote/>
+
+                <ToobarHoverExpandButton>
+                    <AlignButtonLeft/>
+                    <AlignButtonCenter/>
+                    <AlignButtonRight/>
+                </ToobarHoverExpandButton>
+
+                <ToobarHoverExpandButton>
+                    <StorybookButton/>
+                    <InsertDividerButton/>
+                    <InsertGridButton/>
+                </ToobarHoverExpandButton>
+
+            </div>
+        </Menu>;
+    }
+
+    if (hover) {
+        return (
+            <Portal>
+                {renderMenu()}
+            </Portal>
+        );
+    } else {
+        return renderMenu();
+    }
+};
+
+export const ToobarHoverExpandButton = ({children}) => {
+    return <span
+        className={
+            classNames({"toolbar-btn-expand": true})
+        }
+    >
+        <div className="toolbar-btn-expand-inner">
+            {children}
+        </div>
+    </span>;
+};
+
+export const Menu = React.forwardRef(({
+    className, ...props
+},
+ref) => (
+    <div
+        {...props}
+        ref={ref}
+        className={className}
+    />
+));
+
+Menu.displayName = "Menu";