@webiny/app-website-builder 6.0.0 → 6.1.0-beta.0

package/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","breadcrumbs","display","zIndex","flexDirection","padding","position","left","bottom","width","height","backgroundColor","borderTop","fontSize","overflow","cursor","color","textDecoration","textTransform","background","content","borderBottom","borderLeft","top","marginTop","marginLeft","paddingLeft","borderLeftColor"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const breadcrumbs = css({\n    display: \"flex\",\n    zIndex: 100,\n    flexDirection: \"row\",\n    padding: 0,\n    position: \"absolute\",\n    left: 300,\n    bottom: 0,\n    width: \"calc(100% - 600px)\",\n    height: \"31px\",\n    backgroundColor: \"var(--color-neutral-dimmed)\",\n    borderTop: \"1px solid var( --color-neutral-dimmed)\",\n    fontSize: \"12px\",\n    overflow: \"hidden\",\n    \"> li\": {\n        cursor: \"pointer\",\n        display: \"flex\",\n        \"& .element\": {\n            color: \"var(--text-neutral-strong)\",\n            textDecoration: \"none\",\n            textTransform: \"capitalize\",\n            padding: \"5px 0 5px 30px\",\n            background: \"hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)\",\n            position: \"relative\",\n            display: \"block\"\n        },\n        \"& .element::after\": {\n            content: '\" \"',\n            display: \"block\",\n            width: \"0\",\n            height: \"0\",\n            borderTop: \"50px solid transparent\",\n            borderBottom: \"50px solid transparent\",\n            borderLeft: \"20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)   \",\n            position: \"absolute\",\n            top: \"50%\",\n            marginTop: \"-50px\",\n            left: \"100%\",\n            zIndex: 2\n        },\n        \"& .element::before\": {\n            content: '\" \"',\n            display: \"block\",\n            width: \"0\",\n            height: \"0\",\n            borderTop: \"50px solid transparent\",\n            borderBottom: \"50px solid transparent\",\n            borderLeft: \"20px solid hsla(0, 0%, 100%, 1)\",\n            position: \"absolute\",\n            top: \"50%\",\n            marginTop: \"-50px\",\n            marginLeft: \"1px\",\n            left: \"100%\",\n            zIndex: 1\n        }\n    },\n    \"& li:first-child .element\": { paddingLeft: \"10px\" },\n\n    // Handle active state\n    \"& li .element:hover\": {\n        background: \"var(--color-neutral-muted)\"\n    },\n    \"& li .element:hover:after\": {\n        borderLeftColor: \"var(--color-neutral-muted) !important\"\n    }\n});\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,SAAS;AAE7B,OAAO,MAAMC,WAAW,GAAGD,GAAG,CAAC;EAC3BE,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,GAAG;EACXC,aAAa,EAAE,KAAK;EACpBC,OAAO,EAAE,CAAC;EACVC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE,GAAG;EACTC,MAAM,EAAE,CAAC;EACTC,KAAK,EAAE,oBAAoB;EAC3BC,MAAM,EAAE,MAAM;EACdC,eAAe,EAAE,6BAA6B;EAC9CC,SAAS,EAAE,wCAAwC;EACnDC,QAAQ,EAAE,MAAM;EAChBC,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE;IACJC,MAAM,EAAE,SAAS;IACjBb,OAAO,EAAE,MAAM;IACf,YAAY,EAAE;MACVc,KAAK,EAAE,4BAA4B;MACnCC,cAAc,EAAE,MAAM;MACtBC,aAAa,EAAE,YAAY;MAC3Bb,OAAO,EAAE,gBAAgB;MACzBc,UAAU,EAAE,yDAAyD;MACrEb,QAAQ,EAAE,UAAU;MACpBJ,OAAO,EAAE;IACb,CAAC;IACD,mBAAmB,EAAE;MACjBkB,OAAO,EAAE,KAAK;MACdlB,OAAO,EAAE,OAAO;MAChBO,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,GAAG;MACXE,SAAS,EAAE,wBAAwB;MACnCS,YAAY,EAAE,wBAAwB;MACtCC,UAAU,EAAE,uEAAuE;MACnFhB,QAAQ,EAAE,UAAU;MACpBiB,GAAG,EAAE,KAAK;MACVC,SAAS,EAAE,OAAO;MAClBjB,IAAI,EAAE,MAAM;MACZJ,MAAM,EAAE;IACZ,CAAC;IACD,oBAAoB,EAAE;MAClBiB,OAAO,EAAE,KAAK;MACdlB,OAAO,EAAE,OAAO;MAChBO,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,GAAG;MACXE,SAAS,EAAE,wBAAwB;MACnCS,YAAY,EAAE,wBAAwB;MACtCC,UAAU,EAAE,iCAAiC;MAC7ChB,QAAQ,EAAE,UAAU;MACpBiB,GAAG,EAAE,KAAK;MACVC,SAAS,EAAE,OAAO;MAClBC,UAAU,EAAE,KAAK;MACjBlB,IAAI,EAAE,MAAM;MACZJ,MAAM,EAAE;IACZ;EACJ,CAAC;EACD,2BAA2B,EAAE;IAAEuB,WAAW,EAAE;EAAO,CAAC;EAEpD;EACA,qBAAqB,EAAE;IACnBP,UAAU,EAAE;EAChB,CAAC;EACD,2BAA2B,EAAE;IACzBQ,eAAe,EAAE;EACrB;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","breadcrumbs","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\n\nexport const breadcrumbs = css({\n    display: \"flex\",\n    zIndex: 100,\n    flexDirection: \"row\",\n    padding: 0,\n    position: \"absolute\",\n    left: 300,\n    bottom: 0,\n    width: \"calc(100% - 600px)\",\n    height: \"31px\",\n    backgroundColor: \"var(--color-neutral-dimmed)\",\n    borderTop: \"1px solid var( --color-neutral-dimmed)\",\n    fontSize: \"12px\",\n    overflow: \"hidden\",\n    \"> li\": {\n        cursor: \"pointer\",\n        display: \"flex\",\n        \"& .element\": {\n            color: \"var(--text-neutral-strong)\",\n            textDecoration: \"none\",\n            textTransform: \"capitalize\",\n            padding: \"5px 0 5px 30px\",\n            background: \"hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)\",\n            position: \"relative\",\n            display: \"block\"\n        },\n        \"& .element::after\": {\n            content: '\" \"',\n            display: \"block\",\n            width: \"0\",\n            height: \"0\",\n            borderTop: \"50px solid transparent\",\n            borderBottom: \"50px solid transparent\",\n            borderLeft: \"20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)   \",\n            position: \"absolute\",\n            top: \"50%\",\n            marginTop: \"-50px\",\n            left: \"100%\",\n            zIndex: 2\n        },\n        \"& .element::before\": {\n            content: '\" \"',\n            display: \"block\",\n            width: \"0\",\n            height: \"0\",\n            borderTop: \"50px solid transparent\",\n            borderBottom: \"50px solid transparent\",\n            borderLeft: \"20px solid hsla(0, 0%, 100%, 1)\",\n            position: \"absolute\",\n            top: \"50%\",\n            marginTop: \"-50px\",\n            marginLeft: \"1px\",\n            left: \"100%\",\n            zIndex: 1\n        }\n    },\n    \"& li:first-child .element\": { paddingLeft: \"10px\" },\n\n    // Handle active state\n    \"& li .element:hover\": {\n        background: \"var(--color-neutral-muted)\"\n    },\n    \"& li .element:hover:after\": {\n        borderLeftColor: \"var(--color-neutral-muted) !important\"\n    }\n});\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,cAAc;AAElC,OAAO,MAAMC,WAAW,gBAAGD,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAiE7B,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/ContentPreviewConfig.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ContentPreviewConfig: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Content/ContentPreviewConfig.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { EditorConfig } from "../../index.js";
+import { Breadcrumbs } from "./Breadcrumbs/index.js";
+import { DocumentPreview } from "./Preview/DocumentPreview.js";
+import { AddressBar } from "./AddressBar/AddressBar.js";
+export const ContentPreviewConfig = () => {
+  const {
+    Ui
+  } = EditorConfig;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Ui.Content.Element, {
+    name: "addressBar",
+    element: /*#__PURE__*/React.createElement(AddressBar, null)
+  }), /*#__PURE__*/React.createElement(Ui.Content.Element, {
+    name: "iframe",
+    element: /*#__PURE__*/React.createElement(DocumentPreview, null)
+  }), /*#__PURE__*/React.createElement(Ui.Content.Element, {
+    name: "breadcrumbs",
+    element: /*#__PURE__*/React.createElement(Ui.IsNotReadOnly, null, /*#__PURE__*/React.createElement(Breadcrumbs, null))
+  }));
+};
+
+//# sourceMappingURL=ContentPreviewConfig.js.map

package/BaseEditor/defaultConfig/Content/ContentPreviewConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","EditorConfig","Breadcrumbs","DocumentPreview","AddressBar","ContentPreviewConfig","Ui","createElement","Fragment","Content","Element","name","element","IsNotReadOnly"],"sources":["ContentPreviewConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/index.js\";\nimport { DocumentPreview } from \"./Preview/DocumentPreview.js\";\nimport { AddressBar } from \"./AddressBar/AddressBar.js\";\n\nexport const ContentPreviewConfig = () => {\n    const { Ui } = EditorConfig;\n\n    return (\n        <>\n            <Ui.Content.Element name=\"addressBar\" element={<AddressBar />} />\n            <Ui.Content.Element name=\"iframe\" element={<DocumentPreview />} />\n            <Ui.Content.Element\n                name={\"breadcrumbs\"}\n                element={\n                    <Ui.IsNotReadOnly>\n                        <Breadcrumbs />\n                    </Ui.IsNotReadOnly>\n                }\n            />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AACrB,SAASC,WAAW;AACpB,SAASC,eAAe;AACxB,SAASC,UAAU;AAEnB,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACtC,MAAM;IAAEC;EAAG,CAAC,GAAGL,YAAY;EAE3B,oBACID,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,qBACIR,KAAA,CAAAO,aAAA,CAACD,EAAE,CAACG,OAAO,CAACC,OAAO;IAACC,IAAI,EAAC,YAAY;IAACC,OAAO,eAAEZ,KAAA,CAAAO,aAAA,CAACH,UAAU,MAAE;EAAE,CAAE,CAAC,eACjEJ,KAAA,CAAAO,aAAA,CAACD,EAAE,CAACG,OAAO,CAACC,OAAO;IAACC,IAAI,EAAC,QAAQ;IAACC,OAAO,eAAEZ,KAAA,CAAAO,aAAA,CAACJ,eAAe,MAAE;EAAE,CAAE,CAAC,eAClEH,KAAA,CAAAO,aAAA,CAACD,EAAE,CAACG,OAAO,CAACC,OAAO;IACfC,IAAI,EAAE,aAAc;IACpBC,OAAO,eACHZ,KAAA,CAAAO,aAAA,CAACD,EAAE,CAACO,aAAa,qBACbb,KAAA,CAAAO,aAAA,CAACL,WAAW,MAAE,CACA;EACrB,CACJ,CACH,CAAC;AAEX,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.d.ts

@@ -7,6 +7,7 @@ export interface DropZoneProximity {
 interface DropzoneEntry {
     id: string;
     box: Box;
+    canAccept?: () => boolean;
     onProximityChange: (proximity: DropZoneProximity | null) => void;
 }
 export declare class DropZoneManager {

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

@@ -46,24 +46,67 @@ export class DropZoneManager {
     let matchedId = null;
     let matchedPosition = null;
     let matchedBox = null;
+
+    // Collect all candidate matches with their canAccept callback.
+    const candidates = [];
     for (const [id, {
-      box
+      box,
+      canAccept
     }] of this.zones) {
       const isWithinX = mouseX >= box.left && mouseX <= box.right;
       if (!isWithinX) {
         continue;
       }
-      if (mouseY >= box.top - threshold && mouseY <= box.top + threshold) {
-        matchedId = id;
-        matchedPosition = 0; // before
-        matchedBox = box;
-        break;
+      if (Math.abs(mouseY - box.top) <= threshold) {
+        candidates.push({
+          id,
+          box,
+          position: 0,
+          canAccept
+        });
+      }
+      if (Math.abs(mouseY - box.bottom) <= threshold) {
+        candidates.push({
+          id,
+          box,
+          position: 1,
+          canAccept
+        });
       }
-      if (mouseY >= box.bottom - threshold && mouseY <= box.bottom + threshold) {
-        matchedId = id;
-        matchedPosition = 1; // after
-        matchedBox = box;
-        break;
+    }
+    if (candidates.length > 0) {
+      // Filter to only eligible candidates.
+      const eligible = candidates.filter(c => !c.canAccept || c.canAccept());
+      if (eligible.length > 0) {
+        const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort((a, b) => b - a);
+        if (uniqueDepths.length === 1) {
+          const winner = eligible[0];
+          matchedId = winner.id;
+          matchedPosition = winner.position;
+          matchedBox = winner.box;
+        } else {
+          // Use X position to select depth band among eligible candidates only.
+          let rangeLeft = Infinity;
+          let rangeRight = -Infinity;
+          for (const c of eligible) {
+            rangeLeft = Math.min(rangeLeft, c.box.left);
+            rangeRight = Math.max(rangeRight, c.box.right);
+          }
+          const centerX = (rangeLeft + rangeRight) / 2;
+          const halfWidth = (rangeRight - rangeLeft) / 2;
+
+          // 0 at center, 1 at edges.
+          const distFromCenter = halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;
+
+          // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).
+          const depthIndex = Math.min(Math.floor(distFromCenter * uniqueDepths.length), uniqueDepths.length - 1);
+          const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);
+          if (winner) {
+            matchedId = winner.id;
+            matchedPosition = winner.position;
+            matchedBox = winner.box;
+          }
+        }
       }
     }
     if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {

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

@@ -1 +1 @@
-{"version":3,"names":["DropZoneManager","zones","Map","currentTargetId","currentPosition","animationFrame","currentBox","constructor","mouse","register","entry","id","set","unregister","delete","start","runDropzoneLoop","tick","requestAnimationFrame","stop","cancelAnimationFrame","getLastMatchedPosition","parentId","slot","parentSlot","index","parentIndex","scrollYOffset","getScrollOffset","threshold","mouseX","x","mouseY","y","matchedId","matchedPosition","matchedBox","box","isWithinX","left","right","top","bottom","isTarget","onProximityChange","position","container","document","getElementById","scrollTop"],"sources":["DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box.js\";\n\ntype DropPosition = number | null;\n\nexport interface DropZoneProximity {\n    box: Box;\n    position: DropPosition;\n}\n\ninterface DropzoneEntry {\n    id: string;\n    box: Box;\n    onProximityChange: (proximity: DropZoneProximity | null) => void;\n}\n\nexport class DropZoneManager {\n    private zones = new Map<string, DropzoneEntry>();\n    private currentTargetId: string | null = null;\n    private currentPosition: DropPosition = null;\n    private animationFrame: number | null = null;\n    private currentBox: Box | null = null;\n\n    constructor(private mouse: { x: number; y: number }) {}\n\n    register(entry: DropzoneEntry) {\n        if (entry.id === \"root\") {\n            return;\n        }\n\n        this.zones.set(entry.id, entry);\n    }\n\n    unregister(id: string) {\n        this.zones.delete(id);\n    }\n\n    start() {\n        const runDropzoneLoop = () => {\n            this.tick();\n            this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n        };\n        this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n    }\n\n    stop() {\n        if (this.animationFrame) {\n            cancelAnimationFrame(this.animationFrame);\n        }\n    }\n\n    getLastMatchedPosition() {\n        if (!this.currentBox) {\n            return null;\n        }\n\n        return {\n            parentId: this.currentBox.parentId,\n            slot: this.currentBox.parentSlot,\n            index: this.currentBox.parentIndex + (this.currentPosition ?? 0)\n        };\n    }\n\n    tick() {\n        const scrollYOffset = this.getScrollOffset();\n        const threshold = 10;\n        const mouseX = this.mouse.x;\n        const mouseY = this.mouse.y + scrollYOffset;\n\n        let matchedId: string | null = null;\n        let matchedPosition: DropPosition = null;\n        let matchedBox: Box | null = null;\n\n        for (const [id, { box }] of this.zones) {\n            const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n            if (!isWithinX) {\n                continue;\n            }\n\n            if (mouseY >= box.top - threshold && mouseY <= box.top + threshold) {\n                matchedId = id;\n                matchedPosition = 0; // before\n                matchedBox = box;\n                break;\n            }\n\n            if (mouseY >= box.bottom - threshold && mouseY <= box.bottom + threshold) {\n                matchedId = id;\n                matchedPosition = 1; // after\n                matchedBox = box;\n                break;\n            }\n        }\n\n        if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {\n            this.currentTargetId = matchedId;\n            this.currentPosition = matchedPosition;\n            this.currentBox = matchedBox;\n\n            for (const [id, entry] of this.zones) {\n                const isTarget = id === matchedId;\n                entry.onProximityChange(\n                    isTarget ? { box: matchedBox!, position: matchedPosition } : null\n                );\n            }\n        }\n    }\n\n    private getScrollOffset() {\n        const container = document.getElementById(\"preview-container\");\n        if (!container) {\n            return 0;\n        }\n\n        return container.scrollTop;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["DropZoneManager","zones","Map","currentTargetId","currentPosition","animationFrame","currentBox","constructor","mouse","register","entry","id","set","unregister","delete","start","runDropzoneLoop","tick","requestAnimationFrame","stop","cancelAnimationFrame","getLastMatchedPosition","parentId","slot","parentSlot","index","parentIndex","scrollYOffset","getScrollOffset","threshold","mouseX","x","mouseY","y","matchedId","matchedPosition","matchedBox","candidates","box","canAccept","isWithinX","left","right","Math","abs","top","push","position","bottom","length","eligible","filter","c","uniqueDepths","Set","map","depth","sort","a","b","winner","rangeLeft","Infinity","rangeRight","min","max","centerX","halfWidth","distFromCenter","depthIndex","floor","find","isTarget","onProximityChange","container","document","getElementById","scrollTop"],"sources":["DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box.js\";\n\ntype DropPosition = number | null;\n\nexport interface DropZoneProximity {\n    box: Box;\n    position: DropPosition;\n}\n\ninterface DropzoneEntry {\n    id: string;\n    box: Box;\n    canAccept?: () => boolean;\n    onProximityChange: (proximity: DropZoneProximity | null) => void;\n}\n\nexport class DropZoneManager {\n    private zones = new Map<string, DropzoneEntry>();\n    private currentTargetId: string | null = null;\n    private currentPosition: DropPosition = null;\n    private animationFrame: number | null = null;\n    private currentBox: Box | null = null;\n\n    constructor(private mouse: { x: number; y: number }) {}\n\n    register(entry: DropzoneEntry) {\n        if (entry.id === \"root\") {\n            return;\n        }\n\n        this.zones.set(entry.id, entry);\n    }\n\n    unregister(id: string) {\n        this.zones.delete(id);\n    }\n\n    start() {\n        const runDropzoneLoop = () => {\n            this.tick();\n            this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n        };\n        this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n    }\n\n    stop() {\n        if (this.animationFrame) {\n            cancelAnimationFrame(this.animationFrame);\n        }\n    }\n\n    getLastMatchedPosition() {\n        if (!this.currentBox) {\n            return null;\n        }\n\n        return {\n            parentId: this.currentBox.parentId,\n            slot: this.currentBox.parentSlot,\n            index: this.currentBox.parentIndex + (this.currentPosition ?? 0)\n        };\n    }\n\n    tick() {\n        const scrollYOffset = this.getScrollOffset();\n        const threshold = 10;\n        const mouseX = this.mouse.x;\n        const mouseY = this.mouse.y + scrollYOffset;\n\n        let matchedId: string | null = null;\n        let matchedPosition: DropPosition = null;\n        let matchedBox: Box | null = null;\n\n        // Collect all candidate matches with their canAccept callback.\n        const candidates: { id: string; box: Box; position: number; canAccept?: () => boolean }[] =\n            [];\n\n        for (const [id, { box, canAccept }] of this.zones) {\n            const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n            if (!isWithinX) {\n                continue;\n            }\n\n            if (Math.abs(mouseY - box.top) <= threshold) {\n                candidates.push({ id, box, position: 0, canAccept });\n            }\n\n            if (Math.abs(mouseY - box.bottom) <= threshold) {\n                candidates.push({ id, box, position: 1, canAccept });\n            }\n        }\n\n        if (candidates.length > 0) {\n            // Filter to only eligible candidates.\n            const eligible = candidates.filter(c => !c.canAccept || c.canAccept());\n\n            if (eligible.length > 0) {\n                const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort(\n                    (a, b) => b - a\n                );\n\n                if (uniqueDepths.length === 1) {\n                    const winner = eligible[0];\n                    matchedId = winner.id;\n                    matchedPosition = winner.position;\n                    matchedBox = winner.box;\n                } else {\n                    // Use X position to select depth band among eligible candidates only.\n                    let rangeLeft = Infinity;\n                    let rangeRight = -Infinity;\n                    for (const c of eligible) {\n                        rangeLeft = Math.min(rangeLeft, c.box.left);\n                        rangeRight = Math.max(rangeRight, c.box.right);\n                    }\n\n                    const centerX = (rangeLeft + rangeRight) / 2;\n                    const halfWidth = (rangeRight - rangeLeft) / 2;\n\n                    // 0 at center, 1 at edges.\n                    const distFromCenter =\n                        halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;\n\n                    // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).\n                    const depthIndex = Math.min(\n                        Math.floor(distFromCenter * uniqueDepths.length),\n                        uniqueDepths.length - 1\n                    );\n\n                    const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);\n                    if (winner) {\n                        matchedId = winner.id;\n                        matchedPosition = winner.position;\n                        matchedBox = winner.box;\n                    }\n                }\n            }\n        }\n\n        if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {\n            this.currentTargetId = matchedId;\n            this.currentPosition = matchedPosition;\n            this.currentBox = matchedBox;\n\n            for (const [id, entry] of this.zones) {\n                const isTarget = id === matchedId;\n                entry.onProximityChange(\n                    isTarget ? { box: matchedBox!, position: matchedPosition } : null\n                );\n            }\n        }\n    }\n\n    private getScrollOffset() {\n        const container = document.getElementById(\"preview-container\");\n        if (!container) {\n            return 0;\n        }\n\n        return container.scrollTop;\n    }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,33 +1,45 @@
-import React, { useMemo, useRef } from "react";
-import { OverlayLoader } from "@webiny/admin-ui";
+import React, { useEffect, useMemo, useRef } from "react";
+import { cn, OverlayLoader } from "@webiny/admin-ui";
 import { observer } from "mobx-react-lite";
 import { ElementOverlays } from "./Overlays/ElementOverlays.js";
 import { ConnectEditorToPreview } from "../../../../DocumentEditor/ConnectEditorToPreview.js";
 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 previewSize = useResponsiveContainer(props.viewportManager);
+  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("div", {
-    id: "preview-container",
+  return /*#__PURE__*/React.createElement(PreviewContainer, {
     key: iframeUrl
-    /* Height = viewport height - top bar - address bar - breadcrumbs. */,
-    style: {
-      height: "calc(100vh - 43px - 50px - 31px)"
-    },
-    className: "relative flex flex-col items-center w-full overflow-auto"
   }, /*#__PURE__*/React.createElement(ConnectEditorToPreview, {
     iframeRef: iframeRef,
     onConnected: props.onConnected
@@ -38,15 +50,17 @@ export const Iframe = observer(({
     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: previewSize,
+      width: `${previewWidth}px`,
       minHeight: `${viewport.scrollHeight}px`
     }
-  }, /*#__PURE__*/React.createElement(ElementOverlays, null), /*#__PURE__*/React.createElement("iframe", {
+  }, !isReadOnly ? /*#__PURE__*/React.createElement(ElementOverlays, null) : null, /*#__PURE__*/React.createElement("iframe", {
     scrolling: "no",
     id: "preview-iframe",
-    className: "absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit] pointer-events-none",
+    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"

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useRef","OverlayLoader","observer","ElementOverlays","ConnectEditorToPreview","useResponsiveContainer","usePreviewData","Iframe","url","timestamp","props","iframeRef","previewSize","viewportManager","viewport","iframeUrl","localUrl","URL","searchParams","set","toString","createElement","id","key","style","height","className","onConnected","showLoading","size","variant","text","position","width","minHeight","scrollHeight","scrolling","src","ref","sandbox","displayName"],"sources":["Iframe.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { 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\";\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 previewSize = useResponsiveContainer(props.viewportManager);\n    const { viewport } = usePreviewData();\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            id={\"preview-container\"}\n            key={iframeUrl}\n            /* Height = viewport height - top bar - address bar - breadcrumbs. */\n            style={{\n                height: \"calc(100vh - 43px - 50px - 31px)\"\n            }}\n            className={\"relative flex flex-col items-center w-full overflow-auto\"}\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={\"bg-neutral-base\"}\n                />\n            ) : null}\n            {/* Content wrapper - sized by iframe content */}\n            <div\n                id={\"preview-body\"}\n                style={{\n                    position: \"relative\",\n                    width: previewSize,\n                    minHeight: `${viewport.scrollHeight}px`\n                }}\n            >\n                <ElementOverlays />\n                <iframe\n                    scrolling=\"no\"\n                    id={\"preview-iframe\"}\n                    className={\n                        \"absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit] 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;AAE9C,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,eAAe;AACxB,SAASC,sBAAsB;AAC/B,SAASC,sBAAsB;AAC/B,SAASC,cAAc;AAUvB,OAAO,MAAMC,MAAM,GAAGL,QAAQ,CAAC,CAAC;EAAEM,GAAG;EAAEC,SAAS;EAAE,GAAGC;AAAmB,CAAC,KAAK;EAC1E,MAAMC,SAAS,GAAGX,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAMY,WAAW,GAAGP,sBAAsB,CAACK,KAAK,CAACG,eAAe,CAAC;EACjE,MAAM;IAAEC;EAAS,CAAC,GAAGR,cAAc,CAAC,CAAC;EAErC,MAAMS,SAAS,GAAGhB,OAAO,CAAC,MAAM;IAC5B,MAAMiB,QAAQ,GAAG,IAAIC,GAAG,CAACT,GAAG,CAAC;IAC7BQ,QAAQ,CAACE,YAAY,CAACC,GAAG,CAAC,OAAO,EAAEV,SAAS,CAACW,QAAQ,CAAC,CAAC,CAAC;IACxD,OAAOJ,QAAQ,CAACI,QAAQ,CAAC,CAAC;EAC9B,CAAC,EAAE,CAACZ,GAAG,EAAEC,SAAS,CAAC,CAAC;EAEpB,oBACIX,KAAA,CAAAuB,aAAA;IACIC,EAAE,EAAE,mBAAoB;IACxBC,GAAG,EAAER;IACL;IACAS,KAAK,EAAE;MACHC,MAAM,EAAE;IACZ,CAAE;IACFC,SAAS,EAAE;EAA2D,gBAEtE5B,KAAA,CAAAuB,aAAA,CAACjB,sBAAsB;IAACO,SAAS,EAAEA,SAAU;IAACgB,WAAW,EAAEjB,KAAK,CAACiB;EAAY,CAAE,CAAC,EAC/EjB,KAAK,CAACkB,WAAW,gBACd9B,KAAA,CAAAuB,aAAA,CAACpB,aAAa;IACV4B,IAAI,EAAC,IAAI;IACTC,OAAO,EAAC,QAAQ;IAChBC,IAAI,EAAC,oBAAoB;IACzBL,SAAS,EAAE;EAAkB,CAChC,CAAC,GACF,IAAI,eAER5B,KAAA,CAAAuB,aAAA;IACIC,EAAE,EAAE,cAAe;IACnBE,KAAK,EAAE;MACHQ,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAErB,WAAW;MAClBsB,SAAS,EAAE,GAAGpB,QAAQ,CAACqB,YAAY;IACvC;EAAE,gBAEFrC,KAAA,CAAAuB,aAAA,CAAClB,eAAe,MAAE,CAAC,eACnBL,KAAA,CAAAuB,aAAA;IACIe,SAAS,EAAC,IAAI;IACdd,EAAE,EAAE,gBAAiB;IACrBI,SAAS,EACL,sGACH;IACDW,GAAG,EAAEtB,SAAU;IACfuB,GAAG,EAAE3B,SAAU;IACf4B,OAAO,EAAC;EAA0F,CACrG,CACA,CACJ,CAAC;AAEd,CAAC,CAAC;AAEFhC,MAAM,CAACiC,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"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":[]}

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { useKeyHandler } from "../../../hooks/useKeyHandler.js";
-import { $getActiveElementId, $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
+import { $getActiveElementId } from "../../../../editorSdk/utils/index.js";
 import { Commands } from "../../../index.js";
 export const KeyboardShortcuts = () => {
   const editor = useDocumentEditor();
@@ -12,16 +12,9 @@ export const KeyboardShortcuts = () => {
   const deleteActiveElement = useCallback(() => {
     const activeElementId = $getActiveElementId(editor);
     if (activeElementId) {
-      const manifest = $getComponentManifestByElementId(editor, activeElementId);
-      if (!manifest) {
-        return;
-      }
-      if (manifest.canDelete !== false) {
-        editor.executeCommand(Commands.DeselectElement);
-        editor.executeCommand(Commands.DeleteElement, {
-          id: activeElementId
-        });
-      }
+      editor.executeCommand(Commands.DeleteElement, {
+        id: activeElementId
+      });
     }
   }, []);
   const deactivateElement = useCallback(() => {

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/index.js\";\nimport { useKeyHandler } from \"~/BaseEditor/hooks/useKeyHandler.js\";\nimport { $getActiveElementId, $getComponentManifestByElementId } 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            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,"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":[]}

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

@@ -5,5 +5,5 @@ interface ElementDropZonesProps {
     previewBox: Box;
     isFirst: 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,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import { useDragLayer } from "react-dnd";
 import { DropLine } from "./DropLine.js";
 import { useIsDragging } from "../useIsDragging.js";
@@ -6,6 +6,7 @@ import { useProximityDropzone } from "../useProximityDropzone.js";
 import { useElementComponentManifest } from "../useElementComponentManifest.js";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { findMatchingAstNode } from "@webiny/website-builder-sdk";
+import { DevToolsSection } from "@webiny/app-admin";
 export const ElementDropLines = ({
   editorBox,
   previewBox,
@@ -14,11 +15,41 @@ export const ElementDropLines = ({
   const componentManifest = useElementComponentManifest(previewBox.parentId);
   const draggingItem = useDragLayer(monitor => monitor.getItem());
   const isDragging = draggingItem && draggingItem.id === previewBox.id;
+
+  // Keep a ref so the canAccept callback always sees the latest dragging item
+  // without causing re-registrations.
+  const draggingItemRef = useRef(draggingItem);
+  draggingItemRef.current = draggingItem;
+  const componentManifestRef = useRef(componentManifest);
+  componentManifestRef.current = componentManifest;
+  const canAccept = useCallback(() => {
+    const item = draggingItemRef.current;
+
+    // If nothing is being dragged, don't filter out candidates.
+    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 (targetNode.type === "slot") {
+      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
+    box: editorBox,
+    canAccept
   });
   const anyElementDragged = useIsDragging();
   const hoverBefore = proximity?.position === 0;
@@ -41,7 +72,16 @@ export const ElementDropLines = ({
       canAcceptComponent = whitelistedComponents.includes(draggingItem?.componentName);
     }
   }
-  return anyElementDragged ? /*#__PURE__*/React.createElement(React.Fragment, null, !isDragging && isFirst && /*#__PURE__*/React.createElement(DropLine, {
+  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,
@@ -55,7 +95,7 @@ export const ElementDropLines = ({
     width: previewBox.width,
     visible: hoverAfter && canAcceptComponent,
     dimmed: false
-  })) : null;
+  })) : null);
 };
 
 //# sourceMappingURL=ElementDropLines.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useDragLayer","DropLine","useIsDragging","useProximityDropzone","useElementComponentManifest","ComponentManifestToAstConverter","findMatchingAstNode","ElementDropLines","editorBox","previewBox","isFirst","componentManifest","parentId","draggingItem","monitor","getItem","isDragging","id","proximity","box","anyElementDragged","hoverBefore","position","hoverAfter","elementLabel","label","name","targetInputNode","parentSlot","undefined","inputsAst","convert","inputs","canAcceptComponent","type","slotInput","input","whitelistedComponents","components","length","includes","componentName","createElement","Fragment","top","left","width","visible","dimmed","bottom"],"sources":["ElementDropLines.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useDragLayer } from \"react-dnd\";\nimport { DropLine } from \"./DropLine.js\";\nimport { useIsDragging } from \"../useIsDragging.js\";\nimport { useProximityDropzone } from \"../useProximityDropzone.js\";\nimport type { Box } from \"../Box.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\nimport type { SlotInput } from \"@webiny/website-builder-sdk\";\n\ninterface ElementDropZonesProps {\n    editorBox: Box;\n    previewBox: Box;\n    isFirst: boolean;\n}\n\nexport const ElementDropLines = ({ editorBox, previewBox, isFirst }: ElementDropZonesProps) => {\n    const componentManifest = useElementComponentManifest(previewBox.parentId);\n    const draggingItem = useDragLayer(monitor => monitor.getItem());\n    const isDragging = draggingItem && draggingItem.id === previewBox.id;\n\n    const { proximity } = useProximityDropzone({\n        id: previewBox.id,\n        box: editorBox\n    });\n\n    const anyElementDragged = useIsDragging();\n    const hoverBefore = proximity?.position === 0;\n    const hoverAfter = proximity?.position === 1;\n    const elementLabel = componentManifest?.label ?? componentManifest?.name ?? \"\";\n\n    const targetInputNode = useMemo(() => {\n        if (!proximity?.box.parentSlot) {\n            return undefined;\n        }\n\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest?.inputs ?? []);\n        return findMatchingAstNode(proximity?.box.parentSlot, inputsAst);\n    }, [proximity?.box.parentSlot]);\n\n    // Figure out if we are allowed to drop the current item into the dropzone.\n    let canAcceptComponent = !!targetInputNode;\n    if (draggingItem && targetInputNode && targetInputNode.type === \"slot\") {\n        const slotInput = targetInputNode.input as SlotInput;\n        const whitelistedComponents = slotInput.components;\n        if (whitelistedComponents && whitelistedComponents.length > 0) {\n            canAcceptComponent = whitelistedComponents.includes(draggingItem?.componentName);\n        }\n    }\n\n    return anyElementDragged ? (\n        <>\n            {!isDragging && isFirst && (\n                <DropLine\n                    label={elementLabel}\n                    top={previewBox.top}\n                    left={previewBox.left}\n                    width={previewBox.width}\n                    visible={hoverBefore && canAcceptComponent}\n                    dimmed={false}\n                />\n            )}\n            {!isDragging && (\n                <DropLine\n                    label={elementLabel}\n                    top={previewBox.bottom - 2}\n                    left={previewBox.left}\n                    width={previewBox.width}\n                    visible={hoverAfter && canAcceptComponent}\n                    dimmed={false}\n                />\n            )}\n        </>\n    ) : null;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","useRef","useDragLayer","DropLine","useIsDragging","useProximityDropzone","useElementComponentManifest","ComponentManifestToAstConverter","findMatchingAstNode","DevToolsSection","ElementDropLines","editorBox","previewBox","isFirst","componentManifest","parentId","draggingItem","monitor","getItem","isDragging","id","draggingItemRef","current","componentManifestRef","canAccept","item","manifest","inputsAst","convert","inputs","targetNode","parentSlot","type","slotInput","input","whitelistedComponents","components","length","includes","componentName","proximity","box","anyElementDragged","hoverBefore","position","hoverAfter","elementLabel","label","name","targetInputNode","undefined","canAcceptComponent","createElement","Fragment","group","views","data","top","left","width","visible","dimmed","bottom"],"sources":["ElementDropLines.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport { useDragLayer } from \"react-dnd\";\nimport { DropLine } from \"./DropLine.js\";\nimport { useIsDragging } from \"../useIsDragging.js\";\nimport { useProximityDropzone } from \"../useProximityDropzone.js\";\nimport type { Box } from \"../Box.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\nimport type { SlotInput } from \"@webiny/website-builder-sdk\";\nimport { DevToolsSection } from \"@webiny/app-admin\";\n\ninterface ElementDropZonesProps {\n    editorBox: Box;\n    previewBox: Box;\n    isFirst: boolean;\n}\n\nexport const ElementDropLines = ({ editorBox, previewBox, isFirst }: ElementDropZonesProps) => {\n    const componentManifest = useElementComponentManifest(previewBox.parentId);\n    const draggingItem = useDragLayer(monitor => monitor.getItem());\n    const isDragging = draggingItem && draggingItem.id === previewBox.id;\n\n    // Keep a ref so the canAccept callback always sees the latest dragging item\n    // without causing re-registrations.\n    const draggingItemRef = useRef(draggingItem);\n    draggingItemRef.current = draggingItem;\n    const componentManifestRef = useRef(componentManifest);\n    componentManifestRef.current = componentManifest;\n\n    const canAccept = useCallback(() => {\n        const item = draggingItemRef.current;\n\n        // If nothing is being dragged, don't filter out candidates.\n        if (!item) {\n            return true;\n        }\n\n        const manifest = componentManifestRef.current;\n        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n        const targetNode = findMatchingAstNode(editorBox.parentSlot, inputsAst);\n\n        if (!targetNode) {\n            return false;\n        }\n\n        if (targetNode.type === \"slot\") {\n            const slotInput = targetNode.input as SlotInput;\n            const whitelistedComponents = slotInput.components;\n            if (whitelistedComponents && whitelistedComponents.length > 0) {\n                return whitelistedComponents.includes(item.componentName);\n            }\n        }\n\n        return true;\n    }, [editorBox.parentSlot]);\n\n    const { proximity } = useProximityDropzone({\n        id: previewBox.id,\n        box: editorBox,\n        canAccept\n    });\n\n    const anyElementDragged = useIsDragging();\n    const hoverBefore = proximity?.position === 0;\n    const hoverAfter = proximity?.position === 1;\n    const elementLabel = componentManifest?.label ?? componentManifest?.name ?? \"\";\n\n    const targetInputNode = useMemo(() => {\n        if (!proximity?.box.parentSlot) {\n            return undefined;\n        }\n\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest?.inputs ?? []);\n        return findMatchingAstNode(proximity?.box.parentSlot, inputsAst);\n    }, [proximity?.box.parentSlot]);\n\n    // Figure out if we are allowed to drop the current item into the dropzone.\n    let canAcceptComponent = !!targetInputNode;\n    if (draggingItem && targetInputNode && targetInputNode.type === \"slot\") {\n        const slotInput = targetInputNode.input as SlotInput;\n        const whitelistedComponents = slotInput.components;\n        if (whitelistedComponents && whitelistedComponents.length > 0) {\n            canAcceptComponent = whitelistedComponents.includes(draggingItem?.componentName);\n        }\n    }\n\n    return (\n        <>\n            <DevToolsSection\n                name={\"draggingElement\"}\n                group={\"Editor\"}\n                views={\"raw\"}\n                data={{\n                    proximity,\n                    canAcceptComponent,\n                    targetInputNode\n                }}\n            />\n            {anyElementDragged ? (\n                <>\n                    {!isDragging && isFirst && (\n                        <DropLine\n                            label={elementLabel}\n                            top={previewBox.top}\n                            left={previewBox.left}\n                            width={previewBox.width}\n                            visible={hoverBefore && canAcceptComponent}\n                            dimmed={false}\n                        />\n                    )}\n                    {!isDragging && (\n                        <DropLine\n                            label={elementLabel}\n                            top={previewBox.bottom - 2}\n                            left={previewBox.left}\n                            width={previewBox.width}\n                            visible={hoverAfter && canAcceptComponent}\n                            dimmed={false}\n                        />\n                    )}\n                </>\n            ) : null}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC3D,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,QAAQ;AACjB,SAASC,aAAa;AACtB,SAASC,oBAAoB;AAE7B,SAASC,2BAA2B;AACpC,SAASC,+BAA+B,QAAQ,6BAA6B;AAC7E,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE,SAASC,eAAe,QAAQ,mBAAmB;AAQnD,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,UAAU;EAAEC;AAA+B,CAAC,KAAK;EAC3F,MAAMC,iBAAiB,GAAGR,2BAA2B,CAACM,UAAU,CAACG,QAAQ,CAAC;EAC1E,MAAMC,YAAY,GAAGd,YAAY,CAACe,OAAO,IAAIA,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC;EAC/D,MAAMC,UAAU,GAAGH,YAAY,IAAIA,YAAY,CAACI,EAAE,KAAKR,UAAU,CAACQ,EAAE;;EAEpE;EACA;EACA,MAAMC,eAAe,GAAGpB,MAAM,CAACe,YAAY,CAAC;EAC5CK,eAAe,CAACC,OAAO,GAAGN,YAAY;EACtC,MAAMO,oBAAoB,GAAGtB,MAAM,CAACa,iBAAiB,CAAC;EACtDS,oBAAoB,CAACD,OAAO,GAAGR,iBAAiB;EAEhD,MAAMU,SAAS,GAAGzB,WAAW,CAAC,MAAM;IAChC,MAAM0B,IAAI,GAAGJ,eAAe,CAACC,OAAO;;IAEpC;IACA,IAAI,CAACG,IAAI,EAAE;MACP,OAAO,IAAI;IACf;IAEA,MAAMC,QAAQ,GAAGH,oBAAoB,CAACD,OAAO;IAC7C,MAAMK,SAAS,GAAGpB,+BAA+B,CAACqB,OAAO,CAACF,QAAQ,EAAEG,MAAM,IAAI,EAAE,CAAC;IACjF,MAAMC,UAAU,GAAGtB,mBAAmB,CAACG,SAAS,CAACoB,UAAU,EAAEJ,SAAS,CAAC;IAEvE,IAAI,CAACG,UAAU,EAAE;MACb,OAAO,KAAK;IAChB;IAEA,IAAIA,UAAU,CAACE,IAAI,KAAK,MAAM,EAAE;MAC5B,MAAMC,SAAS,GAAGH,UAAU,CAACI,KAAkB;MAC/C,MAAMC,qBAAqB,GAAGF,SAAS,CAACG,UAAU;MAClD,IAAID,qBAAqB,IAAIA,qBAAqB,CAACE,MAAM,GAAG,CAAC,EAAE;QAC3D,OAAOF,qBAAqB,CAACG,QAAQ,CAACb,IAAI,CAACc,aAAa,CAAC;MAC7D;IACJ;IAEA,OAAO,IAAI;EACf,CAAC,EAAE,CAAC5B,SAAS,CAACoB,UAAU,CAAC,CAAC;EAE1B,MAAM;IAAES;EAAU,CAAC,GAAGnC,oBAAoB,CAAC;IACvCe,EAAE,EAAER,UAAU,CAACQ,EAAE;IACjBqB,GAAG,EAAE9B,SAAS;IACda;EACJ,CAAC,CAAC;EAEF,MAAMkB,iBAAiB,GAAGtC,aAAa,CAAC,CAAC;EACzC,MAAMuC,WAAW,GAAGH,SAAS,EAAEI,QAAQ,KAAK,CAAC;EAC7C,MAAMC,UAAU,GAAGL,SAAS,EAAEI,QAAQ,KAAK,CAAC;EAC5C,MAAME,YAAY,GAAGhC,iBAAiB,EAAEiC,KAAK,IAAIjC,iBAAiB,EAAEkC,IAAI,IAAI,EAAE;EAE9E,MAAMC,eAAe,GAAGjD,OAAO,CAAC,MAAM;IAClC,IAAI,CAACwC,SAAS,EAAEC,GAAG,CAACV,UAAU,EAAE;MAC5B,OAAOmB,SAAS;IACpB;IAEA,MAAMvB,SAAS,GAAGpB,+BAA+B,CAACqB,OAAO,CAACd,iBAAiB,EAAEe,MAAM,IAAI,EAAE,CAAC;IAC1F,OAAOrB,mBAAmB,CAACgC,SAAS,EAAEC,GAAG,CAACV,UAAU,EAAEJ,SAAS,CAAC;EACpE,CAAC,EAAE,CAACa,SAAS,EAAEC,GAAG,CAACV,UAAU,CAAC,CAAC;;EAE/B;EACA,IAAIoB,kBAAkB,GAAG,CAAC,CAACF,eAAe;EAC1C,IAAIjC,YAAY,IAAIiC,eAAe,IAAIA,eAAe,CAACjB,IAAI,KAAK,MAAM,EAAE;IACpE,MAAMC,SAAS,GAAGgB,eAAe,CAACf,KAAkB;IACpD,MAAMC,qBAAqB,GAAGF,SAAS,CAACG,UAAU;IAClD,IAAID,qBAAqB,IAAIA,qBAAqB,CAACE,MAAM,GAAG,CAAC,EAAE;MAC3Dc,kBAAkB,GAAGhB,qBAAqB,CAACG,QAAQ,CAACtB,YAAY,EAAEuB,aAAa,CAAC;IACpF;EACJ;EAEA,oBACIzC,KAAA,CAAAsD,aAAA,CAAAtD,KAAA,CAAAuD,QAAA,qBACIvD,KAAA,CAAAsD,aAAA,CAAC3C,eAAe;IACZuC,IAAI,EAAE,iBAAkB;IACxBM,KAAK,EAAE,QAAS;IAChBC,KAAK,EAAE,KAAM;IACbC,IAAI,EAAE;MACFhB,SAAS;MACTW,kBAAkB;MAClBF;IACJ;EAAE,CACL,CAAC,EACDP,iBAAiB,gBACd5C,KAAA,CAAAsD,aAAA,CAAAtD,KAAA,CAAAuD,QAAA,QACK,CAAClC,UAAU,IAAIN,OAAO,iBACnBf,KAAA,CAAAsD,aAAA,CAACjD,QAAQ;IACL4C,KAAK,EAAED,YAAa;IACpBW,GAAG,EAAE7C,UAAU,CAAC6C,GAAI;IACpBC,IAAI,EAAE9C,UAAU,CAAC8C,IAAK;IACtBC,KAAK,EAAE/C,UAAU,CAAC+C,KAAM;IACxBC,OAAO,EAAEjB,WAAW,IAAIQ,kBAAmB;IAC3CU,MAAM,EAAE;EAAM,CACjB,CACJ,EACA,CAAC1C,UAAU,iBACRrB,KAAA,CAAAsD,aAAA,CAACjD,QAAQ;IACL4C,KAAK,EAAED,YAAa;IACpBW,GAAG,EAAE7C,UAAU,CAACkD,MAAM,GAAG,CAAE;IAC3BJ,IAAI,EAAE9C,UAAU,CAAC8C,IAAK;IACtBC,KAAK,EAAE/C,UAAU,CAAC+C,KAAM;IACxBC,OAAO,EAAEf,UAAU,IAAIM,kBAAmB;IAC1CU,MAAM,EAAE;EAAM,CACjB,CAEP,CAAC,GACH,IACN,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -1,11 +1,2 @@
 import React from "react";
-import type { Box } from "../Box.js";
-interface ElementOverlayProps {
-    elementId: string;
-    isSelected: boolean;
-    isHighlighted: boolean;
-    previewBox: Box;
-    editorBox: Box;
-}
-export declare const ElementOverlay: React.MemoExoticComponent<({ previewBox, elementId, isSelected, isHighlighted }: ElementOverlayProps) => React.JSX.Element | null>;
-export {};
+export declare const ElementOverlay: React.MemoExoticComponent<() => React.JSX.Element | null>;

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

@@ -4,16 +4,17 @@ import { useDocumentEditor } from "../../../../../DocumentEditor/index.js";
 import { $highlightElement, $selectElement } from "../../../../../editorSdk/utils/index.js";
 import { Draggable } from "../../../../components/Draggable.js";
 import { useIsDragging } from "../useIsDragging.js";
-import { useElementComponentManifest } from "../useElementComponentManifest.js";
 import { useStyles } from "../../../Sidebar/StyleSettings/useStyles.js";
-export const ElementOverlay = /*#__PURE__*/React.memo(({
-  previewBox,
-  elementId,
-  isSelected,
-  isHighlighted
-}) => {
+import { useElementOverlay } from "./ElementOverlayProvider.js";
+export const ElementOverlay = /*#__PURE__*/React.memo(() => {
   const editor = useDocumentEditor();
-  const componentManifest = useElementComponentManifest(previewBox.id);
+  const {
+    elementId,
+    isSelected,
+    isHighlighted,
+    componentManifest,
+    box: previewBox
+  } = useElementOverlay();
   const onClick = useCallback(event => {
     event.stopPropagation();
     $selectElement(editor, elementId);
@@ -23,6 +24,10 @@ export const ElementOverlay = /*#__PURE__*/React.memo(({
     $highlightElement(editor, elementId);
   }, []);
   const unsetHighlighted = useCallback(event => {
+    const relatedTarget = event.relatedTarget;
+    if (relatedTarget && typeof relatedTarget.closest === "function" && relatedTarget.closest('[data-role="element-overlay"]')) {
+      return;
+    }
     event.stopPropagation();
     $highlightElement(editor, null);
   }, []);