@vonaffenfels/slate-editor 1.1.25 → 1.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.25",
+    "version": "1.1.27",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "d6ebcec654136ac0aca31063f09af188ca9bed8e",
+    "gitHead": "78986d6bb0100171800ced4a7c77c3d08de9e002",
     "publishConfig": {
         "access": "public"
     }

package/src/Nodes/StorybookDisplay.js

@@ -130,9 +130,9 @@ const BlockComponent = ({
         "editor-mr-large": loadedAttributes?.margin?.right,
         "editor-mb-large": loadedAttributes?.margin?.bottom,
         "editor-ml-large": loadedAttributes?.margin?.left,
-        "lg:hidden": loadedAttributes?.hideOnDesktop && !isEditor,
-        "sm:max-lg:hidden": loadedAttributes?.hideOnTablet && !isEditor,
-        "max-sm:hidden": loadedAttributes?.hideOnSmartphone && !isEditor,
+        "block-hide-on-desktop": loadedAttributes?.hideOnDesktop && !isEditor,
+        "block-hide-on-tablet": loadedAttributes?.hideOnTablet && !isEditor,
+        "block-hide-on-smartphone": loadedAttributes?.hideOnSmartphone && !isEditor,
     });
 
     if (!wrapperClassName) {

package/src/SidebarEditor/Fields/MultiSelect.js

@@ -0,0 +1,14 @@
+import {renderFieldSelectOptions} from "./Select";
+
+export const MultiSelect = ({
+    value,
+    field,
+    onChange,
+}) => {
+    return <select
+        multiple
+        value={value}
+        onChange={onChange}>
+        {renderFieldSelectOptions(field)}
+    </select>;
+};

package/src/SidebarEditor/Fields/RemoteSelect.js

@@ -0,0 +1,33 @@
+import {renderFieldSelectOptions} from "./Select";
+import {
+    useEffect, useState,
+} from "react";
+
+export const RemoteSelect = ({
+    value,
+    field,
+    onChange,
+}) => {
+    const [options, setOptions] = useState([]);
+
+    const reloadOptions = async () => {
+        setOptions(await fetch(field.control.url).then(res => res.json()));
+    };
+
+    useEffect(() => {
+        reloadOptions();
+    }, [field]);
+
+    return <select
+        value={value || ""}
+        onChange={onChange}>
+        <option value="">Auswählen</option>
+        {renderFieldSelectOptions({
+            ...field,
+            control: {
+                ...field.control,
+                options,
+            },
+        })}
+    </select>;
+};

package/src/SidebarEditor/Fields/Select.js

@@ -0,0 +1,48 @@
+
+export const Select = ({
+    value,
+    field,
+    onChange,
+}) => {
+    return <select
+        value={value || ""}
+        onChange={onChange}>
+        <option value="">Auswählen</option>
+        {renderFieldSelectOptions(field)}
+    </select>;
+};
+
+export const renderFieldSelectOptions = field => {
+    if (field.options) {
+        field.control.options = field.options;
+    }
+
+    if (field?.control?.labels) {
+        field.control.options = field.control.labels;
+    }
+
+    if (!field?.control?.options) {
+        return;
+    }
+
+    if (Array.isArray(field.control.options)) {
+        return field.control.options.map(option => {
+            if (option && typeof option === "object") {
+                return <option key={`select-option-${option.value}`} value={option.value}>{option.label}</option>;
+            }
+
+            return <option key={`select-option-${option}`} value={option}>{option}</option>;
+        });
+    } else {
+        return Object.keys(field.control.options).map(key => {
+            // Prevents false values being a string, e.g. "false"
+            if (!field.control.options[key]) {
+                field.control.options[key] = "";
+            }
+
+            return (
+                <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
+            );
+        });
+    }
+};

package/src/SidebarEditor/SidebarEditorField.js

@@ -5,6 +5,9 @@ import {
     Asset, AssetList,
 } from "./AssetList";
 import {Switch} from "./Switch";
+import {Select} from "./Fields/Select";
+import {RemoteSelect} from "./Fields/RemoteSelect";
+import {MultiSelect} from "./Fields/MultiSelect";
 
 export const SidebarEditorField = ({
     field,
@@ -37,37 +40,6 @@ export const SidebarEditorField = ({
         onChange(fieldKey, swapArrayElements(value, index, newIndex));
     };
 
-    const renderFieldSelectOptions = field => {
-        if (field.options) {
-            field.control.options = field.options;
-        }
-
-        if (field?.control?.labels) {
-            field.control.options = field.control.labels;
-        }
-
-        if (!field?.control?.options) {
-            return;
-        }
-
-        if (Array.isArray(field.control.options)) {
-            return field.control.options.map(value => (
-                <option key={`select-option-${value}`} value={value}>{value}</option>
-            ));
-        } else {
-            return Object.keys(field.control.options).map(key => {
-                // Prevents false values being a string, e.g. "false"
-                if (!field.control.options[key]) {
-                    field.control.options[key] = "";
-                }
-
-                return (
-                    <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
-                );
-            });
-        }
-    };
-
     const getInputByField = (field, fieldKey) => {
         if (!field) {
             return null;
@@ -114,14 +86,9 @@ export const SidebarEditorField = ({
                     </div>
                 );
             case "select":
-                return (
-                    <select
-                        value={value || ""}
-                        onChange={e => onChange(fieldKey, e.target.value)}>
-                        <option value="">Auswählen</option>
-                        {renderFieldSelectOptions(field)}
-                    </select>
-                );
+                return <Select onChange={e => onChange(fieldKey, e.target.value)} field={field} value={value} />;
+            case "remote-select":
+                return <RemoteSelect onChange={e => onChange(fieldKey, e.target.value)} field={field} value={value} />;
             case "data-stream":
                 return (
                     <select
@@ -268,18 +235,14 @@ export const SidebarEditorField = ({
                         onChange={e => onChange(fieldKey, e.target.value)}/>
                 );
             case "multi-select":
-                return (
-                    <select
-                        multiple
-                        value={value}
-                        onChange={e => {
-                            let v = Array.from(e.target.selectedOptions, option => option.value);
+                return <MultiSelect
+                    value={value}
+                    field={field}
+                    onChange={e => {
+                        let v = Array.from(e.target.selectedOptions, option => option.value);
 
-                            onChange(fieldKey, v);
-                        }}>
-                        {renderFieldSelectOptions(field)}
-                    </select>
-                );
+                        onChange(fieldKey, v);
+                    }} />;
             case "contentful-content":
                 return (
                     <>