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

package/BaseEditor/commandHandlers/CloneElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/commandHandlers/CloneElement.js","sources":["../../../src/BaseEditor/commandHandlers/CloneElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $cloneElement } from \"~/editorSdk/utils/index.js\";\n\nexport const CloneElement = () => {\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.CloneElement, payload => {\n            const newId = $cloneElement(editor, payload.id);\n            if (newId) {\n                editor.executeCommand(Commands.SelectElement, { id: newId });\n            }\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["CloneElement","editor","useDocumentEditor","useEffect","Commands","payload","newId","$cloneElement"],"mappings":";;;;AAKO,MAAMA,eAAe;IACxB,MAAMC,SAASC;IAEfC,UAAU,IACCF,OAAO,sBAAsB,CAACG,SAAS,YAAY,EAAEC,CAAAA;YACxD,MAAMC,QAAQC,cAAcN,QAAQI,QAAQ,EAAE;YAC9C,IAAIC,OACAL,OAAO,cAAc,CAACG,SAAS,aAAa,EAAE;gBAAE,IAAIE;YAAM;QAElE,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/CreateElement.js

@@ -3,20 +3,17 @@ import { useToast } from "@webiny/admin-ui";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../index.js";
 import { $createElement } from "../../editorSdk/utils/index.js";
-export const CreateElement = () => {
-  const editor = useDocumentEditor();
-  const toast = useToast();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.CreateElement, payload => {
-      const result = $createElement(editor, payload);
-      if (result?.violation) {
-        toast.showWarningToast({
-          title: result.violation.message
-        });
-      }
-    });
-  }, []);
-  return null;
+const CreateElement = ()=>{
+    const editor = useDocumentEditor();
+    const toast = useToast();
+    useEffect(()=>editor.registerCommandHandler(Commands.CreateElement, (payload)=>{
+            const result = $createElement(editor, payload);
+            if (result?.violation) toast.showWarningToast({
+                title: result.violation.message
+            });
+        }), []);
+    return null;
 };
+export { CreateElement };
 
 //# sourceMappingURL=CreateElement.js.map

package/BaseEditor/commandHandlers/CreateElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useToast","useDocumentEditor","Commands","$createElement","CreateElement","editor","toast","registerCommandHandler","payload","result","violation","showWarningToast","title","message"],"sources":["CreateElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $createElement } from \"~/editorSdk/utils/index.js\";\n\nexport const CreateElement = () => {\n    const editor = useDocumentEditor();\n    const toast = useToast();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.CreateElement, payload => {\n            const result = $createElement(editor, payload);\n            if (result?.violation) {\n                toast.showWarningToast({\n                    title: result.violation.message\n                });\n            }\n        });\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AACjB,SAASC,cAAc;AAEvB,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClC,MAAMK,KAAK,GAAGN,QAAQ,CAAC,CAAC;EAExBD,SAAS,CAAC,MAAM;IACZ,OAAOM,MAAM,CAACE,sBAAsB,CAACL,QAAQ,CAACE,aAAa,EAAEI,OAAO,IAAI;MACpE,MAAMC,MAAM,GAAGN,cAAc,CAACE,MAAM,EAAEG,OAAO,CAAC;MAC9C,IAAIC,MAAM,EAAEC,SAAS,EAAE;QACnBJ,KAAK,CAACK,gBAAgB,CAAC;UACnBC,KAAK,EAAEH,MAAM,CAACC,SAAS,CAACG;QAC5B,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/commandHandlers/CreateElement.js","sources":["../../../src/BaseEditor/commandHandlers/CreateElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $createElement } from \"~/editorSdk/utils/index.js\";\n\nexport const CreateElement = () => {\n    const editor = useDocumentEditor();\n    const toast = useToast();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.CreateElement, payload => {\n            const result = $createElement(editor, payload);\n            if (result?.violation) {\n                toast.showWarningToast({\n                    title: result.violation.message\n                });\n            }\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["CreateElement","editor","useDocumentEditor","toast","useToast","useEffect","Commands","payload","result","$createElement"],"mappings":";;;;;AAMO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAMC,QAAQC;IAEdC,UAAU,IACCJ,OAAO,sBAAsB,CAACK,SAAS,aAAa,EAAEC,CAAAA;YACzD,MAAMC,SAASC,eAAeR,QAAQM;YACtC,IAAIC,QAAQ,WACRL,MAAM,gBAAgB,CAAC;gBACnB,OAAOK,OAAO,SAAS,CAAC,OAAO;YACnC;QAER,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/DeleteElement.js

@@ -3,20 +3,17 @@ import { useToast } from "@webiny/admin-ui";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../index.js";
 import { $deleteElement } from "../../editorSdk/utils/index.js";
-export const DeleteElement = () => {
-  const editor = useDocumentEditor();
-  const toast = useToast();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.DeleteElement, payload => {
-      const result = $deleteElement(editor, payload.id);
-      if (result?.violation) {
-        toast.showWarningToast({
-          title: result.violation.message
-        });
-      }
-    });
-  }, []);
-  return null;
+const DeleteElement = ()=>{
+    const editor = useDocumentEditor();
+    const toast = useToast();
+    useEffect(()=>editor.registerCommandHandler(Commands.DeleteElement, (payload)=>{
+            const result = $deleteElement(editor, payload.id);
+            if (result?.violation) toast.showWarningToast({
+                title: result.violation.message
+            });
+        }), []);
+    return null;
 };
+export { DeleteElement };
 
 //# sourceMappingURL=DeleteElement.js.map

package/BaseEditor/commandHandlers/DeleteElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useToast","useDocumentEditor","Commands","$deleteElement","DeleteElement","editor","toast","registerCommandHandler","payload","result","id","violation","showWarningToast","title","message"],"sources":["DeleteElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $deleteElement } from \"~/editorSdk/utils/index.js\";\n\nexport const DeleteElement = () => {\n    const editor = useDocumentEditor();\n    const toast = useToast();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.DeleteElement, payload => {\n            const result = $deleteElement(editor, payload.id);\n\n            if (result?.violation) {\n                toast.showWarningToast({\n                    title: result.violation.message\n                });\n            }\n        });\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AACjB,SAASC,cAAc;AAEvB,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClC,MAAMK,KAAK,GAAGN,QAAQ,CAAC,CAAC;EAExBD,SAAS,CAAC,MAAM;IACZ,OAAOM,MAAM,CAACE,sBAAsB,CAACL,QAAQ,CAACE,aAAa,EAAEI,OAAO,IAAI;MACpE,MAAMC,MAAM,GAAGN,cAAc,CAACE,MAAM,EAAEG,OAAO,CAACE,EAAE,CAAC;MAEjD,IAAID,MAAM,EAAEE,SAAS,EAAE;QACnBL,KAAK,CAACM,gBAAgB,CAAC;UACnBC,KAAK,EAAEJ,MAAM,CAACE,SAAS,CAACG;QAC5B,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/commandHandlers/DeleteElement.js","sources":["../../../src/BaseEditor/commandHandlers/DeleteElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $deleteElement } from \"~/editorSdk/utils/index.js\";\n\nexport const DeleteElement = () => {\n    const editor = useDocumentEditor();\n    const toast = useToast();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.DeleteElement, payload => {\n            const result = $deleteElement(editor, payload.id);\n\n            if (result?.violation) {\n                toast.showWarningToast({\n                    title: result.violation.message\n                });\n            }\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["DeleteElement","editor","useDocumentEditor","toast","useToast","useEffect","Commands","payload","result","$deleteElement"],"mappings":";;;;;AAMO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAMC,QAAQC;IAEdC,UAAU,IACCJ,OAAO,sBAAsB,CAACK,SAAS,aAAa,EAAEC,CAAAA;YACzD,MAAMC,SAASC,eAAeR,QAAQM,QAAQ,EAAE;YAEhD,IAAIC,QAAQ,WACRL,MAAM,gBAAgB,CAAC;gBACnB,OAAOK,OAAO,SAAS,CAAC,OAAO;YACnC;QAER,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/DeselectElement.js

@@ -2,14 +2,13 @@ import { useEffect } from "react";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../commands.js";
 import { $deselectElement } from "../../editorSdk/utils/index.js";
-export const DeselectElement = () => {
-  const editor = useDocumentEditor();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.DeselectElement, () => {
-      $deselectElement(editor);
-    });
-  }, []);
-  return null;
+const DeselectElement = ()=>{
+    const editor = useDocumentEditor();
+    useEffect(()=>editor.registerCommandHandler(Commands.DeselectElement, ()=>{
+            $deselectElement(editor);
+        }), []);
+    return null;
 };
+export { DeselectElement };
 
 //# sourceMappingURL=DeselectElement.js.map

package/BaseEditor/commandHandlers/DeselectElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useDocumentEditor","Commands","$deselectElement","DeselectElement","editor","registerCommandHandler"],"sources":["DeselectElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"../commands.js\";\nimport { $deselectElement } from \"~/editorSdk/utils/index.js\";\n\nexport const DeselectElement = () => {\n    const editor = useDocumentEditor();\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.DeselectElement, () => {\n            $deselectElement(editor);\n        });\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AACjB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClCD,SAAS,CAAC,MAAM;IACZ,OAAOK,MAAM,CAACC,sBAAsB,CAACJ,QAAQ,CAACE,eAAe,EAAE,MAAM;MACjED,gBAAgB,CAACE,MAAM,CAAC;IAC5B,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/commandHandlers/DeselectElement.js","sources":["../../../src/BaseEditor/commandHandlers/DeselectElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"../commands.js\";\nimport { $deselectElement } from \"~/editorSdk/utils/index.js\";\n\nexport const DeselectElement = () => {\n    const editor = useDocumentEditor();\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.DeselectElement, () => {\n            $deselectElement(editor);\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["DeselectElement","editor","useDocumentEditor","useEffect","Commands","$deselectElement"],"mappings":";;;;AAKO,MAAMA,kBAAkB;IAC3B,MAAMC,SAASC;IACfC,UAAU,IACCF,OAAO,sBAAsB,CAACG,SAAS,eAAe,EAAE;YAC3DC,iBAAiBJ;QACrB,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/HighlightElement.js

@@ -2,16 +2,13 @@ import { useEffect } from "react";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../commands.js";
 import { $highlightElement } from "../../editorSdk/utils/index.js";
-export const HighlightElement = () => {
-  const editor = useDocumentEditor();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.HighlightElement, ({
-      id
-    }) => {
-      $highlightElement(editor, id);
-    });
-  }, []);
-  return null;
+const HighlightElement = ()=>{
+    const editor = useDocumentEditor();
+    useEffect(()=>editor.registerCommandHandler(Commands.HighlightElement, ({ id })=>{
+            $highlightElement(editor, id);
+        }), []);
+    return null;
 };
+export { HighlightElement };
 
 //# sourceMappingURL=HighlightElement.js.map

package/BaseEditor/commandHandlers/HighlightElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useDocumentEditor","Commands","$highlightElement","HighlightElement","editor","registerCommandHandler","id"],"sources":["HighlightElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"../commands.js\";\nimport { $highlightElement } from \"~/editorSdk/utils/index.js\";\n\nexport const HighlightElement = () => {\n    const editor = useDocumentEditor();\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.HighlightElement, ({ id }) => {\n            $highlightElement(editor, id);\n        });\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AACjB,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClCD,SAAS,CAAC,MAAM;IACZ,OAAOK,MAAM,CAACC,sBAAsB,CAACJ,QAAQ,CAACE,gBAAgB,EAAE,CAAC;MAAEG;IAAG,CAAC,KAAK;MACxEJ,iBAAiB,CAACE,MAAM,EAAEE,EAAE,CAAC;IACjC,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/commandHandlers/HighlightElement.js","sources":["../../../src/BaseEditor/commandHandlers/HighlightElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"../commands.js\";\nimport { $highlightElement } from \"~/editorSdk/utils/index.js\";\n\nexport const HighlightElement = () => {\n    const editor = useDocumentEditor();\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.HighlightElement, ({ id }) => {\n            $highlightElement(editor, id);\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["HighlightElement","editor","useDocumentEditor","useEffect","Commands","id","$highlightElement"],"mappings":";;;;AAKO,MAAMA,mBAAmB;IAC5B,MAAMC,SAASC;IACfC,UAAU,IACCF,OAAO,sBAAsB,CAACG,SAAS,gBAAgB,EAAE,CAAC,EAAEC,EAAE,EAAE;YACnEC,kBAAkBL,QAAQI;QAC9B,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/MoveElement.js

@@ -3,26 +3,23 @@ import { useToast } from "@webiny/admin-ui";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../index.js";
 import { $moveElement } from "../../editorSdk/utils/index.js";
-export const MoveElement = () => {
-  const toast = useToast();
-  const editor = useDocumentEditor();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.MoveElement, payload => {
-      const components = editor.getEditorState().read().components;
-      editor.updateDocument(document => {
-        const result = $moveElement(document, {
-          ...payload,
-          components
-        });
-        if (result?.violation) {
-          toast.showWarningToast({
-            title: result.violation.message
-          });
-        }
-      });
-    });
-  }, []);
-  return null;
+const MoveElement = ()=>{
+    const toast = useToast();
+    const editor = useDocumentEditor();
+    useEffect(()=>editor.registerCommandHandler(Commands.MoveElement, (payload)=>{
+            const components = editor.getEditorState().read().components;
+            editor.updateDocument((document)=>{
+                const result = $moveElement(document, {
+                    ...payload,
+                    components
+                });
+                if (result?.violation) toast.showWarningToast({
+                    title: result.violation.message
+                });
+            });
+        }), []);
+    return null;
 };
+export { MoveElement };
 
 //# sourceMappingURL=MoveElement.js.map

package/BaseEditor/commandHandlers/MoveElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useToast","useDocumentEditor","Commands","$moveElement","MoveElement","toast","editor","registerCommandHandler","payload","components","getEditorState","read","updateDocument","document","result","violation","showWarningToast","title","message"],"sources":["MoveElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $moveElement } from \"~/editorSdk/utils/index.js\";\n\nexport const MoveElement = () => {\n    const toast = useToast();\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.MoveElement, payload => {\n            const components = editor.getEditorState().read().components;\n            editor.updateDocument(document => {\n                const result = $moveElement(document, { ...payload, components });\n                if (result?.violation) {\n                    toast.showWarningToast({\n                        title: result.violation.message\n                    });\n                }\n            });\n        });\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AACjB,SAASC,YAAY;AAErB,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGL,QAAQ,CAAC,CAAC;EACxB,MAAMM,MAAM,GAAGL,iBAAiB,CAAC,CAAC;EAElCF,SAAS,CAAC,MAAM;IACZ,OAAOO,MAAM,CAACC,sBAAsB,CAACL,QAAQ,CAACE,WAAW,EAAEI,OAAO,IAAI;MAClE,MAAMC,UAAU,GAAGH,MAAM,CAACI,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACF,UAAU;MAC5DH,MAAM,CAACM,cAAc,CAACC,QAAQ,IAAI;QAC9B,MAAMC,MAAM,GAAGX,YAAY,CAACU,QAAQ,EAAE;UAAE,GAAGL,OAAO;UAAEC;QAAW,CAAC,CAAC;QACjE,IAAIK,MAAM,EAAEC,SAAS,EAAE;UACnBV,KAAK,CAACW,gBAAgB,CAAC;YACnBC,KAAK,EAAEH,MAAM,CAACC,SAAS,CAACG;UAC5B,CAAC,CAAC;QACN;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/commandHandlers/MoveElement.js","sources":["../../../src/BaseEditor/commandHandlers/MoveElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $moveElement } from \"~/editorSdk/utils/index.js\";\n\nexport const MoveElement = () => {\n    const toast = useToast();\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.MoveElement, payload => {\n            const components = editor.getEditorState().read().components;\n            editor.updateDocument(document => {\n                const result = $moveElement(document, { ...payload, components });\n                if (result?.violation) {\n                    toast.showWarningToast({\n                        title: result.violation.message\n                    });\n                }\n            });\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["MoveElement","toast","useToast","editor","useDocumentEditor","useEffect","Commands","payload","components","document","result","$moveElement"],"mappings":";;;;;AAMO,MAAMA,cAAc;IACvB,MAAMC,QAAQC;IACd,MAAMC,SAASC;IAEfC,UAAU,IACCF,OAAO,sBAAsB,CAACG,SAAS,WAAW,EAAEC,CAAAA;YACvD,MAAMC,aAAaL,OAAO,cAAc,GAAG,IAAI,GAAG,UAAU;YAC5DA,OAAO,cAAc,CAACM,CAAAA;gBAClB,MAAMC,SAASC,aAAaF,UAAU;oBAAE,GAAGF,OAAO;oBAAEC;gBAAW;gBAC/D,IAAIE,QAAQ,WACRT,MAAM,gBAAgB,CAAC;oBACnB,OAAOS,OAAO,SAAS,CAAC,OAAO;gBACnC;YAER;QACJ,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/SelectElement.js

@@ -2,16 +2,13 @@ import { useEffect } from "react";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../commands.js";
 import { $selectElement } from "../../editorSdk/utils/index.js";
-export const SelectElement = () => {
-  const editor = useDocumentEditor();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.SelectElement, ({
-      id
-    }) => {
-      $selectElement(editor, id);
-    });
-  }, []);
-  return null;
+const SelectElement = ()=>{
+    const editor = useDocumentEditor();
+    useEffect(()=>editor.registerCommandHandler(Commands.SelectElement, ({ id })=>{
+            $selectElement(editor, id);
+        }), []);
+    return null;
 };
+export { SelectElement };
 
 //# sourceMappingURL=SelectElement.js.map

package/BaseEditor/commandHandlers/SelectElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useDocumentEditor","Commands","$selectElement","SelectElement","editor","registerCommandHandler","id"],"sources":["SelectElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"../commands.js\";\nimport { $selectElement } from \"~/editorSdk/utils/index.js\";\n\nexport const SelectElement = () => {\n    const editor = useDocumentEditor();\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.SelectElement, ({ id }) => {\n            $selectElement(editor, id);\n        });\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AACjB,SAASC,cAAc;AAEvB,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClCD,SAAS,CAAC,MAAM;IACZ,OAAOK,MAAM,CAACC,sBAAsB,CAACJ,QAAQ,CAACE,aAAa,EAAE,CAAC;MAAEG;IAAG,CAAC,KAAK;MACrEJ,cAAc,CAACE,MAAM,EAAEE,EAAE,CAAC;IAC9B,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/commandHandlers/SelectElement.js","sources":["../../../src/BaseEditor/commandHandlers/SelectElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"../commands.js\";\nimport { $selectElement } from \"~/editorSdk/utils/index.js\";\n\nexport const SelectElement = () => {\n    const editor = useDocumentEditor();\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.SelectElement, ({ id }) => {\n            $selectElement(editor, id);\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["SelectElement","editor","useDocumentEditor","useEffect","Commands","id","$selectElement"],"mappings":";;;;AAKO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACfC,UAAU,IACCF,OAAO,sBAAsB,CAACG,SAAS,aAAa,EAAE,CAAC,EAAEC,EAAE,EAAE;YAChEC,eAAeL,QAAQI;QAC3B,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/index.js

@@ -1,13 +1,13 @@
-import React from "react";
+import react from "react";
+import { CloneElement } from "./CloneElement.js";
 import { CreateElement } from "./CreateElement.js";
 import { DeleteElement } from "./DeleteElement.js";
 import { MoveElement } from "./MoveElement.js";
 import { DeselectElement } from "./DeselectElement.js";
 import { SelectElement } from "./SelectElement.js";
 import { HighlightElement } from "./HighlightElement.js";
-export const CommandHandlers = /*#__PURE__*/React.memo(() => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CreateElement, null), /*#__PURE__*/React.createElement(DeleteElement, null), /*#__PURE__*/React.createElement(MoveElement, null), /*#__PURE__*/React.createElement(DeselectElement, null), /*#__PURE__*/React.createElement(SelectElement, null), /*#__PURE__*/React.createElement(HighlightElement, null));
-});
+const CommandHandlers = /*#__PURE__*/ react.memo(()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CloneElement, null), /*#__PURE__*/ react.createElement(CreateElement, null), /*#__PURE__*/ react.createElement(DeleteElement, null), /*#__PURE__*/ react.createElement(MoveElement, null), /*#__PURE__*/ react.createElement(DeselectElement, null), /*#__PURE__*/ react.createElement(SelectElement, null), /*#__PURE__*/ react.createElement(HighlightElement, null)));
 CommandHandlers.displayName = "CommandHandlers";
+export { CommandHandlers };
 
 //# sourceMappingURL=index.js.map

package/BaseEditor/commandHandlers/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","CreateElement","DeleteElement","MoveElement","DeselectElement","SelectElement","HighlightElement","CommandHandlers","memo","createElement","Fragment","displayName"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { CreateElement } from \"./CreateElement.js\";\nimport { DeleteElement } from \"./DeleteElement.js\";\nimport { MoveElement } from \"./MoveElement.js\";\nimport { DeselectElement } from \"./DeselectElement.js\";\nimport { SelectElement } from \"./SelectElement.js\";\nimport { HighlightElement } from \"./HighlightElement.js\";\n\nexport const CommandHandlers = React.memo(() => {\n    return (\n        <>\n            <CreateElement />\n            <DeleteElement />\n            <MoveElement />\n            <DeselectElement />\n            <SelectElement />\n            <HighlightElement />\n        </>\n    );\n});\n\nCommandHandlers.displayName = \"CommandHandlers\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa;AACtB,SAASC,aAAa;AACtB,SAASC,WAAW;AACpB,SAASC,eAAe;AACxB,SAASC,aAAa;AACtB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,eAAe,gBAAGP,KAAK,CAACQ,IAAI,CAAC,MAAM;EAC5C,oBACIR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACIV,KAAA,CAAAS,aAAA,CAACR,aAAa,MAAE,CAAC,eACjBD,KAAA,CAAAS,aAAA,CAACP,aAAa,MAAE,CAAC,eACjBF,KAAA,CAAAS,aAAA,CAACN,WAAW,MAAE,CAAC,eACfH,KAAA,CAAAS,aAAA,CAACL,eAAe,MAAE,CAAC,eACnBJ,KAAA,CAAAS,aAAA,CAACJ,aAAa,MAAE,CAAC,eACjBL,KAAA,CAAAS,aAAA,CAACH,gBAAgB,MAAE,CACrB,CAAC;AAEX,CAAC,CAAC;AAEFC,eAAe,CAACI,WAAW,GAAG,iBAAiB","ignoreList":[]}
+{"version":3,"file":"BaseEditor/commandHandlers/index.js","sources":["../../../src/BaseEditor/commandHandlers/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { CloneElement } from \"./CloneElement.js\";\nimport { CreateElement } from \"./CreateElement.js\";\nimport { DeleteElement } from \"./DeleteElement.js\";\nimport { MoveElement } from \"./MoveElement.js\";\nimport { DeselectElement } from \"./DeselectElement.js\";\nimport { SelectElement } from \"./SelectElement.js\";\nimport { HighlightElement } from \"./HighlightElement.js\";\n\nexport const CommandHandlers = React.memo(() => {\n    return (\n        <>\n            <CloneElement />\n            <CreateElement />\n            <DeleteElement />\n            <MoveElement />\n            <DeselectElement />\n            <SelectElement />\n            <HighlightElement />\n        </>\n    );\n});\n\nCommandHandlers.displayName = \"CommandHandlers\";\n"],"names":["CommandHandlers","React","CloneElement","CreateElement","DeleteElement","MoveElement","DeselectElement","SelectElement","HighlightElement"],"mappings":";;;;;;;;AASO,MAAMA,kBAAkB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IAC/B,WAAP,GACI,wDACI,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,aAAWA,OAAAA,WAAAA,GACZ,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,kBAAgBA;AAK7BR,gBAAgB,WAAW,GAAG"}

package/BaseEditor/commands.d.ts

@@ -1,6 +1,9 @@
 import type { ElementFactoryCreateElementParams } from "@webiny/website-builder-sdk";
 import type { WebsiteBuilderTheme } from "@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js";
 export declare const Commands: {
+    CloneElement: import("~/editorSdk/createCommand.js").Command<{
+        id: string;
+    }>;
     CreateElement: import("~/editorSdk/createCommand.js").Command<{
         componentName: string;
         parentId: string;

package/BaseEditor/commands.js

@@ -1,6 +1,7 @@
 import { createCommand } from "../editorSdk/createCommand.js";
 const CreateElement = createCommand("CREATE_ELEMENT");
 const MoveElement = createCommand("MOVE_ELEMENT");
+const CloneElement = createCommand("CLONE_ELEMENT");
 const DeleteElement = createCommand("DELETE_ELEMENT");
 const SelectElement = createCommand("SELECT_ELEMENT");
 const HighlightElement = createCommand("HIGHLIGHT_ELEMENT");
@@ -9,17 +10,19 @@ const DeselectElement = createCommand("DESELECT_ELEMENT");
 const RefreshPreview = createCommand("REFRESH_PREVIEW");
 const PreviewPatchElement = createCommand("PREVIEW_PATCH_ELEMENT");
 const SendPreviewMessage = createCommand("SEND_PREVIEW_MESSAGE");
-export const Commands = {
-  CreateElement,
-  DeleteElement,
-  MoveElement,
-  SelectElement,
-  DeselectElement,
-  HighlightElement,
-  RefreshPreview,
-  PreviewPatchElement,
-  SendPreviewMessage,
-  SetTheme
+const Commands = {
+    CloneElement: CloneElement,
+    CreateElement: CreateElement,
+    DeleteElement: DeleteElement,
+    MoveElement: MoveElement,
+    SelectElement: SelectElement,
+    DeselectElement: DeselectElement,
+    HighlightElement: HighlightElement,
+    RefreshPreview: RefreshPreview,
+    PreviewPatchElement: PreviewPatchElement,
+    SendPreviewMessage: SendPreviewMessage,
+    SetTheme: SetTheme
 };
+export { Commands };
 
 //# sourceMappingURL=commands.js.map

package/BaseEditor/commands.js.map

@@ -1 +1 @@
-{"version":3,"names":["createCommand","CreateElement","MoveElement","DeleteElement","SelectElement","HighlightElement","SetTheme","DeselectElement","RefreshPreview","PreviewPatchElement","SendPreviewMessage","Commands"],"sources":["commands.ts"],"sourcesContent":["import { createCommand } from \"~/editorSdk/createCommand.js\";\nimport type { ElementFactoryCreateElementParams } from \"@webiny/website-builder-sdk\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nconst CreateElement = createCommand<{\n    // Name of the component to use.\n    componentName: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot. Omit to append at the end.\n    index?: number;\n    // Bindings\n    bindings?: ElementFactoryCreateElementParams[\"bindings\"];\n}>(\"CREATE_ELEMENT\");\n\nconst MoveElement = createCommand<{\n    // ID of the element to move.\n    elementId: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot.\n    index: number;\n}>(\"MOVE_ELEMENT\");\n\nconst DeleteElement = createCommand<{\n    id: string;\n}>(\"DELETE_ELEMENT\");\n\nconst SelectElement = createCommand<{ id: string }>(\"SELECT_ELEMENT\");\n\nconst HighlightElement = createCommand<{ id: string }>(\"HIGHLIGHT_ELEMENT\");\n\nconst SetTheme = createCommand<{ theme: WebsiteBuilderTheme }>(\"SET_THEME\");\n\nconst DeselectElement = createCommand<never>(\"DESELECT_ELEMENT\");\n\nconst RefreshPreview = createCommand<never>(\"REFRESH_PREVIEW\");\n\nconst PreviewPatchElement = createCommand<{ elementId: string; patch: any[] }>(\n    \"PREVIEW_PATCH_ELEMENT\"\n);\n\nconst SendPreviewMessage = createCommand<{ type: string; payload?: any }>(\"SEND_PREVIEW_MESSAGE\");\n\nexport const Commands = {\n    CreateElement,\n    DeleteElement,\n    MoveElement,\n    SelectElement,\n    DeselectElement,\n    HighlightElement,\n    RefreshPreview,\n    PreviewPatchElement,\n    SendPreviewMessage,\n    SetTheme\n};\n"],"mappings":"AAAA,SAASA,aAAa;AAItB,MAAMC,aAAa,GAAGD,aAAa,CAWhC,gBAAgB,CAAC;AAEpB,MAAME,WAAW,GAAGF,aAAa,CAS9B,cAAc,CAAC;AAElB,MAAMG,aAAa,GAAGH,aAAa,CAEhC,gBAAgB,CAAC;AAEpB,MAAMI,aAAa,GAAGJ,aAAa,CAAiB,gBAAgB,CAAC;AAErE,MAAMK,gBAAgB,GAAGL,aAAa,CAAiB,mBAAmB,CAAC;AAE3E,MAAMM,QAAQ,GAAGN,aAAa,CAAiC,WAAW,CAAC;AAE3E,MAAMO,eAAe,GAAGP,aAAa,CAAQ,kBAAkB,CAAC;AAEhE,MAAMQ,cAAc,GAAGR,aAAa,CAAQ,iBAAiB,CAAC;AAE9D,MAAMS,mBAAmB,GAAGT,aAAa,CACrC,uBACJ,CAAC;AAED,MAAMU,kBAAkB,GAAGV,aAAa,CAAkC,sBAAsB,CAAC;AAEjG,OAAO,MAAMW,QAAQ,GAAG;EACpBV,aAAa;EACbE,aAAa;EACbD,WAAW;EACXE,aAAa;EACbG,eAAe;EACfF,gBAAgB;EAChBG,cAAc;EACdC,mBAAmB;EACnBC,kBAAkB;EAClBJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/commands.js","sources":["../../src/BaseEditor/commands.ts"],"sourcesContent":["import { createCommand } from \"~/editorSdk/createCommand.js\";\nimport type { ElementFactoryCreateElementParams } from \"@webiny/website-builder-sdk\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nconst CreateElement = createCommand<{\n    // Name of the component to use.\n    componentName: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot. Omit to append at the end.\n    index?: number;\n    // Bindings\n    bindings?: ElementFactoryCreateElementParams[\"bindings\"];\n}>(\"CREATE_ELEMENT\");\n\nconst MoveElement = createCommand<{\n    // ID of the element to move.\n    elementId: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot.\n    index: number;\n}>(\"MOVE_ELEMENT\");\n\nconst CloneElement = createCommand<{ id: string }>(\"CLONE_ELEMENT\");\n\nconst DeleteElement = createCommand<{\n    id: string;\n}>(\"DELETE_ELEMENT\");\n\nconst SelectElement = createCommand<{ id: string }>(\"SELECT_ELEMENT\");\n\nconst HighlightElement = createCommand<{ id: string }>(\"HIGHLIGHT_ELEMENT\");\n\nconst SetTheme = createCommand<{ theme: WebsiteBuilderTheme }>(\"SET_THEME\");\n\nconst DeselectElement = createCommand<never>(\"DESELECT_ELEMENT\");\n\nconst RefreshPreview = createCommand<never>(\"REFRESH_PREVIEW\");\n\nconst PreviewPatchElement = createCommand<{ elementId: string; patch: any[] }>(\n    \"PREVIEW_PATCH_ELEMENT\"\n);\n\nconst SendPreviewMessage = createCommand<{ type: string; payload?: any }>(\"SEND_PREVIEW_MESSAGE\");\n\nexport const Commands = {\n    CloneElement,\n    CreateElement,\n    DeleteElement,\n    MoveElement,\n    SelectElement,\n    DeselectElement,\n    HighlightElement,\n    RefreshPreview,\n    PreviewPatchElement,\n    SendPreviewMessage,\n    SetTheme\n};\n"],"names":["CreateElement","createCommand","MoveElement","CloneElement","DeleteElement","SelectElement","HighlightElement","SetTheme","DeselectElement","RefreshPreview","PreviewPatchElement","SendPreviewMessage","Commands"],"mappings":";AAIA,MAAMA,gBAAgBC,cAWnB;AAEH,MAAMC,cAAcD,cASjB;AAEH,MAAME,eAAeF,cAA8B;AAEnD,MAAMG,gBAAgBH,cAEnB;AAEH,MAAMI,gBAAgBJ,cAA8B;AAEpD,MAAMK,mBAAmBL,cAA8B;AAEvD,MAAMM,WAAWN,cAA8C;AAE/D,MAAMO,kBAAkBP,cAAqB;AAE7C,MAAMQ,iBAAiBR,cAAqB;AAE5C,MAAMS,sBAAsBT,cACxB;AAGJ,MAAMU,qBAAqBV,cAA+C;AAEnE,MAAMW,WAAW;IACpBT,cAAAA;IACAH,eAAAA;IACAI,eAAAA;IACAF,aAAAA;IACAG,eAAAA;IACAG,iBAAAA;IACAF,kBAAAA;IACAG,gBAAAA;IACAC,qBAAAA;IACAC,oBAAAA;IACAJ,UAAAA;AACJ"}

package/BaseEditor/components/DragPreview/DragCursorWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface DragCursorWrapperProps {
+    componentName: string;
+    isOverSlot: boolean;
+}
+export declare const DragCursorWrapper: ({ componentName, isOverSlot }: DragCursorWrapperProps) => React.JSX.Element;
+export {};

package/BaseEditor/components/DragPreview/DragCursorWrapper.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { DragCursor } from "@webiny/admin-ui";
+import { useComponent } from "../../hooks/useComponent.js";
+import { InlineSvg } from "../../defaultConfig/Toolbar/InsertElements/InlineSvg.js";
+const DragCursorWrapper = ({ componentName, isOverSlot })=>{
+    const component = useComponent(componentName);
+    return /*#__PURE__*/ react.createElement(DragCursor, {
+        label: component?.label ?? componentName,
+        icon: component?.image ? /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }) : void 0,
+        isOverSlot: isOverSlot
+    });
+};
+export { DragCursorWrapper };
+
+//# sourceMappingURL=DragCursorWrapper.js.map

package/BaseEditor/components/DragPreview/DragCursorWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/DragCursorWrapper.js","sources":["../../../../src/BaseEditor/components/DragPreview/DragCursorWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport { DragCursor } from \"@webiny/admin-ui\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\ninterface DragCursorWrapperProps {\n    componentName: string;\n    isOverSlot: boolean;\n}\n\nexport const DragCursorWrapper = ({ componentName, isOverSlot }: DragCursorWrapperProps) => {\n    const component = useComponent(componentName);\n\n    return (\n        <DragCursor\n            label={component?.label ?? componentName}\n            icon={component?.image ? <InlineSvg src={component.image} /> : undefined}\n            isOverSlot={isOverSlot}\n        />\n    );\n};\n"],"names":["DragCursorWrapper","componentName","isOverSlot","component","useComponent","DragCursor","InlineSvg","undefined"],"mappings":";;;;AAUO,MAAMA,oBAAoB,CAAC,EAAEC,aAAa,EAAEC,UAAU,EAA0B;IACnF,MAAMC,YAAYC,aAAaH;IAE/B,OAAO,WAAP,GACI,oBAACI,YAAUA;QACP,OAAOF,WAAW,SAASF;QAC3B,MAAME,WAAW,QAAQ,WAAR,GAAQ,oBAACG,WAASA;YAAC,KAAKH,UAAU,KAAK;aAAOI;QAC/D,YAAYL;;AAGxB"}

package/BaseEditor/components/DragPreview/DragPreview.js

@@ -0,0 +1,37 @@
+import react, { useEffect, useState } from "react";
+import { useDragLayer } from "react-dnd";
+import { useDropZoneManager } from "../../defaultConfig/Content/Preview/DropZoneManagerProvider.js";
+import { resetDragPosition, setDragPreviewRef, setupDragPosition } from "./useDragPosition.js";
+import { DragCursorWrapper } from "./DragCursorWrapper.js";
+const DragPreview = ()=>{
+    const [isOverSlot, setIsOverSlot] = useState(false);
+    const dropZoneManager = useDropZoneManager();
+    const { isDragging, item } = useDragLayer((monitor)=>{
+        setupDragPosition(monitor);
+        return {
+            isDragging: monitor.isDragging(),
+            item: monitor.getItem()
+        };
+    });
+    useEffect(()=>dropZoneManager.subscribeToMatchChange(setIsOverSlot), [
+        dropZoneManager
+    ]);
+    useEffect(()=>()=>{
+            resetDragPosition();
+        }, []);
+    if (!isDragging) return null;
+    if (item && item.dragInNavigator) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "fixed pointer-events-none left-0 top-0 w-full h-full z-[1001]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: setDragPreviewRef,
+        className: "absolute"
+    }, /*#__PURE__*/ react.createElement(DragCursorWrapper, {
+        componentName: item?.componentName,
+        isOverSlot: isOverSlot
+    })));
+};
+const DragPreview_DragPreview = DragPreview;
+export default DragPreview_DragPreview;
+
+//# sourceMappingURL=DragPreview.js.map

package/BaseEditor/components/DragPreview/DragPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/DragPreview.js","sources":["../../../../src/BaseEditor/components/DragPreview/DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragLayerMonitor } from \"react-dnd\";\nimport { useDragLayer } from \"react-dnd\";\nimport { useDropZoneManager } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManagerProvider.js\";\nimport { setupDragPosition, setDragPreviewRef, resetDragPosition } from \"./useDragPosition.js\";\nimport { DragCursorWrapper } from \"./DragCursorWrapper.js\";\n\nconst DragPreview = () => {\n    const [isOverSlot, setIsOverSlot] = useState(false);\n    const dropZoneManager = useDropZoneManager();\n\n    const { isDragging, item } = useDragLayer((monitor: DragLayerMonitor) => {\n        setupDragPosition(monitor);\n\n        return {\n            isDragging: monitor.isDragging(),\n            item: monitor.getItem()\n        };\n    });\n\n    useEffect(() => {\n        return dropZoneManager.subscribeToMatchChange(setIsOverSlot);\n    }, [dropZoneManager]);\n\n    useEffect(() => {\n        return () => {\n            resetDragPosition();\n        };\n    }, []);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (item && item.dragInNavigator) {\n        return null;\n    }\n\n    return (\n        <div className=\"fixed pointer-events-none left-0 top-0 w-full h-full z-[1001]\">\n            <div ref={setDragPreviewRef} className=\"absolute\">\n                <DragCursorWrapper componentName={item?.componentName} isOverSlot={isOverSlot} />\n            </div>\n        </div>\n    );\n};\n\nexport default DragPreview;\n"],"names":["DragPreview","isOverSlot","setIsOverSlot","useState","dropZoneManager","useDropZoneManager","isDragging","item","useDragLayer","monitor","setupDragPosition","useEffect","resetDragPosition","setDragPreviewRef","DragCursorWrapper"],"mappings":";;;;;AAOA,MAAMA,cAAc;IAChB,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;IAC7C,MAAMC,kBAAkBC;IAExB,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGC,aAAa,CAACC;QACvCC,kBAAkBD;QAElB,OAAO;YACH,YAAYA,QAAQ,UAAU;YAC9B,MAAMA,QAAQ,OAAO;QACzB;IACJ;IAEAE,UAAU,IACCP,gBAAgB,sBAAsB,CAACF,gBAC/C;QAACE;KAAgB;IAEpBO,UAAU,IACC;YACHC;QACJ,GACD,EAAE;IAEL,IAAI,CAACN,YACD,OAAO;IAGX,IAAIC,QAAQA,KAAK,eAAe,EAC5B,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,KAAKM;QAAmB,WAAU;qBACnC,oBAACC,mBAAiBA;QAAC,eAAeP,MAAM;QAAe,YAAYN;;AAInF;AAEA,gCAAeD"}

package/BaseEditor/components/DragPreview/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./DragPreview.js";

package/BaseEditor/components/DragPreview/index.js

@@ -0,0 +1 @@
+export { default } from "./DragPreview.js";

package/BaseEditor/components/DragPreview/useDragPosition.d.ts

@@ -0,0 +1,4 @@
+import type { DragLayerMonitor } from "react-dnd";
+export declare function setupDragPosition(monitor: DragLayerMonitor): void;
+export declare function setDragPreviewRef(el: HTMLDivElement | null): void;
+export declare function resetDragPosition(): void;

package/BaseEditor/components/DragPreview/useDragPosition.js

@@ -0,0 +1,26 @@
+let subscribedToOffsetChange = false;
+let dragPreviewRef = null;
+const onOffsetChange = (monitor)=>()=>{
+        if (!dragPreviewRef) return;
+        const offset = monitor.getClientOffset();
+        if (!offset) return;
+        const transform = `translate(${offset.x + 8}px, ${offset.y + 8}px)`;
+        dragPreviewRef.style["transform"] = transform;
+        dragPreviewRef.style["-webkit-transform"] = transform;
+    };
+function setupDragPosition(monitor) {
+    if (!subscribedToOffsetChange) {
+        monitor.subscribeToOffsetChange(onOffsetChange(monitor));
+        subscribedToOffsetChange = true;
+    }
+}
+function setDragPreviewRef(el) {
+    dragPreviewRef = el;
+}
+function resetDragPosition() {
+    subscribedToOffsetChange = false;
+    dragPreviewRef = null;
+}
+export { resetDragPosition, setDragPreviewRef, setupDragPosition };
+
+//# sourceMappingURL=useDragPosition.js.map

package/BaseEditor/components/DragPreview/useDragPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/useDragPosition.js","sources":["../../../../src/BaseEditor/components/DragPreview/useDragPosition.ts"],"sourcesContent":["import type { DragLayerMonitor } from \"react-dnd\";\n\nlet subscribedToOffsetChange = false;\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragLayerMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x + 8}px, ${offset.y + 8}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nexport function setupDragPosition(monitor: DragLayerMonitor) {\n    if (!subscribedToOffsetChange) {\n        // @ts-expect-error\n        monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n        subscribedToOffsetChange = true;\n    }\n}\n\nexport function setDragPreviewRef(el: HTMLDivElement | null) {\n    dragPreviewRef = el;\n}\n\nexport function resetDragPosition() {\n    subscribedToOffsetChange = false;\n    dragPreviewRef = null;\n}\n"],"names":["subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","transform","setupDragPosition","setDragPreviewRef","el","resetDragPosition"],"mappings":"AAEA,IAAIA,2BAA2B;AAC/B,IAAIC,iBAAwC;AAE5C,MAAMC,iBAAiB,CAACC,UAA8B;QAClD,IAAI,CAACF,gBACD;QAGJ,MAAMG,SAASD,QAAQ,eAAe;QACtC,IAAI,CAACC,QACD;QAGJ,MAAMC,YAAY,CAAC,UAAU,EAAED,OAAO,CAAC,GAAG,EAAE,IAAI,EAAEA,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;QACnEH,eAAe,KAAK,CAAC,YAAY,GAAGI;QAEpCJ,eAAe,KAAK,CAAC,oBAAoB,GAAGI;IAChD;AAEO,SAASC,kBAAkBH,OAAyB;IACvD,IAAI,CAACH,0BAA0B;QAE3BG,QAAQ,uBAAuB,CAACD,eAAeC;QAC/CH,2BAA2B;IAC/B;AACJ;AAEO,SAASO,kBAAkBC,EAAyB;IACvDP,iBAAiBO;AACrB;AAEO,SAASC;IACZT,2BAA2B;IAC3BC,iBAAiB;AACrB"}

package/BaseEditor/components/Draggable.d.ts

@@ -9,5 +9,5 @@ interface DraggableProps<T> {
         dragRef: ConnectDragSource;
     }) => React.ReactNode;
 }
-export declare const Draggable: React.MemoExoticComponent<(<T = any>({ type, item, canDrag, children }: DraggableProps<T>) => React.JSX.Element)>;
+export declare const Draggable: React.MemoExoticComponent<<T = any>({ type, item, canDrag, children }: DraggableProps<T>) => React.JSX.Element>;
 export {};

package/BaseEditor/components/Draggable.js

@@ -1,32 +1,32 @@
 import { useDrag } from "react-dnd";
-import React, { useEffect } from "react";
+import react, { useEffect } from "react";
 import { getEmptyImage } from "react-dnd-html5-backend";
-export const Draggable = /*#__PURE__*/React.memo(({
-  type,
-  item,
-  canDrag = true,
-  children
-}) => {
-  const [{
-    isDragging
-  }, dragRef, previewRef] = useDrag(() => ({
-    type,
-    item,
-    canDrag,
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    })
-  }), [type, item, canDrag]);
-  useEffect(() => {
-    previewRef(getEmptyImage(), {
-      captureDraggingState: true
-    });
-  }, [previewRef]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children({
-    isDragging,
-    dragRef
-  }));
+const Draggable = /*#__PURE__*/ react.memo(({ type, item, canDrag = true, children })=>{
+    const [{ isDragging }, dragRef, previewRef] = useDrag(()=>({
+            type,
+            item,
+            canDrag,
+            collect: (monitor)=>({
+                    isDragging: monitor.isDragging()
+                })
+        }), [
+        type,
+        item,
+        canDrag
+    ]);
+    useEffect(()=>{
+        previewRef(getEmptyImage(), {
+            captureDraggingState: true
+        });
+    }, [
+        previewRef
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, children({
+        isDragging,
+        dragRef
+    }));
 });
 Draggable.displayName = "Draggable";
+export { Draggable };
 
 //# sourceMappingURL=Draggable.js.map

package/BaseEditor/components/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDrag","React","useEffect","getEmptyImage","Draggable","memo","type","item","canDrag","children","isDragging","dragRef","previewRef","collect","monitor","captureDraggingState","createElement","Fragment","displayName"],"sources":["Draggable.tsx"],"sourcesContent":["import type { ConnectDragSource } from \"react-dnd\";\nimport { useDrag } from \"react-dnd\";\nimport React, { useEffect } from \"react\";\nimport { getEmptyImage } from \"react-dnd-html5-backend\";\n\ninterface DraggableProps<T> {\n    type: string;\n    item: T;\n    canDrag?: boolean;\n    children: (props: { isDragging: boolean; dragRef: ConnectDragSource }) => React.ReactNode;\n}\n\nexport const Draggable = React.memo(\n    <T = any,>({ type, item, canDrag = true, children }: DraggableProps<T>) => {\n        const [{ isDragging }, dragRef, previewRef] = useDrag(\n            () => ({\n                type,\n                item,\n                canDrag,\n                collect: monitor => ({\n                    isDragging: monitor.isDragging()\n                })\n            }),\n            [type, item, canDrag]\n        );\n\n        useEffect(() => {\n            previewRef(getEmptyImage(), { captureDraggingState: true });\n        }, [previewRef]);\n\n        return <>{children({ isDragging, dragRef })}</>;\n    }\n);\n\nDraggable.displayName = \"Draggable\";\n"],"mappings":"AACA,SAASA,OAAO,QAAQ,WAAW;AACnC,OAAOC,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,aAAa,QAAQ,yBAAyB;AASvD,OAAO,MAAMC,SAAS,gBAAGH,KAAK,CAACI,IAAI,CAC/B,CAAW;EAAEC,IAAI;EAAEC,IAAI;EAAEC,OAAO,GAAG,IAAI;EAAEC;AAA4B,CAAC,KAAK;EACvE,MAAM,CAAC;IAAEC;EAAW,CAAC,EAAEC,OAAO,EAAEC,UAAU,CAAC,GAAGZ,OAAO,CACjD,OAAO;IACHM,IAAI;IACJC,IAAI;IACJC,OAAO;IACPK,OAAO,EAAEC,OAAO,KAAK;MACjBJ,UAAU,EAAEI,OAAO,CAACJ,UAAU,CAAC;IACnC,CAAC;EACL,CAAC,CAAC,EACF,CAACJ,IAAI,EAAEC,IAAI,EAAEC,OAAO,CACxB,CAAC;EAEDN,SAAS,CAAC,MAAM;IACZU,UAAU,CAACT,aAAa,CAAC,CAAC,EAAE;MAAEY,oBAAoB,EAAE;IAAK,CAAC,CAAC;EAC/D,CAAC,EAAE,CAACH,UAAU,CAAC,CAAC;EAEhB,oBAAOX,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAgB,QAAA,QAAGR,QAAQ,CAAC;IAAEC,UAAU;IAAEC;EAAQ,CAAC,CAAI,CAAC;AACnD,CACJ,CAAC;AAEDP,SAAS,CAACc,WAAW,GAAG,WAAW","ignoreList":[]}
+{"version":3,"file":"BaseEditor/components/Draggable.js","sources":["../../../src/BaseEditor/components/Draggable.tsx"],"sourcesContent":["import type { ConnectDragSource } from \"react-dnd\";\nimport { useDrag } from \"react-dnd\";\nimport React, { useEffect } from \"react\";\nimport { getEmptyImage } from \"react-dnd-html5-backend\";\n\ninterface DraggableProps<T> {\n    type: string;\n    item: T;\n    canDrag?: boolean;\n    children: (props: { isDragging: boolean; dragRef: ConnectDragSource }) => React.ReactNode;\n}\n\nexport const Draggable = React.memo(\n    <T = any,>({ type, item, canDrag = true, children }: DraggableProps<T>) => {\n        const [{ isDragging }, dragRef, previewRef] = useDrag(\n            () => ({\n                type,\n                item,\n                canDrag,\n                collect: monitor => ({\n                    isDragging: monitor.isDragging()\n                })\n            }),\n            [type, item, canDrag]\n        );\n\n        useEffect(() => {\n            previewRef(getEmptyImage(), { captureDraggingState: true });\n        }, [previewRef]);\n\n        return <>{children({ isDragging, dragRef })}</>;\n    }\n);\n\nDraggable.displayName = \"Draggable\";\n"],"names":["Draggable","React","type","item","canDrag","children","isDragging","dragRef","previewRef","useDrag","monitor","useEffect","getEmptyImage"],"mappings":";;;AAYO,MAAMA,YAAY,WAAHA,GAAGC,MAAAA,IAAU,CAC/B,CAAW,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,IAAI,EAAEC,QAAQ,EAAqB;IAClE,MAAM,CAAC,EAAEC,UAAU,EAAE,EAAEC,SAASC,WAAW,GAAGC,QAC1C,IAAO;YACHP;YACAC;YACAC;YACA,SAASM,CAAAA,UAAY;oBACjB,YAAYA,QAAQ,UAAU;gBAClC;QACJ,IACA;QAACR;QAAMC;QAAMC;KAAQ;IAGzBO,UAAU;QACNH,WAAWI,iBAAiB;YAAE,sBAAsB;QAAK;IAC7D,GAAG;QAACJ;KAAW;IAEf,OAAO,WAAP,GAAO,0CAAGH,SAAS;QAAEC;QAAYC;IAAQ;AAC7C;AAGJP,UAAU,WAAW,GAAG"}