@vonaffenfels/slate-editor 1.1.42 → 1.1.44

package/package.json

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

package/src/BlockEditor.js

@@ -128,6 +128,21 @@ export default function BlockEditor({
                         isInline: undefined,
                     };
                 }
+            } else if (node?.type === "heading") {
+                if (!node?.attributes) {
+                    node.attributes = {};
+                }
+
+                // set an id for linking directly to headlines
+                if (!node.attributes.id) {
+                    return {
+                        ...node,
+                        attributes: {
+                            ...node.attributes,
+                            id: ObjectId(),
+                        },
+                    };
+                }
             }
 
             return node;

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":