@webiny/app-website-builder 6.4.12-beta.5 → 6.5.0-beta.1

package/inputRenderers/ContentEntryInput.js

@@ -0,0 +1,277 @@
+import react, { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { AutoComplete, Input, SegmentedControl, Select, Text } from "@webiny/admin-ui";
+import { RefSingleAutocompletePresenterFeature } from "@webiny/app-headless-cms/presentation/fieldRenderers/ref/autocomplete/single/feature.js";
+import { RefMultiAutocompletePresenterFeature } from "@webiny/app-headless-cms/presentation/fieldRenderers/ref/autocomplete/multi/feature.js";
+import { ObjectRowActions } from "./ObjectInput/ObjectRowActions.js";
+import { ObjectFieldHeader } from "./ObjectInput/ObjectFieldHeader.js";
+const EntryRow = ({ title, actions })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 40
+        },
+        className: "group flex items-center justify-between gap-xs rounded-md border border-neutral-dimmed-darker px-sm-extra bg-neutral-base"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-1 items-center min-w-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "truncate text-neutral-strong"
+    }, title)), actions ? /*#__PURE__*/ react.createElement("div", {
+        className: "hidden group-hover:flex items-center gap-xs shrink-0"
+    }, actions) : null);
+const ContentEntryInputRenderer = (props)=>{
+    const input = props.input;
+    if ("query" === input.mode) return /*#__PURE__*/ react.createElement(QueryInner, props);
+    return /*#__PURE__*/ react.createElement(ManualRenderer, props);
+};
+const ManualRenderer = (props)=>{
+    const input = props.input;
+    const parentContainer = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = parentContainer.createChildContainer();
+        if (input.list) RefMultiAutocompletePresenterFeature.register(child);
+        else RefSingleAutocompletePresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, input.list ? /*#__PURE__*/ react.createElement(MultiInner, props) : /*#__PURE__*/ react.createElement(SingleInner, props));
+};
+const SingleInner = observer(({ value, onChange, ...props })=>{
+    const input = props.input;
+    const { presenter } = useFeature(RefSingleAutocompletePresenterFeature);
+    const current = value ?? null;
+    useEffect(()=>{
+        presenter.init({
+            modelIds: input.models,
+            value: current
+        });
+    }, []);
+    const vm = presenter.vm;
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        label: input.label,
+        description: input.description,
+        loading: vm.loading,
+        value: vm.value,
+        options: vm.options,
+        onValueSearch: (query)=>presenter.search(query),
+        onValueChange: (selectedEntryId)=>{
+            if (!selectedEntryId) {
+                presenter.clear();
+                onChange(({ value })=>value.set(null));
+                return;
+            }
+            const ref = presenter.select(selectedEntryId);
+            onChange(({ value })=>value.set(ref));
+        },
+        onValueReset: ()=>{
+            presenter.clear();
+            onChange(({ value })=>value.set(null));
+        },
+        displayResetAction: vm.canReset
+    });
+});
+const MultiInner = observer(({ value, onChange, ...props })=>{
+    const input = props.input;
+    const { presenter } = useFeature(RefMultiAutocompletePresenterFeature);
+    const current = Array.isArray(value) ? value : [];
+    const [pickerKey, setPickerKey] = useState(0);
+    useEffect(()=>{
+        presenter.init({
+            modelIds: input.models,
+            values: current
+        });
+    }, []);
+    const vm = presenter.vm;
+    const labelFor = (entryId)=>vm.options.find((option)=>option.value === entryId)?.label ?? entryId;
+    const setSelection = (entryIds)=>{
+        const refs = presenter.select(entryIds);
+        onChange(({ value })=>value.set(refs.length > 0 ? refs : null));
+    };
+    const moveItem = (from, to)=>{
+        if (to < 0 || to >= vm.values.length) return;
+        const next = [
+            ...vm.values
+        ];
+        [next[from], next[to]] = [
+            next[to],
+            next[from]
+        ];
+        setSelection(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(AutoComplete, {
+        key: pickerKey,
+        label: input.label,
+        description: input.description,
+        loading: vm.loading,
+        value: void 0,
+        options: vm.options.filter((option)=>!vm.values.includes(option.value)),
+        onValueSearch: (query)=>presenter.search(query),
+        onValueChange: (entryId)=>{
+            if (entryId && !vm.values.includes(entryId)) {
+                setSelection([
+                    ...vm.values,
+                    entryId
+                ]);
+                setPickerKey((key)=>key + 1);
+            }
+        }
+    }), vm.values.length > 0 ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs"
+    }, vm.values.map((entryId, index)=>/*#__PURE__*/ react.createElement(EntryRow, {
+            key: entryId,
+            title: labelFor(entryId),
+            actions: /*#__PURE__*/ react.createElement(ObjectRowActions, {
+                onMoveUp: ()=>moveItem(index, index - 1),
+                onMoveDown: ()=>moveItem(index, index + 1),
+                onRemove: ()=>setSelection(vm.values.filter((id)=>id !== entryId)),
+                canMoveUp: index > 0,
+                canMoveDown: index < vm.values.length - 1
+            })
+        }))) : /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "No entries selected yet."));
+});
+const SORT_DIRECTION_OPTIONS = [
+    {
+        label: "Ascending",
+        value: "asc"
+    },
+    {
+        label: "Descending",
+        value: "desc"
+    }
+];
+const QueryInner = ({ value, onChange, ...props })=>{
+    const input = props.input;
+    const config = input.query ?? {};
+    const modelId = input.models[0];
+    const current = value ?? {
+        modelId
+    };
+    useEffect(()=>{
+        if (!current.modelId && modelId) onChange(({ value: v })=>{
+            v.set({
+                ...current,
+                modelId
+            });
+        });
+    }, [
+        modelId
+    ]);
+    const sortFields = (config.sort?.fields ?? []).map((entry)=>"string" == typeof entry ? {
+            field: entry,
+            label: entry
+        } : {
+            field: entry.field,
+            label: entry.label ?? entry.field
+        });
+    const singleSortField = 1 === sortFields.length ? sortFields[0] : null;
+    const [searchText, setSearchText] = useState(current.search ?? "");
+    const update = (patch)=>{
+        onChange(({ value })=>{
+            value.set({
+                ...current,
+                modelId,
+                ...patch
+            });
+        });
+    };
+    const maxLimit = config.limit?.max;
+    const [limitText, setLimitText] = useState(String(current.limit ?? config.limit?.default ?? ""));
+    const limitError = (()=>{
+        if ("" === limitText.trim()) return;
+        const parsed = Number(limitText);
+        if (!Number.isInteger(parsed)) return "Enter a whole number.";
+        if (parsed < 1) return "Must be at least 1.";
+        if (maxLimit && parsed > maxLimit) return `Maximum is ${maxLimit}.`;
+    })();
+    const onLimitChange = (raw)=>{
+        setLimitText(raw);
+        const parsed = Number(raw);
+        if ("" !== raw.trim() && Number.isInteger(parsed) && parsed >= 1 && (!maxLimit || parsed <= maxLimit)) update({
+            limit: parsed
+        });
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, input.label ? /*#__PURE__*/ react.createElement(ObjectFieldHeader, {
+        label: input.label,
+        description: input.description
+    }) : null, singleSortField ? /*#__PURE__*/ react.createElement(SegmentedControl, {
+        label: `Sort by ${singleSortField.label}`,
+        value: current.sort?.order ?? "asc",
+        items: SORT_DIRECTION_OPTIONS,
+        fullWidth: true,
+        onChange: (order)=>{
+            update({
+                sort: {
+                    field: singleSortField.field,
+                    order: order ?? "asc"
+                }
+            });
+        }
+    }) : sortFields.length > 1 ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
+        label: "Sort by",
+        value: current.sort?.field,
+        options: sortFields.map((field)=>({
+                label: field.label,
+                value: field.field
+            })),
+        displayResetAction: true,
+        onChange: (field)=>{
+            update({
+                sort: field ? {
+                    field,
+                    order: current.sort?.order ?? "asc"
+                } : void 0
+            });
+        }
+    }), current.sort?.field ? /*#__PURE__*/ react.createElement(SegmentedControl, {
+        label: "Direction",
+        value: current.sort?.order ?? "asc",
+        items: SORT_DIRECTION_OPTIONS,
+        fullWidth: true,
+        onChange: (order)=>{
+            update({
+                sort: {
+                    field: current.sort.field,
+                    order: order ?? "asc"
+                }
+            });
+        }
+    }) : null) : null, config.limit ? /*#__PURE__*/ react.createElement(Input, {
+        type: "number",
+        size: "md",
+        variant: "secondary",
+        label: "Limit",
+        description: maxLimit ? `Up to ${maxLimit}.` : void 0,
+        value: limitText,
+        validation: limitError ? {
+            isValid: false,
+            message: limitError
+        } : void 0,
+        onChange: onLimitChange
+    }) : null, config.search ? /*#__PURE__*/ react.createElement(Input, {
+        size: "md",
+        variant: "secondary",
+        label: "Search",
+        placeholder: "Search entries…",
+        value: searchText,
+        onChange: setSearchText,
+        onBlur: (e)=>update({
+                search: e.currentTarget.value
+            }),
+        onEnter: (e)=>update({
+                search: e.currentTarget.value
+            })
+    }) : null);
+};
+export { ContentEntryInputRenderer };
+
+//# sourceMappingURL=ContentEntryInput.js.map

package/inputRenderers/ContentEntryInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ContentEntryInput.js","sources":["../../src/inputRenderers/ContentEntryInput.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { AutoComplete, Select, Input, SegmentedControl, Text } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport type {\n    ContentEntryInput,\n    ContentEntryReference,\n    ContentEntryQueryValue\n} from \"@webiny/website-builder-sdk\";\nimport { RefSingleAutocompletePresenterFeature } from \"@webiny/app-headless-cms/presentation/fieldRenderers/ref/autocomplete/single/feature.js\";\nimport { RefMultiAutocompletePresenterFeature } from \"@webiny/app-headless-cms/presentation/fieldRenderers/ref/autocomplete/multi/feature.js\";\nimport { ObjectRowActions } from \"~/inputRenderers/ObjectInput/ObjectRowActions.js\";\nimport { ObjectFieldHeader } from \"~/inputRenderers/ObjectInput/ObjectFieldHeader.js\";\n\ninterface EntryRowProps {\n    title: React.ReactNode;\n    actions?: React.ReactNode;\n}\n\n/**\n * A non-interactive row for a selected entry: a truncating title with\n * hover-revealed actions. Mirrors the object-list row look, without click-to-open.\n */\nconst EntryRow = ({ title, actions }: EntryRowProps) => (\n    <div\n        style={{ height: 40 }}\n        className={\n            \"group flex items-center justify-between gap-xs rounded-md border border-neutral-dimmed-darker px-sm-extra bg-neutral-base\"\n        }\n    >\n        <div className={\"flex flex-1 items-center min-w-0\"}>\n            <Text size={\"sm\"} className={\"truncate text-neutral-strong\"}>\n                {title}\n            </Text>\n        </div>\n        {actions ? (\n            <div className={\"hidden group-hover:flex items-center gap-xs shrink-0\"}>{actions}</div>\n        ) : null}\n    </div>\n);\n\n/**\n * Editor sidebar renderer for the `contentEntry` input. Supports two modes:\n *\n * - \"manual\" (default): the editor hand-picks one (single) or several (list)\n *   CMS entries from the input's author-fixed model(s), stored as references\n *   (`{ id, modelId }`). Reuses the Headless CMS reference autocomplete.\n * - \"query\": the editor configures a dynamic query (sort / limit / search)\n *   within the bounds the component author declared on `input.query`.\n */\nexport const ContentEntryInputRenderer = (props: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n\n    if (input.mode === \"query\") {\n        return <QueryInner {...props} />;\n    }\n\n    return <ManualRenderer {...props} />;\n};\n\n// --- Manual mode -----------------------------------------------------------\n\nconst ManualRenderer = (props: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n    const parentContainer = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = parentContainer.createChildContainer();\n        if (input.list) {\n            RefMultiAutocompletePresenterFeature.register(child);\n        } else {\n            RefSingleAutocompletePresenterFeature.register(child);\n        }\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            {input.list ? <MultiInner {...props} /> : <SingleInner {...props} />}\n        </DiContainerProvider>\n    );\n};\n\nconst SingleInner = observer(({ value, onChange, ...props }: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n    const { presenter } = useFeature(RefSingleAutocompletePresenterFeature);\n\n    const current = (value as ContentEntryReference | null | undefined) ?? null;\n\n    useEffect(() => {\n        presenter.init({ modelIds: input.models, value: current });\n    }, []);\n\n    const vm = presenter.vm;\n\n    return (\n        <AutoComplete\n            label={input.label}\n            description={input.description}\n            loading={vm.loading}\n            value={vm.value}\n            options={vm.options}\n            onValueSearch={query => presenter.search(query)}\n            onValueChange={selectedEntryId => {\n                if (!selectedEntryId) {\n                    presenter.clear();\n                    onChange(({ value }) => value.set(null));\n                    return;\n                }\n                const ref = presenter.select(selectedEntryId);\n                onChange(({ value }) => value.set(ref));\n            }}\n            onValueReset={() => {\n                presenter.clear();\n                onChange(({ value }) => value.set(null));\n            }}\n            displayResetAction={vm.canReset}\n        />\n    );\n});\n\nconst MultiInner = observer(({ value, onChange, ...props }: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n    const { presenter } = useFeature(RefMultiAutocompletePresenterFeature);\n\n    const current: ContentEntryReference[] = Array.isArray(value) ? value : [];\n    // Bumping this remounts the AutoComplete, clearing its search text after a pick.\n    const [pickerKey, setPickerKey] = useState(0);\n\n    useEffect(() => {\n        presenter.init({ modelIds: input.models, values: current });\n    }, []);\n\n    const vm = presenter.vm;\n    const labelFor = (entryId: string) =>\n        vm.options.find(option => option.value === entryId)?.label ?? entryId;\n\n    const setSelection = (entryIds: string[]) => {\n        const refs = presenter.select(entryIds);\n        onChange(({ value }) => value.set(refs.length > 0 ? refs : null));\n    };\n\n    const moveItem = (from: number, to: number) => {\n        if (to < 0 || to >= vm.values.length) {\n            return;\n        }\n        const next = [...vm.values];\n        [next[from], next[to]] = [next[to], next[from]];\n        setSelection(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            {/* Picker: a single autocomplete that adds the chosen entry to the list below,\n                then remounts (via pickerKey) so its search input clears. */}\n            <AutoComplete\n                key={pickerKey}\n                label={input.label}\n                description={input.description}\n                loading={vm.loading}\n                value={undefined}\n                options={vm.options.filter(option => !vm.values.includes(option.value))}\n                onValueSearch={query => presenter.search(query)}\n                onValueChange={entryId => {\n                    if (entryId && !vm.values.includes(entryId)) {\n                        setSelection([...vm.values, entryId]);\n                        setPickerKey(key => key + 1);\n                    }\n                }}\n            />\n            {/* Selected entries as reorderable rows: a truncating title plus hover\n                actions to move up / down / remove. */}\n            {vm.values.length > 0 ? (\n                <div className={\"flex flex-col gap-xs\"}>\n                    {vm.values.map((entryId, index) => (\n                        <EntryRow\n                            key={entryId}\n                            title={labelFor(entryId)}\n                            actions={\n                                <ObjectRowActions\n                                    onMoveUp={() => moveItem(index, index - 1)}\n                                    onMoveDown={() => moveItem(index, index + 1)}\n                                    onRemove={() =>\n                                        setSelection(vm.values.filter(id => id !== entryId))\n                                    }\n                                    canMoveUp={index > 0}\n                                    canMoveDown={index < vm.values.length - 1}\n                                />\n                            }\n                        />\n                    ))}\n                </div>\n            ) : (\n                <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                    No entries selected yet.\n                </Text>\n            )}\n        </div>\n    );\n});\n\n// --- Query mode ------------------------------------------------------------\n\nconst SORT_DIRECTION_OPTIONS = [\n    { label: \"Ascending\", value: \"asc\" },\n    { label: \"Descending\", value: \"desc\" }\n];\n\nconst QueryInner = ({ value, onChange, ...props }: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n    const config = input.query ?? {};\n    const modelId = input.models[0];\n    const current = (value as ContentEntryQueryValue | undefined) ?? { modelId };\n\n    // Ensure modelId is always stored on the value so the frontend SDK can\n    // resolve the query without component manifests.\n    useEffect(() => {\n        if (!current.modelId && modelId) {\n            onChange(({ value: v }) => {\n                v.set({ ...current, modelId });\n            });\n        }\n    }, [modelId]);\n\n    const sortFields = (config.sort?.fields ?? []).map(entry =>\n        typeof entry === \"string\"\n            ? { field: entry, label: entry }\n            : { field: entry.field, label: entry.label ?? entry.field }\n    );\n    const singleSortField = sortFields.length === 1 ? sortFields[0] : null;\n    const [searchText, setSearchText] = useState(current.search ?? \"\");\n\n    const update = (patch: Partial<ContentEntryQueryValue>) => {\n        onChange(({ value }) => {\n            value.set({ ...current, modelId, ...patch });\n        });\n    };\n\n    // Keep the field showing what the editor typed; surface an error when it's out\n    // of range rather than silently rewriting the value.\n    const maxLimit = config.limit?.max;\n    const [limitText, setLimitText] = useState(\n        String(current.limit ?? config.limit?.default ?? \"\")\n    );\n\n    const limitError = (() => {\n        if (limitText.trim() === \"\") {\n            return undefined;\n        }\n        const parsed = Number(limitText);\n        if (!Number.isInteger(parsed)) {\n            return \"Enter a whole number.\";\n        }\n        if (parsed < 1) {\n            return \"Must be at least 1.\";\n        }\n        if (maxLimit && parsed > maxLimit) {\n            return `Maximum is ${maxLimit}.`;\n        }\n        return undefined;\n    })();\n\n    const onLimitChange = (raw: string) => {\n        setLimitText(raw);\n        const parsed = Number(raw);\n        // Only commit valid values — an out-of-range entry stays visible with the\n        // error until it's corrected.\n        if (\n            raw.trim() !== \"\" &&\n            Number.isInteger(parsed) &&\n            parsed >= 1 &&\n            (!maxLimit || parsed <= maxLimit)\n        ) {\n            update({ limit: parsed });\n        }\n    };\n\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {input.label ? (\n                <ObjectFieldHeader label={input.label} description={input.description} />\n            ) : null}\n            {singleSortField ? (\n                // Only one sortable field → skip the field picker; just choose direction.\n                <SegmentedControl\n                    label={`Sort by ${singleSortField.label}`}\n                    value={current.sort?.order ?? \"asc\"}\n                    items={SORT_DIRECTION_OPTIONS}\n                    fullWidth\n                    onChange={order => {\n                        update({\n                            sort: {\n                                field: singleSortField.field,\n                                order: (order as \"asc\" | \"desc\") ?? \"asc\"\n                            }\n                        });\n                    }}\n                />\n            ) : sortFields.length > 1 ? (\n                <>\n                    <Select\n                        size={\"md\"}\n                        variant={\"secondary\"}\n                        label={\"Sort by\"}\n                        value={current.sort?.field}\n                        options={sortFields.map(field => ({\n                            label: field.label,\n                            value: field.field\n                        }))}\n                        displayResetAction\n                        onChange={field => {\n                            update({\n                                sort: field\n                                    ? { field, order: current.sort?.order ?? \"asc\" }\n                                    : undefined\n                            });\n                        }}\n                    />\n                    {current.sort?.field ? (\n                        <SegmentedControl\n                            label={\"Direction\"}\n                            value={current.sort?.order ?? \"asc\"}\n                            items={SORT_DIRECTION_OPTIONS}\n                            fullWidth\n                            onChange={order => {\n                                update({\n                                    sort: {\n                                        field: current.sort!.field,\n                                        order: (order as \"asc\" | \"desc\") ?? \"asc\"\n                                    }\n                                });\n                            }}\n                        />\n                    ) : null}\n                </>\n            ) : null}\n\n            {config.limit ? (\n                <Input\n                    type={\"number\"}\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    label={\"Limit\"}\n                    description={maxLimit ? `Up to ${maxLimit}.` : undefined}\n                    value={limitText}\n                    validation={limitError ? { isValid: false, message: limitError } : undefined}\n                    onChange={onLimitChange}\n                />\n            ) : null}\n\n            {config.search ? (\n                <Input\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    label={\"Search\"}\n                    placeholder={\"Search entries…\"}\n                    value={searchText}\n                    onChange={setSearchText}\n                    onBlur={e => update({ search: e.currentTarget.value })}\n                    onEnter={e => update({ search: e.currentTarget.value })}\n                />\n            ) : null}\n        </div>\n    );\n};\n"],"names":["EntryRow","title","actions","Text","ContentEntryInputRenderer","props","input","QueryInner","ManualRenderer","parentContainer","useContainer","scopedContainer","useMemo","child","RefMultiAutocompletePresenterFeature","RefSingleAutocompletePresenterFeature","DiContainerProvider","MultiInner","SingleInner","observer","value","onChange","presenter","useFeature","current","useEffect","vm","AutoComplete","query","selectedEntryId","ref","Array","pickerKey","setPickerKey","useState","labelFor","entryId","option","setSelection","entryIds","refs","moveItem","from","to","next","undefined","key","index","ObjectRowActions","id","SORT_DIRECTION_OPTIONS","config","modelId","v","sortFields","entry","singleSortField","searchText","setSearchText","update","patch","maxLimit","limitText","setLimitText","String","limitError","parsed","Number","onLimitChange","raw","ObjectFieldHeader","SegmentedControl","order","Select","field","Input","e"],"mappings":"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"}

package/inputRenderers/FileInput.js

@@ -1,15 +1,41 @@
-import react from "react";
-import { FilePicker } from "@webiny/admin-ui";
+import react, { useState } from "react";
+import { FilePicker, ImageEditor, RichItemPreview, getCroppedImageRenderStyles } from "@webiny/admin-ui";
 import { FileManager } from "@webiny/app-admin";
 import { useBreakpoint } from "../BaseEditor/hooks/useBreakpoint.js";
+import { getAssetCropParam, normalizeToAsset } from "@webiny/website-builder-sdk";
 import { fileManagerItemToValue } from "../shared/fileManagerItemToValue.js";
+const isEditableImage = (asset)=>!!asset?.src && "string" == typeof asset.mimeType && asset.mimeType.startsWith("image/") && "image/svg+xml" !== asset.mimeType;
+const hasImageEdit = (image)=>{
+    if (!image?.width || !image?.height) return false;
+    const c = image.crop;
+    const fullCrop = !c || 0 === c.top && 0 === c.left && 0 === c.bottom && 0 === c.right;
+    const fp = image.focalPoint;
+    const centeredFocal = !fp || 0.5 === fp.x && 0.5 === fp.y;
+    return !fullCrop || !centeredFocal;
+};
+const toEditorValue = (image)=>{
+    if (!image) return;
+    return {
+        crop: image.crop,
+        hotspot: image.focalPoint ? {
+            x: image.focalPoint.x,
+            y: image.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: image.alt,
+        caption: image.caption
+    };
+};
 const FileInputRenderer = ({ value, onChange, label, ...props })=>{
     const input = props.input;
     const { isBaseBreakpoint } = useBreakpoint();
+    const [editorOpen, setEditorOpen] = useState(false);
+    const asset = normalizeToAsset(value) ?? void 0;
+    const editable = isEditableImage(asset);
     const onFileChange = (file)=>{
         onChange(({ value })=>{
-            const newValue = fileManagerItemToValue(file);
-            value.set(newValue);
+            value.set(fileManagerItemToValue(file));
         });
     };
     const onRemove = ()=>{
@@ -18,18 +44,78 @@ const FileInputRenderer = ({ value, onChange, label, ...props })=>{
             else value.set(null);
         });
     };
+    const onSaveEdit = (edit)=>{
+        onChange(({ value })=>{
+            if (!asset) return;
+            const image = {
+                width: asset.image?.width,
+                height: asset.image?.height,
+                crop: edit.crop,
+                focalPoint: edit.hotspot ? {
+                    x: edit.hotspot.x,
+                    y: edit.hotspot.y
+                } : void 0,
+                alt: edit.alt,
+                caption: edit.caption
+            };
+            const updated = {
+                ...asset,
+                image
+            };
+            const cropParam = getAssetCropParam(updated);
+            if (cropParam) {
+                const sep = asset.src.includes("?") ? "&" : "?";
+                updated.url = `${asset.src}${sep}crop=${cropParam}`;
+            } else updated.url = asset.src;
+            value.set(updated);
+        });
+    };
     return /*#__PURE__*/ react.createElement(FileManager, {
         accept: input.allowedFileTypes,
         onChange: onFileChange,
-        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FilePicker, {
                 variant: "secondary",
                 label: label,
                 description: input.description,
                 type: "compact",
-                value: value,
+                value: asset?.src,
+                renderFilePreview: editable && asset?.src && hasImageEdit(asset.image) ? (previewProps)=>/*#__PURE__*/ react.createElement(RichItemPreview, {
+                        ...previewProps,
+                        renderImage: ({ name })=>{
+                            const { wrapper, image } = getCroppedImageRenderStyles(asset.image?.width ?? 0, asset.image?.height ?? 0, asset.image?.crop, asset.image?.focalPoint ? {
+                                x: asset.image.focalPoint.x,
+                                y: asset.image.focalPoint.y,
+                                width: 1,
+                                height: 1
+                            } : void 0, {
+                                boxWidth: 1,
+                                boxHeight: 1,
+                                fit: "cover"
+                            });
+                            return /*#__PURE__*/ react.createElement("div", {
+                                style: wrapper
+                            }, /*#__PURE__*/ react.createElement("img", {
+                                src: asset.src,
+                                alt: name,
+                                draggable: false,
+                                style: image
+                            }));
+                        }
+                    }) : void 0,
                 onSelectItem: ()=>showFileManager(),
-                onRemoveItem: onRemove
-            })
+                onRemoveItem: onRemove,
+                onEditItem: editable ? ()=>setEditorOpen(true) : void 0
+            }), editable ? /*#__PURE__*/ react.createElement(ImageEditor, {
+                open: editorOpen,
+                onClose: ()=>setEditorOpen(false),
+                image: {
+                    src: asset.src,
+                    width: asset.image?.width ?? 0,
+                    height: asset.image?.height ?? 0
+                },
+                value: toEditorValue(asset.image),
+                onSave: onSaveEdit
+            }) : null)
     });
 };
 export { FileInputRenderer };

package/inputRenderers/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/FileInput.js","sources":["../../src/inputRenderers/FileInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            const newValue = fileManagerItemToValue(file);\n            value.set(newValue);\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    variant={\"secondary\"}\n                    label={label}\n                    description={input.description}\n                    type=\"compact\"\n                    value={value}\n                    onSelectItem={() => showFileManager()}\n                    onRemoveItem={onRemove}\n                />\n            )}\n        />\n    );\n};\n"],"names":["FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","useBreakpoint","onFileChange","file","newValue","fileManagerItemToValue","onRemove","undefined","FileManager","showFileManager","FilePicker"],"mappings":";;;;;AAQO,MAAMA,oBAAoB,CAAC,EAC9BC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACL,GAAGC,OACqB;IACxB,MAAMC,QAAQD,MAAM,KAAK;IACzB,MAAM,EAAEE,gBAAgB,EAAE,GAAGC;IAE7B,MAAMC,eAAe,CAACC;QAClBP,SAAS,CAAC,EAAED,KAAK,EAAE;YACf,MAAMS,WAAWC,uBAAuBF;YACxCR,MAAM,GAAG,CAACS;QACd;IACJ;IAEA,MAAME,WAAW;QACbV,SAAS,CAAC,EAAED,KAAK,EAAE;YACf,IAAIK,kBACAL,MAAM,GAAG,CAACY;iBAEVZ,MAAM,GAAG,CAAC;QAElB;IACJ;IAEA,OAAO,WAAP,GACI,oBAACa,aAAWA;QACR,QAAQT,MAAM,gBAAgB;QAC9B,UAAUG;QACV,QAAQ,CAAC,EAAEO,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,OAAOb;gBACP,aAAaE,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOJ;gBACP,cAAc,IAAMc;gBACpB,cAAcH;;;AAKlC"}
+{"version":3,"file":"inputRenderers/FileInput.js","sources":["../../src/inputRenderers/FileInput.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n    FilePicker,\n    ImageEditor,\n    RichItemPreview,\n    getCroppedImageRenderStyles,\n    type ImageEditorValue\n} from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport {\n    normalizeToAsset,\n    getAssetCropParam,\n    type Asset,\n    type AssetImage\n} from \"@webiny/website-builder-sdk\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nconst isEditableImage = (asset: Asset | undefined): asset is Asset => {\n    return (\n        !!asset?.src &&\n        typeof asset.mimeType === \"string\" &&\n        asset.mimeType.startsWith(\"image/\") &&\n        asset.mimeType !== \"image/svg+xml\"\n    );\n};\n\n/** True when the image carries a non-trivial crop or focal point worth previewing. */\nconst hasImageEdit = (image: AssetImage | undefined): boolean => {\n    if (!image?.width || !image?.height) {\n        return false;\n    }\n    const c = image.crop;\n    const fullCrop = !c || (c.top === 0 && c.left === 0 && c.bottom === 0 && c.right === 0);\n    const fp = image.focalPoint;\n    const centeredFocal = !fp || (fp.x === 0.5 && fp.y === 0.5);\n    return !fullCrop || !centeredFocal;\n};\n\n/** Map the stored asset image into the shared `ImageEditor` value (focalPoint → hotspot). */\nconst toEditorValue = (image: AssetImage | undefined): ImageEditorValue | undefined => {\n    if (!image) {\n        return undefined;\n    }\n    return {\n        crop: image.crop,\n        hotspot: image.focalPoint\n            ? { x: image.focalPoint.x, y: image.focalPoint.y, width: 1, height: 1 }\n            : undefined,\n        alt: image.alt,\n        caption: image.caption\n    };\n};\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n    const [editorOpen, setEditorOpen] = useState(false);\n\n    const asset = normalizeToAsset(value) ?? undefined;\n    const editable = isEditableImage(asset);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            value.set(fileManagerItemToValue(file));\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    // Save the per-usage crop / focal point / alt override onto the element value,\n    // writing the unified asset shape (hotspot → focalPoint).\n    const onSaveEdit = (edit: ImageEditorValue) => {\n        onChange(({ value }) => {\n            if (!asset) {\n                return;\n            }\n            const image: AssetImage = {\n                width: asset.image?.width,\n                height: asset.image?.height,\n                crop: edit.crop,\n                focalPoint: edit.hotspot ? { x: edit.hotspot.x, y: edit.hotspot.y } : undefined,\n                alt: edit.alt,\n                caption: edit.caption\n            };\n            const updated = { ...asset, image };\n            const cropParam = getAssetCropParam(updated);\n            if (cropParam) {\n                const sep = asset.src.includes(\"?\") ? \"&\" : \"?\";\n                updated.url = `${asset.src}${sep}crop=${cropParam}`;\n            } else {\n                updated.url = asset.src;\n            }\n            value.set(updated);\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        variant={\"secondary\"}\n                        label={label}\n                        description={input.description}\n                        type=\"compact\"\n                        value={asset?.src}\n                        // Reflect the per-usage crop + focal point in the thumbnail.\n                        renderFilePreview={\n                            editable && asset?.src && hasImageEdit(asset.image)\n                                ? previewProps => (\n                                      <RichItemPreview\n                                          {...previewProps}\n                                          renderImage={({ name }) => {\n                                              const { wrapper, image } =\n                                                  getCroppedImageRenderStyles(\n                                                      asset.image?.width ?? 0,\n                                                      asset.image?.height ?? 0,\n                                                      asset.image?.crop,\n                                                      asset.image?.focalPoint\n                                                          ? {\n                                                                x: asset.image.focalPoint.x,\n                                                                y: asset.image.focalPoint.y,\n                                                                width: 1,\n                                                                height: 1\n                                                            }\n                                                          : undefined,\n                                                      { boxWidth: 1, boxHeight: 1, fit: \"cover\" }\n                                                  );\n                                              return (\n                                                  <div style={wrapper}>\n                                                      <img\n                                                          src={asset.src as string}\n                                                          alt={name}\n                                                          draggable={false}\n                                                          style={image}\n                                                      />\n                                                  </div>\n                                              );\n                                          }}\n                                      />\n                                  )\n                                : undefined\n                        }\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                        // The \"Edit\" (pencil) action edits the image (crop / focal\n                        // point / alt). Replacing the file is done by clicking the\n                        // preview. For non-images there is nothing to edit, so the\n                        // pencil is hidden.\n                        onEditItem={editable ? () => setEditorOpen(true) : undefined}\n                    />\n                    {editable ? (\n                        <ImageEditor\n                            open={editorOpen}\n                            onClose={() => setEditorOpen(false)}\n                            image={{\n                                src: asset.src,\n                                width: asset.image?.width ?? 0,\n                                height: asset.image?.height ?? 0\n                            }}\n                            value={toEditorValue(asset.image)}\n                            onSave={onSaveEdit}\n                        />\n                    ) : null}\n                </>\n            )}\n        />\n    );\n};\n"],"names":["isEditableImage","asset","hasImageEdit","image","c","fullCrop","fp","centeredFocal","toEditorValue","undefined","FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","useBreakpoint","editorOpen","setEditorOpen","useState","normalizeToAsset","editable","onFileChange","file","fileManagerItemToValue","onRemove","onSaveEdit","edit","updated","cropParam","getAssetCropParam","sep","FileManager","showFileManager","FilePicker","previewProps","RichItemPreview","name","wrapper","getCroppedImageRenderStyles","ImageEditor"],"mappings":"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"}

package/inputRenderers/LexicalInput/LexicalEditor.d.ts

@@ -2,7 +2,10 @@ import React from "react";
 import { LexicalEditor as BaseLexicalEditor } from "@webiny/app-admin";
 import "./wbStaticToolbar.css";
 export type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, "theme">;
+declare const ExpandedLexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
+declare const CompactLexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
 export declare const LexicalEditor: {
-    Expanded: (props: LexicalEditorProps) => React.JSX.Element;
-    Compact: (props: LexicalEditorProps) => React.JSX.Element;
+    Expanded: typeof ExpandedLexicalEditor;
+    Compact: typeof CompactLexicalEditor;
 };
+export {};

package/inputRenderers/LexicalInput/LexicalEditor.js

@@ -6,18 +6,22 @@ import { useWebsiteBuilderTheme } from "../../BaseEditor/components/index.js";
 import "./wbStaticToolbar.css";
 const placeholderStyles = {
     position: "absolute",
-    top: 40,
-    left: 25
+    top: 0,
+    left: 0,
+    padding: "8px 12px",
+    marginTop: 0,
+    color: "var(--text-color-neutral-muted)"
 };
 const contentEditableStyles = {
     minHeight: 200,
     display: "block",
-    padding: 10
+    padding: "8px 12px"
 };
 const styles = {
-    backgroundColor: "#fff",
-    border: "1px solid #e1e1e1",
-    padding: "10px 14px",
+    backgroundColor: "var(--color-neutral-base)",
+    border: "1px solid var(--border-color-neutral-muted)",
+    borderTop: "none",
+    borderRadius: "0 0 var(--radius-md) var(--radius-md)",
     minHeight: 200,
     maxHeight: 350,
     fontFamily: "var(--wb-theme-font-family)"

package/inputRenderers/LexicalInput/LexicalEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/LexicalInput/LexicalEditor.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditor as BaseLexicalEditor, AdminConfig } from \"@webiny/app-admin\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { createLexicalTokens } from \"@webiny/lexical-theme/createLexicalEditorTokens.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport \"./wbStaticToolbar.css\";\nimport { CompositionScope } from \"@webiny/app-admin\";\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350,\n    fontFamily: \"var(--wb-theme-font-family)\"\n};\n\nconst lexicalTokens = createLexicalTokens(\"wb-lx-\");\n\nexport type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, \"theme\">;\n\nconst { useAdminConfig } = AdminConfig;\n\nconst LexicalEditorComponent = (props: LexicalEditorProps) => {\n    const { theme } = useWebsiteBuilderTheme();\n    const { lexicalTheme } = useAdminConfig();\n\n    const editorTheme: EditorTheme = {\n        colors: theme?.colors ?? [],\n        typography: theme?.typography ?? {},\n        fontSizes: theme?.fontSizes ?? [],\n        tokens: lexicalTokens,\n        allowCustomColors: theme?.allowCustomColors ?? lexicalTheme.allowCustomColors\n    };\n\n    return (\n        <BaseLexicalEditor\n            {...props}\n            staticToolbar={<StaticToolbar className={\"wb-static-toolbar\"} />}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n            theme={editorTheme}\n        />\n    );\n};\n\nconst ExpandedLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nconst CompactLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nexport const LexicalEditor = {\n    Expanded: ExpandedLexicalEditor,\n    Compact: CompactLexicalEditor\n};\n"],"names":["placeholderStyles","contentEditableStyles","styles","lexicalTokens","createLexicalTokens","useAdminConfig","AdminConfig","LexicalEditorComponent","props","theme","useWebsiteBuilderTheme","lexicalTheme","editorTheme","BaseLexicalEditor","StaticToolbar","ExpandedLexicalEditor","CompositionScope","CompactLexicalEditor","LexicalEditor"],"mappings":";;;;;;AASA,MAAMA,oBAAyC;IAAE,UAAU;IAAY,KAAK;IAAI,MAAM;AAAG;AAEzF,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,WAAW;IACX,YAAY;AAChB;AAEA,MAAMC,gBAAgBC,oBAAoB;AAI1C,MAAM,EAAEC,gBAAAA,cAAc,EAAE,GAAGC;AAE3B,MAAMC,yBAAyB,CAACC;IAC5B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,MAAMO,cAA2B;QAC7B,QAAQH,OAAO,UAAU,EAAE;QAC3B,YAAYA,OAAO,cAAc,CAAC;QAClC,WAAWA,OAAO,aAAa,EAAE;QACjC,QAAQN;QACR,mBAAmBM,OAAO,qBAAqBE,aAAa,iBAAiB;IACjF;IAEA,OAAO,WAAP,GACI,oBAACE,eAAiBA;QACb,GAAGL,KAAK;QACT,6BAAe,oBAACM,eAAaA;YAAC,WAAW;;QACzC,KAAK;QACL,aAAaN,OAAO,eAAe;QACnC,mBAAmBR;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOU;;AAGnB;AAEA,MAAMG,wBAAwB,CAACP,QACpB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKxC,MAAMS,uBAAuB,CAACT,QACnB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKjC,MAAMU,8BAAgB;IACzB,UAAUH;IACV,SAASE;AACb"}
+{"version":3,"file":"inputRenderers/LexicalInput/LexicalEditor.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditor as BaseLexicalEditor, AdminConfig } from \"@webiny/app-admin\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { createLexicalTokens } from \"@webiny/lexical-theme/createLexicalEditorTokens.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport \"./wbStaticToolbar.css\";\nimport { CompositionScope } from \"@webiny/app-admin\";\n\n// Overlay the contentEditable: same origin + same padding as `contentEditableStyles`, and\n// neutralize the Placeholder component's default -20px margin. This makes the placeholder's\n// first line land exactly on the editor's text start.\nconst placeholderStyles: React.CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    padding: \"8px 12px\",\n    marginTop: 0,\n    // Font size/family come from the paragraph typography class (applied by RichTextEditor);\n    // keep the placeholder muted.\n    color: \"var(--text-color-neutral-muted)\"\n};\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: \"8px 12px\"\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"var(--color-neutral-base)\",\n    border: \"1px solid var(--border-color-neutral-muted)\",\n    // The static toolbar carries the top border; the body drops it and rounds only the\n    // bottom corners so the two read as one seamless rounded box (matches Figma).\n    borderTop: \"none\",\n    borderRadius: \"0 0 var(--radius-md) var(--radius-md)\",\n    // Padding lives on the contentEditable only (avoids doubled inset).\n    minHeight: 200,\n    maxHeight: 350,\n    fontFamily: \"var(--wb-theme-font-family)\"\n};\n\nconst lexicalTokens = createLexicalTokens(\"wb-lx-\");\n\nexport type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, \"theme\">;\n\nconst { useAdminConfig } = AdminConfig;\n\nconst LexicalEditorComponent = (props: LexicalEditorProps) => {\n    const { theme } = useWebsiteBuilderTheme();\n    const { lexicalTheme } = useAdminConfig();\n\n    const editorTheme: EditorTheme = {\n        colors: theme?.colors ?? [],\n        typography: theme?.typography ?? {},\n        fontSizes: theme?.fontSizes ?? [],\n        tokens: lexicalTokens,\n        allowCustomColors: theme?.allowCustomColors ?? lexicalTheme.allowCustomColors\n    };\n\n    return (\n        <BaseLexicalEditor\n            {...props}\n            staticToolbar={<StaticToolbar className={\"wb-static-toolbar\"} />}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n            theme={editorTheme}\n        />\n    );\n};\n\nconst ExpandedLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nconst CompactLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nexport const LexicalEditor = {\n    Expanded: ExpandedLexicalEditor,\n    Compact: CompactLexicalEditor\n};\n"],"names":["placeholderStyles","contentEditableStyles","styles","lexicalTokens","createLexicalTokens","useAdminConfig","AdminConfig","LexicalEditorComponent","props","theme","useWebsiteBuilderTheme","lexicalTheme","editorTheme","BaseLexicalEditor","StaticToolbar","ExpandedLexicalEditor","CompositionScope","CompactLexicalEditor","LexicalEditor"],"mappings":";;;;;;AAYA,MAAMA,oBAAyC;IAC3C,UAAU;IACV,KAAK;IACL,MAAM;IACN,SAAS;IACT,WAAW;IAGX,OAAO;AACX;AAEA,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IAGR,WAAW;IACX,cAAc;IAEd,WAAW;IACX,WAAW;IACX,YAAY;AAChB;AAEA,MAAMC,gBAAgBC,oBAAoB;AAI1C,MAAM,EAAEC,gBAAAA,cAAc,EAAE,GAAGC;AAE3B,MAAMC,yBAAyB,CAACC;IAC5B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,MAAMO,cAA2B;QAC7B,QAAQH,OAAO,UAAU,EAAE;QAC3B,YAAYA,OAAO,cAAc,CAAC;QAClC,WAAWA,OAAO,aAAa,EAAE;QACjC,QAAQN;QACR,mBAAmBM,OAAO,qBAAqBE,aAAa,iBAAiB;IACjF;IAEA,OAAO,WAAP,GACI,oBAACE,eAAiBA;QACb,GAAGL,KAAK;QACT,6BAAe,oBAACM,eAAaA;YAAC,WAAW;;QACzC,KAAK;QACL,aAAaN,OAAO,eAAe;QACnC,mBAAmBR;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOU;;AAGnB;AAEA,MAAMG,wBAAwB,CAACP,QACpB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKxC,MAAMS,uBAAuB,CAACT,QACnB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKjC,MAAMU,8BAAgB;IACzB,UAAUH;IACV,SAASE;AACb"}

package/inputRenderers/LexicalInput/LexicalEditorConfig.d.ts

@@ -1,36 +1,26 @@
 import React from "react";
 import { LexicalEditorConfig as BaseConfig } from "@webiny/lexical-editor";
-export declare const CompactEditorConfig: {
-    ({ children }: {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-    Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-    Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
-};
-export declare const ExpandedEditorConfig: {
-    ({ children }: {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-    Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-    Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
-};
+declare const ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
+declare const PluginConfig: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
+declare const NodeConfig: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
+export declare function CompactEditorConfig({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace CompactEditorConfig {
+    export { ToolbarAction };
+    export { PluginConfig as Plugin };
+    export { NodeConfig as Node };
+}
+export declare function ExpandedEditorConfig({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace ExpandedEditorConfig {
+    export { ToolbarAction };
+    export { PluginConfig as Plugin };
+    export { NodeConfig as Node };
+}
 export declare const LexicalEditorConfig: {
-    Expanded: {
-        ({ children }: {
-            children: React.ReactNode;
-        }): React.JSX.Element;
-        ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-        Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-        Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
-    };
-    Compact: {
-        ({ children }: {
-            children: React.ReactNode;
-        }): React.JSX.Element;
-        ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-        Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-        Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
-    };
+    Expanded: typeof ExpandedEditorConfig;
+    Compact: typeof CompactEditorConfig;
 };
+export {};

package/inputRenderers/LexicalInput/TypographyDropDown.js

@@ -47,14 +47,15 @@ const TypographyDropDown = ()=>{
         element
     ]);
     return /*#__PURE__*/ react.createElement(react.Fragment, null, styles?.length ? /*#__PURE__*/ react.createElement(DropDown, {
-        buttonClassName: "toolbar-item typography-dropdown",
+        buttonClassName: "toolbar-item typography-dropdown block-type-dropdown",
         buttonAriaLabel: "Typography formatting options",
         buttonLabel: value?.label || "Typography",
         stopCloseOnClickSelf: true,
         disabled: false,
         showScroll: true
     }, styles?.map((option)=>/*#__PURE__*/ react.createElement(DropDownItem, {
-            className: `item typography-item ${value?.id === option.id ? "active dropdown-item-active" : ""}`,
+            className: "item typography-item",
+            selected: value?.id === option.id,
             onClick: ()=>applyTypography(option),
             key: option.id
         }, /*#__PURE__*/ react.createElement("span", {