@webiny/app-website-builder 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.test.js

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { jsonPatch } from "@webiny/website-builder-sdk";
+import { PreviewedBindings } from "./PreviewedBindings.js";
+const bindingsWithTitle = (title)=>({
+        inputs: {
+            title: {
+                id: "title",
+                type: "text",
+                static: title
+            }
+        }
+    });
+const updateTo = (target)=>({
+        createJsonPatch: (bindings)=>jsonPatch.compare(bindings, target)
+    });
+class FakePreview {
+    constructor(committed){
+        this.bindings = structuredClone(committed);
+    }
+    apply(patch) {
+        jsonPatch.applyPatch(this.bindings, patch, false, true);
+    }
+}
+describe("PreviewedBindings", ()=>{
+    it("brings the preview back when the value returns to the committed one (undo)", ()=>{
+        const committed = bindingsWithTitle("abc");
+        const preview = new FakePreview(committed);
+        const previewed = new PreviewedBindings();
+        preview.apply(previewed.createPatch(updateTo(bindingsWithTitle("abcd")), committed));
+        expect(preview.bindings).toEqual(bindingsWithTitle("abcd"));
+        const patch = previewed.createPatch(updateTo(bindingsWithTitle("abc")), committed);
+        expect(patch).not.toEqual([]);
+        preview.apply(patch);
+        expect(preview.bindings).toEqual(bindingsWithTitle("abc"));
+    });
+    it("follows a run of edits", ()=>{
+        const committed = bindingsWithTitle("");
+        const preview = new FakePreview(committed);
+        const previewed = new PreviewedBindings();
+        for (const value of [
+            "a",
+            "ab",
+            "abc",
+            "ab",
+            "a",
+            ""
+        ]){
+            preview.apply(previewed.createPatch(updateTo(bindingsWithTitle(value)), committed));
+            expect(preview.bindings).toEqual(bindingsWithTitle(value));
+        }
+    });
+    it("starts over from the committed bindings once they change", ()=>{
+        const previewed = new PreviewedBindings();
+        const first = bindingsWithTitle("abc");
+        previewed.createPatch(updateTo(bindingsWithTitle("abcd")), first);
+        const second = bindingsWithTitle("xyz");
+        const preview = new FakePreview(second);
+        const patch = previewed.createPatch(updateTo(bindingsWithTitle("xyz!")), second);
+        preview.apply(patch);
+        expect(preview.bindings).toEqual(bindingsWithTitle("xyz!"));
+    });
+});
+
+//# sourceMappingURL=PreviewedBindings.test.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.test.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { jsonPatch } from \"@webiny/website-builder-sdk\";\nimport type { DocumentElementBindings } from \"@webiny/website-builder-sdk\";\nimport { PreviewedBindings } from \"./PreviewedBindings.js\";\n\nconst bindingsWithTitle = (title: string): DocumentElementBindings => ({\n    inputs: { title: { id: \"title\", type: \"text\", static: title } }\n});\n\n// Stands in for InputsUpdater: the patch that turns `bindings` into the updated bindings.\nconst updateTo = (target: DocumentElementBindings) => ({\n    createJsonPatch: (bindings: DocumentElementBindings) => jsonPatch.compare(bindings, target)\n});\n\n/**\n * The preview side: like EditingElementRenderer, it applies every patch on top of its own copy.\n */\nclass FakePreview {\n    public bindings: DocumentElementBindings;\n\n    constructor(committed: DocumentElementBindings) {\n        this.bindings = structuredClone(committed);\n    }\n\n    apply(patch: any[]) {\n        jsonPatch.applyPatch(this.bindings, patch, false, true);\n    }\n}\n\ndescribe(\"PreviewedBindings\", () => {\n    it(\"brings the preview back when the value returns to the committed one (undo)\", () => {\n        const committed = bindingsWithTitle(\"abc\");\n        const preview = new FakePreview(committed);\n        const previewed = new PreviewedBindings();\n\n        // Type \"d\".\n        preview.apply(previewed.createPatch(updateTo(bindingsWithTitle(\"abcd\")), committed));\n        expect(preview.bindings).toEqual(bindingsWithTitle(\"abcd\"));\n\n        // Undo back to the committed \"abc\". Diffed against the committed bindings this patch was\n        // empty, and the preview stayed on \"abcd\".\n        const patch = previewed.createPatch(updateTo(bindingsWithTitle(\"abc\")), committed);\n        expect(patch).not.toEqual([]);\n        preview.apply(patch);\n        expect(preview.bindings).toEqual(bindingsWithTitle(\"abc\"));\n    });\n\n    it(\"follows a run of edits\", () => {\n        const committed = bindingsWithTitle(\"\");\n        const preview = new FakePreview(committed);\n        const previewed = new PreviewedBindings();\n\n        for (const value of [\"a\", \"ab\", \"abc\", \"ab\", \"a\", \"\"]) {\n            preview.apply(previewed.createPatch(updateTo(bindingsWithTitle(value)), committed));\n            expect(preview.bindings).toEqual(bindingsWithTitle(value));\n        }\n    });\n\n    it(\"starts over from the committed bindings once they change\", () => {\n        const previewed = new PreviewedBindings();\n\n        const first = bindingsWithTitle(\"abc\");\n        previewed.createPatch(updateTo(bindingsWithTitle(\"abcd\")), first);\n\n        // A commit (here of \"xyz\") reaches the preview as a document update, not through us.\n        const second = bindingsWithTitle(\"xyz\");\n        const preview = new FakePreview(second);\n\n        const patch = previewed.createPatch(updateTo(bindingsWithTitle(\"xyz!\")), second);\n        preview.apply(patch);\n        expect(preview.bindings).toEqual(bindingsWithTitle(\"xyz!\"));\n    });\n});\n"],"names":["bindingsWithTitle","title","updateTo","target","bindings","jsonPatch","FakePreview","committed","structuredClone","patch","describe","it","preview","previewed","PreviewedBindings","expect","value","first","second"],"mappings":";;;AAKA,MAAMA,oBAAoB,CAACC,QAA4C;QACnE,QAAQ;YAAE,OAAO;gBAAE,IAAI;gBAAS,MAAM;gBAAQ,QAAQA;YAAM;QAAE;IAClE;AAGA,MAAMC,WAAW,CAACC,SAAqC;QACnD,iBAAiB,CAACC,WAAsCC,UAAU,OAAO,CAACD,UAAUD;IACxF;AAKA,MAAMG;IAGF,YAAYC,SAAkC,CAAE;QAC5C,IAAI,CAAC,QAAQ,GAAGC,gBAAgBD;IACpC;IAEA,MAAME,KAAY,EAAE;QAChBJ,UAAU,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAEI,OAAO,OAAO;IACtD;AACJ;AAEAC,SAAS,qBAAqB;IAC1BC,GAAG,8EAA8E;QAC7E,MAAMJ,YAAYP,kBAAkB;QACpC,MAAMY,UAAU,IAAIN,YAAYC;QAChC,MAAMM,YAAY,IAAIC;QAGtBF,QAAQ,KAAK,CAACC,UAAU,WAAW,CAACX,SAASF,kBAAkB,UAAUO;QACzEQ,OAAOH,QAAQ,QAAQ,EAAE,OAAO,CAACZ,kBAAkB;QAInD,MAAMS,QAAQI,UAAU,WAAW,CAACX,SAASF,kBAAkB,SAASO;QACxEQ,OAAON,OAAO,GAAG,CAAC,OAAO,CAAC,EAAE;QAC5BG,QAAQ,KAAK,CAACH;QACdM,OAAOH,QAAQ,QAAQ,EAAE,OAAO,CAACZ,kBAAkB;IACvD;IAEAW,GAAG,0BAA0B;QACzB,MAAMJ,YAAYP,kBAAkB;QACpC,MAAMY,UAAU,IAAIN,YAAYC;QAChC,MAAMM,YAAY,IAAIC;QAEtB,KAAK,MAAME,SAAS;YAAC;YAAK;YAAM;YAAO;YAAM;YAAK;SAAG,CAAE;YACnDJ,QAAQ,KAAK,CAACC,UAAU,WAAW,CAACX,SAASF,kBAAkBgB,SAAST;YACxEQ,OAAOH,QAAQ,QAAQ,EAAE,OAAO,CAACZ,kBAAkBgB;QACvD;IACJ;IAEAL,GAAG,4DAA4D;QAC3D,MAAME,YAAY,IAAIC;QAEtB,MAAMG,QAAQjB,kBAAkB;QAChCa,UAAU,WAAW,CAACX,SAASF,kBAAkB,UAAUiB;QAG3D,MAAMC,SAASlB,kBAAkB;QACjC,MAAMY,UAAU,IAAIN,YAAYY;QAEhC,MAAMT,QAAQI,UAAU,WAAW,CAACX,SAASF,kBAAkB,UAAUkB;QACzEN,QAAQ,KAAK,CAACH;QACdM,OAAOH,QAAQ,QAAQ,EAAE,OAAO,CAACZ,kBAAkB;IACvD;AACJ"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js

@@ -10,6 +10,7 @@ import { useBindingsForElement } from "./useBindingsForElement.js";
 import { useElementInputsAst } from "../../../hooks/useElementInputsAst.js";
 import { BreakpointElementMetadata, ElementMetadata, InputMetadata } from "../../../metadata/index.js";
 import { useElementFactory } from "./useElementFactory.js";
+import { PreviewedBindings } from "./PreviewedBindings.js";
 class InputValueObject {
     constructor(value){
         this.value = value;
@@ -74,6 +75,9 @@ const useInputValue = (elementId, node)=>{
         rawBindings
     ]);
     const [localState, setLocalValue] = useState();
+    const previewedBindings = useMemo(()=>new PreviewedBindings(), [
+        elementId
+    ]);
     const onChange = useCallback(withTimeout((cb)=>{
         const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
         const valueObject = new InputValueObject(value);
@@ -134,7 +138,7 @@ const useInputValue = (elementId, node)=>{
             static: valueObject.get()
         });
         const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);
-        const patch = updatedInputs.createJsonPatch(rawBindings);
+        const patch = previewedBindings.createPatch(updatedInputs, rawBindings);
         editor.executeCommand(Commands.PreviewPatchElement, {
             elementId,
             patch
@@ -142,7 +146,8 @@ const useInputValue = (elementId, node)=>{
     }, [
         elementId,
         rawBindings,
-        localState
+        localState,
+        previewedBindings
     ]);
     const setBindingType = useCallback((type)=>{
         editor.updateDocument((state)=>{

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    // Flat binding paths use `/` as the segment separator (e.g. `items/0/label`, `address/city`).\n    // lodash `set`/`get` expect `.`-delimited paths, and treat numeric segments as array indexes,\n    // so a straight `/` -> `.` conversion handles both nested objects and list items.\n    return path.replace(/\\//g, \".\");\n}\n\n/**\n * Reads a value from a deep inputs object using a flat `/`-delimited binding path.\n * Numeric segments are treated as array indexes (e.g. `items/0/label`).\n */\nfunction getDeepValueAtPath(obj: any, path: string): any {\n    if (!path) {\n        return obj;\n    }\n\n    const keys = path.split(\"/\").map(key => (/^\\d+$/.test(key) ? Number(key) : key));\n    return keys.reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    // Leaf inputs resolve directly from the flat bindings. Container inputs (object / object-list)\n    // have no flat entry of their own, so we resolve their deep value (object / array) from the\n    // processor - this is what list fields read to render items and to rewrite the whole array.\n    const value = useMemo(() => {\n        if (node.children.length > 0) {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n            return getDeepValueAtPath(deepInputs, node.path);\n        }\n\n        return resolvedBindings.inputs[node.path];\n    }, [resolvedBindings, node.path, inputsProcessor]);\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n            const patch = updatedInputs.createJsonPatch(rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"names":["InputValueObject","value","undefined","convertBracketPathToDotPath","path","getDeepValueAtPath","obj","keys","key","Number","acc","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","useBreakpoint","editor","useDocumentEditor","inputsAst","useElementInputsAst","elementFactory","useElementFactory","breakpointNames","useMemo","bp","rawBindings","resolvedBindings","inheritanceMap","useBindingsForElement","stylesProcessor","StylesBindingsProcessor","inputsProcessor","InputsBindingsProcessor","deepInputs","inputMetadata","elementMetadata","ElementMetadata","BreakpointElementMetadata","valueId","generateAlphaNumericLowerCaseId","InputMetadata","localState","setLocalValue","useState","onChange","useCallback","valueObject","updaterInput","valuePath","devFriendlyInputs","set","JSON","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","document","inputs","styles","applyAncestorUpdates","onPreviewChange","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":"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"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\nimport { PreviewedBindings } from \"./PreviewedBindings.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    // Flat binding paths use `/` as the segment separator (e.g. `items/0/label`, `address/city`).\n    // lodash `set`/`get` expect `.`-delimited paths, and treat numeric segments as array indexes,\n    // so a straight `/` -> `.` conversion handles both nested objects and list items.\n    return path.replace(/\\//g, \".\");\n}\n\n/**\n * Reads a value from a deep inputs object using a flat `/`-delimited binding path.\n * Numeric segments are treated as array indexes (e.g. `items/0/label`).\n */\nfunction getDeepValueAtPath(obj: any, path: string): any {\n    if (!path) {\n        return obj;\n    }\n\n    const keys = path.split(\"/\").map(key => (/^\\d+$/.test(key) ? Number(key) : key));\n    return keys.reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    // Leaf inputs resolve directly from the flat bindings. Container inputs (object / object-list)\n    // have no flat entry of their own, so we resolve their deep value (object / array) from the\n    // processor - this is what list fields read to render items and to rewrite the whole array.\n    const value = useMemo(() => {\n        if (node.children.length > 0) {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n            return getDeepValueAtPath(deepInputs, node.path);\n        }\n\n        return resolvedBindings.inputs[node.path];\n    }, [resolvedBindings, node.path, inputsProcessor]);\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    // See PreviewedBindings: preview patches are diffed against what the preview shows.\n    const previewedBindings = useMemo(() => new PreviewedBindings(), [elementId]);\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n\n            const patch = previewedBindings.createPatch(updatedInputs, rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState, previewedBindings]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"names":["InputValueObject","value","undefined","convertBracketPathToDotPath","path","getDeepValueAtPath","obj","keys","key","Number","acc","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","useBreakpoint","editor","useDocumentEditor","inputsAst","useElementInputsAst","elementFactory","useElementFactory","breakpointNames","useMemo","bp","rawBindings","resolvedBindings","inheritanceMap","useBindingsForElement","stylesProcessor","StylesBindingsProcessor","inputsProcessor","InputsBindingsProcessor","deepInputs","inputMetadata","elementMetadata","ElementMetadata","BreakpointElementMetadata","valueId","generateAlphaNumericLowerCaseId","InputMetadata","localState","setLocalValue","useState","previewedBindings","PreviewedBindings","onChange","useCallback","valueObject","updaterInput","valuePath","devFriendlyInputs","set","JSON","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","document","inputs","styles","applyAncestorUpdates","onPreviewChange","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":"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"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundColor: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 export declare const parseValue: (value: string) => undefined;
 export declare const BackgroundImage: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js

@@ -7,6 +7,17 @@ import { BackgroundImageParser } from "./BackgroundImageParser.js";
 import { useBreakpoint } from "../../../../../hooks/useBreakpoint.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
 import { SidebarRow } from "../../SidebarRow.js";
+const toPickerValue = (url, fileInfo)=>{
+    if (!url || !fileInfo) return;
+    const value = {
+        id: fileInfo.id,
+        name: fileInfo.name,
+        size: fileInfo.size,
+        mimeType: fileInfo.type,
+        src: fileInfo.url
+    };
+    return value;
+};
 const DEFAULT_POSITION = "center";
 const DEFAULT_SCALING = {
     backgroundSize: "cover",
@@ -78,7 +89,7 @@ const BackgroundImage = observer(({ elementId })=>{
         render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
                 variant: "secondary",
                 type: "compact",
-                value: url ? fileInfo : void 0,
+                value: toPickerValue(url, fileInfo),
                 onSelectItem: ()=>showFileManager(),
                 onRemoveItem: onRemove
             })

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ntype FileInfo = {\n    id: string;\n    name: string;\n    size: number;\n    type: string;\n    url: string;\n};\n\nconst DEFAULT_POSITION = \"center\";\nconst DEFAULT_SCALING = {\n    backgroundSize: \"cover\",\n    backgroundRepeat: \"no-repeat\"\n};\n\nexport const parseValue = (value: string) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return;\n};\n\nexport const BackgroundImage = observer(({ elementId }: { elementId: string }) => {\n    const { isBaseBreakpoint } = useBreakpoint();\n    const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string | null>(styles.backgroundImage);\n    const url = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        const rules = parser.getRules();\n        const urlRule = rules.find(r => r.type === \"url\");\n        if (urlRule && urlRule.type === \"url\") {\n            return urlRule.parsed.url;\n        }\n        return null;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundImage !== localValue) {\n            setLocalValue(styles.backgroundImage);\n        }\n    }, [styles.backgroundImage]);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ styles, metadata }) => {\n            styles.set(\"backgroundPosition\", DEFAULT_POSITION);\n            styles.set(\"backgroundSize\", DEFAULT_SCALING.backgroundSize);\n            styles.set(\"backgroundRepeat\", DEFAULT_SCALING.backgroundRepeat);\n            styles.set(\"backgroundImage\", `url(\"${file.src}\")`);\n\n            metadata.set(\"backgroundImage\", {\n                id: file.id,\n                name: file.name,\n                size: file.size,\n                type: file.type,\n                url: file.src || \"\"\n            });\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ styles, metadata }) => {\n            // On base breakpoint, we unset the image and all styles related to it.\n            if (isBaseBreakpoint) {\n                styles.unset(\"backgroundImage\");\n                styles.unset(\"backgroundPosition\");\n                styles.unset(\"backgroundSize\");\n                styles.unset(\"backgroundRepeat\");\n            } else {\n                styles.set(\"backgroundImage\", \"none\");\n            }\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundImage\");\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundImage ?? {};\n\n    const fileInfo = metadata.get<FileInfo>(\"backgroundImage\");\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Image\"}\n                />\n            }\n        >\n            <FileManager\n                images={true}\n                onChange={onFileChange}\n                render={({ showFileManager }) => (\n                    <FilePicker\n                        variant={\"secondary\"}\n                        type=\"compact\"\n                        value={url ? fileInfo : undefined}\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                    />\n                )}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["DEFAULT_POSITION","DEFAULT_SCALING","parseValue","value","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","url","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","fileInfo","SidebarRow","InheritanceLabel","FileManager","showFileManager","FilePicker","undefined"],"mappings":";;;;;;;;;AAkBA,MAAMA,mBAAmB;AACzB,MAAMC,kBAAkB;IACpB,gBAAgB;IAChB,kBAAkB;AACtB;AAEO,MAAMC,aAAa,CAACC,SAM3B;AAEO,MAAMC,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUP;IACjE,MAAM,CAACQ,YAAYC,cAAc,GAAGC,SAAwBP,OAAO,eAAe;IAClF,MAAMQ,MAAMC,QAAQ;QAChB,MAAMC,SAAS,IAAIC,sBAAsBX,OAAO,eAAe;QAC/D,MAAMY,QAAQF,OAAO,QAAQ;QAC7B,MAAMG,UAAUD,MAAM,IAAI,CAACE,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;QACtC,IAAID,WAAWA,AAAiB,UAAjBA,QAAQ,IAAI,EACvB,OAAOA,QAAQ,MAAM,CAAC,GAAG;QAE7B,OAAO;IACX,GAAG;QAACb,OAAO,eAAe;KAAC;IAE3Be,UAAU;QACN,IAAIf,OAAO,eAAe,KAAKK,YAC3BC,cAAcN,OAAO,eAAe;IAE5C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMgB,eAAe,CAACC;QAClBf,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAC1BD,OAAO,GAAG,CAAC,sBAAsBT;YACjCS,OAAO,GAAG,CAAC,kBAAkBR,gBAAgB,cAAc;YAC3DQ,OAAO,GAAG,CAAC,oBAAoBR,gBAAgB,gBAAgB;YAC/DQ,OAAO,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAEiB,KAAK,GAAG,CAAC,EAAE,CAAC;YAElDhB,SAAS,GAAG,CAAC,mBAAmB;gBAC5B,IAAIgB,KAAK,EAAE;gBACX,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,KAAKA,KAAK,GAAG,IAAI;YACrB;QACJ;IACJ;IAEA,MAAMC,WAAW;QACbhB,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAE1B,IAAIH,kBAAkB;gBAClBE,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;YACjB,OACIA,OAAO,GAAG,CAAC,mBAAmB;YAGlCC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMkB,UAAU;QACZjB,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YAEbC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMmB,cAAcjB,gBAAgB,mBAAmB,CAAC;IAExD,MAAMkB,WAAWpB,SAAS,GAAG,CAAW;IAExC,OAAO,WAAP,GACI,oBAACqB,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASJ;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACI,aAAWA;QACR,QAAQ;QACR,UAAUR;QACV,QAAQ,CAAC,EAAES,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,MAAK;gBACL,OAAOlB,MAAMa,WAAWM;gBACxB,cAAc,IAAMF;gBACpB,cAAcP;;;AAMtC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { FileItemDto } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ntype FileInfo = {\n    id: string;\n    name: string;\n    size: number;\n    type: string;\n    url: string;\n};\n\n/*\n * The FilePicker expects a FileItemDto (`mimeType`, `src`), while the element metadata stores the\n * older shape (`type`, `url`). Without the mapping the picker can't tell the file is an image and\n * shows a generic file icon instead of the thumbnail.\n */\nconst toPickerValue = (url: string | null | undefined, fileInfo: FileInfo | undefined) => {\n    if (!url || !fileInfo) {\n        return undefined;\n    }\n\n    const value: FileItemDto = {\n        id: fileInfo.id,\n        name: fileInfo.name,\n        size: fileInfo.size,\n        mimeType: fileInfo.type,\n        src: fileInfo.url\n    };\n    return value;\n};\n\nconst DEFAULT_POSITION = \"center\";\nconst DEFAULT_SCALING = {\n    backgroundSize: \"cover\",\n    backgroundRepeat: \"no-repeat\"\n};\n\nexport const parseValue = (value: string) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return;\n};\n\nexport const BackgroundImage = observer(({ elementId }: { elementId: string }) => {\n    const { isBaseBreakpoint } = useBreakpoint();\n    const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string | null>(styles.backgroundImage);\n    const url = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        const rules = parser.getRules();\n        const urlRule = rules.find(r => r.type === \"url\");\n        if (urlRule && urlRule.type === \"url\") {\n            return urlRule.parsed.url;\n        }\n        return null;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundImage !== localValue) {\n            setLocalValue(styles.backgroundImage);\n        }\n    }, [styles.backgroundImage]);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ styles, metadata }) => {\n            styles.set(\"backgroundPosition\", DEFAULT_POSITION);\n            styles.set(\"backgroundSize\", DEFAULT_SCALING.backgroundSize);\n            styles.set(\"backgroundRepeat\", DEFAULT_SCALING.backgroundRepeat);\n            styles.set(\"backgroundImage\", `url(\"${file.src}\")`);\n\n            metadata.set(\"backgroundImage\", {\n                id: file.id,\n                name: file.name,\n                size: file.size,\n                type: file.type,\n                url: file.src || \"\"\n            });\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ styles, metadata }) => {\n            // On base breakpoint, we unset the image and all styles related to it.\n            if (isBaseBreakpoint) {\n                styles.unset(\"backgroundImage\");\n                styles.unset(\"backgroundPosition\");\n                styles.unset(\"backgroundSize\");\n                styles.unset(\"backgroundRepeat\");\n            } else {\n                styles.set(\"backgroundImage\", \"none\");\n            }\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundImage\");\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundImage ?? {};\n\n    const fileInfo = metadata.get<FileInfo>(\"backgroundImage\");\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Image\"}\n                />\n            }\n        >\n            <FileManager\n                images={true}\n                onChange={onFileChange}\n                render={({ showFileManager }) => (\n                    <FilePicker\n                        variant={\"secondary\"}\n                        type=\"compact\"\n                        value={toPickerValue(url, fileInfo)}\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                    />\n                )}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["toPickerValue","url","fileInfo","value","DEFAULT_POSITION","DEFAULT_SCALING","parseValue","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","SidebarRow","InheritanceLabel","FileManager","showFileManager","FilePicker"],"mappings":"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"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundPosition: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundScaling: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderColorProps {
     elementId: string;
 }
-export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & React.NamedExoticComponent<BorderColorProps> & {
+    readonly type: ({ elementId }: BorderColorProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderRadiusProps {
     elementId: string;
 }
-export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & React.NamedExoticComponent<BorderRadiusProps> & {
+    readonly type: ({ elementId }: BorderRadiusProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderStyleProps {
     elementId: string;
 }
-export declare const BorderStyle: (({ elementId }: BorderStyleProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderStyle: (({ elementId }: BorderStyleProps) => React.JSX.Element) & React.NamedExoticComponent<BorderStyleProps> & {
+    readonly type: ({ elementId }: BorderStyleProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderWidth.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderWidthProps {
     elementId: string;
 }
-export declare const BorderWidth: (({ elementId }: BorderWidthProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderWidth: (({ elementId }: BorderWidthProps) => React.JSX.Element) & React.NamedExoticComponent<BorderWidthProps> & {
+    readonly type: ({ elementId }: BorderWidthProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.d.ts

@@ -13,6 +13,10 @@ import React from "react";
  */
 export declare const Alignment: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.d.ts

@@ -7,7 +7,7 @@ interface LengthWithUnitInputProps {
     unitOptions: UnitOption[];
     defaultValue?: string;
 }
-export declare const LengthWithUnitInput: (({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const LengthWithUnitInput: (({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element) & React.NamedExoticComponent<LengthWithUnitInputProps> & {
+    readonly type: ({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Margin.d.ts

@@ -3,7 +3,7 @@ interface MarginProps {
     elementId: string;
     children: React.ReactNode;
 }
-export declare const Margin: (({ elementId, children }: MarginProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Margin: (({ elementId, children }: MarginProps) => React.JSX.Element) & React.NamedExoticComponent<MarginProps> & {
+    readonly type: ({ elementId, children }: MarginProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface PaddingProps {
     elementId: string;
 }
-export declare const Padding: (({ elementId }: PaddingProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Padding: (({ elementId }: PaddingProps) => React.JSX.Element) & React.NamedExoticComponent<PaddingProps> & {
+    readonly type: ({ elementId }: PaddingProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.d.ts

@@ -2,6 +2,6 @@ import React from "react";
 export interface VisibilityProps {
     elementId: string;
 }
-export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & React.NamedExoticComponent<VisibilityProps> & {
+    readonly type: ({ elementId }: VisibilityProps) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js

@@ -17,7 +17,7 @@ const SidebarRow = ({ label, tooltip, children })=>/*#__PURE__*/ react.createEle
     }) : /*#__PURE__*/ react.createElement("div", {
         className: "w-xs shrink-0"
     })), /*#__PURE__*/ react.createElement("div", {
-        className: "flex-1"
+        className: "flex-1 min-w-0"
     }, children));
 export { SidebarRow };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\n\ninterface SidebarRowProps {\n    label: React.ReactNode;\n    tooltip?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nexport const SidebarRow = ({ label, tooltip, children }: SidebarRowProps) => {\n    return (\n        <div className={\"flex items-start gap-xxs\"}>\n            <div\n                className={\n                    \"w-[80px] pt-sm flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong\"\n                }\n            >\n                {label}\n\n                {tooltip ? (\n                    <Tooltip\n                        trigger={\n                            <Icon\n                                icon={<InfoIcon />}\n                                size={\"xs\"}\n                                label={\"More information\"}\n                                color={\"neutral-light\"}\n                            />\n                        }\n                        content={tooltip}\n                        side={\"left\"}\n                    />\n                ) : (\n                    <div className={\"w-xs shrink-0\"} />\n                )}\n            </div>\n            <div className={\"flex-1\"}>{children}</div>\n        </div>\n    );\n};\n"],"names":["SidebarRow","label","tooltip","children","Tooltip","Icon","InfoIcon"],"mappings":";;;AAUO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAmB,GAC7D,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;OAGHF,OAEAC,UAAU,WAAVA,GACG,oBAACE,SAAOA;QACJ,uBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAQA;YACf,MAAM;YACN,OAAO;YACP,OAAO;;QAGf,SAASJ;QACT,MAAM;uBAGV,oBAAC;QAAI,WAAW;uBAGxB,oBAAC;QAAI,WAAW;OAAWC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\n\ninterface SidebarRowProps {\n    label: React.ReactNode;\n    tooltip?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nexport const SidebarRow = ({ label, tooltip, children }: SidebarRowProps) => {\n    return (\n        <div className={\"flex items-start gap-xxs\"}>\n            <div\n                className={\n                    \"w-[80px] pt-sm flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong\"\n                }\n            >\n                {label}\n\n                {tooltip ? (\n                    <Tooltip\n                        trigger={\n                            <Icon\n                                icon={<InfoIcon />}\n                                size={\"xs\"}\n                                label={\"More information\"}\n                                color={\"neutral-light\"}\n                            />\n                        }\n                        content={tooltip}\n                        side={\"left\"}\n                    />\n                ) : (\n                    <div className={\"w-xs shrink-0\"} />\n                )}\n            </div>\n            {/* min-w-0 lets the cell shrink below its content's intrinsic width, so long\n                unbroken values (e.g. a hashed file name) truncate instead of widening the\n                row and pushing controls past the sidebar edge. */}\n            <div className={\"flex-1 min-w-0\"}>{children}</div>\n        </div>\n    );\n};\n"],"names":["SidebarRow","label","tooltip","children","Tooltip","Icon","InfoIcon"],"mappings":";;;AAUO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAmB,GAC7D,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;OAGHF,OAEAC,UAAU,WAAVA,GACG,oBAACE,SAAOA;QACJ,uBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAQA;YACf,MAAM;YACN,OAAO;YACP,OAAO;;QAGf,SAASJ;QACT,MAAM;uBAGV,oBAAC;QAAI,WAAW;uBAMxB,oBAAC;QAAI,WAAW;OAAmBC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js

@@ -12,9 +12,13 @@ import { Layout } from "./Groups/Layout.js";
 const StyleProperties = ()=>{
     const [element] = useActiveElement();
     if (!element) return null;
-    return /*#__PURE__*/ react.createElement(ElementStyleProperties, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "pt-md mb-md px-sm"
+    }, /*#__PURE__*/ react.createElement(ElementPreview, {
+        element: element
+    })), /*#__PURE__*/ react.createElement(ElementStyleProperties, {
         element: element
-    });
+    }));
 };
 const defaultHidden = [];
 const ElementStyleProperties = ({ element })=>{
@@ -23,11 +27,7 @@ const ElementStyleProperties = ({ element })=>{
     const isHidden = useCallback((name)=>hideStyles.includes(name), [
         hideStyles
     ]);
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
-        className: "pt-md mb-md px-sm"
-    }, /*#__PURE__*/ react.createElement(ElementPreview, {
-        element: element
-    })), /*#__PURE__*/ react.createElement(StyleAccordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(StyleAccordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
         elementId: element.id
     }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/ react.createElement(MarginPadding, {
         elementId: element.id

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { StyleAccordion } from \"./StyleAccordion.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { ElementPreview } from \"~/BaseEditor/defaultConfig/Sidebar/ElementPreview.js\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return <ElementStyleProperties element={element} />;\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <>\n            <div className={\"pt-md mb-md px-sm\"}>\n                <ElementPreview element={element} />\n            </div>\n            <StyleAccordion>\n                {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n                {isHidden(StyleSettings.MarginPadding) ? null : (\n                    <MarginPadding elementId={element.id} />\n                )}\n                {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n                {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n                {isHidden(StyleSettings.Visibility) ? null : (\n                    <VisibilityGroup elementId={element.id} />\n                )}\n            </StyleAccordion>\n        </>\n    );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","ElementPreview","StyleAccordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;;AAaO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACE,wBAAsBA;QAAC,SAASF;;AAC5C;AAEA,MAAMG,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,EAAEF,OAAO,EAAgC;IACrE,MAAMI,oBAAoBC,4BAA4BL,QAAQ,EAAE;IAChE,MAAMM,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,gBAAcA;QAAC,SAASV;uBAE7B,oBAACW,gBAAcA,MACVJ,SAASK,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWb,QAAQ,EAAE;QACrEO,SAASK,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWd,QAAQ,EAAE;QAEvCO,SAASK,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWf,QAAQ,EAAE;QACrEO,SAASK,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWhB,QAAQ,EAAE;QAC7EO,SAASK,cAAc,UAAU,IAAI,OAAO,WAAP,GAClC,oBAACK,iBAAeA;QAAC,WAAWjB,QAAQ,EAAE;;AAK1D"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { StyleAccordion } from \"./StyleAccordion.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { ElementPreview } from \"~/BaseEditor/defaultConfig/Sidebar/ElementPreview.js\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <>\n            <div className={\"pt-md mb-md px-sm\"}>\n                <ElementPreview element={element} />\n            </div>\n            <ElementStyleProperties element={element} />\n        </>\n    );\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <>\n            <StyleAccordion>\n                {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n                {isHidden(StyleSettings.MarginPadding) ? null : (\n                    <MarginPadding elementId={element.id} />\n                )}\n                {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n                {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n                {isHidden(StyleSettings.Visibility) ? null : (\n                    <VisibilityGroup elementId={element.id} />\n                )}\n            </StyleAccordion>\n        </>\n    );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementPreview","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","StyleAccordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;;AAaO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,gBAAcA;QAAC,SAASF;uBAE7B,oBAACG,wBAAsBA;QAAC,SAASH;;AAG7C;AAEA,MAAMI,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,EAAEH,OAAO,EAAgC;IACrE,MAAMK,oBAAoBC,4BAA4BN,QAAQ,EAAE;IAChE,MAAMO,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,wDACI,oBAACI,gBAAcA,MACVH,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWb,QAAQ,EAAE;QACrEQ,SAASI,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWd,QAAQ,EAAE;QAEvCQ,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWf,QAAQ,EAAE;QACrEQ,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWhB,QAAQ,EAAE;QAC7EQ,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAClC,oBAACK,iBAAeA;QAAC,WAAWjB,QAAQ,EAAE;;AAK1D"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js

@@ -2,10 +2,7 @@ import react from "react";
 import { Icon } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/select_all.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
-const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableContainer, {
-        tabIndex: -1
-    }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
+const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
         name: "style",
         label: "Style",
         icon: /*#__PURE__*/ react.createElement(Icon, {
@@ -15,7 +12,7 @@ const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableConta
         element: /*#__PURE__*/ react.createElement(Sidebar.Elements, {
             group: "style"
         })
-    }));
+    });
 export { StyleSettingsGroup };
 
 //# sourceMappingURL=StyleSettingsGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as SelectAllIcon } from \"@webiny/icons/select_all.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const StyleSettingsGroup = () => {\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"style\"}\n                label={\"Style\"}\n                icon={<Icon icon={<SelectAllIcon />} label={\"Style\"} />}\n                element={<Sidebar.Elements group={\"style\"} />}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"names":["StyleSettingsGroup","ScrollableContainer","Sidebar","Icon","SelectAllIcon"],"mappings":";;;;;AAMO,MAAMA,qBAAqB,IACvB,WAAP,GACI,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,OAAO;;QAC5C,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as SelectAllIcon } from \"@webiny/icons/select_all.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\n\nexport const StyleSettingsGroup = () => {\n    return (\n        <Sidebar.Group.Tab\n            name={\"style\"}\n            label={\"Style\"}\n            icon={<Icon icon={<SelectAllIcon />} label={\"Style\"} />}\n            element={<Sidebar.Elements group={\"style\"} />}\n        />\n    );\n};\n"],"names":["StyleSettingsGroup","Sidebar","Icon","SelectAllIcon"],"mappings":";;;;AAKO,MAAMA,qBAAqB,IACvB,WAAP,GACI,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,OAAO;;QAC5C,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const Navigator: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const Navigator: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/DocumentEditor/DocumentEditor.d.ts

@@ -3,14 +3,23 @@ import type { EditorDocument } from "@webiny/website-builder-sdk";
 import { Editor } from "../editorSdk/Editor.js";
 export declare const DocumentEditorContext: React.Context<Editor<any> | undefined>;
 export declare function useDocumentEditor<TDocument extends EditorDocument>(): Editor<TDocument>;
-interface DocumentEditorProps<TDocument> {
-    document: TDocument;
+interface DocumentEditorBaseProps {
     name: string;
     children?: React.ReactNode;
+}
+interface DocumentEditorWithDocument<TDocument> extends DocumentEditorBaseProps {
+    document: TDocument;
     readOnly: boolean;
+    editor?: never;
+}
+interface DocumentEditorWithEditor extends DocumentEditorBaseProps {
+    editor: Editor<any>;
+    document?: never;
+    readOnly?: never;
 }
-declare function BaseDocumentEditor<TDocument extends EditorDocument>({ document, name, children, readOnly }: DocumentEditorProps<TDocument>): React.JSX.Element;
-export declare const DocumentEditor: typeof BaseDocumentEditor & {
-    displayName: string;
+type DocumentEditorProps<TDocument = any> = DocumentEditorWithDocument<TDocument> | DocumentEditorWithEditor;
+declare function BaseDocumentEditor<TDocument extends EditorDocument>({ name, children, ...props }: DocumentEditorProps<TDocument>): React.JSX.Element;
+export declare const DocumentEditor: typeof BaseDocumentEditor & React.NamedExoticComponent<DocumentEditorProps<import("@webiny/website-builder-sdk").Document>> & {
+    readonly type: typeof BaseDocumentEditor;
 };
 export {};

package/DocumentEditor/DocumentEditor.js

@@ -13,13 +13,17 @@ function useDocumentEditor() {
     if (!context) throw new Error("useDocumentEditor must be used within a <DocumentEditor /> context!");
     return context;
 }
-function BaseDocumentEditor({ document, name, children, readOnly }) {
-    const editor = useMemo(()=>new Editor_js_Editor(document, {
-            isReadOnly: readOnly
-        }), [
-        document,
-        readOnly
+function BaseDocumentEditor({ name, children, ...props }) {
+    const internalEditor = useMemo(()=>{
+        if ("editor" in props && props.editor) return null;
+        return new Editor_js_Editor(props.document, {
+            isReadOnly: props.readOnly
+        });
+    }, [
+        "editor" in props ? props.editor : props.document,
+        "editor" in props ? null : props.readOnly
     ]);
+    const editor = "editor" in props && props.editor ? props.editor : internalEditor;
     return /*#__PURE__*/ react.createElement(DndProvider, {
         backend: HTML5Backend
     }, /*#__PURE__*/ react.createElement(StateInspector, {