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

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

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import { Input } from "@webiny/admin-ui";
+import { BreakpointSelector } from "./BreakpointSelector";
+import { PreviewInNewTab } from "./AddressBar/PreviewInNewTab";
+import { OpenInNewTab } from "./AddressBar/OpenInNewTab";
+import { RefreshIframe } from "./AddressBar/RefreshIframe";
+import { useGetWebsiteBuilderSettings } from "../../../../features";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+export const AddressBar = () => {
+  const path = useSelectFromDocument(document => {
+    return document.properties.path;
+  });
+  const {
+    getSettings
+  } = useGetWebsiteBuilderSettings();
+  const [addressBarUrl, setAddressBarUrl] = useState("");
+  useEffect(() => {
+    getSettings().then(settings => {
+      setAddressBarUrl(`${settings.previewDomain}${path}`);
+    });
+  }, [path]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full wby-h-[49px] wby-flex wby-flex-row wby-p-sm wby-bg-neutral-base wby-border-solid wby-border-b-sm wby-border-neutral-dimmed"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-relative wby-flex-auto wby-mr-sm"
+  }, /*#__PURE__*/React.createElement(Input, {
+    variant: "secondary",
+    value: addressBarUrl,
+    disabled: true,
+    size: "md"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wby-absolute wby-right-0 wby-top-0"
+  }, /*#__PURE__*/React.createElement(RefreshIframe, null), /*#__PURE__*/React.createElement(PreviewInNewTab, null), /*#__PURE__*/React.createElement(OpenInNewTab, null))), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex-none"
+  }, /*#__PURE__*/React.createElement(BreakpointSelector, null)));
+};
+
+//# sourceMappingURL=AddressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","Input","BreakpointSelector","PreviewInNewTab","OpenInNewTab","RefreshIframe","useGetWebsiteBuilderSettings","useSelectFromDocument","AddressBar","path","document","properties","getSettings","addressBarUrl","setAddressBarUrl","then","settings","previewDomain","createElement","className","variant","value","disabled","size"],"sources":["AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { BreakpointSelector } from \"./BreakpointSelector\";\nimport { PreviewInNewTab } from \"./AddressBar/PreviewInNewTab\";\nimport { OpenInNewTab } from \"./AddressBar/OpenInNewTab\";\nimport { RefreshIframe } from \"./AddressBar/RefreshIframe\";\nimport { useGetWebsiteBuilderSettings } from \"~/features\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\n\nexport const AddressBar = () => {\n    const path = useSelectFromDocument(document => {\n        return document.properties.path;\n    });\n\n    const { getSettings } = useGetWebsiteBuilderSettings();\n    const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n    useEffect(() => {\n        getSettings().then(settings => {\n            setAddressBarUrl(`${settings.previewDomain}${path}`);\n        });\n    }, [path]);\n\n    return (\n        <div className=\"wby-w-full wby-h-[49px] wby-flex wby-flex-row wby-p-sm wby-bg-neutral-base wby-border-solid wby-border-b-sm wby-border-neutral-dimmed\">\n            <div className={\"wby-relative wby-flex-auto wby-mr-sm\"}>\n                <Input variant={\"secondary\"} value={addressBarUrl} disabled={true} size={\"md\"} />\n                <div className={\"wby-absolute wby-right-0 wby-top-0\"}>\n                    <RefreshIframe />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n            <div className={\"wby-flex-none\"}>\n                <BreakpointSelector />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,kBAAkB;AAC3B,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,4BAA4B;AACrC,SAASC,qBAAqB;AAE9B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAMC,IAAI,GAAGF,qBAAqB,CAACG,QAAQ,IAAI;IAC3C,OAAOA,QAAQ,CAACC,UAAU,CAACF,IAAI;EACnC,CAAC,CAAC;EAEF,MAAM;IAAEG;EAAY,CAAC,GAAGN,4BAA4B,CAAC,CAAC;EACtD,MAAM,CAACO,aAAa,EAAEC,gBAAgB,CAAC,GAAGd,QAAQ,CAAS,EAAE,CAAC;EAE9DD,SAAS,CAAC,MAAM;IACZa,WAAW,CAAC,CAAC,CAACG,IAAI,CAACC,QAAQ,IAAI;MAC3BF,gBAAgB,CAAC,GAAGE,QAAQ,CAACC,aAAa,GAAGR,IAAI,EAAE,CAAC;IACxD,CAAC,CAAC;EACN,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACIX,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAC;EAAuI,gBAClJrB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAuC,gBACnDrB,KAAA,CAAAoB,aAAA,CAACjB,KAAK;IAACmB,OAAO,EAAE,WAAY;IAACC,KAAK,EAAER,aAAc;IAACS,QAAQ,EAAE,IAAK;IAACC,IAAI,EAAE;EAAK,CAAE,CAAC,eACjFzB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAqC,gBACjDrB,KAAA,CAAAoB,aAAA,CAACb,aAAa,MAAE,CAAC,eACjBP,KAAA,CAAAoB,aAAA,CAACf,eAAe,MAAE,CAAC,eACnBL,KAAA,CAAAoB,aAAA,CAACd,YAAY,MAAE,CACd,CACJ,CAAC,eACNN,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAgB,gBAC5BrB,KAAA,CAAAoB,aAAA,CAAChB,kBAAkB,MAAE,CACpB,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -0,0 +1,19 @@
+import { BoxData } from "../../../../sdk/types";
+export declare class Box {
+    private readonly box;
+    private readonly _id;
+    constructor(id: string, box: BoxData);
+    get id(): string;
+    get type(): "element" | "element-slot";
+    get depth(): number;
+    get parentId(): string;
+    get parentSlot(): string;
+    get parentIndex(): number;
+    get top(): number;
+    get left(): number;
+    get width(): number;
+    get height(): number;
+    get bottom(): number;
+    get right(): number;
+    toObject(): BoxData;
+}

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

@@ -0,0 +1,47 @@
+export class Box {
+  constructor(id, box) {
+    this._id = id;
+    this.box = box;
+  }
+  get id() {
+    return this._id;
+  }
+  get type() {
+    return this.box.type;
+  }
+  get depth() {
+    return this.box.depth;
+  }
+  get parentId() {
+    return this.box.parentId;
+  }
+  get parentSlot() {
+    return this.box.parentSlot;
+  }
+  get parentIndex() {
+    return this.box.parentIndex;
+  }
+  get top() {
+    return this.box.top;
+  }
+  get left() {
+    return this.box.left;
+  }
+  get width() {
+    return this.box.width;
+  }
+  get height() {
+    return this.box.height;
+  }
+  get bottom() {
+    return this.top + this.height;
+  }
+  get right() {
+    return this.left + this.width;
+  }
+  toObject() {
+    return this.box;
+  }
+}
+
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Box","constructor","id","box","_id","type","depth","parentId","parentSlot","parentIndex","top","left","width","height","bottom","right","toObject"],"sources":["Box.ts"],"sourcesContent":["import { BoxData } from \"~/sdk/types\";\n\nexport class Box {\n    private readonly box: BoxData;\n    private readonly _id: string;\n\n    constructor(id: string, box: BoxData) {\n        this._id = id;\n        this.box = box;\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get type() {\n        return this.box.type;\n    }\n\n    get depth() {\n        return this.box.depth;\n    }\n\n    get parentId() {\n        return this.box.parentId;\n    }\n\n    get parentSlot() {\n        return this.box.parentSlot;\n    }\n\n    get parentIndex() {\n        return this.box.parentIndex;\n    }\n\n    get top() {\n        return this.box.top;\n    }\n\n    get left() {\n        return this.box.left;\n    }\n\n    get width() {\n        return this.box.width;\n    }\n\n    get height() {\n        return this.box.height;\n    }\n\n    get bottom() {\n        return this.top + this.height;\n    }\n\n    get right() {\n        return this.left + this.width;\n    }\n\n    toObject(): BoxData {\n        return this.box;\n    }\n}\n"],"mappings":"AAEA,OAAO,MAAMA,GAAG,CAAC;EAIbC,WAAWA,CAACC,EAAU,EAAEC,GAAY,EAAE;IAClC,IAAI,CAACC,GAAG,GAAGF,EAAE;IACb,IAAI,CAACC,GAAG,GAAGA,GAAG;EAClB;EAEA,IAAID,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACE,GAAG;EACnB;EAEA,IAAIC,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACF,GAAG,CAACE,IAAI;EACxB;EAEA,IAAIC,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACH,GAAG,CAACG,KAAK;EACzB;EAEA,IAAIC,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACJ,GAAG,CAACI,QAAQ;EAC5B;EAEA,IAAIC,UAAUA,CAAA,EAAG;IACb,OAAO,IAAI,CAACL,GAAG,CAACK,UAAU;EAC9B;EAEA,IAAIC,WAAWA,CAAA,EAAG;IACd,OAAO,IAAI,CAACN,GAAG,CAACM,WAAW;EAC/B;EAEA,IAAIC,GAAGA,CAAA,EAAG;IACN,OAAO,IAAI,CAACP,GAAG,CAACO,GAAG;EACvB;EAEA,IAAIC,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACR,GAAG,CAACQ,IAAI;EACxB;EAEA,IAAIC,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACT,GAAG,CAACS,KAAK;EACzB;EAEA,IAAIC,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACV,GAAG,CAACU,MAAM;EAC1B;EAEA,IAAIC,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACJ,GAAG,GAAG,IAAI,CAACG,MAAM;EACjC;EAEA,IAAIE,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACJ,IAAI,GAAG,IAAI,CAACC,KAAK;EACjC;EAEAI,QAAQA,CAAA,EAAY;IAChB,OAAO,IAAI,CAACb,GAAG;EACnB;AACJ","ignoreList":[]}

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

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

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

@@ -0,0 +1,35 @@
+import React from "react";
+import classNames from "classnames";
+import { IconButton, Tooltip, Text, Heading } from "@webiny/admin-ui";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+export const BreakpointSelector = () => {
+  const {
+    breakpoint,
+    breakpoints,
+    setBreakpoint
+  } = useBreakpoint();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-align-right wby-bg-neutral-light wby-rounded-md"
+  }, breakpoints.map(bp => {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: bp.name,
+      content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+        level: 5
+      }, bp.title), /*#__PURE__*/React.createElement(Text, {
+        size: "md"
+      }, bp.description)),
+      side: "bottom",
+      className: classNames("action-wrapper", {
+        active: bp === breakpoint
+      }),
+      trigger: /*#__PURE__*/React.createElement(IconButton, {
+        size: "md",
+        icon: bp.icon,
+        variant: breakpoint.name === bp.name ? "tertiary" : "ghost",
+        onClick: () => setBreakpoint(bp.name)
+      })
+    });
+  }));
+};
+
+//# sourceMappingURL=BreakpointSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","classNames","IconButton","Tooltip","Text","Heading","useBreakpoint","BreakpointSelector","breakpoint","breakpoints","setBreakpoint","createElement","className","map","bp","key","name","content","level","title","size","description","side","active","trigger","icon","variant","onClick"],"sources":["BreakpointSelector.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { IconButton, Tooltip, Text, Heading } from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\n\nexport const BreakpointSelector = () => {\n    const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();\n\n    return (\n        <div className={\"wby-align-right wby-bg-neutral-light wby-rounded-md\"}>\n            {breakpoints.map(bp => {\n                return (\n                    <Tooltip\n                        key={bp.name}\n                        content={\n                            <div>\n                                <Heading level={5}>{bp.title}</Heading>\n                                <Text size=\"md\">{bp.description}</Text>\n                            </div>\n                        }\n                        side=\"bottom\"\n                        className={classNames(\"action-wrapper\", {\n                            active: bp === breakpoint\n                        })}\n                        trigger={\n                            <IconButton\n                                size={\"md\"}\n                                icon={bp.icon}\n                                variant={breakpoint.name === bp.name ? \"tertiary\" : \"ghost\"}\n                                onClick={() => setBreakpoint(bp.name)}\n                            />\n                        }\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AACrE,SAASC,aAAa;AAEtB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC,UAAU;IAAEC,WAAW;IAAEC;EAAc,CAAC,GAAGJ,aAAa,CAAC,CAAC;EAElE,oBACIN,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAE;EAAsD,GACjEH,WAAW,CAACI,GAAG,CAACC,EAAE,IAAI;IACnB,oBACId,KAAA,CAAAW,aAAA,CAACR,OAAO;MACJY,GAAG,EAAED,EAAE,CAACE,IAAK;MACbC,OAAO,eACHjB,KAAA,CAAAW,aAAA,2BACIX,KAAA,CAAAW,aAAA,CAACN,OAAO;QAACa,KAAK,EAAE;MAAE,GAAEJ,EAAE,CAACK,KAAe,CAAC,eACvCnB,KAAA,CAAAW,aAAA,CAACP,IAAI;QAACgB,IAAI,EAAC;MAAI,GAAEN,EAAE,CAACO,WAAkB,CACrC,CACR;MACDC,IAAI,EAAC,QAAQ;MACbV,SAAS,EAAEX,UAAU,CAAC,gBAAgB,EAAE;QACpCsB,MAAM,EAAET,EAAE,KAAKN;MACnB,CAAC,CAAE;MACHgB,OAAO,eACHxB,KAAA,CAAAW,aAAA,CAACT,UAAU;QACPkB,IAAI,EAAE,IAAK;QACXK,IAAI,EAAEX,EAAE,CAACW,IAAK;QACdC,OAAO,EAAElB,UAAU,CAACQ,IAAI,KAAKF,EAAE,CAACE,IAAI,GAAG,UAAU,GAAG,OAAQ;QAC5DW,OAAO,EAAEA,CAAA,KAAMjB,aAAa,CAACI,EAAE,CAACE,IAAI;MAAE,CACzC;IACJ,CACJ,CAAC;EAEV,CAAC,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { Preview } from "./Preview";
+export const DocumentPreview = () => {
+  const {
+    id
+  } = useSelectFromDocument(document => {
+    return {
+      id: document.id
+    };
+  });
+  return /*#__PURE__*/React.createElement(Preview, {
+    key: id
+  });
+};
+
+//# sourceMappingURL=DocumentPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSelectFromDocument","Preview","DocumentPreview","id","document","createElement","key"],"sources":["DocumentPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { Preview } from \"./Preview\";\n\nexport const DocumentPreview = () => {\n    const { id } = useSelectFromDocument(document => {\n        return { id: document.id };\n    });\n\n    return <Preview key={id} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,qBAAqB;AAC9B,SAASC,OAAO;AAEhB,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM;IAAEC;EAAG,CAAC,GAAGH,qBAAqB,CAACI,QAAQ,IAAI;IAC7C,OAAO;MAAED,EAAE,EAAEC,QAAQ,CAACD;IAAG,CAAC;EAC9B,CAAC,CAAC;EAEF,oBAAOJ,KAAA,CAAAM,aAAA,CAACJ,OAAO;IAACK,GAAG,EAAEH;EAAG,CAAE,CAAC;AAC/B,CAAC","ignoreList":[]}

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

@@ -0,0 +1,34 @@
+import { Box } from "./Box";
+type DropPosition = number | null;
+export interface DropZoneProximity {
+    box: Box;
+    position: DropPosition;
+}
+interface DropzoneEntry {
+    id: string;
+    box: Box;
+    onProximityChange: (proximity: DropZoneProximity | null) => void;
+}
+export declare class DropZoneManager {
+    private mouse;
+    private zones;
+    private currentTargetId;
+    private currentPosition;
+    private animationFrame;
+    private currentBox;
+    constructor(mouse: {
+        x: number;
+        y: number;
+    });
+    register(entry: DropzoneEntry): void;
+    unregister(id: string): void;
+    start(): void;
+    stop(): void;
+    getLastMatchedPosition(): {
+        parentId: string;
+        slot: string;
+        index: number;
+    } | null;
+    tick(): void;
+}
+export {};

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

@@ -0,0 +1,83 @@
+export class DropZoneManager {
+  zones = new Map();
+  currentTargetId = null;
+  currentPosition = null;
+  animationFrame = null;
+  currentBox = null;
+  constructor(mouse) {
+    this.mouse = mouse;
+  }
+  register(entry) {
+    if (entry.id === "root") {
+      return;
+    }
+    this.zones.set(entry.id, entry);
+  }
+  unregister(id) {
+    this.zones.delete(id);
+  }
+  start() {
+    const runDropzoneLoop = () => {
+      this.tick();
+      this.animationFrame = requestAnimationFrame(runDropzoneLoop);
+    };
+    this.animationFrame = requestAnimationFrame(runDropzoneLoop);
+  }
+  stop() {
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+    }
+  }
+  getLastMatchedPosition() {
+    if (!this.currentBox) {
+      return null;
+    }
+    return {
+      parentId: this.currentBox.parentId,
+      slot: this.currentBox.parentSlot,
+      index: this.currentBox.parentIndex + (this.currentPosition ?? 0)
+    };
+  }
+  tick() {
+    const threshold = 10;
+    const mouseX = this.mouse.x;
+    const mouseY = this.mouse.y;
+    let matchedId = null;
+    let matchedPosition = null;
+    let matchedBox = null;
+    for (const [id, {
+      box
+    }] of this.zones) {
+      const isWithinX = mouseX >= box.left && mouseX <= box.right;
+      if (!isWithinX) {
+        continue;
+      }
+      if (mouseY >= box.top - threshold && mouseY <= box.top + threshold) {
+        matchedId = id;
+        matchedPosition = 0; // before
+        matchedBox = box;
+        break;
+      }
+      if (mouseY >= box.bottom - threshold && mouseY <= box.bottom + threshold) {
+        matchedId = id;
+        matchedPosition = 1; // after
+        matchedBox = box;
+        break;
+      }
+    }
+    if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {
+      this.currentTargetId = matchedId;
+      this.currentPosition = matchedPosition;
+      this.currentBox = matchedBox;
+      for (const [id, entry] of this.zones) {
+        const isTarget = id === matchedId;
+        entry.onProximityChange(isTarget ? {
+          box: matchedBox,
+          position: matchedPosition
+        } : null);
+      }
+    }
+  }
+}
+
+//# sourceMappingURL=DropZoneManager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["DropZoneManager","zones","Map","currentTargetId","currentPosition","animationFrame","currentBox","constructor","mouse","register","entry","id","set","unregister","delete","start","runDropzoneLoop","tick","requestAnimationFrame","stop","cancelAnimationFrame","getLastMatchedPosition","parentId","slot","parentSlot","index","parentIndex","threshold","mouseX","x","mouseY","y","matchedId","matchedPosition","matchedBox","box","isWithinX","left","right","top","bottom","isTarget","onProximityChange","position"],"sources":["DropZoneManager.ts"],"sourcesContent":["import { Box } from \"./Box\";\n\ntype DropPosition = number | null;\n\nexport interface DropZoneProximity {\n    box: Box;\n    position: DropPosition;\n}\n\ninterface DropzoneEntry {\n    id: string;\n    box: Box;\n    onProximityChange: (proximity: DropZoneProximity | null) => void;\n}\n\nexport class DropZoneManager {\n    private zones = new Map<string, DropzoneEntry>();\n    private currentTargetId: string | null = null;\n    private currentPosition: DropPosition = null;\n    private animationFrame: number | null = null;\n    private currentBox: Box | null = null;\n\n    constructor(private mouse: { x: number; y: number }) {}\n\n    register(entry: DropzoneEntry) {\n        if (entry.id === \"root\") {\n            return;\n        }\n\n        this.zones.set(entry.id, entry);\n    }\n\n    unregister(id: string) {\n        this.zones.delete(id);\n    }\n\n    start() {\n        const runDropzoneLoop = () => {\n            this.tick();\n            this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n        };\n        this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n    }\n\n    stop() {\n        if (this.animationFrame) {\n            cancelAnimationFrame(this.animationFrame);\n        }\n    }\n\n    getLastMatchedPosition() {\n        if (!this.currentBox) {\n            return null;\n        }\n\n        return {\n            parentId: this.currentBox.parentId,\n            slot: this.currentBox.parentSlot,\n            index: this.currentBox.parentIndex + (this.currentPosition ?? 0)\n        };\n    }\n\n    tick() {\n        const threshold = 10;\n        const mouseX = this.mouse.x;\n        const mouseY = this.mouse.y;\n\n        let matchedId: string | null = null;\n        let matchedPosition: DropPosition = null;\n        let matchedBox: Box | null = null;\n\n        for (const [id, { box }] of this.zones) {\n            const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n            if (!isWithinX) {\n                continue;\n            }\n\n            if (mouseY >= box.top - threshold && mouseY <= box.top + threshold) {\n                matchedId = id;\n                matchedPosition = 0; // before\n                matchedBox = box;\n                break;\n            }\n\n            if (mouseY >= box.bottom - threshold && mouseY <= box.bottom + threshold) {\n                matchedId = id;\n                matchedPosition = 1; // after\n                matchedBox = box;\n                break;\n            }\n        }\n\n        if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {\n            this.currentTargetId = matchedId;\n            this.currentPosition = matchedPosition;\n            this.currentBox = matchedBox;\n\n            for (const [id, entry] of this.zones) {\n                const isTarget = id === matchedId;\n                entry.onProximityChange(\n                    isTarget ? { box: matchedBox!, position: matchedPosition } : null\n                );\n            }\n        }\n    }\n}\n"],"mappings":"AAeA,OAAO,MAAMA,eAAe,CAAC;EACjBC,KAAK,GAAG,IAAIC,GAAG,CAAwB,CAAC;EACxCC,eAAe,GAAkB,IAAI;EACrCC,eAAe,GAAiB,IAAI;EACpCC,cAAc,GAAkB,IAAI;EACpCC,UAAU,GAAe,IAAI;EAErCC,WAAWA,CAASC,KAA+B,EAAE;IAAA,KAAjCA,KAA+B,GAA/BA,KAA+B;EAAG;EAEtDC,QAAQA,CAACC,KAAoB,EAAE;IAC3B,IAAIA,KAAK,CAACC,EAAE,KAAK,MAAM,EAAE;MACrB;IACJ;IAEA,IAAI,CAACV,KAAK,CAACW,GAAG,CAACF,KAAK,CAACC,EAAE,EAAED,KAAK,CAAC;EACnC;EAEAG,UAAUA,CAACF,EAAU,EAAE;IACnB,IAAI,CAACV,KAAK,CAACa,MAAM,CAACH,EAAE,CAAC;EACzB;EAEAI,KAAKA,CAAA,EAAG;IACJ,MAAMC,eAAe,GAAGA,CAAA,KAAM;MAC1B,IAAI,CAACC,IAAI,CAAC,CAAC;MACX,IAAI,CAACZ,cAAc,GAAGa,qBAAqB,CAACF,eAAe,CAAC;IAChE,CAAC;IACD,IAAI,CAACX,cAAc,GAAGa,qBAAqB,CAACF,eAAe,CAAC;EAChE;EAEAG,IAAIA,CAAA,EAAG;IACH,IAAI,IAAI,CAACd,cAAc,EAAE;MACrBe,oBAAoB,CAAC,IAAI,CAACf,cAAc,CAAC;IAC7C;EACJ;EAEAgB,sBAAsBA,CAAA,EAAG;IACrB,IAAI,CAAC,IAAI,CAACf,UAAU,EAAE;MAClB,OAAO,IAAI;IACf;IAEA,OAAO;MACHgB,QAAQ,EAAE,IAAI,CAAChB,UAAU,CAACgB,QAAQ;MAClCC,IAAI,EAAE,IAAI,CAACjB,UAAU,CAACkB,UAAU;MAChCC,KAAK,EAAE,IAAI,CAACnB,UAAU,CAACoB,WAAW,IAAI,IAAI,CAACtB,eAAe,IAAI,CAAC;IACnE,CAAC;EACL;EAEAa,IAAIA,CAAA,EAAG;IACH,MAAMU,SAAS,GAAG,EAAE;IACpB,MAAMC,MAAM,GAAG,IAAI,CAACpB,KAAK,CAACqB,CAAC;IAC3B,MAAMC,MAAM,GAAG,IAAI,CAACtB,KAAK,CAACuB,CAAC;IAE3B,IAAIC,SAAwB,GAAG,IAAI;IACnC,IAAIC,eAA6B,GAAG,IAAI;IACxC,IAAIC,UAAsB,GAAG,IAAI;IAEjC,KAAK,MAAM,CAACvB,EAAE,EAAE;MAAEwB;IAAI,CAAC,CAAC,IAAI,IAAI,CAAClC,KAAK,EAAE;MACpC,MAAMmC,SAAS,GAAGR,MAAM,IAAIO,GAAG,CAACE,IAAI,IAAIT,MAAM,IAAIO,GAAG,CAACG,KAAK;MAE3D,IAAI,CAACF,SAAS,EAAE;QACZ;MACJ;MAEA,IAAIN,MAAM,IAAIK,GAAG,CAACI,GAAG,GAAGZ,SAAS,IAAIG,MAAM,IAAIK,GAAG,CAACI,GAAG,GAAGZ,SAAS,EAAE;QAChEK,SAAS,GAAGrB,EAAE;QACdsB,eAAe,GAAG,CAAC,CAAC,CAAC;QACrBC,UAAU,GAAGC,GAAG;QAChB;MACJ;MAEA,IAAIL,MAAM,IAAIK,GAAG,CAACK,MAAM,GAAGb,SAAS,IAAIG,MAAM,IAAIK,GAAG,CAACK,MAAM,GAAGb,SAAS,EAAE;QACtEK,SAAS,GAAGrB,EAAE;QACdsB,eAAe,GAAG,CAAC,CAAC,CAAC;QACrBC,UAAU,GAAGC,GAAG;QAChB;MACJ;IACJ;IAEA,IAAIH,SAAS,KAAK,IAAI,CAAC7B,eAAe,IAAI8B,eAAe,KAAK,IAAI,CAAC7B,eAAe,EAAE;MAChF,IAAI,CAACD,eAAe,GAAG6B,SAAS;MAChC,IAAI,CAAC5B,eAAe,GAAG6B,eAAe;MACtC,IAAI,CAAC3B,UAAU,GAAG4B,UAAU;MAE5B,KAAK,MAAM,CAACvB,EAAE,EAAED,KAAK,CAAC,IAAI,IAAI,CAACT,KAAK,EAAE;QAClC,MAAMwC,QAAQ,GAAG9B,EAAE,KAAKqB,SAAS;QACjCtB,KAAK,CAACgC,iBAAiB,CACnBD,QAAQ,GAAG;UAAEN,GAAG,EAAED,UAAW;UAAES,QAAQ,EAAEV;QAAgB,CAAC,GAAG,IACjE,CAAC;MACL;IACJ;EACJ;AACJ","ignoreList":[]}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DropZoneManager } from "./DropZoneManager";
+export declare const DropZoneManagerProvider: {
+    ({ children, ...props }: {
+        dropzoneManager: DropZoneManager;
+    } & {
+        children: import("react").ReactNode;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const useDropZoneManager: () => DropZoneManager;

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

@@ -0,0 +1,11 @@
+import { createGenericContext } from "@webiny/app-admin";
+const DropZoneManagerContext = createGenericContext("DropzoneManager");
+export const DropZoneManagerProvider = DropZoneManagerContext.Provider;
+export const useDropZoneManager = () => {
+  const {
+    dropzoneManager
+  } = DropZoneManagerContext.useHook();
+  return dropzoneManager;
+};
+
+//# sourceMappingURL=DropZoneManagerProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createGenericContext","DropZoneManagerContext","DropZoneManagerProvider","Provider","useDropZoneManager","dropzoneManager","useHook"],"sources":["DropZoneManagerProvider.tsx"],"sourcesContent":["import { createGenericContext } from \"@webiny/app-admin\";\nimport { DropZoneManager } from \"./DropZoneManager\";\n\nconst DropZoneManagerContext = createGenericContext<{ dropzoneManager: DropZoneManager }>(\n    \"DropzoneManager\"\n);\n\nexport const DropZoneManagerProvider = DropZoneManagerContext.Provider;\n\nexport const useDropZoneManager = () => {\n    const { dropzoneManager } = DropZoneManagerContext.useHook();\n\n    return dropzoneManager;\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,mBAAmB;AAGxD,MAAMC,sBAAsB,GAAGD,oBAAoB,CAC/C,iBACJ,CAAC;AAED,OAAO,MAAME,uBAAuB,GAAGD,sBAAsB,CAACE,QAAQ;AAEtE,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAgB,CAAC,GAAGJ,sBAAsB,CAACK,OAAO,CAAC,CAAC;EAE5D,OAAOD,eAAe;AAC1B,CAAC","ignoreList":[]}

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

@@ -0,0 +1,23 @@
+import { Boxes } from "../../../hooks/Boxes";
+type HoverCallback = (id: string | null) => void;
+/**
+ * Determine which box the mouse is hovering, accounting for visual depth.
+ */
+export declare class HoverManager {
+    private mouse;
+    private getAllBoxes;
+    private hoveredId;
+    private callbacks;
+    private running;
+    private margin;
+    constructor(mouse: {
+        x: number;
+        y: number;
+    }, getAllBoxes: () => Boxes);
+    onHoverChange(cb: HoverCallback): () => void;
+    destroy(): void;
+    private notify;
+    private start;
+    private stop;
+}
+export {};

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

@@ -0,0 +1,82 @@
+/**
+ * Determine which box the mouse is hovering, accounting for visual depth.
+ */
+export class HoverManager {
+  hoveredId = null;
+  callbacks = new Set();
+  running = false;
+  margin = 0;
+  constructor(mouse, getAllBoxes) {
+    this.mouse = mouse;
+    this.getAllBoxes = getAllBoxes;
+  }
+  onHoverChange(cb) {
+    this.callbacks.add(cb);
+    if (!this.running) {
+      this.start();
+    }
+    return () => {
+      this.callbacks.delete(cb);
+      if (this.callbacks.size === 0) {
+        this.stop();
+      }
+    };
+  }
+  destroy() {
+    this.callbacks.clear();
+    this.stop();
+  }
+  notify(id) {
+    if (id !== this.hoveredId) {
+      this.hoveredId = id;
+      this.callbacks.forEach(cb => cb(id));
+    }
+  }
+  start() {
+    this.running = true;
+    const loop = () => {
+      const boxes = this.getAllBoxes();
+      const {
+        x,
+        y
+      } = this.mouse;
+      const target = document.elementFromPoint(x, y);
+      if (target?.getAttribute("data-role") === "element-overlay-label") {
+        const targetId = target.getAttribute("data-label-for");
+        if (targetId) {
+          const box = boxes.get(targetId);
+          this.notify(box ? box.id : null);
+          if (this.running) {
+            requestAnimationFrame(loop);
+          }
+          return;
+        }
+      }
+      const isIgnored = target?.closest(`[data-hover-manager="ignore"]`);
+      if (isIgnored) {
+        if (this.running) {
+          requestAnimationFrame(loop);
+        }
+        return;
+      }
+
+      // highest depth wins
+      const highestBox = Array.from(boxes.entries()).sort(([, a], [, b]) => (b.depth ?? 0) - (a.depth ?? 0)).find(([, box]) => {
+        const right = box.left + box.width;
+        const bottom = box.top + box.height;
+        return x >= box.left - this.margin && x <= right + this.margin && y >= box.top - this.margin && y <= bottom + this.margin;
+      });
+      this.notify(highestBox ? highestBox[0] : null);
+      if (this.running) {
+        requestAnimationFrame(loop);
+      }
+    };
+    requestAnimationFrame(loop);
+  }
+  stop() {
+    this.running = false;
+    this.notify(null);
+  }
+}
+
+//# sourceMappingURL=HoverManager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["HoverManager","hoveredId","callbacks","Set","running","margin","constructor","mouse","getAllBoxes","onHoverChange","cb","add","start","delete","size","stop","destroy","clear","notify","id","forEach","loop","boxes","x","y","target","document","elementFromPoint","getAttribute","targetId","box","get","requestAnimationFrame","isIgnored","closest","highestBox","Array","from","entries","sort","a","b","depth","find","right","left","width","bottom","top","height"],"sources":["HoverManager.ts"],"sourcesContent":["import { Boxes } from \"~/BaseEditor/hooks/Boxes\";\n\ntype HoverCallback = (id: string | null) => void;\n\n/**\n * Determine which box the mouse is hovering, accounting for visual depth.\n */\nexport class HoverManager {\n    private hoveredId: string | null = null;\n    private callbacks = new Set<HoverCallback>();\n    private running = false;\n    private margin = 0;\n\n    constructor(private mouse: { x: number; y: number }, private getAllBoxes: () => Boxes) {}\n\n    onHoverChange(cb: HoverCallback): () => void {\n        this.callbacks.add(cb);\n        if (!this.running) {\n            this.start();\n        }\n\n        return () => {\n            this.callbacks.delete(cb);\n            if (this.callbacks.size === 0) {\n                this.stop();\n            }\n        };\n    }\n\n    destroy() {\n        this.callbacks.clear();\n        this.stop();\n    }\n\n    private notify(id: string | null) {\n        if (id !== this.hoveredId) {\n            this.hoveredId = id;\n            this.callbacks.forEach(cb => cb(id));\n        }\n    }\n\n    private start() {\n        this.running = true;\n\n        const loop = () => {\n            const boxes = this.getAllBoxes();\n            const { x, y } = this.mouse;\n\n            const target = document.elementFromPoint(x, y);\n            if (target?.getAttribute(\"data-role\") === \"element-overlay-label\") {\n                const targetId = target.getAttribute(\"data-label-for\");\n                if (targetId) {\n                    const box = boxes.get(targetId);\n                    this.notify(box ? box.id : null);\n                    if (this.running) {\n                        requestAnimationFrame(loop);\n                    }\n                    return;\n                }\n            }\n\n            const isIgnored = target?.closest(`[data-hover-manager=\"ignore\"]`);\n            if (isIgnored) {\n                if (this.running) {\n                    requestAnimationFrame(loop);\n                }\n                return;\n            }\n\n            // highest depth wins\n            const highestBox = Array.from(boxes.entries())\n                .sort(([, a], [, b]) => (b.depth ?? 0) - (a.depth ?? 0))\n                .find(([, box]) => {\n                    const right = box.left + box.width;\n                    const bottom = box.top + box.height;\n\n                    return (\n                        x >= box.left - this.margin &&\n                        x <= right + this.margin &&\n                        y >= box.top - this.margin &&\n                        y <= bottom + this.margin\n                    );\n                });\n\n            this.notify(highestBox ? highestBox[0] : null);\n\n            if (this.running) {\n                requestAnimationFrame(loop);\n            }\n        };\n\n        requestAnimationFrame(loop);\n    }\n\n    private stop() {\n        this.running = false;\n        this.notify(null);\n    }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { Messenger } from "../../../../sdk/messenger";
+import type { ViewportManager } from "../../../../sdk/ViewportManager";
+interface IframeProps {
+    showLoading: boolean;
+    viewportManager: ViewportManager;
+    onConnected: (messenger: Messenger) => void;
+}
+export declare const Iframe: React.MemoExoticComponent<(props: IframeProps) => React.JSX.Element>;
+export {};

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

@@ -0,0 +1,40 @@
+import React, { useRef } from "react";
+import { ElementOverlays } from "./Overlays/ElementOverlays";
+import { ConnectEditorToPreview } from "../../../../DocumentEditor/ConnectEditorToPreview";
+import { useResponsiveContainer } from "./useResponsiveContainer";
+import { OverlayLoader } from "@webiny/admin-ui";
+import { useIframeUrl } from "./useIframeUrl";
+export const Iframe = /*#__PURE__*/React.memo(props => {
+  const iframeRef = useRef(null);
+  const {
+    iframeUrl
+  } = useIframeUrl();
+  const previewWidth = useResponsiveContainer(props.viewportManager);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-relative wby-flex wby-flex-col wby-items-center",
+    "data-role": "responsive-container"
+  }, iframeUrl ? /*#__PURE__*/React.createElement(ConnectEditorToPreview, {
+    iframeRef: iframeRef,
+    onConnected: props.onConnected
+  }) : null, props.showLoading || !iframeUrl ? /*#__PURE__*/React.createElement(OverlayLoader, {
+    size: "lg",
+    variant: "accent",
+    text: "Loading preview...",
+    className: "wby-bg-neutral-base"
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: "wby-min-h-[calc(100vh-43px-50px-31px)] wby-max-h-[calc(100vh-43px-50px)] wby-box-border  wby-overflow-hidden",
+    style: {
+      width: previewWidth
+    }
+  }, /*#__PURE__*/React.createElement(ElementOverlays, null), /*#__PURE__*/React.createElement("iframe", {
+    id: "preview-iframe",
+    className: "wby-w-full wby-bg-white wby-border-none wby-overflow-scroll wby-min-h-[inherit]",
+    key: iframeUrl,
+    src: iframeUrl,
+    ref: iframeRef,
+    sandbox: "allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
+  })));
+});
+Iframe.displayName = "Iframe";
+
+//# sourceMappingURL=Iframe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","ElementOverlays","ConnectEditorToPreview","useResponsiveContainer","OverlayLoader","useIframeUrl","Iframe","memo","props","iframeRef","iframeUrl","previewWidth","viewportManager","createElement","className","onConnected","showLoading","size","variant","text","style","width","id","key","src","ref","sandbox","displayName"],"sources":["Iframe.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview\";\nimport { Messenger } from \"~/sdk/messenger\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"~/sdk/ViewportManager\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl\";\n\ninterface IframeProps {\n    showLoading: boolean;\n    viewportManager: ViewportManager;\n    onConnected: (messenger: Messenger) => void;\n}\n\nexport const Iframe = React.memo((props: IframeProps) => {\n    const iframeRef = useRef<HTMLIFrameElement>(null);\n    const { iframeUrl } = useIframeUrl();\n    const previewWidth = useResponsiveContainer(props.viewportManager);\n\n    return (\n        <div\n            className={\"wby-relative wby-flex wby-flex-col wby-items-center\"}\n            data-role={\"responsive-container\"}\n        >\n            {iframeUrl ? (\n                <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n            ) : null}\n            {props.showLoading || !iframeUrl ? (\n                <OverlayLoader\n                    size=\"lg\"\n                    variant=\"accent\"\n                    text=\"Loading preview...\"\n                    className={\"wby-bg-neutral-base\"}\n                />\n            ) : null}\n            {/* Height = viewport height - top bar - address bar - breadcrumbs. */}\n            <div\n                className=\"wby-min-h-[calc(100vh-43px-50px-31px)] wby-max-h-[calc(100vh-43px-50px)] wby-box-border  wby-overflow-hidden\"\n                style={{ width: previewWidth }}\n            >\n                <ElementOverlays />\n                <iframe\n                    id={\"preview-iframe\"}\n                    className={\n                        \"wby-w-full wby-bg-white wby-border-none wby-overflow-scroll wby-min-h-[inherit]\"\n                    }\n                    key={iframeUrl}\n                    src={iframeUrl}\n                    ref={iframeRef}\n                    sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\"\n                />\n            </div>\n        </div>\n    );\n});\n\nIframe.displayName = \"Iframe\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,SAASC,eAAe;AACxB,SAASC,sBAAsB;AAE/B,SAASC,sBAAsB;AAC/B,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,YAAY;AAQrB,OAAO,MAAMC,MAAM,gBAAGP,KAAK,CAACQ,IAAI,CAAEC,KAAkB,IAAK;EACrD,MAAMC,SAAS,GAAGT,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAM;IAAEU;EAAU,CAAC,GAAGL,YAAY,CAAC,CAAC;EACpC,MAAMM,YAAY,GAAGR,sBAAsB,CAACK,KAAK,CAACI,eAAe,CAAC;EAElE,oBACIb,KAAA,CAAAc,aAAA;IACIC,SAAS,EAAE,qDAAsD;IACjE,aAAW;EAAuB,GAEjCJ,SAAS,gBACNX,KAAA,CAAAc,aAAA,CAACX,sBAAsB;IAACO,SAAS,EAAEA,SAAU;IAACM,WAAW,EAAEP,KAAK,CAACO;EAAY,CAAE,CAAC,GAChF,IAAI,EACPP,KAAK,CAACQ,WAAW,IAAI,CAACN,SAAS,gBAC5BX,KAAA,CAAAc,aAAA,CAACT,aAAa;IACVa,IAAI,EAAC,IAAI;IACTC,OAAO,EAAC,QAAQ;IAChBC,IAAI,EAAC,oBAAoB;IACzBL,SAAS,EAAE;EAAsB,CACpC,CAAC,GACF,IAAI,eAERf,KAAA,CAAAc,aAAA;IACIC,SAAS,EAAC,8GAA8G;IACxHM,KAAK,EAAE;MAAEC,KAAK,EAAEV;IAAa;EAAE,gBAE/BZ,KAAA,CAAAc,aAAA,CAACZ,eAAe,MAAE,CAAC,eACnBF,KAAA,CAAAc,aAAA;IACIS,EAAE,EAAE,gBAAiB;IACrBR,SAAS,EACL,iFACH;IACDS,GAAG,EAAEb,SAAU;IACfc,GAAG,EAAEd,SAAU;IACfe,GAAG,EAAEhB,SAAU;IACfiB,OAAO,EAAC;EAA0F,CACrG,CACA,CACJ,CAAC;AAEd,CAAC,CAAC;AAEFpB,MAAM,CAACqB,WAAW,GAAG,QAAQ","ignoreList":[]}

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

@@ -0,0 +1 @@
+export declare const KeyboardShortcuts: () => null;

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

@@ -0,0 +1,62 @@
+import { useCallback, useEffect } from "react";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+import { useKeyHandler } from "../../../hooks/useKeyHandler";
+import { $getActiveElementId, $getComponentManifestByElementId } from "../../../../editorSdk/utils";
+import { Commands } from "../../..";
+export const KeyboardShortcuts = () => {
+  const editor = useDocumentEditor();
+  const {
+    addKeyHandler,
+    removeKeyHandler
+  } = useKeyHandler();
+  const deleteActiveElement = useCallback(() => {
+    const activeElementId = $getActiveElementId(editor);
+    if (activeElementId) {
+      const manifest = $getComponentManifestByElementId(editor, activeElementId);
+      if (!manifest) {
+        return;
+      }
+      if (manifest.canDelete !== false) {
+        editor.executeCommand(Commands.DeselectElement);
+        editor.executeCommand(Commands.DeleteElement, {
+          id: activeElementId
+        });
+      }
+    }
+  }, []);
+  const deactivateElement = useCallback(() => {
+    editor.executeCommand(Commands.DeselectElement);
+  }, []);
+  useEffect(() => {
+    addKeyHandler("Escape", e => {
+      e.preventDefault();
+      deactivateElement();
+    });
+    addKeyHandler("Backspace", e => {
+      e.preventDefault();
+      deleteActiveElement();
+    });
+    addKeyHandler("Delete", e => {
+      e.preventDefault();
+      deleteActiveElement();
+    });
+    addKeyHandler("mod+z", e => {
+      e.preventDefault();
+      editor.undo();
+    });
+    addKeyHandler("mod+shift+z", e => {
+      e.preventDefault();
+      editor.redo();
+    });
+    return () => {
+      removeKeyHandler("Escape");
+      removeKeyHandler("Backspace");
+      removeKeyHandler("Delete");
+      removeKeyHandler("mod+z");
+      removeKeyHandler("mod+shift+z");
+    };
+  }, []);
+  return null;
+};
+
+//# sourceMappingURL=KeyboardShortcuts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useDocumentEditor","useKeyHandler","$getActiveElementId","$getComponentManifestByElementId","Commands","KeyboardShortcuts","editor","addKeyHandler","removeKeyHandler","deleteActiveElement","activeElementId","manifest","canDelete","executeCommand","DeselectElement","DeleteElement","id","deactivateElement","e","preventDefault","undo","redo"],"sources":["KeyboardShortcuts.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useKeyHandler } from \"~/BaseEditor/hooks/useKeyHandler\";\nimport { $getActiveElementId, $getComponentManifestByElementId } from \"~/editorSdk/utils\";\nimport { Commands } from \"~/BaseEditor\";\n\nexport const KeyboardShortcuts = () => {\n    const editor = useDocumentEditor();\n    const { addKeyHandler, removeKeyHandler } = useKeyHandler();\n\n    const deleteActiveElement = useCallback(() => {\n        const activeElementId = $getActiveElementId(editor);\n        if (activeElementId) {\n            const manifest = $getComponentManifestByElementId(editor, activeElementId);\n            if (!manifest) {\n                return;\n            }\n\n            if (manifest.canDelete !== false) {\n                editor.executeCommand(Commands.DeselectElement);\n                editor.executeCommand(Commands.DeleteElement, { id: activeElementId });\n            }\n        }\n    }, []);\n\n    const deactivateElement = useCallback(() => {\n        editor.executeCommand(Commands.DeselectElement);\n    }, []);\n\n    useEffect(() => {\n        addKeyHandler(\"Escape\", e => {\n            e.preventDefault();\n            deactivateElement();\n        });\n\n        addKeyHandler(\"Backspace\", e => {\n            e.preventDefault();\n            deleteActiveElement();\n        });\n\n        addKeyHandler(\"Delete\", e => {\n            e.preventDefault();\n            deleteActiveElement();\n        });\n\n        addKeyHandler(\"mod+z\", e => {\n            e.preventDefault();\n            editor.undo();\n        });\n\n        addKeyHandler(\"mod+shift+z\", e => {\n            e.preventDefault();\n            editor.redo();\n        });\n\n        return () => {\n            removeKeyHandler(\"Escape\");\n            removeKeyHandler(\"Backspace\");\n            removeKeyHandler(\"Delete\");\n            removeKeyHandler(\"mod+z\");\n            removeKeyHandler(\"mod+shift+z\");\n        };\n    }, []);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAC9C,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,mBAAmB,EAAEC,gCAAgC;AAC9D,SAASC,QAAQ;AAEjB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEO,aAAa;IAAEC;EAAiB,CAAC,GAAGP,aAAa,CAAC,CAAC;EAE3D,MAAMQ,mBAAmB,GAAGX,WAAW,CAAC,MAAM;IAC1C,MAAMY,eAAe,GAAGR,mBAAmB,CAACI,MAAM,CAAC;IACnD,IAAII,eAAe,EAAE;MACjB,MAAMC,QAAQ,GAAGR,gCAAgC,CAACG,MAAM,EAAEI,eAAe,CAAC;MAC1E,IAAI,CAACC,QAAQ,EAAE;QACX;MACJ;MAEA,IAAIA,QAAQ,CAACC,SAAS,KAAK,KAAK,EAAE;QAC9BN,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACU,eAAe,CAAC;QAC/CR,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACW,aAAa,EAAE;UAAEC,EAAE,EAAEN;QAAgB,CAAC,CAAC;MAC1E;IACJ;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMO,iBAAiB,GAAGnB,WAAW,CAAC,MAAM;IACxCQ,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACU,eAAe,CAAC;EACnD,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM;IACZQ,aAAa,CAAC,QAAQ,EAAEW,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBF,iBAAiB,CAAC,CAAC;IACvB,CAAC,CAAC;IAEFV,aAAa,CAAC,WAAW,EAAEW,CAAC,IAAI;MAC5BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBV,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,QAAQ,EAAEW,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBV,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,OAAO,EAAEW,CAAC,IAAI;MACxBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBb,MAAM,CAACc,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEFb,aAAa,CAAC,aAAa,EAAEW,CAAC,IAAI;MAC9BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBb,MAAM,CAACe,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAM;MACTb,gBAAgB,CAAC,QAAQ,CAAC;MAC1BA,gBAAgB,CAAC,WAAW,CAAC;MAC7BA,gBAAgB,CAAC,QAAQ,CAAC;MAC1BA,gBAAgB,CAAC,OAAO,CAAC;MACzBA,gBAAgB,CAAC,aAAa,CAAC;IACnC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

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

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