@vonaffenfels/slate-editor 1.0.1

package/src/Blocks/LayoutSlot.js

@@ -0,0 +1,61 @@
+import React, {
+    createContext, forwardRef, Fragment,
+} from "react";
+import {Transforms} from "slate";
+import {ReactEditor} from "slate-react";
+import classNames from "classnames";
+import {ToolMargin} from "../Tools/Margin";
+
+export const LayoutSlotContext = createContext({isInSlot: false});
+
+export const LayoutSlot = ({
+    editor,
+    children,
+    element,
+    attributes,
+    onElementClick = () => {},
+}) => {
+    const onMarginChange = (value) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        Transforms.setNodes(editor, {
+            type: "layout-slot",
+            attributes: {
+                ...(element.attributes || {}),
+                margin: value,
+            },
+        }, {at: path});
+    };
+
+    return <div
+        className={classNames({
+            ["layout-slot layout-slot-" + element.attributes.name]: true,
+            "editor-mt-4": element?.attributes?.margin?.top,
+            "editor-mr-4": element?.attributes?.margin?.right,
+            "editor-mb-4": element?.attributes?.margin?.bottom,
+            "editor-ml-4": element?.attributes?.margin?.left,
+        })}
+        onClick={() => onElementClick(element)}
+        {...attributes}
+    >
+        <LayoutSlotContext.Provider value={{isInSlot : true}}>
+            <div
+                className="layout-slot-options"
+                contentEditable={false}
+            >
+                <span
+                    className="layout-slot-name"
+                    contentEditable={false}
+                >
+                    {element.attributes.name}
+                </span>
+
+                <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
+            </div>
+            <div className="layout-slot-content">
+                {children}
+            </div>
+        </LayoutSlotContext.Provider>
+    </div>;
+};

package/src/Context/StorybookContext.js

@@ -0,0 +1,7 @@
+import {createContext} from "react";
+
+export const StorybookContext = createContext({
+    storybookUrl: null,
+    storybookTarget: null,
+    activeStorybook: null,
+});

package/src/Nodes/Default.js

@@ -0,0 +1,151 @@
+import classNames from "classnames";
+import React from "react";
+
+export const Default = ({
+    attributes,
+    elementPropsMap,
+    specialClassMap,
+    transformAttributes,
+    children,
+    element,
+    isRenderer,
+    isInSlot = false,
+    defaultComponentReplacement,
+    onElementClick = () => {},
+    ...props
+}) => {
+    const getPropsForType = (type) => {
+        if (!elementPropsMap) {
+            return {};
+        }
+
+        if (isInSlot) {
+            if (elementPropsMap[type + "-in-slot"]) {
+                return elementPropsMap[type + "-in-slot"];
+            }
+        }
+
+        return elementPropsMap[type] || {};
+    };
+    const {
+        type,
+        align,
+    } = element;
+    let elementAttributes = {
+        ...(element.attributes || {}),
+        ...getPropsForType(type),
+    };
+
+    if (typeof transformAttributes === "function") {
+        elementAttributes = transformAttributes(type, elementAttributes);
+    }
+
+    let alignedClassname = attributes.className || elementAttributes.className || "";
+    let Wrapper = elementAttributes.wrapper || function ({children}) {
+        return <>{children}</>;
+    };
+
+    if (align) {
+        if (specialClassMap && specialClassMap[align]) {
+            alignedClassname += specialClassMap[align];
+        } else {
+            alignedClassname += "align-" + align;
+        }
+    }
+
+    attributes.onClick = () => onElementClick(element);
+
+    switch (type) {
+        case "blockquote":
+            return <Wrapper>
+                <blockquote {...attributes} className={alignedClassname.trim()}>{children}</blockquote>
+            </Wrapper>;
+        case "list-item":
+            return <Wrapper>
+                <li {...attributes} className={alignedClassname.trim()}>{children}</li>
+            </Wrapper>;
+        case "unordered-list":
+            return <Wrapper>
+                <ul {...attributes} className={alignedClassname.trim()}>{children}</ul>
+            </Wrapper>;
+        case "ordered-list":
+            return <Wrapper>
+                <ol {...attributes} className={alignedClassname.trim()}>{children}</ol>
+            </Wrapper>;
+        case "arrow-list":
+            return <Wrapper>
+                <ul
+                    {...attributes}
+                    className={classNames({
+                        ...alignedClassname.trim(),
+                        "arrow-list": true,
+                    })}>{children}</ul>
+            </Wrapper>;
+        case "code":
+            if (isRenderer) {
+                return <Wrapper code={element?.attributes?.code} />;
+            } else {
+                return <Wrapper><div {...attributes} className={alignedClassname.trim()}><div dangerouslySetInnerHTML={{__html: element?.attributes?.code}} /></div></Wrapper>;
+            }
+        case "heading":
+            switch (element.attributes.level) {
+                case 1:
+                    return <Wrapper level={element.attributes.level}><h1 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h1></Wrapper>;
+                case 2:
+                    return <Wrapper level={element.attributes.level}><h2 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h2></Wrapper>;
+                case 3:
+                    return <Wrapper level={element.attributes.level}><h3 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h3></Wrapper>;
+                case 4:
+                    return <Wrapper level={element.attributes.level}><h4 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h4></Wrapper>;
+                case 5:
+                    return <Wrapper level={element.attributes.level}><h5 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h5></Wrapper>;
+                case 6:
+                    return <Wrapper level={element.attributes.level}><h6 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h6></Wrapper>;
+                default:
+                    return null;
+            }
+        case "link": {
+            let relProp = `noopener noreferrer`;
+            let {
+                noFollow,
+                nofollow,
+                ...linkAttributes
+            } = elementAttributes;
+
+            const nofollowProp = noFollow || nofollow;
+
+            if (nofollowProp) {
+                relProp += " nofollow";
+            }
+
+            let CustomLink = typeof defaultComponentReplacement === "function" ? defaultComponentReplacement(type) : null;
+
+            if (CustomLink) {
+                return <Wrapper><CustomLink {...linkAttributes} {...attributes} rel={relProp} className={alignedClassname.trim()}>{children}</CustomLink></Wrapper>;
+            } else {
+                return <Wrapper><a {...linkAttributes} {...attributes} rel={relProp} className={alignedClassname.trim()}>{children}</a></Wrapper>;
+            }
+        }
+        case "paragraph":
+            return <Wrapper><p {...element.attributes} {...attributes} className={alignedClassname.trim()}>{children}</p></Wrapper>;
+        case "divider":
+            return <Wrapper>
+                <hr {...attributes} />
+                {children}
+            </Wrapper>;
+        case "div":
+            return <Wrapper>
+                <div {...element.attributes} {...attributes}>{children}</div>
+            </Wrapper>;
+        case "span":
+            return <Wrapper>
+                <span {...element.attributes} {...attributes}>{children}</span>
+            </Wrapper>;
+        default:
+            if (isRenderer) {
+                return <Wrapper>{children}</Wrapper>;
+            } else {
+                return <span {...attributes} className={alignedClassname.trim()}>{children}</span>;
+            }
+    }
+};

package/src/Nodes/Element.js

@@ -0,0 +1,72 @@
+import React from "react";
+import {StorybookNode} from "./Storybook";
+import {Default} from "./Default";
+import {useContext} from "react";
+import {LayoutBlock} from "../Blocks/LayoutBlock";
+import {
+    LayoutSlot, LayoutSlotContext,
+} from "../Blocks/LayoutSlot";
+
+export const Element = ({
+    children,
+    storybookComponentLoader,
+    storybookComponentDataLoader,
+    editor,
+    onStorybookElementClick,
+    onElementClick,
+    ...props
+}) => {
+    const {isInSlot} = useContext(LayoutSlotContext);
+
+    const getPropsForType = (type) => {
+        if (!props.elementPropsMap) {
+            return {};
+        }
+
+        if (isInSlot) {
+            if (props.elementPropsMap[type + "-in-slot"]) {
+                return props.elementPropsMap[type + "-in-slot"];
+            }
+        }
+
+        return props.elementPropsMap[type] || {};
+    };
+
+    let typeProps = getPropsForType(props.element.type);
+
+    switch (props.element.type) {
+        case 'storybook':
+            return <StorybookNode
+                {...props}
+                {...typeProps}
+                isInSlot={isInSlot}
+                storybookComponentLoader={storybookComponentLoader}
+                storybookComponentDataLoader={storybookComponentDataLoader}
+                editor={editor}
+                onStorybookElementClick={onStorybookElementClick}
+            >{children}</StorybookNode>;
+        case 'layout':
+            return <LayoutBlock
+                editor={editor}
+                isInSlot={isInSlot}
+                onElementClick={onElementClick}
+                {...props}
+                {...typeProps}
+            >
+                {children}
+            </LayoutBlock>;
+        case 'layout-slot':
+            return <LayoutSlot
+                editor={editor}
+                isInSlot={isInSlot}
+                onElementClick={onElementClick}
+                {...props}
+                {...typeProps}
+            >
+                {children}
+            </LayoutSlot>;
+        case 'layout-slot-element':
+        default:
+            return <Default {...props} onElementClick={onElementClick} isInSlot={isInSlot}>{children}</Default>;
+    }
+};

package/src/Nodes/Leaf.js

@@ -0,0 +1,40 @@
+import React from "react";
+import {Bold, Italic, Text, Underlined, Strikethrough, Small} from "./Text";
+
+export const Leaf = ({attributes, children, leaf, isRenderer, typeProps, ...props}) => {
+
+    if (leaf.bold) {
+        children = <Bold typeProps={typeProps} attributes={attributes}><Text
+            attributes={attributes}
+            typeProps={typeProps}
+            isRenderer={isRenderer}>{children}</Text></Bold>;
+    }
+
+    if (leaf.italic) {
+        children =
+            <Italic typeProps={typeProps} attributes={attributes}><Text attributes={attributes} typeProps={typeProps} isRenderer={isRenderer}>{children}</Text></Italic>;
+    }
+
+    if (leaf.underlined) {
+        children = <Underlined typeProps={typeProps} attributes={attributes}><Text
+            attributes={attributes}
+            typeProps={typeProps}
+            isRenderer={isRenderer}>{children}</Text></Underlined>;
+    }
+
+    if (leaf.strikethrough) {
+        children = <Strikethrough typeProps={typeProps} attributes={attributes}><Text
+            attributes={attributes}
+            typeProps={typeProps}
+            isRenderer={isRenderer}>{children}</Text></Strikethrough>;
+    }
+
+    if (leaf.small) {
+        children = <Small typeProps={typeProps} attributes={attributes}><Text
+            attributes={attributes}
+            typeProps={typeProps}
+            isRenderer={isRenderer}>{children}</Text></Small>;
+    }
+
+    return <Text attributes={attributes} typeProps={typeProps} isRenderer={isRenderer}>{children}</Text>;
+};

package/src/Nodes/Storybook.js

@@ -0,0 +1,170 @@
+import React, {
+    memo, useContext, useState,
+} from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+    faCog, faArrowUp, faArrowDown, faTimes, faCompress,
+} from "@fortawesome/free-solid-svg-icons";
+import {Storybook} from "../Storybook";
+import {Transforms} from "slate";
+import {StorybookDisplay} from "./StorybookDisplay";
+import classNames from "classnames";
+import {ReactEditor} from "slate-react";
+import {ToolMargin} from "../Tools/Margin";
+
+const StorybookNodeComponent = ({
+    attributes,
+    editor,
+    element,
+    children,
+    storybookComponentLoader,
+    storybookComponentDataLoader,
+    onStorybookElementClick,
+}) => {
+
+    const onEditClick = () => {
+        onStorybookElementClick(element, attributes);
+    };
+
+    const onDeleteClick = () => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        Transforms.setNodes(editor, {isDeleted: true}, {at: path});
+        Transforms.removeNodes(editor, {at: path});
+    };
+
+    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 === "storybook";
+                },
+                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 === "storybook";
+                },
+                to: [path[0] + 1],
+                mode: "highest",
+                voids: false,
+            });
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const switchSize = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let widths = ["", "site", "article", "small"];
+        let width = element?.attributes?.blockWidth || "";
+        let currWidthIndex = widths.indexOf(width) || 0;
+        let newWidth = widths[currWidthIndex + 1] || widths[0];
+
+        Transforms.setNodes(editor, {
+            ...element,
+            attributes: {
+                ...(element.attributes || {}),
+                blockWidth: newWidth,
+            },
+        }, {at: fromPath});
+    };
+
+    const onMarginChange = (value) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        Transforms.setNodes(editor, {
+            ...element,
+            attributes: {
+                ...(element.attributes || {}),
+                margin: value,
+            },
+        }, {at: path});
+    };
+
+    return (
+        <span
+            {...attributes}
+            className={classNames({
+                "storybook-element options-wrapper": true,
+                "storybook-element-float-left": element?.attributes?.float === "left",
+                "storybook-element-float-right": element?.attributes?.float === "right",
+            })}>
+            <span className="options-container">
+                <span className="options-container-option options-container-option-edit" title="Edit" onClick={onEditClick}><FontAwesomeIcon
+                    icon={faCog}
+                    size="lg"/></span>
+                {!element.isInline && (<>
+                    <span className="options-container-option options-container-option-move-up" title="Move up" onClick={moveUp}>
+                        <FontAwesomeIcon icon={faArrowUp} size="lg"/>
+                    </span>
+                    <span className="options-container-option options-container-option-move-down" title="Move down" onClick={moveDown}>
+                        <FontAwesomeIcon icon={faArrowDown} size="lg"/>
+                    </span>
+                    <span className="options-container-option options-container-option-expand-text" onClick={switchSize}>
+                        {!element?.attributes?.blockWidth && "Volle Breite"}
+                        {element?.attributes?.blockWidth === "article" && "Artikel Breite"}
+                        {element?.attributes?.blockWidth === "site" && "Seiten Breite"}
+                        {element?.attributes?.blockWidth === "small" && "Klein"}
+                    </span>
+                    <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange} />
+                </>)}
+            </span>
+            <span className="options-container options-container-right">
+                <span className="options-container-option options-container-option-delete" title="Delete" onClick={onDeleteClick}><FontAwesomeIcon
+                    icon={faTimes}
+                    size="lg"/></span>
+            </span>
+            <span className={classNames({
+                "storybook-element-component": true,
+                "storybook-inline": element.isInline,
+            })}>
+                <StorybookDisplay {...element.attributes} element={element} storybookComponentLoader={storybookComponentLoader} isEditor={true} storybookComponentDataLoader={storybookComponentDataLoader}/>
+            </span>
+            {children}
+        </span>
+    );
+};
+
+/**
+ * Only return true if the storybook block has to rerender!
+ *
+ * @param prevProps
+ * @param nextProps
+ * @returns {boolean}
+ */
+function areEqualProps(prevProps, nextProps) {
+    const areEqual = JSON.stringify(prevProps.element) === JSON.stringify(nextProps.element);
+    return areEqual;
+}
+
+export const StorybookNode = memo(StorybookNodeComponent, areEqualProps);

package/src/Nodes/StorybookDisplay.js

@@ -0,0 +1,118 @@
+import React, {
+    useEffect, useRef, useState,
+} from "react";
+import {EmptyBlock} from "../Blocks/EmptyBlock";
+import ErrorBoundary from "../Blocks/ErrorBoundary";
+import classNames from "classnames";
+
+export const StorybookDisplay = (props) => {
+    const {
+        storybookComponentLoader,
+        storybookComponentDataLoader,
+        element,
+        isEditor,
+    } = props;
+
+    const elRef = useRef();
+
+    useEffect(() => {
+        if (!isEditor || !elRef.current) {
+            return;
+        }
+
+        const interval = setInterval(() => {
+            // innerText for regular elements, img for inline images and such :)
+            if (elRef.current && !elRef.current.innerText && !elRef.current.querySelector("img, svg, iframe, video, audio, picture, frame")) {
+                elRef.current.classList.add("storybook-element-display-empty");
+                elRef.current.dataset.content = `Leeres Element :: ${element.block}`;
+            } else if (elRef.current) {
+                elRef.current.classList.remove("storybook-element-display-empty");
+                delete elRef.current.dataset.content;
+            }
+        }, 100);
+
+        return () => {
+            clearInterval(interval);
+        };
+    }, [elRef.current]);
+
+    if (element.isEmpty || !element.block) {
+        return <EmptyBlock {...element.attributes} />;
+    }
+
+    if (isEditor) {
+        return <ErrorBoundary name={element.block} isEditor={isEditor}>
+            <span ref={elRef} className="storybook-element-display">
+                <BlockComponent
+                    block={element.block}
+                    storybookComponentLoader={storybookComponentLoader}
+                    storybookComponentDataLoader={storybookComponentDataLoader}
+                    attributes={{...element.attributes}}/>
+            </span>
+        </ErrorBoundary>;
+    } else {
+        return <ErrorBoundary name={element.block} isEditor={isEditor}>
+            <BlockComponent
+                block={element.block}
+                storybookComponentLoader={storybookComponentLoader}
+                storybookComponentDataLoader={storybookComponentDataLoader}
+                attributes={{...element.attributes}}/>
+        </ErrorBoundary>;
+    }
+};
+
+const BlockComponent = ({
+    block,
+    storybookComponentLoader,
+    storybookComponentDataLoader,
+    attributes,
+}) => {
+    const [loadedAttributes, setLoadedAttributes] = useState(attributes);
+    let LoadedComponent = storybookComponentLoader(block);
+
+    if (!LoadedComponent) {
+        LoadedComponent = EmptyBlock;
+    } else {
+        if (!LoadedComponent.displayName) {
+            LoadedComponent.displayName = block;
+        }
+    }
+
+    useEffect(() => {
+        const loadData = async () => {
+            if (!storybookComponentDataLoader) {
+                return;
+            }
+
+            return await storybookComponentDataLoader(block, attributes);
+        };
+
+        let mounted = true;
+        loadData().then((result) => {
+            if (result && mounted) {
+                setLoadedAttributes({
+                    ...attributes,
+                    ...(result || {}),
+                });
+            }
+        });
+
+        return () => {
+            mounted = false;
+        };
+    }, [attributes, block, storybookComponentDataLoader]);
+
+    if (loadedAttributes.blockWidth || loadedAttributes.margin) {
+        return <span className={classNames({
+            "block-article-width": loadedAttributes.blockWidth === "article",
+            "block-site-width": loadedAttributes.blockWidth === "site",
+            "block-small-width": loadedAttributes.blockWidth === "small",
+            "editor-mt-large": loadedAttributes?.margin?.top,
+            "editor-mr-large": loadedAttributes?.margin?.right,
+            "editor-mb-large": loadedAttributes?.margin?.bottom,
+            "editor-ml-large": loadedAttributes?.margin?.left,
+        })}><LoadedComponent {...loadedAttributes} /></span>;
+    } else {
+        return <LoadedComponent {...loadedAttributes} />;
+    }
+};

package/src/Nodes/Text.js

@@ -0,0 +1,67 @@
+import React, {Fragment} from "react";
+
+const EmptyWrapper = ({children}) => <>{children}</>;
+
+export const Text = ({isRenderer, attributes, children, typeProps}) => {
+    if (isRenderer) {
+        if (!children) {
+            return null;
+        }
+
+        if (typeof children === "string") {
+            const breakParts = children.split("\n");
+
+            return <Fragment>
+                {breakParts.length > 1 ? breakParts.map((v, i) => {
+                    return <Fragment key={i}>
+                        {renderTextLine(v, typeProps)}{i !== breakParts.length - 1 ? <br/> : null}
+                    </Fragment>;
+                }) : renderTextLine(children, typeProps)}
+            </Fragment>;
+        } else {
+            return <Fragment>
+                {children}
+            </Fragment>;
+        }
+
+    }
+
+    return <span {...attributes}>{children}</span>;
+};
+
+function renderTextLine(text, typeProps) {
+    if (!typeProps || !text || typeof text !== "string") {
+        return text;
+    }
+
+    if (typeProps.line_transform) {
+        for (let startsWithStr in typeProps.line_transform) {
+            if (text.startsWith(startsWithStr)) {
+                const WrapperComponent = typeProps.line_transform[startsWithStr];
+                return <WrapperComponent>{text.substr(startsWithStr.length).trim()}</WrapperComponent>;
+            }
+        }
+    }
+
+    return text;
+}
+
+export const Bold = ({attributes, children}) => {
+    return <strong {...attributes}>{children}</strong>;
+};
+
+export const Italic = ({attributes, children}) => {
+    return <i {...attributes}>{children}</i>;
+};
+
+export const Underlined = ({attributes, children}) => {
+    return <u {...attributes}>{children}</u>;
+};
+
+export const Strikethrough = ({attributes, children}) => {
+    return <del {...attributes}>{children}</del>;
+};
+
+export const Small = ({attributes, children}) => {
+    return <small {...attributes}>{children}</small>;
+};