@vonaffenfels/slate-editor 1.0.60 → 1.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.60",
+    "version": "1.0.63",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "82ea53774b0e6a0f904cfaaca038bf0eda00af8e",
+    "gitHead": "fe0fcf870d95e0f1c3cc6e8edd31a4c70465df63",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -397,15 +397,9 @@
 }
 
 .button.button--secondary {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
-  width: 100%;
-  padding: 8px 0.75rem !important;
   color: #036fe3 !important;
   border: 1px solid #036fe3 !important;
-  transition: all 100ms ease-in-out;
   background-color: transparent !important;
-  font-size: 0.875rem !important;
-  border-radius: 4px !important;
 }
 
 .button.button--secondary:hover {
@@ -418,6 +412,20 @@
   color: #FFFFFF !important;
 }
 
+.button.button--tertiary {
+  color: rgb(90, 101, 124) !important;
+  background-color: white !important;
+  border: 1px solid #cfd9e0 !important;
+}
+
+.button.button--tertiary:hover {
+  background-color: rgb(248, 248, 248) !important;
+}
+
+.button.button--tertiary:active {
+  background-color: rgb(237, 237, 237) !important;
+}
+
 .resizable {
   .resizable-left {
     position: relative;

package/scss/sidebarEditor.scss

@@ -156,4 +156,24 @@
     .message.message--negative {
         background-color: rgba(238, 26, 26, 0.2);
     }
+
+    .collapsable-menu {
+        background-color: white !important;
+        border: 1px solid #cfd9e0 !important;
+        border-radius: 6px;
+        z-index: 2;
+        overflow: hidden;
+    }
+
+    .collapsable-menu-item {
+        color: rgb(90, 101, 124) !important;
+    }
+
+    .collapsable-menu-item:not(.disabled):hover {
+        background-color: rgb(248, 248, 248) !important;
+    }
+
+    .collapsable-menu-item:not(.disabled):active {
+        background-color: rgb(237, 237, 237) !important;
+    }
 }

package/src/BlockEditor.js

@@ -204,7 +204,7 @@ export default function BlockEditor({
         setSelectedStorybookElement(mergedValue);
     };
 
-    const handleSidebarDeleteClick = (element) => {
+    const handleSidebarDeleteClick = () => {
         contentfulSdk.dialogs
             .openConfirm({
                 title: 'Element löschen',
@@ -271,6 +271,50 @@ export default function BlockEditor({
         }
     };
 
+    const handleSidebarDuplicateClick = () => {
+        let path = selectedStorybookElement.path;
+
+        let selectedStorybookElementCopy = JSON.parse(JSON.stringify({
+            ...selectedStorybookElement,
+            editorAttributes: null,
+            path: null,
+            node: null,
+        }));
+
+        delete selectedStorybookElementCopy.path;
+        delete selectedStorybookElementCopy.node;
+        delete selectedStorybookElementCopy.editorAttributes;
+
+        try {
+            Transforms.insertNodes(editor, [selectedStorybookElementCopy], {at: path});
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const handleSidebarInsertClick = direction => {
+        let node = ReactEditor.toSlateNode(editor, selectedStorybookElement.editorAttributes.ref.current);
+        let path = ReactEditor.findPath(editor, node);
+
+        let at;
+
+        if (direction === "above") {
+            at = [path[0]];
+        } else {
+            at = [path[0] + 1];
+        }
+
+        Transforms.insertNodes(editor, [
+            {
+                children: [{text: ''}],
+                block: "Blocks/Empty",
+                attributes: {blockWidth: "site"},
+                isEmpty: true,
+                type: "storybook",
+            },
+        ], {at});
+    };
+
     const handleSidebarClose = () => {
         setSelectedStorybookElement(null);
     };
@@ -337,7 +381,10 @@ export default function BlockEditor({
                     onClose={handleSidebarClose}
                     onDelete={handleSidebarDeleteClick}
                     onMove={handleSidebarMoveClick}
-                    editor={editor}/>
+                    onDuplicate={handleSidebarDuplicateClick}
+                    onInsert={handleSidebarInsertClick}
+                    editor={editor}
+                    lastSelection={lastSelection} />
                 }
             />
         </div>

package/src/CollapsableMenu/CollapsableMenu.js

@@ -0,0 +1,46 @@
+import {useState} from "react";
+
+export const CollapsableMenu = ({
+    button,
+    children,
+    ...props
+}) => {
+    const [collapsed, setCollapsed] = useState(true);
+
+    children = children.map(child => ({
+        ...child,
+        props: {
+            ...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/ElementAutocomplete.js

@@ -0,0 +1,84 @@
+import {Autocomplete} from "@contentful/forma-36-react-components";
+import {
+    useEffect, useState,
+} from "react";
+import {Transforms} from "slate";
+
+const devMode = localStorage.getItem("dev-mode") === "true";
+
+export const ElementAutocomplete = ({
+    storybookStories,
+    isLoading,
+    editor,
+    storyContext = "",
+    portal,
+    lastSelection,
+    onChange,
+    ...props
+}) => {
+    const items = (storybookStories || []).map(story => {
+        let storyTitleSplit = String(story.title || "").split("/");
+
+        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(),
+            label: storyTitleSplit[storyTitleSplit.length - 1],
+            stories: story.stories,
+        };
+    }).filter(Boolean);
+
+    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 = "";
+        }
+    }, []);
+
+    return (
+        <Autocomplete
+            items={filteredItems}
+            onQueryChange={handleQueryChange}
+            isLoading={isLoading}
+            placeholder={'Element hinzufügen'}
+            emptyListMessage={'Keine Komponenten gefunden'}
+            noMatchesMessage={'Keine Ergebnisse gefunden'}
+            dropdownProps={{isFullWidth: true}}
+            maxHeight={300}
+            onChange={handleOnChange}
+            width="medium"
+            {...props}
+        >
+            {(options) =>
+                options.map((option) => <span key={option.value}>{option.label}</span>)
+            }
+        </Autocomplete>
+    );
+};

package/src/SidebarEditor/Resizable.js

@@ -1,6 +1,11 @@
-import {useEffect, useRef} from "react";
+import {
+    useEffect, useRef,
+} from "react";
 
-export const Resizable = ({left, right}) => {
+export const Resizable = ({
+    left,
+    right,
+}) => {
     const containerRef = useRef();
     const leftRef = useRef();
     const handleRef = useRef();
@@ -14,11 +19,11 @@ export const Resizable = ({left, right}) => {
         if (width < 300) {
             return 300;
         } else if (containerRef.current.getBoundingClientRect().width - width < 300) {
-            return containerRef.current.getBoundingClientRect().width - 300
+            return containerRef.current.getBoundingClientRect().width - 300;
         }
 
         return width;
-    }
+    };
 
     useEffect(() => {
         if (rightRef.current) {
@@ -41,18 +46,18 @@ export const Resizable = ({left, right}) => {
                     return;
                 }
 
-                let newWidth = rightRef.current.resizingStartWidth - (e.pageX - rightRef.current.resizingStartMouseX)
+                let newWidth = rightRef.current.resizingStartWidth - (e.pageX - rightRef.current.resizingStartMouseX);
                 newWidth = checkWidth(newWidth);
 
                 localStorage.setItem("slate-editor-resizable-width", newWidth);
 
                 rightRef.current.style.width = newWidth + 'px';
-            }
+            };
             const onMouseUp = (e) => {
                 if (rightRef.current) {
                     rightRef.current.resizing = false;
                 }
-            }
+            };
 
             rightRef.current.addEventListener("mousedown", onMouseDown);
             document.addEventListener("mousemove", onMouseMove);
@@ -64,15 +69,15 @@ export const Resizable = ({left, right}) => {
                 }
                 document.removeEventListener("mousemove", onMouseMove);
                 document.removeEventListener("mouseup", onMouseUp);
-            }
+            };
         }
     }, [right, left]);
 
-    return <div className="w-full flex resizable" ref={containerRef}>
-        <div ref={leftRef} className="resizable-left flex-grow">{left}</div>
-        {right && <div ref={rightRef} className="resizable-right">
+    return <div className="resizable flex w-full" ref={containerRef}>
+        <div ref={leftRef} className="resizable-left grow">{left}</div>
+        {right && <div ref={rightRef} className="resizable-right shrink-0">
             <div ref={handleRef} className="resizable-x-handle"/>
             {right}
         </div>}
-    </div>
-}
+    </div>;
+};

package/src/SidebarEditor.js

@@ -1,12 +1,14 @@
 import {
-    Fragment, useState, useEffect,
+    useState, useEffect,
 } from "react";
 import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
 import {ToolMargin} from "./Tools/Margin";
 import "../scss/sidebarEditor.scss";
 import {Spinner} from "@contentful/forma-36-react-components";
-
-const devMode = localStorage.getItem("dev-mode") === "true";
+import {ElementAutocomplete} from "./ElementAutocomplete";
+import {
+    CollapsableMenu, CollapsableMenuItem,
+} from "./CollapsableMenu/CollapsableMenu";
 
 const SidebarEditor = ({
     sdk,
@@ -16,9 +18,14 @@ const SidebarEditor = ({
     onChange,
     onDelete,
     onMove,
+    onDuplicate,
+    onInsert,
     editor,
     isLoading,
+    lastSelection,
 }) => {
+    const portal = sdk?.entry?.fields?.portal.getValue();
+
     const [versions, setVersions] = useState([]);
     const [lastChangedProperty, setLastChangedProperty] = useState(null);
     const [versionCount, setVersionCount] = useState(0);
@@ -164,8 +171,33 @@ const SidebarEditor = ({
         }
     };
 
+    const handleAutocompleteChange = (item) => {
+        if (!item) {
+            return onChange({}); // reset to empty
+        }
+
+        // reset to the first or second story
+        onChange({
+            ...storybookElement,
+            block: item.value,
+            attributes: {...(item?.stories?.[0]?.args || item?.stories?.[1]?.args || {})},
+        });
+    };
+
     useEffect(() => resetVersions, [storybookElement?.editorAttributes?.ref]);
 
+    const renderTitle = () => {
+        const story = storybookStories?.find(v => storybookElement.block?.toLowerCase() === v.id?.toLowerCase());
+
+        if (!story?.title) {
+            return null;
+        }
+
+        let storyTitleSplit = String(story.title || "").split("/");
+
+        return <h2 className="mb-2 text-lg font-bold">{storyTitleSplit[storyTitleSplit.length - 1]}</h2>;
+    };
+
     return (
         <div id="sidebar-editor-wrapper">
             <div id="sidebar-editor">
@@ -198,23 +230,35 @@ const SidebarEditor = ({
                                         ↓
                                                 </IconButton>
                                             </div>
-                                            <IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
+                                            <IconButton title="Löschen" className="mr-1" onClick={() => onDelete && onDelete(storybookElement)}>
                                 🗑
                                             </IconButton>
+                                            <CollapsableMenu button={<IconButton title="Funktionen">…</IconButton>}>
+                                                <CollapsableMenuItem onClick={onDuplicate}>Duplizieren</CollapsableMenuItem>
+                                                <CollapsableMenuItem onClick={() => onInsert("above")}>Davor hinzufügen</CollapsableMenuItem>
+                                                <CollapsableMenuItem onClick={() => onInsert("below")}>Danach hinzufügen</CollapsableMenuItem>
+                                            </CollapsableMenu>
                                         </div>
                                     )}
                                 </div>
-                                {!!onClose && <IconButton size="big" onClick={onClose} title="Schließen">⨯</IconButton>}
+                                {!!onClose && <IconButton onClick={onClose} title="Schließen">⨉</IconButton>}
                             </div>
                             <hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
                         </div>
                         <div className="grow overflow-y-auto pr-2 pt-2">
+                            {renderTitle()}
                             <div className="mb-2">
-                                <BlockSelect
-                                    stories={storybookStories}
-                                    active={storybookElement}
-                                    onChange={handleBlockSelectChange}
-                                    storyContext={sdk.parameters.instance.storyContext} />
+                                <ElementAutocomplete
+                                    isLoading={isLoading}
+                                    storybookStories={storybookStories}
+                                    editor={editor}
+                                    storyContext={sdk.parameters.instance.storyContext}
+                                    portal={portal}
+                                    lastSelection={lastSelection}
+                                    onChange={handleAutocompleteChange}
+                                    placeholder="Element wählen"
+                                    width="full"
+                                />
                             </div>
                             {storybookElement?.block && (
                                 <div>
@@ -285,6 +329,7 @@ export const IconButton = ({
     disabled,
     size = "medium",
     className,
+    onClick = () => {},
     ...props
 }) => {
     let classNames = "icon-button cursor-pointer select-none !p-1";
@@ -310,7 +355,7 @@ export const IconButton = ({
     }
 
     return (
-        <div className={classNames} {...props}>
+        <div className={classNames} onClick={onClick} {...props}>
             {children}
         </div>
     );
@@ -367,108 +412,6 @@ const VariantSelect = ({
     );
 };
 
-const BlockSelect = ({
-    stories,
-    active,
-    onChange,
-    className,
-    storyContext,
-}) => {
-    if (!onChange) {
-        return null;
-    }
-
-    const onSelectChange = (story) => {
-        if (!story) {
-            return onChange({}); // reset to empty
-        }
-
-        // reset to the first or second story
-        onChange({
-            ...active,
-            block: story.id,
-            attributes: {...(story?.stories?.[0]?.args || story?.stories?.[1]?.args || {})},
-        });
-    };
-
-    function groupArrayToObject(array) {
-        const result = {};
-
-        array.forEach(item => {
-            if (!item?.id) {
-                return;
-            }
-
-            let splitStoryContext = String(storyContext || "").split(",");
-            let isItemInContext = splitStoryContext.find(context => {
-                return Array.isArray(item.storyContext) ? item.storyContext.includes(context) : context === item.storyContext;
-            });
-
-            if (!devMode && !isItemInContext) {
-                return;
-            }
-
-            const parts = item.title.split('/');
-            let currentLevel = result;
-
-            parts.forEach((part, index) => {
-                if (!currentLevel[part]) {
-                    currentLevel[part] = {level: index};
-                }
-                currentLevel = currentLevel[part];
-            });
-
-            currentLevel.title = item.title;
-            currentLevel.shortTitle = parts[parts.length - 1];
-            currentLevel.id = item.id;
-        });
-
-        return result;
-    }
-
-    let storyGroups = groupArrayToObject(stories);
-
-    const renderOptions = (obj) => Object.keys(obj).map((key, index) => {
-        const option = obj[key];
-
-        if (!option) {
-            return null;
-        }
-
-        if (option.title && option.id) {
-            return (
-                <option key={option.id} value={option.id.toLowerCase()}>
-                    {option.shortTitle}
-                </option>
-            );
-        } else if (typeof option === "object") {
-            return (
-                <Fragment key={`${key}-${index}`}>
-                    <option
-                        disabled
-                        style={{
-                            color: "rgba(0, 0, 0, 0.3)",
-                            fontWeight: option.level === 0 ? "bold" : "normal",
-                        }}>{key}</option>
-                    {renderOptions(option)}
-                </Fragment>
-            );
-        }
-    });
-
-    return (
-        <div className={className}>
-            <label className="block">Element</label>
-            <select
-                onChange={e => onSelectChange(stories.find(s => s.id?.toLowerCase() === e.target.value))}
-                value={active?.block?.toLowerCase()}
-                className="font-bold"
-            >
-                <option>Element wählen</option>
-                {renderOptions(storyGroups)}
-            </select>
-        </div>
-    );
-};
+export default SidebarEditor;
 
-export default SidebarEditor;
+// :)