@vonaffenfels/slate-editor 1.0.18 → 1.0.20

package/package.json

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

package/src/SidebarEditor/SidebarEditorField.js

@@ -62,6 +62,17 @@ export const SidebarEditorField = ({
                         ))}
                     </select>
                 );
+            case "data-stream":
+                return (
+                    <select
+                        value={value || ""}
+                        onChange={e => onChange(fieldKey, e.target.value)}>
+                        <option value="">Auswählen</option>
+                        {field.control.streams.map(stream => (
+                            <option key={`select-option-${stream.value}`} value={stream.value}>{stream.label}</option>
+                        ))}
+                    </select>
+                );
             case "number":
                 return (
                     <input

package/src/SidebarEditor.js

@@ -1,5 +1,5 @@
 import {
-    useState, useEffect,
+    Fragment, useState, useEffect,
 } from "react";
 import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
 import {ToolMargin} from "./Tools/Margin";
@@ -371,6 +371,10 @@ const BlockSelect = ({
         const result = {};
 
         array.forEach(item => {
+            if (!item.id) {
+                return;
+            }
+
             const parts = item.title.split('/');
             let currentLevel = result;
 
@@ -391,8 +395,13 @@ const BlockSelect = ({
 
     let storyGroups = groupArrayToObject(stories);
 
-    const renderOptions = (obj) => Object.keys(obj).map(key => {
+    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}>
@@ -401,7 +410,7 @@ const BlockSelect = ({
             );
         } else if (typeof option === "object") {
             return (
-                <>
+                <Fragment key={`${key}-${index}`}>
                     <option
                         disabled
                         style={{
@@ -409,7 +418,7 @@ const BlockSelect = ({
                             fontWeight: option.level === 0 ? "bold" : "normal",
                         }}>{key}</option>
                     {renderOptions(option)}
-                </>
+                </Fragment>
             );
         }
     });

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

@@ -14,6 +14,18 @@ export default {
             name: "Text",
             control: {type: "text"},
         },
+        stream: {
+            name: "Logik",
+            control: {
+                type: 'data-stream',
+                streams: [
+                    {
+                        value: "contentById",
+                        label: "Ausgewählten Inhalt laden",
+                    },
+                ],
+            },
+        },
         boolean: {
             name: "Boolean",
             control: {type: "boolean"},

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

@@ -1,8 +1,8 @@
 import TestStory3 from "./TestStory3";
 
 export default {
-    title: "Elemente/Test 2/Test Story 3",
-    id: "TestStory3",
+    title: "Design-System/Atoms/Ad Tags/Test Story 3",
+    // id: "TestStory3",
     component: TestStory3,
     storyContext: ["layout"],
     argTypes: {