@webiny/app-website-builder 6.3.0-beta.4 → 6.4.0-beta.0

package/BaseEditor/hooks/useKeyHandler.js

@@ -1,63 +1,55 @@
-import React from "react";
+import react from "react";
 import { isHotkey } from "is-hotkey";
 import { mdbid } from "@webiny/utils";
 const keyStack = {};
 let listener = false;
-const filter = ["TEXTAREA", "INPUT"];
-const isContentEditable = value => {
-  return ["true", true].includes(value);
-};
-const setupListener = () => {
-  if (listener || !document.body) {
-    return;
-  }
-  document.body.addEventListener("keydown", ev => {
-    if (!ev.target) {
-      return;
-    }
-    const target = ev.target;
-    // We ignore all keyboard events coming from within contentEditable element and inputs.
-    if (filter.includes(target.nodeName) || isContentEditable(target.contentEditable)) {
-      return;
-    }
-    const matchedKey = Object.keys(keyStack).find(key => isHotkey(key, ev));
-    if (matchedKey && keyStack[matchedKey].length > 0) {
-      const item = keyStack[matchedKey][0];
-      item.handler(ev);
-      ev.stopPropagation();
-    }
-  });
-  listener = true;
+const filter = [
+    "TEXTAREA",
+    "INPUT"
+];
+const isContentEditable = (value)=>[
+        "true",
+        true
+    ].includes(value);
+const setupListener = ()=>{
+    if (listener || !document.body) return;
+    document.body.addEventListener("keydown", (ev)=>{
+        if (!ev.target) return;
+        const target = ev.target;
+        if (filter.includes(target.nodeName) || isContentEditable(target.contentEditable)) return;
+        const matchedKey = Object.keys(keyStack).find((key)=>isHotkey(key, ev));
+        if (matchedKey && keyStack[matchedKey].length > 0) {
+            const item = keyStack[matchedKey][0];
+            item.handler(ev);
+            ev.stopPropagation();
+        }
+    });
+    listener = true;
 };
-const addKeyHandler = (id, key, handler) => {
-  setupListener();
-  keyStack[key] = keyStack[key] || [];
-  if (!keyStack[key].find(item => item.id === id)) {
-    keyStack[key].unshift({
-      id,
-      handler
+const addKeyHandler = (id, key, handler)=>{
+    setupListener();
+    keyStack[key] = keyStack[key] || [];
+    if (!keyStack[key].find((item)=>item.id === id)) keyStack[key].unshift({
+        id,
+        handler
     });
-  }
 };
-const removeKeyHandler = (id, key) => {
-  if (!keyStack[key]) {
-    return;
-  }
-  const index = keyStack[key].findIndex(item => item.id === id);
-  if (index >= 0) {
-    keyStack[key].splice(index, 1);
-  }
+const removeKeyHandler = (id, key)=>{
+    if (!keyStack[key]) return;
+    const index = keyStack[key].findIndex((item)=>item.id === id);
+    if (index >= 0) keyStack[key].splice(index, 1);
 };
-export function useKeyHandler() {
-  const idRef = React.useRef(mdbid());
-  return React.useMemo(() => ({
-    addKeyHandler(key, handler) {
-      addKeyHandler(idRef.current, key, handler);
-    },
-    removeKeyHandler(key) {
-      removeKeyHandler(idRef.current, key);
-    }
-  }), []);
+function useKeyHandler() {
+    const idRef = react.useRef(mdbid());
+    return react.useMemo(()=>({
+            addKeyHandler (key, handler) {
+                addKeyHandler(idRef.current, key, handler);
+            },
+            removeKeyHandler (key) {
+                removeKeyHandler(idRef.current, key);
+            }
+        }), []);
 }
+export { useKeyHandler };
 
 //# sourceMappingURL=useKeyHandler.js.map

package/BaseEditor/hooks/useKeyHandler.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","isHotkey","mdbid","keyStack","listener","filter","isContentEditable","value","includes","setupListener","document","body","addEventListener","ev","target","nodeName","contentEditable","matchedKey","Object","keys","find","key","length","item","handler","stopPropagation","addKeyHandler","id","unshift","removeKeyHandler","index","findIndex","splice","useKeyHandler","idRef","useRef","useMemo","current"],"sources":["useKeyHandler.ts"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport React from \"react\";\nimport { isHotkey } from \"is-hotkey\";\nimport { mdbid } from \"@webiny/utils\";\n\ninterface KeyHandler {\n    id: string;\n    handler: any;\n}\nconst keyStack: Record<string, KeyHandler[]> = {};\n\nlet listener = false;\nconst filter = [\"TEXTAREA\", \"INPUT\"];\n\nconst isContentEditable = (value: any) => {\n    return [\"true\", true].includes(value);\n};\n\nconst setupListener = (): void => {\n    if (listener || !document.body) {\n        return;\n    }\n    document.body.addEventListener(\"keydown\", ev => {\n        if (!ev.target) {\n            return;\n        }\n        const target = ev.target as HTMLElement;\n        // We ignore all keyboard events coming from within contentEditable element and inputs.\n        if (filter.includes(target.nodeName) || isContentEditable(target.contentEditable)) {\n            return;\n        }\n\n        const matchedKey = Object.keys(keyStack).find(key => isHotkey(key, ev));\n\n        if (matchedKey && keyStack[matchedKey].length > 0) {\n            const item = keyStack[matchedKey][0];\n            item.handler(ev);\n            ev.stopPropagation();\n        }\n    });\n\n    listener = true;\n};\n\nconst addKeyHandler = (\n    id: string,\n    key: string,\n    handler: (e: SyntheticEvent<HTMLElement>) => void\n) => {\n    setupListener();\n    keyStack[key] = keyStack[key] || [];\n    if (!keyStack[key].find(item => item.id === id)) {\n        keyStack[key].unshift({ id, handler });\n    }\n};\n\nconst removeKeyHandler = (id: string, key: string): void => {\n    if (!keyStack[key]) {\n        return;\n    }\n\n    const index = keyStack[key].findIndex(item => item.id === id);\n    if (index >= 0) {\n        keyStack[key].splice(index, 1);\n    }\n};\n\ntype AddKeyHandlerType = (key: string, handler: (e: SyntheticEvent<HTMLElement>) => void) => void;\n\ntype RemoveKeyHandlerType = (key: string) => void;\n\nexport function useKeyHandler(): {\n    addKeyHandler: AddKeyHandlerType;\n    removeKeyHandler: RemoveKeyHandlerType;\n} {\n    const idRef = React.useRef(mdbid());\n\n    return React.useMemo(\n        () => ({\n            addKeyHandler(key, handler) {\n                addKeyHandler(idRef.current, key, handler);\n            },\n            removeKeyHandler(key) {\n                removeKeyHandler(idRef.current, key);\n            }\n        }),\n        []\n    );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useKeyHandler.js","sources":["../../../src/BaseEditor/hooks/useKeyHandler.ts"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport React from \"react\";\nimport { isHotkey } from \"is-hotkey\";\nimport { mdbid } from \"@webiny/utils\";\n\ninterface KeyHandler {\n    id: string;\n    handler: any;\n}\nconst keyStack: Record<string, KeyHandler[]> = {};\n\nlet listener = false;\nconst filter = [\"TEXTAREA\", \"INPUT\"];\n\nconst isContentEditable = (value: any) => {\n    return [\"true\", true].includes(value);\n};\n\nconst setupListener = (): void => {\n    if (listener || !document.body) {\n        return;\n    }\n    document.body.addEventListener(\"keydown\", ev => {\n        if (!ev.target) {\n            return;\n        }\n        const target = ev.target as HTMLElement;\n        // We ignore all keyboard events coming from within contentEditable element and inputs.\n        if (filter.includes(target.nodeName) || isContentEditable(target.contentEditable)) {\n            return;\n        }\n\n        const matchedKey = Object.keys(keyStack).find(key => isHotkey(key, ev));\n\n        if (matchedKey && keyStack[matchedKey].length > 0) {\n            const item = keyStack[matchedKey][0];\n            item.handler(ev);\n            ev.stopPropagation();\n        }\n    });\n\n    listener = true;\n};\n\nconst addKeyHandler = (\n    id: string,\n    key: string,\n    handler: (e: SyntheticEvent<HTMLElement>) => void\n) => {\n    setupListener();\n    keyStack[key] = keyStack[key] || [];\n    if (!keyStack[key].find(item => item.id === id)) {\n        keyStack[key].unshift({ id, handler });\n    }\n};\n\nconst removeKeyHandler = (id: string, key: string): void => {\n    if (!keyStack[key]) {\n        return;\n    }\n\n    const index = keyStack[key].findIndex(item => item.id === id);\n    if (index >= 0) {\n        keyStack[key].splice(index, 1);\n    }\n};\n\ntype AddKeyHandlerType = (key: string, handler: (e: SyntheticEvent<HTMLElement>) => void) => void;\n\ntype RemoveKeyHandlerType = (key: string) => void;\n\nexport function useKeyHandler(): {\n    addKeyHandler: AddKeyHandlerType;\n    removeKeyHandler: RemoveKeyHandlerType;\n} {\n    const idRef = React.useRef(mdbid());\n\n    return React.useMemo(\n        () => ({\n            addKeyHandler(key, handler) {\n                addKeyHandler(idRef.current, key, handler);\n            },\n            removeKeyHandler(key) {\n                removeKeyHandler(idRef.current, key);\n            }\n        }),\n        []\n    );\n}\n"],"names":["keyStack","listener","filter","isContentEditable","value","setupListener","document","ev","target","matchedKey","Object","key","isHotkey","item","addKeyHandler","id","handler","removeKeyHandler","index","useKeyHandler","idRef","React","mdbid"],"mappings":";;;AASA,MAAMA,WAAyC,CAAC;AAEhD,IAAIC,WAAW;AACf,MAAMC,SAAS;IAAC;IAAY;CAAQ;AAEpC,MAAMC,oBAAoB,CAACC,QAChB;QAAC;QAAQ;KAAK,CAAC,QAAQ,CAACA;AAGnC,MAAMC,gBAAgB;IAClB,IAAIJ,YAAY,CAACK,SAAS,IAAI,EAC1B;IAEJA,SAAS,IAAI,CAAC,gBAAgB,CAAC,WAAWC,CAAAA;QACtC,IAAI,CAACA,GAAG,MAAM,EACV;QAEJ,MAAMC,SAASD,GAAG,MAAM;QAExB,IAAIL,OAAO,QAAQ,CAACM,OAAO,QAAQ,KAAKL,kBAAkBK,OAAO,eAAe,GAC5E;QAGJ,MAAMC,aAAaC,OAAO,IAAI,CAACV,UAAU,IAAI,CAACW,CAAAA,MAAOC,SAASD,KAAKJ;QAEnE,IAAIE,cAAcT,QAAQ,CAACS,WAAW,CAAC,MAAM,GAAG,GAAG;YAC/C,MAAMI,OAAOb,QAAQ,CAACS,WAAW,CAAC,EAAE;YACpCI,KAAK,OAAO,CAACN;YACbA,GAAG,eAAe;QACtB;IACJ;IAEAN,WAAW;AACf;AAEA,MAAMa,gBAAgB,CAClBC,IACAJ,KACAK;IAEAX;IACAL,QAAQ,CAACW,IAAI,GAAGX,QAAQ,CAACW,IAAI,IAAI,EAAE;IACnC,IAAI,CAACX,QAAQ,CAACW,IAAI,CAAC,IAAI,CAACE,CAAAA,OAAQA,KAAK,EAAE,KAAKE,KACxCf,QAAQ,CAACW,IAAI,CAAC,OAAO,CAAC;QAAEI;QAAIC;IAAQ;AAE5C;AAEA,MAAMC,mBAAmB,CAACF,IAAYJ;IAClC,IAAI,CAACX,QAAQ,CAACW,IAAI,EACd;IAGJ,MAAMO,QAAQlB,QAAQ,CAACW,IAAI,CAAC,SAAS,CAACE,CAAAA,OAAQA,KAAK,EAAE,KAAKE;IAC1D,IAAIG,SAAS,GACTlB,QAAQ,CAACW,IAAI,CAAC,MAAM,CAACO,OAAO;AAEpC;AAMO,SAASC;IAIZ,MAAMC,QAAQC,MAAAA,MAAY,CAACC;IAE3B,OAAOD,MAAAA,OAAa,CAChB,IAAO;YACH,eAAcV,GAAG,EAAEK,OAAO;gBACtBF,cAAcM,MAAM,OAAO,EAAET,KAAKK;YACtC;YACA,kBAAiBL,GAAG;gBAChBM,iBAAiBG,MAAM,OAAO,EAAET;YACpC;QACJ,IACA,EAAE;AAEV"}

package/BaseEditor/hooks/usePreviewData.js

@@ -1,22 +1,18 @@
 import { useSelectFromEditor } from "./useSelectFromEditor.js";
 import { Boxes } from "./Boxes.js";
-export const usePreviewData = () => {
-  const {
-    viewport,
-    boxes
-  } = useSelectFromEditor(state => {
+const usePreviewData = ()=>{
+    const { viewport, boxes } = useSelectFromEditor((state)=>({
+            viewport: state.viewport,
+            boxes: state.boxes
+        }));
     return {
-      viewport: state.viewport,
-      boxes: state.boxes
+        viewport,
+        boxes: {
+            preview: new Boxes(boxes.preview),
+            editor: new Boxes(boxes.editor)
+        }
     };
-  });
-  return {
-    viewport,
-    boxes: {
-      preview: new Boxes(boxes.preview),
-      editor: new Boxes(boxes.editor)
-    }
-  };
 };
+export { usePreviewData };
 
 //# sourceMappingURL=usePreviewData.js.map

package/BaseEditor/hooks/usePreviewData.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelectFromEditor","Boxes","usePreviewData","viewport","boxes","state","preview","editor"],"sources":["usePreviewData.ts"],"sourcesContent":["import { useSelectFromEditor } from \"./useSelectFromEditor.js\";\nimport { Boxes } from \"./Boxes.js\";\n\nexport const usePreviewData = () => {\n    const { viewport, boxes } = useSelectFromEditor(state => {\n        return {\n            viewport: state.viewport,\n            boxes: state.boxes\n        };\n    });\n\n    return {\n        viewport,\n        boxes: {\n            preview: new Boxes(boxes.preview),\n            editor: new Boxes(boxes.editor)\n        }\n    };\n};\n"],"mappings":"AAAA,SAASA,mBAAmB;AAC5B,SAASC,KAAK;AAEd,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAM;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGJ,mBAAmB,CAACK,KAAK,IAAI;IACrD,OAAO;MACHF,QAAQ,EAAEE,KAAK,CAACF,QAAQ;MACxBC,KAAK,EAAEC,KAAK,CAACD;IACjB,CAAC;EACL,CAAC,CAAC;EAEF,OAAO;IACHD,QAAQ;IACRC,KAAK,EAAE;MACHE,OAAO,EAAE,IAAIL,KAAK,CAACG,KAAK,CAACE,OAAO,CAAC;MACjCC,MAAM,EAAE,IAAIN,KAAK,CAACG,KAAK,CAACG,MAAM;IAClC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/usePreviewData.js","sources":["../../../src/BaseEditor/hooks/usePreviewData.ts"],"sourcesContent":["import { useSelectFromEditor } from \"./useSelectFromEditor.js\";\nimport { Boxes } from \"./Boxes.js\";\n\nexport const usePreviewData = () => {\n    const { viewport, boxes } = useSelectFromEditor(state => {\n        return {\n            viewport: state.viewport,\n            boxes: state.boxes\n        };\n    });\n\n    return {\n        viewport,\n        boxes: {\n            preview: new Boxes(boxes.preview),\n            editor: new Boxes(boxes.editor)\n        }\n    };\n};\n"],"names":["usePreviewData","viewport","boxes","useSelectFromEditor","state","Boxes"],"mappings":";;AAGO,MAAMA,iBAAiB;IAC1B,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,oBAAoBC,CAAAA,QACrC;YACH,UAAUA,MAAM,QAAQ;YACxB,OAAOA,MAAM,KAAK;QACtB;IAGJ,OAAO;QACHH;QACA,OAAO;YACH,SAAS,IAAII,MAAMH,MAAM,OAAO;YAChC,QAAQ,IAAIG,MAAMH,MAAM,MAAM;QAClC;IACJ;AACJ"}

package/BaseEditor/hooks/useReservedUISpace.js

@@ -1,48 +1,43 @@
 import { useEffect } from "react";
-/**
- * Observe DOM elements that affect preview container width/height.
- * Sum dimensions of all `data-affects-preview` elements and execute the callback.
- */
-export const useReservedUISpace = callback => {
-  useEffect(() => {
-    const recalculate = () => {
-      const elements = document.querySelectorAll("[data-affects-preview]");
-      let totalWidth = 0;
-      let totalHeight = 0;
-      elements.forEach(el => {
-        const affects = el.getAttribute("data-affects-preview") ?? "";
-        const tracks = affects.split(",").map(s => s.trim());
-        const rect = el.getBoundingClientRect();
-        if (tracks.includes("width")) {
-          totalWidth += rect.width;
-        }
-        if (tracks.includes("height")) {
-          totalHeight += rect.height;
-        }
-      });
-      callback({
-        width: totalWidth,
-        height: totalHeight
-      });
-    };
-    const resizeObserver = new ResizeObserver(recalculate);
-    const observeExisting = () => {
-      document.querySelectorAll("[data-affects-preview]").forEach(el => {
-        resizeObserver.observe(el);
-      });
-    };
-    const mutationObserver = new MutationObserver(observeExisting);
-    mutationObserver.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-    observeExisting();
-    recalculate();
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, [callback]);
+const useReservedUISpace = (callback)=>{
+    useEffect(()=>{
+        const recalculate = ()=>{
+            const elements = document.querySelectorAll("[data-affects-preview]");
+            let totalWidth = 0;
+            let totalHeight = 0;
+            elements.forEach((el)=>{
+                const affects = el.getAttribute("data-affects-preview") ?? "";
+                const tracks = affects.split(",").map((s)=>s.trim());
+                const rect = el.getBoundingClientRect();
+                if (tracks.includes("width")) totalWidth += rect.width;
+                if (tracks.includes("height")) totalHeight += rect.height;
+            });
+            callback({
+                width: totalWidth,
+                height: totalHeight
+            });
+        };
+        const resizeObserver = new ResizeObserver(recalculate);
+        const observeExisting = ()=>{
+            document.querySelectorAll("[data-affects-preview]").forEach((el)=>{
+                resizeObserver.observe(el);
+            });
+        };
+        const mutationObserver = new MutationObserver(observeExisting);
+        mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        observeExisting();
+        recalculate();
+        return ()=>{
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [
+        callback
+    ]);
 };
+export { useReservedUISpace };
 
 //# sourceMappingURL=useReservedUISpace.js.map

package/BaseEditor/hooks/useReservedUISpace.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useReservedUISpace","callback","recalculate","elements","document","querySelectorAll","totalWidth","totalHeight","forEach","el","affects","getAttribute","tracks","split","map","s","trim","rect","getBoundingClientRect","includes","width","height","resizeObserver","ResizeObserver","observeExisting","observe","mutationObserver","MutationObserver","body","childList","subtree","disconnect"],"sources":["useReservedUISpace.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\ninterface Dimensions {\n    width: number;\n    height: number;\n}\n\n/**\n * Observe DOM elements that affect preview container width/height.\n * Sum dimensions of all `data-affects-preview` elements and execute the callback.\n */\nexport const useReservedUISpace = (callback: (dimensions: Dimensions) => void) => {\n    useEffect(() => {\n        const recalculate = () => {\n            const elements = document.querySelectorAll(\"[data-affects-preview]\");\n            let totalWidth = 0;\n            let totalHeight = 0;\n\n            elements.forEach(el => {\n                const affects = el.getAttribute(\"data-affects-preview\") ?? \"\";\n                const tracks = affects.split(\",\").map(s => s.trim());\n                const rect = el.getBoundingClientRect();\n\n                if (tracks.includes(\"width\")) {\n                    totalWidth += rect.width;\n                }\n\n                if (tracks.includes(\"height\")) {\n                    totalHeight += rect.height;\n                }\n            });\n\n            callback({ width: totalWidth, height: totalHeight });\n        };\n\n        const resizeObserver = new ResizeObserver(recalculate);\n\n        const observeExisting = () => {\n            document.querySelectorAll(\"[data-affects-preview]\").forEach(el => {\n                resizeObserver.observe(el);\n            });\n        };\n\n        const mutationObserver = new MutationObserver(observeExisting);\n        mutationObserver.observe(document.body, { childList: true, subtree: true });\n\n        observeExisting();\n        recalculate();\n\n        return () => {\n            resizeObserver.disconnect();\n            mutationObserver.disconnect();\n        };\n    }, [callback]);\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAOjC;AACA;AACA;AACA;AACA,OAAO,MAAMC,kBAAkB,GAAIC,QAA0C,IAAK;EAC9EF,SAAS,CAAC,MAAM;IACZ,MAAMG,WAAW,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,wBAAwB,CAAC;MACpE,IAAIC,UAAU,GAAG,CAAC;MAClB,IAAIC,WAAW,GAAG,CAAC;MAEnBJ,QAAQ,CAACK,OAAO,CAACC,EAAE,IAAI;QACnB,MAAMC,OAAO,GAAGD,EAAE,CAACE,YAAY,CAAC,sBAAsB,CAAC,IAAI,EAAE;QAC7D,MAAMC,MAAM,GAAGF,OAAO,CAACG,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC;QACpD,MAAMC,IAAI,GAAGR,EAAE,CAACS,qBAAqB,CAAC,CAAC;QAEvC,IAAIN,MAAM,CAACO,QAAQ,CAAC,OAAO,CAAC,EAAE;UAC1Bb,UAAU,IAAIW,IAAI,CAACG,KAAK;QAC5B;QAEA,IAAIR,MAAM,CAACO,QAAQ,CAAC,QAAQ,CAAC,EAAE;UAC3BZ,WAAW,IAAIU,IAAI,CAACI,MAAM;QAC9B;MACJ,CAAC,CAAC;MAEFpB,QAAQ,CAAC;QAAEmB,KAAK,EAAEd,UAAU;QAAEe,MAAM,EAAEd;MAAY,CAAC,CAAC;IACxD,CAAC;IAED,MAAMe,cAAc,GAAG,IAAIC,cAAc,CAACrB,WAAW,CAAC;IAEtD,MAAMsB,eAAe,GAAGA,CAAA,KAAM;MAC1BpB,QAAQ,CAACC,gBAAgB,CAAC,wBAAwB,CAAC,CAACG,OAAO,CAACC,EAAE,IAAI;QAC9Da,cAAc,CAACG,OAAO,CAAChB,EAAE,CAAC;MAC9B,CAAC,CAAC;IACN,CAAC;IAED,MAAMiB,gBAAgB,GAAG,IAAIC,gBAAgB,CAACH,eAAe,CAAC;IAC9DE,gBAAgB,CAACD,OAAO,CAACrB,QAAQ,CAACwB,IAAI,EAAE;MAAEC,SAAS,EAAE,IAAI;MAAEC,OAAO,EAAE;IAAK,CAAC,CAAC;IAE3EN,eAAe,CAAC,CAAC;IACjBtB,WAAW,CAAC,CAAC;IAEb,OAAO,MAAM;MACToB,cAAc,CAACS,UAAU,CAAC,CAAC;MAC3BL,gBAAgB,CAACK,UAAU,CAAC,CAAC;IACjC,CAAC;EACL,CAAC,EAAE,CAAC9B,QAAQ,CAAC,CAAC;AAClB,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useReservedUISpace.js","sources":["../../../src/BaseEditor/hooks/useReservedUISpace.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\ninterface Dimensions {\n    width: number;\n    height: number;\n}\n\n/**\n * Observe DOM elements that affect preview container width/height.\n * Sum dimensions of all `data-affects-preview` elements and execute the callback.\n */\nexport const useReservedUISpace = (callback: (dimensions: Dimensions) => void) => {\n    useEffect(() => {\n        const recalculate = () => {\n            const elements = document.querySelectorAll(\"[data-affects-preview]\");\n            let totalWidth = 0;\n            let totalHeight = 0;\n\n            elements.forEach(el => {\n                const affects = el.getAttribute(\"data-affects-preview\") ?? \"\";\n                const tracks = affects.split(\",\").map(s => s.trim());\n                const rect = el.getBoundingClientRect();\n\n                if (tracks.includes(\"width\")) {\n                    totalWidth += rect.width;\n                }\n\n                if (tracks.includes(\"height\")) {\n                    totalHeight += rect.height;\n                }\n            });\n\n            callback({ width: totalWidth, height: totalHeight });\n        };\n\n        const resizeObserver = new ResizeObserver(recalculate);\n\n        const observeExisting = () => {\n            document.querySelectorAll(\"[data-affects-preview]\").forEach(el => {\n                resizeObserver.observe(el);\n            });\n        };\n\n        const mutationObserver = new MutationObserver(observeExisting);\n        mutationObserver.observe(document.body, { childList: true, subtree: true });\n\n        observeExisting();\n        recalculate();\n\n        return () => {\n            resizeObserver.disconnect();\n            mutationObserver.disconnect();\n        };\n    }, [callback]);\n};\n"],"names":["useReservedUISpace","callback","useEffect","recalculate","elements","document","totalWidth","totalHeight","el","affects","tracks","s","rect","resizeObserver","ResizeObserver","observeExisting","mutationObserver","MutationObserver"],"mappings":";AAWO,MAAMA,qBAAqB,CAACC;IAC/BC,UAAU;QACN,MAAMC,cAAc;YAChB,MAAMC,WAAWC,SAAS,gBAAgB,CAAC;YAC3C,IAAIC,aAAa;YACjB,IAAIC,cAAc;YAElBH,SAAS,OAAO,CAACI,CAAAA;gBACb,MAAMC,UAAUD,GAAG,YAAY,CAAC,2BAA2B;gBAC3D,MAAME,SAASD,QAAQ,KAAK,CAAC,KAAK,GAAG,CAACE,CAAAA,IAAKA,EAAE,IAAI;gBACjD,MAAMC,OAAOJ,GAAG,qBAAqB;gBAErC,IAAIE,OAAO,QAAQ,CAAC,UAChBJ,cAAcM,KAAK,KAAK;gBAG5B,IAAIF,OAAO,QAAQ,CAAC,WAChBH,eAAeK,KAAK,MAAM;YAElC;YAEAX,SAAS;gBAAE,OAAOK;gBAAY,QAAQC;YAAY;QACtD;QAEA,MAAMM,iBAAiB,IAAIC,eAAeX;QAE1C,MAAMY,kBAAkB;YACpBV,SAAS,gBAAgB,CAAC,0BAA0B,OAAO,CAACG,CAAAA;gBACxDK,eAAe,OAAO,CAACL;YAC3B;QACJ;QAEA,MAAMQ,mBAAmB,IAAIC,iBAAiBF;QAC9CC,iBAAiB,OAAO,CAACX,SAAS,IAAI,EAAE;YAAE,WAAW;YAAM,SAAS;QAAK;QAEzEU;QACAZ;QAEA,OAAO;YACHU,eAAe,UAAU;YACzBG,iBAAiB,UAAU;QAC/B;IACJ,GAAG;QAACf;KAAS;AACjB"}

package/BaseEditor/hooks/useSelectFromDocument.d.ts

@@ -1,9 +1,9 @@
 import type { EditorDocument } from "@webiny/website-builder-sdk";
 type Equals<T> = (a: T, b: T) => boolean;
+export type { EditorDocument };
 /**
  * Subscribe to part of the document state.
  * @param selector   Pick the slice of state you care about.
  * @param equals     (optional) comparator, defaults to Object.is
  */
 export declare function useSelectFromDocument<TReturn, TDocument extends EditorDocument>(selector: (doc: TDocument) => TReturn, deps?: React.DependencyList, equals?: Equals<TReturn>): TReturn;
-export {};

package/BaseEditor/hooks/useSelectFromDocument.js

@@ -1,14 +1,14 @@
-import deepEqual from "deep-equal";
+import deep_equal from "deep-equal";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { useSelectFromState } from "./useSelectFromState.js";
-/**
- * Subscribe to part of the document state.
- * @param selector   Pick the slice of state you care about.
- * @param equals     (optional) comparator, defaults to Object.is
- */
-export function useSelectFromDocument(selector, deps = [], equals = deepEqual) {
-  const editor = useDocumentEditor();
-  return useSelectFromState(() => editor.getDocumentState().read(), selector, [editor, editor.getDocumentState().read(), ...deps], equals);
+function useSelectFromDocument(selector, deps = [], equals = deep_equal) {
+    const editor = useDocumentEditor();
+    return useSelectFromState(()=>editor.getDocumentState().read(), selector, [
+        editor,
+        editor.getDocumentState().read(),
+        ...deps
+    ], equals);
 }
+export { useSelectFromDocument };
 
 //# sourceMappingURL=useSelectFromDocument.js.map

package/BaseEditor/hooks/useSelectFromDocument.js.map

@@ -1 +1 @@
-{"version":3,"names":["deepEqual","useDocumentEditor","useSelectFromState","useSelectFromDocument","selector","deps","equals","editor","getDocumentState","read"],"sources":["useSelectFromDocument.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport type { EditorDocument } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromState } from \"./useSelectFromState.js\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromDocument<TReturn, TDocument extends EditorDocument>(\n    selector: (doc: TDocument) => TReturn,\n    deps: React.DependencyList = [],\n    equals: Equals<TReturn> = deepEqual\n): TReturn {\n    const editor = useDocumentEditor<TDocument>();\n\n    return useSelectFromState(\n        () => editor.getDocumentState().read(),\n        selector,\n        [editor, editor.getDocumentState().read(), ...deps],\n        equals\n    );\n}\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAElC,SAASC,iBAAiB;AAC1B,SAASC,kBAAkB;AAI3B;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CACjCC,QAAqC,EACrCC,IAA0B,GAAG,EAAE,EAC/BC,MAAuB,GAAGN,SAAS,EAC5B;EACP,MAAMO,MAAM,GAAGN,iBAAiB,CAAY,CAAC;EAE7C,OAAOC,kBAAkB,CACrB,MAAMK,MAAM,CAACC,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,EACtCL,QAAQ,EACR,CAACG,MAAM,EAAEA,MAAM,CAACC,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,EAAE,GAAGJ,IAAI,CAAC,EACnDC,MACJ,CAAC;AACL","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useSelectFromDocument.js","sources":["../../../src/BaseEditor/hooks/useSelectFromDocument.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport type { EditorDocument } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromState } from \"./useSelectFromState.js\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\nexport type { EditorDocument };\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromDocument<TReturn, TDocument extends EditorDocument>(\n    selector: (doc: TDocument) => TReturn,\n    deps: React.DependencyList = [],\n    equals: Equals<TReturn> = deepEqual\n): TReturn {\n    const editor = useDocumentEditor<TDocument>();\n\n    return useSelectFromState(\n        () => editor.getDocumentState().read(),\n        selector,\n        [editor, editor.getDocumentState().read(), ...deps],\n        equals\n    );\n}\n"],"names":["useSelectFromDocument","selector","deps","equals","deepEqual","editor","useDocumentEditor","useSelectFromState"],"mappings":";;;AAcO,SAASA,sBACZC,QAAqC,EACrCC,OAA6B,EAAE,EAC/BC,SAA0BC,UAAS;IAEnC,MAAMC,SAASC;IAEf,OAAOC,mBACH,IAAMF,OAAO,gBAAgB,GAAG,IAAI,IACpCJ,UACA;QAACI;QAAQA,OAAO,gBAAgB,GAAG,IAAI;WAAOH;KAAK,EACnDC;AAER"}

package/BaseEditor/hooks/useSelectFromEditor.js

@@ -1,14 +1,13 @@
-import deepEqual from "deep-equal";
+import deep_equal from "deep-equal";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { useSelectFromState } from "./useSelectFromState.js";
-/**
- * Subscribe to part of the document state.
- * @param selector   Pick the slice of state you care about.
- * @param equals     (optional) comparator, defaults to Object.is
- */
-export function useSelectFromEditor(selector, deps = [], equals = deepEqual) {
-  const editor = useDocumentEditor();
-  return useSelectFromState(() => editor.getEditorState().read(), selector, [editor, ...deps], equals);
+function useSelectFromEditor(selector, deps = [], equals = deep_equal) {
+    const editor = useDocumentEditor();
+    return useSelectFromState(()=>editor.getEditorState().read(), selector, [
+        editor,
+        ...deps
+    ], equals);
 }
+export { useSelectFromEditor };
 
 //# sourceMappingURL=useSelectFromEditor.js.map

package/BaseEditor/hooks/useSelectFromEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["deepEqual","useDocumentEditor","useSelectFromState","useSelectFromEditor","selector","deps","equals","editor","getEditorState","read"],"sources":["useSelectFromEditor.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\nimport { useSelectFromState } from \"~/BaseEditor/hooks/useSelectFromState.js\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromEditor<T>(\n    selector: (doc: EditorState) => T,\n    deps: React.DependencyList = [],\n    equals: Equals<T> = deepEqual\n): T {\n    const editor = useDocumentEditor();\n\n    return useSelectFromState(\n        () => editor.getEditorState().read(),\n        selector,\n        [editor, ...deps],\n        equals\n    );\n}\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAASC,iBAAiB;AAE1B,SAASC,kBAAkB;AAI3B;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAC/BC,QAAiC,EACjCC,IAA0B,GAAG,EAAE,EAC/BC,MAAiB,GAAGN,SAAS,EAC5B;EACD,MAAMO,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAElC,OAAOC,kBAAkB,CACrB,MAAMK,MAAM,CAACC,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,EACpCL,QAAQ,EACR,CAACG,MAAM,EAAE,GAAGF,IAAI,CAAC,EACjBC,MACJ,CAAC;AACL","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useSelectFromEditor.js","sources":["../../../src/BaseEditor/hooks/useSelectFromEditor.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\nimport { useSelectFromState } from \"~/BaseEditor/hooks/useSelectFromState.js\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromEditor<T>(\n    selector: (doc: EditorState) => T,\n    deps: React.DependencyList = [],\n    equals: Equals<T> = deepEqual\n): T {\n    const editor = useDocumentEditor();\n\n    return useSelectFromState(\n        () => editor.getEditorState().read(),\n        selector,\n        [editor, ...deps],\n        equals\n    );\n}\n"],"names":["useSelectFromEditor","selector","deps","equals","deepEqual","editor","useDocumentEditor","useSelectFromState"],"mappings":";;;AAYO,SAASA,oBACZC,QAAiC,EACjCC,OAA6B,EAAE,EAC/BC,SAAoBC,UAAS;IAE7B,MAAMC,SAASC;IAEf,OAAOC,mBACH,IAAMF,OAAO,cAAc,GAAG,IAAI,IAClCJ,UACA;QAACI;WAAWH;KAAK,EACjBC;AAER"}

package/BaseEditor/hooks/useSelectFromState.js

@@ -1,30 +1,27 @@
-import deepEqual from "deep-equal";
-import { useState, useEffect, useMemo } from "react";
+import deep_equal from "deep-equal";
+import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
-/**
- * Subscribe to part of the document state.
- * @param selector   Pick the slice of state you care about.
- * @param equals     (optional) comparator, defaults to Object.is
- */
-export function useSelectFromState(getState, selector, deps = [], equals = deepEqual) {
-  // Pull the initial slice synchronously
-  const initialValue = useMemo(() => selector(getState()), deps);
-  const [value, setValue] = useState(initialValue);
-  useEffect(() => {
-    setValue(selector(getState())); // reset state on dep change
-  }, deps);
-  useEffect(() => {
-    let previous = selector(getState());
-    const disposer = autorun(() => {
-      const next = selector(getState());
-      if (!equals(previous, next)) {
-        setValue(next);
-        previous = next;
-      }
-    });
-    return () => disposer();
-  }, [...deps]);
-  return value;
+function useSelectFromState(getState, selector, deps = [], equals = deep_equal) {
+    const initialValue = useMemo(()=>selector(getState()), deps);
+    const [value, setValue] = useState(initialValue);
+    useEffect(()=>{
+        setValue(selector(getState()));
+    }, deps);
+    useEffect(()=>{
+        let previous = selector(getState());
+        const disposer = autorun(()=>{
+            const next = selector(getState());
+            if (!equals(previous, next)) {
+                setValue(next);
+                previous = next;
+            }
+        });
+        return ()=>disposer();
+    }, [
+        ...deps
+    ]);
+    return value;
 }
+export { useSelectFromState };
 
 //# sourceMappingURL=useSelectFromState.js.map

package/BaseEditor/hooks/useSelectFromState.js.map

@@ -1 +1 @@
-{"version":3,"names":["deepEqual","useState","useEffect","useMemo","autorun","useSelectFromState","getState","selector","deps","equals","initialValue","value","setValue","previous","disposer","next"],"sources":["useSelectFromState.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport { autorun } from \"mobx\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromState<TState, T>(\n    getState: () => TState,\n    selector: (doc: TState) => T,\n    deps: React.DependencyList = [],\n    equals: Equals<T> = deepEqual\n): T {\n    // Pull the initial slice synchronously\n    const initialValue = useMemo(() => selector(getState()), deps);\n    const [value, setValue] = useState<T>(initialValue);\n\n    useEffect(() => {\n        setValue(selector(getState())); // reset state on dep change\n    }, deps);\n\n    useEffect(() => {\n        let previous = selector(getState());\n\n        const disposer = autorun(() => {\n            const next = selector(getState());\n            if (!equals(previous, next)) {\n                setValue(next);\n                previous = next;\n            }\n        });\n\n        return () => disposer();\n    }, [...deps]);\n\n    return value;\n}\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAI9B;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAC9BC,QAAsB,EACtBC,QAA4B,EAC5BC,IAA0B,GAAG,EAAE,EAC/BC,MAAiB,GAAGT,SAAS,EAC5B;EACD;EACA,MAAMU,YAAY,GAAGP,OAAO,CAAC,MAAMI,QAAQ,CAACD,QAAQ,CAAC,CAAC,CAAC,EAAEE,IAAI,CAAC;EAC9D,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAAIS,YAAY,CAAC;EAEnDR,SAAS,CAAC,MAAM;IACZU,QAAQ,CAACL,QAAQ,CAACD,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EACpC,CAAC,EAAEE,IAAI,CAAC;EAERN,SAAS,CAAC,MAAM;IACZ,IAAIW,QAAQ,GAAGN,QAAQ,CAACD,QAAQ,CAAC,CAAC,CAAC;IAEnC,MAAMQ,QAAQ,GAAGV,OAAO,CAAC,MAAM;MAC3B,MAAMW,IAAI,GAAGR,QAAQ,CAACD,QAAQ,CAAC,CAAC,CAAC;MACjC,IAAI,CAACG,MAAM,CAACI,QAAQ,EAAEE,IAAI,CAAC,EAAE;QACzBH,QAAQ,CAACG,IAAI,CAAC;QACdF,QAAQ,GAAGE,IAAI;MACnB;IACJ,CAAC,CAAC;IAEF,OAAO,MAAMD,QAAQ,CAAC,CAAC;EAC3B,CAAC,EAAE,CAAC,GAAGN,IAAI,CAAC,CAAC;EAEb,OAAOG,KAAK;AAChB","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useSelectFromState.js","sources":["../../../src/BaseEditor/hooks/useSelectFromState.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport { autorun } from \"mobx\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromState<TState, T>(\n    getState: () => TState,\n    selector: (doc: TState) => T,\n    deps: React.DependencyList = [],\n    equals: Equals<T> = deepEqual\n): T {\n    // Pull the initial slice synchronously\n    const initialValue = useMemo(() => selector(getState()), deps);\n    const [value, setValue] = useState<T>(initialValue);\n\n    useEffect(() => {\n        setValue(selector(getState())); // reset state on dep change\n    }, deps);\n\n    useEffect(() => {\n        let previous = selector(getState());\n\n        const disposer = autorun(() => {\n            const next = selector(getState());\n            if (!equals(previous, next)) {\n                setValue(next);\n                previous = next;\n            }\n        });\n\n        return () => disposer();\n    }, [...deps]);\n\n    return value;\n}\n"],"names":["useSelectFromState","getState","selector","deps","equals","deepEqual","initialValue","useMemo","value","setValue","useState","useEffect","previous","disposer","autorun","next"],"mappings":";;;AAWO,SAASA,mBACZC,QAAsB,EACtBC,QAA4B,EAC5BC,OAA6B,EAAE,EAC/BC,SAAoBC,UAAS;IAG7B,MAAMC,eAAeC,QAAQ,IAAML,SAASD,aAAaE;IACzD,MAAM,CAACK,OAAOC,SAAS,GAAGC,SAAYJ;IAEtCK,UAAU;QACNF,SAASP,SAASD;IACtB,GAAGE;IAEHQ,UAAU;QACN,IAAIC,WAAWV,SAASD;QAExB,MAAMY,WAAWC,QAAQ;YACrB,MAAMC,OAAOb,SAASD;YACtB,IAAI,CAACG,OAAOQ,UAAUG,OAAO;gBACzBN,SAASM;gBACTH,WAAWG;YACf;QACJ;QAEA,OAAO,IAAMF;IACjB,GAAG;WAAIV;KAAK;IAEZ,OAAOK;AACX"}

package/BaseEditor/hooks/useStyles.js

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

package/BaseEditor/hooks/useUpdateElement.js

@@ -1,14 +1,17 @@
 import { useCallback } from "react";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { $updateElementInputs } from "../../editorSdk/utils/$updateElementInputs.js";
-export function useUpdateElement() {
-  const editor = useDocumentEditor();
-  const updateElement = useCallback((elementId, updater) => {
-    $updateElementInputs(editor, elementId, updater);
-  }, [editor]);
-  return {
-    updateElement
-  };
+function useUpdateElement() {
+    const editor = useDocumentEditor();
+    const updateElement = useCallback((elementId, updater)=>{
+        $updateElementInputs(editor, elementId, updater);
+    }, [
+        editor
+    ]);
+    return {
+        updateElement
+    };
 }
+export { useUpdateElement };
 
 //# sourceMappingURL=useUpdateElement.js.map

package/BaseEditor/hooks/useUpdateElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useDocumentEditor","$updateElementInputs","useUpdateElement","editor","updateElement","elementId","updater"],"sources":["useUpdateElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { $updateElementInputs } from \"~/editorSdk/utils/$updateElementInputs.js\";\n\nexport function useUpdateElement() {\n    const editor = useDocumentEditor();\n\n    const updateElement = useCallback(\n        <T extends Record<string, any> = Record<string, any>>(\n            elementId: string,\n            updater: (inputs: T) => void\n        ) => {\n            $updateElementInputs(\n                editor,\n                elementId,\n                updater as (inputs: Record<string, any>) => void\n            );\n        },\n        [editor]\n    );\n\n    return { updateElement };\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,iBAAiB;AAC1B,SAASC,oBAAoB;AAE7B,OAAO,SAASC,gBAAgBA,CAAA,EAAG;EAC/B,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAElC,MAAMI,aAAa,GAAGL,WAAW,CAC7B,CACIM,SAAiB,EACjBC,OAA4B,KAC3B;IACDL,oBAAoB,CAChBE,MAAM,EACNE,SAAS,EACTC,OACJ,CAAC;EACL,CAAC,EACD,CAACH,MAAM,CACX,CAAC;EAED,OAAO;IAAEC;EAAc,CAAC;AAC5B","ignoreList":[]}
+{"version":3,"file":"BaseEditor/hooks/useUpdateElement.js","sources":["../../../src/BaseEditor/hooks/useUpdateElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { $updateElementInputs } from \"~/editorSdk/utils/$updateElementInputs.js\";\n\nexport function useUpdateElement() {\n    const editor = useDocumentEditor();\n\n    const updateElement = useCallback(\n        <T extends Record<string, any> = Record<string, any>>(\n            elementId: string,\n            updater: (inputs: T) => void\n        ) => {\n            $updateElementInputs(\n                editor,\n                elementId,\n                updater as (inputs: Record<string, any>) => void\n            );\n        },\n        [editor]\n    );\n\n    return { updateElement };\n}\n"],"names":["useUpdateElement","editor","useDocumentEditor","updateElement","useCallback","elementId","updater","$updateElementInputs"],"mappings":";;;AAIO,SAASA;IACZ,MAAMC,SAASC;IAEf,MAAMC,gBAAgBC,YAClB,CACIC,WACAC;QAEAC,qBACIN,QACAI,WACAC;IAER,GACA;QAACL;KAAO;IAGZ,OAAO;QAAEE;IAAc;AAC3B"}

package/BaseEditor/index.js

@@ -1,5 +1,3 @@
-export { DefaultEditorConfig } from "./defaultConfig/DefaultEditorConfig.js";
 export * from "./config/index.js";
 export * from "./commands.js";
-
-//# sourceMappingURL=index.js.map
+export { DefaultEditorConfig } from "./defaultConfig/DefaultEditorConfig.js";

package/BaseEditor/metadata/BreakpointElementMetadata.js

@@ -1,29 +1,27 @@
-export class BreakpointElementMetadata {
-  constructor(breakpoints, currentBreakpoint, metadata) {
-    this.breakpoints = breakpoints;
-    this.currentBreakpoint = currentBreakpoint;
-    this.metadata = metadata;
-  }
-  applyToDocument(document) {
-    this.metadata.applyToDocument(document);
-  }
-  get(id) {
-    const upTo = this.breakpoints.indexOf(this.currentBreakpoint);
-    for (let i = upTo; i >= 0; i--) {
-      const breakpoint = this.breakpoints[i];
-      const data = this.metadata.get(`${id}/${breakpoint}`);
-      if (data !== undefined) {
-        return data;
-      }
+class BreakpointElementMetadata {
+    constructor(breakpoints, currentBreakpoint, metadata){
+        this.breakpoints = breakpoints;
+        this.currentBreakpoint = currentBreakpoint;
+        this.metadata = metadata;
+    }
+    applyToDocument(document) {
+        this.metadata.applyToDocument(document);
+    }
+    get(id) {
+        const upTo = this.breakpoints.indexOf(this.currentBreakpoint);
+        for(let i = upTo; i >= 0; i--){
+            const breakpoint = this.breakpoints[i];
+            const data = this.metadata.get(`${id}/${breakpoint}`);
+            if (void 0 !== data) return data;
+        }
+    }
+    set(id, data) {
+        this.metadata.set(`${id}/${this.currentBreakpoint}`, data);
+    }
+    unset(id) {
+        this.metadata.unset(`${id}/${this.currentBreakpoint}`);
     }
-    return undefined;
-  }
-  set(id, data) {
-    this.metadata.set(`${id}/${this.currentBreakpoint}`, data);
-  }
-  unset(id) {
-    this.metadata.unset(`${id}/${this.currentBreakpoint}`);
-  }
 }
+export { BreakpointElementMetadata };
 
 //# sourceMappingURL=BreakpointElementMetadata.js.map

package/BaseEditor/metadata/BreakpointElementMetadata.js.map

@@ -1 +1 @@
-{"version":3,"names":["BreakpointElementMetadata","constructor","breakpoints","currentBreakpoint","metadata","applyToDocument","document","get","id","upTo","indexOf","i","breakpoint","data","undefined","set","unset"],"sources":["BreakpointElementMetadata.ts"],"sourcesContent":["import type { Document } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"./IMetadata.js\";\n\nexport class BreakpointElementMetadata implements IMetadata {\n    private readonly breakpoints: string[];\n    private readonly currentBreakpoint: string;\n    private metadata: IMetadata;\n\n    constructor(breakpoints: string[], currentBreakpoint: string, metadata: IMetadata) {\n        this.breakpoints = breakpoints;\n        this.currentBreakpoint = currentBreakpoint;\n        this.metadata = metadata;\n    }\n\n    applyToDocument(document: Document): void {\n        this.metadata.applyToDocument(document);\n    }\n\n    get<T = unknown>(id: string): T | undefined {\n        const upTo = this.breakpoints.indexOf(this.currentBreakpoint);\n\n        for (let i = upTo; i >= 0; i--) {\n            const breakpoint = this.breakpoints[i];\n            const data = this.metadata.get<T>(`${id}/${breakpoint}`);\n            if (data !== undefined) {\n                return data;\n            }\n        }\n\n        return undefined;\n    }\n\n    set(id: string, data: any): void {\n        this.metadata.set(`${id}/${this.currentBreakpoint}`, data);\n    }\n\n    unset(id: string): void {\n        this.metadata.unset(`${id}/${this.currentBreakpoint}`);\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,yBAAyB,CAAsB;EAKxDC,WAAWA,CAACC,WAAqB,EAAEC,iBAAyB,EAAEC,QAAmB,EAAE;IAC/E,IAAI,CAACF,WAAW,GAAGA,WAAW;IAC9B,IAAI,CAACC,iBAAiB,GAAGA,iBAAiB;IAC1C,IAAI,CAACC,QAAQ,GAAGA,QAAQ;EAC5B;EAEAC,eAAeA,CAACC,QAAkB,EAAQ;IACtC,IAAI,CAACF,QAAQ,CAACC,eAAe,CAACC,QAAQ,CAAC;EAC3C;EAEAC,GAAGA,CAAcC,EAAU,EAAiB;IACxC,MAAMC,IAAI,GAAG,IAAI,CAACP,WAAW,CAACQ,OAAO,CAAC,IAAI,CAACP,iBAAiB,CAAC;IAE7D,KAAK,IAAIQ,CAAC,GAAGF,IAAI,EAAEE,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;MAC5B,MAAMC,UAAU,GAAG,IAAI,CAACV,WAAW,CAACS,CAAC,CAAC;MACtC,MAAME,IAAI,GAAG,IAAI,CAACT,QAAQ,CAACG,GAAG,CAAI,GAAGC,EAAE,IAAII,UAAU,EAAE,CAAC;MACxD,IAAIC,IAAI,KAAKC,SAAS,EAAE;QACpB,OAAOD,IAAI;MACf;IACJ;IAEA,OAAOC,SAAS;EACpB;EAEAC,GAAGA,CAACP,EAAU,EAAEK,IAAS,EAAQ;IAC7B,IAAI,CAACT,QAAQ,CAACW,GAAG,CAAC,GAAGP,EAAE,IAAI,IAAI,CAACL,iBAAiB,EAAE,EAAEU,IAAI,CAAC;EAC9D;EAEAG,KAAKA,CAACR,EAAU,EAAQ;IACpB,IAAI,CAACJ,QAAQ,CAACY,KAAK,CAAC,GAAGR,EAAE,IAAI,IAAI,CAACL,iBAAiB,EAAE,CAAC;EAC1D;AACJ","ignoreList":[]}
+{"version":3,"file":"BaseEditor/metadata/BreakpointElementMetadata.js","sources":["../../../src/BaseEditor/metadata/BreakpointElementMetadata.ts"],"sourcesContent":["import type { Document } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"./IMetadata.js\";\n\nexport class BreakpointElementMetadata implements IMetadata {\n    private readonly breakpoints: string[];\n    private readonly currentBreakpoint: string;\n    private metadata: IMetadata;\n\n    constructor(breakpoints: string[], currentBreakpoint: string, metadata: IMetadata) {\n        this.breakpoints = breakpoints;\n        this.currentBreakpoint = currentBreakpoint;\n        this.metadata = metadata;\n    }\n\n    applyToDocument(document: Document): void {\n        this.metadata.applyToDocument(document);\n    }\n\n    get<T = unknown>(id: string): T | undefined {\n        const upTo = this.breakpoints.indexOf(this.currentBreakpoint);\n\n        for (let i = upTo; i >= 0; i--) {\n            const breakpoint = this.breakpoints[i];\n            const data = this.metadata.get<T>(`${id}/${breakpoint}`);\n            if (data !== undefined) {\n                return data;\n            }\n        }\n\n        return undefined;\n    }\n\n    set(id: string, data: any): void {\n        this.metadata.set(`${id}/${this.currentBreakpoint}`, data);\n    }\n\n    unset(id: string): void {\n        this.metadata.unset(`${id}/${this.currentBreakpoint}`);\n    }\n}\n"],"names":["BreakpointElementMetadata","breakpoints","currentBreakpoint","metadata","document","id","upTo","i","breakpoint","data","undefined"],"mappings":"AAGO,MAAMA;IAKT,YAAYC,WAAqB,EAAEC,iBAAyB,EAAEC,QAAmB,CAAE;QAC/E,IAAI,CAAC,WAAW,GAAGF;QACnB,IAAI,CAAC,iBAAiB,GAAGC;QACzB,IAAI,CAAC,QAAQ,GAAGC;IACpB;IAEA,gBAAgBC,QAAkB,EAAQ;QACtC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAACA;IAClC;IAEA,IAAiBC,EAAU,EAAiB;QACxC,MAAMC,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB;QAE5D,IAAK,IAAIC,IAAID,MAAMC,KAAK,GAAGA,IAAK;YAC5B,MAAMC,aAAa,IAAI,CAAC,WAAW,CAACD,EAAE;YACtC,MAAME,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAI,GAAGJ,GAAG,CAAC,EAAEG,YAAY;YACvD,IAAIC,AAASC,WAATD,MACA,OAAOA;QAEf;IAGJ;IAEA,IAAIJ,EAAU,EAAEI,IAAS,EAAQ;QAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAGJ,GAAG,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAEI;IACzD;IAEA,MAAMJ,EAAU,EAAQ;QACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAGA,GAAG,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE;IACzD;AACJ"}