@vonaffenfels/slate-editor 1.0.54 → 1.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.54",
+    "version": "1.0.56",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "a76b8b1b997741f81c733ee80e54cdba34c7ff9a",
+    "gitHead": "46c4cdded137ff7fdd53011ee6b999972131dd9c",
     "publishConfig": {
         "access": "public"
     }

package/scss/storybook.scss

@@ -6,13 +6,14 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    z-index: 10;
+    z-index: 20;
     background-color: rgba(255, 255, 255, 0.7);
     color: black;
     font-size: 1em;
     align-items: center;
     justify-content: center;
     content-visibility: auto;
+    outline: 3px dashed #036fe3;
   }
 
   &.storybook-inline {

package/src/SidebarEditor/SidebarEditorField.js

@@ -1,5 +1,6 @@
 import {IconButton} from "../SidebarEditor";
 import {swapArrayElements} from "../helper/array";
+import {reduceContentfulResponse} from "../util/reduceContentfulResponse";
 import {
     Asset, AssetList,
 } from "./AssetList";
@@ -36,6 +37,10 @@ export const SidebarEditorField = ({
     };
 
     const renderFieldSelectOptions = field => {
+        if (field.options) {
+            field.control.options = field.options;
+        }
+
         if (field?.control?.labels) {
             field.control.options = field.control.labels;
         }
@@ -50,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]}>{key}</option>
+                <option key={`select-option-${key}`} value={field.control.options[key]}>{field.control.options[key]}</option>
             ));
         }
     };
@@ -235,9 +240,7 @@ export const SidebarEditorField = ({
 
                             onChange(fieldKey, v);
                         }}>
-                        {Object.keys(field.control.options).map(key => (
-                            <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
-                        ))}
+                        {renderFieldSelectOptions(field)}
                     </select>
                 );
             case "contentful-content":
@@ -248,7 +251,7 @@ export const SidebarEditorField = ({
                             className="button"
                             onClick={() => {
                                 sdk.dialogs.selectSingleEntry({contentTypes: field.control.contentTypes}).then(content => {
-                                    onChange(fieldKey, content);
+                                    onChange(fieldKey, reduceContentfulResponse(content, field.control.paths));
                                 });
                             }}
                         >Auswählen</button>
@@ -267,7 +270,7 @@ export const SidebarEditorField = ({
                                         onChange={v => onChange(fieldKey, v)}
                                         onAddClick={() => {
                                             sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
-                                                onChange(fieldKey, [...value, ...contents]);
+                                                onChange(fieldKey, reduceContentfulResponse([...value, ...contents], field.control.paths));
                                             });
                                         }} />
                                 </div>
@@ -277,7 +280,7 @@ export const SidebarEditorField = ({
                             className="button"
                             onClick={() => {
                                 sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
-                                    onChange(fieldKey, contents);
+                                    onChange(fieldKey, reduceContentfulResponse(contents, field.control.paths));
                                 });
                             }}
                         >Auswählen</button>

package/src/util/reduceContentfulResponse.js

@@ -0,0 +1,65 @@
+export const reduceContentfulResponse = (item, paths) => {
+
+    if (Array.isArray(item)) {
+        return item.map(v => reduceContentfulResponse(v, paths));
+    }
+
+    if (!paths?.length || !item) {
+        return item;
+    }
+
+    const defaultPaths = [
+        "__typename",
+        "sys.id",
+        "sys.contentType.sys.id",
+    ];
+    const mergedPaths = [...defaultPaths, ...paths];
+
+    const result = {
+        sys: {
+            id: item?.sys?.id,
+        },
+    };
+
+    for (let i = 0; i < mergedPaths.length; i++) {
+        const path = mergedPaths[i];
+
+        setByPath(result, path, getByPath(item, path));
+    }
+
+    return result;
+};
+
+export const getByPath = (obj, path) => {
+    if (!obj || !path) {
+        return;
+    }
+
+    const pathParts = path.split(".");
+
+    if (pathParts.length === 1) {
+        return obj?.[pathParts[0]];
+    } else {
+        const currPart = pathParts.shift();
+        return getByPath(obj?.[currPart], pathParts.join("."));
+    }
+};
+
+export const setByPath = (obj, path, value) => {
+    const pathParts = path.split(".");
+    let objPointer = obj;
+
+    for (let i = 0; i < pathParts.length; i++) {
+        const pathPart = pathParts[i];
+
+        if (i === pathParts.length - 1) {
+            objPointer[pathPart] = value;
+        } else if (objPointer[pathPart] === undefined) {
+            objPointer[pathPart] = {};
+        }
+
+        objPointer = objPointer[pathPart];
+    }
+
+    return obj;
+};