@vonaffenfels/slate-editor 1.0.59 → 1.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.59",
+    "version": "1.0.62",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "45e9d0390c7c19fbfa54c8bf9c3cef5a076e4198",
+    "gitHead": "6ad3de5f5d37e2ca7447e7591f8f9e4d32089f30",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -259,8 +259,8 @@
 
   .layout-slot-option-padding {
     position: relative;
-    width: 1.5em;
-    height: 1.5em;
+    width: 26px;
+    height: 26px;
     display: inline-block;
 
     .layout-slot-option-padding-item {
@@ -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/src/BlockEditor.js

@@ -77,6 +77,7 @@ export default function BlockEditor({
 
     const [loadedStorybookStories, setLoadedStorybookStories] = useState([]);
     const [isLoadingStories, setIsLoadingStories] = useState(false);
+    const [lastSelection, setLastSelection] = useState(null);
 
     const loadStories = async () => {
         setIsLoadingStories(true);
@@ -92,6 +93,32 @@ export default function BlockEditor({
         loadStories();
     }, []);
 
+    const handleKeyDown = (e) => {
+        let keyCode = e.keyCode || e.which;
+
+        switch (keyCode) {
+            case 46: // delete
+            case 8: // backspace
+                handleSidebarDeleteClick();
+                break;
+            case 27: // escape
+                handleSidebarClose();
+                break;
+            default:
+                return;
+        }
+    };
+
+    useEffect(() => {
+        if (selectedStorybookElement) {
+            window.addEventListener("keydown", handleKeyDown);
+        } else {
+            window.removeEventListener("keydown", handleKeyDown);
+        }
+
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [selectedStorybookElement]);
+
     const resetEditor = () => {
         if (confirm("This action will delete all data in the editor, are you sure?")) {
             onChange(emptyValue);
@@ -99,6 +126,10 @@ export default function BlockEditor({
     };
 
     const onSlateChange = (newValue) => {
+        if (editor.selection) {
+            setLastSelection(editor.selection);
+        }
+
         if (newValue.length > 0) {
             onChange(newValue);
         } else {
@@ -199,7 +230,7 @@ export default function BlockEditor({
         setSelectedStorybookElement(mergedValue);
     };
 
-    const handleSidebarDeleteClick = (element) => {
+    const handleSidebarDeleteClick = () => {
         contentfulSdk.dialogs
             .openConfirm({
                 title: 'Element löschen',
@@ -266,6 +297,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);
     };
@@ -286,7 +361,8 @@ export default function BlockEditor({
                                 storybookStories={loadedStorybookStories}
                                 isLoadingStories={isLoadingStories}
                                 editor={editor}
-                                sdk={contentfulSdk}/>
+                                sdk={contentfulSdk}
+                                lastSelection={lastSelection}/>
                         </div>
                         <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
                             {isLoading && (
@@ -331,7 +407,10 @@ export default function BlockEditor({
                     onClose={handleSidebarClose}
                     onDelete={handleSidebarDeleteClick}
                     onMove={handleSidebarMoveClick}
-                    editor={editor}/>
+                    onDuplicate={handleSidebarDuplicateClick}
+                    onInsert={handleSidebarInsertClick}
+                    editor={editor}
+                    lastSelection={lastSelection} />
                 }
             />
         </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/SidebarEditorField.js

@@ -55,7 +55,7 @@ export const SidebarEditorField = ({
             ));
         } else {
             return Object.keys(field.control.options).map(key => (
-                <option key={`select-option-${key}`} value={field.control.options[key]}>{field.control.options[key]}</option>
+                <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
             ));
         }
     };

package/src/SidebarEditor.js

@@ -5,6 +5,7 @@ import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
 import {ToolMargin} from "./Tools/Margin";
 import "../scss/sidebarEditor.scss";
 import {Spinner} from "@contentful/forma-36-react-components";
+import {ElementAutocomplete} from "./ElementAutocomplete";
 
 const devMode = localStorage.getItem("dev-mode") === "true";
 
@@ -16,9 +17,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 +170,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">
@@ -181,6 +212,11 @@ const SidebarEditor = ({
                                 <div className="grow">
                                     {storybookElement?.block && (
                                         <div className="flex items-center">
+                                            <div className="mr-1 flex items-center">
+                                                <ToolMargin
+                                                    margin={storybookElement.attributes.margin}
+                                                    onChange={value => handleFieldValueChange("margin", value)} />
+                                            </div>
                                             <div className="icon-button-group mr-1">
                                                 <IconButton title="Rückgängig" onClick={undo} disabled={currentVersion <= 1}>↺</IconButton>
                                                 <IconButton title="Wiederherstellen" onClick={redo} disabled={currentVersion >= versionCount || versionCount === 0}>↻</IconButton>
@@ -196,25 +232,34 @@ const SidebarEditor = ({
                                             <IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
                                 🗑
                                             </IconButton>
-                                            <div className="ml-1 flex items-center">
-                                                <ToolMargin
-                                                    margin={storybookElement.attributes.margin}
-                                                    onChange={value => handleFieldValueChange("margin", value)} />
-                                            </div>
                                         </div>
                                     )}
                                 </div>
-                                {!!onClose && <IconButton 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">
+                                <button className="button button--tertiary" onClick={onDuplicate}>Duplizieren</button>
+                            </div>
+                            <div className="mb-2 flex">
+                                <button className="button button--tertiary mr-1" onClick={() => onInsert("above")}>Davor hinzufügen</button>
+                                <button className="button button--tertiary ml-1" onClick={() => onInsert("below")}>Danach hinzufügen</button>
+                            </div>
                             <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>
@@ -299,11 +344,14 @@ export const IconButton = ({
 
     switch (size) {
         case "small":
-            classNames += " !text-xs min-w-[28px]";
+            classNames += " !text-xs min-w-[28px] max-h-[28px]";
+            break;
+        case "big":
+            classNames += " !text-xl min-w-[32px] max-h-[28px] !leading-[18px]";
             break;
         case "medium":
         default:
-            classNames += " !text-sm min-w-[32px]";
+            classNames += " !text-sm min-w-[32px] max-h-[28px]";
     }
 
     return (
@@ -364,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;
+// :)