@webiny/app-website-builder 6.0.0-alpha.4 → 6.0.0-rc.0

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","visible","dimmed","height"],"sources":["ElementDropLines.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useDragLayer } from \"react-dnd\";\nimport { DropLine } from \"./DropLine\";\nimport { useIsDragging } from \"../useIsDragging\";\nimport { useProximityDropzone } from \"../useProximityDropzone\";\nimport type { Box } from \"../Box\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest\";\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    isHighlighted: 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 = true;\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={0}\n                    visible={hoverBefore && canAcceptComponent}\n                    dimmed={false}\n                />\n            )}\n            {!isDragging && (\n                <DropLine\n                    label={elementLabel}\n                    top={previewBox?.height - 2}\n                    visible={hoverAfter && canAcceptComponent}\n                    dimmed={false}\n                />\n            )}\n        </>\n    ) : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,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;AAUjE,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,UAAU;EAAEC;AAA+B,CAAC,KAAK;EAC3F,MAAMC,iBAAiB,GAAGP,2BAA2B,CAACK,UAAU,CAACG,QAAQ,CAAC;EAC1E,MAAMC,YAAY,GAAGb,YAAY,CAACc,OAAO,IAAIA,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC;EAC/D,MAAMC,UAAU,GAAGH,YAAY,IAAIA,YAAY,CAACI,EAAE,KAAKR,UAAU,CAACQ,EAAE;EAEpE,MAAM;IAAEC;EAAU,CAAC,GAAGf,oBAAoB,CAAC;IACvCc,EAAE,EAAER,UAAU,CAACQ,EAAE;IACjBE,GAAG,EAAEX;EACT,CAAC,CAAC;EAEF,MAAMY,iBAAiB,GAAGlB,aAAa,CAAC,CAAC;EACzC,MAAMmB,WAAW,GAAGH,SAAS,EAAEI,QAAQ,KAAK,CAAC;EAC7C,MAAMC,UAAU,GAAGL,SAAS,EAAEI,QAAQ,KAAK,CAAC;EAC5C,MAAME,YAAY,GAAGb,iBAAiB,EAAEc,KAAK,IAAId,iBAAiB,EAAEe,IAAI,IAAI,EAAE;EAE9E,MAAMC,eAAe,GAAG5B,OAAO,CAAC,MAAM;IAClC,IAAI,CAACmB,SAAS,EAAEC,GAAG,CAACS,UAAU,EAAE;MAC5B,OAAOC,SAAS;IACpB;IAEA,MAAMC,SAAS,GAAGzB,+BAA+B,CAAC0B,OAAO,CAACpB,iBAAiB,EAAEqB,MAAM,IAAI,EAAE,CAAC;IAC1F,OAAO1B,mBAAmB,CAACY,SAAS,EAAEC,GAAG,CAACS,UAAU,EAAEE,SAAS,CAAC;EACpE,CAAC,EAAE,CAACZ,SAAS,EAAEC,GAAG,CAACS,UAAU,CAAC,CAAC;;EAE/B;EACA,IAAIK,kBAAkB,GAAG,IAAI;EAC7B,IAAIpB,YAAY,IAAIc,eAAe,IAAIA,eAAe,CAACO,IAAI,KAAK,MAAM,EAAE;IACpE,MAAMC,SAAS,GAAGR,eAAe,CAACS,KAAkB;IACpD,MAAMC,qBAAqB,GAAGF,SAAS,CAACG,UAAU;IAClD,IAAID,qBAAqB,IAAIA,qBAAqB,CAACE,MAAM,GAAG,CAAC,EAAE;MAC3DN,kBAAkB,GAAGI,qBAAqB,CAACG,QAAQ,CAAC3B,YAAY,EAAE4B,aAAa,CAAC;IACpF;EACJ;EAEA,OAAOrB,iBAAiB,gBACpBtB,KAAA,CAAA4C,aAAA,CAAA5C,KAAA,CAAA6C,QAAA,QACK,CAAC3B,UAAU,IAAIN,OAAO,iBACnBZ,KAAA,CAAA4C,aAAA,CAACzC,QAAQ;IACLwB,KAAK,EAAED,YAAa;IACpBoB,GAAG,EAAE,CAAE;IACPC,OAAO,EAAExB,WAAW,IAAIY,kBAAmB;IAC3Ca,MAAM,EAAE;EAAM,CACjB,CACJ,EACA,CAAC9B,UAAU,iBACRlB,KAAA,CAAA4C,aAAA,CAACzC,QAAQ;IACLwB,KAAK,EAAED,YAAa;IACpBoB,GAAG,EAAEnC,UAAU,EAAEsC,MAAM,GAAG,CAAE;IAC5BF,OAAO,EAAEtB,UAAU,IAAIU,kBAAmB;IAC1Ca,MAAM,EAAE;EAAM,CACjB,CAEP,CAAC,GACH,IAAI;AACZ,CAAC","ignoreList":[]}
+{"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":[]}

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

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

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

@@ -1,17 +1,16 @@
 import React, { useCallback } from "react";
 import { cn } from "@webiny/admin-ui";
-import { useDocumentEditor } from "../../../../../DocumentEditor";
-import { $selectElement } from "../../../../../editorSdk/utils";
-import { Draggable } from "../../../../components/Draggable";
-import { useIsDragging } from "../useIsDragging";
-import { useElementComponentManifest } from "../useElementComponentManifest";
-import { useStyles } from "../../../Sidebar/StyleSettings/useStyles";
+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,
-  children
+  isHighlighted
 }) => {
   const editor = useDocumentEditor();
   const componentManifest = useElementComponentManifest(previewBox.id);
@@ -19,14 +18,21 @@ export const ElementOverlay = /*#__PURE__*/React.memo(({
     event.stopPropagation();
     $selectElement(editor, elementId);
   }, []);
+  const setHighlighted = useCallback(event => {
+    event.stopPropagation();
+    $highlightElement(editor, elementId);
+  }, []);
+  const unsetHighlighted = useCallback(event => {
+    event.stopPropagation();
+    $highlightElement(editor, null);
+  }, []);
   const dnd = useIsDragging();
   if (!componentManifest) {
     return null;
   }
-  const pointerEvents = isSelected || isHighlighted ? "auto" : "none";
+  const pointerEvents = "auto";
   const componentName = componentManifest.label ?? componentManifest.name;
   const boxState = isSelected ? "active" : isHighlighted && !dnd ? "hover" : null;
-  const isVisible = isHighlighted && !dnd || isSelected;
   return /*#__PURE__*/React.createElement(Draggable, {
     type: "ELEMENT",
     item: {
@@ -37,47 +43,47 @@ export const ElementOverlay = /*#__PURE__*/React.memo(({
   }, ({
     isDragging,
     dragRef
-  }) => dragRef(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-absolute wby-box-border wby-text-right", "data-[state=hover]:wby-border-md data-[state=hover]:wby-border-success-default", "data-[state=active]:wby-border-md data-[state=active]:wby-border-accent-default"),
-    onClick: onClick,
-    "data-state": boxState,
+  }) => dragRef(/*#__PURE__*/React.createElement("div", {
     "data-element-id": elementId,
-    "data-role": "element-overlay",
-    "data-depth": previewBox.depth,
+    onMouseEnter: setHighlighted,
+    onMouseLeave: unsetHighlighted,
     style: {
+      position: "absolute",
+      pointerEvents,
       zIndex: 100 + previewBox.depth,
       top: previewBox.top,
       left: previewBox.left,
       width: previewBox.width,
       height: previewBox.height,
-      pointerEvents
+      opacity: isDragging ? 0.7 : 1
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn("absolute box-border text-right top-0 left-0 w-full h-full", "data-[state=hover]:border-md data-[state=hover]:border-success-default", "data-[state=active]:border-md data-[state=active]:border-accent-default"),
+    onClick: onClick,
+    "data-state": boxState,
+    "data-element-id": elementId,
+    "data-role": "element-overlay",
+    "data-depth": previewBox.depth
   }, isSelected ? /*#__PURE__*/React.createElement(AllMarginStripes, {
     elementId: elementId,
     previewBox: previewBox
-  }) : null, children), /*#__PURE__*/React.createElement("div", {
+  }) : null), /*#__PURE__*/React.createElement("div", {
     "data-role": "opacity-overlay",
+    className: "pointer-events-none absolute top-0 left-0 bg-white",
     style: {
-      position: "absolute",
       zIndex: 100 + previewBox.depth,
-      top: previewBox.top,
-      left: previewBox.left,
       width: previewBox.width,
       height: previewBox.height,
-      backgroundColor: "white",
       opacity: isDragging ? 0.7 : 0
     }
   }), /*#__PURE__*/React.createElement("div", {
     "data-role": "element-overlay-label",
     "data-label-for": previewBox.id,
-    "data-state": boxState,
-    className: cn("wby-absolute wby-text-sm wby-text-neutral-light wby-p-xs", "data-[state=hover]:wby-bg-success-default", "data-[state=active]:wby-bg-primary-default"),
+    "data-state": isDragging ? "dragging" : boxState,
+    onClick: onClick,
+    className: cn("absolute text-sm text-neutral-light p-xs opacity-0 pointer-events-auto", "data-[state=hover]:bg-success data-[state=hover]:opacity-100", "data-[state=active]:bg-primary data-[state=active]:opacity-100", "data-[state=dragging]:opacity-30"),
     style: {
-      pointerEvents: "auto",
-      zIndex: 100 + previewBox.depth,
-      top: previewBox.top - 24,
-      left: previewBox.left,
-      opacity: isDragging ? 0.3 : isVisible ? 1 : 0
+      top: -24
     }
   }, componentName))));
 });

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","cn","useDocumentEditor","$selectElement","Draggable","useIsDragging","useElementComponentManifest","useStyles","ElementOverlay","memo","previewBox","elementId","isSelected","isHighlighted","children","editor","componentManifest","id","onClick","event","stopPropagation","dnd","pointerEvents","componentName","label","name","boxState","isVisible","createElement","type","item","canDrag","isDragging","dragRef","className","depth","style","zIndex","top","left","width","height","AllMarginStripes","position","backgroundColor","opacity","displayName","borderWidth","styles","marginTop","marginBottom","marginLeft","marginRight","Fragment","MarginStripes","backgroundImage","backgroundSize"],"sources":["ElementOverlay.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport type { Box } from \"../Box\";\nimport { $selectElement } from \"~/editorSdk/utils\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\n\ninterface ElementOverlayProps {\n    elementId: string;\n    isSelected: boolean;\n    isHighlighted: boolean;\n    previewBox: Box;\n    editorBox: Box;\n    children: React.ReactNode;\n}\n\nexport const ElementOverlay = React.memo(\n    ({ previewBox, elementId, isSelected, isHighlighted, children }: ElementOverlayProps) => {\n        const editor = useDocumentEditor();\n        const componentManifest = useElementComponentManifest(previewBox.id);\n\n        const onClick = useCallback((event: React.MouseEvent) => {\n            event.stopPropagation();\n            $selectElement(editor, elementId);\n        }, []);\n\n        const dnd = useIsDragging();\n\n        if (!componentManifest) {\n            return null;\n        }\n\n        const pointerEvents = isSelected || isHighlighted ? \"auto\" : \"none\";\n        const componentName = componentManifest.label ?? componentManifest.name;\n        const boxState = isSelected ? \"active\" : isHighlighted && !dnd ? \"hover\" : null;\n        const isVisible = (isHighlighted && !dnd) || isSelected;\n\n        return (\n            <Draggable\n                type=\"ELEMENT\"\n                item={{ id: elementId, componentName: componentManifest.name }}\n                canDrag={componentManifest.canDrag !== false}\n            >\n                {({ isDragging, dragRef }) =>\n                    dragRef(\n                        <div>\n                            <div\n                                className={cn(\n                                    \"wby-absolute wby-box-border wby-text-right\",\n                                    \"data-[state=hover]:wby-border-md data-[state=hover]:wby-border-success-default\",\n                                    \"data-[state=active]:wby-border-md data-[state=active]:wby-border-accent-default\"\n                                )}\n                                onClick={onClick}\n                                data-state={boxState}\n                                data-element-id={elementId}\n                                data-role={\"element-overlay\"}\n                                data-depth={previewBox.depth}\n                                style={{\n                                    zIndex: 100 + previewBox.depth,\n                                    top: previewBox.top,\n                                    left: previewBox.left,\n                                    width: previewBox.width,\n                                    height: previewBox.height,\n                                    pointerEvents\n                                }}\n                            >\n                                {isSelected ? (\n                                    <AllMarginStripes\n                                        elementId={elementId}\n                                        previewBox={previewBox}\n                                    />\n                                ) : null}\n                                {children}\n                            </div>\n                            <div\n                                data-role={\"opacity-overlay\"}\n                                style={{\n                                    position: \"absolute\",\n                                    zIndex: 100 + previewBox.depth,\n                                    top: previewBox.top,\n                                    left: previewBox.left,\n                                    width: previewBox.width,\n                                    height: previewBox.height,\n                                    backgroundColor: \"white\",\n                                    opacity: isDragging ? 0.7 : 0\n                                }}\n                            ></div>\n                            <div\n                                data-role={\"element-overlay-label\"}\n                                data-label-for={previewBox.id}\n                                data-state={boxState}\n                                className={cn(\n                                    \"wby-absolute wby-text-sm wby-text-neutral-light wby-p-xs\",\n                                    \"data-[state=hover]:wby-bg-success-default\",\n                                    \"data-[state=active]:wby-bg-primary-default\"\n                                )}\n                                style={{\n                                    pointerEvents: \"auto\",\n                                    zIndex: 100 + previewBox.depth,\n                                    top: previewBox.top - 24,\n                                    left: previewBox.left,\n                                    opacity: isDragging ? 0.3 : isVisible ? 1 : 0\n                                }}\n                            >\n                                {componentName}\n                            </div>\n                        </div>\n                    )\n                }\n            </Draggable>\n        );\n    }\n);\n\nElementOverlay.displayName = \"ElementOverlay\";\n\ninterface AllMarginStripesProps {\n    elementId: string;\n    previewBox: Box;\n}\n\nconst borderWidth = \"var(--border-width-md)\";\n\nconst AllMarginStripes = ({ elementId, previewBox }: AllMarginStripesProps) => {\n    const { styles } = useStyles(elementId);\n    const { marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0 } = styles;\n\n    return (\n        <>\n            {marginTop ? (\n                <MarginStripes\n                    top={`calc(0px - ${marginTop} - ${borderWidth})`}\n                    left={`calc(0px - ${borderWidth})`}\n                    height={marginTop}\n                    width={`${previewBox.width}px`}\n                />\n            ) : null}\n            {marginRight ? (\n                <MarginStripes\n                    top={`calc(0px - ${borderWidth})`}\n                    left={`calc(${previewBox.width}px - ${borderWidth})`}\n                    height={`${previewBox.height}px`}\n                    width={marginRight}\n                />\n            ) : null}\n            {marginBottom ? (\n                <MarginStripes\n                    top={`calc(${previewBox.height}px - ${borderWidth})`}\n                    left={`calc(0px - ${borderWidth})`}\n                    height={marginBottom}\n                    width={`${previewBox.width}px`}\n                />\n            ) : null}\n            {marginLeft ? (\n                <MarginStripes\n                    top={`calc(0px - ${borderWidth})`}\n                    left={`calc(0px - ${marginLeft} - ${borderWidth})`}\n                    height={`${previewBox.height}px`}\n                    width={marginLeft}\n                />\n            ) : null}\n        </>\n    );\n};\n\ninterface MarginStripesProps {\n    top: string;\n    left: string;\n    height: string;\n    width: string;\n}\n\nconst MarginStripes = ({ top, left, height, width }: MarginStripesProps) => {\n    return (\n        <div\n            data-role={\"element-margin\"}\n            style={{\n                pointerEvents: \"none\",\n                position: \"absolute\",\n                top,\n                left,\n                height,\n                width,\n                backgroundImage:\n                    \"linear-gradient(135deg, #ecebff 18.75%, #ffffff 18.75%, #ffffff 50%, #ecebff 50%, #ecebff 68.75%, #ffffff 68.75%, #ffffff 100%)\",\n                backgroundSize: \"4.49px 4.49px\"\n            }}\n        ></div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","cn","useDocumentEditor","$highlightElement","$selectElement","Draggable","useIsDragging","useElementComponentManifest","useStyles","ElementOverlay","memo","previewBox","elementId","isSelected","isHighlighted","editor","componentManifest","id","onClick","event","stopPropagation","setHighlighted","unsetHighlighted","dnd","pointerEvents","componentName","label","name","boxState","createElement","type","item","canDrag","isDragging","dragRef","onMouseEnter","onMouseLeave","style","position","zIndex","depth","top","left","width","height","opacity","className","AllMarginStripes","displayName","borderWidth","styles","marginTop","marginBottom","marginLeft","marginRight","Fragment","MarginStripes","backgroundImage","backgroundSize"],"sources":["ElementOverlay.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { Box } from \"../Box.js\";\nimport { $highlightElement, $selectElement } from \"~/editorSdk/utils/index.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\n\ninterface ElementOverlayProps {\n    elementId: string;\n    isSelected: boolean;\n    isHighlighted: boolean;\n    previewBox: Box;\n    editorBox: Box;\n}\n\nexport const ElementOverlay = React.memo(\n    ({ previewBox, elementId, isSelected, isHighlighted }: ElementOverlayProps) => {\n        const editor = useDocumentEditor();\n        const componentManifest = useElementComponentManifest(previewBox.id);\n\n        const onClick = useCallback((event: React.MouseEvent) => {\n            event.stopPropagation();\n            $selectElement(editor, elementId);\n        }, []);\n\n        const setHighlighted = useCallback((event: React.MouseEvent) => {\n            event.stopPropagation();\n            $highlightElement(editor, elementId);\n        }, []);\n\n        const unsetHighlighted = useCallback((event: React.MouseEvent) => {\n            event.stopPropagation();\n            $highlightElement(editor, null);\n        }, []);\n\n        const dnd = useIsDragging();\n\n        if (!componentManifest) {\n            return null;\n        }\n\n        const pointerEvents = \"auto\";\n        const componentName = componentManifest.label ?? componentManifest.name;\n        const boxState = isSelected ? \"active\" : isHighlighted && !dnd ? \"hover\" : null;\n\n        return (\n            <Draggable\n                type=\"ELEMENT\"\n                item={{ id: elementId, componentName: componentManifest.name }}\n                canDrag={componentManifest.canDrag !== false}\n            >\n                {({ isDragging, dragRef }) =>\n                    dragRef(\n                        <div\n                            data-element-id={elementId}\n                            onMouseEnter={setHighlighted}\n                            onMouseLeave={unsetHighlighted}\n                            style={{\n                                position: \"absolute\",\n                                pointerEvents,\n                                zIndex: 100 + previewBox.depth,\n                                top: previewBox.top,\n                                left: previewBox.left,\n                                width: previewBox.width,\n                                height: previewBox.height,\n                                opacity: isDragging ? 0.7 : 1\n                            }}\n                        >\n                            <div\n                                className={cn(\n                                    \"absolute box-border text-right top-0 left-0 w-full h-full\",\n                                    \"data-[state=hover]:border-md data-[state=hover]:border-success-default\",\n                                    \"data-[state=active]:border-md data-[state=active]:border-accent-default\"\n                                )}\n                                onClick={onClick}\n                                data-state={boxState}\n                                data-element-id={elementId}\n                                data-role={\"element-overlay\"}\n                                data-depth={previewBox.depth}\n                            >\n                                {isSelected ? (\n                                    <AllMarginStripes\n                                        elementId={elementId}\n                                        previewBox={previewBox}\n                                    />\n                                ) : null}\n                            </div>\n                            <div\n                                data-role={\"opacity-overlay\"}\n                                className={\"pointer-events-none absolute top-0 left-0 bg-white\"}\n                                style={{\n                                    zIndex: 100 + previewBox.depth,\n                                    width: previewBox.width,\n                                    height: previewBox.height,\n                                    opacity: isDragging ? 0.7 : 0\n                                }}\n                            ></div>\n                            <div\n                                data-role={\"element-overlay-label\"}\n                                data-label-for={previewBox.id}\n                                data-state={isDragging ? \"dragging\" : boxState}\n                                onClick={onClick}\n                                className={cn(\n                                    \"absolute text-sm text-neutral-light p-xs opacity-0 pointer-events-auto\",\n                                    \"data-[state=hover]:bg-success data-[state=hover]:opacity-100\",\n                                    \"data-[state=active]:bg-primary data-[state=active]:opacity-100\",\n                                    \"data-[state=dragging]:opacity-30\"\n                                )}\n                                style={{ top: -24 }}\n                            >\n                                {componentName}\n                            </div>\n                        </div>\n                    )\n                }\n            </Draggable>\n        );\n    }\n);\n\nElementOverlay.displayName = \"ElementOverlay\";\n\ninterface AllMarginStripesProps {\n    elementId: string;\n    previewBox: Box;\n}\n\nconst borderWidth = \"var(--border-width-md)\";\n\nconst AllMarginStripes = ({ elementId, previewBox }: AllMarginStripesProps) => {\n    const { styles } = useStyles(elementId);\n    const { marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0 } = styles;\n\n    return (\n        <>\n            {marginTop ? (\n                <MarginStripes\n                    top={`calc(0px - ${marginTop} - ${borderWidth})`}\n                    left={`calc(0px - ${borderWidth})`}\n                    height={marginTop}\n                    width={`${previewBox.width}px`}\n                />\n            ) : null}\n            {marginRight ? (\n                <MarginStripes\n                    top={`calc(0px - ${borderWidth})`}\n                    left={`calc(${previewBox.width}px - ${borderWidth})`}\n                    height={`${previewBox.height}px`}\n                    width={marginRight}\n                />\n            ) : null}\n            {marginBottom ? (\n                <MarginStripes\n                    top={`calc(${previewBox.height}px - ${borderWidth})`}\n                    left={`calc(0px - ${borderWidth})`}\n                    height={marginBottom}\n                    width={`${previewBox.width}px`}\n                />\n            ) : null}\n            {marginLeft ? (\n                <MarginStripes\n                    top={`calc(0px - ${borderWidth})`}\n                    left={`calc(0px - ${marginLeft} - ${borderWidth})`}\n                    height={`${previewBox.height}px`}\n                    width={marginLeft}\n                />\n            ) : null}\n        </>\n    );\n};\n\ninterface MarginStripesProps {\n    top: string;\n    left: string;\n    height: string;\n    width: string;\n}\n\nconst MarginStripes = ({ top, left, height, width }: MarginStripesProps) => {\n    return (\n        <div\n            data-role={\"element-margin\"}\n            style={{\n                pointerEvents: \"none\",\n                position: \"absolute\",\n                top,\n                left,\n                height,\n                width,\n                backgroundImage:\n                    \"linear-gradient(135deg, #ecebff 18.75%, #ffffff 18.75%, #ffffff 50%, #ecebff 50%, #ecebff 68.75%, #ffffff 68.75%, #ffffff 100%)\",\n                backgroundSize: \"4.49px 4.49px\"\n            }}\n        ></div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,18 +3,18 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import React, { Fragment, useCallback, useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { useDrop } from "react-dnd";
-import { usePreviewData } from "../../../../hooks/usePreviewData";
-import { useSelectFromEditor } from "../../../../hooks/useSelectFromEditor";
-import { ElementOverlay } from "./ElementOverlay";
-import { useIsDragging } from "../useIsDragging";
-import { useDocumentEditor } from "../../../../../DocumentEditor";
-import { ElementDropLines } from "./ElementDropLines";
-import { DropBox } from "./DropBox";
-import { useDropZoneManager } from "../DropZoneManagerProvider";
-import { mergeRefs } from "../mergeRefs";
-import { Commands } from "../../../..";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { findMatchingAstNode } from "@webiny/website-builder-sdk";
+import { usePreviewData } from "../../../../hooks/usePreviewData.js";
+import { useSelectFromEditor } from "../../../../hooks/useSelectFromEditor.js";
+import { ElementOverlay } from "./ElementOverlay.js";
+import { useIsDragging } from "../useIsDragging.js";
+import { useDocumentEditor } from "../../../../../DocumentEditor/index.js";
+import { ElementDropLines } from "./ElementDropLines.js";
+import { DropBox } from "./DropBox.js";
+import { useDropZoneManager } from "../DropZoneManagerProvider.js";
+import { mergeRefs } from "../mergeRefs.js";
+import { Commands } from "../../../../index.js";
 const OverlayContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1avjb810"
 } : {
@@ -25,17 +25,9 @@ const OverlayContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "p
   styles: "overflow:hidden;position:absolute;z-index:20"
 } : {
   name: "1bhccdb",
-  styles: "overflow:hidden;position:absolute;z-index:20",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRPdmVybGF5cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0J5QiIsImZpbGUiOiJFbGVtZW50T3ZlcmxheXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZyYWdtZW50LCB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCB7IHVzZURyb3AgfSBmcm9tIFwicmVhY3QtZG5kXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdXNlUHJldmlld0RhdGEgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVByZXZpZXdEYXRhXCI7XG5pbXBvcnQgeyB1c2VTZWxlY3RGcm9tRWRpdG9yIH0gZnJvbSBcIn4vQmFzZUVkaXRvci9ob29rcy91c2VTZWxlY3RGcm9tRWRpdG9yXCI7XG5pbXBvcnQgeyBFbGVtZW50T3ZlcmxheSB9IGZyb20gXCIuL0VsZW1lbnRPdmVybGF5XCI7XG5pbXBvcnQgdHlwZSB7IFByZXZpZXdWaWV3cG9ydEluZm8sIFNsb3RJbnB1dCB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcbmltcG9ydCB7IHVzZUlzRHJhZ2dpbmcgfSBmcm9tIFwiLi4vdXNlSXNEcmFnZ2luZ1wiO1xuaW1wb3J0IHR5cGUgeyBCb3ggfSBmcm9tIFwiLi4vQm94XCI7XG5pbXBvcnQgdHlwZSB7IERyb3BFdmVudCB9IGZyb20gXCIuLi91c2VQcm94aW1pdHlEcm9wem9uZVwiO1xuaW1wb3J0IHsgdXNlRG9jdW1lbnRFZGl0b3IgfSBmcm9tIFwifi9Eb2N1bWVudEVkaXRvclwiO1xuaW1wb3J0IHsgRWxlbWVudERyb3BMaW5lcyB9IGZyb20gXCIuL0VsZW1lbnREcm9wTGluZXNcIjtcbmltcG9ydCB7IERyb3BCb3ggfSBmcm9tIFwiLi9Ecm9wQm94XCI7XG5pbXBvcnQgeyB1c2VEcm9wWm9uZU1hbmFnZXIgfSBmcm9tIFwiLi4vRHJvcFpvbmVNYW5hZ2VyUHJvdmlkZXJcIjtcbmltcG9ydCB7IG1lcmdlUmVmcyB9IGZyb20gXCIuLi9tZXJnZVJlZnNcIjtcbmltcG9ydCB7IENvbW1hbmRzIH0gZnJvbSBcIn4vQmFzZUVkaXRvclwiO1xuaW1wb3J0IHR5cGUgeyBFZGl0b3IgfSBmcm9tIFwifi9lZGl0b3JTZGsvRWRpdG9yXCI7XG5pbXBvcnQgeyBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyIH0gZnJvbSBcIkB3ZWJpbnkvd2Vic2l0ZS1idWlsZGVyLXNka1wiO1xuaW1wb3J0IHsgZmluZE1hdGNoaW5nQXN0Tm9kZSB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcblxuY29uc3QgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICB6SW5kZXg6IDIwXG59KTtcblxuY29uc3QgZmlsdGVyVmlzaWJsZUJveGVzID0gKHZpZXdwb3J0OiBQcmV2aWV3Vmlld3BvcnRJbmZvKSA9PiB7XG4gICAgcmV0dXJuIChib3g6IEJveCkgPT4ge1xuICAgICAgICBjb25zdCB2ZXJ0aWNhbGx5VmlzaWJsZSA9IGJveC50b3AgKyBib3guaGVpZ2h0ID4gMCAmJiBib3gudG9wIDwgdmlld3BvcnQuaGVpZ2h0O1xuXG4gICAgICAgIGNvbnN0IGhvcml6b250YWxseVZpc2libGUgPSBib3gubGVmdCArIGJveC53aWR0aCA+IDAgJiYgYm94LmxlZnQgPCB2aWV3cG9ydC53aWR0aDtcbiAgICAgICAgcmV0dXJuIHZlcnRpY2FsbHlWaXNpYmxlICYmIGhvcml6b250YWxseVZpc2libGU7XG4gICAgfTtcbn07XG5cbmNvbnN0IGZpbHRlckVsZW1lbnRzID0gKGJveDogQm94KSA9PiB7XG4gICAgcmV0dXJuIGJveC50eXBlID09PSBcImVsZW1lbnRcIiAmJiBib3guaWQgIT09IFwicm9vdFwiO1xufTtcblxuY29uc3QgZmlsdGVyU2xvdHMgPSAoYm94OiBCb3gpID0+IHtcbiAgICByZXR1cm4gYm94LnR5cGUgPT09IFwiZWxlbWVudC1zbG90XCI7XG59O1xuXG5leHBvcnQgY29uc3QgRWxlbWVudE92ZXJsYXlzID0gb2JzZXJ2ZXIoKCkgPT4ge1xuICAgIGNvbnN0IGRyb3B6b25lTWFuYWdlciA9IHVzZURyb3Bab25lTWFuYWdlcigpO1xuICAgIGNvbnN0IGVkaXRvciA9IHVzZURvY3VtZW50RWRpdG9yKCk7XG4gICAgY29uc3QgeyBib3hlcywgdmlld3BvcnQgfSA9IHVzZVByZXZpZXdEYXRhKCk7XG4gICAgY29uc3QgaXNEcmFnZ2luZyA9IHVzZUlzRHJhZ2dpbmcoKTtcbiAgICBjb25zdCB7IHNob3dPdmVybGF5cywgc2VsZWN0ZWRFbGVtZW50LCBoaWdobGlnaHRlZEVsZW1lbnQgfSA9IHVzZVNlbGVjdEZyb21FZGl0b3Ioc3RhdGUgPT4ge1xuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgc2hvd092ZXJsYXlzOiBzdGF0ZS5zaG93T3ZlcmxheXMsXG4gICAgICAgICAgICBzZWxlY3RlZEVsZW1lbnQ6IHN0YXRlLnNlbGVjdGVkRWxlbWVudCxcbiAgICAgICAgICAgIGhpZ2hsaWdodGVkRWxlbWVudDogc3RhdGUuaGlnaGxpZ2h0ZWRFbGVtZW50XG4gICAgICAgIH07XG4gICAgfSk7XG5cbiAgICBjb25zdCBkcm9wUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgICBjb25zdCBbLCBkcm9wXSA9IHVzZURyb3AoKCkgPT4gKHtcbiAgICAgICAgYWNjZXB0OiBcIkVMRU1FTlRcIixcbiAgICAgICAgZHJvcDogKGl0ZW06IGFueSkgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZHJvcHpvbmVNYW5hZ2VyLmdldExhc3RNYXRjaGVkUG9zaXRpb24oKTtcbiAgICAgICAgICAgIGlmICh0YXJnZXQpIHtcbiAgICAgICAgICAgICAgICBvbkRyb3AoeyBpdGVtLCB0YXJnZXQgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9KSk7XG5cbiAgICBkcm9wKGRyb3BSZWYpO1xuXG4gICAgY29uc3QgY2FuRHJvcENvbXBvbmVudEludG9UYXJnZXQgPSAoXG4gICAgICAgIGVkaXRvcjogRWRpdG9yLFxuICAgICAgICBjb21wb25lbnROYW1lOiBzdHJpbmcsXG4gICAgICAgIHRhcmdldDogRHJvcEV2ZW50W1widGFyZ2V0XCJdXG4gICAgKSA9PiB7XG4gICAgICAgIC8vIERldGVybWluZSBjb21wb25lbnQgbWFuaWZlc3QgZnJvbSBkcm9wIHRhcmdldC5cbiAgICAgICAgY29uc3QgZG9jdW1lbnQgPSBlZGl0b3IuZ2V0RG9jdW1lbnRTdGF0ZSgpLnJlYWQoKTtcbiAgICAgICAgY29uc3QgeyBjb21wb25lbnQgfSA9IGRvY3VtZW50LmVsZW1lbnRzW3RhcmdldC5wYXJlbnRJZF07XG4gICAgICAgIGNvbnN0IGNvbXBvbmVudE1hbmlmZXN0ID0gZWRpdG9yLmdldEVkaXRvclN0YXRlKCkucmVhZCgpLmNvbXBvbmVudHNbY29tcG9uZW50Lm5hbWVdO1xuXG4gICAgICAgIC8vIEZpbmQgdGFyZ2V0IGlucHV0IHVzaW5nIEFTVC5cbiAgICAgICAgY29uc3QgaW5wdXRzQXN0ID0gQ29tcG9uZW50TWFuaWZlc3RUb0FzdENvbnZlcnRlci5jb252ZXJ0KGNvbXBvbmVudE1hbmlmZXN0LmlucHV0cyA/PyBbXSk7XG4gICAgICAgIGNvbnN0IHRhcmdldElucHV0Tm9kZSA9IGZpbmRNYXRjaGluZ0FzdE5vZGUodGFyZ2V0LnNsb3QsIGlucHV0c0FzdCk7XG5cbiAgICAgICAgbGV0IGNhbkFjY2VwdENvbXBvbmVudCA9IHRhcmdldElucHV0Tm9kZSAhPT0gdW5kZWZpbmVkO1xuICAgICAgICBpZiAodGFyZ2V0SW5wdXROb2RlKSB7XG4gICAgICAgICAgICBjb25zdCBzbG90SW5wdXQgPSB0YXJnZXRJbnB1dE5vZGUuaW5wdXQgYXMgU2xvdElucHV0O1xuICAgICAgICAgICAgY29uc3Qgd2hpdGVsaXN0ZWRDb21wb25lbnRzID0gc2xvdElucHV0LmNvbXBvbmVudHM7XG4gICAgICAgICAgICBpZiAod2hpdGVsaXN0ZWRDb21wb25lbnRzICYmIHdoaXRlbGlzdGVkQ29tcG9uZW50cy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICAgICAgY2FuQWNjZXB0Q29tcG9uZW50ID0gd2hpdGVsaXN0ZWRDb21wb25lbnRzLmluY2x1ZGVzKGNvbXBvbmVudE5hbWUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHJldHVybiBjYW5BY2NlcHRDb21wb25lbnQ7XG4gICAgfTtcblxuICAgIGNvbnN0IG9uRHJvcCA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoeyBpdGVtLCB0YXJnZXQgfTogRHJvcEV2ZW50KSA9PiB7XG4gICAgICAgICAgICBpZiAoIWNhbkRyb3BDb21wb25lbnRJbnRvVGFyZ2V0KGVkaXRvciwgaXRlbS5jb21wb25lbnROYW1lLCB0YXJnZXQpKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAoaXRlbS5pZCkge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIG1vdmluZyBhbiBleGlzdGluZyBlbGVtZW50LlxuICAgICAgICAgICAgICAgIGVkaXRvci5leGVjdXRlQ29tbWFuZChDb21tYW5kcy5Nb3ZlRWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgICBlbGVtZW50SWQ6IGl0ZW0uaWQsXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudElkOiB0YXJnZXQucGFyZW50SWQsXG4gICAgICAgICAgICAgICAgICAgIHNsb3Q6IHRhcmdldC5zbG90LFxuICAgICAgICAgICAgICAgICAgICBpbmRleDogdGFyZ2V0LmluZGV4XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIGNyZWF0aW5nIGEgbmV3IGVsZW1lbnQuXG4gICAgICAgICAgICAgICAgZWRpdG9yLmV4ZWN1dGVDb21tYW5kKENvbW1hbmRzLkNyZWF0ZUVsZW1lbnQsIHtcbiAgICAgICAgICAgICAgICAgICAgY29tcG9uZW50TmFtZTogaXRlbS5jb21wb25lbnROYW1lLFxuICAgICAgICAgICAgICAgICAgICBwYXJlbnRJZDogdGFyZ2V0LnBhcmVudElkLFxuICAgICAgICAgICAgICAgICAgICBzbG90OiB0YXJnZXQuc2xvdCxcbiAgICAgICAgICAgICAgICAgICAgaW5kZXg6IHRhcmdldC5pbmRleFxuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbZWRpdG9yXVxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8T3ZlcmxheUNvbnRhaW5lclxuICAgICAgICAgICAgcmVmPXttZXJnZVJlZnMoZHJvcFJlZil9XG4gICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgIHdpZHRoOiBgJHt2aWV3cG9ydC53aWR0aH1weGAsXG4gICAgICAgICAgICAgICAgaGVpZ2h0OiBgJHt2aWV3cG9ydC5oZWlnaHR9cHhgLFxuICAgICAgICAgICAgICAgIGRpc3BsYXk6IHNob3dPdmVybGF5cyA/IFwiYmxvY2tcIiA6IFwibm9uZVwiLFxuICAgICAgICAgICAgICAgIHBvaW50ZXJFdmVudHM6IGlzRHJhZ2dpbmcgPyBcImF1dG9cIiA6IFwibm9uZVwiXG4gICAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAgICB7Ym94ZXMucHJldmlld1xuICAgICAgICAgICAgICAgIC5maWx0ZXIoZmlsdGVyRWxlbWVudHMpXG4gICAgICAgICAgICAgICAgLmZpbHRlcihmaWx0ZXJWaXNpYmxlQm94ZXModmlld3BvcnQpKVxuICAgICAgICAgICAgICAgIC5tYXAoYm94ID0+IChcbiAgICAgICAgICAgICAgICAgICAgPEZyYWdtZW50IGtleT17Ym94LmlkfT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxFbGVtZW50T3ZlcmxheVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZD17Ym94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzU2VsZWN0ZWQ9e3NlbGVjdGVkRWxlbWVudCA9PT0gYm94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzSGlnaGxpZ2h0ZWQ9e2hpZ2hsaWdodGVkRWxlbWVudCA9PT0gYm94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHByZXZpZXdCb3g9e2JveH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBlZGl0b3JCb3g9e2JveGVzLmVkaXRvci5nZXQoYm94LmlkKSF9XG4gICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEVsZW1lbnREcm9wTGluZXNcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzRmlyc3Q9e2JveC5wYXJlbnRJbmRleCA9PT0gMH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzSGlnaGxpZ2h0ZWQ9e2hpZ2hsaWdodGVkRWxlbWVudCA9PT0gYm94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWRpdG9yQm94PXtib3hlcy5lZGl0b3IuZ2V0KGJveC5pZCkhfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcHJldmlld0JveD17Ym94fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9FbGVtZW50T3ZlcmxheT5cbiAgICAgICAgICAgICAgICAgICAgPC9GcmFnbWVudD5cbiAgICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgIHtib3hlcy5wcmV2aWV3XG4gICAgICAgICAgICAgICAgLmZpbHRlcihmaWx0ZXJTbG90cylcbiAgICAgICAgICAgICAgICAuZmlsdGVyKGZpbHRlclZpc2libGVCb3hlcyh2aWV3cG9ydCkpXG4gICAgICAgICAgICAgICAgLm1hcChib3ggPT4gKFxuICAgICAgICAgICAgICAgICAgICA8RHJvcEJveCBrZXk9e2JveC5pZH0gYm94PXtib3h9IG9uRHJvcD17b25Ecm9wfSAvPlxuICAgICAgICAgICAgICAgICkpfVxuICAgICAgICA8L092ZXJsYXlDb250YWluZXI+XG4gICAgKTtcbn0pO1xuIl19 */",
+  styles: "overflow:hidden;position:absolute;z-index:20/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRPdmVybGF5cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJ5QiIsImZpbGUiOiJFbGVtZW50T3ZlcmxheXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZyYWdtZW50LCB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCB7IHVzZURyb3AgfSBmcm9tIFwicmVhY3QtZG5kXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHR5cGUgeyBTbG90SW5wdXQgfSBmcm9tIFwiQHdlYmlueS93ZWJzaXRlLWJ1aWxkZXItc2RrXCI7XG5pbXBvcnQgeyBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyIH0gZnJvbSBcIkB3ZWJpbnkvd2Vic2l0ZS1idWlsZGVyLXNka1wiO1xuaW1wb3J0IHsgZmluZE1hdGNoaW5nQXN0Tm9kZSB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcblxuaW1wb3J0IHsgdXNlUHJldmlld0RhdGEgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVByZXZpZXdEYXRhLmpzXCI7XG5pbXBvcnQgeyB1c2VTZWxlY3RGcm9tRWRpdG9yIH0gZnJvbSBcIn4vQmFzZUVkaXRvci9ob29rcy91c2VTZWxlY3RGcm9tRWRpdG9yLmpzXCI7XG5pbXBvcnQgeyBFbGVtZW50T3ZlcmxheSB9IGZyb20gXCIuL0VsZW1lbnRPdmVybGF5LmpzXCI7XG5pbXBvcnQgeyB1c2VJc0RyYWdnaW5nIH0gZnJvbSBcIi4uL3VzZUlzRHJhZ2dpbmcuanNcIjtcbmltcG9ydCB0eXBlIHsgQm94IH0gZnJvbSBcIi4uL0JveC5qc1wiO1xuaW1wb3J0IHR5cGUgeyBEcm9wRXZlbnQgfSBmcm9tIFwiLi4vdXNlUHJveGltaXR5RHJvcHpvbmUuanNcIjtcbmltcG9ydCB7IHVzZURvY3VtZW50RWRpdG9yIH0gZnJvbSBcIn4vRG9jdW1lbnRFZGl0b3IvaW5kZXguanNcIjtcbmltcG9ydCB7IEVsZW1lbnREcm9wTGluZXMgfSBmcm9tIFwiLi9FbGVtZW50RHJvcExpbmVzLmpzXCI7XG5pbXBvcnQgeyBEcm9wQm94IH0gZnJvbSBcIi4vRHJvcEJveC5qc1wiO1xuaW1wb3J0IHsgdXNlRHJvcFpvbmVNYW5hZ2VyIH0gZnJvbSBcIi4uL0Ryb3Bab25lTWFuYWdlclByb3ZpZGVyLmpzXCI7XG5pbXBvcnQgeyBtZXJnZVJlZnMgfSBmcm9tIFwiLi4vbWVyZ2VSZWZzLmpzXCI7XG5pbXBvcnQgeyBDb21tYW5kcyB9IGZyb20gXCJ+L0Jhc2VFZGl0b3IvaW5kZXguanNcIjtcbmltcG9ydCB0eXBlIHsgRWRpdG9yIH0gZnJvbSBcIn4vZWRpdG9yU2RrL0VkaXRvci5qc1wiO1xuXG5jb25zdCBPdmVybGF5Q29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMjBcbn0pO1xuXG5jb25zdCBmaWx0ZXJFbGVtZW50cyA9IChib3g6IEJveCkgPT4ge1xuICAgIHJldHVybiBib3gudHlwZSA9PT0gXCJlbGVtZW50XCIgJiYgYm94LmlkICE9PSBcInJvb3RcIjtcbn07XG5cbmNvbnN0IGZpbHRlclNsb3RzID0gKGJveDogQm94KSA9PiB7XG4gICAgcmV0dXJuIGJveC50eXBlID09PSBcImVsZW1lbnQtc2xvdFwiO1xufTtcblxuZXhwb3J0IGNvbnN0IEVsZW1lbnRPdmVybGF5cyA9IG9ic2VydmVyKCgpID0+IHtcbiAgICBjb25zdCBkcm9wem9uZU1hbmFnZXIgPSB1c2VEcm9wWm9uZU1hbmFnZXIoKTtcbiAgICBjb25zdCBlZGl0b3IgPSB1c2VEb2N1bWVudEVkaXRvcigpO1xuICAgIGNvbnN0IHsgYm94ZXMgfSA9IHVzZVByZXZpZXdEYXRhKCk7XG4gICAgY29uc3QgaXNEcmFnZ2luZyA9IHVzZUlzRHJhZ2dpbmcoKTtcbiAgICBjb25zdCB7IHNlbGVjdGVkRWxlbWVudCwgaGlnaGxpZ2h0ZWRFbGVtZW50IH0gPSB1c2VTZWxlY3RGcm9tRWRpdG9yKHN0YXRlID0+IHtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICAgIHNlbGVjdGVkRWxlbWVudDogc3RhdGUuc2VsZWN0ZWRFbGVtZW50LFxuICAgICAgICAgICAgaGlnaGxpZ2h0ZWRFbGVtZW50OiBzdGF0ZS5oaWdobGlnaHRlZEVsZW1lbnRcbiAgICAgICAgfTtcbiAgICB9KTtcblxuICAgIGNvbnN0IGRyb3BSZWYgPSB1c2VSZWY8SFRNTEVsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICAgIGNvbnN0IFssIGRyb3BdID0gdXNlRHJvcCgoKSA9PiAoe1xuICAgICAgICBhY2NlcHQ6IFwiRUxFTUVOVFwiLFxuICAgICAgICBkcm9wOiAoaXRlbTogYW55KSA9PiB7XG4gICAgICAgICAgICBjb25zdCB0YXJnZXQgPSBkcm9wem9uZU1hbmFnZXIuZ2V0TGFzdE1hdGNoZWRQb3NpdGlvbigpO1xuICAgICAgICAgICAgaWYgKHRhcmdldCkge1xuICAgICAgICAgICAgICAgIG9uRHJvcCh7IGl0ZW0sIHRhcmdldCB9KTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH0pKTtcblxuICAgIGRyb3AoZHJvcFJlZik7XG5cbiAgICBjb25zdCBjYW5Ecm9wQ29tcG9uZW50SW50b1RhcmdldCA9IChcbiAgICAgICAgZWRpdG9yOiBFZGl0b3IsXG4gICAgICAgIGNvbXBvbmVudE5hbWU6IHN0cmluZyxcbiAgICAgICAgdGFyZ2V0OiBEcm9wRXZlbnRbXCJ0YXJnZXRcIl1cbiAgICApID0+IHtcbiAgICAgICAgLy8gRGV0ZXJtaW5lIGNvbXBvbmVudCBtYW5pZmVzdCBmcm9tIGRyb3AgdGFyZ2V0LlxuICAgICAgICBjb25zdCBkb2N1bWVudCA9IGVkaXRvci5nZXREb2N1bWVudFN0YXRlKCkucmVhZCgpO1xuICAgICAgICBjb25zdCB7IGNvbXBvbmVudCB9ID0gZG9jdW1lbnQuZWxlbWVudHNbdGFyZ2V0LnBhcmVudElkXTtcbiAgICAgICAgY29uc3QgY29tcG9uZW50TWFuaWZlc3QgPSBlZGl0b3IuZ2V0RWRpdG9yU3RhdGUoKS5yZWFkKCkuY29tcG9uZW50c1tjb21wb25lbnQubmFtZV07XG5cbiAgICAgICAgLy8gRmluZCB0YXJnZXQgaW5wdXQgdXNpbmcgQVNULlxuICAgICAgICBjb25zdCBpbnB1dHNBc3QgPSBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyLmNvbnZlcnQoY29tcG9uZW50TWFuaWZlc3QuaW5wdXRzID8/IFtdKTtcbiAgICAgICAgY29uc3QgdGFyZ2V0SW5wdXROb2RlID0gZmluZE1hdGNoaW5nQXN0Tm9kZSh0YXJnZXQuc2xvdCwgaW5wdXRzQXN0KTtcblxuICAgICAgICBsZXQgY2FuQWNjZXB0Q29tcG9uZW50ID0gdGFyZ2V0SW5wdXROb2RlICE9PSB1bmRlZmluZWQ7XG4gICAgICAgIGlmICh0YXJnZXRJbnB1dE5vZGUpIHtcbiAgICAgICAgICAgIGNvbnN0IHNsb3RJbnB1dCA9IHRhcmdldElucHV0Tm9kZS5pbnB1dCBhcyBTbG90SW5wdXQ7XG4gICAgICAgICAgICBjb25zdCB3aGl0ZWxpc3RlZENvbXBvbmVudHMgPSBzbG90SW5wdXQuY29tcG9uZW50cztcbiAgICAgICAgICAgIGlmICh3aGl0ZWxpc3RlZENvbXBvbmVudHMgJiYgd2hpdGVsaXN0ZWRDb21wb25lbnRzLmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgICAgICBjYW5BY2NlcHRDb21wb25lbnQgPSB3aGl0ZWxpc3RlZENvbXBvbmVudHMuaW5jbHVkZXMoY29tcG9uZW50TmFtZSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIGNhbkFjY2VwdENvbXBvbmVudDtcbiAgICB9O1xuXG4gICAgY29uc3Qgb25Ecm9wID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICh7IGl0ZW0sIHRhcmdldCB9OiBEcm9wRXZlbnQpID0+IHtcbiAgICAgICAgICAgIGlmICghY2FuRHJvcENvbXBvbmVudEludG9UYXJnZXQoZWRpdG9yLCBpdGVtLmNvbXBvbmVudE5hbWUsIHRhcmdldCkpIHtcbiAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIGlmIChpdGVtLmlkKSB7XG4gICAgICAgICAgICAgICAgLy8gV2UncmUgbW92aW5nIGFuIGV4aXN0aW5nIGVsZW1lbnQuXG4gICAgICAgICAgICAgICAgZWRpdG9yLmV4ZWN1dGVDb21tYW5kKENvbW1hbmRzLk1vdmVFbGVtZW50LCB7XG4gICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZDogaXRlbS5pZCxcbiAgICAgICAgICAgICAgICAgICAgcGFyZW50SWQ6IHRhcmdldC5wYXJlbnRJZCxcbiAgICAgICAgICAgICAgICAgICAgc2xvdDogdGFyZ2V0LnNsb3QsXG4gICAgICAgICAgICAgICAgICAgIGluZGV4OiB0YXJnZXQuaW5kZXhcbiAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgLy8gV2UncmUgY3JlYXRpbmcgYSBuZXcgZWxlbWVudC5cbiAgICAgICAgICAgICAgICBlZGl0b3IuZXhlY3V0ZUNvbW1hbmQoQ29tbWFuZHMuQ3JlYXRlRWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgICBjb21wb25lbnROYW1lOiBpdGVtLmNvbXBvbmVudE5hbWUsXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudElkOiB0YXJnZXQucGFyZW50SWQsXG4gICAgICAgICAgICAgICAgICAgIHNsb3Q6IHRhcmdldC5zbG90LFxuICAgICAgICAgICAgICAgICAgICBpbmRleDogdGFyZ2V0LmluZGV4XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIFtlZGl0b3JdXG4gICAgKTtcblxuICAgIGNvbnN0IHZpZXdwb3J0Q29udGFpbmVyOiBSZWFjdC5DU1NQcm9wZXJ0aWVzID0ge1xuICAgICAgICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogMCxcbiAgICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBpc0RyYWdnaW5nID8gXCJhdXRvXCIgOiBcIm5vbmVcIlxuICAgIH07XG5cbiAgICBjb25zdCBzbG90cyA9IGJveGVzLnByZXZpZXcuZmlsdGVyKGZpbHRlclNsb3RzKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxPdmVybGF5Q29udGFpbmVyIHJlZj17bWVyZ2VSZWZzKGRyb3BSZWYpfSBzdHlsZT17dmlld3BvcnRDb250YWluZXJ9PlxuICAgICAgICAgICAge2JveGVzLnByZXZpZXcuZmlsdGVyKGZpbHRlckVsZW1lbnRzKS5tYXAoYm94ID0+IChcbiAgICAgICAgICAgICAgICA8RnJhZ21lbnQga2V5PXtib3guaWR9PlxuICAgICAgICAgICAgICAgICAgICA8RWxlbWVudE92ZXJsYXlcbiAgICAgICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZD17Ym94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgaXNTZWxlY3RlZD17c2VsZWN0ZWRFbGVtZW50ID09PSBib3guaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICBpc0hpZ2hsaWdodGVkPXtoaWdobGlnaHRlZEVsZW1lbnQgPT09IGJveC5pZH1cbiAgICAgICAgICAgICAgICAgICAgICAgIHByZXZpZXdCb3g9e2JveH1cbiAgICAgICAgICAgICAgICAgICAgICAgIGVkaXRvckJveD17Ym94ZXMuZWRpdG9yLmdldChib3guaWQpIX1cbiAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgPEVsZW1lbnREcm9wTGluZXNcbiAgICAgICAgICAgICAgICAgICAgICAgIGlzRmlyc3Q9e2JveC5wYXJlbnRJbmRleCA9PT0gMH1cbiAgICAgICAgICAgICAgICAgICAgICAgIHByZXZpZXdCb3g9e2JveH1cbiAgICAgICAgICAgICAgICAgICAgICAgIGVkaXRvckJveD17Ym94ZXMuZWRpdG9yLmdldChib3guaWQpIX1cbiAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICA8L0ZyYWdtZW50PlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgICB7c2xvdHMubWFwKHNsb3QgPT4gKFxuICAgICAgICAgICAgICAgIDxEcm9wQm94IGtleT17c2xvdC5pZH0gYm94PXtzbG90fSBvbkRyb3A9e29uRHJvcH0gLz5cbiAgICAgICAgICAgICkpfVxuICAgICAgICA8L092ZXJsYXlDb250YWluZXI+XG4gICAgKTtcbn0pO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const filterVisibleBoxes = viewport => {
-  return box => {
-    const verticallyVisible = box.top + box.height > 0 && box.top < viewport.height;
-    const horizontallyVisible = box.left + box.width > 0 && box.left < viewport.width;
-    return verticallyVisible && horizontallyVisible;
-  };
-};
 const filterElements = box => {
   return box.type === "element" && box.id !== "root";
 };
@@ -46,17 +38,14 @@ export const ElementOverlays = observer(() => {
   const dropzoneManager = useDropZoneManager();
   const editor = useDocumentEditor();
   const {
-    boxes,
-    viewport
+    boxes
   } = usePreviewData();
   const isDragging = useIsDragging();
   const {
-    showOverlays,
     selectedElement,
     highlightedElement
   } = useSelectFromEditor(state => {
     return {
-      showOverlays: state.showOverlays,
       selectedElement: state.selectedElement,
       highlightedElement: state.highlightedElement
     };
@@ -121,15 +110,20 @@ export const ElementOverlays = observer(() => {
       });
     }
   }, [editor]);
+  const viewportContainer = {
+    display: "block",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: isDragging ? "auto" : "none"
+  };
+  const slots = boxes.preview.filter(filterSlots);
   return /*#__PURE__*/React.createElement(OverlayContainer, {
     ref: mergeRefs(dropRef),
-    style: {
-      width: `${viewport.width}px`,
-      height: `${viewport.height}px`,
-      display: showOverlays ? "block" : "none",
-      pointerEvents: isDragging ? "auto" : "none"
-    }
-  }, boxes.preview.filter(filterElements).filter(filterVisibleBoxes(viewport)).map(box => /*#__PURE__*/React.createElement(Fragment, {
+    style: viewportContainer
+  }, boxes.preview.filter(filterElements).map(box => /*#__PURE__*/React.createElement(Fragment, {
     key: box.id
   }, /*#__PURE__*/React.createElement(ElementOverlay, {
     elementId: box.id,
@@ -137,14 +131,13 @@ export const ElementOverlays = observer(() => {
     isHighlighted: highlightedElement === box.id,
     previewBox: box,
     editorBox: boxes.editor.get(box.id)
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementDropLines, {
+  }), /*#__PURE__*/React.createElement(ElementDropLines, {
     isFirst: box.parentIndex === 0,
-    isHighlighted: highlightedElement === box.id,
-    editorBox: boxes.editor.get(box.id),
-    previewBox: box
-  }))))), boxes.preview.filter(filterSlots).filter(filterVisibleBoxes(viewport)).map(box => /*#__PURE__*/React.createElement(DropBox, {
-    key: box.id,
-    box: box,
+    previewBox: box,
+    editorBox: boxes.editor.get(box.id)
+  }))), slots.map(slot => /*#__PURE__*/React.createElement(DropBox, {
+    key: slot.id,
+    box: slot,
     onDrop: onDrop
   })));
 });

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

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","useCallback","useRef","observer","useDrop","usePreviewData","useSelectFromEditor","ElementOverlay","useIsDragging","useDocumentEditor","ElementDropLines","DropBox","useDropZoneManager","mergeRefs","Commands","ComponentManifestToAstConverter","findMatchingAstNode","OverlayContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","filterVisibleBoxes","viewport","box","verticallyVisible","top","height","horizontallyVisible","left","width","filterElements","type","id","filterSlots","ElementOverlays","dropzoneManager","editor","boxes","isDragging","showOverlays","selectedElement","highlightedElement","state","dropRef","drop","accept","item","getLastMatchedPosition","onDrop","canDropComponentIntoTarget","componentName","document","getDocumentState","read","component","elements","parentId","componentManifest","getEditorState","components","inputsAst","convert","inputs","targetInputNode","slot","canAcceptComponent","undefined","slotInput","input","whitelistedComponents","length","includes","executeCommand","MoveElement","elementId","index","CreateElement","createElement","ref","style","display","pointerEvents","preview","filter","key","isSelected","isHighlighted","previewBox","editorBox","get","isFirst","parentIndex"],"sources":["ElementOverlays.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDrop } from \"react-dnd\";\nimport styled from \"@emotion/styled\";\n\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { ElementOverlay } from \"./ElementOverlay\";\nimport type { PreviewViewportInfo, SlotInput } from \"@webiny/website-builder-sdk\";\nimport { useIsDragging } from \"../useIsDragging\";\nimport type { Box } from \"../Box\";\nimport type { DropEvent } from \"../useProximityDropzone\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { ElementDropLines } from \"./ElementDropLines\";\nimport { DropBox } from \"./DropBox\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider\";\nimport { mergeRefs } from \"../mergeRefs\";\nimport { Commands } from \"~/BaseEditor\";\nimport type { Editor } from \"~/editorSdk/Editor\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\n\nconst OverlayContainer = styled(\"div\")({\n    overflow: \"hidden\",\n    position: \"absolute\",\n    zIndex: 20\n});\n\nconst filterVisibleBoxes = (viewport: PreviewViewportInfo) => {\n    return (box: Box) => {\n        const verticallyVisible = box.top + box.height > 0 && box.top < viewport.height;\n\n        const horizontallyVisible = box.left + box.width > 0 && box.left < viewport.width;\n        return verticallyVisible && horizontallyVisible;\n    };\n};\n\nconst filterElements = (box: Box) => {\n    return box.type === \"element\" && box.id !== \"root\";\n};\n\nconst filterSlots = (box: Box) => {\n    return box.type === \"element-slot\";\n};\n\nexport const ElementOverlays = observer(() => {\n    const dropzoneManager = useDropZoneManager();\n    const editor = useDocumentEditor();\n    const { boxes, viewport } = usePreviewData();\n    const isDragging = useIsDragging();\n    const { showOverlays, selectedElement, highlightedElement } = useSelectFromEditor(state => {\n        return {\n            showOverlays: state.showOverlays,\n            selectedElement: state.selectedElement,\n            highlightedElement: state.highlightedElement\n        };\n    });\n\n    const dropRef = useRef<HTMLElement | null>(null);\n\n    const [, drop] = useDrop(() => ({\n        accept: \"ELEMENT\",\n        drop: (item: any) => {\n            const target = dropzoneManager.getLastMatchedPosition();\n            if (target) {\n                onDrop({ item, target });\n            }\n        }\n    }));\n\n    drop(dropRef);\n\n    const canDropComponentIntoTarget = (\n        editor: Editor,\n        componentName: string,\n        target: DropEvent[\"target\"]\n    ) => {\n        // Determine component manifest from drop target.\n        const document = editor.getDocumentState().read();\n        const { component } = document.elements[target.parentId];\n        const componentManifest = editor.getEditorState().read().components[component.name];\n\n        // Find target input using AST.\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        const targetInputNode = findMatchingAstNode(target.slot, inputsAst);\n\n        let canAcceptComponent = targetInputNode !== undefined;\n        if (targetInputNode) {\n            const slotInput = targetInputNode.input as SlotInput;\n            const whitelistedComponents = slotInput.components;\n            if (whitelistedComponents && whitelistedComponents.length > 0) {\n                canAcceptComponent = whitelistedComponents.includes(componentName);\n            }\n        }\n        return canAcceptComponent;\n    };\n\n    const onDrop = useCallback(\n        ({ item, target }: DropEvent) => {\n            if (!canDropComponentIntoTarget(editor, item.componentName, target)) {\n                return;\n            }\n\n            if (item.id) {\n                // We're moving an existing element.\n                editor.executeCommand(Commands.MoveElement, {\n                    elementId: item.id,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            } else {\n                // We're creating a new element.\n                editor.executeCommand(Commands.CreateElement, {\n                    componentName: item.componentName,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            }\n        },\n        [editor]\n    );\n\n    return (\n        <OverlayContainer\n            ref={mergeRefs(dropRef)}\n            style={{\n                width: `${viewport.width}px`,\n                height: `${viewport.height}px`,\n                display: showOverlays ? \"block\" : \"none\",\n                pointerEvents: isDragging ? \"auto\" : \"none\"\n            }}\n        >\n            {boxes.preview\n                .filter(filterElements)\n                .filter(filterVisibleBoxes(viewport))\n                .map(box => (\n                    <Fragment key={box.id}>\n                        <ElementOverlay\n                            elementId={box.id}\n                            isSelected={selectedElement === box.id}\n                            isHighlighted={highlightedElement === box.id}\n                            previewBox={box}\n                            editorBox={boxes.editor.get(box.id)!}\n                        >\n                            <>\n                                <ElementDropLines\n                                    isFirst={box.parentIndex === 0}\n                                    isHighlighted={highlightedElement === box.id}\n                                    editorBox={boxes.editor.get(box.id)!}\n                                    previewBox={box}\n                                />\n                            </>\n                        </ElementOverlay>\n                    </Fragment>\n                ))}\n            {boxes.preview\n                .filter(filterSlots)\n                .filter(filterVisibleBoxes(viewport))\n                .map(box => (\n                    <DropBox key={box.id} box={box} onDrop={onDrop} />\n                ))}\n        </OverlayContainer>\n    );\n});\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC5D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,OAAO,QAAQ,WAAW;AAGnC,SAASC,cAAc;AACvB,SAASC,mBAAmB;AAC5B,SAASC,cAAc;AAEvB,SAASC,aAAa;AAGtB,SAASC,iBAAiB;AAC1B,SAASC,gBAAgB;AACzB,SAASC,OAAO;AAChB,SAASC,kBAAkB;AAC3B,SAASC,SAAS;AAClB,SAASC,QAAQ;AAEjB,SAASC,+BAA+B,QAAQ,6BAA6B;AAC7E,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE,MAAMC,gBAAgB,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAIrC,CAAC;AAEF,MAAMC,kBAAkB,GAAIC,QAA6B,IAAK;EAC1D,OAAQC,GAAQ,IAAK;IACjB,MAAMC,iBAAiB,GAAGD,GAAG,CAACE,GAAG,GAAGF,GAAG,CAACG,MAAM,GAAG,CAAC,IAAIH,GAAG,CAACE,GAAG,GAAGH,QAAQ,CAACI,MAAM;IAE/E,MAAMC,mBAAmB,GAAGJ,GAAG,CAACK,IAAI,GAAGL,GAAG,CAACM,KAAK,GAAG,CAAC,IAAIN,GAAG,CAACK,IAAI,GAAGN,QAAQ,CAACO,KAAK;IACjF,OAAOL,iBAAiB,IAAIG,mBAAmB;EACnD,CAAC;AACL,CAAC;AAED,MAAMG,cAAc,GAAIP,GAAQ,IAAK;EACjC,OAAOA,GAAG,CAACQ,IAAI,KAAK,SAAS,IAAIR,GAAG,CAACS,EAAE,KAAK,MAAM;AACtD,CAAC;AAED,MAAMC,WAAW,GAAIV,GAAQ,IAAK;EAC9B,OAAOA,GAAG,CAACQ,IAAI,KAAK,cAAc;AACtC,CAAC;AAED,OAAO,MAAMG,eAAe,GAAGvC,QAAQ,CAAC,MAAM;EAC1C,MAAMwC,eAAe,GAAG/B,kBAAkB,CAAC,CAAC;EAC5C,MAAMgC,MAAM,GAAGnC,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEoC,KAAK;IAAEf;EAAS,CAAC,GAAGzB,cAAc,CAAC,CAAC;EAC5C,MAAMyC,UAAU,GAAGtC,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEuC,YAAY;IAAEC,eAAe;IAAEC;EAAmB,CAAC,GAAG3C,mBAAmB,CAAC4C,KAAK,IAAI;IACvF,OAAO;MACHH,YAAY,EAAEG,KAAK,CAACH,YAAY;MAChCC,eAAe,EAAEE,KAAK,CAACF,eAAe;MACtCC,kBAAkB,EAAEC,KAAK,CAACD;IAC9B,CAAC;EACL,CAAC,CAAC;EAEF,MAAME,OAAO,GAAGjD,MAAM,CAAqB,IAAI,CAAC;EAEhD,MAAM,GAAGkD,IAAI,CAAC,GAAGhD,OAAO,CAAC,OAAO;IAC5BiD,MAAM,EAAE,SAAS;IACjBD,IAAI,EAAGE,IAAS,IAAK;MACjB,MAAMhC,MAAM,GAAGqB,eAAe,CAACY,sBAAsB,CAAC,CAAC;MACvD,IAAIjC,MAAM,EAAE;QACRkC,MAAM,CAAC;UAAEF,IAAI;UAAEhC;QAAO,CAAC,CAAC;MAC5B;IACJ;EACJ,CAAC,CAAC,CAAC;EAEH8B,IAAI,CAACD,OAAO,CAAC;EAEb,MAAMM,0BAA0B,GAAGA,CAC/Bb,MAAc,EACdc,aAAqB,EACrBpC,MAA2B,KAC1B;IACD;IACA,MAAMqC,QAAQ,GAAGf,MAAM,CAACgB,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACjD,MAAM;MAAEC;IAAU,CAAC,GAAGH,QAAQ,CAACI,QAAQ,CAACzC,MAAM,CAAC0C,QAAQ,CAAC;IACxD,MAAMC,iBAAiB,GAAGrB,MAAM,CAACsB,cAAc,CAAC,CAAC,CAACL,IAAI,CAAC,CAAC,CAACM,UAAU,CAACL,SAAS,CAACtC,IAAI,CAAC;;IAEnF;IACA,MAAM4C,SAAS,GAAGrD,+BAA+B,CAACsD,OAAO,CAACJ,iBAAiB,CAACK,MAAM,IAAI,EAAE,CAAC;IACzF,MAAMC,eAAe,GAAGvD,mBAAmB,CAACM,MAAM,CAACkD,IAAI,EAAEJ,SAAS,CAAC;IAEnE,IAAIK,kBAAkB,GAAGF,eAAe,KAAKG,SAAS;IACtD,IAAIH,eAAe,EAAE;MACjB,MAAMI,SAAS,GAAGJ,eAAe,CAACK,KAAkB;MACpD,MAAMC,qBAAqB,GAAGF,SAAS,CAACR,UAAU;MAClD,IAAIU,qBAAqB,IAAIA,qBAAqB,CAACC,MAAM,GAAG,CAAC,EAAE;QAC3DL,kBAAkB,GAAGI,qBAAqB,CAACE,QAAQ,CAACrB,aAAa,CAAC;MACtE;IACJ;IACA,OAAOe,kBAAkB;EAC7B,CAAC;EAED,MAAMjB,MAAM,GAAGvD,WAAW,CACtB,CAAC;IAAEqD,IAAI;IAAEhC;EAAkB,CAAC,KAAK;IAC7B,IAAI,CAACmC,0BAA0B,CAACb,MAAM,EAAEU,IAAI,CAACI,aAAa,EAAEpC,MAAM,CAAC,EAAE;MACjE;IACJ;IAEA,IAAIgC,IAAI,CAACd,EAAE,EAAE;MACT;MACAI,MAAM,CAACoC,cAAc,CAAClE,QAAQ,CAACmE,WAAW,EAAE;QACxCC,SAAS,EAAE5B,IAAI,CAACd,EAAE;QAClBwB,QAAQ,EAAE1C,MAAM,CAAC0C,QAAQ;QACzBQ,IAAI,EAAElD,MAAM,CAACkD,IAAI;QACjBW,KAAK,EAAE7D,MAAM,CAAC6D;MAClB,CAAC,CAAC;IACN,CAAC,MAAM;MACH;MACAvC,MAAM,CAACoC,cAAc,CAAClE,QAAQ,CAACsE,aAAa,EAAE;QAC1C1B,aAAa,EAAEJ,IAAI,CAACI,aAAa;QACjCM,QAAQ,EAAE1C,MAAM,CAAC0C,QAAQ;QACzBQ,IAAI,EAAElD,MAAM,CAACkD,IAAI;QACjBW,KAAK,EAAE7D,MAAM,CAAC6D;MAClB,CAAC,CAAC;IACN;EACJ,CAAC,EACD,CAACvC,MAAM,CACX,CAAC;EAED,oBACI7C,KAAA,CAAAsF,aAAA,CAACpE,gBAAgB;IACbqE,GAAG,EAAEzE,SAAS,CAACsC,OAAO,CAAE;IACxBoC,KAAK,EAAE;MACHlD,KAAK,EAAE,GAAGP,QAAQ,CAACO,KAAK,IAAI;MAC5BH,MAAM,EAAE,GAAGJ,QAAQ,CAACI,MAAM,IAAI;MAC9BsD,OAAO,EAAEzC,YAAY,GAAG,OAAO,GAAG,MAAM;MACxC0C,aAAa,EAAE3C,UAAU,GAAG,MAAM,GAAG;IACzC;EAAE,GAEDD,KAAK,CAAC6C,OAAO,CACTC,MAAM,CAACrD,cAAc,CAAC,CACtBqD,MAAM,CAAC9D,kBAAkB,CAACC,QAAQ,CAAC,CAAC,CACpCJ,GAAG,CAACK,GAAG,iBACJhC,KAAA,CAAAsF,aAAA,CAACrF,QAAQ;IAAC4F,GAAG,EAAE7D,GAAG,CAACS;EAAG,gBAClBzC,KAAA,CAAAsF,aAAA,CAAC9E,cAAc;IACX2E,SAAS,EAAEnD,GAAG,CAACS,EAAG;IAClBqD,UAAU,EAAE7C,eAAe,KAAKjB,GAAG,CAACS,EAAG;IACvCsD,aAAa,EAAE7C,kBAAkB,KAAKlB,GAAG,CAACS,EAAG;IAC7CuD,UAAU,EAAEhE,GAAI;IAChBiE,SAAS,EAAEnD,KAAK,CAACD,MAAM,CAACqD,GAAG,CAAClE,GAAG,CAACS,EAAE;EAAG,gBAErCzC,KAAA,CAAAsF,aAAA,CAAAtF,KAAA,CAAAC,QAAA,qBACID,KAAA,CAAAsF,aAAA,CAAC3E,gBAAgB;IACbwF,OAAO,EAAEnE,GAAG,CAACoE,WAAW,KAAK,CAAE;IAC/BL,aAAa,EAAE7C,kBAAkB,KAAKlB,GAAG,CAACS,EAAG;IAC7CwD,SAAS,EAAEnD,KAAK,CAACD,MAAM,CAACqD,GAAG,CAAClE,GAAG,CAACS,EAAE,CAAG;IACrCuD,UAAU,EAAEhE;EAAI,CACnB,CACH,CACU,CACV,CACb,CAAC,EACLc,KAAK,CAAC6C,OAAO,CACTC,MAAM,CAAClD,WAAW,CAAC,CACnBkD,MAAM,CAAC9D,kBAAkB,CAACC,QAAQ,CAAC,CAAC,CACpCJ,GAAG,CAACK,GAAG,iBACJhC,KAAA,CAAAsF,aAAA,CAAC1E,OAAO;IAACiF,GAAG,EAAE7D,GAAG,CAACS,EAAG;IAACT,GAAG,EAAEA,GAAI;IAACyB,MAAM,EAAEA;EAAO,CAAE,CACpD,CACS,CAAC;AAE3B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Fragment","useCallback","useRef","observer","useDrop","ComponentManifestToAstConverter","findMatchingAstNode","usePreviewData","useSelectFromEditor","ElementOverlay","useIsDragging","useDocumentEditor","ElementDropLines","DropBox","useDropZoneManager","mergeRefs","Commands","OverlayContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","filterElements","box","type","id","filterSlots","ElementOverlays","dropzoneManager","editor","boxes","isDragging","selectedElement","highlightedElement","state","dropRef","drop","accept","item","getLastMatchedPosition","onDrop","canDropComponentIntoTarget","componentName","document","getDocumentState","read","component","elements","parentId","componentManifest","getEditorState","components","inputsAst","convert","inputs","targetInputNode","slot","canAcceptComponent","undefined","slotInput","input","whitelistedComponents","length","includes","executeCommand","MoveElement","elementId","index","CreateElement","viewportContainer","display","position","top","left","width","height","pointerEvents","slots","preview","filter","createElement","ref","style","map","key","isSelected","isHighlighted","previewBox","editorBox","get","isFirst","parentIndex"],"sources":["ElementOverlays.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDrop } from \"react-dnd\";\nimport styled from \"@emotion/styled\";\n\nimport type { SlotInput } from \"@webiny/website-builder-sdk\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\n\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { ElementOverlay } from \"./ElementOverlay.js\";\nimport { useIsDragging } from \"../useIsDragging.js\";\nimport type { Box } from \"../Box.js\";\nimport type { DropEvent } from \"../useProximityDropzone.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { ElementDropLines } from \"./ElementDropLines.js\";\nimport { DropBox } from \"./DropBox.js\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider.js\";\nimport { mergeRefs } from \"../mergeRefs.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\n\nconst OverlayContainer = styled(\"div\")({\n    overflow: \"hidden\",\n    position: \"absolute\",\n    zIndex: 20\n});\n\nconst filterElements = (box: Box) => {\n    return box.type === \"element\" && box.id !== \"root\";\n};\n\nconst filterSlots = (box: Box) => {\n    return box.type === \"element-slot\";\n};\n\nexport const ElementOverlays = observer(() => {\n    const dropzoneManager = useDropZoneManager();\n    const editor = useDocumentEditor();\n    const { boxes } = usePreviewData();\n    const isDragging = useIsDragging();\n    const { selectedElement, highlightedElement } = useSelectFromEditor(state => {\n        return {\n            selectedElement: state.selectedElement,\n            highlightedElement: state.highlightedElement\n        };\n    });\n\n    const dropRef = useRef<HTMLElement | null>(null);\n\n    const [, drop] = useDrop(() => ({\n        accept: \"ELEMENT\",\n        drop: (item: any) => {\n            const target = dropzoneManager.getLastMatchedPosition();\n            if (target) {\n                onDrop({ item, target });\n            }\n        }\n    }));\n\n    drop(dropRef);\n\n    const canDropComponentIntoTarget = (\n        editor: Editor,\n        componentName: string,\n        target: DropEvent[\"target\"]\n    ) => {\n        // Determine component manifest from drop target.\n        const document = editor.getDocumentState().read();\n        const { component } = document.elements[target.parentId];\n        const componentManifest = editor.getEditorState().read().components[component.name];\n\n        // Find target input using AST.\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        const targetInputNode = findMatchingAstNode(target.slot, inputsAst);\n\n        let canAcceptComponent = targetInputNode !== undefined;\n        if (targetInputNode) {\n            const slotInput = targetInputNode.input as SlotInput;\n            const whitelistedComponents = slotInput.components;\n            if (whitelistedComponents && whitelistedComponents.length > 0) {\n                canAcceptComponent = whitelistedComponents.includes(componentName);\n            }\n        }\n        return canAcceptComponent;\n    };\n\n    const onDrop = useCallback(\n        ({ item, target }: DropEvent) => {\n            if (!canDropComponentIntoTarget(editor, item.componentName, target)) {\n                return;\n            }\n\n            if (item.id) {\n                // We're moving an existing element.\n                editor.executeCommand(Commands.MoveElement, {\n                    elementId: item.id,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            } else {\n                // We're creating a new element.\n                editor.executeCommand(Commands.CreateElement, {\n                    componentName: item.componentName,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            }\n        },\n        [editor]\n    );\n\n    const viewportContainer: React.CSSProperties = {\n        display: \"block\",\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: isDragging ? \"auto\" : \"none\"\n    };\n\n    const slots = boxes.preview.filter(filterSlots);\n\n    return (\n        <OverlayContainer ref={mergeRefs(dropRef)} style={viewportContainer}>\n            {boxes.preview.filter(filterElements).map(box => (\n                <Fragment key={box.id}>\n                    <ElementOverlay\n                        elementId={box.id}\n                        isSelected={selectedElement === box.id}\n                        isHighlighted={highlightedElement === box.id}\n                        previewBox={box}\n                        editorBox={boxes.editor.get(box.id)!}\n                    />\n                    <ElementDropLines\n                        isFirst={box.parentIndex === 0}\n                        previewBox={box}\n                        editorBox={boxes.editor.get(box.id)!}\n                    />\n                </Fragment>\n            ))}\n            {slots.map(slot => (\n                <DropBox key={slot.id} box={slot} onDrop={onDrop} />\n            ))}\n        </OverlayContainer>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,44 +1,26 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { AddressBar } from "./AddressBar";
-import { Iframe } from "./Iframe";
-import { HoverManager } from "./HoverManager";
-import { DropZoneManager } from "./DropZoneManager";
-import { DropZoneManagerProvider } from "./DropZoneManagerProvider";
-import { Boxes } from "../../../hooks/Boxes";
-import { ScrollTracker } from "./ScrollTracker";
-import { KeyboardShortcuts } from "./KeyboardShortcuts";
 import { ViewportManager } from "@webiny/website-builder-sdk";
 import { mouseTracker } from "@webiny/website-builder-sdk";
-import { Commands } from "../../..";
-import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
-import { AwaitIframeUrl } from "./AwaitIframeUrl";
-import { PreviewEvents } from "./PreviewEvents";
-import { ApplyTheme } from "./ApplyTheme";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { AddressBar } from "./AddressBar.js";
+import { Iframe } from "./Iframe.js";
+import { DropZoneManager } from "./DropZoneManager.js";
+import { DropZoneManagerProvider } from "./DropZoneManagerProvider.js";
+import { KeyboardShortcuts } from "./KeyboardShortcuts.js";
+import { Commands } from "../../../index.js";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { AwaitIframeUrl } from "./AwaitIframeUrl.js";
+import { PreviewEvents } from "./PreviewEvents.js";
+import { ApplyTheme } from "./ApplyTheme.js";
 export const Preview = () => {
   const editor = useDocumentEditor();
   const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());
   const loadingPreview = useSelectFromEditor(state => state.loadingPreview);
-  const scrollTracker = useMemo(() => {
-    return new ScrollTracker(window, e => {
-      const source = e.target;
-      if (!source) {
-        return false;
-      }
-      return source.dataset.role === "element-overlay";
-    });
-  }, []);
-  const hoverManager = useMemo(() => {
-    return new HoverManager(mouseTracker, () => {
-      const editorState = editor.getEditorState().read();
-      return new Boxes(editorState.boxes.editor).filter(box => box.id !== "root");
-    });
-  }, [mouseTracker]);
   const viewportManager = useMemo(() => {
     return new ViewportManager();
   }, []);
   const previewEvents = useMemo(() => {
-    return new PreviewEvents(editor, scrollTracker);
+    return new PreviewEvents(editor);
   }, []);
   const dropzoneManager = useMemo(() => {
     return new DropZoneManager(mouseTracker);
@@ -66,18 +48,15 @@ export const Preview = () => {
 
   // Start various trackers
   useEffect(() => {
-    scrollTracker.start();
     mouseTracker.start();
     dropzoneManager.start();
     return () => {
       dropzoneManager.stop();
       mouseTracker.stop();
-      scrollTracker.destroy();
       viewportManager.destroy();
-      hoverManager.destroy();
       previewEvents.destroy();
     };
-  }, [dropzoneManager, scrollTracker, mouseTracker]);
+  }, [dropzoneManager, mouseTracker]);
 
   // Update mouse position while dragging
   useEffect(() => {
@@ -85,14 +64,8 @@ export const Preview = () => {
       mouseTracker.setPosition(e.clientX, e.clientY);
     };
     window.addEventListener("dragover", setMousePositionFromDrag);
-    const offHoverChange = hoverManager.onHoverChange(id => {
-      editor.updateEditor(state => {
-        state.highlightedElement = id;
-      });
-    });
     return () => {
       window.removeEventListener("dragover", setMousePositionFromDrag);
-      offHoverChange();
     };
   }, []);
   const onConnected = useCallback(messenger => {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","useDocumentEditor","AddressBar","Iframe","HoverManager","DropZoneManager","DropZoneManagerProvider","Boxes","ScrollTracker","KeyboardShortcuts","ViewportManager","mouseTracker","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","ApplyTheme","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","scrollTracker","window","e","source","target","dataset","role","hoverManager","editorState","getEditorState","read","boxes","filter","box","id","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","preview","start","stop","destroy","setMousePositionFromDrag","setPosition","clientX","clientY","addEventListener","offHoverChange","onHoverChange","highlightedElement","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { AddressBar } from \"./AddressBar\";\nimport { Iframe } from \"./Iframe\";\nimport { HoverManager } from \"./HoverManager\";\nimport { DropZoneManager } from \"./DropZoneManager\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider\";\nimport { Boxes } from \"~/BaseEditor/hooks/Boxes\";\nimport { ScrollTracker } from \"~/BaseEditor/defaultConfig/Content/Preview/ScrollTracker\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents\";\nimport { ApplyTheme } from \"./ApplyTheme\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n    const scrollTracker = useMemo(() => {\n        return new ScrollTracker(window, e => {\n            const source = e.target as HTMLDivElement | null;\n\n            if (!source) {\n                return false;\n            }\n\n            return source.dataset.role === \"element-overlay\";\n        });\n    }, []);\n\n    const hoverManager = useMemo(() => {\n        return new HoverManager(mouseTracker, () => {\n            const editorState = editor.getEditorState().read();\n            return new Boxes(editorState.boxes.editor).filter(box => box.id !== \"root\");\n        });\n    }, [mouseTracker]);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor, scrollTracker);\n    }, []);\n\n    const dropzoneManager = useMemo(() => {\n        return new DropZoneManager(mouseTracker);\n    }, [mouseTracker]);\n\n    useEffect(() => {\n        // On first mount, show loading.\n        editor.updateEditor(state => {\n            state.loadingPreview = true;\n        });\n\n        const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n            setIframeTimestamp(Date.now());\n\n            editor.updateEditor(state => {\n                // Unset boxes to remove old overlays.\n                state.loadingPreview = true;\n                state.boxes = {\n                    preview: {},\n                    editor: {}\n                };\n            });\n        });\n\n        return () => {\n            offRefreshPreview();\n        };\n    }, []);\n\n    // Start various trackers\n    useEffect(() => {\n        scrollTracker.start();\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            scrollTracker.destroy();\n            viewportManager.destroy();\n            hoverManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, scrollTracker, mouseTracker]);\n\n    // Update mouse position while dragging\n    useEffect(() => {\n        const setMousePositionFromDrag = (e: DragEvent) => {\n            mouseTracker.setPosition(e.clientX, e.clientY);\n        };\n\n        window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n        const offHoverChange = hoverManager.onHoverChange(id => {\n            editor.updateEditor(state => {\n                state.highlightedElement = id;\n            });\n        });\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n            offHoverChange();\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <ApplyTheme />\n                <AddressBar />\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","ViewportManager","mouseTracker","useDocumentEditor","AddressBar","Iframe","DropZoneManager","DropZoneManagerProvider","KeyboardShortcuts","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","ApplyTheme","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","boxes","preview","start","stop","destroy","setMousePositionFromDrag","e","setPosition","clientX","clientY","window","addEventListener","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { AddressBar } from \"./AddressBar.js\";\nimport { Iframe } from \"./Iframe.js\";\nimport { DropZoneManager } from \"./DropZoneManager.js\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider.js\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js\";\nimport { ApplyTheme } from \"./ApplyTheme.js\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor);\n    }, []);\n\n    const dropzoneManager = useMemo(() => {\n        return new DropZoneManager(mouseTracker);\n    }, [mouseTracker]);\n\n    useEffect(() => {\n        // On first mount, show loading.\n        editor.updateEditor(state => {\n            state.loadingPreview = true;\n        });\n\n        const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n            setIframeTimestamp(Date.now());\n\n            editor.updateEditor(state => {\n                // Unset boxes to remove old overlays.\n                state.loadingPreview = true;\n                state.boxes = {\n                    preview: {},\n                    editor: {}\n                };\n            });\n        });\n\n        return () => {\n            offRefreshPreview();\n        };\n    }, []);\n\n    // Start various trackers\n    useEffect(() => {\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            viewportManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, mouseTracker]);\n\n    // Update mouse position while dragging\n    useEffect(() => {\n        const setMousePositionFromDrag = (e: DragEvent) => {\n            mouseTracker.setPosition(e.clientX, e.clientY);\n        };\n\n        window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <ApplyTheme />\n                <AddressBar />\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,13 +1,11 @@
-import type { Editor } from "../../../../editorSdk/Editor";
 import type { Messenger } from "@webiny/website-builder-sdk";
-import type { ScrollTracker } from "./ScrollTracker";
+import type { Editor } from "../../../../editorSdk/Editor.js";
 export declare class PreviewEvents {
     private editor;
     private editorEventsRegistered;
     private messenger;
-    private scrollTracker;
     private listeners;
-    constructor(editor: Editor, scrollTracker: ScrollTracker);
+    constructor(editor: Editor);
     onConnected(messenger: Messenger): void;
     destroy(): void;
     private registerEditorEvents;