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

package/BaseEditor/defaultConfig/Content/Preview/Iframe.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useRef } from "react";
-import { cn, OverlayLoader } from "@webiny/admin-ui";
+import react, { useEffect, useMemo, useRef } from "react";
+import { OverlayLoader, cn } from "@webiny/admin-ui";
 import { observer } from "mobx-react-lite";
 import { ElementOverlays } from "./Overlays/ElementOverlays.js";
 import { ConnectEditorToPreview } from "../../../../DocumentEditor/ConnectEditorToPreview.js";
@@ -7,65 +7,61 @@ import { useResponsiveContainer } from "./useResponsiveContainer.js";
 import { usePreviewData } from "../../../hooks/usePreviewData.js";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { PreviewContainer } from "./PreviewContainer.js";
-export const Iframe = observer(({
-  url,
-  timestamp,
-  ...props
-}) => {
-  const iframeRef = useRef(null);
-  const previewBodyRef = useRef(null);
-  const previewWidth = useResponsiveContainer(props.viewportManager);
-  const {
-    viewport
-  } = usePreviewData();
-  const editor = useSelectFromEditor(state => ({
-    isReadOnly: state.isReadOnly,
-    reservedHeight: state.uiReservedSpace.height
-  }));
-  const isReadOnly = editor.isReadOnly;
-
-  // When preview width changes, we need to force calculation of the iframe scrollHeight
-  // by reducing the height of its parent div to the current viewport height.
-  // Otherwise, the iframe grows to fill the parent div, and will not report the correct content height.
-  useEffect(() => {
-    if (previewBodyRef.current) {
-      const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;
-      previewBodyRef.current.style.minHeight = minHeight;
-    }
-  }, [previewWidth]);
-  const iframeUrl = useMemo(() => {
-    const localUrl = new URL(url);
-    localUrl.searchParams.set("wb.ts", timestamp.toString());
-    return localUrl.toString();
-  }, [url, timestamp]);
-  return /*#__PURE__*/React.createElement(PreviewContainer, {
-    key: iframeUrl
-  }, /*#__PURE__*/React.createElement(ConnectEditorToPreview, {
-    iframeRef: iframeRef,
-    onConnected: props.onConnected
-  }), props.showLoading ? /*#__PURE__*/React.createElement(OverlayLoader, {
-    size: "lg",
-    variant: "accent",
-    text: "Loading preview...",
-    className: "bg-neutral-base"
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    id: "preview-body",
-    ref: previewBodyRef,
-    className: "outline outline-neutral-dimmed shadow-sm transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ",
-    style: {
-      position: "relative",
-      width: `${previewWidth}px`,
-      minHeight: `${viewport.scrollHeight}px`
-    }
-  }, !isReadOnly ? /*#__PURE__*/React.createElement(ElementOverlays, null) : null, /*#__PURE__*/React.createElement("iframe", {
-    scrolling: "no",
-    id: "preview-iframe",
-    className: cn("absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]", isReadOnly ? "pointer-events-auto" : "pointer-events-none"),
-    src: iframeUrl,
-    ref: iframeRef,
-    sandbox: "allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
-  })));
+const Iframe = observer(({ url, timestamp, ...props })=>{
+    const iframeRef = useRef(null);
+    const previewBodyRef = useRef(null);
+    const previewWidth = useResponsiveContainer(props.viewportManager);
+    const { viewport } = usePreviewData();
+    const editor = useSelectFromEditor((state)=>({
+            isReadOnly: state.isReadOnly,
+            reservedHeight: state.uiReservedSpace.height
+        }));
+    const isReadOnly = editor.isReadOnly;
+    useEffect(()=>{
+        if (previewBodyRef.current) {
+            const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;
+            previewBodyRef.current.style.minHeight = minHeight;
+        }
+    }, [
+        previewWidth
+    ]);
+    const iframeUrl = useMemo(()=>{
+        const localUrl = new URL(url);
+        localUrl.searchParams.set("wb.ts", timestamp.toString());
+        return localUrl.toString();
+    }, [
+        url,
+        timestamp
+    ]);
+    return /*#__PURE__*/ react.createElement(PreviewContainer, {
+        key: iframeUrl
+    }, /*#__PURE__*/ react.createElement(ConnectEditorToPreview, {
+        iframeRef: iframeRef,
+        onConnected: props.onConnected
+    }), props.showLoading ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        size: "lg",
+        variant: "accent",
+        text: "Loading preview...",
+        className: "bg-neutral-base"
+    }) : null, /*#__PURE__*/ react.createElement("div", {
+        id: "preview-body",
+        ref: previewBodyRef,
+        className: "outline outline-neutral-dimmed shadow-sm transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ",
+        style: {
+            position: "relative",
+            width: `${previewWidth}px`,
+            minHeight: `${viewport.scrollHeight}px`
+        }
+    }, isReadOnly ? null : /*#__PURE__*/ react.createElement(ElementOverlays, null), /*#__PURE__*/ react.createElement("iframe", {
+        scrolling: "no",
+        id: "preview-iframe",
+        className: cn("absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]", isReadOnly ? "pointer-events-auto" : "pointer-events-none"),
+        src: iframeUrl,
+        ref: iframeRef,
+        sandbox: "allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
+    })));
 });
 Iframe.displayName = "Iframe";
+export { Iframe };
 
 //# sourceMappingURL=Iframe.js.map

package/BaseEditor/defaultConfig/Content/Preview/Iframe.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","useRef","cn","OverlayLoader","observer","ElementOverlays","ConnectEditorToPreview","useResponsiveContainer","usePreviewData","useSelectFromEditor","PreviewContainer","Iframe","url","timestamp","props","iframeRef","previewBodyRef","previewWidth","viewportManager","viewport","editor","state","isReadOnly","reservedHeight","uiReservedSpace","height","current","minHeight","style","iframeUrl","localUrl","URL","searchParams","set","toString","createElement","key","onConnected","showLoading","size","variant","text","className","id","ref","position","width","scrollHeight","scrolling","src","sandbox","displayName"],"sources":["Iframe.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { cn, OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { observer } from \"mobx-react-lite\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays.js\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview.js\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js\";\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { PreviewContainer } from \"./PreviewContainer.js\";\n\ninterface IframeProps {\n    url: string;\n    timestamp: number;\n    showLoading: boolean;\n    viewportManager: ViewportManager;\n    onConnected: (messenger: Messenger) => void;\n}\n\nexport const Iframe = observer(({ url, timestamp, ...props }: IframeProps) => {\n    const iframeRef = useRef<HTMLIFrameElement>(null);\n    const previewBodyRef = useRef<HTMLDivElement>(null);\n    const previewWidth = useResponsiveContainer(props.viewportManager);\n    const { viewport } = usePreviewData();\n    const editor = useSelectFromEditor(state => ({\n        isReadOnly: state.isReadOnly,\n        reservedHeight: state.uiReservedSpace.height\n    }));\n\n    const isReadOnly = editor.isReadOnly;\n\n    // When preview width changes, we need to force calculation of the iframe scrollHeight\n    // by reducing the height of its parent div to the current viewport height.\n    // Otherwise, the iframe grows to fill the parent div, and will not report the correct content height.\n    useEffect(() => {\n        if (previewBodyRef.current) {\n            const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;\n            previewBodyRef.current.style.minHeight = minHeight;\n        }\n    }, [previewWidth]);\n\n    const iframeUrl = useMemo(() => {\n        const localUrl = new URL(url);\n        localUrl.searchParams.set(\"wb.ts\", timestamp.toString());\n        return localUrl.toString();\n    }, [url, timestamp]);\n\n    return (\n        <PreviewContainer key={iframeUrl}>\n            <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n            {props.showLoading ? (\n                <OverlayLoader\n                    size=\"lg\"\n                    variant=\"accent\"\n                    text=\"Loading preview...\"\n                    className={\"bg-neutral-base\"}\n                />\n            ) : null}\n            {/* Content wrapper - sized by iframe content */}\n            <div\n                id={\"preview-body\"}\n                ref={previewBodyRef}\n                className={\n                    \"outline outline-neutral-dimmed shadow-sm transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] \"\n                }\n                style={{\n                    position: \"relative\",\n                    width: `${previewWidth}px`,\n                    minHeight: `${viewport.scrollHeight}px`\n                }}\n            >\n                {!isReadOnly ? <ElementOverlays /> : null}\n                <iframe\n                    scrolling=\"no\"\n                    id={\"preview-iframe\"}\n                    className={cn(\n                        \"absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]\",\n                        isReadOnly ? \"pointer-events-auto\" : \"pointer-events-none\"\n                    )}\n                    src={iframeUrl}\n                    ref={iframeRef}\n                    sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\"\n                />\n            </div>\n        </PreviewContainer>\n    );\n});\n\nIframe.displayName = \"Iframe\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Iframe.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/Iframe.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { cn, OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { observer } from \"mobx-react-lite\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays.js\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview.js\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js\";\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { PreviewContainer } from \"./PreviewContainer.js\";\n\ninterface IframeProps {\n    url: string;\n    timestamp: number;\n    showLoading: boolean;\n    viewportManager: ViewportManager;\n    onConnected: (messenger: Messenger) => void;\n}\n\nexport const Iframe = observer(({ url, timestamp, ...props }: IframeProps) => {\n    const iframeRef = useRef<HTMLIFrameElement>(null);\n    const previewBodyRef = useRef<HTMLDivElement>(null);\n    const previewWidth = useResponsiveContainer(props.viewportManager);\n    const { viewport } = usePreviewData();\n    const editor = useSelectFromEditor(state => ({\n        isReadOnly: state.isReadOnly,\n        reservedHeight: state.uiReservedSpace.height\n    }));\n\n    const isReadOnly = editor.isReadOnly;\n\n    // When preview width changes, we need to force calculation of the iframe scrollHeight\n    // by reducing the height of its parent div to the current viewport height.\n    // Otherwise, the iframe grows to fill the parent div, and will not report the correct content height.\n    useEffect(() => {\n        if (previewBodyRef.current) {\n            const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;\n            previewBodyRef.current.style.minHeight = minHeight;\n        }\n    }, [previewWidth]);\n\n    const iframeUrl = useMemo(() => {\n        const localUrl = new URL(url);\n        localUrl.searchParams.set(\"wb.ts\", timestamp.toString());\n        return localUrl.toString();\n    }, [url, timestamp]);\n\n    return (\n        <PreviewContainer key={iframeUrl}>\n            <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n            {props.showLoading ? (\n                <OverlayLoader\n                    size=\"lg\"\n                    variant=\"accent\"\n                    text=\"Loading preview...\"\n                    className={\"bg-neutral-base\"}\n                />\n            ) : null}\n            {/* Content wrapper - sized by iframe content */}\n            <div\n                id={\"preview-body\"}\n                ref={previewBodyRef}\n                className={\n                    \"outline outline-neutral-dimmed shadow-sm transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] \"\n                }\n                style={{\n                    position: \"relative\",\n                    width: `${previewWidth}px`,\n                    minHeight: `${viewport.scrollHeight}px`\n                }}\n            >\n                {!isReadOnly ? <ElementOverlays /> : null}\n                <iframe\n                    scrolling=\"no\"\n                    id={\"preview-iframe\"}\n                    className={cn(\n                        \"absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]\",\n                        isReadOnly ? \"pointer-events-auto\" : \"pointer-events-none\"\n                    )}\n                    src={iframeUrl}\n                    ref={iframeRef}\n                    sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\"\n                />\n            </div>\n        </PreviewContainer>\n    );\n});\n\nIframe.displayName = \"Iframe\";\n"],"names":["Iframe","observer","url","timestamp","props","iframeRef","useRef","previewBodyRef","previewWidth","useResponsiveContainer","viewport","usePreviewData","editor","useSelectFromEditor","state","isReadOnly","useEffect","minHeight","iframeUrl","useMemo","localUrl","URL","PreviewContainer","ConnectEditorToPreview","OverlayLoader","ElementOverlays","cn"],"mappings":";;;;;;;;;AAoBO,MAAMA,SAASC,SAAS,CAAC,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGC,OAAoB;IACrE,MAAMC,YAAYC,OAA0B;IAC5C,MAAMC,iBAAiBD,OAAuB;IAC9C,MAAME,eAAeC,uBAAuBL,MAAM,eAAe;IACjE,MAAM,EAAEM,QAAQ,EAAE,GAAGC;IACrB,MAAMC,SAASC,oBAAoBC,CAAAA,QAAU;YACzC,YAAYA,MAAM,UAAU;YAC5B,gBAAgBA,MAAM,eAAe,CAAC,MAAM;QAChD;IAEA,MAAMC,aAAaH,OAAO,UAAU;IAKpCI,UAAU;QACN,IAAIT,eAAe,OAAO,EAAE;YACxB,MAAMU,YAAY,CAAC,aAAa,EAAEL,OAAO,cAAc,CAAC,GAAG,CAAC;YAC5DL,eAAe,OAAO,CAAC,KAAK,CAAC,SAAS,GAAGU;QAC7C;IACJ,GAAG;QAACT;KAAa;IAEjB,MAAMU,YAAYC,QAAQ;QACtB,MAAMC,WAAW,IAAIC,IAAInB;QACzBkB,SAAS,YAAY,CAAC,GAAG,CAAC,SAASjB,UAAU,QAAQ;QACrD,OAAOiB,SAAS,QAAQ;IAC5B,GAAG;QAAClB;QAAKC;KAAU;IAEnB,OAAO,WAAP,GACI,oBAACmB,kBAAgBA;QAAC,KAAKJ;qBACnB,oBAACK,wBAAsBA;QAAC,WAAWlB;QAAW,aAAaD,MAAM,WAAW;QAC3EA,MAAM,WAAW,GAAG,WAAH,GACd,oBAACoB,eAAaA;QACV,MAAK;QACL,SAAQ;QACR,MAAK;QACL,WAAW;SAEf,oBAEJ,oBAAC;QACG,IAAI;QACJ,KAAKjB;QACL,WACI;QAEJ,OAAO;YACH,UAAU;YACV,OAAO,GAAGC,aAAa,EAAE,CAAC;YAC1B,WAAW,GAAGE,SAAS,YAAY,CAAC,EAAE,CAAC;QAC3C;OAEC,AAACK,aAAmC,OAAtB,WAAbA,GAAa,oBAACU,iBAAeA,OAAM,cACrC,oBAAC;QACG,WAAU;QACV,IAAI;QACJ,WAAWC,GACP,oFACAX,aAAa,wBAAwB;QAEzC,KAAKG;QACL,KAAKb;QACL,SAAQ;;AAK5B;AAEAL,OAAO,WAAW,GAAG"}

package/BaseEditor/defaultConfig/Content/Preview/KeyboardShortcuts.js

@@ -3,53 +3,49 @@ import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { useKeyHandler } from "../../../hooks/useKeyHandler.js";
 import { $getActiveElementId } from "../../../../editorSdk/utils/index.js";
 import { Commands } from "../../../index.js";
-export const KeyboardShortcuts = () => {
-  const editor = useDocumentEditor();
-  const {
-    addKeyHandler,
-    removeKeyHandler
-  } = useKeyHandler();
-  const deleteActiveElement = useCallback(() => {
-    const activeElementId = $getActiveElementId(editor);
-    if (activeElementId) {
-      editor.executeCommand(Commands.DeleteElement, {
-        id: activeElementId
-      });
-    }
-  }, []);
-  const deactivateElement = useCallback(() => {
-    editor.executeCommand(Commands.DeselectElement);
-  }, []);
-  useEffect(() => {
-    addKeyHandler("Escape", e => {
-      e.preventDefault();
-      deactivateElement();
-    });
-    addKeyHandler("Backspace", e => {
-      e.preventDefault();
-      deleteActiveElement();
-    });
-    addKeyHandler("Delete", e => {
-      e.preventDefault();
-      deleteActiveElement();
-    });
-    addKeyHandler("mod+z", e => {
-      e.preventDefault();
-      editor.undo();
-    });
-    addKeyHandler("mod+shift+z", e => {
-      e.preventDefault();
-      editor.redo();
-    });
-    return () => {
-      removeKeyHandler("Escape");
-      removeKeyHandler("Backspace");
-      removeKeyHandler("Delete");
-      removeKeyHandler("mod+z");
-      removeKeyHandler("mod+shift+z");
-    };
-  }, []);
-  return null;
+const KeyboardShortcuts = ()=>{
+    const editor = useDocumentEditor();
+    const { addKeyHandler, removeKeyHandler } = useKeyHandler();
+    const deleteActiveElement = useCallback(()=>{
+        const activeElementId = $getActiveElementId(editor);
+        if (activeElementId) editor.executeCommand(Commands.DeleteElement, {
+            id: activeElementId
+        });
+    }, []);
+    const deactivateElement = useCallback(()=>{
+        editor.executeCommand(Commands.DeselectElement);
+    }, []);
+    useEffect(()=>{
+        addKeyHandler("Escape", (e)=>{
+            e.preventDefault();
+            deactivateElement();
+        });
+        addKeyHandler("Backspace", (e)=>{
+            e.preventDefault();
+            deleteActiveElement();
+        });
+        addKeyHandler("Delete", (e)=>{
+            e.preventDefault();
+            deleteActiveElement();
+        });
+        addKeyHandler("mod+z", (e)=>{
+            e.preventDefault();
+            editor.undo();
+        });
+        addKeyHandler("mod+shift+z", (e)=>{
+            e.preventDefault();
+            editor.redo();
+        });
+        return ()=>{
+            removeKeyHandler("Escape");
+            removeKeyHandler("Backspace");
+            removeKeyHandler("Delete");
+            removeKeyHandler("mod+z");
+            removeKeyHandler("mod+shift+z");
+        };
+    }, []);
+    return null;
 };
+export { KeyboardShortcuts };
 
 //# sourceMappingURL=KeyboardShortcuts.js.map

package/BaseEditor/defaultConfig/Content/Preview/KeyboardShortcuts.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useDocumentEditor","useKeyHandler","$getActiveElementId","Commands","KeyboardShortcuts","editor","addKeyHandler","removeKeyHandler","deleteActiveElement","activeElementId","executeCommand","DeleteElement","id","deactivateElement","DeselectElement","e","preventDefault","undo","redo"],"sources":["KeyboardShortcuts.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useKeyHandler } from \"~/BaseEditor/hooks/useKeyHandler.js\";\nimport { $getActiveElementId } from \"~/editorSdk/utils/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const KeyboardShortcuts = () => {\n    const editor = useDocumentEditor();\n    const { addKeyHandler, removeKeyHandler } = useKeyHandler();\n\n    const deleteActiveElement = useCallback(() => {\n        const activeElementId = $getActiveElementId(editor);\n        if (activeElementId) {\n            editor.executeCommand(Commands.DeleteElement, { id: activeElementId });\n        }\n    }, []);\n\n    const deactivateElement = useCallback(() => {\n        editor.executeCommand(Commands.DeselectElement);\n    }, []);\n\n    useEffect(() => {\n        addKeyHandler(\"Escape\", e => {\n            e.preventDefault();\n            deactivateElement();\n        });\n\n        addKeyHandler(\"Backspace\", e => {\n            e.preventDefault();\n            deleteActiveElement();\n        });\n\n        addKeyHandler(\"Delete\", e => {\n            e.preventDefault();\n            deleteActiveElement();\n        });\n\n        addKeyHandler(\"mod+z\", e => {\n            e.preventDefault();\n            editor.undo();\n        });\n\n        addKeyHandler(\"mod+shift+z\", e => {\n            e.preventDefault();\n            editor.redo();\n        });\n\n        return () => {\n            removeKeyHandler(\"Escape\");\n            removeKeyHandler(\"Backspace\");\n            removeKeyHandler(\"Delete\");\n            removeKeyHandler(\"mod+z\");\n            removeKeyHandler(\"mod+shift+z\");\n        };\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAC9C,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,mBAAmB;AAC5B,SAASC,QAAQ;AAEjB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,MAAM,GAAGL,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEM,aAAa;IAAEC;EAAiB,CAAC,GAAGN,aAAa,CAAC,CAAC;EAE3D,MAAMO,mBAAmB,GAAGV,WAAW,CAAC,MAAM;IAC1C,MAAMW,eAAe,GAAGP,mBAAmB,CAACG,MAAM,CAAC;IACnD,IAAII,eAAe,EAAE;MACjBJ,MAAM,CAACK,cAAc,CAACP,QAAQ,CAACQ,aAAa,EAAE;QAAEC,EAAE,EAAEH;MAAgB,CAAC,CAAC;IAC1E;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMI,iBAAiB,GAAGf,WAAW,CAAC,MAAM;IACxCO,MAAM,CAACK,cAAc,CAACP,QAAQ,CAACW,eAAe,CAAC;EACnD,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM;IACZO,aAAa,CAAC,QAAQ,EAAES,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBH,iBAAiB,CAAC,CAAC;IACvB,CAAC,CAAC;IAEFP,aAAa,CAAC,WAAW,EAAES,CAAC,IAAI;MAC5BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBR,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,QAAQ,EAAES,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBR,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,OAAO,EAAES,CAAC,IAAI;MACxBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBX,MAAM,CAACY,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEFX,aAAa,CAAC,aAAa,EAAES,CAAC,IAAI;MAC9BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBX,MAAM,CAACa,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAM;MACTX,gBAAgB,CAAC,QAAQ,CAAC;MAC1BA,gBAAgB,CAAC,WAAW,CAAC;MAC7BA,gBAAgB,CAAC,QAAQ,CAAC;MAC1BA,gBAAgB,CAAC,OAAO,CAAC;MACzBA,gBAAgB,CAAC,aAAa,CAAC;IACnC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/KeyboardShortcuts.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/KeyboardShortcuts.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useKeyHandler } from \"~/BaseEditor/hooks/useKeyHandler.js\";\nimport { $getActiveElementId } from \"~/editorSdk/utils/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const KeyboardShortcuts = () => {\n    const editor = useDocumentEditor();\n    const { addKeyHandler, removeKeyHandler } = useKeyHandler();\n\n    const deleteActiveElement = useCallback(() => {\n        const activeElementId = $getActiveElementId(editor);\n        if (activeElementId) {\n            editor.executeCommand(Commands.DeleteElement, { id: activeElementId });\n        }\n    }, []);\n\n    const deactivateElement = useCallback(() => {\n        editor.executeCommand(Commands.DeselectElement);\n    }, []);\n\n    useEffect(() => {\n        addKeyHandler(\"Escape\", e => {\n            e.preventDefault();\n            deactivateElement();\n        });\n\n        addKeyHandler(\"Backspace\", e => {\n            e.preventDefault();\n            deleteActiveElement();\n        });\n\n        addKeyHandler(\"Delete\", e => {\n            e.preventDefault();\n            deleteActiveElement();\n        });\n\n        addKeyHandler(\"mod+z\", e => {\n            e.preventDefault();\n            editor.undo();\n        });\n\n        addKeyHandler(\"mod+shift+z\", e => {\n            e.preventDefault();\n            editor.redo();\n        });\n\n        return () => {\n            removeKeyHandler(\"Escape\");\n            removeKeyHandler(\"Backspace\");\n            removeKeyHandler(\"Delete\");\n            removeKeyHandler(\"mod+z\");\n            removeKeyHandler(\"mod+shift+z\");\n        };\n    }, []);\n\n    return null;\n};\n"],"names":["KeyboardShortcuts","editor","useDocumentEditor","addKeyHandler","removeKeyHandler","useKeyHandler","deleteActiveElement","useCallback","activeElementId","$getActiveElementId","Commands","deactivateElement","useEffect","e"],"mappings":";;;;;AAMO,MAAMA,oBAAoB;IAC7B,MAAMC,SAASC;IACf,MAAM,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGC;IAE5C,MAAMC,sBAAsBC,YAAY;QACpC,MAAMC,kBAAkBC,oBAAoBR;QAC5C,IAAIO,iBACAP,OAAO,cAAc,CAACS,SAAS,aAAa,EAAE;YAAE,IAAIF;QAAgB;IAE5E,GAAG,EAAE;IAEL,MAAMG,oBAAoBJ,YAAY;QAClCN,OAAO,cAAc,CAACS,SAAS,eAAe;IAClD,GAAG,EAAE;IAELE,UAAU;QACNT,cAAc,UAAUU,CAAAA;YACpBA,EAAE,cAAc;YAChBF;QACJ;QAEAR,cAAc,aAAaU,CAAAA;YACvBA,EAAE,cAAc;YAChBP;QACJ;QAEAH,cAAc,UAAUU,CAAAA;YACpBA,EAAE,cAAc;YAChBP;QACJ;QAEAH,cAAc,SAASU,CAAAA;YACnBA,EAAE,cAAc;YAChBZ,OAAO,IAAI;QACf;QAEAE,cAAc,eAAeU,CAAAA;YACzBA,EAAE,cAAc;YAChBZ,OAAO,IAAI;QACf;QAEA,OAAO;YACHG,iBAAiB;YACjBA,iBAAiB;YACjBA,iBAAiB;YACjBA,iBAAiB;YACjBA,iBAAiB;QACrB;IACJ,GAAG,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/defaultConfig/Content/Preview/MouseStatus.js

@@ -1,16 +1,15 @@
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { mouseTracker } from "@webiny/website-builder-sdk";
-export const MouseStatus = () => {
-  const [position, setPosition] = useState({
-    x: 0,
-    y: 0
-  });
-  useEffect(() => {
-    return mouseTracker.subscribe(setPosition);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "absolute bottom-0 left-0 p-md"
-  }, position.x, ":", position.y);
+const MouseStatus = ()=>{
+    const [position, setPosition] = useState({
+        x: 0,
+        y: 0
+    });
+    useEffect(()=>mouseTracker.subscribe(setPosition), []);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "absolute bottom-0 left-0 p-md"
+    }, position.x, ":", position.y);
 };
+export { MouseStatus };
 
 //# sourceMappingURL=MouseStatus.js.map

package/BaseEditor/defaultConfig/Content/Preview/MouseStatus.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","mouseTracker","MouseStatus","position","setPosition","x","y","subscribe","createElement","className"],"sources":["MouseStatus.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\n\nexport const MouseStatus = () => {\n    const [position, setPosition] = useState({ x: 0, y: 0 });\n\n    useEffect(() => {\n        return mouseTracker.subscribe(setPosition);\n    }, []);\n\n    return (\n        <div className={\"absolute bottom-0 left-0 p-md\"}>\n            {position.x}:{position.y}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,QAAQ,6BAA6B;AAE1D,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGJ,QAAQ,CAAC;IAAEK,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EAExDP,SAAS,CAAC,MAAM;IACZ,OAAOE,YAAY,CAACM,SAAS,CAACH,WAAW,CAAC;EAC9C,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIN,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAAgC,GAC3CN,QAAQ,CAACE,CAAC,EAAC,GAAC,EAACF,QAAQ,CAACG,CACtB,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/MouseStatus.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/MouseStatus.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\n\nexport const MouseStatus = () => {\n    const [position, setPosition] = useState({ x: 0, y: 0 });\n\n    useEffect(() => {\n        return mouseTracker.subscribe(setPosition);\n    }, []);\n\n    return (\n        <div className={\"absolute bottom-0 left-0 p-md\"}>\n            {position.x}:{position.y}\n        </div>\n    );\n};\n"],"names":["MouseStatus","position","setPosition","useState","useEffect","mouseTracker"],"mappings":";;AAGO,MAAMA,cAAc;IACvB,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAAS;QAAE,GAAG;QAAG,GAAG;IAAE;IAEtDC,UAAU,IACCC,aAAa,SAAS,CAACH,cAC/B,EAAE;IAEL,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,SAAS,CAAC,EAAC,KAAEA,SAAS,CAAC;AAGpC"}

package/BaseEditor/defaultConfig/Content/Preview/Overlays/DropBox.js

@@ -1,62 +1,54 @@
-import React from "react";
+import react from "react";
 import { useDrop } from "react-dnd";
-import deepEqual from "deep-equal";
-import { cn, Icon } from "@webiny/admin-ui";
-import { ReactComponent as InsertIcon } from "@webiny/icons/add_circle.svg";
-import { ReactComponent as BlockIcon } from "@webiny/icons/block.svg";
+import deep_equal from "deep-equal";
+import { Icon, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add_circle.svg";
+import { ReactComponent as block_svg_ReactComponent } from "@webiny/icons/block.svg";
 import { useIsDragging } from "../useIsDragging.js";
-export const DropBox = /*#__PURE__*/React.memo(({
-  box,
-  onDrop
-}) => {
-  const isDragging = useIsDragging();
-  const [{
-    isOver,
-    item
-  }, dropRef] = useDrop(() => ({
-    accept: "ELEMENT",
-    drop: item => {
-      // Prevent dropping the element into itself!
-      if (item?.id === box.parentId) {
-        return;
-      }
-      onDrop({
-        item,
-        target: {
-          parentId: box.parentId,
-          index: 0,
-          slot: box.parentSlot
+const DropBox = /*#__PURE__*/ react.memo(({ box, onDrop })=>{
+    const isDragging = useIsDragging();
+    const [{ isOver, item }, dropRef] = useDrop(()=>({
+            accept: "ELEMENT",
+            drop: (item)=>{
+                if (item?.id === box.parentId) return;
+                onDrop({
+                    item,
+                    target: {
+                        parentId: box.parentId,
+                        index: 0,
+                        slot: box.parentSlot
+                    }
+                });
+            },
+            collect: (monitor)=>({
+                    item: monitor.getItem(),
+                    isOver: monitor.isOver()
+                })
+        }));
+    const canAccept = isDragging && item?.id !== box.parentId;
+    const disabled = "border-neutral-muted fill-neutral-disabled";
+    const enabled = "border-success-default fill-success";
+    const mouseOver = "border-accent-default fill-accent-default";
+    const classes = cn("flex absolute items-center justify-center border-sm border-dashed", canAccept && isOver && mouseOver, canAccept && !isOver && enabled, !canAccept && disabled);
+    return dropRef(/*#__PURE__*/ react.createElement("div", {
+        "data-role": "element-slot",
+        "data-slot-id": box.id,
+        "data-depth": box.depth,
+        className: classes,
+        style: {
+            zIndex: 100 + box.depth,
+            top: box.top,
+            left: box.left,
+            width: box.width,
+            height: box.height,
+            pointerEvents: canAccept ? "auto" : "none"
         }
-      });
-    },
-    collect: monitor => ({
-      item: monitor.getItem(),
-      isOver: monitor.isOver()
-    })
-  }));
-  const canAccept = isDragging && item?.id !== box.parentId;
-  const disabled = "border-neutral-muted fill-neutral-disabled";
-  const enabled = "border-success-default fill-success";
-  const mouseOver = "border-accent-default fill-accent-default";
-  const classes = cn("flex absolute items-center justify-center border-sm border-dashed", canAccept && isOver && mouseOver, canAccept && !isOver && enabled, !canAccept && disabled);
-  return dropRef(/*#__PURE__*/React.createElement("div", {
-    "data-role": "element-slot",
-    "data-slot-id": box.id,
-    "data-depth": box.depth,
-    className: classes,
-    style: {
-      zIndex: 100 + box.depth,
-      top: box.top,
-      left: box.left,
-      width: box.width,
-      height: box.height,
-      pointerEvents: canAccept ? "auto" : "none"
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: isDragging && !canAccept ? /*#__PURE__*/React.createElement(BlockIcon, null) : /*#__PURE__*/React.createElement(InsertIcon, null),
-    label: "Add Element"
-  })));
-}, (prev, next) => deepEqual(prev, next));
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: isDragging && !canAccept ? /*#__PURE__*/ react.createElement(block_svg_ReactComponent, null) : /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Add Element"
+    })));
+}, (prev, next)=>deep_equal(prev, next));
 DropBox.displayName = "DropBox";
+export { DropBox };
 
 //# sourceMappingURL=DropBox.js.map

package/BaseEditor/defaultConfig/Content/Preview/Overlays/DropBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDrop","deepEqual","cn","Icon","ReactComponent","InsertIcon","BlockIcon","useIsDragging","DropBox","memo","box","onDrop","isDragging","isOver","item","dropRef","accept","drop","id","parentId","target","index","slot","parentSlot","collect","monitor","getItem","canAccept","disabled","enabled","mouseOver","classes","createElement","depth","className","style","zIndex","top","left","width","height","pointerEvents","icon","label","prev","next","displayName"],"sources":["DropBox.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDrop } from \"react-dnd\";\nimport deepEqual from \"deep-equal\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as BlockIcon } from \"@webiny/icons/block.svg\";\nimport type { Box } from \"~/BaseEditor/defaultConfig/Content/Preview/Box.js\";\nimport type { DropEvent } from \"~/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js\";\n\ninterface DropBoxProps {\n    box: Box;\n    onDrop: (event: DropEvent) => void;\n}\n\nexport const DropBox = React.memo(\n    ({ box, onDrop }: DropBoxProps) => {\n        const isDragging = useIsDragging();\n\n        const [{ isOver, item }, dropRef] = useDrop<\n            any,\n            unknown,\n            { item: { name: string; id?: string }; isOver: boolean }\n        >(() => ({\n            accept: \"ELEMENT\",\n            drop: item => {\n                // Prevent dropping the element into itself!\n                if (item?.id === box.parentId) {\n                    return;\n                }\n\n                onDrop({\n                    item,\n                    target: { parentId: box.parentId, index: 0, slot: box.parentSlot }\n                });\n            },\n            collect: monitor => ({\n                item: monitor.getItem(),\n                isOver: monitor.isOver()\n            })\n        }));\n\n        const canAccept = isDragging && item?.id !== box.parentId;\n        const disabled = \"border-neutral-muted fill-neutral-disabled\";\n        const enabled = \"border-success-default fill-success\";\n        const mouseOver = \"border-accent-default fill-accent-default\";\n\n        const classes = cn(\n            \"flex absolute items-center justify-center border-sm border-dashed\",\n            canAccept && isOver && mouseOver,\n            canAccept && !isOver && enabled,\n            !canAccept && disabled\n        );\n\n        return dropRef(\n            <div\n                data-role={\"element-slot\"}\n                data-slot-id={box.id}\n                data-depth={box.depth}\n                className={classes}\n                style={{\n                    zIndex: 100 + box.depth,\n                    top: box.top,\n                    left: box.left,\n                    width: box.width,\n                    height: box.height,\n                    pointerEvents: canAccept ? \"auto\" : \"none\"\n                }}\n            >\n                <Icon\n                    icon={isDragging && !canAccept ? <BlockIcon /> : <InsertIcon />}\n                    label={\"Add Element\"}\n                />\n            </div>\n        );\n    },\n    (prev, next) => deepEqual(prev, next)\n);\n\nDropBox.displayName = \"DropBox\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,WAAW;AACnC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,EAAE,EAAEC,IAAI,QAAQ,kBAAkB;AAC3C,SAASC,cAAc,IAAIC,UAAU,QAAQ,8BAA8B;AAC3E,SAASD,cAAc,IAAIE,SAAS,QAAQ,yBAAyB;AAGrE,SAASC,aAAa;AAOtB,OAAO,MAAMC,OAAO,gBAAGT,KAAK,CAACU,IAAI,CAC7B,CAAC;EAAEC,GAAG;EAAEC;AAAqB,CAAC,KAAK;EAC/B,MAAMC,UAAU,GAAGL,aAAa,CAAC,CAAC;EAElC,MAAM,CAAC;IAAEM,MAAM;IAAEC;EAAK,CAAC,EAAEC,OAAO,CAAC,GAAGf,OAAO,CAIzC,OAAO;IACLgB,MAAM,EAAE,SAAS;IACjBC,IAAI,EAAEH,IAAI,IAAI;MACV;MACA,IAAIA,IAAI,EAAEI,EAAE,KAAKR,GAAG,CAACS,QAAQ,EAAE;QAC3B;MACJ;MAEAR,MAAM,CAAC;QACHG,IAAI;QACJM,MAAM,EAAE;UAAED,QAAQ,EAAET,GAAG,CAACS,QAAQ;UAAEE,KAAK,EAAE,CAAC;UAAEC,IAAI,EAAEZ,GAAG,CAACa;QAAW;MACrE,CAAC,CAAC;IACN,CAAC;IACDC,OAAO,EAAEC,OAAO,KAAK;MACjBX,IAAI,EAAEW,OAAO,CAACC,OAAO,CAAC,CAAC;MACvBb,MAAM,EAAEY,OAAO,CAACZ,MAAM,CAAC;IAC3B,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,MAAMc,SAAS,GAAGf,UAAU,IAAIE,IAAI,EAAEI,EAAE,KAAKR,GAAG,CAACS,QAAQ;EACzD,MAAMS,QAAQ,GAAG,4CAA4C;EAC7D,MAAMC,OAAO,GAAG,qCAAqC;EACrD,MAAMC,SAAS,GAAG,2CAA2C;EAE7D,MAAMC,OAAO,GAAG7B,EAAE,CACd,mEAAmE,EACnEyB,SAAS,IAAId,MAAM,IAAIiB,SAAS,EAChCH,SAAS,IAAI,CAACd,MAAM,IAAIgB,OAAO,EAC/B,CAACF,SAAS,IAAIC,QAClB,CAAC;EAED,OAAOb,OAAO,cACVhB,KAAA,CAAAiC,aAAA;IACI,aAAW,cAAe;IAC1B,gBAActB,GAAG,CAACQ,EAAG;IACrB,cAAYR,GAAG,CAACuB,KAAM;IACtBC,SAAS,EAAEH,OAAQ;IACnBI,KAAK,EAAE;MACHC,MAAM,EAAE,GAAG,GAAG1B,GAAG,CAACuB,KAAK;MACvBI,GAAG,EAAE3B,GAAG,CAAC2B,GAAG;MACZC,IAAI,EAAE5B,GAAG,CAAC4B,IAAI;MACdC,KAAK,EAAE7B,GAAG,CAAC6B,KAAK;MAChBC,MAAM,EAAE9B,GAAG,CAAC8B,MAAM;MAClBC,aAAa,EAAEd,SAAS,GAAG,MAAM,GAAG;IACxC;EAAE,gBAEF5B,KAAA,CAAAiC,aAAA,CAAC7B,IAAI;IACDuC,IAAI,EAAE9B,UAAU,IAAI,CAACe,SAAS,gBAAG5B,KAAA,CAAAiC,aAAA,CAAC1B,SAAS,MAAE,CAAC,gBAAGP,KAAA,CAAAiC,aAAA,CAAC3B,UAAU,MAAE,CAAE;IAChEsC,KAAK,EAAE;EAAc,CACxB,CACA,CACT,CAAC;AACL,CAAC,EACD,CAACC,IAAI,EAAEC,IAAI,KAAK5C,SAAS,CAAC2C,IAAI,EAAEC,IAAI,CACxC,CAAC;AAEDrC,OAAO,CAACsC,WAAW,GAAG,SAAS","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Overlays/DropBox.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Content/Preview/Overlays/DropBox.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDrop } from \"react-dnd\";\nimport deepEqual from \"deep-equal\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as BlockIcon } from \"@webiny/icons/block.svg\";\nimport type { Box } from \"~/BaseEditor/defaultConfig/Content/Preview/Box.js\";\nimport type { DropEvent } from \"~/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js\";\n\ninterface DropBoxProps {\n    box: Box;\n    onDrop: (event: DropEvent) => void;\n}\n\nexport const DropBox = React.memo(\n    ({ box, onDrop }: DropBoxProps) => {\n        const isDragging = useIsDragging();\n\n        const [{ isOver, item }, dropRef] = useDrop<\n            any,\n            unknown,\n            { item: { name: string; id?: string }; isOver: boolean }\n        >(() => ({\n            accept: \"ELEMENT\",\n            drop: item => {\n                // Prevent dropping the element into itself!\n                if (item?.id === box.parentId) {\n                    return;\n                }\n\n                onDrop({\n                    item,\n                    target: { parentId: box.parentId, index: 0, slot: box.parentSlot }\n                });\n            },\n            collect: monitor => ({\n                item: monitor.getItem(),\n                isOver: monitor.isOver()\n            })\n        }));\n\n        const canAccept = isDragging && item?.id !== box.parentId;\n        const disabled = \"border-neutral-muted fill-neutral-disabled\";\n        const enabled = \"border-success-default fill-success\";\n        const mouseOver = \"border-accent-default fill-accent-default\";\n\n        const classes = cn(\n            \"flex absolute items-center justify-center border-sm border-dashed\",\n            canAccept && isOver && mouseOver,\n            canAccept && !isOver && enabled,\n            !canAccept && disabled\n        );\n\n        return dropRef(\n            <div\n                data-role={\"element-slot\"}\n                data-slot-id={box.id}\n                data-depth={box.depth}\n                className={classes}\n                style={{\n                    zIndex: 100 + box.depth,\n                    top: box.top,\n                    left: box.left,\n                    width: box.width,\n                    height: box.height,\n                    pointerEvents: canAccept ? \"auto\" : \"none\"\n                }}\n            >\n                <Icon\n                    icon={isDragging && !canAccept ? <BlockIcon /> : <InsertIcon />}\n                    label={\"Add Element\"}\n                />\n            </div>\n        );\n    },\n    (prev, next) => deepEqual(prev, next)\n);\n\nDropBox.displayName = \"DropBox\";\n"],"names":["DropBox","React","box","onDrop","isDragging","useIsDragging","isOver","item","dropRef","useDrop","monitor","canAccept","disabled","enabled","mouseOver","classes","cn","Icon","BlockIcon","InsertIcon","prev","next","deepEqual"],"mappings":";;;;;;;AAeO,MAAMA,UAAU,WAAHA,GAAGC,MAAAA,IAAU,CAC7B,CAAC,EAAEC,GAAG,EAAEC,MAAM,EAAgB;IAC1B,MAAMC,aAAaC;IAEnB,MAAM,CAAC,EAAEC,MAAM,EAAEC,IAAI,EAAE,EAAEC,QAAQ,GAAGC,QAIlC,IAAO;YACL,QAAQ;YACR,MAAMF,CAAAA;gBAEF,IAAIA,MAAM,OAAOL,IAAI,QAAQ,EACzB;gBAGJC,OAAO;oBACHI;oBACA,QAAQ;wBAAE,UAAUL,IAAI,QAAQ;wBAAE,OAAO;wBAAG,MAAMA,IAAI,UAAU;oBAAC;gBACrE;YACJ;YACA,SAASQ,CAAAA,UAAY;oBACjB,MAAMA,QAAQ,OAAO;oBACrB,QAAQA,QAAQ,MAAM;gBAC1B;QACJ;IAEA,MAAMC,YAAYP,cAAcG,MAAM,OAAOL,IAAI,QAAQ;IACzD,MAAMU,WAAW;IACjB,MAAMC,UAAU;IAChB,MAAMC,YAAY;IAElB,MAAMC,UAAUC,GACZ,qEACAL,aAAaL,UAAUQ,WACvBH,aAAa,CAACL,UAAUO,SACxB,CAACF,aAAaC;IAGlB,OAAOJ,QAAQ,WAARA,GACH,oBAAC;QACG,aAAW;QACX,gBAAcN,IAAI,EAAE;QACpB,cAAYA,IAAI,KAAK;QACrB,WAAWa;QACX,OAAO;YACH,QAAQ,MAAMb,IAAI,KAAK;YACvB,KAAKA,IAAI,GAAG;YACZ,MAAMA,IAAI,IAAI;YACd,OAAOA,IAAI,KAAK;YAChB,QAAQA,IAAI,MAAM;YAClB,eAAeS,YAAY,SAAS;QACxC;qBAEA,oBAACM,MAAIA;QACD,MAAMb,cAAc,CAACO,YAAY,WAAZA,GAAY,oBAACO,0BAASA,QAAAA,WAAAA,GAAM,oBAACC,gBAAUA;QAC5D,OAAO;;AAIvB,GACA,CAACC,MAAMC,OAASC,WAAUF,MAAMC;AAGpCrB,QAAQ,WAAW,GAAG"}

package/BaseEditor/defaultConfig/Content/Preview/Overlays/DropLine.js

@@ -1,32 +1,26 @@
-import React from "react";
-export function DropLine({
-  label,
-  top,
-  width,
-  left,
-  visible,
-  dimmed
-}) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "absolute bg-primary left-0 right-0 w-full",
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      top,
-      left,
-      width,
-      height: 4,
-      zIndex: 1000,
-      visibility: visible ? "visible" : "hidden",
-      opacity: dimmed ? 0.5 : 1
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "absolute bg-primary text-neutral-light",
-    style: {
-      top: -10,
-      padding: "2px 8px"
-    }
-  }, label));
+import react from "react";
+function DropLine({ label, top, width, left, visible, dimmed }) {
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "absolute bg-primary left-0 right-0 w-full",
+        style: {
+            display: "flex",
+            justifyContent: "center",
+            top,
+            left,
+            width,
+            height: 4,
+            zIndex: 1000,
+            visibility: visible ? "visible" : "hidden",
+            opacity: dimmed ? 0.5 : 1
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "absolute bg-primary text-neutral-light",
+        style: {
+            top: -10,
+            padding: "2px 8px"
+        }
+    }, label));
 }
+export { DropLine };
 
 //# sourceMappingURL=DropLine.js.map

package/BaseEditor/defaultConfig/Content/Preview/Overlays/DropLine.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","DropLine","label","top","width","left","visible","dimmed","createElement","className","style","display","justifyContent","height","zIndex","visibility","opacity","padding"],"sources":["DropLine.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface DropLineProps {\n    label: string;\n    top: number;\n    left: number;\n    width: number;\n    visible: boolean;\n    dimmed: boolean;\n}\n\nexport function DropLine({ label, top, width, left, visible, dimmed }: DropLineProps) {\n    return (\n        <div\n            className={\"absolute bg-primary left-0 right-0 w-full\"}\n            style={{\n                display: \"flex\",\n                justifyContent: \"center\",\n                top,\n                left,\n                width,\n                height: 4,\n                zIndex: 1000,\n                visibility: visible ? \"visible\" : \"hidden\",\n                opacity: dimmed ? 0.5 : 1\n            }}\n        >\n            <span\n                className={\"absolute bg-primary text-neutral-light\"}\n                style={{ top: -10, padding: \"2px 8px\" }}\n            >\n                {label}\n            </span>\n        </div>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAWzB,OAAO,SAASC,QAAQA,CAAC;EAAEC,KAAK;EAAEC,GAAG;EAAEC,KAAK;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAsB,CAAC,EAAE;EAClF,oBACIP,KAAA,CAAAQ,aAAA;IACIC,SAAS,EAAE,2CAA4C;IACvDC,KAAK,EAAE;MACHC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,QAAQ;MACxBT,GAAG;MACHE,IAAI;MACJD,KAAK;MACLS,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,IAAI;MACZC,UAAU,EAAET,OAAO,GAAG,SAAS,GAAG,QAAQ;MAC1CU,OAAO,EAAET,MAAM,GAAG,GAAG,GAAG;IAC5B;EAAE,gBAEFP,KAAA,CAAAQ,aAAA;IACIC,SAAS,EAAE,wCAAyC;IACpDC,KAAK,EAAE;MAAEP,GAAG,EAAE,CAAC,EAAE;MAAEc,OAAO,EAAE;IAAU;EAAE,GAEvCf,KACC,CACL,CAAC;AAEd","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Overlays/DropLine.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Content/Preview/Overlays/DropLine.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface DropLineProps {\n    label: string;\n    top: number;\n    left: number;\n    width: number;\n    visible: boolean;\n    dimmed: boolean;\n}\n\nexport function DropLine({ label, top, width, left, visible, dimmed }: DropLineProps) {\n    return (\n        <div\n            className={\"absolute bg-primary left-0 right-0 w-full\"}\n            style={{\n                display: \"flex\",\n                justifyContent: \"center\",\n                top,\n                left,\n                width,\n                height: 4,\n                zIndex: 1000,\n                visibility: visible ? \"visible\" : \"hidden\",\n                opacity: dimmed ? 0.5 : 1\n            }}\n        >\n            <span\n                className={\"absolute bg-primary text-neutral-light\"}\n                style={{ top: -10, padding: \"2px 8px\" }}\n            >\n                {label}\n            </span>\n        </div>\n    );\n}\n"],"names":["DropLine","label","top","width","left","visible","dimmed"],"mappings":";AAWO,SAASA,SAAS,EAAEC,KAAK,EAAEC,GAAG,EAAEC,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,MAAM,EAAiB;IAChF,OAAO,WAAP,GACI,oBAAC;QACG,WAAW;QACX,OAAO;YACH,SAAS;YACT,gBAAgB;YAChBJ;YACAE;YACAD;YACA,QAAQ;YACR,QAAQ;YACR,YAAYE,UAAU,YAAY;YAClC,SAASC,SAAS,MAAM;QAC5B;qBAEA,oBAAC;QACG,WAAW;QACX,OAAO;YAAE,KAAK;YAAK,SAAS;QAAU;OAErCL;AAIjB"}