@webiny/app-website-builder 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

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

@@ -0,0 +1,111 @@
+import react, { useState } from "react";
+import { InputField } from "./InputField.js";
+import { useInputValue } from "./useInputValue.js";
+import { buildDefaultObject } from "./buildDefaultObject.js";
+import { ObjectAddButton, ObjectEmptyState, ObjectFieldHeader, ObjectFieldPanel, ObjectRow, ObjectRowActions, useDrawerDepth } from "../../../../inputRenderers/ObjectInput/index.js";
+function ObjectListField({ element, node, bindings }) {
+    const { value, onChange } = useInputValue(element.id, node);
+    const items = Array.isArray(value) ? value : [];
+    const [openIndex, setOpenIndex] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const depth = useDrawerDepth();
+    const label = node.input.label ?? node.name;
+    const openItem = (index)=>{
+        setActiveIndex(index);
+        setOpenIndex(index);
+    };
+    const commit = (next)=>{
+        onChange(({ value })=>{
+            value.set(next);
+        });
+    };
+    const handleAdd = ()=>{
+        commit([
+            ...items,
+            buildDefaultObject(node.children)
+        ]);
+    };
+    const handleRemove = (index)=>{
+        setOpenIndex(null);
+        commit(items.filter((_, i)=>i !== index));
+    };
+    const handleMoveUp = (index)=>{
+        if (index <= 0) return;
+        const next = [
+            ...items
+        ];
+        [next[index - 1], next[index]] = [
+            next[index],
+            next[index - 1]
+        ];
+        commit(next);
+    };
+    const handleMoveDown = (index)=>{
+        if (index >= items.length - 1) return;
+        const next = [
+            ...items
+        ];
+        [next[index], next[index + 1]] = [
+            next[index + 1],
+            next[index]
+        ];
+        commit(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(ObjectFieldHeader, {
+        label: label,
+        description: node.input.description
+    }), 0 === items.length ? /*#__PURE__*/ react.createElement(ObjectEmptyState, {
+        onAdd: handleAdd
+    }) : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, items.map((item, index)=>/*#__PURE__*/ react.createElement(ObjectRow, {
+            key: `${node.path}/${index}`,
+            title: deriveItemTitle(node, item, index),
+            onOpen: ()=>openItem(index),
+            actions: /*#__PURE__*/ react.createElement(ObjectRowActions, {
+                onMoveUp: ()=>handleMoveUp(index),
+                onMoveDown: ()=>handleMoveDown(index),
+                onRemove: ()=>handleRemove(index),
+                canMoveUp: index > 0,
+                canMoveDown: index < items.length - 1
+            })
+        }))), /*#__PURE__*/ react.createElement(ObjectAddButton, {
+        onClick: handleAdd
+    })), /*#__PURE__*/ react.createElement(ObjectFieldPanel, {
+        open: null !== openIndex,
+        onClose: ()=>setOpenIndex(null),
+        title: deriveItemTitle(node, items[activeIndex], activeIndex),
+        depth: depth
+    }, node.children.map((child)=>{
+        const indexedChild = withIndexedPath(child, node.path, activeIndex);
+        return /*#__PURE__*/ react.createElement(InputField, {
+            key: indexedChild.path,
+            element: element,
+            node: indexedChild,
+            bindings: bindings
+        });
+    })));
+}
+function deriveItemTitle(node, item, index) {
+    const label = node.input.label ?? node.name;
+    if (item && "object" == typeof item) for (const child of node.children){
+        const childValue = item[child.name];
+        if (("text" === child.type || "longText" === child.type) && "string" == typeof childValue && childValue.trim()) return childValue;
+    }
+    return `${label} #${index + 1}`;
+}
+function withIndexedPath(node, listPath, index) {
+    const prefix = `${listPath}/`;
+    const indexedPrefix = `${listPath}/${index}/`;
+    const rewrite = (current)=>({
+            ...current,
+            path: current.path.startsWith(prefix) ? indexedPrefix + current.path.slice(prefix.length) : current.path,
+            children: current.children.map(rewrite)
+        });
+    return rewrite(node);
+}
+export { ObjectListField };
+
+//# sourceMappingURL=ObjectListField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    InputAstNode\n} from \"@webiny/website-builder-sdk\";\nimport { InputField } from \"./InputField.js\";\nimport { useInputValue } from \"./useInputValue.js\";\nimport { buildDefaultObject } from \"./buildDefaultObject.js\";\nimport {\n    ObjectAddButton,\n    ObjectEmptyState,\n    ObjectFieldHeader,\n    ObjectFieldPanel,\n    ObjectRow,\n    ObjectRowActions,\n    useDrawerDepth\n} from \"~/inputRenderers/ObjectInput/index.js\";\n\ninterface ObjectListFieldProps {\n    node: InputAstNode;\n    element: DocumentElement;\n    bindings: DocumentElementBindings[\"inputs\"];\n}\n\n/**\n * A repeatable (list) object field. Rendered as a list of rows (one per item) plus an \"Add\"\n * button; clicking a row opens that item's drawer. Add / remove / reorder rewrite the whole array\n * and commit it through the container's `onChange`. Each item's fields are rendered as nested\n * `InputField`s with index-qualified paths (e.g. `items/0/label`).\n */\nexport function ObjectListField({ element, node, bindings }: ObjectListFieldProps) {\n    const { value, onChange } = useInputValue(element.id, node);\n    const items: any[] = Array.isArray(value) ? value : [];\n    const [openIndex, setOpenIndex] = useState<number | null>(null);\n    // The index whose panel is shown. Retained while closing so the content stays put during the\n    // exit transition (openIndex goes null immediately, activeIndex lingers).\n    const [activeIndex, setActiveIndex] = useState(0);\n    const depth = useDrawerDepth();\n    const label = node.input.label ?? node.name;\n\n    const openItem = (index: number) => {\n        setActiveIndex(index);\n        setOpenIndex(index);\n    };\n\n    const commit = (next: any[]) => {\n        onChange(({ value }) => {\n            value.set(next);\n        });\n    };\n\n    const handleAdd = () => {\n        commit([...items, buildDefaultObject(node.children)]);\n    };\n\n    const handleRemove = (index: number) => {\n        setOpenIndex(null);\n        commit(items.filter((_, i) => i !== index));\n    };\n\n    const handleMoveUp = (index: number) => {\n        if (index <= 0) {\n            return;\n        }\n        const next = [...items];\n        [next[index - 1], next[index]] = [next[index], next[index - 1]];\n        commit(next);\n    };\n\n    const handleMoveDown = (index: number) => {\n        if (index >= items.length - 1) {\n            return;\n        }\n        const next = [...items];\n        [next[index], next[index + 1]] = [next[index + 1], next[index]];\n        commit(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <ObjectFieldHeader label={label} description={node.input.description} />\n\n            {items.length === 0 ? (\n                <ObjectEmptyState onAdd={handleAdd} />\n            ) : (\n                <>\n                    <div className={\"flex flex-col gap-sm\"}>\n                        {items.map((item, index) => (\n                            <ObjectRow\n                                key={`${node.path}/${index}`}\n                                title={deriveItemTitle(node, item, index)}\n                                onOpen={() => openItem(index)}\n                                actions={\n                                    <ObjectRowActions\n                                        onMoveUp={() => handleMoveUp(index)}\n                                        onMoveDown={() => handleMoveDown(index)}\n                                        onRemove={() => handleRemove(index)}\n                                        canMoveUp={index > 0}\n                                        canMoveDown={index < items.length - 1}\n                                    />\n                                }\n                            />\n                        ))}\n                    </div>\n                    <ObjectAddButton onClick={handleAdd} />\n                </>\n            )}\n\n            <ObjectFieldPanel\n                open={openIndex !== null}\n                onClose={() => setOpenIndex(null)}\n                title={deriveItemTitle(node, items[activeIndex], activeIndex)}\n                depth={depth}\n            >\n                {node.children.map(child => {\n                    const indexedChild = withIndexedPath(child, node.path, activeIndex);\n                    return (\n                        <InputField\n                            key={indexedChild.path}\n                            element={element}\n                            node={indexedChild}\n                            bindings={bindings}\n                        />\n                    );\n                })}\n            </ObjectFieldPanel>\n        </div>\n    );\n}\n\n/**\n * Derives a human-readable title for a list item: the first non-empty text value found among its\n * fields, falling back to \"<label> #<n>\".\n */\nfunction deriveItemTitle(node: InputAstNode, item: any, index: number): string {\n    const label = node.input.label ?? node.name;\n\n    if (item && typeof item === \"object\") {\n        for (const child of node.children) {\n            const childValue = item[child.name];\n            if (\n                (child.type === \"text\" || child.type === \"longText\") &&\n                typeof childValue === \"string\" &&\n                childValue.trim()\n            ) {\n                return childValue;\n            }\n        }\n    }\n\n    return `${label} #${index + 1}`;\n}\n\n/**\n * Rewrites an AST node (and its descendants) so that paths under a list container include the\n * given item index, e.g. `items/label` -> `items/0/label`.\n */\nfunction withIndexedPath(node: InputAstNode, listPath: string, index: number): InputAstNode {\n    const prefix = `${listPath}/`;\n    const indexedPrefix = `${listPath}/${index}/`;\n\n    const rewrite = (current: InputAstNode): InputAstNode => ({\n        ...current,\n        path: current.path.startsWith(prefix)\n            ? indexedPrefix + current.path.slice(prefix.length)\n            : current.path,\n        children: current.children.map(rewrite)\n    });\n\n    return rewrite(node);\n}\n"],"names":["ObjectListField","element","node","bindings","value","onChange","useInputValue","items","Array","openIndex","setOpenIndex","useState","activeIndex","setActiveIndex","depth","useDrawerDepth","label","openItem","index","commit","next","handleAdd","buildDefaultObject","handleRemove","_","i","handleMoveUp","handleMoveDown","ObjectFieldHeader","ObjectEmptyState","item","ObjectRow","deriveItemTitle","ObjectRowActions","ObjectAddButton","ObjectFieldPanel","child","indexedChild","withIndexedPath","InputField","childValue","listPath","prefix","indexedPrefix","rewrite","current"],"mappings":"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"}

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

@@ -1,30 +1,49 @@
-const scalars = ["string", "number", "boolean"];
-export class PathType {
-  constructor(nativeType) {
-    this.nativeType = nativeType;
-  }
-  toString() {
-    return this.nativeType;
-  }
-  matches(expected) {
-    const map = {
-      text: ["string"],
-      longText: ["string"],
-      number: ["number"],
-      boolean: ["boolean"],
-      array: ["array"],
-      object: ["object"],
-      json: ["object"]
-    };
-    const allowed = map[expected] || [];
-    return allowed.includes(this.nativeType);
-  }
-  isArray() {
-    return this.nativeType === "array";
-  }
-  isScalar() {
-    return scalars.includes(this.nativeType);
-  }
+const scalars = [
+    "string",
+    "number",
+    "boolean"
+];
+class PathType {
+    constructor(nativeType){
+        this.nativeType = nativeType;
+    }
+    toString() {
+        return this.nativeType;
+    }
+    matches(expected) {
+        const map = {
+            text: [
+                "string"
+            ],
+            longText: [
+                "string"
+            ],
+            number: [
+                "number"
+            ],
+            boolean: [
+                "boolean"
+            ],
+            array: [
+                "array"
+            ],
+            object: [
+                "object"
+            ],
+            json: [
+                "object"
+            ]
+        };
+        const allowed = map[expected] || [];
+        return allowed.includes(this.nativeType);
+    }
+    isArray() {
+        return "array" === this.nativeType;
+    }
+    isScalar() {
+        return scalars.includes(this.nativeType);
+    }
 }
+export { PathType };
 
 //# sourceMappingURL=PathType.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["scalars","PathType","constructor","nativeType","toString","matches","expected","map","text","longText","number","boolean","array","object","json","allowed","includes","isArray","isScalar"],"sources":["PathType.ts"],"sourcesContent":["const scalars = [\"string\", \"number\", \"boolean\"];\n\nexport class PathType {\n    private readonly nativeType: string;\n\n    constructor(nativeType: string) {\n        this.nativeType = nativeType;\n    }\n\n    public toString(): string {\n        return this.nativeType;\n    }\n\n    public matches(expected: string): boolean {\n        const map: Record<string, string[]> = {\n            text: [\"string\"],\n            longText: [\"string\"],\n            number: [\"number\"],\n            boolean: [\"boolean\"],\n            array: [\"array\"],\n            object: [\"object\"],\n            json: [\"object\"]\n        };\n\n        const allowed = map[expected] || [];\n        return allowed.includes(this.nativeType);\n    }\n\n    isArray() {\n        return this.nativeType === \"array\";\n    }\n\n    isScalar() {\n        return scalars.includes(this.nativeType);\n    }\n}\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;AAE/C,OAAO,MAAMC,QAAQ,CAAC;EAGlBC,WAAWA,CAACC,UAAkB,EAAE;IAC5B,IAAI,CAACA,UAAU,GAAGA,UAAU;EAChC;EAEOC,QAAQA,CAAA,EAAW;IACtB,OAAO,IAAI,CAACD,UAAU;EAC1B;EAEOE,OAAOA,CAACC,QAAgB,EAAW;IACtC,MAAMC,GAA6B,GAAG;MAClCC,IAAI,EAAE,CAAC,QAAQ,CAAC;MAChBC,QAAQ,EAAE,CAAC,QAAQ,CAAC;MACpBC,MAAM,EAAE,CAAC,QAAQ,CAAC;MAClBC,OAAO,EAAE,CAAC,SAAS,CAAC;MACpBC,KAAK,EAAE,CAAC,OAAO,CAAC;MAChBC,MAAM,EAAE,CAAC,QAAQ,CAAC;MAClBC,IAAI,EAAE,CAAC,QAAQ;IACnB,CAAC;IAED,MAAMC,OAAO,GAAGR,GAAG,CAACD,QAAQ,CAAC,IAAI,EAAE;IACnC,OAAOS,OAAO,CAACC,QAAQ,CAAC,IAAI,CAACb,UAAU,CAAC;EAC5C;EAEAc,OAAOA,CAAA,EAAG;IACN,OAAO,IAAI,CAACd,UAAU,KAAK,OAAO;EACtC;EAEAe,QAAQA,CAAA,EAAG;IACP,OAAOlB,OAAO,CAACgB,QAAQ,CAAC,IAAI,CAACb,UAAU,CAAC;EAC5C;AACJ","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/PathType.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/PathType.ts"],"sourcesContent":["const scalars = [\"string\", \"number\", \"boolean\"];\n\nexport class PathType {\n    private readonly nativeType: string;\n\n    constructor(nativeType: string) {\n        this.nativeType = nativeType;\n    }\n\n    public toString(): string {\n        return this.nativeType;\n    }\n\n    public matches(expected: string): boolean {\n        const map: Record<string, string[]> = {\n            text: [\"string\"],\n            longText: [\"string\"],\n            number: [\"number\"],\n            boolean: [\"boolean\"],\n            array: [\"array\"],\n            object: [\"object\"],\n            json: [\"object\"]\n        };\n\n        const allowed = map[expected] || [];\n        return allowed.includes(this.nativeType);\n    }\n\n    isArray() {\n        return this.nativeType === \"array\";\n    }\n\n    isScalar() {\n        return scalars.includes(this.nativeType);\n    }\n}\n"],"names":["scalars","PathType","nativeType","expected","map","allowed"],"mappings":"AAAA,MAAMA,UAAU;IAAC;IAAU;IAAU;CAAU;AAExC,MAAMC;IAGT,YAAYC,UAAkB,CAAE;QAC5B,IAAI,CAAC,UAAU,GAAGA;IACtB;IAEO,WAAmB;QACtB,OAAO,IAAI,CAAC,UAAU;IAC1B;IAEO,QAAQC,QAAgB,EAAW;QACtC,MAAMC,MAAgC;YAClC,MAAM;gBAAC;aAAS;YAChB,UAAU;gBAAC;aAAS;YACpB,QAAQ;gBAAC;aAAS;YAClB,SAAS;gBAAC;aAAU;YACpB,OAAO;gBAAC;aAAQ;YAChB,QAAQ;gBAAC;aAAS;YAClB,MAAM;gBAAC;aAAS;QACpB;QAEA,MAAMC,UAAUD,GAAG,CAACD,SAAS,IAAI,EAAE;QACnC,OAAOE,QAAQ,QAAQ,CAAC,IAAI,CAAC,UAAU;IAC3C;IAEA,UAAU;QACN,OAAO,AAAoB,YAApB,IAAI,CAAC,UAAU;IAC1B;IAEA,WAAW;QACP,OAAOL,QAAQ,QAAQ,CAAC,IAAI,CAAC,UAAU;IAC3C;AACJ"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.d.ts

@@ -0,0 +1,22 @@
+import type { DocumentElementBindings, JsonPatchOperation } from "@webiny/website-builder-sdk";
+interface IBindingsUpdate {
+    createJsonPatch(bindings: DocumentElementBindings): JsonPatchOperation[];
+}
+/**
+ * Tracks what the preview currently shows for one element, so preview patches can be computed
+ * against it.
+ *
+ * The preview applies each patch on top of its own copy of the element's bindings. Computing a patch
+ * against the committed bindings instead goes wrong as soon as one preview patch has been applied:
+ * going back to the committed value (OS undo, or deleting what was just typed) diffs to an empty
+ * patch, and the preview keeps showing the last previewed value.
+ *
+ * The tracked copy is tied to the committed bindings it started from. Once those change, the editor
+ * has sent the preview the committed state, so tracking starts over from it.
+ */
+export declare class PreviewedBindings {
+    private source;
+    private bindings;
+    createPatch(update: IBindingsUpdate, committed: DocumentElementBindings): JsonPatchOperation[];
+}
+export {};

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

@@ -0,0 +1,17 @@
+import { jsonPatch } from "@webiny/website-builder-sdk";
+class PreviewedBindings {
+    createPatch(update, committed) {
+        const base = this.source === committed && this.bindings ? this.bindings : committed;
+        const patch = update.createJsonPatch(base);
+        this.source = committed;
+        this.bindings = jsonPatch.applyPatch(structuredClone(base), patch, false, true).newDocument;
+        return patch;
+    }
+    constructor(){
+        this.source = null;
+        this.bindings = null;
+    }
+}
+export { PreviewedBindings };
+
+//# sourceMappingURL=PreviewedBindings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.ts"],"sourcesContent":["import { jsonPatch } from \"@webiny/website-builder-sdk\";\nimport type { DocumentElementBindings, JsonPatchOperation } from \"@webiny/website-builder-sdk\";\n\ninterface IBindingsUpdate {\n    createJsonPatch(bindings: DocumentElementBindings): JsonPatchOperation[];\n}\n\n/**\n * Tracks what the preview currently shows for one element, so preview patches can be computed\n * against it.\n *\n * The preview applies each patch on top of its own copy of the element's bindings. Computing a patch\n * against the committed bindings instead goes wrong as soon as one preview patch has been applied:\n * going back to the committed value (OS undo, or deleting what was just typed) diffs to an empty\n * patch, and the preview keeps showing the last previewed value.\n *\n * The tracked copy is tied to the committed bindings it started from. Once those change, the editor\n * has sent the preview the committed state, so tracking starts over from it.\n */\nexport class PreviewedBindings {\n    private source: DocumentElementBindings | null = null;\n    private bindings: DocumentElementBindings | null = null;\n\n    createPatch(update: IBindingsUpdate, committed: DocumentElementBindings): JsonPatchOperation[] {\n        const base = this.source === committed && this.bindings ? this.bindings : committed;\n        const patch = update.createJsonPatch(base);\n\n        this.source = committed;\n        this.bindings = jsonPatch.applyPatch(structuredClone(base), patch, false, true).newDocument;\n\n        return patch;\n    }\n}\n"],"names":["PreviewedBindings","update","committed","base","patch","jsonPatch","structuredClone"],"mappings":";AAmBO,MAAMA;IAIT,YAAYC,MAAuB,EAAEC,SAAkC,EAAwB;QAC3F,MAAMC,OAAO,IAAI,CAAC,MAAM,KAAKD,aAAa,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAGA;QAC1E,MAAME,QAAQH,OAAO,eAAe,CAACE;QAErC,IAAI,CAAC,MAAM,GAAGD;QACd,IAAI,CAAC,QAAQ,GAAGG,UAAU,UAAU,CAACC,gBAAgBH,OAAOC,OAAO,OAAO,MAAM,WAAW;QAE3F,OAAOA;IACX;;aAXQ,MAAM,GAAmC;aACzC,QAAQ,GAAmC;;AAWvD"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.test.d.ts

@@ -0,0 +1 @@
+export {};

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/StatePathsCollection.js

@@ -1,41 +1,37 @@
-export class StatePathsCollection {
-  constructor(items) {
-    this.items = items;
-  }
-  map(callback) {
-    const mapped = this.items.map(callback);
-    return new StatePathsCollection(mapped);
-  }
-  filter(callback) {
-    const filtered = this.items.filter(callback);
-    return new StatePathsCollection(filtered);
-  }
-  filterScalars() {
-    const filtered = this.items.filter(item => {
-      return item.type.isScalar();
-    });
-    return new StatePathsCollection(filtered);
-  }
-  filterArray() {
-    const filtered = this.items.filter(item => {
-      return item.type.isArray();
-    });
-    return new StatePathsCollection(filtered);
-  }
-  sort(compareFn) {
-    const sorted = [...this.items];
-    if (compareFn) {
-      sorted.sort(compareFn);
-    } else {
-      sorted.sort((a, b) => {
-        return a.label.localeCompare(b.label);
-      });
+class StatePathsCollection {
+    constructor(items){
+        this.items = items;
+    }
+    map(callback) {
+        const mapped = this.items.map(callback);
+        return new StatePathsCollection(mapped);
+    }
+    filter(callback) {
+        const filtered = this.items.filter(callback);
+        return new StatePathsCollection(filtered);
+    }
+    filterScalars() {
+        const filtered = this.items.filter((item)=>item.type.isScalar());
+        return new StatePathsCollection(filtered);
+    }
+    filterArray() {
+        const filtered = this.items.filter((item)=>item.type.isArray());
+        return new StatePathsCollection(filtered);
+    }
+    sort(compareFn) {
+        const sorted = [
+            ...this.items
+        ];
+        if (compareFn) sorted.sort(compareFn);
+        else sorted.sort((a, b)=>a.label.localeCompare(b.label));
+        return new StatePathsCollection(sorted);
+    }
+    values() {
+        return [
+            ...this.items
+        ];
     }
-    return new StatePathsCollection(sorted);
-  }
-  values() {
-    return [...this.items];
-  }
 }
+export { StatePathsCollection };
 
 //# sourceMappingURL=StatePathsCollection.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["StatePathsCollection","constructor","items","map","callback","mapped","filter","filtered","filterScalars","item","type","isScalar","filterArray","isArray","sort","compareFn","sorted","a","b","label","localeCompare","values"],"sources":["StatePathsCollection.ts"],"sourcesContent":["import type { PathType } from \"./PathType.js\";\n\nexport type PathOption = {\n    value: string;\n    label: string;\n    type: PathType;\n};\n\nexport class StatePathsCollection {\n    private readonly items: PathOption[];\n\n    constructor(items: PathOption[]) {\n        this.items = items;\n    }\n\n    public map(callback: (item: PathOption, index: number) => any): StatePathsCollection {\n        const mapped = this.items.map(callback);\n        return new StatePathsCollection(mapped);\n    }\n\n    public filter(callback: (item: PathOption, index: number) => boolean): StatePathsCollection {\n        const filtered = this.items.filter(callback);\n        return new StatePathsCollection(filtered);\n    }\n\n    public filterScalars(): StatePathsCollection {\n        const filtered = this.items.filter(item => {\n            return item.type.isScalar();\n        });\n        return new StatePathsCollection(filtered);\n    }\n\n    public filterArray(): StatePathsCollection {\n        const filtered = this.items.filter(item => {\n            return item.type.isArray();\n        });\n        return new StatePathsCollection(filtered);\n    }\n\n    public sort(compareFn?: (a: PathOption, b: PathOption) => number): StatePathsCollection {\n        const sorted = [...this.items];\n\n        if (compareFn) {\n            sorted.sort(compareFn);\n        } else {\n            sorted.sort((a, b) => {\n                return a.label.localeCompare(b.label);\n            });\n        }\n\n        return new StatePathsCollection(sorted);\n    }\n\n    public values(): PathOption[] {\n        return [...this.items];\n    }\n}\n"],"mappings":"AAQA,OAAO,MAAMA,oBAAoB,CAAC;EAG9BC,WAAWA,CAACC,KAAmB,EAAE;IAC7B,IAAI,CAACA,KAAK,GAAGA,KAAK;EACtB;EAEOC,GAAGA,CAACC,QAAkD,EAAwB;IACjF,MAAMC,MAAM,GAAG,IAAI,CAACH,KAAK,CAACC,GAAG,CAACC,QAAQ,CAAC;IACvC,OAAO,IAAIJ,oBAAoB,CAACK,MAAM,CAAC;EAC3C;EAEOC,MAAMA,CAACF,QAAsD,EAAwB;IACxF,MAAMG,QAAQ,GAAG,IAAI,CAACL,KAAK,CAACI,MAAM,CAACF,QAAQ,CAAC;IAC5C,OAAO,IAAIJ,oBAAoB,CAACO,QAAQ,CAAC;EAC7C;EAEOC,aAAaA,CAAA,EAAyB;IACzC,MAAMD,QAAQ,GAAG,IAAI,CAACL,KAAK,CAACI,MAAM,CAACG,IAAI,IAAI;MACvC,OAAOA,IAAI,CAACC,IAAI,CAACC,QAAQ,CAAC,CAAC;IAC/B,CAAC,CAAC;IACF,OAAO,IAAIX,oBAAoB,CAACO,QAAQ,CAAC;EAC7C;EAEOK,WAAWA,CAAA,EAAyB;IACvC,MAAML,QAAQ,GAAG,IAAI,CAACL,KAAK,CAACI,MAAM,CAACG,IAAI,IAAI;MACvC,OAAOA,IAAI,CAACC,IAAI,CAACG,OAAO,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,OAAO,IAAIb,oBAAoB,CAACO,QAAQ,CAAC;EAC7C;EAEOO,IAAIA,CAACC,SAAoD,EAAwB;IACpF,MAAMC,MAAM,GAAG,CAAC,GAAG,IAAI,CAACd,KAAK,CAAC;IAE9B,IAAIa,SAAS,EAAE;MACXC,MAAM,CAACF,IAAI,CAACC,SAAS,CAAC;IAC1B,CAAC,MAAM;MACHC,MAAM,CAACF,IAAI,CAAC,CAACG,CAAC,EAAEC,CAAC,KAAK;QAClB,OAAOD,CAAC,CAACE,KAAK,CAACC,aAAa,CAACF,CAAC,CAACC,KAAK,CAAC;MACzC,CAAC,CAAC;IACN;IAEA,OAAO,IAAInB,oBAAoB,CAACgB,MAAM,CAAC;EAC3C;EAEOK,MAAMA,CAAA,EAAiB;IAC1B,OAAO,CAAC,GAAG,IAAI,CAACnB,KAAK,CAAC;EAC1B;AACJ","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsCollection.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsCollection.ts"],"sourcesContent":["import type { PathType } from \"./PathType.js\";\n\nexport type PathOption = {\n    value: string;\n    label: string;\n    type: PathType;\n};\n\nexport class StatePathsCollection {\n    private readonly items: PathOption[];\n\n    constructor(items: PathOption[]) {\n        this.items = items;\n    }\n\n    public map(callback: (item: PathOption, index: number) => any): StatePathsCollection {\n        const mapped = this.items.map(callback);\n        return new StatePathsCollection(mapped);\n    }\n\n    public filter(callback: (item: PathOption, index: number) => boolean): StatePathsCollection {\n        const filtered = this.items.filter(callback);\n        return new StatePathsCollection(filtered);\n    }\n\n    public filterScalars(): StatePathsCollection {\n        const filtered = this.items.filter(item => {\n            return item.type.isScalar();\n        });\n        return new StatePathsCollection(filtered);\n    }\n\n    public filterArray(): StatePathsCollection {\n        const filtered = this.items.filter(item => {\n            return item.type.isArray();\n        });\n        return new StatePathsCollection(filtered);\n    }\n\n    public sort(compareFn?: (a: PathOption, b: PathOption) => number): StatePathsCollection {\n        const sorted = [...this.items];\n\n        if (compareFn) {\n            sorted.sort(compareFn);\n        } else {\n            sorted.sort((a, b) => {\n                return a.label.localeCompare(b.label);\n            });\n        }\n\n        return new StatePathsCollection(sorted);\n    }\n\n    public values(): PathOption[] {\n        return [...this.items];\n    }\n}\n"],"names":["StatePathsCollection","items","callback","mapped","filtered","item","compareFn","sorted","a","b"],"mappings":"AAQO,MAAMA;IAGT,YAAYC,KAAmB,CAAE;QAC7B,IAAI,CAAC,KAAK,GAAGA;IACjB;IAEO,IAAIC,QAAkD,EAAwB;QACjF,MAAMC,SAAS,IAAI,CAAC,KAAK,CAAC,GAAG,CAACD;QAC9B,OAAO,IAAIF,qBAAqBG;IACpC;IAEO,OAAOD,QAAsD,EAAwB;QACxF,MAAME,WAAW,IAAI,CAAC,KAAK,CAAC,MAAM,CAACF;QACnC,OAAO,IAAIF,qBAAqBI;IACpC;IAEO,gBAAsC;QACzC,MAAMA,WAAW,IAAI,CAAC,KAAK,CAAC,MAAM,CAACC,CAAAA,OACxBA,KAAK,IAAI,CAAC,QAAQ;QAE7B,OAAO,IAAIL,qBAAqBI;IACpC;IAEO,cAAoC;QACvC,MAAMA,WAAW,IAAI,CAAC,KAAK,CAAC,MAAM,CAACC,CAAAA,OACxBA,KAAK,IAAI,CAAC,OAAO;QAE5B,OAAO,IAAIL,qBAAqBI;IACpC;IAEO,KAAKE,SAAoD,EAAwB;QACpF,MAAMC,SAAS;eAAI,IAAI,CAAC,KAAK;SAAC;QAE9B,IAAID,WACAC,OAAO,IAAI,CAACD;aAEZC,OAAO,IAAI,CAAC,CAACC,GAAGC,IACLD,EAAE,KAAK,CAAC,aAAa,CAACC,EAAE,KAAK;QAI5C,OAAO,IAAIT,qBAAqBO;IACpC;IAEO,SAAuB;QAC1B,OAAO;eAAI,IAAI,CAAC,KAAK;SAAC;IAC1B;AACJ"}