@vonaffenfels/slate-editor 1.0.1

package/scss/toolbar.scss

@@ -0,0 +1,160 @@
+.toolbar {
+    background-color: rgba(255, 255, 255, 0.95);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    display: none;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 5px;
+    position: absolute;
+    z-index: 500;
+
+    &.toolbar-static {
+        display: block;
+        position: fixed;
+        width: 100%;
+        max-width: 100%;
+        top: 0px;
+        left: 0px;
+    }
+
+    &.active {
+        display: block;
+    }
+
+    .toolbar-btns {
+        display: flex;
+    }
+
+    .toolbar-btn {
+        border-radius: 3px;
+        color: black;
+        cursor: pointer;
+        font-weight: bold;
+        margin-right: 5px;
+        padding: 5px 7px;
+        z-index: 500;
+        position: relative;
+        display: block;
+
+        &.active {
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+
+        &:last-child {
+            margin-right: 0px;
+        }
+
+        &:hover, &:active {
+            background-color: rgba(0, 0, 0, 0.2);
+
+            .toolbar-btn-config {
+                display: block;
+            }
+        }
+
+        .toolbar-btn-config {
+            position: absolute;
+            top: 28px;
+            left: 0px;
+            display: none;
+            background-color: rgba(255, 255, 255, 0.95);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+            padding: 5px 7px;
+
+            .toolbar-btn-config-inner {
+                display: flex;
+                flex-direction: column;
+
+                .toolbar-btn-config-row {
+                    min-width: 250px;
+                    padding: 5px 7px;
+                    display: flex;
+                    flex-direction: row;
+
+                    .toolbar-form-label {
+                        flex-grow: 0;
+                        padding: 0 7px 0 0;
+                    }
+
+                    .toolbar-form-input {
+                        flex-grow: 1;
+
+                        input {
+                            padding: 5px;
+                            border: 1px solid grey;
+                            background-color: white;
+                            color: black;
+
+                            &[type="checkbox"] {
+                                &:checked {
+                                    color: white;
+                                    background-color: black;
+                                }
+                            }
+                        }
+                    }
+
+                    .toolbar-btn {
+                        display: flex;
+                        flex-grow: 1;
+                        border: 1px solid black;
+                    }
+                }
+            }
+        }
+    }
+
+    .toolbar-btn-expand {
+        z-index: 500;
+        display: block;
+        max-height: 28px;
+        overflow: hidden;
+
+        .toolbar-btn-expand-inner {
+            display: flex;
+            flex-direction: column;
+
+            .toolbar-btn.active {
+                order: -1;
+            }
+        }
+
+        &:hover {
+            .toolbar-btn-expand-inner {
+                background-color: rgba(255, 255, 255, 0.95);
+                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+            }
+
+            overflow: visible;
+        }
+
+    }
+
+
+    .toolbar-btn-expand-right {
+        z-index: 500;
+        display: block;
+        max-height: 28px;
+        overflow: hidden;
+
+        .toolbar-btn-expand-inner {
+            left: 100%;
+            display: flex;
+            flex-direction: column;
+
+            .toolbar-btn.active {
+                order: -1;
+            }
+        }
+
+        &:hover {
+            .toolbar-btn-expand-inner {
+                background-color: rgba(255, 255, 255, 0.95);
+                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+            }
+
+            overflow: visible;
+        }
+
+    }
+}

package/src/BlockEditor.js

@@ -0,0 +1,252 @@
+import React, {
+    useCallback, useMemo, useState, useRef, useContext, useEffect,
+} from 'react';
+import {
+    Slate, Editable, withReact, ReactEditor,
+} from 'slate-react';
+import {
+    createEditor, Element as SlateElement, Node, Text, Transforms,
+} from 'slate';
+import {withHistory} from 'slate-history';
+import {Leaf} from "./Nodes/Leaf";
+import {Toolbar} from "./Toolbar/Toolbar";
+import {SoftBreakPlugin} from "./plugins/SoftBreak";
+import classNames from "classnames";
+import {Element} from "./Nodes/Element";
+import "../scss/editor.scss";
+import {StorybookContext} from "./Context/StorybookContext";
+import {ListItemPlugin} from "./plugins/ListItem";
+import ErrorBoundary from "../src/Blocks/ErrorBoundary";
+import SidebarEditor from './SidebarEditor';
+
+export default function BlockEditor({
+    onChange,
+    contentfulSdk,
+    elementPropsMap,
+    value,
+    storybookComponentLoader,
+    storybookComponentDataLoader,
+    storybookStories,
+}) {
+    const storybookContext = useContext(StorybookContext);
+    const storybookTarget = useRef(null);
+    const [isStorybookActive, setStorybookActive] = useState(false);
+    const [selectedStorybookElement, setSelectedStorybookElement] = useState(null);
+    const renderElement = useCallback((props) => {
+        return <Element
+            {...props}
+            editor={editor}
+            storybookComponentLoader={storybookComponentLoader}
+            storybookComponentDataLoader={storybookComponentDataLoader}
+            elementPropsMap={elementPropsMap}
+            onStorybookElementClick={(element, attributes) => setSelectedStorybookElement({
+                ...element,
+                editorAttributes: attributes,
+            })}
+            onElementClick={() => setSelectedStorybookElement(null)}/>;
+    }, []);
+    const renderLeaf = useCallback(props => <Leaf {...props} elementPropsMap={elementPropsMap}/>, []);
+    const emptyValue = [
+        {
+            type: "paragraph",
+            children: [
+                {text: ""},
+            ],
+        },
+    ];
+    const resetEditor = () => {
+        if (confirm("This action will delete all data in the editor, are you sure?")) {
+            onChange(emptyValue);
+        }
+    };
+
+    const onSlateChange = (newValue) => {
+        if (newValue.length > 0) {
+            onChange(newValue);
+        } else {
+            onChange(emptyValue);
+        }
+    };
+
+    const editor = useMemo(() => {
+        const editor = withHistory(withReact(createEditor()));
+        const {
+            normalizeNode,
+            apply,
+        } = editor;
+
+        editor.isVoid = (node) => {
+            return node.type === "storybook" || node.type === "divider";
+        };
+
+        editor.isInline = (node) => {
+            if (node.isInline) {
+                return true;
+            }
+
+            const inlineTypes = [
+                "link",
+            ];
+
+            return inlineTypes.includes(node.type);
+        };
+
+        editor.apply = (operation) => {
+            if (operation.type === "remove_node") {
+                if (operation.node) {
+                    if (operation.node.type === "layout-slot" || operation.node.type === "storybook") {
+                        // prevent slots & elements from beeing deleted by typing!
+                        if (!operation.node.isDeleted) {
+                            return;
+                        }
+                    }
+                }
+            }
+
+            apply(operation);
+        };
+
+        editor.normalizeNode = entry => {
+            const [node, path] = entry;
+
+            if (SlateElement.isElement(node)) {
+                // only text and inlines in paragraph!
+                if (node.type === 'paragraph') {
+                    for (const [child, childPath] of Node.children(editor, path)) {
+                        if (SlateElement.isElement(child) && !editor.isInline(child)) {
+                            Transforms.unwrapNodes(editor, {at: childPath});
+                            return;
+                        }
+                    }
+                }
+
+                // only paragraph in layout-slot no text
+                if (node.type === 'layout-slot') {
+                    for (const [child, childPath] of Node.children(editor, path)) {
+                        if (Text.isText(child)) {
+                            Transforms.wrapNodes(editor, {type: "paragraph"}, {at: childPath});
+                        }
+                    }
+                }
+            }
+
+            normalizeNode(entry);
+        };
+
+        return editor;
+    }, []);
+
+    const handleSidebarEditorChange = newStorybookElement => {
+        let node = ReactEditor.toSlateNode(editor, selectedStorybookElement.editorAttributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        console.log({newStorybookElement});
+
+        let newNodeProps = {
+            block: newStorybookElement.block,
+            isEmpty: false,
+            isInline: selectedStorybookElement.isInline,
+            attributes: newStorybookElement.attributes,
+        };
+
+        Transforms.setNodes(editor, newNodeProps, {at: path});
+
+        onSlateChange(editor.children);
+        setSelectedStorybookElement({
+            ...newNodeProps,
+            editorAttributes: selectedStorybookElement.editorAttributes,
+        });
+    };
+
+    const handleSidebarDeleteClick = (element) => {
+        let node = ReactEditor.toSlateNode(editor, element.editorAttributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        Transforms.setNodes(editor, {isDeleted: true}, {at: path});
+        Transforms.removeNodes(editor, {at: path});
+
+        setSelectedStorybookElement(null);
+    };
+
+    const handleSidebarMoveClick = (element, direction) => {
+        let node = ReactEditor.toSlateNode(editor, element.editorAttributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        // Initially up
+        let to = [path[0] + 1];
+
+        if (direction === "down") {
+            to = [path[0] - 1];
+        }
+
+        try {
+            Transforms.moveNodes(editor, {
+                from: [path[0]],
+                match: node => {
+                    return node.type === "storybook";
+                },
+                to,
+                mode: "highest",
+                voids: false,
+            });
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    return (
+        <div className={classNames({
+            "block-editor-wrapper": true,
+            "storybook-active": isStorybookActive,
+        })}>
+            <div className="storybook-target" ref={storybookTarget}/>
+            <div className="slate-editor">
+                <StorybookContext.Provider value={{
+                    ...storybookContext,
+                    target: storybookTarget,
+                    contentfulSdk: contentfulSdk,
+                    setActive: setStorybookActive,
+                    isActive: isStorybookActive,
+                }}>
+                    <Slate
+                        editor={editor}
+                        value={value}
+                        onChange={onSlateChange}
+                    >
+                        <Toolbar hover={false}/>
+                        <ErrorBoundary
+                            name="editor"
+                            fallback={(
+                                <>
+                                    Invalid Content! Call Support!
+                                </>
+                            )}>
+                            <Editable
+                                renderLeaf={renderLeaf}
+                                renderElement={renderElement}
+                                onKeyDown={(event) => {
+                                    if (event.code === "Backspace") {
+                                        // event.preventDefault();
+                                        // return false;
+                                    }
+
+                                    if (!ListItemPlugin.onKeyDown(event, editor)) {
+                                        SoftBreakPlugin.onKeyDown(event, editor);
+                                    }
+                                }}
+                            />
+                        </ErrorBoundary>
+                    </Slate>
+                </StorybookContext.Provider>
+            </div>
+            {!!selectedStorybookElement && <SidebarEditor
+                sdk={contentfulSdk}
+                storybookElement={selectedStorybookElement}
+                onChange={handleSidebarEditorChange}
+                storybookStories={storybookStories}
+                onClose={() => setSelectedStorybookElement(null)}
+                onDelete={element => handleSidebarDeleteClick(element)}
+                onMove={(element, direction) => handleSidebarMoveClick(element, direction)} />}
+        </div>
+    );
+}

package/src/Blocks/EmptyBlock.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const EmptyBlock = () => {
+    if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production") {
+        // hide this in production
+        return null;
+    }
+
+    return <span className="editor-empty-element" style={{minHeight: 200, display: "inline-block"}}>
+        Unbekanntes Element
+    </span>;
+};

package/src/Blocks/EmptyWrapper.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const EmptyWrapper = ({children}) => {
+    return <>{children}</>;
+};

package/src/Blocks/ErrorBoundary.js

@@ -0,0 +1,41 @@
+import React from "react";
+
+export default class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+        };
+    }
+
+    static getDerivedStateFromError(error) {
+        return {hasError: true};
+    }
+
+    componentDidCatch(error, errorInfo) {
+        const groupName = `Error in ${this.props.name}`;
+        console.groupCollapsed(groupName);
+        console.error("Error", error);
+        console.error("Info", errorInfo);
+        console.groupEnd(groupName);
+    }
+
+    render() {
+        if (this.state.hasError) {
+
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+
+            if (this.props.isEditor) {
+                return <div className="storybook-element-error">
+                    <p>Error in Element {this.props.name}</p>
+                </div>;
+            }
+
+            return null;
+        }
+
+        return this.props.children;
+    }
+}

package/src/Blocks/LayoutBlock.js

@@ -0,0 +1,179 @@
+import React from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+    faArrowDown, faArrowUp, faBorderAll, faBorderNone, faCompress, faTimes,
+} from "@fortawesome/free-solid-svg-icons";
+import {Transforms} from "slate";
+import {faExpand} from "@fortawesome/free-solid-svg-icons/faExpand";
+import {ReactEditor} from "slate-react";
+import classNames from "classnames";
+import {ToolMargin} from "../Tools/Margin";
+
+export const LayoutBlock = ({
+    children,
+    element,
+    editor,
+    attributes,
+    classNameArticle = "article-width",
+    classNameSite = "site-width",
+    onElementClick = () => {},
+    ...props
+}) => {
+    function onRemoveClick(e) {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        try {
+            Transforms.removeNodes(editor, {at: fromPath});
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    const moveUp = () => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        if (!path[0]) {
+            return;
+        }
+
+        try {
+            Transforms.moveNodes(editor, {
+                from: [path[0]],
+                match: node => {
+                    return node.type === "layout";
+                },
+                to: [path[0] - 1],
+                mode: "highest",
+                voids: false,
+            });
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const moveDown = () => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        try {
+            Transforms.moveNodes(editor, {
+                from: [path[0]],
+                match: node => {
+                    return node.type === "layout";
+                },
+                to: [path[0] + 1],
+                mode: "highest",
+            });
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const switchSpacing = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let spacing = !(element?.attributes?.spacing);
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                spacing: spacing,
+            },
+        }, {at: fromPath});
+    };
+
+    const switchSize = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let width = element?.attributes?.width || "article";
+
+        if (width === "article") {
+            width = "full";
+        } else {
+            width = "article";
+        }
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                width: width,
+            },
+        }, {at: fromPath});
+    };
+
+    const onMarginChange = (value) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                margin: value,
+            },
+        }, {at: path});
+    };
+
+    return <div className="options-wrapper" onClick={() => onElementClick(element)}>
+        <div className="options-container">
+            <span className="options-container-option options-container-option-remove" onClick={onRemoveClick}>
+                <FontAwesomeIcon icon={faTimes} size="lg"/>
+            </span>
+            {/*
+            <span className="options-container-option options-container-option-move-up" onClick={moveUp}>
+                <FontAwesomeIcon icon={faArrowUp} size="lg"/>
+            </span>
+            <span className="options-container-option options-container-option-move-down" onClick={moveDown}>
+                <FontAwesomeIcon icon={faArrowDown} size="lg"/>
+            </span>
+            */}
+            <span className="options-container-option options-container-option-expand" onClick={switchSize}>
+                {element?.attributes?.width === "full" ? (
+                    <FontAwesomeIcon icon={faCompress} size="lg"/>
+                ) : (
+                    <FontAwesomeIcon icon={faExpand} size="lg"/>
+                )}
+            </span>
+            <span className="options-container-option options-container-option-expand" onClick={switchSpacing}>
+                {element?.attributes?.spacing === false ? (
+                    <FontAwesomeIcon icon={faBorderNone} size="lg"/>
+                ) : (
+                    <FontAwesomeIcon icon={faBorderAll} size="lg"/>
+                )}
+            </span>
+            <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
+        </div>
+        <div
+            className={`layout-block layout-grid layout-grid-cols-${children.length} ` + classNames({
+                [classNameArticle + " article-width"]: element?.attributes?.width === "article" || !element?.attributes?.width,
+                [classNameSite + " site-width"]: element?.attributes?.width === "full",
+                "space-x-4": element?.attributes?.spacing,
+                "editor-mt-large": element?.attributes?.margin?.top,
+                "editor-mr-large": element?.attributes?.margin?.right,
+                "editor-mb-large": element?.attributes?.margin?.bottom,
+                "editor-ml-large": element?.attributes?.margin?.left,
+            })}
+            {...attributes}
+        >
+            {children}
+        </div>
+    </div>;
+};