@webiny/app-website-builder 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

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

@@ -0,0 +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;
+};

package/BaseEditor/hooks/useCreateElement.js

@@ -0,0 +1,17 @@
+import { useCallback } from "react";
+import { useDocumentEditor } from "../../DocumentEditor/index.js";
+import { Commands } from "../commands.js";
+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

@@ -0,0 +1 @@
+{"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            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;QACGJ,OAAO,cAAc,CAACK,SAAS,aAAa,EAAED;IAClD,GACA;QAACJ;KAAO;IAGZ,OAAO;QAAEE;IAAc;AAC3B"}

package/BaseEditor/hooks/useDeleteElement.d.ts

@@ -0,0 +1,3 @@
+export declare function useDeleteElement(): {
+    deleteElement: (id: string) => void;
+};

package/BaseEditor/hooks/useDeleteElement.js

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useDocumentEditor } from "../../DocumentEditor/index.js";
+import { Commands } from "../commands.js";
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare function useElementInputs<T extends Record<string, any> = Record<string, any>>(elementId: string | null, depth?: number): {
+    inputs: T;
+    updateInputs: (updater: (inputs: T) => void) => void;
+};

package/BaseEditor/hooks/useElementInputs.js

@@ -0,0 +1,27 @@
+import { useCallback } from "react";
+import { useSelectFromDocument } from "./useSelectFromDocument.js";
+import { useSelectFromEditor } from "./useSelectFromEditor.js";
+import { useUpdateElement } from "./useUpdateElement.js";
+import { $getElementInputValues } from "../../editorSdk/utils/$getElementInputValues.js";
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1 @@
+export { useElementOverlay } from "../../BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js";

package/BaseEditor/hooks/useElementOverlay.js

@@ -0,0 +1 @@
+export { useElementOverlay } from "../defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js";

package/BaseEditor/hooks/useHighlightedElement.d.ts

@@ -0,0 +1,2 @@
+import type { DocumentElement } from "@webiny/website-builder-sdk";
+export declare const useHighlightedElement: () => DocumentElement | null;

package/BaseEditor/hooks/useHighlightedElement.js

@@ -0,0 +1,23 @@
+import { autorun, toJS } from "mobx";
+import { useEffect, useState } from "react";
+import { useDocumentEditor } from "../../DocumentEditor/index.js";
+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

@@ -0,0 +1 @@
+{"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

package/BaseEditor/hooks/useKeyHandler.js

@@ -1,63 +1,55 @@
-import React from "react";
-import isHotkey from "is-hotkey";
+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