@webiny/app-website-builder 6.0.0-alpha.0

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

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

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

@@ -0,0 +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 \"~/sdk\";\n\nexport const MouseStatus = () => {\n    const [position, setPosition] = useState({ x: 0, y: 0 });\n\n    useEffect(() => {\n        return mouseTracker.subscribe(setPosition);\n    }, []);\n\n    return (\n        <div className={\"wby-absolute wby-bottom-0 wby-left-0 wby-p-md\"}>\n            {position.x}:{position.y}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY;AAErB,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGJ,QAAQ,CAAC;IAAEK,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EAExDP,SAAS,CAAC,MAAM;IACZ,OAAOE,YAAY,CAACM,SAAS,CAACH,WAAW,CAAC;EAC9C,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIN,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAAgD,GAC3DN,QAAQ,CAACE,CAAC,EAAC,GAAC,EAACF,QAAQ,CAACG,CACtB,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { Box } from "../Box";
+import { DropEvent } from "../useProximityDropzone";
+interface DropBoxProps {
+    box: Box;
+    onDrop: (event: DropEvent) => void;
+}
+export declare const DropBox: React.MemoExoticComponent<({ box, onDrop }: DropBoxProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null>;
+export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useDrop","cn","Icon","ReactComponent","InsertIcon","BlockIcon","useIsDragging","deepEqual","DropBox","memo","box","onDrop","isDragging","item","isOver","dropRef","accept","drop","target","parentId","index","slot","parentSlot","collect","monitor","getItem","canAccept","disabled","enabled","mouseOver","classes","createElement","id","depth","className","style","zIndex","top","left","width","height","icon","label","prev","next","displayName"],"sources":["DropBox.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDrop } from \"react-dnd\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as BlockIcon } from \"@webiny/icons/block.svg\";\nimport { Box } from \"~/BaseEditor/defaultConfig/Content/Preview/Box\";\nimport { DropEvent } from \"~/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging\";\nimport deepEqual from \"deep-equal\";\n\ninterface DropBoxProps {\n    box: Box;\n    onDrop: (event: DropEvent) => void;\n}\n\nexport const DropBox = React.memo(\n    ({ box, onDrop }: DropBoxProps) => {\n        const isDragging = useIsDragging();\n\n        const [{ item, isOver }, dropRef] = useDrop<\n            any,\n            unknown,\n            { item: { name: string }; isOver: boolean }\n        >(() => ({\n            accept: \"ELEMENT\",\n            drop: item => {\n                onDrop({\n                    item,\n                    target: { parentId: box.parentId, index: 0, slot: box.parentSlot }\n                });\n            },\n            collect: monitor => ({\n                item: monitor.getItem(),\n                isOver: monitor.isOver()\n            })\n        }));\n\n        const canAccept = isDragging;\n        const disabled = \"wby-border-neutral-muted wby-fill-neutral-disabled\";\n        const enabled = \"wby-border-success-default wby-fill-success\";\n        const mouseOver = \"wby-border-accent-default wby-fill-accent-default\";\n\n        const classes = cn(\n            \"wby-flex wby-absolute wby-items-center wby-justify-center wby-border-sm wby-border-dashed\",\n            canAccept && isOver && mouseOver,\n            canAccept && !isOver && enabled,\n            !canAccept && disabled\n        );\n\n        return dropRef(\n            <div\n                data-role={\"element-slot\"}\n                data-slot-id={box.id}\n                data-depth={box.depth}\n                className={classes}\n                style={{\n                    zIndex: 100 + box.depth,\n                    top: box.top,\n                    left: box.left,\n                    width: box.width,\n                    height: box.height\n                }}\n            >\n                <Icon\n                    icon={isDragging && !canAccept ? <BlockIcon /> : <InsertIcon />}\n                    label={\"Add Element\"}\n                />\n            </div>\n        );\n    },\n    (prev, next) => deepEqual(prev, next)\n);\n\nDropBox.displayName = \"DropBox\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,EAAE,EAAEC,IAAI,QAAQ,kBAAkB;AAC3C,SAASC,cAAc,IAAIC,UAAU,QAAQ,8BAA8B;AAC3E,SAASD,cAAc,IAAIE,SAAS,QAAQ,yBAAyB;AAGrE,SAASC,aAAa;AACtB,OAAOC,SAAS,MAAM,YAAY;AAOlC,OAAO,MAAMC,OAAO,gBAAGT,KAAK,CAACU,IAAI,CAC7B,CAAC;EAAEC,GAAG;EAAEC;AAAqB,CAAC,KAAK;EAC/B,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;EAElC,MAAM,CAAC;IAAEO,IAAI;IAAEC;EAAO,CAAC,EAAEC,OAAO,CAAC,GAAGf,OAAO,CAIzC,OAAO;IACLgB,MAAM,EAAE,SAAS;IACjBC,IAAI,EAAEJ,IAAI,IAAI;MACVF,MAAM,CAAC;QACHE,IAAI;QACJK,MAAM,EAAE;UAAEC,QAAQ,EAAET,GAAG,CAACS,QAAQ;UAAEC,KAAK,EAAE,CAAC;UAAEC,IAAI,EAAEX,GAAG,CAACY;QAAW;MACrE,CAAC,CAAC;IACN,CAAC;IACDC,OAAO,EAAEC,OAAO,KAAK;MACjBX,IAAI,EAAEW,OAAO,CAACC,OAAO,CAAC,CAAC;MACvBX,MAAM,EAAEU,OAAO,CAACV,MAAM,CAAC;IAC3B,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,MAAMY,SAAS,GAAGd,UAAU;EAC5B,MAAMe,QAAQ,GAAG,oDAAoD;EACrE,MAAMC,OAAO,GAAG,6CAA6C;EAC7D,MAAMC,SAAS,GAAG,mDAAmD;EAErE,MAAMC,OAAO,GAAG7B,EAAE,CACd,2FAA2F,EAC3FyB,SAAS,IAAIZ,MAAM,IAAIe,SAAS,EAChCH,SAAS,IAAI,CAACZ,MAAM,IAAIc,OAAO,EAC/B,CAACF,SAAS,IAAIC,QAClB,CAAC;EAED,OAAOZ,OAAO,cACVhB,KAAA,CAAAgC,aAAA;IACI,aAAW,cAAe;IAC1B,gBAAcrB,GAAG,CAACsB,EAAG;IACrB,cAAYtB,GAAG,CAACuB,KAAM;IACtBC,SAAS,EAAEJ,OAAQ;IACnBK,KAAK,EAAE;MACHC,MAAM,EAAE,GAAG,GAAG1B,GAAG,CAACuB,KAAK;MACvBI,GAAG,EAAE3B,GAAG,CAAC2B,GAAG;MACZC,IAAI,EAAE5B,GAAG,CAAC4B,IAAI;MACdC,KAAK,EAAE7B,GAAG,CAAC6B,KAAK;MAChBC,MAAM,EAAE9B,GAAG,CAAC8B;IAChB;EAAE,gBAEFzC,KAAA,CAAAgC,aAAA,CAAC7B,IAAI;IACDuC,IAAI,EAAE7B,UAAU,IAAI,CAACc,SAAS,gBAAG3B,KAAA,CAAAgC,aAAA,CAAC1B,SAAS,MAAE,CAAC,gBAAGN,KAAA,CAAAgC,aAAA,CAAC3B,UAAU,MAAE,CAAE;IAChEsC,KAAK,EAAE;EAAc,CACxB,CACA,CACT,CAAC;AACL,CAAC,EACD,CAACC,IAAI,EAAEC,IAAI,KAAKrC,SAAS,CAACoC,IAAI,EAAEC,IAAI,CACxC,CAAC;AAEDpC,OAAO,CAACqC,WAAW,GAAG,SAAS","ignoreList":[]}

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface DropLineProps {
+    label: string;
+    top: number;
+    visible: boolean;
+    dimmed: boolean;
+}
+export declare function DropLine({ label, top, visible, dimmed }: DropLineProps): React.JSX.Element;
+export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","DropLine","label","top","visible","dimmed","createElement","className","style","display","justifyContent","height","zIndex","visibility","opacity","padding"],"sources":["DropLine.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface DropLineProps {\n    label: string;\n    top: number;\n    visible: boolean;\n    dimmed: boolean;\n}\n\nexport function DropLine({ label, top, visible, dimmed }: DropLineProps) {\n    return (\n        <div\n            className={\"wby-absolute wby-bg-primary-default wby-left-0 wby-right-0 wby-w-full\"}\n            style={{\n                display: \"flex\",\n                justifyContent: \"center\",\n                top,\n                height: 4,\n                zIndex: 10,\n                visibility: visible ? \"visible\" : \"hidden\",\n                opacity: dimmed ? 0.5 : 1\n            }}\n        >\n            <span className={\"wby-absolute wby-bg-primary-default wby-text-neutral-light\"} style={{ top: -10, padding: \"2px 8px\"}}>\n                {label}\n            </span>\n        </div>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,OAAO,SAASC,QAAQA,CAAC;EAAEC,KAAK;EAAEC,GAAG;EAAEC,OAAO;EAAEC;AAAsB,CAAC,EAAE;EACrE,oBACIL,KAAA,CAAAM,aAAA;IACIC,SAAS,EAAE,uEAAwE;IACnFC,KAAK,EAAE;MACHC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,QAAQ;MACxBP,GAAG;MACHQ,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,EAAE;MACVC,UAAU,EAAET,OAAO,GAAG,SAAS,GAAG,QAAQ;MAC1CU,OAAO,EAAET,MAAM,GAAG,GAAG,GAAG;IAC5B;EAAE,gBAEFL,KAAA,CAAAM,aAAA;IAAMC,SAAS,EAAE,4DAA6D;IAACC,KAAK,EAAE;MAAEL,GAAG,EAAE,CAAC,EAAE;MAAEY,OAAO,EAAE;IAAS;EAAE,GACjHb,KACC,CACL,CAAC;AAEd","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useDragLayer","DropLine","useIsDragging","useProximityDropzone","useElementComponentManifest","ComponentManifestToAstConverter","findMatchingAstNode","ElementDropLines","editorBox","previewBox","isFirst","componentManifest","parentId","draggingItem","monitor","getItem","isDragging","id","proximity","box","anyElementDragged","hoverBefore","position","hoverAfter","elementLabel","label","name","targetInputNode","parentSlot","undefined","inputsAst","convert","inputs","canAcceptComponent","type","slotInput","input","whitelistedComponents","components","length","includes","componentName","createElement","Fragment","top","visible","dimmed","height"],"sources":["ElementDropLines.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useDragLayer } from \"react-dnd\";\nimport { DropLine } from \"./DropLine\";\nimport { useIsDragging } from \"../useIsDragging\";\nimport { useProximityDropzone } from \"../useProximityDropzone\";\nimport { Box } from \"../Box\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest\";\nimport { ComponentManifestToAstConverter } from \"~/sdk/ComponentManifestToAstConverter\";\nimport { findMatchingAstNode } from \"~/sdk/findMatchingAstNode\";\nimport { SlotInput } from \"~/sdk/types\";\n\ninterface ElementDropZonesProps {\n    editorBox: Box;\n    previewBox: Box;\n    isFirst: boolean;\n    isHighlighted: boolean;\n}\n\nexport const ElementDropLines = ({ editorBox, previewBox, isFirst }: ElementDropZonesProps) => {\n    const componentManifest = useElementComponentManifest(previewBox.parentId);\n    const draggingItem = useDragLayer(monitor => monitor.getItem());\n    const isDragging = draggingItem && draggingItem.id === previewBox.id;\n\n    const { proximity } = useProximityDropzone({\n        id: previewBox.id,\n        box: editorBox\n    });\n\n    const anyElementDragged = useIsDragging();\n    const hoverBefore = proximity?.position === 0;\n    const hoverAfter = proximity?.position === 1;\n    const elementLabel = componentManifest?.label ?? componentManifest?.name ?? \"\";\n\n    const targetInputNode = useMemo(() => {\n        if (!proximity?.box.parentSlot) {\n            return undefined;\n        }\n\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest?.inputs ?? []);\n        return findMatchingAstNode(proximity?.box.parentSlot, inputsAst);\n    }, [proximity?.box.parentSlot]);\n\n    // Figure out if we are allowed to drop the current item into the dropzone.\n    let canAcceptComponent = true;\n    if (draggingItem && targetInputNode && targetInputNode.type === \"slot\") {\n        const slotInput = targetInputNode.input as SlotInput;\n        const whitelistedComponents = slotInput.components;\n        if (whitelistedComponents && whitelistedComponents.length > 0) {\n            canAcceptComponent = whitelistedComponents.includes(draggingItem?.componentName);\n        }\n    }\n\n    return anyElementDragged ? (\n        <>\n            {!isDragging && isFirst && (\n                <DropLine\n                    label={elementLabel}\n                    top={0}\n                    visible={hoverBefore && canAcceptComponent}\n                    dimmed={false}\n                />\n            )}\n            {!isDragging && (\n                <DropLine\n                    label={elementLabel}\n                    top={previewBox?.height - 2}\n                    visible={hoverAfter && canAcceptComponent}\n                    dimmed={false}\n                />\n            )}\n        </>\n    ) : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,QAAQ;AACjB,SAASC,aAAa;AACtB,SAASC,oBAAoB;AAE7B,SAASC,2BAA2B;AACpC,SAASC,+BAA+B;AACxC,SAASC,mBAAmB;AAU5B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,UAAU;EAAEC;AAA+B,CAAC,KAAK;EAC3F,MAAMC,iBAAiB,GAAGP,2BAA2B,CAACK,UAAU,CAACG,QAAQ,CAAC;EAC1E,MAAMC,YAAY,GAAGb,YAAY,CAACc,OAAO,IAAIA,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC;EAC/D,MAAMC,UAAU,GAAGH,YAAY,IAAIA,YAAY,CAACI,EAAE,KAAKR,UAAU,CAACQ,EAAE;EAEpE,MAAM;IAAEC;EAAU,CAAC,GAAGf,oBAAoB,CAAC;IACvCc,EAAE,EAAER,UAAU,CAACQ,EAAE;IACjBE,GAAG,EAAEX;EACT,CAAC,CAAC;EAEF,MAAMY,iBAAiB,GAAGlB,aAAa,CAAC,CAAC;EACzC,MAAMmB,WAAW,GAAGH,SAAS,EAAEI,QAAQ,KAAK,CAAC;EAC7C,MAAMC,UAAU,GAAGL,SAAS,EAAEI,QAAQ,KAAK,CAAC;EAC5C,MAAME,YAAY,GAAGb,iBAAiB,EAAEc,KAAK,IAAId,iBAAiB,EAAEe,IAAI,IAAI,EAAE;EAE9E,MAAMC,eAAe,GAAG5B,OAAO,CAAC,MAAM;IAClC,IAAI,CAACmB,SAAS,EAAEC,GAAG,CAACS,UAAU,EAAE;MAC5B,OAAOC,SAAS;IACpB;IAEA,MAAMC,SAAS,GAAGzB,+BAA+B,CAAC0B,OAAO,CAACpB,iBAAiB,EAAEqB,MAAM,IAAI,EAAE,CAAC;IAC1F,OAAO1B,mBAAmB,CAACY,SAAS,EAAEC,GAAG,CAACS,UAAU,EAAEE,SAAS,CAAC;EACpE,CAAC,EAAE,CAACZ,SAAS,EAAEC,GAAG,CAACS,UAAU,CAAC,CAAC;;EAE/B;EACA,IAAIK,kBAAkB,GAAG,IAAI;EAC7B,IAAIpB,YAAY,IAAIc,eAAe,IAAIA,eAAe,CAACO,IAAI,KAAK,MAAM,EAAE;IACpE,MAAMC,SAAS,GAAGR,eAAe,CAACS,KAAkB;IACpD,MAAMC,qBAAqB,GAAGF,SAAS,CAACG,UAAU;IAClD,IAAID,qBAAqB,IAAIA,qBAAqB,CAACE,MAAM,GAAG,CAAC,EAAE;MAC3DN,kBAAkB,GAAGI,qBAAqB,CAACG,QAAQ,CAAC3B,YAAY,EAAE4B,aAAa,CAAC;IACpF;EACJ;EAEA,OAAOrB,iBAAiB,gBACpBtB,KAAA,CAAA4C,aAAA,CAAA5C,KAAA,CAAA6C,QAAA,QACK,CAAC3B,UAAU,IAAIN,OAAO,iBACnBZ,KAAA,CAAA4C,aAAA,CAACzC,QAAQ;IACLwB,KAAK,EAAED,YAAa;IACpBoB,GAAG,EAAE,CAAE;IACPC,OAAO,EAAExB,WAAW,IAAIY,kBAAmB;IAC3Ca,MAAM,EAAE;EAAM,CACjB,CACJ,EACA,CAAC9B,UAAU,iBACRlB,KAAA,CAAA4C,aAAA,CAACzC,QAAQ;IACLwB,KAAK,EAAED,YAAa;IACpBoB,GAAG,EAAEnC,UAAU,EAAEsC,MAAM,GAAG,CAAE;IAC5BF,OAAO,EAAEtB,UAAU,IAAIU,kBAAmB;IAC1Ca,MAAM,EAAE;EAAM,CACjB,CAEP,CAAC,GACH,IAAI;AACZ,CAAC","ignoreList":[]}

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const ElementOverlays: (() => React.JSX.Element) & {
+    displayName: string;
+};

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

@@ -0,0 +1,152 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import React, { Fragment, useCallback, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import { useDrop } from "react-dnd";
+import { usePreviewData } from "../../../../hooks/usePreviewData";
+import { useSelectFromEditor } from "../../../../hooks/useSelectFromEditor";
+import { ElementOverlay } from "./ElementOverlay";
+import { useIsDragging } from "../useIsDragging";
+import { useDocumentEditor } from "../../../../../DocumentEditor";
+import { ElementDropLines } from "./ElementDropLines";
+import { DropBox } from "./DropBox";
+import { useDropZoneManager } from "../DropZoneManagerProvider";
+import { mergeRefs } from "../mergeRefs";
+import { Commands } from "../../../..";
+import { ComponentManifestToAstConverter } from "../../../../../sdk/ComponentManifestToAstConverter";
+import { findMatchingAstNode } from "../../../../../sdk/findMatchingAstNode";
+const OverlayContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1avjb810"
+} : {
+  target: "e1avjb810",
+  label: "OverlayContainer"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1bhccdb",
+  styles: "overflow:hidden;position:absolute;z-index:20"
+} : {
+  name: "1bhccdb",
+  styles: "overflow:hidden;position:absolute;z-index:20",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRPdmVybGF5cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0J5QiIsImZpbGUiOiJFbGVtZW50T3ZlcmxheXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZyYWdtZW50LCB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCB7IHVzZURyb3AgfSBmcm9tIFwicmVhY3QtZG5kXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdXNlUHJldmlld0RhdGEgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVByZXZpZXdEYXRhXCI7XG5pbXBvcnQgeyB1c2VTZWxlY3RGcm9tRWRpdG9yIH0gZnJvbSBcIn4vQmFzZUVkaXRvci9ob29rcy91c2VTZWxlY3RGcm9tRWRpdG9yXCI7XG5pbXBvcnQgeyBFbGVtZW50T3ZlcmxheSB9IGZyb20gXCIuL0VsZW1lbnRPdmVybGF5XCI7XG5pbXBvcnQgeyBQcmV2aWV3Vmlld3BvcnRJbmZvLCBTbG90SW5wdXQgfSBmcm9tIFwifi9zZGsvdHlwZXNcIjtcbmltcG9ydCB7IHVzZUlzRHJhZ2dpbmcgfSBmcm9tIFwiLi4vdXNlSXNEcmFnZ2luZ1wiO1xuaW1wb3J0IHsgQm94IH0gZnJvbSBcIi4uL0JveFwiO1xuaW1wb3J0IHsgRHJvcEV2ZW50IH0gZnJvbSBcIi4uL3VzZVByb3hpbWl0eURyb3B6b25lXCI7XG5pbXBvcnQgeyB1c2VEb2N1bWVudEVkaXRvciB9IGZyb20gXCJ+L0RvY3VtZW50RWRpdG9yXCI7XG5pbXBvcnQgeyBFbGVtZW50RHJvcExpbmVzIH0gZnJvbSBcIi4vRWxlbWVudERyb3BMaW5lc1wiO1xuaW1wb3J0IHsgRHJvcEJveCB9IGZyb20gXCIuL0Ryb3BCb3hcIjtcbmltcG9ydCB7IHVzZURyb3Bab25lTWFuYWdlciB9IGZyb20gXCIuLi9Ecm9wWm9uZU1hbmFnZXJQcm92aWRlclwiO1xuaW1wb3J0IHsgbWVyZ2VSZWZzIH0gZnJvbSBcIi4uL21lcmdlUmVmc1wiO1xuaW1wb3J0IHsgQ29tbWFuZHMgfSBmcm9tIFwifi9CYXNlRWRpdG9yXCI7XG5pbXBvcnQgeyBFZGl0b3IgfSBmcm9tIFwifi9lZGl0b3JTZGsvRWRpdG9yXCI7XG5pbXBvcnQgeyBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyIH0gZnJvbSBcIn4vc2RrL0NvbXBvbmVudE1hbmlmZXN0VG9Bc3RDb252ZXJ0ZXJcIjtcbmltcG9ydCB7IGZpbmRNYXRjaGluZ0FzdE5vZGUgfSBmcm9tIFwifi9zZGsvZmluZE1hdGNoaW5nQXN0Tm9kZVwiO1xuXG5jb25zdCBPdmVybGF5Q29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMjBcbn0pO1xuXG5jb25zdCBmaWx0ZXJWaXNpYmxlQm94ZXMgPSAodmlld3BvcnQ6IFByZXZpZXdWaWV3cG9ydEluZm8pID0+IHtcbiAgICByZXR1cm4gKGJveDogQm94KSA9PiB7XG4gICAgICAgIGNvbnN0IHZlcnRpY2FsbHlWaXNpYmxlID0gYm94LnRvcCArIGJveC5oZWlnaHQgPiAwICYmIGJveC50b3AgPCB2aWV3cG9ydC5oZWlnaHQ7XG5cbiAgICAgICAgY29uc3QgaG9yaXpvbnRhbGx5VmlzaWJsZSA9IGJveC5sZWZ0ICsgYm94LndpZHRoID4gMCAmJiBib3gubGVmdCA8IHZpZXdwb3J0LndpZHRoO1xuICAgICAgICByZXR1cm4gdmVydGljYWxseVZpc2libGUgJiYgaG9yaXpvbnRhbGx5VmlzaWJsZTtcbiAgICB9O1xufTtcblxuY29uc3QgZmlsdGVyRWxlbWVudHMgPSAoYm94OiBCb3gpID0+IHtcbiAgICByZXR1cm4gYm94LnR5cGUgPT09IFwiZWxlbWVudFwiICYmIGJveC5pZCAhPT0gXCJyb290XCI7XG59O1xuXG5jb25zdCBmaWx0ZXJTbG90cyA9IChib3g6IEJveCkgPT4ge1xuICAgIHJldHVybiBib3gudHlwZSA9PT0gXCJlbGVtZW50LXNsb3RcIjtcbn07XG5cbmV4cG9ydCBjb25zdCBFbGVtZW50T3ZlcmxheXMgPSBvYnNlcnZlcigoKSA9PiB7XG4gICAgY29uc3QgZHJvcHpvbmVNYW5hZ2VyID0gdXNlRHJvcFpvbmVNYW5hZ2VyKCk7XG4gICAgY29uc3QgZWRpdG9yID0gdXNlRG9jdW1lbnRFZGl0b3IoKTtcbiAgICBjb25zdCB7IGJveGVzLCB2aWV3cG9ydCB9ID0gdXNlUHJldmlld0RhdGEoKTtcbiAgICBjb25zdCBpc0RyYWdnaW5nID0gdXNlSXNEcmFnZ2luZygpO1xuICAgIGNvbnN0IHsgc2hvd092ZXJsYXlzLCBzZWxlY3RlZEVsZW1lbnQsIGhpZ2hsaWdodGVkRWxlbWVudCB9ID0gdXNlU2VsZWN0RnJvbUVkaXRvcihzdGF0ZSA9PiB7XG4gICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICBzaG93T3ZlcmxheXM6IHN0YXRlLnNob3dPdmVybGF5cyxcbiAgICAgICAgICAgIHNlbGVjdGVkRWxlbWVudDogc3RhdGUuc2VsZWN0ZWRFbGVtZW50LFxuICAgICAgICAgICAgaGlnaGxpZ2h0ZWRFbGVtZW50OiBzdGF0ZS5oaWdobGlnaHRlZEVsZW1lbnRcbiAgICAgICAgfTtcbiAgICB9KTtcblxuICAgIGNvbnN0IGRyb3BSZWYgPSB1c2VSZWY8SFRNTEVsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICAgIGNvbnN0IFssIGRyb3BdID0gdXNlRHJvcCgoKSA9PiAoe1xuICAgICAgICBhY2NlcHQ6IFwiRUxFTUVOVFwiLFxuICAgICAgICBkcm9wOiAoaXRlbTogYW55KSA9PiB7XG4gICAgICAgICAgICBjb25zdCB0YXJnZXQgPSBkcm9wem9uZU1hbmFnZXIuZ2V0TGFzdE1hdGNoZWRQb3NpdGlvbigpO1xuICAgICAgICAgICAgaWYgKHRhcmdldCkge1xuICAgICAgICAgICAgICAgIG9uRHJvcCh7IGl0ZW0sIHRhcmdldCB9KTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH0pKTtcblxuICAgIGRyb3AoZHJvcFJlZik7XG5cbiAgICBjb25zdCBjYW5Ecm9wQ29tcG9uZW50SW50b1RhcmdldCA9IChcbiAgICAgICAgZWRpdG9yOiBFZGl0b3IsXG4gICAgICAgIGNvbXBvbmVudE5hbWU6IHN0cmluZyxcbiAgICAgICAgdGFyZ2V0OiBEcm9wRXZlbnRbXCJ0YXJnZXRcIl1cbiAgICApID0+IHtcbiAgICAgICAgLy8gRGV0ZXJtaW5lIGNvbXBvbmVudCBtYW5pZmVzdCBmcm9tIGRyb3AgdGFyZ2V0LlxuICAgICAgICBjb25zdCBkb2N1bWVudCA9IGVkaXRvci5nZXREb2N1bWVudFN0YXRlKCkucmVhZCgpO1xuICAgICAgICBjb25zdCB7IGNvbXBvbmVudCB9ID0gZG9jdW1lbnQuZWxlbWVudHNbdGFyZ2V0LnBhcmVudElkXTtcbiAgICAgICAgY29uc3QgY29tcG9uZW50TWFuaWZlc3QgPSBlZGl0b3IuZ2V0RWRpdG9yU3RhdGUoKS5yZWFkKCkuY29tcG9uZW50c1tjb21wb25lbnQubmFtZV07XG5cbiAgICAgICAgLy8gRmluZCB0YXJnZXQgaW5wdXQgdXNpbmcgQVNULlxuICAgICAgICBjb25zdCBpbnB1dHNBc3QgPSBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyLmNvbnZlcnQoY29tcG9uZW50TWFuaWZlc3QuaW5wdXRzID8/IFtdKTtcbiAgICAgICAgY29uc3QgdGFyZ2V0SW5wdXROb2RlID0gZmluZE1hdGNoaW5nQXN0Tm9kZSh0YXJnZXQuc2xvdCwgaW5wdXRzQXN0KTtcblxuICAgICAgICBsZXQgY2FuQWNjZXB0Q29tcG9uZW50ID0gdGFyZ2V0SW5wdXROb2RlICE9PSB1bmRlZmluZWQ7XG4gICAgICAgIGlmICh0YXJnZXRJbnB1dE5vZGUpIHtcbiAgICAgICAgICAgIGNvbnN0IHNsb3RJbnB1dCA9IHRhcmdldElucHV0Tm9kZS5pbnB1dCBhcyBTbG90SW5wdXQ7XG4gICAgICAgICAgICBjb25zdCB3aGl0ZWxpc3RlZENvbXBvbmVudHMgPSBzbG90SW5wdXQuY29tcG9uZW50cztcbiAgICAgICAgICAgIGlmICh3aGl0ZWxpc3RlZENvbXBvbmVudHMgJiYgd2hpdGVsaXN0ZWRDb21wb25lbnRzLmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgICAgICBjYW5BY2NlcHRDb21wb25lbnQgPSB3aGl0ZWxpc3RlZENvbXBvbmVudHMuaW5jbHVkZXMoY29tcG9uZW50TmFtZSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIGNhbkFjY2VwdENvbXBvbmVudDtcbiAgICB9O1xuXG4gICAgY29uc3Qgb25Ecm9wID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICh7IGl0ZW0sIHRhcmdldCB9OiBEcm9wRXZlbnQpID0+IHtcbiAgICAgICAgICAgIGlmICghY2FuRHJvcENvbXBvbmVudEludG9UYXJnZXQoZWRpdG9yLCBpdGVtLmNvbXBvbmVudE5hbWUsIHRhcmdldCkpIHtcbiAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIGlmIChpdGVtLmlkKSB7XG4gICAgICAgICAgICAgICAgLy8gV2UncmUgbW92aW5nIGFuIGV4aXN0aW5nIGVsZW1lbnQuXG4gICAgICAgICAgICAgICAgZWRpdG9yLmV4ZWN1dGVDb21tYW5kKENvbW1hbmRzLk1vdmVFbGVtZW50LCB7XG4gICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZDogaXRlbS5pZCxcbiAgICAgICAgICAgICAgICAgICAgcGFyZW50SWQ6IHRhcmdldC5wYXJlbnRJZCxcbiAgICAgICAgICAgICAgICAgICAgc2xvdDogdGFyZ2V0LnNsb3QsXG4gICAgICAgICAgICAgICAgICAgIGluZGV4OiB0YXJnZXQuaW5kZXhcbiAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgLy8gV2UncmUgY3JlYXRpbmcgYSBuZXcgZWxlbWVudC5cbiAgICAgICAgICAgICAgICBlZGl0b3IuZXhlY3V0ZUNvbW1hbmQoQ29tbWFuZHMuQ3JlYXRlRWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgICBjb21wb25lbnROYW1lOiBpdGVtLmNvbXBvbmVudE5hbWUsXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudElkOiB0YXJnZXQucGFyZW50SWQsXG4gICAgICAgICAgICAgICAgICAgIHNsb3Q6IHRhcmdldC5zbG90LFxuICAgICAgICAgICAgICAgICAgICBpbmRleDogdGFyZ2V0LmluZGV4XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIFtlZGl0b3JdXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxPdmVybGF5Q29udGFpbmVyXG4gICAgICAgICAgICByZWY9e21lcmdlUmVmcyhkcm9wUmVmKX1cbiAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgd2lkdGg6IGAke3ZpZXdwb3J0LndpZHRofXB4YCxcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IGAke3ZpZXdwb3J0LmhlaWdodH1weGAsXG4gICAgICAgICAgICAgICAgZGlzcGxheTogc2hvd092ZXJsYXlzID8gXCJibG9ja1wiIDogXCJub25lXCIsXG4gICAgICAgICAgICAgICAgcG9pbnRlckV2ZW50czogaXNEcmFnZ2luZyA/IFwiYXV0b1wiIDogXCJub25lXCJcbiAgICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICAgIHtib3hlcy5wcmV2aWV3XG4gICAgICAgICAgICAgICAgLmZpbHRlcihmaWx0ZXJFbGVtZW50cylcbiAgICAgICAgICAgICAgICAuZmlsdGVyKGZpbHRlclZpc2libGVCb3hlcyh2aWV3cG9ydCkpXG4gICAgICAgICAgICAgICAgLm1hcChib3ggPT4gKFxuICAgICAgICAgICAgICAgICAgICA8RnJhZ21lbnQga2V5PXtib3guaWR9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPEVsZW1lbnRPdmVybGF5XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlbWVudElkPXtib3guaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaXNTZWxlY3RlZD17c2VsZWN0ZWRFbGVtZW50ID09PSBib3guaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17aGlnaGxpZ2h0ZWRFbGVtZW50ID09PSBib3guaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcHJldmlld0JveD17Ym94fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVkaXRvckJveD17Ym94ZXMuZWRpdG9yLmdldChib3guaWQpIX1cbiAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8RWxlbWVudERyb3BMaW5lc1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaXNGaXJzdD17Ym94LnBhcmVudEluZGV4ID09PSAwfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17aGlnaGxpZ2h0ZWRFbGVtZW50ID09PSBib3guaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlZGl0b3JCb3g9e2JveGVzLmVkaXRvci5nZXQoYm94LmlkKSF9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBwcmV2aWV3Qm94PXtib3h9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0VsZW1lbnRPdmVybGF5PlxuICAgICAgICAgICAgICAgICAgICA8L0ZyYWdtZW50PlxuICAgICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAge2JveGVzLnByZXZpZXdcbiAgICAgICAgICAgICAgICAuZmlsdGVyKGZpbHRlclNsb3RzKVxuICAgICAgICAgICAgICAgIC5maWx0ZXIoZmlsdGVyVmlzaWJsZUJveGVzKHZpZXdwb3J0KSlcbiAgICAgICAgICAgICAgICAubWFwKGJveCA9PiAoXG4gICAgICAgICAgICAgICAgICAgIDxEcm9wQm94IGtleT17Ym94LmlkfSBib3g9e2JveH0gb25Ecm9wPXtvbkRyb3B9IC8+XG4gICAgICAgICAgICAgICAgKSl9XG4gICAgICAgIDwvT3ZlcmxheUNvbnRhaW5lcj5cbiAgICApO1xufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const filterVisibleBoxes = viewport => {
+  return box => {
+    const verticallyVisible = box.top + box.height > 0 && box.top < viewport.height;
+    const horizontallyVisible = box.left + box.width > 0 && box.left < viewport.width;
+    return verticallyVisible && horizontallyVisible;
+  };
+};
+const filterElements = box => {
+  return box.type === "element" && box.id !== "root";
+};
+const filterSlots = box => {
+  return box.type === "element-slot";
+};
+export const ElementOverlays = observer(() => {
+  const dropzoneManager = useDropZoneManager();
+  const editor = useDocumentEditor();
+  const {
+    boxes,
+    viewport
+  } = usePreviewData();
+  const isDragging = useIsDragging();
+  const {
+    showOverlays,
+    selectedElement,
+    highlightedElement
+  } = useSelectFromEditor(state => {
+    return {
+      showOverlays: state.showOverlays,
+      selectedElement: state.selectedElement,
+      highlightedElement: state.highlightedElement
+    };
+  });
+  const dropRef = useRef(null);
+  const [, drop] = useDrop(() => ({
+    accept: "ELEMENT",
+    drop: item => {
+      const target = dropzoneManager.getLastMatchedPosition();
+      if (target) {
+        onDrop({
+          item,
+          target
+        });
+      }
+    }
+  }));
+  drop(dropRef);
+  const canDropComponentIntoTarget = (editor, componentName, target) => {
+    // Determine component manifest from drop target.
+    const document = editor.getDocumentState().read();
+    const {
+      component
+    } = document.elements[target.parentId];
+    const componentManifest = editor.getEditorState().read().components[component.name];
+
+    // Find target input using AST.
+    const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
+    const targetInputNode = findMatchingAstNode(target.slot, inputsAst);
+    let canAcceptComponent = targetInputNode !== undefined;
+    if (targetInputNode) {
+      const slotInput = targetInputNode.input;
+      const whitelistedComponents = slotInput.components;
+      if (whitelistedComponents && whitelistedComponents.length > 0) {
+        canAcceptComponent = whitelistedComponents.includes(componentName);
+      }
+    }
+    return canAcceptComponent;
+  };
+  const onDrop = useCallback(({
+    item,
+    target
+  }) => {
+    if (!canDropComponentIntoTarget(editor, item.componentName, target)) {
+      return;
+    }
+    if (item.id) {
+      // We're moving an existing element.
+      editor.executeCommand(Commands.MoveElement, {
+        elementId: item.id,
+        parentId: target.parentId,
+        slot: target.slot,
+        index: target.index
+      });
+    } else {
+      // We're creating a new element.
+      editor.executeCommand(Commands.CreateElement, {
+        componentName: item.componentName,
+        parentId: target.parentId,
+        slot: target.slot,
+        index: target.index
+      });
+    }
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(OverlayContainer, {
+    ref: mergeRefs(dropRef),
+    style: {
+      width: `${viewport.width}px`,
+      height: `${viewport.height}px`,
+      display: showOverlays ? "block" : "none",
+      pointerEvents: isDragging ? "auto" : "none"
+    }
+  }, boxes.preview.filter(filterElements).filter(filterVisibleBoxes(viewport)).map(box => /*#__PURE__*/React.createElement(Fragment, {
+    key: box.id
+  }, /*#__PURE__*/React.createElement(ElementOverlay, {
+    elementId: box.id,
+    isSelected: selectedElement === box.id,
+    isHighlighted: highlightedElement === box.id,
+    previewBox: box,
+    editorBox: boxes.editor.get(box.id)
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementDropLines, {
+    isFirst: box.parentIndex === 0,
+    isHighlighted: highlightedElement === box.id,
+    editorBox: boxes.editor.get(box.id),
+    previewBox: box
+  }))))), boxes.preview.filter(filterSlots).filter(filterVisibleBoxes(viewport)).map(box => /*#__PURE__*/React.createElement(DropBox, {
+    key: box.id,
+    box: box,
+    onDrop: onDrop
+  })));
+});
+
+//# sourceMappingURL=ElementOverlays.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","useCallback","useRef","observer","useDrop","usePreviewData","useSelectFromEditor","ElementOverlay","useIsDragging","useDocumentEditor","ElementDropLines","DropBox","useDropZoneManager","mergeRefs","Commands","ComponentManifestToAstConverter","findMatchingAstNode","OverlayContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","filterVisibleBoxes","viewport","box","verticallyVisible","top","height","horizontallyVisible","left","width","filterElements","type","id","filterSlots","ElementOverlays","dropzoneManager","editor","boxes","isDragging","showOverlays","selectedElement","highlightedElement","state","dropRef","drop","accept","item","getLastMatchedPosition","onDrop","canDropComponentIntoTarget","componentName","document","getDocumentState","read","component","elements","parentId","componentManifest","getEditorState","components","inputsAst","convert","inputs","targetInputNode","slot","canAcceptComponent","undefined","slotInput","input","whitelistedComponents","length","includes","executeCommand","MoveElement","elementId","index","CreateElement","createElement","ref","style","display","pointerEvents","preview","filter","key","isSelected","isHighlighted","previewBox","editorBox","get","isFirst","parentIndex"],"sources":["ElementOverlays.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDrop } from \"react-dnd\";\nimport styled from \"@emotion/styled\";\n\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { ElementOverlay } from \"./ElementOverlay\";\nimport { PreviewViewportInfo, SlotInput } from \"~/sdk/types\";\nimport { useIsDragging } from \"../useIsDragging\";\nimport { Box } from \"../Box\";\nimport { DropEvent } from \"../useProximityDropzone\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { ElementDropLines } from \"./ElementDropLines\";\nimport { DropBox } from \"./DropBox\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider\";\nimport { mergeRefs } from \"../mergeRefs\";\nimport { Commands } from \"~/BaseEditor\";\nimport { Editor } from \"~/editorSdk/Editor\";\nimport { ComponentManifestToAstConverter } from \"~/sdk/ComponentManifestToAstConverter\";\nimport { findMatchingAstNode } from \"~/sdk/findMatchingAstNode\";\n\nconst OverlayContainer = styled(\"div\")({\n    overflow: \"hidden\",\n    position: \"absolute\",\n    zIndex: 20\n});\n\nconst filterVisibleBoxes = (viewport: PreviewViewportInfo) => {\n    return (box: Box) => {\n        const verticallyVisible = box.top + box.height > 0 && box.top < viewport.height;\n\n        const horizontallyVisible = box.left + box.width > 0 && box.left < viewport.width;\n        return verticallyVisible && horizontallyVisible;\n    };\n};\n\nconst filterElements = (box: Box) => {\n    return box.type === \"element\" && box.id !== \"root\";\n};\n\nconst filterSlots = (box: Box) => {\n    return box.type === \"element-slot\";\n};\n\nexport const ElementOverlays = observer(() => {\n    const dropzoneManager = useDropZoneManager();\n    const editor = useDocumentEditor();\n    const { boxes, viewport } = usePreviewData();\n    const isDragging = useIsDragging();\n    const { showOverlays, selectedElement, highlightedElement } = useSelectFromEditor(state => {\n        return {\n            showOverlays: state.showOverlays,\n            selectedElement: state.selectedElement,\n            highlightedElement: state.highlightedElement\n        };\n    });\n\n    const dropRef = useRef<HTMLElement | null>(null);\n\n    const [, drop] = useDrop(() => ({\n        accept: \"ELEMENT\",\n        drop: (item: any) => {\n            const target = dropzoneManager.getLastMatchedPosition();\n            if (target) {\n                onDrop({ item, target });\n            }\n        }\n    }));\n\n    drop(dropRef);\n\n    const canDropComponentIntoTarget = (\n        editor: Editor,\n        componentName: string,\n        target: DropEvent[\"target\"]\n    ) => {\n        // Determine component manifest from drop target.\n        const document = editor.getDocumentState().read();\n        const { component } = document.elements[target.parentId];\n        const componentManifest = editor.getEditorState().read().components[component.name];\n\n        // Find target input using AST.\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        const targetInputNode = findMatchingAstNode(target.slot, inputsAst);\n\n        let canAcceptComponent = targetInputNode !== undefined;\n        if (targetInputNode) {\n            const slotInput = targetInputNode.input as SlotInput;\n            const whitelistedComponents = slotInput.components;\n            if (whitelistedComponents && whitelistedComponents.length > 0) {\n                canAcceptComponent = whitelistedComponents.includes(componentName);\n            }\n        }\n        return canAcceptComponent;\n    };\n\n    const onDrop = useCallback(\n        ({ item, target }: DropEvent) => {\n            if (!canDropComponentIntoTarget(editor, item.componentName, target)) {\n                return;\n            }\n\n            if (item.id) {\n                // We're moving an existing element.\n                editor.executeCommand(Commands.MoveElement, {\n                    elementId: item.id,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            } else {\n                // We're creating a new element.\n                editor.executeCommand(Commands.CreateElement, {\n                    componentName: item.componentName,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            }\n        },\n        [editor]\n    );\n\n    return (\n        <OverlayContainer\n            ref={mergeRefs(dropRef)}\n            style={{\n                width: `${viewport.width}px`,\n                height: `${viewport.height}px`,\n                display: showOverlays ? \"block\" : \"none\",\n                pointerEvents: isDragging ? \"auto\" : \"none\"\n            }}\n        >\n            {boxes.preview\n                .filter(filterElements)\n                .filter(filterVisibleBoxes(viewport))\n                .map(box => (\n                    <Fragment key={box.id}>\n                        <ElementOverlay\n                            elementId={box.id}\n                            isSelected={selectedElement === box.id}\n                            isHighlighted={highlightedElement === box.id}\n                            previewBox={box}\n                            editorBox={boxes.editor.get(box.id)!}\n                        >\n                            <>\n                                <ElementDropLines\n                                    isFirst={box.parentIndex === 0}\n                                    isHighlighted={highlightedElement === box.id}\n                                    editorBox={boxes.editor.get(box.id)!}\n                                    previewBox={box}\n                                />\n                            </>\n                        </ElementOverlay>\n                    </Fragment>\n                ))}\n            {boxes.preview\n                .filter(filterSlots)\n                .filter(filterVisibleBoxes(viewport))\n                .map(box => (\n                    <DropBox key={box.id} box={box} onDrop={onDrop} />\n                ))}\n        </OverlayContainer>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

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

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