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

package/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.tsx"],"sourcesContent":["import type { NodeDto } from \"@webiny/admin-ui\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport React from \"react\";\nimport get from \"lodash/get.js\";\n\nexport type ElementNode = NodeDto<{\n    draggable: boolean;\n    icon: React.ReactNode;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n}>;\n\nexport type ElementNodeData = {\n    id: string;\n    label: string;\n    image: string;\n    canDrag: boolean;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n};\n\nexport function flattenElements(\n    elements: Record<string, ElementNodeData>,\n    activeElementId?: string\n): ElementNode[] {\n    const result: ElementNode[] = [];\n    const asArray = Object.values(elements);\n\n    for (const key in elements) {\n        const node = elements[key];\n\n        if (!node.parent) {\n            continue;\n        }\n\n        result.push({\n            id: node.id,\n            label: node.label,\n            parentId: node.parent.id,\n            active: node.id === activeElementId,\n            droppable: asArray.filter(el => el.parent?.id === node.id).length > 0,\n            data: {\n                parent: node.parent,\n                icon: node.image ? (\n                    <InlineSvg src={node.image} className={\"fill-neutral-strong\"} />\n                ) : (\n                    <></>\n                ),\n                draggable: node.canDrag\n            }\n        });\n    }\n\n    return result;\n}\n\ninterface GetElementNodeDataParams {\n    components: EditorState[\"components\"];\n    elements: Document[\"elements\"];\n    bindings: Document[\"bindings\"];\n}\n\nexport function getElementNodeData({\n    components,\n    elements,\n    bindings\n}: GetElementNodeDataParams): Record<string, ElementNodeData> {\n    const getIndex = (elementId: string, parentId: string, slot: string) => {\n        const elementBindings = bindings[parentId];\n        if (!elementBindings) {\n            return -1;\n        }\n\n        const slotValue = get(elementBindings, `inputs.${slot}`);\n        if (!slotValue) {\n            return -1;\n        }\n\n        if (slotValue.list) {\n            return slotValue.static.indexOf(elementId);\n        }\n\n        return -1;\n    };\n\n    return Object.values(elements).reduce((acc, element) => {\n        if (element.id === \"root\") {\n            return { ...acc, [element.id]: { id: element.id, label: \"Root\", image: \"\" } };\n        }\n\n        const component = components[element.component.name] ?? {\n            label: \"\",\n            image: null,\n            canDrag: false\n        };\n\n        const parentId = element.parent!.id;\n        const slot = element.parent!.slot;\n\n        return {\n            ...acc,\n            [element.id]: {\n                id: element.id,\n                label: component?.label ?? component?.name ?? \"\",\n                image: component.image,\n                canDrag: component.canDrag,\n                parent: {\n                    id: parentId,\n                    slot,\n                    index: getIndex(element.id, parentId, slot)\n                }\n            }\n        };\n    }, {});\n}\n"],"names":["flattenElements","elements","activeElementId","result","asArray","Object","key","node","el","InlineSvg","getElementNodeData","components","bindings","getIndex","elementId","parentId","slot","elementBindings","slotValue","get","acc","element","component"],"mappings":";;;AA6BO,SAASA,gBACZC,QAAyC,EACzCC,eAAwB;IAExB,MAAMC,SAAwB,EAAE;IAChC,MAAMC,UAAUC,OAAO,MAAM,CAACJ;IAE9B,IAAK,MAAMK,OAAOL,SAAU;QACxB,MAAMM,OAAON,QAAQ,CAACK,IAAI;QAE1B,IAAKC,KAAK,MAAM,EAIhBJ,OAAO,IAAI,CAAC;YACR,IAAII,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,MAAM,CAAC,EAAE;YACxB,QAAQA,KAAK,EAAE,KAAKL;YACpB,WAAWE,QAAQ,MAAM,CAACI,CAAAA,KAAMA,GAAG,MAAM,EAAE,OAAOD,KAAK,EAAE,EAAE,MAAM,GAAG;YACpE,MAAM;gBACF,QAAQA,KAAK,MAAM;gBACnB,MAAMA,KAAK,KAAK,GAAG,WAAH,GACZ,oBAACE,WAASA;oBAAC,KAAKF,KAAK,KAAK;oBAAE,WAAW;mCAEvC;gBAEJ,WAAWA,KAAK,OAAO;YAC3B;QACJ;IACJ;IAEA,OAAOJ;AACX;AAQO,SAASO,mBAAmB,EAC/BC,UAAU,EACVV,QAAQ,EACRW,QAAQ,EACe;IACvB,MAAMC,WAAW,CAACC,WAAmBC,UAAkBC;QACnD,MAAMC,kBAAkBL,QAAQ,CAACG,SAAS;QAC1C,IAAI,CAACE,iBACD,OAAO;QAGX,MAAMC,YAAYC,IAAIF,iBAAiB,CAAC,OAAO,EAAED,MAAM;QACvD,IAAI,CAACE,WACD,OAAO;QAGX,IAAIA,UAAU,IAAI,EACd,OAAOA,UAAU,MAAM,CAAC,OAAO,CAACJ;QAGpC,OAAO;IACX;IAEA,OAAOT,OAAO,MAAM,CAACJ,UAAU,MAAM,CAAC,CAACmB,KAAKC;QACxC,IAAIA,AAAe,WAAfA,QAAQ,EAAE,EACV,OAAO;YAAE,GAAGD,GAAG;YAAE,CAACC,QAAQ,EAAE,CAAC,EAAE;gBAAE,IAAIA,QAAQ,EAAE;gBAAE,OAAO;gBAAQ,OAAO;YAAG;QAAE;QAGhF,MAAMC,YAAYX,UAAU,CAACU,QAAQ,SAAS,CAAC,IAAI,CAAC,IAAI;YACpD,OAAO;YACP,OAAO;YACP,SAAS;QACb;QAEA,MAAMN,WAAWM,QAAQ,MAAM,CAAE,EAAE;QACnC,MAAML,OAAOK,QAAQ,MAAM,CAAE,IAAI;QAEjC,OAAO;YACH,GAAGD,GAAG;YACN,CAACC,QAAQ,EAAE,CAAC,EAAE;gBACV,IAAIA,QAAQ,EAAE;gBACd,OAAOC,WAAW,SAASA,WAAW,QAAQ;gBAC9C,OAAOA,UAAU,KAAK;gBACtB,SAASA,UAAU,OAAO;gBAC1B,QAAQ;oBACJ,IAAIP;oBACJC;oBACA,OAAOH,SAASQ,QAAQ,EAAE,EAAEN,UAAUC;gBAC1C;YACJ;QACJ;IACJ,GAAG,CAAC;AACR"}

package/BaseEditor/hooks/Boxes.js

@@ -1,47 +1,43 @@
 import { Box } from "../defaultConfig/Content/Preview/Box.js";
-export class Boxes {
-  constructor(initial) {
-    this.boxes = new Map(Object.entries(initial).map(([id, box]) => {
-      return [id, new Box(id, box)];
-    }));
-  }
-  get(id) {
-    return this.boxes.get(id);
-  }
-  filter(predicate) {
-    const result = {};
-    for (const [id, box] of this.boxes) {
-      if (predicate(box)) {
-        result[id] = box.toObject();
-      }
+class Boxes {
+    constructor(initial){
+        this.boxes = new Map(Object.entries(initial).map(([id, box])=>[
+                id,
+                new Box(id, box)
+            ]));
     }
-    return new Boxes(result);
-  }
-  map(transform) {
-    const result = [];
-    const entries = Array.from(this.boxes.entries());
-    for (let index = 0; index < entries.length; index++) {
-      const [, box] = entries[index];
-      const isFirst = index === 0;
-      const isLast = index === entries.length - 1;
-      result.push(transform(box, {
-        index,
-        isFirst,
-        isLast
-      }));
+    get(id) {
+        return this.boxes.get(id);
     }
-    return result;
-  }
-  entries() {
-    return this.boxes.entries();
-  }
-  toObject() {
-    const obj = {};
-    for (const [id, box] of this.boxes) {
-      obj[id] = box.toObject();
+    filter(predicate) {
+        const result = {};
+        for (const [id, box] of this.boxes)if (predicate(box)) result[id] = box.toObject();
+        return new Boxes(result);
+    }
+    map(transform) {
+        const result = [];
+        const entries = Array.from(this.boxes.entries());
+        for(let index = 0; index < entries.length; index++){
+            const [, box] = entries[index];
+            const isFirst = 0 === index;
+            const isLast = index === entries.length - 1;
+            result.push(transform(box, {
+                index,
+                isFirst,
+                isLast
+            }));
+        }
+        return result;
+    }
+    entries() {
+        return this.boxes.entries();
+    }
+    toObject() {
+        const obj = {};
+        for (const [id, box] of this.boxes)obj[id] = box.toObject();
+        return obj;
     }
-    return obj;
-  }
 }
+export { Boxes };
 
 //# sourceMappingURL=Boxes.js.map

package/BaseEditor/hooks/Boxes.js.map

@@ -1 +1 @@
-{"version":3,"names":["Box","Boxes","constructor","initial","boxes","Map","Object","entries","map","id","box","get","filter","predicate","result","toObject","transform","Array","from","index","length","isFirst","isLast","push","obj"],"sources":["Boxes.ts"],"sourcesContent":["import type { BoxData } from \"@webiny/website-builder-sdk\";\nimport { Box } from \"~/BaseEditor/defaultConfig/Content/Preview/Box.js\";\n\nexport class Boxes {\n    private readonly boxes: Map<string, Box>;\n\n    constructor(initial: Record<string, BoxData>) {\n        this.boxes = new Map(\n            Object.entries(initial).map(([id, box]) => {\n                return [id, new Box(id, box)];\n            })\n        );\n    }\n\n    get(id: string): Box | undefined {\n        return this.boxes.get(id);\n    }\n\n    filter(predicate: (box: Box) => boolean): Boxes {\n        const result: Record<string, BoxData> = {};\n        for (const [id, box] of this.boxes) {\n            if (predicate(box)) {\n                result[id] = box.toObject();\n            }\n        }\n        return new Boxes(result);\n    }\n\n    map<T>(\n        transform: (box: Box, meta: { index: number; isFirst: boolean; isLast: boolean }) => T\n    ): T[] {\n        const result: T[] = [];\n        const entries = Array.from(this.boxes.entries());\n\n        for (let index = 0; index < entries.length; index++) {\n            const [, box] = entries[index];\n            const isFirst = index === 0;\n            const isLast = index === entries.length - 1;\n            result.push(transform(box, { index, isFirst, isLast }));\n        }\n\n        return result;\n    }\n\n    entries() {\n        return this.boxes.entries();\n    }\n\n    toObject(): Record<string, BoxData> {\n        const obj: Record<string, BoxData> = {};\n        for (const [id, box] of this.boxes) {\n            obj[id] = box.toObject();\n        }\n        return obj;\n    }\n}\n"],"mappings":"AACA,SAASA,GAAG;AAEZ,OAAO,MAAMC,KAAK,CAAC;EAGfC,WAAWA,CAACC,OAAgC,EAAE;IAC1C,IAAI,CAACC,KAAK,GAAG,IAAIC,GAAG,CAChBC,MAAM,CAACC,OAAO,CAACJ,OAAO,CAAC,CAACK,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,GAAG,CAAC,KAAK;MACvC,OAAO,CAACD,EAAE,EAAE,IAAIT,GAAG,CAACS,EAAE,EAAEC,GAAG,CAAC,CAAC;IACjC,CAAC,CACL,CAAC;EACL;EAEAC,GAAGA,CAACF,EAAU,EAAmB;IAC7B,OAAO,IAAI,CAACL,KAAK,CAACO,GAAG,CAACF,EAAE,CAAC;EAC7B;EAEAG,MAAMA,CAACC,SAAgC,EAAS;IAC5C,MAAMC,MAA+B,GAAG,CAAC,CAAC;IAC1C,KAAK,MAAM,CAACL,EAAE,EAAEC,GAAG,CAAC,IAAI,IAAI,CAACN,KAAK,EAAE;MAChC,IAAIS,SAAS,CAACH,GAAG,CAAC,EAAE;QAChBI,MAAM,CAACL,EAAE,CAAC,GAAGC,GAAG,CAACK,QAAQ,CAAC,CAAC;MAC/B;IACJ;IACA,OAAO,IAAId,KAAK,CAACa,MAAM,CAAC;EAC5B;EAEAN,GAAGA,CACCQ,SAAsF,EACnF;IACH,MAAMF,MAAW,GAAG,EAAE;IACtB,MAAMP,OAAO,GAAGU,KAAK,CAACC,IAAI,CAAC,IAAI,CAACd,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC;IAEhD,KAAK,IAAIY,KAAK,GAAG,CAAC,EAAEA,KAAK,GAAGZ,OAAO,CAACa,MAAM,EAAED,KAAK,EAAE,EAAE;MACjD,MAAM,GAAGT,GAAG,CAAC,GAAGH,OAAO,CAACY,KAAK,CAAC;MAC9B,MAAME,OAAO,GAAGF,KAAK,KAAK,CAAC;MAC3B,MAAMG,MAAM,GAAGH,KAAK,KAAKZ,OAAO,CAACa,MAAM,GAAG,CAAC;MAC3CN,MAAM,CAACS,IAAI,CAACP,SAAS,CAACN,GAAG,EAAE;QAAES,KAAK;QAAEE,OAAO;QAAEC;MAAO,CAAC,CAAC,CAAC;IAC3D;IAEA,OAAOR,MAAM;EACjB;EAEAP,OAAOA,CAAA,EAAG;IACN,OAAO,IAAI,CAACH,KAAK,CAACG,OAAO,CAAC,CAAC;EAC/B;EAEAQ,QAAQA,CAAA,EAA4B;IAChC,MAAMS,GAA4B,GAAG,CAAC,CAAC;IACvC,KAAK,MAAM,CAACf,EAAE,EAAEC,GAAG,CAAC,IAAI,IAAI,CAACN,KAAK,EAAE;MAChCoB,GAAG,CAACf,EAAE,CAAC,GAAGC,GAAG,CAACK,QAAQ,CAAC,CAAC;IAC5B;IACA,OAAOS,GAAG;EACd;AACJ","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/Boxes.js","sources":["../../../src/BaseEditor/hooks/Boxes.ts"],"sourcesContent":["import type { BoxData } from \"@webiny/website-builder-sdk\";\nimport { Box } from \"~/BaseEditor/defaultConfig/Content/Preview/Box.js\";\n\nexport class Boxes {\n    private readonly boxes: Map<string, Box>;\n\n    constructor(initial: Record<string, BoxData>) {\n        this.boxes = new Map(\n            Object.entries(initial).map(([id, box]) => {\n                return [id, new Box(id, box)];\n            })\n        );\n    }\n\n    get(id: string): Box | undefined {\n        return this.boxes.get(id);\n    }\n\n    filter(predicate: (box: Box) => boolean): Boxes {\n        const result: Record<string, BoxData> = {};\n        for (const [id, box] of this.boxes) {\n            if (predicate(box)) {\n                result[id] = box.toObject();\n            }\n        }\n        return new Boxes(result);\n    }\n\n    map<T>(\n        transform: (box: Box, meta: { index: number; isFirst: boolean; isLast: boolean }) => T\n    ): T[] {\n        const result: T[] = [];\n        const entries = Array.from(this.boxes.entries());\n\n        for (let index = 0; index < entries.length; index++) {\n            const [, box] = entries[index];\n            const isFirst = index === 0;\n            const isLast = index === entries.length - 1;\n            result.push(transform(box, { index, isFirst, isLast }));\n        }\n\n        return result;\n    }\n\n    entries() {\n        return this.boxes.entries();\n    }\n\n    toObject(): Record<string, BoxData> {\n        const obj: Record<string, BoxData> = {};\n        for (const [id, box] of this.boxes) {\n            obj[id] = box.toObject();\n        }\n        return obj;\n    }\n}\n"],"names":["Boxes","initial","Map","Object","id","box","Box","predicate","result","transform","entries","Array","index","isFirst","isLast","obj"],"mappings":";AAGO,MAAMA;IAGT,YAAYC,OAAgC,CAAE;QAC1C,IAAI,CAAC,KAAK,GAAG,IAAIC,IACbC,OAAO,OAAO,CAACF,SAAS,GAAG,CAAC,CAAC,CAACG,IAAIC,IAAI,GAC3B;gBAACD;gBAAI,IAAIE,IAAIF,IAAIC;aAAK;IAGzC;IAEA,IAAID,EAAU,EAAmB;QAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA;IAC1B;IAEA,OAAOG,SAAgC,EAAS;QAC5C,MAAMC,SAAkC,CAAC;QACzC,KAAK,MAAM,CAACJ,IAAIC,IAAI,IAAI,IAAI,CAAC,KAAK,CAC9B,IAAIE,UAAUF,MACVG,MAAM,CAACJ,GAAG,GAAGC,IAAI,QAAQ;QAGjC,OAAO,IAAIL,MAAMQ;IACrB;IAEA,IACIC,SAAsF,EACnF;QACH,MAAMD,SAAc,EAAE;QACtB,MAAME,UAAUC,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;QAE7C,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQ,MAAM,EAAEE,QAAS;YACjD,MAAM,GAAGP,IAAI,GAAGK,OAAO,CAACE,MAAM;YAC9B,MAAMC,UAAUD,AAAU,MAAVA;YAChB,MAAME,SAASF,UAAUF,QAAQ,MAAM,GAAG;YAC1CF,OAAO,IAAI,CAACC,UAAUJ,KAAK;gBAAEO;gBAAOC;gBAASC;YAAO;QACxD;QAEA,OAAON;IACX;IAEA,UAAU;QACN,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO;IAC7B;IAEA,WAAoC;QAChC,MAAMO,MAA+B,CAAC;QACtC,KAAK,MAAM,CAACX,IAAIC,IAAI,IAAI,IAAI,CAAC,KAAK,CAC9BU,GAAG,CAACX,GAAG,GAAGC,IAAI,QAAQ;QAE1B,OAAOU;IACX;AACJ"}

package/BaseEditor/hooks/useActiveElement.js

@@ -2,31 +2,33 @@ import { autorun, toJS } from "mobx";
 import { useCallback, useEffect, useState } from "react";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../commands.js";
-import deepEqual from "deep-equal";
-export const useActiveElement = () => {
-  const [activeElement, setActiveElement] = useState(null);
-  const editor = useDocumentEditor();
-  useEffect(() => {
-    return autorun(() => {
-      const editorState = editor.getEditorState().read();
-      const documentState = editor.getDocumentState().read();
-      const activeElementId = editorState.selectedElement;
-      if (activeElementId) {
-        const newElement = toJS(documentState.elements[activeElementId]);
-        if (!deepEqual(newElement, activeElement)) {
-          setActiveElement(newElement);
-        }
-      } else {
-        setActiveElement(null);
-      }
-    });
-  }, [activeElement]);
-  const setActiveElementId = useCallback(id => {
-    editor.executeCommand(Commands.SelectElement, {
-      id
-    });
-  }, [editor]);
-  return [activeElement, setActiveElementId];
+import deep_equal from "deep-equal";
+const useActiveElement = ()=>{
+    const [activeElement, setActiveElement] = useState(null);
+    const editor = useDocumentEditor();
+    useEffect(()=>autorun(()=>{
+            const editorState = editor.getEditorState().read();
+            const documentState = editor.getDocumentState().read();
+            const activeElementId = editorState.selectedElement;
+            if (activeElementId) {
+                const newElement = toJS(documentState.elements[activeElementId]);
+                if (!deep_equal(newElement, activeElement)) setActiveElement(newElement);
+            } else setActiveElement(null);
+        }), [
+        activeElement
+    ]);
+    const setActiveElementId = useCallback((id)=>{
+        editor.executeCommand(Commands.SelectElement, {
+            id
+        });
+    }, [
+        editor
+    ]);
+    return [
+        activeElement,
+        setActiveElementId
+    ];
 };
+export { useActiveElement };
 
 //# sourceMappingURL=useActiveElement.js.map

package/BaseEditor/hooks/useActiveElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["autorun","toJS","useCallback","useEffect","useState","useDocumentEditor","Commands","deepEqual","useActiveElement","activeElement","setActiveElement","editor","editorState","getEditorState","read","documentState","getDocumentState","activeElementId","selectedElement","newElement","elements","setActiveElementId","id","executeCommand","SelectElement"],"sources":["useActiveElement.ts"],"sourcesContent":["import { autorun, toJS } from \"mobx\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"../commands.js\";\nimport deepEqual from \"deep-equal\";\n\nexport const useActiveElement = () => {\n    const [activeElement, setActiveElement] = useState<DocumentElement | null>(null);\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return autorun(() => {\n            const editorState = editor.getEditorState().read();\n            const documentState = editor.getDocumentState().read();\n\n            const activeElementId = editorState.selectedElement;\n\n            if (activeElementId) {\n                const newElement = toJS(documentState.elements[activeElementId]);\n                if (!deepEqual(newElement, activeElement)) {\n                    setActiveElement(newElement);\n                }\n            } else {\n                setActiveElement(null);\n            }\n        });\n    }, [activeElement]);\n\n    const setActiveElementId = useCallback(\n        (id: string | null) => {\n            editor.executeCommand(Commands.SelectElement, { id });\n        },\n        [editor]\n    );\n\n    return [activeElement, setActiveElementId] as const;\n};\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,IAAI,QAAQ,MAAM;AACpC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,iBAAiB;AAE1B,SAASC,QAAQ;AACjB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGN,QAAQ,CAAyB,IAAI,CAAC;EAChF,MAAMO,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAElCF,SAAS,CAAC,MAAM;IACZ,OAAOH,OAAO,CAAC,MAAM;MACjB,MAAMY,WAAW,GAAGD,MAAM,CAACE,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;MAClD,MAAMC,aAAa,GAAGJ,MAAM,CAACK,gBAAgB,CAAC,CAAC,CAACF,IAAI,CAAC,CAAC;MAEtD,MAAMG,eAAe,GAAGL,WAAW,CAACM,eAAe;MAEnD,IAAID,eAAe,EAAE;QACjB,MAAME,UAAU,GAAGlB,IAAI,CAACc,aAAa,CAACK,QAAQ,CAACH,eAAe,CAAC,CAAC;QAChE,IAAI,CAACV,SAAS,CAACY,UAAU,EAAEV,aAAa,CAAC,EAAE;UACvCC,gBAAgB,CAACS,UAAU,CAAC;QAChC;MACJ,CAAC,MAAM;QACHT,gBAAgB,CAAC,IAAI,CAAC;MAC1B;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,aAAa,CAAC,CAAC;EAEnB,MAAMY,kBAAkB,GAAGnB,WAAW,CACjCoB,EAAiB,IAAK;IACnBX,MAAM,CAACY,cAAc,CAACjB,QAAQ,CAACkB,aAAa,EAAE;MAAEF;IAAG,CAAC,CAAC;EACzD,CAAC,EACD,CAACX,MAAM,CACX,CAAC;EAED,OAAO,CAACF,aAAa,EAAEY,kBAAkB,CAAC;AAC9C,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useActiveElement.js","sources":["../../../src/BaseEditor/hooks/useActiveElement.ts"],"sourcesContent":["import { autorun, toJS } from \"mobx\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"../commands.js\";\nimport deepEqual from \"deep-equal\";\n\nexport const useActiveElement = () => {\n    const [activeElement, setActiveElement] = useState<DocumentElement | null>(null);\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return autorun(() => {\n            const editorState = editor.getEditorState().read();\n            const documentState = editor.getDocumentState().read();\n\n            const activeElementId = editorState.selectedElement;\n\n            if (activeElementId) {\n                const newElement = toJS(documentState.elements[activeElementId]);\n                if (!deepEqual(newElement, activeElement)) {\n                    setActiveElement(newElement);\n                }\n            } else {\n                setActiveElement(null);\n            }\n        });\n    }, [activeElement]);\n\n    const setActiveElementId = useCallback(\n        (id: string | null) => {\n            editor.executeCommand(Commands.SelectElement, { id });\n        },\n        [editor]\n    );\n\n    return [activeElement, setActiveElementId] as const;\n};\n"],"names":["useActiveElement","activeElement","setActiveElement","useState","editor","useDocumentEditor","useEffect","autorun","editorState","documentState","activeElementId","newElement","toJS","deepEqual","setActiveElementId","useCallback","id","Commands"],"mappings":";;;;;AAOO,MAAMA,mBAAmB;IAC5B,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAiC;IAC3E,MAAMC,SAASC;IAEfC,UAAU,IACCC,QAAQ;YACX,MAAMC,cAAcJ,OAAO,cAAc,GAAG,IAAI;YAChD,MAAMK,gBAAgBL,OAAO,gBAAgB,GAAG,IAAI;YAEpD,MAAMM,kBAAkBF,YAAY,eAAe;YAEnD,IAAIE,iBAAiB;gBACjB,MAAMC,aAAaC,KAAKH,cAAc,QAAQ,CAACC,gBAAgB;gBAC/D,IAAI,CAACG,WAAUF,YAAYV,gBACvBC,iBAAiBS;YAEzB,OACIT,iBAAiB;QAEzB,IACD;QAACD;KAAc;IAElB,MAAMa,qBAAqBC,YACvB,CAACC;QACGZ,OAAO,cAAc,CAACa,SAAS,aAAa,EAAE;YAAED;QAAG;IACvD,GACA;QAACZ;KAAO;IAGZ,OAAO;QAACH;QAAea;KAAmB;AAC9C"}

package/BaseEditor/hooks/useBreakpoint.js

@@ -3,37 +3,39 @@ import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { useSelectFromEditor } from "./useSelectFromEditor.js";
 import { BASE_BREAKPOINT } from "../../constants.js";
 import { useWebsiteBuilderTheme } from "../components/index.js";
-export const useBreakpoint = () => {
-  const {
-    theme
-  } = useWebsiteBuilderTheme();
-  const breakpoints = theme?.breakpoints ?? [];
-  const editor = useDocumentEditor();
-  const activeBreakpoint = useSelectFromEditor(state => {
-    return state.breakpoint ?? breakpoints[0]?.name ?? "desktop";
-  });
-  const breakpoint = useMemo(() => {
-    const bp = breakpoints.find(bp => bp.name === activeBreakpoint);
-    return bp ?? {
-      name: BASE_BREAKPOINT,
-      title: "Base Breakpoint",
-      description: "",
-      icon: "",
-      minWidth: 0,
-      maxWidth: 4000
+const useBreakpoint = ()=>{
+    const { theme } = useWebsiteBuilderTheme();
+    const breakpoints = theme?.breakpoints ?? [];
+    const editor = useDocumentEditor();
+    const activeBreakpoint = useSelectFromEditor((state)=>state.breakpoint ?? breakpoints[0]?.name ?? "desktop");
+    const breakpoint = useMemo(()=>{
+        const bp = breakpoints.find((bp)=>bp.name === activeBreakpoint);
+        return bp ?? {
+            name: BASE_BREAKPOINT,
+            title: "Base Breakpoint",
+            description: "",
+            icon: "",
+            minWidth: 0,
+            maxWidth: 4000
+        };
+    }, [
+        activeBreakpoint,
+        breakpoints.length
+    ]);
+    const setBreakpoint = useCallback((mode)=>{
+        editor.updateEditor((state)=>{
+            state.breakpoint = mode;
+        });
+    }, [
+        editor
+    ]);
+    return {
+        isBaseBreakpoint: breakpoint.name === BASE_BREAKPOINT,
+        breakpoint,
+        breakpoints,
+        setBreakpoint
     };
-  }, [activeBreakpoint, breakpoints.length]);
-  const setBreakpoint = useCallback(mode => {
-    editor.updateEditor(state => {
-      state.breakpoint = mode;
-    });
-  }, [editor]);
-  return {
-    isBaseBreakpoint: breakpoint.name === BASE_BREAKPOINT,
-    breakpoint,
-    breakpoints,
-    setBreakpoint
-  };
 };
+export { useBreakpoint };
 
 //# sourceMappingURL=useBreakpoint.js.map

package/BaseEditor/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","useDocumentEditor","useSelectFromEditor","BASE_BREAKPOINT","useWebsiteBuilderTheme","useBreakpoint","theme","breakpoints","editor","activeBreakpoint","state","breakpoint","name","bp","find","title","description","icon","minWidth","maxWidth","length","setBreakpoint","mode","updateEditor","isBaseBreakpoint"],"sources":["useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\n\nexport const useBreakpoint = () => {\n    const { theme } = useWebsiteBuilderTheme();\n    const breakpoints = theme?.breakpoints ?? [];\n\n    const editor = useDocumentEditor();\n    const activeBreakpoint = useSelectFromEditor<string>(state => {\n        return state.breakpoint ?? breakpoints[0]?.name ?? \"desktop\";\n    });\n\n    const breakpoint = useMemo(() => {\n        const bp = breakpoints.find(bp => bp.name === activeBreakpoint);\n        return (\n            bp ?? {\n                name: BASE_BREAKPOINT,\n                title: \"Base Breakpoint\",\n                description: \"\",\n                icon: \"\",\n                minWidth: 0,\n                maxWidth: 4000\n            }\n        );\n    }, [activeBreakpoint, breakpoints.length]);\n\n    const setBreakpoint = useCallback(\n        (mode: string) => {\n            editor.updateEditor(state => {\n                state.breakpoint = mode;\n            });\n        },\n        [editor]\n    );\n\n    return {\n        isBaseBreakpoint: breakpoint.name === BASE_BREAKPOINT,\n        breakpoint,\n        breakpoints,\n        setBreakpoint\n    };\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,iBAAiB;AAC1B,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AACxB,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGF,sBAAsB,CAAC,CAAC;EAC1C,MAAMG,WAAW,GAAGD,KAAK,EAAEC,WAAW,IAAI,EAAE;EAE5C,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAMQ,gBAAgB,GAAGP,mBAAmB,CAASQ,KAAK,IAAI;IAC1D,OAAOA,KAAK,CAACC,UAAU,IAAIJ,WAAW,CAAC,CAAC,CAAC,EAAEK,IAAI,IAAI,SAAS;EAChE,CAAC,CAAC;EAEF,MAAMD,UAAU,GAAGX,OAAO,CAAC,MAAM;IAC7B,MAAMa,EAAE,GAAGN,WAAW,CAACO,IAAI,CAACD,EAAE,IAAIA,EAAE,CAACD,IAAI,KAAKH,gBAAgB,CAAC;IAC/D,OACII,EAAE,IAAI;MACFD,IAAI,EAAET,eAAe;MACrBY,KAAK,EAAE,iBAAiB;MACxBC,WAAW,EAAE,EAAE;MACfC,IAAI,EAAE,EAAE;MACRC,QAAQ,EAAE,CAAC;MACXC,QAAQ,EAAE;IACd,CAAC;EAET,CAAC,EAAE,CAACV,gBAAgB,EAAEF,WAAW,CAACa,MAAM,CAAC,CAAC;EAE1C,MAAMC,aAAa,GAAGtB,WAAW,CAC5BuB,IAAY,IAAK;IACdd,MAAM,CAACe,YAAY,CAACb,KAAK,IAAI;MACzBA,KAAK,CAACC,UAAU,GAAGW,IAAI;IAC3B,CAAC,CAAC;EACN,CAAC,EACD,CAACd,MAAM,CACX,CAAC;EAED,OAAO;IACHgB,gBAAgB,EAAEb,UAAU,CAACC,IAAI,KAAKT,eAAe;IACrDQ,UAAU;IACVJ,WAAW;IACXc;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useBreakpoint.js","sources":["../../../src/BaseEditor/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\n\nexport const useBreakpoint = () => {\n    const { theme } = useWebsiteBuilderTheme();\n    const breakpoints = theme?.breakpoints ?? [];\n\n    const editor = useDocumentEditor();\n    const activeBreakpoint = useSelectFromEditor<string>(state => {\n        return state.breakpoint ?? breakpoints[0]?.name ?? \"desktop\";\n    });\n\n    const breakpoint = useMemo(() => {\n        const bp = breakpoints.find(bp => bp.name === activeBreakpoint);\n        return (\n            bp ?? {\n                name: BASE_BREAKPOINT,\n                title: \"Base Breakpoint\",\n                description: \"\",\n                icon: \"\",\n                minWidth: 0,\n                maxWidth: 4000\n            }\n        );\n    }, [activeBreakpoint, breakpoints.length]);\n\n    const setBreakpoint = useCallback(\n        (mode: string) => {\n            editor.updateEditor(state => {\n                state.breakpoint = mode;\n            });\n        },\n        [editor]\n    );\n\n    return {\n        isBaseBreakpoint: breakpoint.name === BASE_BREAKPOINT,\n        breakpoint,\n        breakpoints,\n        setBreakpoint\n    };\n};\n"],"names":["useBreakpoint","theme","useWebsiteBuilderTheme","breakpoints","editor","useDocumentEditor","activeBreakpoint","useSelectFromEditor","state","breakpoint","useMemo","bp","BASE_BREAKPOINT","setBreakpoint","useCallback","mode"],"mappings":";;;;;AAMO,MAAMA,gBAAgB;IACzB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,cAAcF,OAAO,eAAe,EAAE;IAE5C,MAAMG,SAASC;IACf,MAAMC,mBAAmBC,oBAA4BC,CAAAA,QAC1CA,MAAM,UAAU,IAAIL,WAAW,CAAC,EAAE,EAAE,QAAQ;IAGvD,MAAMM,aAAaC,QAAQ;QACvB,MAAMC,KAAKR,YAAY,IAAI,CAACQ,CAAAA,KAAMA,GAAG,IAAI,KAAKL;QAC9C,OACIK,MAAM;YACF,MAAMC;YACN,OAAO;YACP,aAAa;YACb,MAAM;YACN,UAAU;YACV,UAAU;QACd;IAER,GAAG;QAACN;QAAkBH,YAAY,MAAM;KAAC;IAEzC,MAAMU,gBAAgBC,YAClB,CAACC;QACGX,OAAO,YAAY,CAACI,CAAAA;YAChBA,MAAM,UAAU,GAAGO;QACvB;IACJ,GACA;QAACX;KAAO;IAGZ,OAAO;QACH,kBAAkBK,WAAW,IAAI,KAAKG;QACtCH;QACAN;QACAU;IACJ;AACJ"}

package/BaseEditor/hooks/useComponent.js

@@ -1,8 +1,13 @@
 import { useCallback } from "react";
 import { useSelectFromEditor } from "./useSelectFromEditor.js";
-export const useComponent = name => {
-  const selector = useCallback(state => state.components[name], [name]);
-  return useSelectFromEditor(selector, [name]);
+const useComponent = (name)=>{
+    const selector = useCallback((state)=>state.components[name], [
+        name
+    ]);
+    return useSelectFromEditor(selector, [
+        name
+    ]);
 };
+export { useComponent };
 
 //# sourceMappingURL=useComponent.js.map

package/BaseEditor/hooks/useComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useSelectFromEditor","useComponent","name","selector","state","components"],"sources":["useComponent.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\n\nexport const useComponent = (name: string) => {\n    const selector = useCallback((state: EditorState) => state.components[name], [name]);\n\n    return useSelectFromEditor(selector, [name]);\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,mBAAmB;AAG5B,OAAO,MAAMC,YAAY,GAAIC,IAAY,IAAK;EAC1C,MAAMC,QAAQ,GAAGJ,WAAW,CAAEK,KAAkB,IAAKA,KAAK,CAACC,UAAU,CAACH,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEpF,OAAOF,mBAAmB,CAACG,QAAQ,EAAE,CAACD,IAAI,CAAC,CAAC;AAChD,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useComponent.js","sources":["../../../src/BaseEditor/hooks/useComponent.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\n\nexport const useComponent = (name: string) => {\n    const selector = useCallback((state: EditorState) => state.components[name], [name]);\n\n    return useSelectFromEditor(selector, [name]);\n};\n"],"names":["useComponent","name","selector","useCallback","state","useSelectFromEditor"],"mappings":";;AAIO,MAAMA,eAAe,CAACC;IACzB,MAAMC,WAAWC,YAAY,CAACC,QAAuBA,MAAM,UAAU,CAACH,KAAK,EAAE;QAACA;KAAK;IAEnF,OAAOI,oBAAoBH,UAAU;QAACD;KAAK;AAC/C"}

package/BaseEditor/hooks/useCreateElement.d.ts

@@ -1,5 +1,5 @@
 import { Commands } from "../../BaseEditor/commands.js";
 import type { CommandPayload } from "../../editorSdk/createCommand.js";
 export declare function useCreateElement(): {
-    createElement: (payload: CommandPayload<typeof Commands.CreateElement>) => void;
+    createElement: (payload: CommandPayload<typeof Commands.CreateElement>) => Promise<void>;
 };

package/BaseEditor/hooks/useCreateElement.js

@@ -1,14 +1,15 @@
 import { useCallback } from "react";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../commands.js";
-export function useCreateElement() {
-  const editor = useDocumentEditor();
-  const createElement = useCallback(payload => {
-    editor.executeCommand(Commands.CreateElement, payload);
-  }, [editor]);
-  return {
-    createElement
-  };
+function useCreateElement() {
+    const editor = useDocumentEditor();
+    const createElement = useCallback((payload)=>editor.executeCommand(Commands.CreateElement, payload), [
+        editor
+    ]);
+    return {
+        createElement
+    };
 }
+export { useCreateElement };
 
 //# sourceMappingURL=useCreateElement.js.map

package/BaseEditor/hooks/useCreateElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useDocumentEditor","Commands","useCreateElement","editor","createElement","payload","executeCommand","CreateElement"],"sources":["useCreateElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/commands.js\";\nimport type { CommandPayload } from \"~/editorSdk/createCommand.js\";\n\nexport function useCreateElement() {\n    const editor = useDocumentEditor();\n\n    const createElement = useCallback(\n        (payload: CommandPayload<typeof Commands.CreateElement>) => {\n            editor.executeCommand(Commands.CreateElement, payload);\n        },\n        [editor]\n    );\n\n    return { createElement };\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AAGjB,OAAO,SAASC,gBAAgBA,CAAA,EAAG;EAC/B,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAElC,MAAMI,aAAa,GAAGL,WAAW,CAC5BM,OAAsD,IAAK;IACxDF,MAAM,CAACG,cAAc,CAACL,QAAQ,CAACM,aAAa,EAAEF,OAAO,CAAC;EAC1D,CAAC,EACD,CAACF,MAAM,CACX,CAAC;EAED,OAAO;IAAEC;EAAc,CAAC;AAC5B","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useCreateElement.js","sources":["../../../src/BaseEditor/hooks/useCreateElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/commands.js\";\nimport type { CommandPayload } from \"~/editorSdk/createCommand.js\";\n\nexport function useCreateElement() {\n    const editor = useDocumentEditor();\n\n    const createElement = useCallback(\n        (payload: CommandPayload<typeof Commands.CreateElement>) => {\n            return editor.executeCommand(Commands.CreateElement, payload);\n        },\n        [editor]\n    );\n\n    return { createElement };\n}\n"],"names":["useCreateElement","editor","useDocumentEditor","createElement","useCallback","payload","Commands"],"mappings":";;;AAKO,SAASA;IACZ,MAAMC,SAASC;IAEf,MAAMC,gBAAgBC,YAClB,CAACC,UACUJ,OAAO,cAAc,CAACK,SAAS,aAAa,EAAED,UAEzD;QAACJ;KAAO;IAGZ,OAAO;QAAEE;IAAc;AAC3B"}

package/BaseEditor/hooks/useDeleteElement.js

@@ -1,16 +1,19 @@
 import { useCallback } from "react";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../commands.js";
-export function useDeleteElement() {
-  const editor = useDocumentEditor();
-  const deleteElement = useCallback(id => {
-    editor.executeCommand(Commands.DeleteElement, {
-      id
-    });
-  }, [editor]);
-  return {
-    deleteElement
-  };
+function useDeleteElement() {
+    const editor = useDocumentEditor();
+    const deleteElement = useCallback((id)=>{
+        editor.executeCommand(Commands.DeleteElement, {
+            id
+        });
+    }, [
+        editor
+    ]);
+    return {
+        deleteElement
+    };
 }
+export { useDeleteElement };
 
 //# sourceMappingURL=useDeleteElement.js.map

package/BaseEditor/hooks/useDeleteElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useDocumentEditor","Commands","useDeleteElement","editor","deleteElement","id","executeCommand","DeleteElement"],"sources":["useDeleteElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/commands.js\";\n\nexport function useDeleteElement() {\n    const editor = useDocumentEditor();\n\n    const deleteElement = useCallback(\n        (id: string) => {\n            editor.executeCommand(Commands.DeleteElement, { id });\n        },\n        [editor]\n    );\n\n    return { deleteElement };\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AAEjB,OAAO,SAASC,gBAAgBA,CAAA,EAAG;EAC/B,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAElC,MAAMI,aAAa,GAAGL,WAAW,CAC5BM,EAAU,IAAK;IACZF,MAAM,CAACG,cAAc,CAACL,QAAQ,CAACM,aAAa,EAAE;MAAEF;IAAG,CAAC,CAAC;EACzD,CAAC,EACD,CAACF,MAAM,CACX,CAAC;EAED,OAAO;IAAEC;EAAc,CAAC;AAC5B","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useDeleteElement.js","sources":["../../../src/BaseEditor/hooks/useDeleteElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/commands.js\";\n\nexport function useDeleteElement() {\n    const editor = useDocumentEditor();\n\n    const deleteElement = useCallback(\n        (id: string) => {\n            editor.executeCommand(Commands.DeleteElement, { id });\n        },\n        [editor]\n    );\n\n    return { deleteElement };\n}\n"],"names":["useDeleteElement","editor","useDocumentEditor","deleteElement","useCallback","id","Commands"],"mappings":";;;AAIO,SAASA;IACZ,MAAMC,SAASC;IAEf,MAAMC,gBAAgBC,YAClB,CAACC;QACGJ,OAAO,cAAc,CAACK,SAAS,aAAa,EAAE;YAAED;QAAG;IACvD,GACA;QAACJ;KAAO;IAGZ,OAAO;QAAEE;IAAc;AAC3B"}

package/BaseEditor/hooks/useElementInputs.js

@@ -3,31 +3,25 @@ import { useSelectFromDocument } from "./useSelectFromDocument.js";
 import { useSelectFromEditor } from "./useSelectFromEditor.js";
 import { useUpdateElement } from "./useUpdateElement.js";
 import { $getElementInputValues } from "../../editorSdk/utils/$getElementInputValues.js";
-
-/**
- * Returns the resolved input values for the given element, plus an updater callback.
- *
- * @param elementId  The element whose inputs to resolve (null returns {}).
- * @param depth      How many levels of slot children to resolve (default 0).
- */
-export function useElementInputs(elementId, depth = 0) {
-  const components = useSelectFromEditor(state => state.components);
-  const {
-    updateElement
-  } = useUpdateElement();
-
-  // Compute inputs inside the selector so MobX tracks the specific observable
-  // reads (elements, bindings, state) and triggers rerenders on changes.
-  const inputs = useSelectFromDocument(doc => $getElementInputValues(doc, components, elementId, depth), [components, elementId, depth]);
-  const updateInputs = useCallback(updater => {
-    if (elementId) {
-      updateElement(elementId, updater);
-    }
-  }, [updateElement, elementId]);
-  return {
-    inputs,
-    updateInputs
-  };
+function useElementInputs(elementId, depth = 0) {
+    const components = useSelectFromEditor((state)=>state.components);
+    const { updateElement } = useUpdateElement();
+    const inputs = useSelectFromDocument((doc)=>$getElementInputValues(doc, components, elementId, depth), [
+        components,
+        elementId,
+        depth
+    ]);
+    const updateInputs = useCallback((updater)=>{
+        if (elementId) updateElement(elementId, updater);
+    }, [
+        updateElement,
+        elementId
+    ]);
+    return {
+        inputs,
+        updateInputs
+    };
 }
+export { useElementInputs };
 
 //# sourceMappingURL=useElementInputs.js.map

package/BaseEditor/hooks/useElementInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useSelectFromDocument","useSelectFromEditor","useUpdateElement","$getElementInputValues","useElementInputs","elementId","depth","components","state","updateElement","inputs","doc","updateInputs","updater"],"sources":["useElementInputs.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useSelectFromDocument } from \"./useSelectFromDocument.js\";\nimport { useSelectFromEditor } from \"./useSelectFromEditor.js\";\nimport { useUpdateElement } from \"./useUpdateElement.js\";\nimport { $getElementInputValues } from \"~/editorSdk/utils/$getElementInputValues.js\";\n\n/**\n * Returns the resolved input values for the given element, plus an updater callback.\n *\n * @param elementId  The element whose inputs to resolve (null returns {}).\n * @param depth      How many levels of slot children to resolve (default 0).\n */\nexport function useElementInputs<T extends Record<string, any> = Record<string, any>>(\n    elementId: string | null,\n    depth = 0\n) {\n    const components = useSelectFromEditor(state => state.components);\n    const { updateElement } = useUpdateElement();\n\n    // Compute inputs inside the selector so MobX tracks the specific observable\n    // reads (elements, bindings, state) and triggers rerenders on changes.\n    const inputs = useSelectFromDocument(\n        doc => $getElementInputValues(doc, components, elementId, depth) as T,\n        [components, elementId, depth]\n    );\n\n    const updateInputs = useCallback(\n        (updater: (inputs: T) => void) => {\n            if (elementId) {\n                updateElement<T>(elementId, updater);\n            }\n        },\n        [updateElement, elementId]\n    );\n\n    return { inputs, updateInputs };\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAC5B,SAASC,gBAAgB;AACzB,SAASC,sBAAsB;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC5BC,SAAwB,EACxBC,KAAK,GAAG,CAAC,EACX;EACE,MAAMC,UAAU,GAAGN,mBAAmB,CAACO,KAAK,IAAIA,KAAK,CAACD,UAAU,CAAC;EACjE,MAAM;IAAEE;EAAc,CAAC,GAAGP,gBAAgB,CAAC,CAAC;;EAE5C;EACA;EACA,MAAMQ,MAAM,GAAGV,qBAAqB,CAChCW,GAAG,IAAIR,sBAAsB,CAACQ,GAAG,EAAEJ,UAAU,EAAEF,SAAS,EAAEC,KAAK,CAAM,EACrE,CAACC,UAAU,EAAEF,SAAS,EAAEC,KAAK,CACjC,CAAC;EAED,MAAMM,YAAY,GAAGb,WAAW,CAC3Bc,OAA4B,IAAK;IAC9B,IAAIR,SAAS,EAAE;MACXI,aAAa,CAAIJ,SAAS,EAAEQ,OAAO,CAAC;IACxC;EACJ,CAAC,EACD,CAACJ,aAAa,EAAEJ,SAAS,CAC7B,CAAC;EAED,OAAO;IAAEK,MAAM;IAAEE;EAAa,CAAC;AACnC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useElementInputs.js","sources":["../../../src/BaseEditor/hooks/useElementInputs.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useSelectFromDocument } from \"./useSelectFromDocument.js\";\nimport { useSelectFromEditor } from \"./useSelectFromEditor.js\";\nimport { useUpdateElement } from \"./useUpdateElement.js\";\nimport { $getElementInputValues } from \"~/editorSdk/utils/$getElementInputValues.js\";\n\n/**\n * Returns the resolved input values for the given element, plus an updater callback.\n *\n * @param elementId  The element whose inputs to resolve (null returns {}).\n * @param depth      How many levels of slot children to resolve (default 0).\n */\nexport function useElementInputs<T extends Record<string, any> = Record<string, any>>(\n    elementId: string | null,\n    depth = 0\n) {\n    const components = useSelectFromEditor(state => state.components);\n    const { updateElement } = useUpdateElement();\n\n    // Compute inputs inside the selector so MobX tracks the specific observable\n    // reads (elements, bindings, state) and triggers rerenders on changes.\n    const inputs = useSelectFromDocument(\n        doc => $getElementInputValues(doc, components, elementId, depth) as T,\n        [components, elementId, depth]\n    );\n\n    const updateInputs = useCallback(\n        (updater: (inputs: T) => void) => {\n            if (elementId) {\n                updateElement<T>(elementId, updater);\n            }\n        },\n        [updateElement, elementId]\n    );\n\n    return { inputs, updateInputs };\n}\n"],"names":["useElementInputs","elementId","depth","components","useSelectFromEditor","state","updateElement","useUpdateElement","inputs","useSelectFromDocument","doc","$getElementInputValues","updateInputs","useCallback","updater"],"mappings":";;;;;AAYO,SAASA,iBACZC,SAAwB,EACxBC,QAAQ,CAAC;IAET,MAAMC,aAAaC,oBAAoBC,CAAAA,QAASA,MAAM,UAAU;IAChE,MAAM,EAAEC,aAAa,EAAE,GAAGC;IAI1B,MAAMC,SAASC,sBACXC,CAAAA,MAAOC,uBAAuBD,KAAKP,YAAYF,WAAWC,QAC1D;QAACC;QAAYF;QAAWC;KAAM;IAGlC,MAAMU,eAAeC,YACjB,CAACC;QACG,IAAIb,WACAK,cAAiBL,WAAWa;IAEpC,GACA;QAACR;QAAeL;KAAU;IAG9B,OAAO;QAAEO;QAAQI;IAAa;AAClC"}

package/BaseEditor/hooks/useElementInputsAst.js

@@ -1,14 +1,15 @@
 import { useMemo } from "react";
 import { useElementComponentManifest } from "../defaultConfig/Content/Preview/useElementComponentManifest.js";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
-export const useElementInputsAst = elementId => {
-  const componentManifest = useElementComponentManifest(elementId ?? "");
-  return useMemo(() => {
-    if (componentManifest) {
-      return ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
-    }
-    return [];
-  }, [componentManifest?.inputs]);
+const useElementInputsAst = (elementId)=>{
+    const componentManifest = useElementComponentManifest(elementId ?? "");
+    return useMemo(()=>{
+        if (componentManifest) return ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
+        return [];
+    }, [
+        componentManifest?.inputs
+    ]);
 };
+export { useElementInputsAst };
 
 //# sourceMappingURL=useElementInputsAst.js.map

package/BaseEditor/hooks/useElementInputsAst.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useElementComponentManifest","ComponentManifestToAstConverter","useElementInputsAst","elementId","componentManifest","convert","inputs"],"sources":["useElementInputsAst.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\n\nexport const useElementInputsAst = (elementId?: string) => {\n    const componentManifest = useElementComponentManifest(elementId ?? \"\");\n\n    return useMemo(() => {\n        if (componentManifest) {\n            return ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        }\n        return [];\n    }, [componentManifest?.inputs]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,2BAA2B;AACpC,SAASC,+BAA+B,QAAQ,6BAA6B;AAE7E,OAAO,MAAMC,mBAAmB,GAAIC,SAAkB,IAAK;EACvD,MAAMC,iBAAiB,GAAGJ,2BAA2B,CAACG,SAAS,IAAI,EAAE,CAAC;EAEtE,OAAOJ,OAAO,CAAC,MAAM;IACjB,IAAIK,iBAAiB,EAAE;MACnB,OAAOH,+BAA+B,CAACI,OAAO,CAACD,iBAAiB,CAACE,MAAM,IAAI,EAAE,CAAC;IAClF;IACA,OAAO,EAAE;EACb,CAAC,EAAE,CAACF,iBAAiB,EAAEE,MAAM,CAAC,CAAC;AACnC,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useElementInputsAst.js","sources":["../../../src/BaseEditor/hooks/useElementInputsAst.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\n\nexport const useElementInputsAst = (elementId?: string) => {\n    const componentManifest = useElementComponentManifest(elementId ?? \"\");\n\n    return useMemo(() => {\n        if (componentManifest) {\n            return ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        }\n        return [];\n    }, [componentManifest?.inputs]);\n};\n"],"names":["useElementInputsAst","elementId","componentManifest","useElementComponentManifest","useMemo","ComponentManifestToAstConverter"],"mappings":";;;AAIO,MAAMA,sBAAsB,CAACC;IAChC,MAAMC,oBAAoBC,4BAA4BF,aAAa;IAEnE,OAAOG,QAAQ;QACX,IAAIF,mBACA,OAAOG,gCAAgC,OAAO,CAACH,kBAAkB,MAAM,IAAI,EAAE;QAEjF,OAAO,EAAE;IACb,GAAG;QAACA,mBAAmB;KAAO;AAClC"}

package/BaseEditor/hooks/useElementOverlay.js

@@ -1,3 +1 @@
 export { useElementOverlay } from "../defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js";
-
-//# sourceMappingURL=useElementOverlay.js.map

package/BaseEditor/hooks/useHighlightedElement.js

@@ -1,26 +1,23 @@
 import { autorun, toJS } from "mobx";
 import { useEffect, useState } from "react";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
-import deepEqual from "deep-equal";
-export const useHighlightedElement = () => {
-  const [highlightedElement, setHighlightedElement] = useState(null);
-  const editor = useDocumentEditor();
-  useEffect(() => {
-    return autorun(() => {
-      const editorState = editor.getEditorState().read();
-      const documentState = editor.getDocumentState().read();
-      const elementId = editorState.highlightedElement;
-      if (elementId) {
-        const newElement = toJS(documentState.elements[elementId]);
-        if (!deepEqual(newElement, highlightedElement)) {
-          setHighlightedElement(newElement);
-        }
-      } else {
-        setHighlightedElement(null);
-      }
-    });
-  }, [highlightedElement]);
-  return highlightedElement;
+import deep_equal from "deep-equal";
+const useHighlightedElement = ()=>{
+    const [highlightedElement, setHighlightedElement] = useState(null);
+    const editor = useDocumentEditor();
+    useEffect(()=>autorun(()=>{
+            const editorState = editor.getEditorState().read();
+            const documentState = editor.getDocumentState().read();
+            const elementId = editorState.highlightedElement;
+            if (elementId) {
+                const newElement = toJS(documentState.elements[elementId]);
+                if (!deep_equal(newElement, highlightedElement)) setHighlightedElement(newElement);
+            } else setHighlightedElement(null);
+        }), [
+        highlightedElement
+    ]);
+    return highlightedElement;
 };
+export { useHighlightedElement };
 
 //# sourceMappingURL=useHighlightedElement.js.map

package/BaseEditor/hooks/useHighlightedElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["autorun","toJS","useEffect","useState","useDocumentEditor","deepEqual","useHighlightedElement","highlightedElement","setHighlightedElement","editor","editorState","getEditorState","read","documentState","getDocumentState","elementId","newElement","elements"],"sources":["useHighlightedElement.ts"],"sourcesContent":["import { autorun, toJS } from \"mobx\";\nimport { useEffect, useState } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport deepEqual from \"deep-equal\";\n\nexport const useHighlightedElement = () => {\n    const [highlightedElement, setHighlightedElement] = useState<DocumentElement | null>(null);\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return autorun(() => {\n            const editorState = editor.getEditorState().read();\n            const documentState = editor.getDocumentState().read();\n\n            const elementId = editorState.highlightedElement;\n\n            if (elementId) {\n                const newElement = toJS(documentState.elements[elementId]);\n                if (!deepEqual(newElement, highlightedElement)) {\n                    setHighlightedElement(newElement);\n                }\n            } else {\n                setHighlightedElement(null);\n            }\n        });\n    }, [highlightedElement]);\n\n    return highlightedElement;\n};\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,IAAI,QAAQ,MAAM;AACpC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,iBAAiB;AAE1B,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAM;EACvC,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGL,QAAQ,CAAyB,IAAI,CAAC;EAC1F,MAAMM,MAAM,GAAGL,iBAAiB,CAAC,CAAC;EAElCF,SAAS,CAAC,MAAM;IACZ,OAAOF,OAAO,CAAC,MAAM;MACjB,MAAMU,WAAW,GAAGD,MAAM,CAACE,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;MAClD,MAAMC,aAAa,GAAGJ,MAAM,CAACK,gBAAgB,CAAC,CAAC,CAACF,IAAI,CAAC,CAAC;MAEtD,MAAMG,SAAS,GAAGL,WAAW,CAACH,kBAAkB;MAEhD,IAAIQ,SAAS,EAAE;QACX,MAAMC,UAAU,GAAGf,IAAI,CAACY,aAAa,CAACI,QAAQ,CAACF,SAAS,CAAC,CAAC;QAC1D,IAAI,CAACV,SAAS,CAACW,UAAU,EAAET,kBAAkB,CAAC,EAAE;UAC5CC,qBAAqB,CAACQ,UAAU,CAAC;QACrC;MACJ,CAAC,MAAM;QACHR,qBAAqB,CAAC,IAAI,CAAC;MAC/B;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,kBAAkB,CAAC,CAAC;EAExB,OAAOA,kBAAkB;AAC7B,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useHighlightedElement.js","sources":["../../../src/BaseEditor/hooks/useHighlightedElement.ts"],"sourcesContent":["import { autorun, toJS } from \"mobx\";\nimport { useEffect, useState } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport deepEqual from \"deep-equal\";\n\nexport const useHighlightedElement = () => {\n    const [highlightedElement, setHighlightedElement] = useState<DocumentElement | null>(null);\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return autorun(() => {\n            const editorState = editor.getEditorState().read();\n            const documentState = editor.getDocumentState().read();\n\n            const elementId = editorState.highlightedElement;\n\n            if (elementId) {\n                const newElement = toJS(documentState.elements[elementId]);\n                if (!deepEqual(newElement, highlightedElement)) {\n                    setHighlightedElement(newElement);\n                }\n            } else {\n                setHighlightedElement(null);\n            }\n        });\n    }, [highlightedElement]);\n\n    return highlightedElement;\n};\n"],"names":["useHighlightedElement","highlightedElement","setHighlightedElement","useState","editor","useDocumentEditor","useEffect","autorun","editorState","documentState","elementId","newElement","toJS","deepEqual"],"mappings":";;;;AAMO,MAAMA,wBAAwB;IACjC,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGC,SAAiC;IACrF,MAAMC,SAASC;IAEfC,UAAU,IACCC,QAAQ;YACX,MAAMC,cAAcJ,OAAO,cAAc,GAAG,IAAI;YAChD,MAAMK,gBAAgBL,OAAO,gBAAgB,GAAG,IAAI;YAEpD,MAAMM,YAAYF,YAAY,kBAAkB;YAEhD,IAAIE,WAAW;gBACX,MAAMC,aAAaC,KAAKH,cAAc,QAAQ,CAACC,UAAU;gBACzD,IAAI,CAACG,WAAUF,YAAYV,qBACvBC,sBAAsBS;YAE9B,OACIT,sBAAsB;QAE9B,IACD;QAACD;KAAmB;IAEvB,OAAOA;AACX"}

package/BaseEditor/hooks/useInputValue.js

@@ -1,3 +1 @@
 export * from "../defaultConfig/Sidebar/ElementSettings/useInputValue.js";
-
-//# sourceMappingURL=useInputValue.js.map