@vonaffenfels/slate-editor 1.1.71 → 1.2.0

package/src/SidebarEditor/Fields/ColorPicker.js

@@ -1,90 +1,90 @@
-import {
-    useEffect, useState,
-} from "react";
-
-export const ColorPicker = ({
-    value,
-    onChange,
-}) => {
-    const [opacity, setOpacity] = useState(1);
-    const [color, setColor] = useState(null);
-
-    const handleChange = (e) => {
-        setColor(e.target.value);
-
-        let c = e.target.value;
-
-        var rgbaCol = 'rgba(' + parseInt(c.slice(-6, -4), 16) + ',' + parseInt(c.slice(-4, -2), 16) + ',' + parseInt(c.slice(-2), 16) + ',' + opacity + ')';
-
-        onChange(rgbaCol);
-    };
-
-    useEffect(() => {
-        if (!color) {
-            return;
-        }
-
-        var rgbaCol = 'rgba(' + parseInt(color.slice(-6, -4), 16) + ',' + parseInt(color.slice(-4, -2), 16) + ',' + parseInt(color.slice(-2), 16) + ',' + opacity + ')';
-
-        onChange(rgbaCol);
-    }, [opacity]);
-
-    useEffect(() => {
-        if (!value) {
-            setColor("#000000");
-            setOpacity(1);
-
-            return;
-        }
-
-        if (value?.startsWith("rgba")) {
-            const color = parseColor(value);
-
-            setColor(convertColorToHex(value));
-            setOpacity(color.a);
-        } else {
-            setColor(value);
-        }
-    }, [value]);
-
-    return (
-        <div className="flex flex-col">
-            <input
-                type="color"
-                value={color || ""}
-                className="mb-1"
-                onChange={handleChange}/>
-            <input type="range" min="0" max="1" step="0.1" value={opacity} onChange={e => setOpacity(e.target.value)} />
-            {!!value && (
-                <button className="button button--tertiary mt-1" onClick={() => onChange(undefined)}>Zurücksetzen</button>
-            )}
-        </div>
-    );
-};
-
-function convertColorToHex(inputColor) {
-    function rgbToHex(r, g, b) {
-        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-    }
-
-    // Parse the input color value
-    let color;
-    if (inputColor.startsWith("#")) {
-        color = inputColor; // Already in HEX format
-    } else if (inputColor.startsWith("rgb")) {
-        color = parseColor(inputColor); // Convert to HEX format
-    }
-
-    return rgbToHex(color.r, color.g, color.b);
-}
-
-const parseColor = (inputColor) => {
-    let values = inputColor.match(/[\d.]+/g);
-
-    return {
-        r: parseInt(values[0]),
-        g: parseInt(values[1]),
-        b: parseInt(values[2]),
-        a: values[3] ? parseFloat(values[3]) : undefined,
-    };
+import {
+    useEffect, useState,
+} from "react";
+
+export const ColorPicker = ({
+    value,
+    onChange,
+}) => {
+    const [opacity, setOpacity] = useState(1);
+    const [color, setColor] = useState(null);
+
+    const handleChange = (e) => {
+        setColor(e.target.value);
+
+        let c = e.target.value;
+
+        var rgbaCol = 'rgba(' + parseInt(c.slice(-6, -4), 16) + ',' + parseInt(c.slice(-4, -2), 16) + ',' + parseInt(c.slice(-2), 16) + ',' + opacity + ')';
+
+        onChange(rgbaCol);
+    };
+
+    useEffect(() => {
+        if (!color) {
+            return;
+        }
+
+        var rgbaCol = 'rgba(' + parseInt(color.slice(-6, -4), 16) + ',' + parseInt(color.slice(-4, -2), 16) + ',' + parseInt(color.slice(-2), 16) + ',' + opacity + ')';
+
+        onChange(rgbaCol);
+    }, [opacity]);
+
+    useEffect(() => {
+        if (!value) {
+            setColor("#000000");
+            setOpacity(1);
+
+            return;
+        }
+
+        if (value?.startsWith("rgba")) {
+            const color = parseColor(value);
+
+            setColor(convertColorToHex(value));
+            setOpacity(color.a);
+        } else {
+            setColor(value);
+        }
+    }, [value]);
+
+    return (
+        <div className="flex flex-col">
+            <input
+                type="color"
+                value={color || ""}
+                className="mb-1"
+                onChange={handleChange}/>
+            <input type="range" min="0" max="1" step="0.1" value={opacity} onChange={e => setOpacity(e.target.value)} />
+            {!!value && (
+                <button className="button button--tertiary mt-1" onClick={() => onChange(undefined)}>Zurücksetzen</button>
+            )}
+        </div>
+    );
+};
+
+function convertColorToHex(inputColor) {
+    function rgbToHex(r, g, b) {
+        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    }
+
+    // Parse the input color value
+    let color;
+    if (inputColor.startsWith("#")) {
+        color = inputColor; // Already in HEX format
+    } else if (inputColor.startsWith("rgb")) {
+        color = parseColor(inputColor); // Convert to HEX format
+    }
+
+    return rgbToHex(color.r, color.g, color.b);
+}
+
+const parseColor = (inputColor) => {
+    let values = inputColor.match(/[\d.]+/g);
+
+    return {
+        r: parseInt(values[0]),
+        g: parseInt(values[1]),
+        b: parseInt(values[2]),
+        a: values[3] ? parseFloat(values[3]) : undefined,
+    };
 };

package/src/SidebarEditor/Fields/ContentfulContentSelect.js

@@ -1,63 +1,63 @@
-import {
-    Asset, AssetList,
-} from "../AssetList";
-import {reduceContentfulResponse} from "../../util/reduceContentfulResponse";
-
-export const ContentfulContentSelect = ({
-    value,
-    onChange,
-    sdk,
-    multiple,
-    field,
-}) => {
-    if (multiple) {
-        return (
-            <>
-                {value && value.length > 0 && (
-                    <details className="mb-2">
-                        <summary>{value.length || 0} {value.length === 1 ? "Element" : "Elemente"}</summary>
-                        <div className="mt-4">
-                            <AssetList
-                                assets={value}
-                                sdk={sdk}
-                                onChange={onChange}
-                                onAddClick={() => {
-                                    sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
-                                        onChange(reduceContentfulResponse([...value, ...contents], field.control.paths));
-                                    });
-                                }}/>
-                        </div>
-                    </details>
-                )}
-                <button
-                    className="button"
-                    onClick={() => {
-                        sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
-                            onChange(reduceContentfulResponse(contents, field.control.paths));
-                        });
-                    }}
-                >Auswählen
-                </button>
-            </>
-        );
-    }
-
-    return (
-        <>
-            {!!value && <div className="mb-2"><Asset
-                sdk={sdk}
-                asset={value}
-                onDeleteClick={() => onChange(null)}
-                onChange={onChange}/></div>}
-            <button
-                className="button"
-                onClick={() => {
-                    sdk.dialogs.selectSingleEntry({contentTypes: field.control.contentTypes}).then(content => {
-                        onChange(reduceContentfulResponse(content, field.control.paths));
-                    });
-                }}
-            >Auswählen
-            </button>
-        </>
-    );
+import {
+    Asset, AssetList,
+} from "../AssetList";
+import {reduceContentfulResponse} from "../../util/reduceContentfulResponse";
+
+export const ContentfulContentSelect = ({
+    value,
+    onChange,
+    sdk,
+    multiple,
+    field,
+}) => {
+    if (multiple) {
+        return (
+            <>
+                {value && value.length > 0 && (
+                    <details className="mb-2">
+                        <summary>{value.length || 0} {value.length === 1 ? "Element" : "Elemente"}</summary>
+                        <div className="mt-4">
+                            <AssetList
+                                assets={value}
+                                sdk={sdk}
+                                onChange={onChange}
+                                onAddClick={() => {
+                                    sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
+                                        onChange(reduceContentfulResponse([...value, ...contents], field.control.paths));
+                                    });
+                                }}/>
+                        </div>
+                    </details>
+                )}
+                <button
+                    className="button"
+                    onClick={() => {
+                        sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
+                            onChange(reduceContentfulResponse(contents, field.control.paths));
+                        });
+                    }}
+                >Auswählen
+                </button>
+            </>
+        );
+    }
+
+    return (
+        <>
+            {!!value && <div className="mb-2"><Asset
+                sdk={sdk}
+                asset={value}
+                onDeleteClick={() => onChange(null)}
+                onChange={onChange}/></div>}
+            <button
+                className="button"
+                onClick={() => {
+                    sdk.dialogs.selectSingleEntry({contentTypes: field.control.contentTypes}).then(content => {
+                        onChange(reduceContentfulResponse(content, field.control.paths));
+                    });
+                }}
+            >Auswählen
+            </button>
+        </>
+    );
 };

package/src/SidebarEditor/Fields/DateTime.js

@@ -1,55 +1,55 @@
-import classNames from "classnames";
-
-export const DateTime = ({
-    value,
-    onChange,
-    className,
-    inline,
-    ...props
-}) => {
-    // Separate date and time values
-    const dateValue = value ? value.split("T")[0] : "";
-    const timeValue = value ? value.split("T")[1] : "";
-
-    // Handle changes for date and time inputs
-    const handleDateChange = (e) => {
-        const newDate = e.target.value;
-        const newDateTime = `${newDate}T${timeValue || "00:00"}`;
-        onChange(newDateTime);
-    };
-
-    const handleTimeChange = (e) => {
-        const newTime = e.target.value;
-        const newDateTime = `${dateValue || "1970-01-01"}T${newTime}`;
-        onChange(newDateTime);
-    };
-
-    return (
-        <div className={classNames(className, "grid gap-2", {
-            "grid-cols-2": inline,
-            "grid-cols-1": !inline,
-        })}>
-            {/* Date input */}
-            <input
-                type="date"
-                className="w-full"
-                value={dateValue}
-                onChange={handleDateChange}
-                {...props}
-            />
-
-            {/* Time input */}
-            <input
-                type="time"
-                className="w-full"
-                value={timeValue}
-                onChange={handleTimeChange}
-                {...props}
-            />
-
-            {!!value && (
-                <button className="button button--tertiary" onClick={() => onChange(undefined)}>Zurücksetzen</button>
-            )}
-        </div>
-    );
-};
+import classNames from "classnames";
+
+export const DateTime = ({
+    value,
+    onChange,
+    className,
+    inline,
+    ...props
+}) => {
+    // Separate date and time values
+    const dateValue = value ? value.split("T")[0] : "";
+    const timeValue = value ? value.split("T")[1] : "";
+
+    // Handle changes for date and time inputs
+    const handleDateChange = (e) => {
+        const newDate = e.target.value;
+        const newDateTime = `${newDate}T${timeValue || "00:00"}`;
+        onChange(newDateTime);
+    };
+
+    const handleTimeChange = (e) => {
+        const newTime = e.target.value;
+        const newDateTime = `${dateValue || "1970-01-01"}T${newTime}`;
+        onChange(newDateTime);
+    };
+
+    return (
+        <div className={classNames(className, "grid gap-2", {
+            "grid-cols-2": inline,
+            "grid-cols-1": !inline,
+        })}>
+            {/* Date input */}
+            <input
+                type="date"
+                className="w-full"
+                value={dateValue}
+                onChange={handleDateChange}
+                {...props}
+            />
+
+            {/* Time input */}
+            <input
+                type="time"
+                className="w-full"
+                value={timeValue}
+                onChange={handleTimeChange}
+                {...props}
+            />
+
+            {!!value && (
+                <button className="button button--tertiary" onClick={() => onChange(undefined)}>Zurücksetzen</button>
+            )}
+        </div>
+    );
+};

package/src/SidebarEditor/Fields/MVP.js

@@ -1,67 +1,67 @@
-import {IconButton} from "../../SidebarEditor";
-import {SidebarEditorField} from "../SidebarEditorField";
-
-export const MVP = ({
-    value,
-    onChange,
-    onMove,
-    onDelete,
-    field,
-    fieldKey,
-    storybookElement,
-    sdk,
-}) => {
-    return (
-        <details>
-            <summary>{value?.length || 0} {value?.length === 1 ? "Element" : "Elemente"}</summary>
-            <div className="mt-4">
-                {value?.map((f, index) => {
-                    return (
-                        <div className="mb-4" key={`mvp-${index}`}>
-                            <div className="mb-2 flex items-center">
-                                <b className="grow">{field.name} [{index.toString()}]</b>
-                                <div className="icon-button-group mr-1">
-                                    <IconButton
-                                        size="small"
-                                        onClick={() => onMove("up", index)}
-                                        disabled={index === 0}>↑</IconButton>
-                                    <IconButton
-                                        size="small"
-                                        onClick={() => onMove("down", index)}
-                                        disabled={index === value?.length - 1}>↓</IconButton>
-                                </div>
-                                <IconButton
-                                    size="small"
-                                    onClick={() => onDelete(index)}>🗑</IconButton>
-                            </div>
-                            {Object.keys(field.control.fields).map((key) => {
-                                let mvpField = field.control.fields[key];
-                                let mvpValue = value?.[index]?.[key];
-
-                                return (
-                                    <div key={`mvp-field-${key}`}>
-                                        <SidebarEditorField
-                                            field={mvpField}
-                                            fieldKey={fieldKey}
-                                            value={mvpValue}
-                                            storybookElement={storybookElement}
-                                            sdk={sdk}
-                                            onChange={(fK, value) => onChange(
-                                                fK, value, key, index,
-                                            )}/>
-                                    </div>
-                                );
-                            })}
-                            <hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}}/>
-                        </div>
-                    );
-                })}
-                <button
-                    className="button button--secondary"
-                    onClick={() => onChange(fieldKey, [...(value || []), {}])}>Neue
-                                Zeile
-                </button>
-            </div>
-        </details>
-    );
+import {IconButton} from "../../SidebarEditor";
+import {SidebarEditorField} from "../SidebarEditorField";
+
+export const MVP = ({
+    value,
+    onChange,
+    onMove,
+    onDelete,
+    field,
+    fieldKey,
+    storybookElement,
+    sdk,
+}) => {
+    return (
+        <details>
+            <summary>{value?.length || 0} {value?.length === 1 ? "Element" : "Elemente"}</summary>
+            <div className="mt-4">
+                {value?.map((f, index) => {
+                    return (
+                        <div className="mb-4" key={`mvp-${index}`}>
+                            <div className="mb-2 flex items-center">
+                                <b className="grow">{field.name} [{index.toString()}]</b>
+                                <div className="icon-button-group mr-1">
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => onMove("up", index)}
+                                        disabled={index === 0}>↑</IconButton>
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => onMove("down", index)}
+                                        disabled={index === value?.length - 1}>↓</IconButton>
+                                </div>
+                                <IconButton
+                                    size="small"
+                                    onClick={() => onDelete(index)}>🗑</IconButton>
+                            </div>
+                            {Object.keys(field.control.fields).map((key) => {
+                                let mvpField = field.control.fields[key];
+                                let mvpValue = value?.[index]?.[key];
+
+                                return (
+                                    <div key={`mvp-field-${key}`}>
+                                        <SidebarEditorField
+                                            field={mvpField}
+                                            fieldKey={fieldKey}
+                                            value={mvpValue}
+                                            storybookElement={storybookElement}
+                                            sdk={sdk}
+                                            onChange={(fK, value) => onChange(
+                                                fK, value, key, index,
+                                            )}/>
+                                    </div>
+                                );
+                            })}
+                            <hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}}/>
+                        </div>
+                    );
+                })}
+                <button
+                    className="button button--secondary"
+                    onClick={() => onChange(fieldKey, [...(value || []), {}])}>Neue
+                                Zeile
+                </button>
+            </div>
+        </details>
+    );
 };

package/src/SidebarEditor/Fields/MultiSelect.js

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

package/src/SidebarEditor/Fields/RemoteMultiSelect.js

@@ -1,41 +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>
-    );
+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>
+    );
 };