@vonaffenfels/slate-editor 1.1.0 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.0",
+    "version": "1.1.5",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -25,6 +25,7 @@
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/preset-env": "^7.13.15",
         "@babel/preset-react": "^7.13.13",
+        "@contentful/f36-components": "^4.53.0",
         "@contentful/forma-36-react-components": "^3.100.7",
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
@@ -71,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "d768183ee1ab268e8c52315f91176ff8d610b81b",
+    "gitHead": "5f3a6d1e5724c6de129b8c1620973194d183ecbc",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -56,6 +56,10 @@
     padding: 45px 0 0 0;
     position: relative;
 
+    .editor-empty-element {
+      display: block!important;
+    }
+
     p[data-slate-node="element"] {
       position: relative;
       //outline: #CECECE dashed;
@@ -427,11 +431,22 @@
 }
 
 .resizable {
+
+  &.enabled {
+    .resizable-left {
+      max-width: calc(100vw - 300px);
+    }
+  }
+
   .resizable-left {
+    scrollbar-width: none;
+    max-width: 100vw;
     position: relative;
   }
 
   .resizable-right {
+    scrollbar-width: none;
+    max-width: calc(100vw - 300px);
     position: relative;
   }
 

package/scss/storybook.scss

@@ -1,4 +1,5 @@
 .storybook-element-wrapper {
+  max-width: 100vw;
   width: 100%;
   margin-left: auto;
   margin-right: auto;

package/src/BlockEditor.js

@@ -341,10 +341,7 @@ export default function BlockEditor({
         Transforms.insertNodes(editor, [
             {
                 children: [{text: ''}],
-                block: "Blocks/Empty",
-                attributes: {blockWidth: "site"},
-                isEmpty: true,
-                type: "storybook",
+                type: "paragraph",
             },
         ], {at});
     };

package/src/ElementAutocomplete.js

@@ -1,8 +1,7 @@
-import {Autocomplete} from "@contentful/forma-36-react-components";
+import {Autocomplete} from "@contentful/f36-components";
 import {
     useEffect, useState,
 } from "react";
-import {Transforms} from "slate";
 
 const devMode = localStorage.getItem("dev-mode") === "true";
 
@@ -21,6 +20,8 @@ export const ElementAutocomplete = ({
         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("/") : null;
 
         if (story.type === "storybook") {
             if (!story.id) {
@@ -38,10 +39,10 @@ export const ElementAutocomplete = ({
             }
         }
 
-
         return {
             value: story.id?.toLowerCase(),
-            label: story.label || storyTitleSplit[storyTitleSplit.length - 1],
+            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,
         };
@@ -77,24 +78,52 @@ export const ElementAutocomplete = ({
         }
     }, []);
 
+
+    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={filteredItems}
-            onQueryChange={handleQueryChange}
+            items={groupedItemsArr}
+            isGrouped={true}
+            onInputValueChange={handleQueryChange}
             isLoading={isLoading}
             placeholder={'Element hinzufügen'}
-            emptyListMessage={'Keine Komponenten gefunden'}
-            noMatchesMessage={'Keine Ergebnisse gefunden'}
+            emptyListMessage={'Keine Elemente gefunden'}
+            noMatchesMessage={'Keine Elemente gefunden'}
             dropdownProps={{isFullWidth: true}}
             maxHeight={300}
-            onChange={handleOnChange}
+            onSelectItem={handleOnChange}
             width="medium"
+            itemToString={(item) => ""}
+            renderItem={(item) => `${item.label}`}
             {...props}
-        >
-            {(options) =>
-                options.map((option) => <span key={option.value}>{option.label}</span>)
-            }
-        </Autocomplete>
+        />
     );
 };
 

package/src/SidebarEditor/Resizable.js

@@ -1,6 +1,7 @@
 import {
     useEffect, useRef,
 } from "react";
+import classNames from "classnames";
 
 export const Resizable = ({
     left,
@@ -73,7 +74,9 @@ export const Resizable = ({
         }
     }, [right, left]);
 
-    return <div className="resizable flex w-full" ref={containerRef}>
+    return <div
+        className={classNames("resizable flex w-full", {"enabled": !!right})}
+        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"/>

package/src/SidebarEditor.js

@@ -5,7 +5,6 @@ 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";
 import {
     CollapsableMenu, CollapsableMenuItem,
 } from "./CollapsableMenu/CollapsableMenu";
@@ -198,7 +197,7 @@ const SidebarEditor = ({
 
         let storyTitleSplit = String(story.title || "").split("/");
 
-        return <h2 className="mb-2 text-lg font-bold">{storyTitleSplit[storyTitleSplit.length - 1]}</h2>;
+        return <h2 className="mb-2 text-lg font-bold text-black">{storyTitleSplit[storyTitleSplit.length - 1]}</h2>;
     };
 
     const renderFields = () => {
@@ -291,7 +290,7 @@ const SidebarEditor = ({
             <div id="sidebar-editor">
                 {isLoading ? (
                     <div className="flex h-full flex-col items-center justify-center">
-                        <Spinner />
+                        <Spinner/>
                         <span className="mt-2">Elemente werden geladen</span>
                     </div>
                 ) : (
@@ -304,32 +303,62 @@ const SidebarEditor = ({
                                             <div className="mr-1 flex items-center">
                                                 <ToolMargin
                                                     margin={storybookElement.attributes.margin}
-                                                    onChange={value => handleFieldValueChange("margin", value)} />
+                                                    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>
+                                                <IconButton
+                                                    title="Rückgängig"
+                                                    onClick={undo}
+                                                    disabled={currentVersion <= 1}>↺</IconButton>
+                                                <IconButton
+                                                    title="Wiederherstellen"
+                                                    onClick={redo}
+                                                    disabled={currentVersion >= versionCount || versionCount === 0}>↻</IconButton>
                                             </div>
                                             <div className="icon-button-group mr-1">
-                                                <IconButton title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")} disabled={storybookElement.path[0] === 0}>
-                                        ↑
+                                                <IconButton
+                                                    title="Nach oben verschieben"
+                                                    onClick={() => onMove && onMove(storybookElement, "up")}
+                                                    disabled={storybookElement.path[0] === 0}>
+                                                    ↑
                                                 </IconButton>
-                                                <IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")} disabled={storybookElement.path[0] === editor.children.length - 1}>
-                                        ↓
+                                                <IconButton
+                                                    title="Nach unten verschieben"
+                                                    onClick={() => onMove && onMove(storybookElement, "down")}
+                                                    disabled={storybookElement.path[0] === editor.children.length - 1}>
+                                                    ↓
                                                 </IconButton>
                                             </div>
-                                            <IconButton title="Löschen" className="mr-1" 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>
+                                                <CollapsableMenuItem
+                                                    onClick={onDuplicate}>Duplizieren</CollapsableMenuItem>
+                                                <CollapsableMenuItem onClick={() => onInsert("above")}>Davor
+                                                    hinzufügen</CollapsableMenuItem>
+                                                <CollapsableMenuItem onClick={() => onInsert("below")}>Danach
+                                                    hinzufügen</CollapsableMenuItem>
                                                 <div className="px-4 pb-2 pt-1">
                                                     <b className="mb-1 block text-sm">Sichtbar auf:</b>
-                                                    <Switch value={!storybookElement.attributes.hideOnDesktop} label="Desktop" className="mb-2" onClick={() => handleFieldValueChange("hideOnDesktop", !storybookElement.attributes.hideOnDesktop)} />
-                                                    <Switch value={!storybookElement.attributes.hideOnTablet} label="Tablet" className="mb-2" onClick={() => handleFieldValueChange("hideOnTablet", !storybookElement.attributes.hideOnTablet)} />
-                                                    <Switch value={!storybookElement.attributes.hideOnSmartphone} label="Smartphone" className="mb-2" onClick={() => handleFieldValueChange("hideOnSmartphone", !storybookElement.attributes.hideOnSmartphone)} />
+                                                    <Switch
+                                                        value={!storybookElement.attributes.hideOnDesktop}
+                                                        label="Desktop"
+                                                        className="mb-2"
+                                                        onClick={() => handleFieldValueChange("hideOnDesktop", !storybookElement.attributes.hideOnDesktop)}/>
+                                                    <Switch
+                                                        value={!storybookElement.attributes.hideOnTablet}
+                                                        label="Tablet"
+                                                        className="mb-2"
+                                                        onClick={() => handleFieldValueChange("hideOnTablet", !storybookElement.attributes.hideOnTablet)}/>
+                                                    <Switch
+                                                        value={!storybookElement.attributes.hideOnSmartphone}
+                                                        label="Smartphone"
+                                                        className="mb-2"
+                                                        onClick={() => handleFieldValueChange("hideOnSmartphone", !storybookElement.attributes.hideOnSmartphone)}/>
                                                 </div>
                                             </CollapsableMenu>
                                         </div>
@@ -339,29 +368,25 @@ const SidebarEditor = ({
                             </div>
                             <hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
                         </div>
-                        <div className="grow overflow-y-auto pr-2 pt-2">
-                            {renderTitle()}
-                            <div className="mb-2">
-                                <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 className="flex grow flex-col gap-2 overflow-y-auto pr-2 pt-2" >
+                            <div>
+                                {renderTitle()}
                             </div>
                             {storybookElement?.block && (
-                                <div>
-                                    <div className="mb-2 grid grid-flow-col grid-cols-2 gap-2">
-                                        <VariantSelect className="w-full" story={story} onChange={handleVariantSelectChange} />
-                                        <BlockWidthSelect className="w-full" value={storybookElement.attributes.blockWidth} onChange={e => handleFieldValueChange("blockWidth", e.target.value)} />
+                                <>
+                                    <div className="mb-2 flex flex-col gap-2">
+                                        <VariantSelect
+                                            sdk={sdk}
+                                            className="w-full"
+                                            story={story}
+                                            onChange={handleVariantSelectChange}/>
+                                        <BlockWidthSelect
+                                            className="w-full"
+                                            value={storybookElement.attributes.blockWidth}
+                                            onChange={e => handleFieldValueChange("blockWidth", e.target.value)}/>
                                     </div>
                                     <hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
-                                </div>
+                                </>
                             )}
                             {renderFields()}
                         </div>
@@ -377,7 +402,8 @@ export const IconButton = ({
     disabled,
     size = "medium",
     className,
-    onClick = () => {},
+    onClick = () => {
+    },
     ...props
 }) => {
     let classNames = "icon-button cursor-pointer select-none !p-1";
@@ -416,7 +442,6 @@ const BlockWidthSelect = ({
 }) => {
     return (
         <div>
-            <label className="block">Breite</label>
             <select
                 value={value || ""}
                 onChange={onChange}
@@ -435,24 +460,35 @@ const VariantSelect = ({
     story,
     onChange,
     className,
+    sdk,
 }) => {
     const stories = story?.stories?.filter(s => s.title !== story.title) || [];
 
-    if (!onChange) {
+    if (!onChange || stories?.length < 2) {
         return null;
     }
 
     return (
         <div className={className}>
-            <label className="block">Preset</label>
             <select
-                disabled={stories.length <= 1}
-                onChange={e => onChange && onChange({
-                    block: story.id,
-                    attributes: {...stories.find(s => s.title === e.target.value)?.args || {}},
-                    type: "storybook",
-                })}>
-                <option>Preset wählen</option>
+                onChange={e => {
+                    sdk.dialogs
+                        .openConfirm({
+                            title: 'Einstellungen überschreiben',
+                            message: 'Alle Einstellungen werden überschrieben?',
+                            intent: 'negative',
+                            confirmLabel: 'Überschreiben',
+                            cancelLabel: 'Abbrechen',
+                        })
+                        .then((result) => {
+                            onChange({
+                                block: story.id,
+                                attributes: {...stories.find(s => s.title === e.target.value)?.args || {}},
+                                type: "storybook",
+                            });
+                        });
+                }}>
+                <option>Einstellungen überschreiben</option>
                 {stories.map(s => (
                     <option key={`variant-option-${s.title}`} value={s.title}>{s.title}</option>
                 ))}

package/src/Toolbar/Toolbar.js

@@ -100,7 +100,10 @@ export const Toolbar = ({
             children: [{text: ''}],
             type: item.type,
             block: item.value,
-            attributes: item.attributes,
+            attributes: {
+                ...(item.attributes || {}),
+                blockWidth: "site",
+            },
         };
 
         Transforms.insertNodes(editor, [element], {at: [lastSelection?.anchor?.path?.[0]]});