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

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

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

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

@@ -1 +1 @@
-{"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":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Overlays/ElementDropLines.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Content/Preview/Overlays/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"],"names":["ElementDropLines","editorBox","previewBox","isFirst","componentManifest","useElementComponentManifest","draggingItem","useDragLayer","monitor","isDragging","draggingItemRef","useRef","componentManifestRef","canAccept","useCallback","item","manifest","inputsAst","ComponentManifestToAstConverter","targetNode","findMatchingAstNode","slotInput","whitelistedComponents","proximity","useProximityDropzone","anyElementDragged","useIsDragging","hoverBefore","hoverAfter","elementLabel","targetInputNode","useMemo","canAcceptComponent","DevToolsSection","DropLine"],"mappings":";;;;;;;;AAkBO,MAAMA,mBAAmB,CAAC,EAAEC,SAAS,EAAEC,UAAU,EAAEC,OAAO,EAAyB;IACtF,MAAMC,oBAAoBC,4BAA4BH,WAAW,QAAQ;IACzE,MAAMI,eAAeC,aAAaC,CAAAA,UAAWA,QAAQ,OAAO;IAC5D,MAAMC,aAAaH,gBAAgBA,aAAa,EAAE,KAAKJ,WAAW,EAAE;IAIpE,MAAMQ,kBAAkBC,OAAOL;IAC/BI,gBAAgB,OAAO,GAAGJ;IAC1B,MAAMM,uBAAuBD,OAAOP;IACpCQ,qBAAqB,OAAO,GAAGR;IAE/B,MAAMS,YAAYC,YAAY;QAC1B,MAAMC,OAAOL,gBAAgB,OAAO;QAGpC,IAAI,CAACK,MACD,OAAO;QAGX,MAAMC,WAAWJ,qBAAqB,OAAO;QAC7C,MAAMK,YAAYC,gCAAgC,OAAO,CAACF,UAAU,UAAU,EAAE;QAChF,MAAMG,aAAaC,oBAAoBnB,UAAU,UAAU,EAAEgB;QAE7D,IAAI,CAACE,YACD,OAAO;QAGX,IAAIA,AAAoB,WAApBA,WAAW,IAAI,EAAa;YAC5B,MAAME,YAAYF,WAAW,KAAK;YAClC,MAAMG,wBAAwBD,UAAU,UAAU;YAClD,IAAIC,yBAAyBA,sBAAsB,MAAM,GAAG,GACxD,OAAOA,sBAAsB,QAAQ,CAACP,KAAK,aAAa;QAEhE;QAEA,OAAO;IACX,GAAG;QAACd,UAAU,UAAU;KAAC;IAEzB,MAAM,EAAEsB,SAAS,EAAE,GAAGC,qBAAqB;QACvC,IAAItB,WAAW,EAAE;QACjB,KAAKD;QACLY;IACJ;IAEA,MAAMY,oBAAoBC;IAC1B,MAAMC,cAAcJ,WAAW,aAAa;IAC5C,MAAMK,aAAaL,WAAW,aAAa;IAC3C,MAAMM,eAAezB,mBAAmB,SAASA,mBAAmB,QAAQ;IAE5E,MAAM0B,kBAAkBC,QAAQ;QAC5B,IAAI,CAACR,WAAW,IAAI,YAChB;QAGJ,MAAMN,YAAYC,gCAAgC,OAAO,CAACd,mBAAmB,UAAU,EAAE;QACzF,OAAOgB,oBAAoBG,WAAW,IAAI,YAAYN;IAC1D,GAAG;QAACM,WAAW,IAAI;KAAW;IAG9B,IAAIS,qBAAqB,CAAC,CAACF;IAC3B,IAAIxB,gBAAgBwB,mBAAmBA,AAAyB,WAAzBA,gBAAgB,IAAI,EAAa;QACpE,MAAMT,YAAYS,gBAAgB,KAAK;QACvC,MAAMR,wBAAwBD,UAAU,UAAU;QAClD,IAAIC,yBAAyBA,sBAAsB,MAAM,GAAG,GACxDU,qBAAqBV,sBAAsB,QAAQ,CAAChB,cAAc;IAE1E;IAEA,OAAO,WAAP,GACI,wDACI,oBAAC2B,iBAAeA;QACZ,MAAM;QACN,OAAO;QACP,OAAO;QACP,MAAM;YACFV;YACAS;YACAF;QACJ;QAEHL,oBAAoB,WAApBA,GACG,0CACK,CAAChB,cAAcN,WAAW,WAAXA,GACZ,oBAAC+B,UAAQA;QACL,OAAOL;QACP,KAAK3B,WAAW,GAAG;QACnB,MAAMA,WAAW,IAAI;QACrB,OAAOA,WAAW,KAAK;QACvB,SAASyB,eAAeK;QACxB,QAAQ;QAGf,CAACvB,cAAc,WAAdA,GACE,oBAACyB,UAAQA;QACL,OAAOL;QACP,KAAK3B,WAAW,MAAM,GAAG;QACzB,MAAMA,WAAW,IAAI;QACrB,OAAOA,WAAW,KAAK;QACvB,SAAS0B,cAAcI;QACvB,QAAQ;UAIpB;AAGhB"}

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { cn } from "@webiny/admin-ui";
 import { useDocumentEditor } from "../../../../../DocumentEditor/index.js";
 import { $highlightElement, $selectElement } from "../../../../../editorSdk/utils/index.js";
@@ -6,148 +6,119 @@ import { Draggable } from "../../../../components/Draggable.js";
 import { useIsDragging } from "../useIsDragging.js";
 import { useStyles } from "../../../Sidebar/StyleSettings/useStyles.js";
 import { useElementOverlay } from "./ElementOverlayProvider.js";
-export const ElementOverlay = /*#__PURE__*/React.memo(() => {
-  const editor = useDocumentEditor();
-  const {
-    elementId,
-    isSelected,
-    isHighlighted,
-    componentManifest,
-    box: previewBox
-  } = useElementOverlay();
-  const onClick = useCallback(event => {
-    event.stopPropagation();
-    $selectElement(editor, elementId);
-  }, []);
-  const setHighlighted = useCallback(event => {
-    event.stopPropagation();
-    $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);
-  }, []);
-  const dnd = useIsDragging();
-  if (!componentManifest) {
-    return null;
-  }
-  const pointerEvents = "auto";
-  const componentName = componentManifest.label ?? componentManifest.name;
-  const boxState = isSelected ? "active" : isHighlighted && !dnd ? "hover" : null;
-  return /*#__PURE__*/React.createElement(Draggable, {
-    type: "ELEMENT",
-    item: {
-      id: elementId,
-      componentName: componentManifest.name
-    },
-    canDrag: componentManifest.canDrag !== false
-  }, ({
-    isDragging,
-    dragRef
-  }) => dragRef(/*#__PURE__*/React.createElement("div", {
-    "data-element-id": elementId,
-    onMouseEnter: setHighlighted,
-    onMouseLeave: unsetHighlighted,
-    style: {
-      position: "absolute",
-      pointerEvents,
-      zIndex: 100 + previewBox.depth,
-      top: previewBox.top,
-      left: previewBox.left,
-      width: previewBox.width,
-      height: previewBox.height,
-      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), /*#__PURE__*/React.createElement("div", {
-    "data-role": "opacity-overlay",
-    className: "pointer-events-none absolute top-0 left-0 bg-white",
-    style: {
-      zIndex: 100 + previewBox.depth,
-      width: previewBox.width,
-      height: previewBox.height,
-      opacity: isDragging ? 0.7 : 0
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    "data-role": "element-overlay-label",
-    "data-label-for": previewBox.id,
-    "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: {
-      top: -24
-    }
-  }, componentName))));
+const ElementOverlay = /*#__PURE__*/ react.memo(()=>{
+    const editor = useDocumentEditor();
+    const { elementId, isSelected, isHighlighted, componentManifest, box: previewBox } = useElementOverlay();
+    const onClick = useCallback((event)=>{
+        event.stopPropagation();
+        $selectElement(editor, elementId);
+    }, []);
+    const setHighlighted = useCallback((event)=>{
+        event.stopPropagation();
+        $highlightElement(editor, elementId);
+    }, []);
+    const unsetHighlighted = useCallback((event)=>{
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget && "function" == typeof relatedTarget.closest && relatedTarget.closest('[data-role="element-overlay"]')) return;
+        event.stopPropagation();
+        $highlightElement(editor, null);
+    }, []);
+    const dnd = useIsDragging();
+    if (!componentManifest) return null;
+    const pointerEvents = "auto";
+    const componentName = componentManifest.label ?? componentManifest.name;
+    const boxState = isSelected ? "active" : isHighlighted && !dnd ? "hover" : null;
+    return /*#__PURE__*/ react.createElement(Draggable, {
+        type: "ELEMENT",
+        item: {
+            id: elementId,
+            componentName: componentManifest.name
+        },
+        canDrag: false !== componentManifest.canDrag
+    }, ({ isDragging, dragRef })=>dragRef(/*#__PURE__*/ react.createElement("div", {
+            "data-element-id": elementId,
+            onMouseEnter: setHighlighted,
+            onMouseLeave: unsetHighlighted,
+            style: {
+                position: "absolute",
+                pointerEvents,
+                zIndex: 100 + previewBox.depth,
+                top: previewBox.top,
+                left: previewBox.left,
+                width: previewBox.width,
+                height: previewBox.height,
+                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), /*#__PURE__*/ react.createElement("div", {
+            "data-role": "opacity-overlay",
+            className: "pointer-events-none absolute top-0 left-0 bg-white",
+            style: {
+                zIndex: 100 + previewBox.depth,
+                width: previewBox.width,
+                height: previewBox.height,
+                opacity: isDragging ? 0.7 : 0
+            }
+        }), /*#__PURE__*/ react.createElement("div", {
+            "data-role": "element-overlay-label",
+            "data-label-for": previewBox.id,
+            "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: {
+                top: -24
+            }
+        }, componentName))));
 });
 ElementOverlay.displayName = "ElementOverlay";
 const borderWidth = "var(--border-width-md)";
-const AllMarginStripes = ({
-  elementId,
-  previewBox
-}) => {
-  const {
-    styles
-  } = useStyles(elementId);
-  const {
-    marginTop = 0,
-    marginBottom = 0,
-    marginLeft = 0,
-    marginRight = 0
-  } = styles;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, marginTop ? /*#__PURE__*/React.createElement(MarginStripes, {
-    top: `calc(0px - ${marginTop} - ${borderWidth})`,
-    left: `calc(0px - ${borderWidth})`,
-    height: marginTop,
-    width: `${previewBox.width}px`
-  }) : null, marginRight ? /*#__PURE__*/React.createElement(MarginStripes, {
-    top: `calc(0px - ${borderWidth})`,
-    left: `calc(${previewBox.width}px - ${borderWidth})`,
-    height: `${previewBox.height}px`,
-    width: marginRight
-  }) : null, marginBottom ? /*#__PURE__*/React.createElement(MarginStripes, {
-    top: `calc(${previewBox.height}px - ${borderWidth})`,
-    left: `calc(0px - ${borderWidth})`,
-    height: marginBottom,
-    width: `${previewBox.width}px`
-  }) : null, marginLeft ? /*#__PURE__*/React.createElement(MarginStripes, {
-    top: `calc(0px - ${borderWidth})`,
-    left: `calc(0px - ${marginLeft} - ${borderWidth})`,
-    height: `${previewBox.height}px`,
-    width: marginLeft
-  }) : null);
-};
-const MarginStripes = ({
-  top,
-  left,
-  height,
-  width
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    "data-role": "element-margin",
-    style: {
-      pointerEvents: "none",
-      position: "absolute",
-      top,
-      left,
-      height,
-      width,
-      backgroundImage: "linear-gradient(135deg, #ecebff 18.75%, #ffffff 18.75%, #ffffff 50%, #ecebff 50%, #ecebff 68.75%, #ffffff 68.75%, #ffffff 100%)",
-      backgroundSize: "4.49px 4.49px"
-    }
-  });
+const AllMarginStripes = ({ elementId, previewBox })=>{
+    const { styles } = useStyles(elementId);
+    const { marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0 } = styles;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, marginTop ? /*#__PURE__*/ react.createElement(MarginStripes, {
+        top: `calc(0px - ${marginTop} - ${borderWidth})`,
+        left: `calc(0px - ${borderWidth})`,
+        height: marginTop,
+        width: `${previewBox.width}px`
+    }) : null, marginRight ? /*#__PURE__*/ react.createElement(MarginStripes, {
+        top: `calc(0px - ${borderWidth})`,
+        left: `calc(${previewBox.width}px - ${borderWidth})`,
+        height: `${previewBox.height}px`,
+        width: marginRight
+    }) : null, marginBottom ? /*#__PURE__*/ react.createElement(MarginStripes, {
+        top: `calc(${previewBox.height}px - ${borderWidth})`,
+        left: `calc(0px - ${borderWidth})`,
+        height: marginBottom,
+        width: `${previewBox.width}px`
+    }) : null, marginLeft ? /*#__PURE__*/ react.createElement(MarginStripes, {
+        top: `calc(0px - ${borderWidth})`,
+        left: `calc(0px - ${marginLeft} - ${borderWidth})`,
+        height: `${previewBox.height}px`,
+        width: marginLeft
+    }) : null);
 };
+const MarginStripes = ({ top, left, height, width })=>/*#__PURE__*/ react.createElement("div", {
+        "data-role": "element-margin",
+        style: {
+            pointerEvents: "none",
+            position: "absolute",
+            top,
+            left,
+            height,
+            width,
+            backgroundImage: "linear-gradient(135deg, #ecebff 18.75%, #ffffff 18.75%, #ffffff 50%, #ecebff 50%, #ecebff 68.75%, #ffffff 68.75%, #ffffff 100%)",
+            backgroundSize: "4.49px 4.49px"
+        }
+    });
+export { ElementOverlay };
 
 //# sourceMappingURL=ElementOverlay.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","cn","useDocumentEditor","$highlightElement","$selectElement","Draggable","useIsDragging","useStyles","useElementOverlay","ElementOverlay","memo","editor","elementId","isSelected","isHighlighted","componentManifest","box","previewBox","onClick","event","stopPropagation","setHighlighted","unsetHighlighted","relatedTarget","closest","dnd","pointerEvents","componentName","label","name","boxState","createElement","type","item","id","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 { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { useElementOverlay } from \"./ElementOverlayProvider.js\";\n\nexport const ElementOverlay = React.memo(() => {\n    const editor = useDocumentEditor();\n    const {\n        elementId,\n        isSelected,\n        isHighlighted,\n        componentManifest,\n        box: previewBox\n    } = useElementOverlay();\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        const relatedTarget = event.relatedTarget as Element;\n        if (\n            relatedTarget &&\n            typeof relatedTarget.closest === \"function\" &&\n            relatedTarget.closest('[data-role=\"element-overlay\"]')\n        ) {\n            return;\n        }\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 elementId={elementId} previewBox={previewBox} />\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\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,"file":"BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlay.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Content/Preview/Overlays/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 { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { useElementOverlay } from \"./ElementOverlayProvider.js\";\n\nexport const ElementOverlay = React.memo(() => {\n    const editor = useDocumentEditor();\n    const {\n        elementId,\n        isSelected,\n        isHighlighted,\n        componentManifest,\n        box: previewBox\n    } = useElementOverlay();\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        const relatedTarget = event.relatedTarget as Element;\n        if (\n            relatedTarget &&\n            typeof relatedTarget.closest === \"function\" &&\n            relatedTarget.closest('[data-role=\"element-overlay\"]')\n        ) {\n            return;\n        }\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 elementId={elementId} previewBox={previewBox} />\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\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"],"names":["ElementOverlay","React","editor","useDocumentEditor","elementId","isSelected","isHighlighted","componentManifest","previewBox","useElementOverlay","onClick","useCallback","event","$selectElement","setHighlighted","$highlightElement","unsetHighlighted","relatedTarget","dnd","useIsDragging","pointerEvents","componentName","boxState","Draggable","isDragging","dragRef","cn","AllMarginStripes","borderWidth","styles","useStyles","marginTop","marginBottom","marginLeft","marginRight","MarginStripes","top","left","height","width"],"mappings":"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"}

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

@@ -1,19 +1,17 @@
-import React from "react";
+import react from "react";
 import { createGenericContext } from "@webiny/app";
 import { useElementComponentManifest } from "../useElementComponentManifest.js";
 const context = createGenericContext("ElementOverlayProvider");
-export const ElementOverlayProvider = props => {
-  const {
-    children
-  } = props;
-  const componentManifest = useElementComponentManifest(props.elementId);
-  if (!componentManifest) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(context.Provider, Object.assign({}, props, {
-    componentManifest: componentManifest
-  }), children);
+const ElementOverlayProvider = (props)=>{
+    const { children } = props;
+    const componentManifest = useElementComponentManifest(props.elementId);
+    if (!componentManifest) return null;
+    return /*#__PURE__*/ react.createElement(context.Provider, {
+        ...props,
+        componentManifest: componentManifest
+    }, children);
 };
-export const useElementOverlay = context.useHook;
+const useElementOverlay = context.useHook;
+export { ElementOverlayProvider, useElementOverlay };
 
 //# sourceMappingURL=ElementOverlayProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","createGenericContext","useElementComponentManifest","context","ElementOverlayProvider","props","children","componentManifest","elementId","createElement","Provider","Object","assign","useElementOverlay","useHook"],"sources":["ElementOverlayProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { createGenericContext } from \"@webiny/app\";\nimport type { ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport type { Box } from \"../Box.js\";\n\ninterface ElementOverlayContext {\n    elementId: string;\n    isSelected: boolean;\n    isHighlighted: boolean;\n    box: Box;\n    componentManifest: ComponentManifest;\n}\n\nexport type ElementOverlayProviderProps = Pick<\n    ElementOverlayContext,\n    \"elementId\" | \"isSelected\" | \"isHighlighted\" | \"box\"\n> & {\n    children: React.ReactNode;\n};\n\nconst context = createGenericContext<ElementOverlayContext>(\"ElementOverlayProvider\");\n\nexport const ElementOverlayProvider = (props: ElementOverlayProviderProps) => {\n    const { children } = props;\n    const componentManifest = useElementComponentManifest(props.elementId);\n\n    if (!componentManifest) {\n        return null;\n    }\n\n    return (\n        <context.Provider {...props} componentManifest={componentManifest}>\n            {children}\n        </context.Provider>\n    );\n};\nexport const useElementOverlay = context.useHook;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,oBAAoB,QAAQ,aAAa;AAElD,SAASC,2BAA2B;AAkBpC,MAAMC,OAAO,GAAGF,oBAAoB,CAAwB,wBAAwB,CAAC;AAErF,OAAO,MAAMG,sBAAsB,GAAIC,KAAkC,IAAK;EAC1E,MAAM;IAAEC;EAAS,CAAC,GAAGD,KAAK;EAC1B,MAAME,iBAAiB,GAAGL,2BAA2B,CAACG,KAAK,CAACG,SAAS,CAAC;EAEtE,IAAI,CAACD,iBAAiB,EAAE;IACpB,OAAO,IAAI;EACf;EAEA,oBACIP,KAAA,CAAAS,aAAA,CAACN,OAAO,CAACO,QAAQ,EAAAC,MAAA,CAAAC,MAAA,KAAKP,KAAK;IAAEE,iBAAiB,EAAEA;EAAkB,IAC7DD,QACa,CAAC;AAE3B,CAAC;AACD,OAAO,MAAMO,iBAAiB,GAAGV,OAAO,CAACW,OAAO","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { createGenericContext } from \"@webiny/app\";\nimport type { ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport type { Box } from \"../Box.js\";\n\ninterface ElementOverlayContext {\n    elementId: string;\n    isSelected: boolean;\n    isHighlighted: boolean;\n    box: Box;\n    componentManifest: ComponentManifest;\n}\n\nexport type ElementOverlayProviderProps = Pick<\n    ElementOverlayContext,\n    \"elementId\" | \"isSelected\" | \"isHighlighted\" | \"box\"\n> & {\n    children: React.ReactNode;\n};\n\nconst context = createGenericContext<ElementOverlayContext>(\"ElementOverlayProvider\");\n\nexport const ElementOverlayProvider = (props: ElementOverlayProviderProps) => {\n    const { children } = props;\n    const componentManifest = useElementComponentManifest(props.elementId);\n\n    if (!componentManifest) {\n        return null;\n    }\n\n    return (\n        <context.Provider {...props} componentManifest={componentManifest}>\n            {children}\n        </context.Provider>\n    );\n};\nexport const useElementOverlay = context.useHook;\n"],"names":["context","createGenericContext","ElementOverlayProvider","props","children","componentManifest","useElementComponentManifest","useElementOverlay"],"mappings":";;;AAqBA,MAAMA,UAAUC,qBAA4C;AAErD,MAAMC,yBAAyB,CAACC;IACnC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,oBAAoBC,4BAA4BH,MAAM,SAAS;IAErE,IAAI,CAACE,mBACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACL,QAAQ,QAAQ;QAAE,GAAGG,KAAK;QAAE,mBAAmBE;OAC3CD;AAGb;AACO,MAAMG,oBAAoBP,QAAQ,OAAO"}