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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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"}