@vonaffenfels/slate-editor 1.1.71 → 1.2.0

package/src/Blocks/LayoutSlot.js

@@ -1,91 +1,91 @@
-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";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faStickyNote} from "@fortawesome/free-solid-svg-icons";
-
-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});
-    };
-
-    const switchSticky = () => {
-        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
-        let path = ReactEditor.findPath(editor, node);
-        let stickyTop = element?.attributes?.stickyTop;
-
-        if (!element.attributes.sticky) {
-            stickyTop = prompt("Abstand nach oben, wenn sticky", element?.attributes?.stickyTop || 0);
-        }
-
-        Transforms.setNodes(editor, {
-            type: "layout-slot",
-            attributes: {
-                ...(element.attributes || {}),
-                sticky: !element.attributes.sticky,
-                stickyTop: stickyTop || 0,
-            },
-        }, {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>
-
-                <div className="flex items-center">
-                    {!element?.attributes?.sticky ? (
-                        <FontAwesomeIcon icon={faStickyNote} color="#000000" size="md" className="mr-2 cursor-pointer" onClick={switchSticky} />
-                    ) : (
-                        <FontAwesomeIcon icon={faStickyNote} color="#3490f3" size="md" className="mr-2 cursor-pointer" onClick={switchSticky} />
-                    )}
-                    <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
-                </div>
-            </div>
-            <div className="layout-slot-content">
-                <div className={classNames({"sticky top-[80px]": element?.attributes?.sticky})}>
-                    {children}
-                </div>
-            </div>
-        </LayoutSlotContext.Provider>
-    </div>;
+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";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faStickyNote} from "@fortawesome/free-solid-svg-icons";
+
+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});
+    };
+
+    const switchSticky = () => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+        let stickyTop = element?.attributes?.stickyTop;
+
+        if (!element.attributes.sticky) {
+            stickyTop = prompt("Abstand nach oben, wenn sticky", element?.attributes?.stickyTop || 0);
+        }
+
+        Transforms.setNodes(editor, {
+            type: "layout-slot",
+            attributes: {
+                ...(element.attributes || {}),
+                sticky: !element.attributes.sticky,
+                stickyTop: stickyTop || 0,
+            },
+        }, {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>
+
+                <div className="flex items-center">
+                    {!element?.attributes?.sticky ? (
+                        <FontAwesomeIcon icon={faStickyNote} color="#000000" size="md" className="mr-2 cursor-pointer" onClick={switchSticky} />
+                    ) : (
+                        <FontAwesomeIcon icon={faStickyNote} color="#3490f3" size="md" className="mr-2 cursor-pointer" onClick={switchSticky} />
+                    )}
+                    <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
+                </div>
+            </div>
+            <div className="layout-slot-content">
+                <div className={classNames({"sticky top-[80px]": element?.attributes?.sticky})}>
+                    {children}
+                </div>
+            </div>
+        </LayoutSlotContext.Provider>
+    </div>;
 };

package/src/CollapsableMenu/CollapsableMenu.js

@@ -1,49 +1,49 @@
-import {useState} from "react";
-
-export const CollapsableMenu = ({
-    button,
-    children,
-    ...props
-}) => {
-    const [collapsed, setCollapsed] = useState(true);
-
-    children = children.map(child => ({
-        ...child,
-        props: {
-            ...child.props,
-            onClick: () => {
-                if (child.props.onClick) {
-                    child.props.onClick();
-
-                    setCollapsed(true);
-                }
-            },
-        },
-    }));
-
-    return (
-        <div className="relative">
-            <div className="relative">
-                <div onClick={() => setCollapsed(!collapsed)}>
-                    {button}
-                </div>
-            </div>
-            {!collapsed && (
-                <div className="collapsable-menu absolute right-0 mt-2 w-52">
-                    {children}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export const CollapsableMenuItem = ({
-    children,
-    onClick,
-}) => {
-    return (
-        <div className="collapsable-menu-item cursor-pointer px-4 py-2" onClick={onClick}>
-            {children}
-        </div>
-    );
+import {useState} from "react";
+
+export const CollapsableMenu = ({
+    button,
+    children,
+    ...props
+}) => {
+    const [collapsed, setCollapsed] = useState(true);
+
+    children = children.map(child => ({
+        ...child,
+        props: {
+            ...child.props,
+            onClick: () => {
+                if (child.props.onClick) {
+                    child.props.onClick();
+
+                    setCollapsed(true);
+                }
+            },
+        },
+    }));
+
+    return (
+        <div className="relative">
+            <div className="relative">
+                <div onClick={() => setCollapsed(!collapsed)}>
+                    {button}
+                </div>
+            </div>
+            {!collapsed && (
+                <div className="collapsable-menu absolute right-0 mt-2 w-52">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export const CollapsableMenuItem = ({
+    children,
+    onClick,
+}) => {
+    return (
+        <div className="collapsable-menu-item cursor-pointer px-4 py-2" onClick={onClick}>
+            {children}
+        </div>
+    );
 };

package/src/Context/StorybookContext.js

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

package/src/ElementAutocomplete.js

@@ -1,134 +1,134 @@
-import {Autocomplete} from "@contentful/f36-components";
-import {
-    useEffect, useState,
-} from "react";
-
-const devMode = localStorage.getItem("dev-mode") === "true";
-
-export const ElementAutocomplete = ({
-    storybookStories,
-    isLoading,
-    editor,
-    storyContext = "",
-    portal,
-    lastSelection,
-    onChange,
-    ...props
-}) => {
-    const items = ([...(storybookStories.map(story => ({
-        ...story,
-        type: "storybook",
-    })) || []), ...customStories]).map(story => {
-        let storyTitleSplit = String(story.title || "").split("/");
-        let storyName = story.label || storyTitleSplit.at(-1);
-        let storyGroup = storyTitleSplit.length > 1 ? storyTitleSplit.slice(0, -1).join("/") : "Weitere Elemente";
-
-        if (story.type === "storybook") {
-            if (!story.id) {
-                return;
-            }
-
-            let splitStoryContext = String(storyContext || "").split(",");
-            let isItemInStoryContext = splitStoryContext.find(context => {
-                return Array.isArray(story.storyContext) ? story.storyContext.includes(context) : context === story.storyContext;
-            });
-            let isItemInPortalContext = !story.portalContext || story.portalContext.includes(portal);
-
-            if (!devMode && (!isItemInStoryContext || !isItemInPortalContext)) {
-                return;
-            }
-        }
-
-        return {
-            value: story.id?.toLowerCase(),
-            group: storyGroup,
-            label: (storyName || "NameFehlerhaft").replace(/([^A-Z]*)([A-Z]+)([^A-Z]*)/g, '$1 $2$3').trim(),
-            attributes: story?.stories?.[0]?.args || story?.stories?.[1]?.args || {},
-            type: story.type,
-        };
-    }).filter(Boolean).sort(function (a, b) {
-        if (a.label < b.label) {
-            return -1;
-        }
-        if (a.label > b.label) {
-            return 1;
-        }
-        return 0;
-    });
-
-    const [filteredItems, setFilteredItems] = useState(items);
-
-    useEffect(() => {
-        setFilteredItems(items);
-    }, [storybookStories]);
-
-    const handleQueryChange = (query) => {
-        setFilteredItems(query ? items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase())) : items);
-    };
-
-    const handleOnChange = (item) => {
-        onChange(item);
-    };
-
-    useEffect(() => {
-        let autoCompleteElement = document.getElementsByClassName("element-autocomplete")[0];
-
-        if (autoCompleteElement) {
-            autoCompleteElement.value = "";
-        }
-    }, []);
-
-
-    const groupedItemsObj = filteredItems.reduce((acc, item) => {
-        if (!acc[item.group]) {
-            acc[item.group] = [];
-        }
-
-        acc[item.group].push(item);
-
-        return acc;
-    }, {});
-    const groupedItemsArr = Object.keys(groupedItemsObj).reduce((acc, key) => {
-        const group = {
-            groupTitle: key || "#",
-            options: groupedItemsObj[key],
-        };
-
-        group.options.sort((a, b) => {
-            return a.label.localeCompare(b.label);
-        });
-
-        acc.push(group);
-
-        return acc;
-    }, []);
-
-    groupedItemsArr.sort((a, b) => {
-        return a.groupTitle.localeCompare(b.groupTitle);
-    });
-
-    return (
-        <Autocomplete
-            items={groupedItemsArr}
-            isGrouped={true}
-            onInputValueChange={handleQueryChange}
-            isLoading={isLoading}
-            placeholder={'Element hinzufügen'}
-            emptyListMessage={'Keine Elemente gefunden'}
-            noMatchesMessage={'Keine Elemente gefunden'}
-            listMaxHeight={500}
-            onSelectItem={handleOnChange}
-            width="medium"
-            itemToString={(item) => ""}
-            renderItem={(item) => `${item.label}`}
-            {...props}
-        />
-    );
-};
-
-const customStories = [
-    {
-        type: "paragraph",
-        label: "Text",
-    },
+import {Autocomplete} from "@contentful/f36-components";
+import {
+    useEffect, useState,
+} from "react";
+
+const devMode = localStorage.getItem("dev-mode") === "true";
+
+export const ElementAutocomplete = ({
+    storybookStories,
+    isLoading,
+    editor,
+    storyContext = "",
+    portal,
+    lastSelection,
+    onChange,
+    ...props
+}) => {
+    const items = ([...(storybookStories.map(story => ({
+        ...story,
+        type: "storybook",
+    })) || []), ...customStories]).map(story => {
+        let storyTitleSplit = String(story.title || "").split("/");
+        let storyName = story.label || storyTitleSplit.at(-1);
+        let storyGroup = storyTitleSplit.length > 1 ? storyTitleSplit.slice(0, -1).join("/") : "Weitere Elemente";
+
+        if (story.type === "storybook") {
+            if (!story.id) {
+                return;
+            }
+
+            let splitStoryContext = String(storyContext || "").split(",");
+            let isItemInStoryContext = splitStoryContext.find(context => {
+                return Array.isArray(story.storyContext) ? story.storyContext.includes(context) : context === story.storyContext;
+            });
+            let isItemInPortalContext = !story.portalContext || story.portalContext.includes(portal);
+
+            if (!devMode && (!isItemInStoryContext || !isItemInPortalContext)) {
+                return;
+            }
+        }
+
+        return {
+            value: story.id?.toLowerCase(),
+            group: storyGroup,
+            label: (storyName || "NameFehlerhaft").replace(/([^A-Z]*)([A-Z]+)([^A-Z]*)/g, '$1 $2$3').trim(),
+            attributes: story?.stories?.[0]?.args || story?.stories?.[1]?.args || {},
+            type: story.type,
+        };
+    }).filter(Boolean).sort(function (a, b) {
+        if (a.label < b.label) {
+            return -1;
+        }
+        if (a.label > b.label) {
+            return 1;
+        }
+        return 0;
+    });
+
+    const [filteredItems, setFilteredItems] = useState(items);
+
+    useEffect(() => {
+        setFilteredItems(items);
+    }, [storybookStories]);
+
+    const handleQueryChange = (query) => {
+        setFilteredItems(query ? items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase())) : items);
+    };
+
+    const handleOnChange = (item) => {
+        onChange(item);
+    };
+
+    useEffect(() => {
+        let autoCompleteElement = document.getElementsByClassName("element-autocomplete")[0];
+
+        if (autoCompleteElement) {
+            autoCompleteElement.value = "";
+        }
+    }, []);
+
+
+    const groupedItemsObj = filteredItems.reduce((acc, item) => {
+        if (!acc[item.group]) {
+            acc[item.group] = [];
+        }
+
+        acc[item.group].push(item);
+
+        return acc;
+    }, {});
+    const groupedItemsArr = Object.keys(groupedItemsObj).reduce((acc, key) => {
+        const group = {
+            groupTitle: key || "#",
+            options: groupedItemsObj[key],
+        };
+
+        group.options.sort((a, b) => {
+            return a.label.localeCompare(b.label);
+        });
+
+        acc.push(group);
+
+        return acc;
+    }, []);
+
+    groupedItemsArr.sort((a, b) => {
+        return a.groupTitle.localeCompare(b.groupTitle);
+    });
+
+    return (
+        <Autocomplete
+            items={groupedItemsArr}
+            isGrouped={true}
+            onInputValueChange={handleQueryChange}
+            isLoading={isLoading}
+            placeholder={'Element hinzufügen'}
+            emptyListMessage={'Keine Elemente gefunden'}
+            noMatchesMessage={'Keine Elemente gefunden'}
+            listMaxHeight={500}
+            onSelectItem={handleOnChange}
+            width="medium"
+            itemToString={(item) => ""}
+            renderItem={(item) => `${item.label}`}
+            {...props}
+        />
+    );
+};
+
+const customStories = [
+    {
+        type: "paragraph",
+        label: "Text",
+    },
 ];