@vonaffenfels/slate-editor 1.1.43 → 1.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.43",
+    "version": "1.1.44",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "d3645e92a4ccd3e5033de4e79de4d9b7d03af4a9",
+    "gitHead": "a39b17107008c54187e0582f6552d11bf03ff722",
     "publishConfig": {
         "access": "public"
     }

package/src/SidebarEditor/Fields/RemoteMultiSelect.js

@@ -0,0 +1,41 @@
+import {RemoteSelect} from "./RemoteSelect";
+import {renderFieldSelectOptions} from "./Select";
+import {
+    useEffect, useState,
+} from "react";
+
+export const RemoteMultiSelect = ({
+    value = [],
+    field,
+    onChange,
+}) => {
+    const [options, setOptions] = useState([]);
+
+    const renderSelected = (value || []).map((v, index) => {
+        let label = (options || []).find(o => o.value === v)?.label || v;
+
+        return (
+            <div key={`remote-multi-select-selected-${index}`} title={label} className="mb-1 mr-1 inline-flex overflow-hidden rounded-md bg-[#036fe3] p-2">
+                <p className="mr-2 max-w-[150px] truncate !text-white">
+                    {label}
+                </p>
+                <button onClick={() => onChange(value.filter((_, i) => i !== index))} className="!text-white">⨯</button>
+            </div>
+        );
+    });
+
+    const handleChange = e => {
+        if (!e?.target?.value) {
+            return;
+        }
+
+        onChange([...value, e.target.value]);
+    };
+
+    return (
+        <div>
+            {renderSelected}
+            <RemoteSelect onChange={handleChange} field={field} onOptionsChange={opts => setOptions(opts)} />
+        </div>
+    );
+};

package/src/SidebarEditor/Fields/RemoteSelect.js

@@ -7,11 +7,18 @@ export const RemoteSelect = ({
     value,
     field,
     onChange,
+    onOptionsChange,
 }) => {
     const [options, setOptions] = useState([]);
 
     const reloadOptions = async () => {
-        setOptions(await fetch(field.control.url).then(res => res.json()));
+        let opts = await fetch(field.control.url).then(res => res.json());
+
+        if (onOptionsChange) {
+            onOptionsChange(opts);
+        }
+
+        setOptions(opts);
     };
 
     useEffect(() => {

package/src/SidebarEditor/SidebarEditorField.js

@@ -9,6 +9,7 @@ import {ContentfulContentSelect} from "./Fields/ContentfulContentSelect";
 import {CloudinaryContentSelect} from "./Fields/CloudinaryContentSelect";
 import {MVP} from "./Fields/MVP";
 import {ColorPicker} from "./Fields/ColorPicker";
+import {RemoteMultiSelect} from "./Fields/RemoteMultiSelect";
 
 export const SidebarEditorField = ({
     field,
@@ -76,6 +77,8 @@ export const SidebarEditorField = ({
                 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 "remote-multi-select":
+                return <RemoteMultiSelect onChange={v => onChange(fieldKey, v)} field={field} value={value} />;
             case "data-stream":
                 return <StreamSelect onChange={e => onChange(fieldKey, e.target.value)} field={field} value={value} />;
             case "number":