@vonaffenfels/slate-editor 1.1.70 → 1.1.71

package/src/Blocks/LayoutBlock.js

@@ -1,275 +1,275 @@
-import React from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {
-    faAlignCenter,
-    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 switchCenter = (e) => {
-        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
-        let fromPath = ReactEditor.findPath(editor, node);
-
-        if (!fromPath) {
-            return;
-        }
-
-        let justifyCenter = !(element?.attributes?.justifyCenter);
-
-        Transforms.setNodes(editor, {
-            type: "layout",
-            attributes: {
-                ...(element.attributes || {}),
-                justifyCenter,
-            },
-        }, {at: fromPath});
-    };
-
-    const switchBorder = (e) => {
-        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
-        let fromPath = ReactEditor.findPath(editor, node);
-
-        if (!fromPath) {
-            return;
-        }
-
-        let tableBorder = !(element?.attributes?.tableBorder);
-
-        Transforms.setNodes(editor, {
-            type: "layout",
-            attributes: {
-                ...(element.attributes || {}),
-                tableBorder,
-            },
-        }, {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});
-    };
-
-    const switchMobileColumnSpan = () => {
-        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
-        let fromPath = ReactEditor.findPath(editor, node);
-
-        if (!fromPath) {
-            return;
-        }
-
-        let mobileColumnSpan = element?.attributes?.mobileColumnSpan === 1 ? 2 : 1;
-
-        Transforms.setNodes(editor, {
-            type: "layout",
-            attributes: {
-                ...(element.attributes || {}),
-                mobileColumnSpan,
-            },
-        }, {at: fromPath});
-    };
-
-    let isGrid = true;
-
-    if (Array.isArray(element?.children)) {
-        element.children.forEach(child => {
-            if (child.type === "layout-slot" && ["grid-auto", "grid-fill"].includes(child.attributes.name)) {
-                isGrid = false;
-            }
-        });
-    }
-
-    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>
-            <span className="options-container-option options-container-option-expand" onClick={switchCenter}>
-                {!element?.attributes?.justifyCenter ? (
-                    <FontAwesomeIcon icon={faAlignCenter} size="lg"/>
-                ) : (
-                    <FontAwesomeIcon icon={faAlignCenter} color="#3490f3" size="lg"/>
-                )}
-            </span>
-            <span className="options-container-option options-container-option-expand-text mx-2" onClick={switchBorder}>
-                {!element?.attributes?.tableBorder ? (
-                    <span>Kein Rahmen</span>
-                ) : (
-                    <span>Rahmen</span>
-                )}
-            </span>
-            <span className="mx-2 cursor-pointer" onClick={switchMobileColumnSpan}>
-                <span>Mobile Spalten: {element?.attributes?.mobileColumnSpan || 1}</span>
-            </span>
-            <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
-        </div>
-        <div
-            className={`layout-block layout-grid layout-grid-cols-${children.length} ` + classNames({
-                "layout-block-flex": !isGrid,
-                "layout-block-grid": isGrid,
-                [classNameArticle + " article-width"]: element?.attributes?.width === "article" || !element?.attributes?.width,
-                [classNameSite + " site-width"]: element?.attributes?.width === "full",
-                "block-editor-table-border-wrapper": element?.attributes?.tableBorder,
-                "mx-auto": element?.attributes?.justifyCenter,
-                "gap-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,
-                "md:grid-cols-1": element?.children?.length === 1,
-                "md:grid-cols-2": element?.children?.length === 2,
-                "md:grid-cols-3": element?.children?.length === 3,
-                "md:grid-cols-4": element?.children?.length === 4,
-                "md:grid-cols-5": element?.children?.length === 5,
-                "grid-cols-1": element?.attributes?.mobileColumnSpan === 1,
-                "grid-cols-2": element?.attributes?.mobileColumnSpan === 2,
-            })}
-            {...attributes}
-        >
-            {children}
-        </div>
-    </div>;
+import React from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+    faAlignCenter,
+    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 switchCenter = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let justifyCenter = !(element?.attributes?.justifyCenter);
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                justifyCenter,
+            },
+        }, {at: fromPath});
+    };
+
+    const switchBorder = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let tableBorder = !(element?.attributes?.tableBorder);
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                tableBorder,
+            },
+        }, {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});
+    };
+
+    const switchMobileColumnSpan = () => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let mobileColumnSpan = element?.attributes?.mobileColumnSpan === 1 ? 2 : 1;
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                mobileColumnSpan,
+            },
+        }, {at: fromPath});
+    };
+
+    let isGrid = true;
+
+    if (Array.isArray(element?.children)) {
+        element.children.forEach(child => {
+            if (child.type === "layout-slot" && ["grid-auto", "grid-fill"].includes(child.attributes.name)) {
+                isGrid = false;
+            }
+        });
+    }
+
+    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>
+            <span className="options-container-option options-container-option-expand" onClick={switchCenter}>
+                {!element?.attributes?.justifyCenter ? (
+                    <FontAwesomeIcon icon={faAlignCenter} size="lg"/>
+                ) : (
+                    <FontAwesomeIcon icon={faAlignCenter} color="#3490f3" size="lg"/>
+                )}
+            </span>
+            <span className="options-container-option options-container-option-expand-text mx-2" onClick={switchBorder}>
+                {!element?.attributes?.tableBorder ? (
+                    <span>Kein Rahmen</span>
+                ) : (
+                    <span>Rahmen</span>
+                )}
+            </span>
+            <span className="mx-2 cursor-pointer" onClick={switchMobileColumnSpan}>
+                <span>Mobile Spalten: {element?.attributes?.mobileColumnSpan || 1}</span>
+            </span>
+            <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
+        </div>
+        <div
+            className={`layout-block layout-grid layout-grid-cols-${children.length} ` + classNames({
+                "layout-block-flex": !isGrid,
+                "layout-block-grid": isGrid,
+                [classNameArticle + " article-width"]: element?.attributes?.width === "article" || !element?.attributes?.width,
+                [classNameSite + " site-width"]: element?.attributes?.width === "full",
+                "block-editor-table-border-wrapper": element?.attributes?.tableBorder,
+                "mx-auto": element?.attributes?.justifyCenter,
+                "gap-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,
+                "md:grid-cols-1": element?.children?.length === 1,
+                "md:grid-cols-2": element?.children?.length === 2,
+                "md:grid-cols-3": element?.children?.length === 3,
+                "md:grid-cols-4": element?.children?.length === 4,
+                "md:grid-cols-5": element?.children?.length === 5,
+                "grid-cols-1": element?.attributes?.mobileColumnSpan === 1,
+                "grid-cols-2": element?.attributes?.mobileColumnSpan === 2,
+            })}
+            {...attributes}
+        >
+            {children}
+        </div>
+    </div>;
 };