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

package/BaseEditor/commandHandlers/CreateElement.js

@@ -1,15 +1,19 @@
 import { useEffect } from "react";
+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();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.CreateElement, payload => {
-      $createElement(editor, payload);
-    });
-  }, []);
-  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","useDocumentEditor","Commands","$createElement","CreateElement","editor","registerCommandHandler","payload"],"sources":["CreateElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\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\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.CreateElement, payload => {\n            $createElement(editor, payload);\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;EAElCD,SAAS,CAAC,MAAM;IACZ,OAAOK,MAAM,CAACC,sBAAsB,CAACJ,QAAQ,CAACE,aAAa,EAAEG,OAAO,IAAI;MACpEJ,cAAc,CAACE,MAAM,EAAEE,OAAO,CAAC;IACnC,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

@@ -1,17 +1,19 @@
 import { useEffect } from "react";
+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();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.DeleteElement, payload => {
-      editor.updateDocument(document => {
-        $deleteElement(document, payload.id);
-      });
-    });
-  }, []);
-  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","useDocumentEditor","Commands","$deleteElement","DeleteElement","editor","registerCommandHandler","payload","updateDocument","document","id"],"sources":["DeleteElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\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    useEffect(() => {\n        return editor.registerCommandHandler(Commands.DeleteElement, payload => {\n            editor.updateDocument(document => {\n                $deleteElement(document, payload.id);\n            });\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,EAAEG,OAAO,IAAI;MACpEF,MAAM,CAACG,cAAc,CAACC,QAAQ,IAAI;QAC9BN,cAAc,CAACM,QAAQ,EAAEF,OAAO,CAACG,EAAE,CAAC;MACxC,CAAC,CAAC;IACN,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

@@ -1,17 +1,25 @@
 import { useEffect } from "react";
+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 editor = useDocumentEditor();
-  useEffect(() => {
-    return editor.registerCommandHandler(Commands.MoveElement, payload => {
-      editor.updateDocument(document => {
-        $moveElement(document, payload);
-      });
-    });
-  }, []);
-  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","useDocumentEditor","Commands","$moveElement","MoveElement","editor","registerCommandHandler","payload","updateDocument","document"],"sources":["MoveElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\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 editor = useDocumentEditor();\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.MoveElement, payload => {\n            editor.updateDocument(document => {\n                $moveElement(document, payload);\n            });\n        });\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AACjB,SAASC,YAAY;AAErB,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClCD,SAAS,CAAC,MAAM;IACZ,OAAOK,MAAM,CAACC,sBAAsB,CAACJ,QAAQ,CAACE,WAAW,EAAEG,OAAO,IAAI;MAClEF,MAAM,CAACG,cAAc,CAACC,QAAQ,IAAI;QAC9BN,YAAY,CAACM,QAAQ,EAAEF,OAAO,CAAC;MACnC,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,12 @@
-import React from "react";
+import react from "react";
 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(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 { 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"],"names":["CommandHandlers","React","CreateElement","DeleteElement","MoveElement","DeselectElement","SelectElement","HighlightElement"],"mappings":";;;;;;;AAQO,MAAMA,kBAAkB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IAC/B,WAAP,GACI,wDACI,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;AAK7BP,gBAAgB,WAAW,GAAG"}

package/BaseEditor/commands.d.ts

@@ -5,7 +5,7 @@ export declare const Commands: {
         componentName: string;
         parentId: string;
         slot: string;
-        index: number;
+        index?: number;
         bindings?: ElementFactoryCreateElementParams["bindings"];
     }>;
     DeleteElement: import("~/editorSdk/createCommand.js").Command<{
@@ -29,6 +29,10 @@ export declare const Commands: {
         elementId: string;
         patch: any[];
     }>;
+    SendPreviewMessage: import("~/editorSdk/createCommand.js").Command<{
+        type: string;
+        payload?: any;
+    }>;
     SetTheme: import("~/editorSdk/createCommand.js").Command<{
         theme: WebsiteBuilderTheme;
     }>;

package/BaseEditor/commands.js

@@ -8,16 +8,19 @@ const SetTheme = createCommand("SET_THEME");
 const DeselectElement = createCommand("DESELECT_ELEMENT");
 const RefreshPreview = createCommand("REFRESH_PREVIEW");
 const PreviewPatchElement = createCommand("PREVIEW_PATCH_ELEMENT");
-export const Commands = {
-  CreateElement,
-  DeleteElement,
-  MoveElement,
-  SelectElement,
-  DeselectElement,
-  HighlightElement,
-  RefreshPreview,
-  PreviewPatchElement,
-  SetTheme
+const SendPreviewMessage = createCommand("SEND_PREVIEW_MESSAGE");
+const Commands = {
+    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","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.\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\nexport const Commands = {\n    CreateElement,\n    DeleteElement,\n    MoveElement,\n    SelectElement,\n    DeselectElement,\n    HighlightElement,\n    RefreshPreview,\n    PreviewPatchElement,\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,OAAO,MAAMU,QAAQ,GAAG;EACpBT,aAAa;EACbE,aAAa;EACbD,WAAW;EACXE,aAAa;EACbG,eAAe;EACfF,gBAAgB;EAChBG,cAAc;EACdC,mBAAmB;EACnBH;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 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"],"names":["CreateElement","createCommand","MoveElement","DeleteElement","SelectElement","HighlightElement","SetTheme","DeselectElement","RefreshPreview","PreviewPatchElement","SendPreviewMessage","Commands"],"mappings":";AAIA,MAAMA,gBAAgBC,cAWnB;AAEH,MAAMC,cAAcD,cASjB;AAEH,MAAME,gBAAgBF,cAEnB;AAEH,MAAMG,gBAAgBH,cAA8B;AAEpD,MAAMI,mBAAmBJ,cAA8B;AAEvD,MAAMK,WAAWL,cAA8C;AAE/D,MAAMM,kBAAkBN,cAAqB;AAE7C,MAAMO,iBAAiBP,cAAqB;AAE5C,MAAMQ,sBAAsBR,cACxB;AAGJ,MAAMS,qBAAqBT,cAA+C;AAEnE,MAAMU,WAAW;IACpBX,eAAAA;IACAG,eAAAA;IACAD,aAAAA;IACAE,eAAAA;IACAG,iBAAAA;IACAF,kBAAAA;IACAG,gBAAAA;IACAC,qBAAAA;IACAC,oBAAAA;IACAJ,UAAAA;AACJ"}

package/BaseEditor/components/DragPreview.js

@@ -1,82 +1,59 @@
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { useDragLayer } from "react-dnd";
 let subscribedToOffsetChange = false;
 let dragPreviewRef = null;
-const onOffsetChange = monitor => () => {
-  if (!dragPreviewRef) {
-    return;
-  }
-  const offset = monitor.getClientOffset();
-  if (!offset) {
-    return;
-  }
-  const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;
-  dragPreviewRef.style["transform"] = transform;
-  /**
-   * TS is complaining about -webkit.
-   */
-  // @ts-expect-error
-  dragPreviewRef.style["-webkit-transform"] = transform;
-};
-const DragPreview = () => {
-  const [dragHelperOpacity, setDragHelperOpacity] = useState(0);
-  const {
-    isDragging,
-    item
-  } = useDragLayer(monitor => {
-    if (!subscribedToOffsetChange) {
-      // @ts-expect-error
-      monitor.subscribeToOffsetChange(onOffsetChange(monitor));
-      subscribedToOffsetChange = true;
-    }
-    return {
-      isDragging: monitor.isDragging(),
-      item: monitor.getItem()
-    };
-  });
-  useEffect(() => {
-    return () => {
-      subscribedToOffsetChange = false;
-      dragPreviewRef = null;
+const onOffsetChange = (monitor)=>()=>{
+        if (!dragPreviewRef) return;
+        const offset = monitor.getClientOffset();
+        if (!offset) return;
+        const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;
+        dragPreviewRef.style["transform"] = transform;
+        dragPreviewRef.style["-webkit-transform"] = transform;
     };
-  }, []);
-
-  // We track the value of "isDragging" and apply opacity=1 (after 100ms), when it switches to true.
-  // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it
-  // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.
-  useEffect(() => {
-    if (isDragging) {
-      setTimeout(() => {
-        setDragHelperOpacity(isDragging ? 1 : 0);
-      }, 100);
-      return;
-    }
-    setDragHelperOpacity(0);
-  }, [isDragging]);
-  if (!isDragging) {
-    return null;
-  }
-  // We don't want to show the drag preview for items being drag in the navigator.
-  if (item && item.dragInNavigator) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      zIndex: 1001
-    },
-    className: "fixed pointer-events-none left-0 top-0 w-full h-full"
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: el => {
-      dragPreviewRef = el;
-    },
-    className: "transition-opacity duration-250 ease-in-out block",
-    style: {
-      opacity: dragHelperOpacity
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "size-lg rounded-full bg-primary"
-  })));
+const DragPreview = ()=>{
+    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);
+    const { isDragging, item } = useDragLayer((monitor)=>{
+        if (!subscribedToOffsetChange) {
+            monitor.subscribeToOffsetChange(onOffsetChange(monitor));
+            subscribedToOffsetChange = true;
+        }
+        return {
+            isDragging: monitor.isDragging(),
+            item: monitor.getItem()
+        };
+    });
+    useEffect(()=>()=>{
+            subscribedToOffsetChange = false;
+            dragPreviewRef = null;
+        }, []);
+    useEffect(()=>{
+        if (isDragging) return void setTimeout(()=>{
+            setDragHelperOpacity(isDragging ? 1 : 0);
+        }, 100);
+        setDragHelperOpacity(0);
+    }, [
+        isDragging
+    ]);
+    if (!isDragging) return null;
+    if (item && item.dragInNavigator) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            zIndex: 1001
+        },
+        className: "fixed pointer-events-none left-0 top-0 w-full h-full"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: (el)=>{
+            dragPreviewRef = el;
+        },
+        className: "transition-opacity duration-250 ease-in-out block",
+        style: {
+            opacity: dragHelperOpacity
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "size-lg rounded-full bg-primary"
+    })));
 };
-export default DragPreview;
+const components_DragPreview = DragPreview;
+export default components_DragPreview;
 
 //# sourceMappingURL=DragPreview.js.map

package/BaseEditor/components/DragPreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","useDragLayer","subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","getClientOffset","transform","x","y","style","DragPreview","dragHelperOpacity","setDragHelperOpacity","isDragging","item","subscribeToOffsetChange","getItem","setTimeout","dragInNavigator","createElement","zIndex","className","ref","el","opacity"],"sources":["DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragLayerMonitor } from \"react-dnd\";\nimport { useDragLayer } 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 - 15}px, ${offset.y - 15}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    /**\n     * TS is complaining about -webkit.\n     */\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nconst DragPreview = () => {\n    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);\n\n    const { isDragging, item } = useDragLayer((monitor: DragLayerMonitor) => {\n        if (!subscribedToOffsetChange) {\n            // @ts-expect-error\n            monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n            subscribedToOffsetChange = true;\n        }\n\n        return {\n            isDragging: monitor.isDragging(),\n            item: monitor.getItem()\n        };\n    });\n\n    useEffect(() => {\n        return () => {\n            subscribedToOffsetChange = false;\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    // We track the value of \"isDragging\" and apply opacity=1 (after 100ms), when it switches to true.\n    // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it\n    // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.\n    useEffect((): void => {\n        if (isDragging) {\n            setTimeout(() => {\n                setDragHelperOpacity(isDragging ? 1 : 0);\n            }, 100);\n            return;\n        }\n\n        setDragHelperOpacity(0);\n    }, [isDragging]);\n\n    if (!isDragging) {\n        return null;\n    }\n    // We don't want to show the drag preview for items being drag in the navigator.\n    if (item && item.dragInNavigator) {\n        return null;\n    }\n\n    return (\n        <div\n            style={{ zIndex: 1001 }}\n            className=\"fixed pointer-events-none left-0 top-0 w-full h-full\"\n        >\n            <div\n                ref={el => {\n                    dragPreviewRef = el;\n                }}\n                className=\"transition-opacity duration-250 ease-in-out block\"\n                style={{ opacity: dragHelperOpacity }}\n            >\n                <div className=\"size-lg rounded-full bg-primary\" />\n            </div>\n        </div>\n    );\n};\n\nexport default DragPreview;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAElD,SAASC,YAAY,QAAQ,WAAW;AAExC,IAAIC,wBAAwB,GAAG,KAAK;AACpC,IAAIC,cAAqC,GAAG,IAAI;AAEhD,MAAMC,cAAc,GAAIC,OAAyB,IAAK,MAAM;EACxD,IAAI,CAACF,cAAc,EAAE;IACjB;EACJ;EAEA,MAAMG,MAAM,GAAGD,OAAO,CAACE,eAAe,CAAC,CAAC;EACxC,IAAI,CAACD,MAAM,EAAE;IACT;EACJ;EAEA,MAAME,SAAS,GAAG,aAAaF,MAAM,CAACG,CAAC,GAAG,EAAE,OAAOH,MAAM,CAACI,CAAC,GAAG,EAAE,KAAK;EACrEP,cAAc,CAACQ,KAAK,CAAC,WAAW,CAAC,GAAGH,SAAS;EAC7C;AACJ;AACA;EACI;EACAL,cAAc,CAACQ,KAAK,CAAC,mBAAmB,CAAC,GAAGH,SAAS;AACzD,CAAC;AAED,MAAMI,WAAW,GAAGA,CAAA,KAAM;EACtB,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGd,QAAQ,CAAC,CAAC,CAAC;EAE7D,MAAM;IAAEe,UAAU;IAAEC;EAAK,CAAC,GAAGf,YAAY,CAAEI,OAAyB,IAAK;IACrE,IAAI,CAACH,wBAAwB,EAAE;MAC3B;MACAG,OAAO,CAACY,uBAAuB,CAACb,cAAc,CAACC,OAAO,CAAC,CAAC;MACxDH,wBAAwB,GAAG,IAAI;IACnC;IAEA,OAAO;MACHa,UAAU,EAAEV,OAAO,CAACU,UAAU,CAAC,CAAC;MAChCC,IAAI,EAAEX,OAAO,CAACa,OAAO,CAAC;IAC1B,CAAC;EACL,CAAC,CAAC;EAEFnB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTG,wBAAwB,GAAG,KAAK;MAChCC,cAAc,GAAG,IAAI;IACzB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA;EACA;EACAJ,SAAS,CAAC,MAAY;IAClB,IAAIgB,UAAU,EAAE;MACZI,UAAU,CAAC,MAAM;QACbL,oBAAoB,CAACC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC5C,CAAC,EAAE,GAAG,CAAC;MACP;IACJ;IAEAD,oBAAoB,CAAC,CAAC,CAAC;EAC3B,CAAC,EAAE,CAACC,UAAU,CAAC,CAAC;EAEhB,IAAI,CAACA,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EACA;EACA,IAAIC,IAAI,IAAIA,IAAI,CAACI,eAAe,EAAE;IAC9B,OAAO,IAAI;EACf;EAEA,oBACItB,KAAA,CAAAuB,aAAA;IACIV,KAAK,EAAE;MAAEW,MAAM,EAAE;IAAK,CAAE;IACxBC,SAAS,EAAC;EAAsD,gBAEhEzB,KAAA,CAAAuB,aAAA;IACIG,GAAG,EAAEC,EAAE,IAAI;MACPtB,cAAc,GAAGsB,EAAE;IACvB,CAAE;IACFF,SAAS,EAAC,mDAAmD;IAC7DZ,KAAK,EAAE;MAAEe,OAAO,EAAEb;IAAkB;EAAE,gBAEtCf,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAiC,CAAE,CACjD,CACJ,CAAC;AAEd,CAAC;AAED,eAAeX,WAAW","ignoreList":[]}
+{"version":3,"file":"BaseEditor/components/DragPreview.js","sources":["../../../src/BaseEditor/components/DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragLayerMonitor } from \"react-dnd\";\nimport { useDragLayer } 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 - 15}px, ${offset.y - 15}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    /**\n     * TS is complaining about -webkit.\n     */\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nconst DragPreview = () => {\n    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);\n\n    const { isDragging, item } = useDragLayer((monitor: DragLayerMonitor) => {\n        if (!subscribedToOffsetChange) {\n            // @ts-expect-error\n            monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n            subscribedToOffsetChange = true;\n        }\n\n        return {\n            isDragging: monitor.isDragging(),\n            item: monitor.getItem()\n        };\n    });\n\n    useEffect(() => {\n        return () => {\n            subscribedToOffsetChange = false;\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    // We track the value of \"isDragging\" and apply opacity=1 (after 100ms), when it switches to true.\n    // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it\n    // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.\n    useEffect((): void => {\n        if (isDragging) {\n            setTimeout(() => {\n                setDragHelperOpacity(isDragging ? 1 : 0);\n            }, 100);\n            return;\n        }\n\n        setDragHelperOpacity(0);\n    }, [isDragging]);\n\n    if (!isDragging) {\n        return null;\n    }\n    // We don't want to show the drag preview for items being drag in the navigator.\n    if (item && item.dragInNavigator) {\n        return null;\n    }\n\n    return (\n        <div\n            style={{ zIndex: 1001 }}\n            className=\"fixed pointer-events-none left-0 top-0 w-full h-full\"\n        >\n            <div\n                ref={el => {\n                    dragPreviewRef = el;\n                }}\n                className=\"transition-opacity duration-250 ease-in-out block\"\n                style={{ opacity: dragHelperOpacity }}\n            >\n                <div className=\"size-lg rounded-full bg-primary\" />\n            </div>\n        </div>\n    );\n};\n\nexport default DragPreview;\n"],"names":["subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","transform","DragPreview","dragHelperOpacity","setDragHelperOpacity","useState","isDragging","item","useDragLayer","useEffect","setTimeout","el"],"mappings":";;AAIA,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,GAAG,IAAI,EAAEA,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QACrEH,eAAe,KAAK,CAAC,YAAY,GAAGI;QAKpCJ,eAAe,KAAK,CAAC,oBAAoB,GAAGI;IAChD;AAEA,MAAMC,cAAc;IAChB,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,SAAS;IAE3D,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGC,aAAa,CAACT;QACvC,IAAI,CAACH,0BAA0B;YAE3BG,QAAQ,uBAAuB,CAACD,eAAeC;YAC/CH,2BAA2B;QAC/B;QAEA,OAAO;YACH,YAAYG,QAAQ,UAAU;YAC9B,MAAMA,QAAQ,OAAO;QACzB;IACJ;IAEAU,UAAU,IACC;YACHb,2BAA2B;YAC3BC,iBAAiB;QACrB,GACD,EAAE;IAKLY,UAAU;QACN,IAAIH,YAAY,YACZI,WAAW;YACPN,qBAAqBE,aAAa,IAAI;QAC1C,GAAG;QAIPF,qBAAqB;IACzB,GAAG;QAACE;KAAW;IAEf,IAAI,CAACA,YACD,OAAO;IAGX,IAAIC,QAAQA,KAAK,eAAe,EAC5B,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YAAE,QAAQ;QAAK;QACtB,WAAU;qBAEV,oBAAC;QACG,KAAKI,CAAAA;YACDd,iBAAiBc;QACrB;QACA,WAAU;QACV,OAAO;YAAE,SAASR;QAAkB;qBAEpC,oBAAC;QAAI,WAAU;;AAI/B;AAEA,+BAAeD"}

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"}