@vonaffenfels/slate-editor 1.1.29 → 1.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.29",
+    "version": "1.1.31",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "6f766a57107e33b358372874a69e2199dc14d8f6",
+    "gitHead": "29092565a5ae7277e00d388bf0daabb0b51cda3d",
     "publishConfig": {
         "access": "public"
     }

package/src/SidebarEditor/Fields/CloudinaryContentSelect.js

@@ -0,0 +1,90 @@
+import {Asset} from "@contentful/forma-36-react-components";
+import {AssetList} from "../AssetList";
+
+export const CloudinaryContentSelect = ({
+    value,
+    onChange,
+    multiple,
+    sdk,
+}) => {
+    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
+                                cloudinary
+                                assets={value}
+                                sdk={sdk}
+                                onChange={onChange}
+                                onAddClick={() => {
+                                    sdk.dialogs.openCurrentApp({
+                                        width: "fullWidth",
+                                        title: "Select Images",
+                                        shouldCloseOnOverlayClick: true,
+                                        shouldCloseOnEscapePress: true,
+                                        parameters: {
+                                            type: "cloudinary",
+                                            multiple: true,
+                                            portal: sdk?.entry?.fields?.portal?.getValue(),
+                                        },
+                                    }).then((data) => {
+                                        onChange([...value, ...(data?.assets || [])]);
+                                    });
+                                }}/>
+                        </div>
+                    </details>
+                )}
+                <button
+                    className="button"
+                    onClick={() => {
+                        sdk.dialogs.openCurrentApp({
+                            width: "fullWidth",
+                            title: "Select Images",
+                            shouldCloseOnOverlayClick: true,
+                            shouldCloseOnEscapePress: true,
+                            parameters: {
+                                type: "cloudinary",
+                                multiple: true,
+                                portal: sdk?.entry?.fields?.portal?.getValue(),
+                            },
+                        }).then((data) => {
+                            onChange(data?.assets);
+                        });
+                    }}
+                >Auswählen
+                </button>
+            </>
+        );
+    }
+
+    return (
+        <>
+            {!!value && <div className="mb-2"><Asset
+                cloudinary
+                sdk={sdk}
+                asset={value}
+                onDeleteClick={() => onChange(null)}/></div>}
+            <button
+                className="button"
+                onClick={() => {
+                    sdk.dialogs.openCurrentApp({
+                        width: "fullWidth",
+                        title: "Select Image",
+                        shouldCloseOnOverlayClick: true,
+                        shouldCloseOnEscapePress: true,
+                        parameters: {
+                            type: "cloudinary",
+                            portal: sdk?.entry?.fields?.portal?.getValue(),
+                        },
+                    }).then((data) => {
+                        onChange(data?.assets?.[0]);
+                    });
+                }}
+            >Auswählen
+            </button>
+        </>
+    );
+};

package/src/SidebarEditor/Fields/ColorPicker.js

@@ -0,0 +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,
+    };
+};

package/src/SidebarEditor/Fields/ContentfulContentSelect.js

@@ -0,0 +1,62 @@
+import {Asset} from "@contentful/forma-36-react-components";
+import {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/MVP.js

@@ -0,0 +1,68 @@
+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];
+
+                                value = value?.[index]?.[key];
+
+                                return (
+                                    <div key={`mvp-field-${key}`}>
+                                        <SidebarEditorField
+                                            field={mvpField}
+                                            fieldKey={fieldKey}
+                                            value={value}
+                                            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/StreamSelect.js

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

package/src/SidebarEditor/Fields/Textarea.js

@@ -0,0 +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";
+            }}/>
+    );
+};