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

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useRef","ElementOverlays","ConnectEditorToPreview","useResponsiveContainer","OverlayLoader","observer","Iframe","url","timestamp","props","iframeRef","previewWidth","viewportManager","iframeUrl","localUrl","URL","searchParams","set","toString","createElement","key","className","onConnected","showLoading","size","variant","text","style","width","id","src","ref","sandbox","displayName"],"sources":["Iframe.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { observer } from \"mobx-react-lite\";\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 previewWidth = useResponsiveContainer(props.viewportManager);\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        <div\n            key={iframeUrl}\n            className={\"wby-relative wby-flex wby-flex-col wby-items-center\"}\n            data-role={\"responsive-container\"}\n        >\n            <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n            {props.showLoading ? (\n                <OverlayLoader\n                    size=\"lg\"\n                    variant=\"accent\"\n                    text=\"Loading preview...\"\n                    className={\"wby-bg-neutral-base\"}\n                />\n            ) : null}\n            {/* Height = viewport height - top bar - address bar - breadcrumbs. */}\n            <div\n                className=\"wby-min-h-[calc(100vh-43px-50px-31px)] wby-max-h-[calc(100vh-43px-50px)] wby-box-border  wby-overflow-hidden\"\n                style={{ width: previewWidth }}\n            >\n                <ElementOverlays />\n                <iframe\n                    id={\"preview-iframe\"}\n                    className={\n                        \"wby-w-full wby-bg-white wby-border-none wby-overflow-scroll wby-min-h-[inherit] wby-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        </div>\n    );\n});\n\nIframe.displayName = \"Iframe\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC9C,SAASC,eAAe;AACxB,SAASC,sBAAsB;AAE/B,SAASC,sBAAsB;AAC/B,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,QAAQ,QAAQ,iBAAiB;AAU1C,OAAO,MAAMC,MAAM,GAAGD,QAAQ,CAAC,CAAC;EAAEE,GAAG;EAAEC,SAAS;EAAE,GAAGC;AAAmB,CAAC,KAAK;EAC1E,MAAMC,SAAS,GAAGV,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAMW,YAAY,GAAGR,sBAAsB,CAACM,KAAK,CAACG,eAAe,CAAC;EAElE,MAAMC,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,MAAMe,QAAQ,GAAG,IAAIC,GAAG,CAACR,GAAG,CAAC;IAC7BO,QAAQ,CAACE,YAAY,CAACC,GAAG,CAAC,OAAO,EAAET,SAAS,CAACU,QAAQ,CAAC,CAAC,CAAC;IACxD,OAAOJ,QAAQ,CAACI,QAAQ,CAAC,CAAC;EAC9B,CAAC,EAAE,CAACX,GAAG,EAAEC,SAAS,CAAC,CAAC;EAEpB,oBACIV,KAAA,CAAAqB,aAAA;IACIC,GAAG,EAAEP,SAAU;IACfQ,SAAS,EAAE,qDAAsD;IACjE,aAAW;EAAuB,gBAElCvB,KAAA,CAAAqB,aAAA,CAACjB,sBAAsB;IAACQ,SAAS,EAAEA,SAAU;IAACY,WAAW,EAAEb,KAAK,CAACa;EAAY,CAAE,CAAC,EAC/Eb,KAAK,CAACc,WAAW,gBACdzB,KAAA,CAAAqB,aAAA,CAACf,aAAa;IACVoB,IAAI,EAAC,IAAI;IACTC,OAAO,EAAC,QAAQ;IAChBC,IAAI,EAAC,oBAAoB;IACzBL,SAAS,EAAE;EAAsB,CACpC,CAAC,GACF,IAAI,eAERvB,KAAA,CAAAqB,aAAA;IACIE,SAAS,EAAC,8GAA8G;IACxHM,KAAK,EAAE;MAAEC,KAAK,EAAEjB;IAAa;EAAE,gBAE/Bb,KAAA,CAAAqB,aAAA,CAAClB,eAAe,MAAE,CAAC,eACnBH,KAAA,CAAAqB,aAAA;IACIU,EAAE,EAAE,gBAAiB;IACrBR,SAAS,EACL,yGACH;IACDS,GAAG,EAAEjB,SAAU;IACfkB,GAAG,EAAErB,SAAU;IACfsB,OAAO,EAAC;EAA0F,CACrG,CACA,CACJ,CAAC;AAEd,CAAC,CAAC;AAEF1B,MAAM,CAAC2B,WAAW,GAAG,QAAQ","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                    \"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

@@ -1,62 +1,51 @@
 import { useCallback, useEffect } from "react";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { useKeyHandler } from "../../../hooks/useKeyHandler";
-import { $getActiveElementId, $getComponentManifestByElementId } from "../../../../editorSdk/utils";
-import { Commands } from "../../..";
-export const KeyboardShortcuts = () => {
-  const editor = useDocumentEditor();
-  const {
-    addKeyHandler,
-    removeKeyHandler
-  } = useKeyHandler();
-  const deleteActiveElement = useCallback(() => {
-    const activeElementId = $getActiveElementId(editor);
-    if (activeElementId) {
-      const manifest = $getComponentManifestByElementId(editor, activeElementId);
-      if (!manifest) {
-        return;
-      }
-      if (manifest.canDelete !== false) {
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { useKeyHandler } from "../../../hooks/useKeyHandler.js";
+import { $getActiveElementId } from "../../../../editorSdk/utils/index.js";
+import { Commands } from "../../../index.js";
+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);
-        editor.executeCommand(Commands.DeleteElement, {
-          id: activeElementId
+    }, []);
+    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();
         });
-      }
-    }
-  }, []);
-  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;
+        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","$getComponentManifestByElementId","Commands","KeyboardShortcuts","editor","addKeyHandler","removeKeyHandler","deleteActiveElement","activeElementId","manifest","canDelete","executeCommand","DeselectElement","DeleteElement","id","deactivateElement","e","preventDefault","undo","redo"],"sources":["KeyboardShortcuts.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useKeyHandler } from \"~/BaseEditor/hooks/useKeyHandler\";\nimport { $getActiveElementId, $getComponentManifestByElementId } from \"~/editorSdk/utils\";\nimport { Commands } from \"~/BaseEditor\";\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            const manifest = $getComponentManifestByElementId(editor, activeElementId);\n            if (!manifest) {\n                return;\n            }\n\n            if (manifest.canDelete !== false) {\n                editor.executeCommand(Commands.DeselectElement);\n                editor.executeCommand(Commands.DeleteElement, { id: activeElementId });\n            }\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,EAAEC,gCAAgC;AAC9D,SAASC,QAAQ;AAEjB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEO,aAAa;IAAEC;EAAiB,CAAC,GAAGP,aAAa,CAAC,CAAC;EAE3D,MAAMQ,mBAAmB,GAAGX,WAAW,CAAC,MAAM;IAC1C,MAAMY,eAAe,GAAGR,mBAAmB,CAACI,MAAM,CAAC;IACnD,IAAII,eAAe,EAAE;MACjB,MAAMC,QAAQ,GAAGR,gCAAgC,CAACG,MAAM,EAAEI,eAAe,CAAC;MAC1E,IAAI,CAACC,QAAQ,EAAE;QACX;MACJ;MAEA,IAAIA,QAAQ,CAACC,SAAS,KAAK,KAAK,EAAE;QAC9BN,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACU,eAAe,CAAC;QAC/CR,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACW,aAAa,EAAE;UAAEC,EAAE,EAAEN;QAAgB,CAAC,CAAC;MAC1E;IACJ;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMO,iBAAiB,GAAGnB,WAAW,CAAC,MAAM;IACxCQ,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACU,eAAe,CAAC;EACnD,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM;IACZQ,aAAa,CAAC,QAAQ,EAAEW,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBF,iBAAiB,CAAC,CAAC;IACvB,CAAC,CAAC;IAEFV,aAAa,CAAC,WAAW,EAAEW,CAAC,IAAI;MAC5BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBV,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,QAAQ,EAAEW,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBV,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,OAAO,EAAEW,CAAC,IAAI;MACxBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBb,MAAM,CAACc,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEFb,aAAa,CAAC,aAAa,EAAEW,CAAC,IAAI;MAC9BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBb,MAAM,CAACe,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAM;MACTb,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: "wby-absolute wby-bottom-0 wby-left-0 wby-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={\"wby-absolute wby-bottom-0 wby-left-0 wby-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;EAAgD,GAC3DN,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.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import type { Box } from "../Box";
-import type { DropEvent } from "../useProximityDropzone";
+import type { Box } from "../../../../../BaseEditor/defaultConfig/Content/Preview/Box.js";
+import type { DropEvent } from "../../../../../BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js";
 interface DropBoxProps {
     box: Box;
     onDrop: (event: DropEvent) => void;

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

@@ -1,56 +1,54 @@
-import React from "react";
+import react from "react";
 import { useDrop } from "react-dnd";
-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 { useIsDragging } from "../useIsDragging";
-import deepEqual from "deep-equal";
-export const DropBox = /*#__PURE__*/React.memo(({
-  box,
-  onDrop
-}) => {
-  const isDragging = useIsDragging();
-  const [{
-    isOver
-  }, dropRef] = useDrop(() => ({
-    accept: "ELEMENT",
-    drop: item => {
-      onDrop({
-        item,
-        target: {
-          parentId: box.parentId,
-          index: 0,
-          slot: box.parentSlot
+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";
+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;
-  const disabled = "wby-border-neutral-muted wby-fill-neutral-disabled";
-  const enabled = "wby-border-success-default wby-fill-success";
-  const mouseOver = "wby-border-accent-default wby-fill-accent-default";
-  const classes = cn("wby-flex wby-absolute wby-items-center wby-justify-center wby-border-sm wby-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
-    }
-  }, /*#__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","cn","Icon","ReactComponent","InsertIcon","BlockIcon","useIsDragging","deepEqual","DropBox","memo","box","onDrop","isDragging","isOver","dropRef","accept","drop","item","target","parentId","index","slot","parentSlot","collect","monitor","getItem","canAccept","disabled","enabled","mouseOver","classes","createElement","id","depth","className","style","zIndex","top","left","width","height","icon","label","prev","next","displayName"],"sources":["DropBox.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDrop } from \"react-dnd\";\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\";\nimport type { DropEvent } from \"~/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging\";\nimport deepEqual from \"deep-equal\";\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 }, dropRef] = useDrop<\n            any,\n            unknown,\n            { item: { name: string }; isOver: boolean }\n        >(() => ({\n            accept: \"ELEMENT\",\n            drop: item => {\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;\n        const disabled = \"wby-border-neutral-muted wby-fill-neutral-disabled\";\n        const enabled = \"wby-border-success-default wby-fill-success\";\n        const mouseOver = \"wby-border-accent-default wby-fill-accent-default\";\n\n        const classes = cn(\n            \"wby-flex wby-absolute wby-items-center wby-justify-center wby-border-sm wby-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                }}\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,SAASC,EAAE,EAAEC,IAAI,QAAQ,kBAAkB;AAC3C,SAASC,cAAc,IAAIC,UAAU,QAAQ,8BAA8B;AAC3E,SAASD,cAAc,IAAIE,SAAS,QAAQ,yBAAyB;AAGrE,SAASC,aAAa;AACtB,OAAOC,SAAS,MAAM,YAAY;AAOlC,OAAO,MAAMC,OAAO,gBAAGT,KAAK,CAACU,IAAI,CAC7B,CAAC;EAAEC,GAAG;EAAEC;AAAqB,CAAC,KAAK;EAC/B,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;EAElC,MAAM,CAAC;IAAEO;EAAO,CAAC,EAAEC,OAAO,CAAC,GAAGd,OAAO,CAInC,OAAO;IACLe,MAAM,EAAE,SAAS;IACjBC,IAAI,EAAEC,IAAI,IAAI;MACVN,MAAM,CAAC;QACHM,IAAI;QACJC,MAAM,EAAE;UAAEC,QAAQ,EAAET,GAAG,CAACS,QAAQ;UAAEC,KAAK,EAAE,CAAC;UAAEC,IAAI,EAAEX,GAAG,CAACY;QAAW;MACrE,CAAC,CAAC;IACN,CAAC;IACDC,OAAO,EAAEC,OAAO,KAAK;MACjBP,IAAI,EAAEO,OAAO,CAACC,OAAO,CAAC,CAAC;MACvBZ,MAAM,EAAEW,OAAO,CAACX,MAAM,CAAC;IAC3B,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,MAAMa,SAAS,GAAGd,UAAU;EAC5B,MAAMe,QAAQ,GAAG,oDAAoD;EACrE,MAAMC,OAAO,GAAG,6CAA6C;EAC7D,MAAMC,SAAS,GAAG,mDAAmD;EAErE,MAAMC,OAAO,GAAG7B,EAAE,CACd,2FAA2F,EAC3FyB,SAAS,IAAIb,MAAM,IAAIgB,SAAS,EAChCH,SAAS,IAAI,CAACb,MAAM,IAAIe,OAAO,EAC/B,CAACF,SAAS,IAAIC,QAClB,CAAC;EAED,OAAOb,OAAO,cACVf,KAAA,CAAAgC,aAAA;IACI,aAAW,cAAe;IAC1B,gBAAcrB,GAAG,CAACsB,EAAG;IACrB,cAAYtB,GAAG,CAACuB,KAAM;IACtBC,SAAS,EAAEJ,OAAQ;IACnBK,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;IAChB;EAAE,gBAEFzC,KAAA,CAAAgC,aAAA,CAAC7B,IAAI;IACDuC,IAAI,EAAE7B,UAAU,IAAI,CAACc,SAAS,gBAAG3B,KAAA,CAAAgC,aAAA,CAAC1B,SAAS,MAAE,CAAC,gBAAGN,KAAA,CAAAgC,aAAA,CAAC3B,UAAU,MAAE,CAAE;IAChEsC,KAAK,EAAE;EAAc,CACxB,CACA,CACT,CAAC;AACL,CAAC,EACD,CAACC,IAAI,EAAEC,IAAI,KAAKrC,SAAS,CAACoC,IAAI,EAAEC,IAAI,CACxC,CAAC;AAEDpC,OAAO,CAACqC,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.d.ts

@@ -2,8 +2,10 @@ import React from "react";
 interface DropLineProps {
     label: string;
     top: number;
+    left: number;
+    width: number;
     visible: boolean;
     dimmed: boolean;
 }
-export declare function DropLine({ label, top, visible, dimmed }: DropLineProps): React.JSX.Element;
+export declare function DropLine({ label, top, width, left, visible, dimmed }: DropLineProps): React.JSX.Element;
 export {};

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

@@ -1,28 +1,26 @@
-import React from "react";
-export function DropLine({
-  label,
-  top,
-  visible,
-  dimmed
-}) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "wby-absolute wby-bg-primary-default wby-left-0 wby-right-0 wby-w-full",
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      top,
-      height: 4,
-      zIndex: 10,
-      visibility: visible ? "visible" : "hidden",
-      opacity: dimmed ? 0.5 : 1
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "wby-absolute wby-bg-primary-default wby-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","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    visible: boolean;\n    dimmed: boolean;\n}\n\nexport function DropLine({ label, top, visible, dimmed }: DropLineProps) {\n    return (\n        <div\n            className={\"wby-absolute wby-bg-primary-default wby-left-0 wby-right-0 wby-w-full\"}\n            style={{\n                display: \"flex\",\n                justifyContent: \"center\",\n                top,\n                height: 4,\n                zIndex: 10,\n                visibility: visible ? \"visible\" : \"hidden\",\n                opacity: dimmed ? 0.5 : 1\n            }}\n        >\n            <span\n                className={\"wby-absolute wby-bg-primary-default wby-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;AASzB,OAAO,SAASC,QAAQA,CAAC;EAAEC,KAAK;EAAEC,GAAG;EAAEC,OAAO;EAAEC;AAAsB,CAAC,EAAE;EACrE,oBACIL,KAAA,CAAAM,aAAA;IACIC,SAAS,EAAE,uEAAwE;IACnFC,KAAK,EAAE;MACHC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,QAAQ;MACxBP,GAAG;MACHQ,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,EAAE;MACVC,UAAU,EAAET,OAAO,GAAG,SAAS,GAAG,QAAQ;MAC1CU,OAAO,EAAET,MAAM,GAAG,GAAG,GAAG;IAC5B;EAAE,gBAEFL,KAAA,CAAAM,aAAA;IACIC,SAAS,EAAE,4DAA6D;IACxEC,KAAK,EAAE;MAAEL,GAAG,EAAE,CAAC,EAAE;MAAEY,OAAO,EAAE;IAAU;EAAE,GAEvCb,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"}

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementDropLines.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
-import type { Box } from "../Box";
+import type { Box } from "../Box.js";
 interface ElementDropZonesProps {
     editorBox: Box;
     previewBox: Box;
     isFirst: boolean;
-    isHighlighted: boolean;
 }
-export declare const ElementDropLines: ({ editorBox, previewBox, isFirst }: ElementDropZonesProps) => React.JSX.Element | null;
+export declare const ElementDropLines: ({ editorBox, previewBox, isFirst }: ElementDropZonesProps) => React.JSX.Element;
 export {};

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

@@ -1,57 +1,82 @@
-import React, { useMemo } from "react";
+import react, { useCallback, useMemo, useRef } from "react";
 import { useDragLayer } from "react-dnd";
-import { DropLine } from "./DropLine";
-import { useIsDragging } from "../useIsDragging";
-import { useProximityDropzone } from "../useProximityDropzone";
-import { useElementComponentManifest } from "../useElementComponentManifest";
-import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
-import { findMatchingAstNode } from "@webiny/website-builder-sdk";
-export const ElementDropLines = ({
-  editorBox,
-  previewBox,
-  isFirst
-}) => {
-  const componentManifest = useElementComponentManifest(previewBox.parentId);
-  const draggingItem = useDragLayer(monitor => monitor.getItem());
-  const isDragging = draggingItem && draggingItem.id === previewBox.id;
-  const {
-    proximity
-  } = useProximityDropzone({
-    id: previewBox.id,
-    box: editorBox
-  });
-  const anyElementDragged = useIsDragging();
-  const hoverBefore = proximity?.position === 0;
-  const hoverAfter = proximity?.position === 1;
-  const elementLabel = componentManifest?.label ?? componentManifest?.name ?? "";
-  const targetInputNode = useMemo(() => {
-    if (!proximity?.box.parentSlot) {
-      return undefined;
+import { DropLine } from "./DropLine.js";
+import { useIsDragging } from "../useIsDragging.js";
+import { useProximityDropzone } from "../useProximityDropzone.js";
+import { useElementComponentManifest } from "../useElementComponentManifest.js";
+import { ComponentManifestToAstConverter, findMatchingAstNode } from "@webiny/website-builder-sdk";
+import { DevToolsSection } from "@webiny/app-admin";
+const ElementDropLines = ({ editorBox, previewBox, isFirst })=>{
+    const componentManifest = useElementComponentManifest(previewBox.parentId);
+    const draggingItem = useDragLayer((monitor)=>monitor.getItem());
+    const isDragging = draggingItem && draggingItem.id === previewBox.id;
+    const draggingItemRef = useRef(draggingItem);
+    draggingItemRef.current = draggingItem;
+    const componentManifestRef = useRef(componentManifest);
+    componentManifestRef.current = componentManifest;
+    const canAccept = useCallback(()=>{
+        const item = draggingItemRef.current;
+        if (!item) return true;
+        const manifest = componentManifestRef.current;
+        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);
+        const targetNode = findMatchingAstNode(editorBox.parentSlot, inputsAst);
+        if (!targetNode) return false;
+        if ("slot" === targetNode.type) {
+            const slotInput = targetNode.input;
+            const whitelistedComponents = slotInput.components;
+            if (whitelistedComponents && whitelistedComponents.length > 0) return whitelistedComponents.includes(item.componentName);
+        }
+        return true;
+    }, [
+        editorBox.parentSlot
+    ]);
+    const { proximity } = useProximityDropzone({
+        id: previewBox.id,
+        box: editorBox,
+        canAccept
+    });
+    const anyElementDragged = useIsDragging();
+    const hoverBefore = proximity?.position === 0;
+    const hoverAfter = proximity?.position === 1;
+    const elementLabel = componentManifest?.label ?? componentManifest?.name ?? "";
+    const targetInputNode = useMemo(()=>{
+        if (!proximity?.box.parentSlot) return;
+        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest?.inputs ?? []);
+        return findMatchingAstNode(proximity?.box.parentSlot, inputsAst);
+    }, [
+        proximity?.box.parentSlot
+    ]);
+    let canAcceptComponent = !!targetInputNode;
+    if (draggingItem && targetInputNode && "slot" === targetInputNode.type) {
+        const slotInput = targetInputNode.input;
+        const whitelistedComponents = slotInput.components;
+        if (whitelistedComponents && whitelistedComponents.length > 0) canAcceptComponent = whitelistedComponents.includes(draggingItem?.componentName);
     }
-    const inputsAst = ComponentManifestToAstConverter.convert(componentManifest?.inputs ?? []);
-    return findMatchingAstNode(proximity?.box.parentSlot, inputsAst);
-  }, [proximity?.box.parentSlot]);
-
-  // Figure out if we are allowed to drop the current item into the dropzone.
-  let canAcceptComponent = true;
-  if (draggingItem && targetInputNode && targetInputNode.type === "slot") {
-    const slotInput = targetInputNode.input;
-    const whitelistedComponents = slotInput.components;
-    if (whitelistedComponents && whitelistedComponents.length > 0) {
-      canAcceptComponent = whitelistedComponents.includes(draggingItem?.componentName);
-    }
-  }
-  return anyElementDragged ? /*#__PURE__*/React.createElement(React.Fragment, null, !isDragging && isFirst && /*#__PURE__*/React.createElement(DropLine, {
-    label: elementLabel,
-    top: 0,
-    visible: hoverBefore && canAcceptComponent,
-    dimmed: false
-  }), !isDragging && /*#__PURE__*/React.createElement(DropLine, {
-    label: elementLabel,
-    top: previewBox?.height - 2,
-    visible: hoverAfter && canAcceptComponent,
-    dimmed: false
-  })) : null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DevToolsSection, {
+        name: "draggingElement",
+        group: "Editor",
+        views: "raw",
+        data: {
+            proximity,
+            canAcceptComponent,
+            targetInputNode
+        }
+    }), anyElementDragged ? /*#__PURE__*/ react.createElement(react.Fragment, null, !isDragging && isFirst && /*#__PURE__*/ react.createElement(DropLine, {
+        label: elementLabel,
+        top: previewBox.top,
+        left: previewBox.left,
+        width: previewBox.width,
+        visible: hoverBefore && canAcceptComponent,
+        dimmed: false
+    }), !isDragging && /*#__PURE__*/ react.createElement(DropLine, {
+        label: elementLabel,
+        top: previewBox.bottom - 2,
+        left: previewBox.left,
+        width: previewBox.width,
+        visible: hoverAfter && canAcceptComponent,
+        dimmed: false
+    })) : null);
 };
+export { ElementDropLines };
 
 //# sourceMappingURL=ElementDropLines.js.map