@vonaffenfels/slate-editor 1.0.12 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.12",
+    "version": "1.0.18",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "19e0f8e8f553733b6b461f9c4b9d771c67bf0611",
+    "gitHead": "520a4758b336e266e7ae0e3617b17a7cd8ed2a0e",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -47,16 +47,10 @@
     height: 100%;
     z-index: 100;
     overflow-y: auto;
-    padding: 40px 0 0 0;
+    padding: 45px 0 0 0;
     position: relative;
 
-    span[data-slate-node="text"] {
-      /* eslint-disable-next-line */
-      font-family: "Font TWO BR", sans-serif;
-    }
-
     p[data-slate-node="element"] {
-      padding-bottom: 20px;
       position: relative;
       //outline: #CECECE dashed;
 
@@ -74,9 +68,6 @@
 
     h1[data-slate-node="element"] {
       position: relative;
-      font-size: 26px;
-      font-weight: bold;
-      padding-bottom: 20px;
 
       &:after {
         content: "h1";
@@ -92,9 +83,6 @@
 
     h2[data-slate-node="element"] {
       position: relative;
-      font-size: 24px;
-      padding-bottom: 20px;
-      font-weight: bold;
 
       &:after {
         content: "h2";
@@ -110,9 +98,6 @@
 
     h3[data-slate-node="element"] {
       position: relative;
-      font-size: 20px;
-      padding-bottom: 20px;
-      font-weight: bold;
 
       &:after {
         content: "h3";
@@ -128,9 +113,6 @@
 
     h4[data-slate-node="element"] {
       position: relative;
-      font-size: 16px;
-      padding-bottom: 20px;
-      font-weight: bold;
 
       &:after {
         content: "h4";
@@ -146,9 +128,6 @@
 
     h5[data-slate-node="element"] {
       position: relative;
-      font-size: 14px;
-      padding-bottom: 20px;
-      font-weight: bold;
 
       &:after {
         content: "h5";
@@ -164,9 +143,6 @@
 
     h6[data-slate-node="element"] {
       position: relative;
-      font-size: 12px;
-      padding-bottom: 20px;
-      font-weight: bold;
 
       &:after {
         content: "h6";
@@ -180,36 +156,14 @@
       }
     }
 
-    ul[data-slate-node="element"] {
-      list-style: circle;
-      padding-bottom: 20px;
-    }
-
-    ol[data-slate-node="element"] {
-      list-style: decimal;
-      padding-bottom: 20px;
-    }
-
     .arrow-list {
       list-style-type: "🠆" !important;
     }
-    
+
     .arrow-list li::before {
         content: none !important;
     }
 
-    a[data-slate-node="element"] {
-      color: rgb(var(--color-secondary));
-      text-decoration: underline;
-    }
-
-    blockquote[data-slate-node="element"] {
-      display: block;
-      border-left: 5px solid #CECECE;
-      padding: 1em;
-      margin-bottom: 20px;
-    }
-
     div[data-slate-editor="true"] {
       height: 100%;
     }
@@ -454,4 +408,26 @@ button:hover {
 
 button:active {
   background-color: #0262C9 !important;
+}
+
+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 {
+  background-color: #036fe3 !important;
+  color: #FFFFFF !important;
+}
+
+button.button--secondary:active {
+  background-color: #0262C9 !important;
+  color: #FFFFFF !important;
 }

package/scss/sidebarEditor.scss

@@ -12,7 +12,7 @@
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
     }
     
-    p, label {
+    p, label, b {
         color: rgb(90, 101, 124);
     }
     
@@ -51,6 +51,10 @@
     input[type="checkbox"] {
         margin-right: 4px;
     }
+
+    option[disabled] {
+        color: rgba(0, 0, 0, 0.3)
+    }
     
     /* button[data-test-id="cf-ui-button"] span {
         color: #036fe3 !important;

package/src/Nodes/Element.js

@@ -18,8 +18,6 @@ export const Element = ({
 }) => {
     const {isInSlot} = useContext(LayoutSlotContext);
 
-    console.log({props});
-
     const getPropsForType = (type) => {
         if (!props.elementPropsMap) {
             return {};

package/src/SidebarEditor/AssetList.js

@@ -4,11 +4,13 @@ import {
 import {IconButton} from "../SidebarEditor";
 import {swapArrayElements} from "../helper/array";
 
+// Hallo :)
 export const AssetList = ({
     assets,
     onChange,
     sdk,
     cloudinary = false,
+    onAddClick,
 }) => {
     const renderAssets = assets.filter(Boolean).map((asset, index) => (
         <>
@@ -22,7 +24,8 @@ export const AssetList = ({
                 onMoveClick={(direction) => handleMoveClick(direction, index)}
                 onDeleteClick={() => handleDeleteClick(index)}
             />
-            {index !== assets.length - 1 && <hr className="my-2" style={{borderColor: "#cfd9e0"}}/>}
+            <hr className="my-2" style={{borderColor: "#cfd9e0"}}/>
+            {onAddClick && index === assets.length - 1 && <button onClick={onAddClick} className="button--secondary">Hinzufügen</button>}
         </>
     ));
 
@@ -108,7 +111,7 @@ export const Asset = ({
         <div className="flex flex-col">
             <div className="flex">
                 <div className="grow">
-                    <b className="mt-[3px] block break-words">{title}</b>
+                    <b className="mt-[3px] block" style={{wordBreak: "break-word"}}>{title}</b>
                 </div>
                 <div className="ml-2 shrink-0">
                     {!!onMoveClick && (
@@ -118,7 +121,7 @@ export const Asset = ({
                         </div>
                     )}
                     <a className="mr-1" target="_blank" href={href} rel="noreferrer">
-                        <IconButton size="small">View</IconButton>
+                        <IconButton size="small">Asset</IconButton>
                     </a>
                     <IconButton size="small" onClick={onDeleteClick}>⨯</IconButton>
                 </div>

package/src/SidebarEditor/SidebarEditorField.js

@@ -196,7 +196,15 @@ export const SidebarEditorField = ({
                             <details className="mb-2">
                                 <summary>{value.length || 0} {value.length === 1 ? "Element" : "Elemente"}</summary>
                                 <div className="mt-4">
-                                    <AssetList assets={value} sdk={sdk} onChange={v => onChange(fieldKey, v)} />
+                                    <AssetList
+                                        assets={value}
+                                        sdk={sdk}
+                                        onChange={v => onChange(fieldKey, v)}
+                                        onAddClick={() => {
+                                            sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
+                                                onChange(fieldKey, [...value, ...contents]);
+                                            });
+                                        }} />
                                 </div>
                             </details>
                         )}
@@ -235,7 +243,25 @@ export const SidebarEditorField = ({
                             <details className="mb-2">
                                 <summary>{value.length || 0} {value.length === 1 ? "Element" : "Elemente"}</summary>
                                 <div className="mt-4">
-                                    <AssetList cloudinary assets={value} sdk={sdk} onChange={v => onChange(fieldKey, v)} />
+                                    <AssetList
+                                        cloudinary
+                                        assets={value}
+                                        sdk={sdk}
+                                        onChange={v => onChange(fieldKey, v)}
+                                        onAddClick={() => {
+                                            sdk.dialogs.openCurrentApp({
+                                                width: "fullWidth",
+                                                title: "Select Images",
+                                                shouldCloseOnOverlayClick: true,
+                                                shouldCloseOnEscapePress: true,
+                                                parameters: {
+                                                    type: "cloudinary",
+                                                    multiple: true,
+                                                },
+                                            }).then((data) => {
+                                                onChange(fieldKey, [...value, ...(data?.assets || [])]);
+                                            });
+                                        }} />
                                 </div>
                             </details>
                         )}

package/src/SidebarEditor.js

@@ -161,8 +161,6 @@ const SidebarEditor = ({
 
     useEffect(() => resetVersions, [storybookElement?.editorAttributes?.ref]);
 
-    console.log({storybookElement});
-
     return (
         <div id="sidebar-editor">
             <div>
@@ -231,7 +229,7 @@ const SidebarEditor = ({
                         })}
                         {Object.keys(fields.tables).map(tableKey => {
                             return (
-                                <details key={`accordion-item-${tableKey}`}>
+                                <details key={`accordion-item-${tableKey}`} className="mb-2">
                                     <summary>{tableKey}</summary>
                                     <div className="mt-4">
                                         {Object.keys(fields.tables[tableKey]).map(key => {
@@ -244,7 +242,11 @@ const SidebarEditor = ({
                                                 fieldKey={key}
                                                 story={storybookElement}
                                                 field={field}
-                                                onChange={value => handleFieldValueChange(key, value)}
+                                                onChange={(
+                                                    key, value, mvpField, mvpIndex,
+                                                ) => handleFieldValueChange(
+                                                    key, value, mvpField, mvpIndex,
+                                                )}
                                             />;
                                         })}
                                     </div>
@@ -365,6 +367,53 @@ const BlockSelect = ({
         });
     };
 
+    function groupArrayToObject(array) {
+        const result = {};
+
+        array.forEach(item => {
+            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 => {
+        const option = obj[key];
+        if (option.title && option.id) {
+            return (
+                <option key={option.id} value={option.id}>
+                    {option.shortTitle}
+                </option>
+            );
+        } else if (typeof option === "object") {
+            return (
+                <>
+                    <option
+                        disabled
+                        style={{
+                            color: "rgba(0, 0, 0, 0.3)",
+                            fontWeight: option.level === 0 ? "bold" : "normal",
+                        }}>{key}</option>
+                    {renderOptions(option)}
+                </>
+            );
+        }
+    });
+
     return (
         <div className={className}>
             <label className="block">Element</label>
@@ -373,15 +422,7 @@ const BlockSelect = ({
                 className="font-bold"
             >
                 <option>Element wählen</option>
-                {stories.map(s => (
-                    <option
-                        key={`variant-option-${s.id}`}
-                        selected={active?.block === s.id}
-                        value={s.id}
-                    >
-                        {s.title}
-                    </option>
-                ))}
+                {renderOptions(storyGroups)}
             </select>
         </div>
     );

package/src/dev/testComponents/TestStory.stories.js

@@ -1,7 +1,7 @@
 import TestStory from "./TestStory";
 
 export default {
-    title: "Test Story",
+    title: "Elemente/Test/Test Story",
     id: "TestStory",
     component: TestStory,
     storyContext: ["layout"],
@@ -171,6 +171,21 @@ export default {
             control: {type: "text"},
             table: {category: "Kategorie"},
         },
+        testText4: {
+            name: "Text 4",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
+        testText5: {
+            name: "Text 5",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
+        testText6: {
+            name: "Text 6",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
     },
 };
 

package/src/dev/testComponents/TestStory2.js

@@ -0,0 +1,75 @@
+export default function TestStory2({
+    title,
+    mvp,
+    ...props
+}) {
+    return <div className="bg-green flex flex-col space-y-8 p-4 text-black">
+        <h1>{title}</h1>
+        <div className="grid grid-cols-4">
+            <div className="border border-black p-4" data-teasermanager-slot="test-1">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-2">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-3">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-4">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-5">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-6">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-7">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-8">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-9">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-10">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-11">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-12">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-13">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-14">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-15">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-16">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+        </div>
+        <h2>Props</h2>
+        {!!mvp && mvp.length > 0 && (
+            <ul>
+                {mvp.map(m => (
+                    <li key={m.feld1}>
+                        <b>{m.feld1}</b>:
+                        <span>{m.feld2}</span>
+                    </li>
+                ))}
+            </ul>
+        )}
+        <div>{JSON.stringify({
+            ...props,
+            mvp,
+            title,
+        })}</div>
+    </div>;
+}

package/src/dev/testComponents/TestStory2.stories.js

@@ -0,0 +1,197 @@
+import TestStory2 from "./TestStory2";
+
+export default {
+    title: "Elemente/Test/Test Story 2",
+    id: "TestStory2",
+    component: TestStory2,
+    storyContext: ["layout"],
+    argTypes: {
+        title: {
+            name: "Titel",
+            control: {type: "text"},
+        },
+        text: {
+            name: "Text",
+            control: {type: "text"},
+        },
+        boolean: {
+            name: "Boolean",
+            control: {type: "boolean"},
+        },
+        number: {
+            name: "Number",
+            control: {
+                type: "number",
+                min:1,
+                max:30,
+                step: 2,
+            },
+        },
+        range: {
+            name: "Range",
+            control: {
+                type: "range",
+                min:1,
+                max:30,
+                step: 1,
+            },
+        },
+        object: {
+            name: "Object",
+            control: {type: "object"},
+        },
+        radio: {
+            name: "Radio",
+            control: {
+                type: "radio",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        inlineRadio: {
+            name: "Inline Radio",
+            control: {
+                type: "inline-radio",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        check: {
+            name: "Check",
+            control: {
+                type: "check",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        inlineCheck: {
+            name: "Inline Check",
+            control: {
+                type: "inline-check",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        select: {
+            name: "Select",
+            control: {
+                type: "select",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        mutliSelect: {
+            name: "Multi Select",
+            control: {
+                type: "multi-select",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        color: {
+            name: "Color",
+            control: {type: "color"},
+        },
+        date: {
+            name: "Date",
+            control: {type: "date"},
+        },
+        contentfulAsset: {
+            name: "Contentful Asset",
+            control: {
+                type: 'contentful-content',
+                contentTypes: ["asset"],
+            },
+        },
+        contentfulAssets: {
+            name: "Contentful Assets",
+            control: {
+                type: 'contentful-contents',
+                contentTypes: ["asset"],
+            },
+        },
+        cloudinaryImage: {
+            name: "Cloudinary Image",
+            control: {type: 'cloudinary-image'},
+        },
+        cloudinaryImages: {
+            name: "Cloudinary Images",
+            control: {type: 'cloudinary-images'},
+        },
+        mvp: {
+            name: "MVP",
+            control: {
+                type: "mvp",
+                fields: {
+                    feld1: {
+                        name: "Feld 1",
+                        control: {type: "text"},
+                    },
+                    feld2: {
+                        name: "Feld 2",
+                        control: {type: "text"},
+                    },
+                    feld3: {
+                        name: "Feld 3",
+                        control: {
+                            type: "select",
+                            options: {
+                                "Option 1": "option1",
+                                "Option 2": "option2",
+                            },
+                        },
+                    },
+                },
+            },
+        },
+        testText1: {
+            name: "Text 1",
+            control: {type: "text"},
+            table: {category: "Kategorie"},
+        },
+        testText2: {
+            name: "Text 2",
+            control: {type: "text"},
+            table: {category: "Kategorie"},
+        },
+        testText3: {
+            name: "Text 3",
+            control: {type: "text"},
+            table: {category: "Kategorie"},
+        },
+        testText4: {
+            name: "Text 4",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
+        testText5: {
+            name: "Text 5",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
+        testText6: {
+            name: "Text 6",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
+    },
+};
+
+export const TestStoryVariant1 = (args) => <TestStory2 {...args} />;
+export const TestStoryVariant2 = (args) => <TestStory2 {...args} />;
+
+TestStoryVariant1.args = {text: "Test 1"};
+
+TestStoryVariant2.args = {text: "Test 2"};