@vonaffenfels/slate-editor 1.0.1

package/src/Storybook.js

@@ -0,0 +1,152 @@
+
+import React, {
+    useRef, useCallback, useEffect, useContext,
+} from "react";
+import {createPortal} from "react-dom";
+// eslint-disable-next-line import/no-unresolved
+import "scss/storybook.scss";
+import {StorybookContext} from "./Context/StorybookContext";
+
+export const Storybook = ({
+    applyChanges,
+    block,
+    attributes,
+}) => {
+    const storybookContext = useContext(StorybookContext);
+    const iframeRef = useRef();
+
+    const sendIframeMessage = (message) => {
+        if (!iframeRef.current) {
+            return;
+        }
+
+        iframeRef.current.contentWindow.postMessage(message, '*');
+    };
+
+    const onLoad = () => {
+        sendIframeMessage({
+            type: "block-editor-ready",
+            current: {
+                block,
+                config: attributes,
+            },
+        });
+    };
+
+    const onMessageReceivedFromIframe = useCallback(event => {
+        try {
+            if (iframeRef.current.contentWindow !== event.source) {
+                // this does NOT work, iframes are weird... lets see if we really need this :D
+                // return;
+            }
+
+            const message = event.data;
+
+            switch (message.type) {
+                case "block-editor-applyChanges":
+                    applyChanges(message.data);
+                    break;
+                case "block-editor-storybook-ready":
+                    onLoad();
+                    break;
+                case "storybook-control-cloudinary-image": {
+                    if (!storybookContext.contentfulSdk) {
+                        console.error("Contentful sdk missing :(");
+                        break;
+                    }
+
+                    storybookContext.contentfulSdk.dialogs.openCurrentApp({
+                        width: "fullWidth",
+                        title: "Select Image",
+                        shouldCloseOnOverlayClick: true,
+                        shouldCloseOnEscapePress: true,
+                        parameters: {type: "cloudinary"},
+                    }).then((image) => {
+                        sendIframeMessage({
+                            type: "storybook-control-cloudinary-image-response",
+                            image: image?.assets?.[0] || null,
+                            issuer: message.issuer,
+                        });
+                    });
+                    break;
+                }
+                case "storybook-control-cloudinary-images": {
+                    if (!storybookContext.contentfulSdk) {
+                        console.error("Contentful sdk missing :(");
+                        break;
+                    }
+
+                    storybookContext.contentfulSdk.dialogs.openCurrentApp({
+                        width: "fullWidth",
+                        title: "Select Images",
+                        shouldCloseOnOverlayClick: true,
+                        shouldCloseOnEscapePress: true,
+                        parameters: {
+                            type: "cloudinary",
+                            multiple: true,
+                        },
+                    }).then((images) => {
+                        sendIframeMessage({
+                            type: "storybook-control-cloudinary-images-response",
+                            images: images?.assets || [],
+                            issuer: message.issuer,
+                        });
+                    });
+                    break;
+                }
+                case "storybook-control-contentful-content":
+                    if (!storybookContext.contentfulSdk) {
+                        console.error("Contentful sdk missing :(");
+                        break;
+                    }
+
+                    storybookContext.contentfulSdk.dialogs.selectSingleEntry({contentTypes: message.contentTypes}).then((content) => {
+                        sendIframeMessage({
+                            type: "storybook-control-contentful-content-response",
+                            content: content,
+                            issuer: message.issuer,
+                        });
+                    });
+                    break;
+                case "storybook-control-contentful-contents":
+                    if (!storybookContext.contentfulSdk) {
+                        console.error("Contentful sdk missing :(");
+                        break;
+                    }
+
+                    storybookContext.contentfulSdk.dialogs.selectMultipleEntries({contentTypes: message.contentTypes}).then((contents) => {
+                        sendIframeMessage({
+                            type: "storybook-control-contentful-contents-response",
+                            contents: contents,
+                            issuer: message.issuer,
+                        });
+                    });
+                    break;
+            }
+        } catch (e) {
+            console.error("Error while parsing storybook message");
+            console.error(e);
+        }
+    }, [iframeRef.current]);
+
+    useEffect(() => {
+        window.addEventListener("message", onMessageReceivedFromIframe);
+
+        return () => {
+            return window.removeEventListener("message", onMessageReceivedFromIframe);
+        };
+    }, [onMessageReceivedFromIframe]);
+
+    return (
+        <Portal target={storybookContext.target}>
+            <div className="storybook-frame">
+                <iframe ref={iframeRef} src={storybookContext.storybookUrl} frameBorder="none"/>
+            </div>
+        </Portal>
+    );
+};
+
+function Portal(props) {
+    return createPortal(props.children,
+        props.target.current);
+}

package/src/Toolbar/Align.js

@@ -0,0 +1,65 @@
+import {useSlate} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React from "react";
+import classNames from "classnames";
+import {Editor, Transforms} from "slate";
+import {faAlignLeft, faAlignCenter, faAlignRight, faHeading} from "@fortawesome/free-solid-svg-icons";
+
+export const AlignButton = ({align, icon, children, label}) => {
+    const editor = useSlate();
+    const onClick = (event) => {
+        event.preventDefault();
+        toggleAlign(editor, align);
+    };
+
+    return (
+        <span
+            onMouseDown={onClick}
+            className={
+                classNames({
+                    "toolbar-btn": true,
+                    "active": isAlignActive(editor, align),
+                })
+            }>
+            {!!icon && <FontAwesomeIcon icon={icon} />}
+            {children}
+        </span>
+    );
+};
+
+export const toggleAlign = (editor, format) => {
+    const isActive = isAlignActive(editor, format);
+
+    Transforms.setNodes(
+        editor,
+        {align: isActive ? null : format},
+        {
+            at: editor.selection,
+            match: node => Editor.isBlock(editor, node),
+            split: false,
+        },
+    );
+};
+
+export const isAlignActive = (editor, format) => {
+    const {selection} = editor;
+    if (selection) {
+        const selectedNodes = [editor.children[selection.anchor.path[0]]];
+
+        return !!selectedNodes.find(v => v.align === format);
+    } else {
+        return false;
+    }
+};
+
+export const AlignButtonLeft = () => {
+    return <AlignButton align="left" icon={faAlignLeft}/>;
+};
+
+export const AlignButtonCenter = () => {
+    return <AlignButton align="center" icon={faAlignCenter}/>;
+};
+
+export const AlignButtonRight = () => {
+    return <AlignButton align="right" icon={faAlignRight}/>;
+};

package/src/Toolbar/Block.js

@@ -0,0 +1,121 @@
+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) {
+        const selectedNodes = [editor.children[selection.anchor.path[0]]];
+
+        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

@@ -0,0 +1,49 @@
+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>
+        <span className={"toolbar-btn"} onMouseDown={onClickInline}>
+            <FontAwesomeIcon icon={faPlus} />
+            <span> Inline Element hinzufügen</span>
+        </span>
+    </>;
+};

package/src/Toolbar/Formats.js

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

package/src/Toolbar/Insert.js

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