@vonaffenfels/slate-editor 1.2.19 → 1.2.23

package/src/SidebarEditor/Fields/RemoteSelect.js

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

@@ -1,48 +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>
-            );
-        });
-    }
+
+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/Fields/StreamSelect.js

@@ -1,16 +1,16 @@
-export const StreamSelect = ({
-    value,
-    onChange,
-    field,
-}) => {
-    return (
-        <select
-            value={value || ""}
-            onChange={onChange}>
-            <option value="">Auswählen</option>
-            {(field?.control?.streams || []).map(stream => (
-                <option key={`select-option-${stream.value}`} value={`$$_STREAM__${stream.value}__`}>{stream.label}</option>
-            ))}
-        </select>
-    );
+export const StreamSelect = ({
+    value,
+    onChange,
+    field,
+}) => {
+    return (
+        <select
+            value={value || ""}
+            onChange={onChange}>
+            <option value="">Auswählen</option>
+            {(field?.control?.streams || []).map(stream => (
+                <option key={`select-option-${stream.value}`} value={`$$_STREAM__${stream.value}__`}>{stream.label}</option>
+            ))}
+        </select>
+    );
 };

package/src/SidebarEditor/Fields/Switch.js

@@ -1,35 +1,35 @@
-import React from "react";
-import classNames from "classnames";
-
-export const Switch = ({
-    value,
-    onClick,
-    label,
-    className,
-}) => {
-    return (
-        <div className={classNames(className, {"flex items-center": true})}>
-            <button
-                onClick={onClick}
-                type="button"
-                role="switch"
-                aria-checked="false"
-                className={classNames({
-                    "bg-green-500": value,
-                    "bg-gray-200": !value,
-                },
-                "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition duration-100 ease-in-out focus:outline-none")}
-            >
-                <span
-                    aria-hidden="true"
-                    className={classNames({
-                        "translate-x-5": value,
-                        "translate-x-0": !value,
-                    },
-                    "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-100 ease-in-out")}
-                />
-            </button>
-            <span className="ml-2">{label}</span>
-        </div>
-    );
+import React from "react";
+import classNames from "classnames";
+
+export const Switch = ({
+    value,
+    onClick,
+    label,
+    className,
+}) => {
+    return (
+        <div className={classNames(className, {"flex items-center": true})}>
+            <button
+                onClick={onClick}
+                type="button"
+                role="switch"
+                aria-checked="false"
+                className={classNames({
+                    "bg-green-500": value,
+                    "bg-gray-200": !value,
+                },
+                "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition duration-100 ease-in-out focus:outline-none")}
+            >
+                <span
+                    aria-hidden="true"
+                    className={classNames({
+                        "translate-x-5": value,
+                        "translate-x-0": !value,
+                    },
+                    "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-100 ease-in-out")}
+                />
+            </button>
+            <span className="ml-2">{label}</span>
+        </div>
+    );
 };

package/src/SidebarEditor/Fields/Textarea.js

@@ -1,22 +1,22 @@
-export const Textarea = ({
-    value,
-    onChange,
-}) => {
-    return (
-        <textarea
-            value={typeof value === "object" ? JSON.stringify(value, null, 2) || "" : value}
-            onChange={e => {
-                onChange(e);
-
-                e.target.style.height = "5px";
-                e.target.style.height = e.target.scrollHeight + 2 + "px";
-            }}
-            onBlur={(e) => {
-                e.target.style.height = "42px";
-            }}
-            onFocus={e => {
-                e.target.style.height = "5px";
-                e.target.style.height = e.target.scrollHeight + 2 + "px";
-            }}/>
-    );
+export const Textarea = ({
+    value,
+    onChange,
+}) => {
+    return (
+        <textarea
+            value={typeof value === "object" ? JSON.stringify(value, null, 2) || "" : value}
+            onChange={e => {
+                onChange(e);
+
+                e.target.style.height = "5px";
+                e.target.style.height = e.target.scrollHeight + 2 + "px";
+            }}
+            onBlur={(e) => {
+                e.target.style.height = "42px";
+            }}
+            onFocus={e => {
+                e.target.style.height = "5px";
+                e.target.style.height = e.target.scrollHeight + 2 + "px";
+            }}/>
+    );
 };

package/src/SidebarEditor/Resizable.js

@@ -1,86 +1,86 @@
-import {
-    useEffect, useRef,
-} from "react";
-import classNames from "classnames";
-
-export const Resizable = ({
-    left,
-    right,
-}) => {
-    const containerRef = useRef();
-    const leftRef = useRef();
-    const handleRef = useRef();
-    const rightRef = useRef();
-
-    const checkWidth = (width) => {
-        if (!containerRef.current || !width) {
-            return width;
-        }
-
-        if (width < 300) {
-            return 300;
-        } else if (containerRef.current.getBoundingClientRect().width - width < 300) {
-            return containerRef.current.getBoundingClientRect().width - 300;
-        }
-
-        return width;
-    };
-
-    useEffect(() => {
-        if (rightRef.current) {
-            const savedWidth = localStorage.getItem("slate-editor-resizable-width");
-
-            if (checkWidth(savedWidth)) {
-                rightRef.current.style.width = savedWidth + 'px';
-            }
-
-            const onMouseDown = (e) => {
-                if (!rightRef.current) {
-                    return;
-                }
-                rightRef.current.resizingStartWidth = rightRef.current.getBoundingClientRect().width;
-                rightRef.current.resizingStartMouseX = e.pageX;
-                rightRef.current.resizing = true;
-            };
-            const onMouseMove = (e) => {
-                if (!rightRef?.current?.resizing) {
-                    return;
-                }
-
-                let newWidth = rightRef.current.resizingStartWidth - (e.pageX - rightRef.current.resizingStartMouseX);
-                newWidth = checkWidth(newWidth);
-
-                localStorage.setItem("slate-editor-resizable-width", newWidth);
-
-                rightRef.current.style.width = newWidth + 'px';
-            };
-            const onMouseUp = (e) => {
-                if (rightRef.current) {
-                    rightRef.current.resizing = false;
-                }
-            };
-
-            handleRef.current.addEventListener("mousedown", onMouseDown);
-            document.addEventListener("mousemove", onMouseMove);
-            document.addEventListener("mouseup", onMouseUp);
-
-            return () => {
-                if (rightRef.current) {
-                    handleRef.current.removeEventListener("mousedown", onMouseDown);
-                }
-                document.removeEventListener("mousemove", onMouseMove);
-                document.removeEventListener("mouseup", onMouseUp);
-            };
-        }
-    }, [right, left]);
-
-    return <div
-        className={classNames("resizable flex w-full", {"enabled": !!right})}
-        ref={containerRef}>
-        <div ref={leftRef} className="resizable-left grow">{left}</div>
-        {right && <div ref={rightRef} className="resizable-right shrink-0">
-            <div ref={handleRef} className="resizable-x-handle"/>
-            {right}
-        </div>}
-    </div>;
+import {
+    useEffect, useRef,
+} from "react";
+import classNames from "classnames";
+
+export const Resizable = ({
+    left,
+    right,
+}) => {
+    const containerRef = useRef();
+    const leftRef = useRef();
+    const handleRef = useRef();
+    const rightRef = useRef();
+
+    const checkWidth = (width) => {
+        if (!containerRef.current || !width) {
+            return width;
+        }
+
+        if (width < 300) {
+            return 300;
+        } else if (containerRef.current.getBoundingClientRect().width - width < 300) {
+            return containerRef.current.getBoundingClientRect().width - 300;
+        }
+
+        return width;
+    };
+
+    useEffect(() => {
+        if (rightRef.current) {
+            const savedWidth = localStorage.getItem("slate-editor-resizable-width");
+
+            if (checkWidth(savedWidth)) {
+                rightRef.current.style.width = savedWidth + 'px';
+            }
+
+            const onMouseDown = (e) => {
+                if (!rightRef.current) {
+                    return;
+                }
+                rightRef.current.resizingStartWidth = rightRef.current.getBoundingClientRect().width;
+                rightRef.current.resizingStartMouseX = e.pageX;
+                rightRef.current.resizing = true;
+            };
+            const onMouseMove = (e) => {
+                if (!rightRef?.current?.resizing) {
+                    return;
+                }
+
+                let newWidth = rightRef.current.resizingStartWidth - (e.pageX - rightRef.current.resizingStartMouseX);
+                newWidth = checkWidth(newWidth);
+
+                localStorage.setItem("slate-editor-resizable-width", newWidth);
+
+                rightRef.current.style.width = newWidth + 'px';
+            };
+            const onMouseUp = (e) => {
+                if (rightRef.current) {
+                    rightRef.current.resizing = false;
+                }
+            };
+
+            handleRef.current.addEventListener("mousedown", onMouseDown);
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+
+            return () => {
+                if (rightRef.current) {
+                    handleRef.current.removeEventListener("mousedown", onMouseDown);
+                }
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+        }
+    }, [right, left]);
+
+    return <div
+        className={classNames("resizable flex w-full", {"enabled": !!right})}
+        ref={containerRef}>
+        <div ref={leftRef} className="resizable-left grow">{left}</div>
+        {right && <div ref={rightRef} className="resizable-right shrink-0">
+            <div ref={handleRef} className="resizable-x-handle"/>
+            {right}
+        </div>}
+    </div>;
 };

package/src/SidebarEditor/SidebarEditorField.js

@@ -10,7 +10,7 @@ import {CloudinaryContentSelect} from "./Fields/CloudinaryContentSelect";
 import {MVP} from "./Fields/MVP";
 import {ColorPicker} from "./Fields/ColorPicker";
 import {RemoteMultiSelect} from "./Fields/RemoteMultiSelect";
-import classNames from "classnames"; 
+import classNames from "classnames";
 
 export const SidebarEditorField = ({
     field,
@@ -244,6 +244,9 @@ export const SidebarEditorField = ({
                 "!text-red-500": field?.required && !value,
             })}>{field.name || fieldKey} {field.required ? "*" : ""}</label>
             {inputField}
+            {!!field.description && (
+                <p className="mt-1 text-xs text-gray-500">{field.description}</p>
+            )}
         </div>
     );
 };