@vonaffenfels/slate-editor 1.1.71 → 1.2.0

package/src/Storybook.js

@@ -1,152 +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);
+
+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

@@ -1,65 +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}/>;
+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/Anchor.js

@@ -1,95 +1,95 @@
-import {
-    ReactEditor, useSlate,
-} from "slate-react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import React, {
-    useEffect, useState,
-} from "react";
-import classNames from "classnames";
-import {
-    Editor, Transforms, Element as SlateElement, Range, Node,
-} from "slate";
-import {
-    faAnchor, faLink,
-} from "@fortawesome/free-solid-svg-icons";
-
-export const AnchorButtonElement = ({
-    icon,
-    children,
-}) => {
-    const editor = useSlate();
-
-    const [anchor, setAnchor] = useState("");
-    const [node, setNode] = useState(undefined);
-
-    useEffect(() => {
-        if (editor?.selection?.anchor?.path?.[0] !== undefined) {
-            let node = Node.get(editor, [editor?.selection?.anchor?.path?.[0]]);
-
-            setAnchor(node?.attributes?.id || "");
-            setNode(node);
-        }
-    }, [editor?.selection?.anchor?.path?.[0], editor]);
-
-    const apply = (value) => {
-        // Node.get could return editor itself
-        if (!node?.type) {
-            return;
-        }
-
-        let path = ReactEditor.findPath(editor, node);
-
-        let newNode = {
-            ...node,
-            attributes: {
-                ...node.attributes,
-                id: anchor,
-            },
-        };
-
-        setNode(newNode);
-
-        Transforms.setNodes(editor, newNode, {at: path});
-    };
-
-    const reset = () => {
-        apply("");
-
-        return;
-    };
-
-    return (
-        <span
-            className={
-                classNames({
-                    "toolbar-btn": true,
-                    "active": node?.attributes?.id,
-                })
-            }
-        >
-            {!!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">
-                            Ankername
-                        </label>
-                        <span className="toolbar-form-input">
-                            <input type="text" value={anchor} onChange={(e) => setAnchor(e.target.value)}/>
-                        </span>
-                    </span>
-                    <span className="toolbar-btn-config-row">
-                        <span className="toolbar-btn" onMouseDown={() => apply(anchor)}>Apply</span>
-                        {node?.attributes?.id && <span className="toolbar-btn" onMouseDown={reset}>Remove</span>}
-                    </span>
-                </span>
-            </span>
-        </span>
-    );
-};
-
-
-export const AnchorButton = () => {
-    return <AnchorButtonElement icon={faAnchor}/>;
+import {
+    ReactEditor, useSlate,
+} from "slate-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React, {
+    useEffect, useState,
+} from "react";
+import classNames from "classnames";
+import {
+    Editor, Transforms, Element as SlateElement, Range, Node,
+} from "slate";
+import {
+    faAnchor, faLink,
+} from "@fortawesome/free-solid-svg-icons";
+
+export const AnchorButtonElement = ({
+    icon,
+    children,
+}) => {
+    const editor = useSlate();
+
+    const [anchor, setAnchor] = useState("");
+    const [node, setNode] = useState(undefined);
+
+    useEffect(() => {
+        if (editor?.selection?.anchor?.path?.[0] !== undefined) {
+            let node = Node.get(editor, [editor?.selection?.anchor?.path?.[0]]);
+
+            setAnchor(node?.attributes?.id || "");
+            setNode(node);
+        }
+    }, [editor?.selection?.anchor?.path?.[0], editor]);
+
+    const apply = (value) => {
+        // Node.get could return editor itself
+        if (!node?.type) {
+            return;
+        }
+
+        let path = ReactEditor.findPath(editor, node);
+
+        let newNode = {
+            ...node,
+            attributes: {
+                ...node.attributes,
+                id: anchor,
+            },
+        };
+
+        setNode(newNode);
+
+        Transforms.setNodes(editor, newNode, {at: path});
+    };
+
+    const reset = () => {
+        apply("");
+
+        return;
+    };
+
+    return (
+        <span
+            className={
+                classNames({
+                    "toolbar-btn": true,
+                    "active": node?.attributes?.id,
+                })
+            }
+        >
+            {!!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">
+                            Ankername
+                        </label>
+                        <span className="toolbar-form-input">
+                            <input type="text" value={anchor} onChange={(e) => setAnchor(e.target.value)}/>
+                        </span>
+                    </span>
+                    <span className="toolbar-btn-config-row">
+                        <span className="toolbar-btn" onMouseDown={() => apply(anchor)}>Apply</span>
+                        {node?.attributes?.id && <span className="toolbar-btn" onMouseDown={reset}>Remove</span>}
+                    </span>
+                </span>
+            </span>
+        </span>
+    );
+};
+
+
+export const AnchorButton = () => {
+    return <AnchorButtonElement icon={faAnchor}/>;
 };