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

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

@@ -1 +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.js\";\nimport { Preview } from \"./Preview.js\";\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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/DocumentPreview.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/DocumentPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { Preview } from \"./Preview.js\";\n\nexport const DocumentPreview = () => {\n    const { id } = useSelectFromDocument(document => {\n        return { id: document.id };\n    });\n\n    return <Preview key={id} />;\n};\n"],"names":["DocumentPreview","id","useSelectFromDocument","document","Preview"],"mappings":";;;AAIO,MAAMA,kBAAkB;IAC3B,MAAM,EAAEC,EAAE,EAAE,GAAGC,sBAAsBC,CAAAA,WAC1B;YAAE,IAAIA,SAAS,EAAE;QAAC;IAG7B,OAAO,WAAP,GAAO,oBAACC,SAAOA;QAAC,KAAKH;;AACzB"}

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

@@ -1,5 +1,6 @@
 import type { Box } from "./Box.js";
 type DropPosition = number | null;
+type MatchChangeCallback = (hasMatch: boolean) => void;
 export interface DropZoneProximity {
     box: Box;
     position: DropPosition;
@@ -17,12 +18,14 @@ export declare class DropZoneManager {
     private currentPosition;
     private animationFrame;
     private currentBox;
+    private matchCallbacks;
     constructor(mouse: {
         x: number;
         y: number;
     });
     register(entry: DropzoneEntry): void;
     unregister(id: string): void;
+    subscribeToMatchChange(cb: MatchChangeCallback): () => void;
     start(): void;
     stop(): void;
     getLastMatchedPosition(): {

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

@@ -1,134 +1,119 @@
-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;
+class DropZoneManager {
+    constructor(mouse){
+        this.mouse = mouse;
+        this.zones = new Map();
+        this.currentTargetId = null;
+        this.currentPosition = null;
+        this.animationFrame = null;
+        this.currentBox = null;
+        this.matchCallbacks = new Set();
     }
-    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);
+    register(entry) {
+        if ("root" === entry.id) return;
+        this.zones.set(entry.id, entry);
     }
-  }
-  getLastMatchedPosition() {
-    if (!this.currentBox) {
-      return null;
+    unregister(id) {
+        this.zones.delete(id);
     }
-    return {
-      parentId: this.currentBox.parentId,
-      slot: this.currentBox.parentSlot,
-      index: this.currentBox.parentIndex + (this.currentPosition ?? 0)
-    };
-  }
-  tick() {
-    const scrollYOffset = this.getScrollOffset();
-    const threshold = 10;
-    const mouseX = this.mouse.x;
-    const mouseY = this.mouse.y + scrollYOffset;
-    let matchedId = null;
-    let matchedPosition = null;
-    let matchedBox = null;
-
-    // Collect all candidate matches with their canAccept callback.
-    const candidates = [];
-    for (const [id, {
-      box,
-      canAccept
-    }] of this.zones) {
-      const isWithinX = mouseX >= box.left && mouseX <= box.right;
-      if (!isWithinX) {
-        continue;
-      }
-      if (Math.abs(mouseY - box.top) <= threshold) {
-        candidates.push({
-          id,
-          box,
-          position: 0,
-          canAccept
-        });
-      }
-      if (Math.abs(mouseY - box.bottom) <= threshold) {
-        candidates.push({
-          id,
-          box,
-          position: 1,
-          canAccept
-        });
-      }
+    subscribeToMatchChange(cb) {
+        this.matchCallbacks.add(cb);
+        return ()=>this.matchCallbacks.delete(cb);
     }
-    if (candidates.length > 0) {
-      // Filter to only eligible candidates.
-      const eligible = candidates.filter(c => !c.canAccept || c.canAccept());
-      if (eligible.length > 0) {
-        const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort((a, b) => b - a);
-        if (uniqueDepths.length === 1) {
-          const winner = eligible[0];
-          matchedId = winner.id;
-          matchedPosition = winner.position;
-          matchedBox = winner.box;
-        } else {
-          // Use X position to select depth band among eligible candidates only.
-          let rangeLeft = Infinity;
-          let rangeRight = -Infinity;
-          for (const c of eligible) {
-            rangeLeft = Math.min(rangeLeft, c.box.left);
-            rangeRight = Math.max(rangeRight, c.box.right);
-          }
-          const centerX = (rangeLeft + rangeRight) / 2;
-          const halfWidth = (rangeRight - rangeLeft) / 2;
-
-          // 0 at center, 1 at edges.
-          const distFromCenter = halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;
-
-          // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).
-          const depthIndex = Math.min(Math.floor(distFromCenter * uniqueDepths.length), uniqueDepths.length - 1);
-          const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);
-          if (winner) {
-            matchedId = winner.id;
-            matchedPosition = winner.position;
-            matchedBox = winner.box;
-          }
-        }
-      }
+    start() {
+        const runDropzoneLoop = ()=>{
+            this.tick();
+            this.animationFrame = requestAnimationFrame(runDropzoneLoop);
+        };
+        this.animationFrame = requestAnimationFrame(runDropzoneLoop);
+    }
+    stop() {
+        if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
     }
-    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);
-      }
+    getLastMatchedPosition() {
+        if (!this.currentBox) return null;
+        return {
+            parentId: this.currentBox.parentId,
+            slot: this.currentBox.parentSlot,
+            index: this.currentBox.parentIndex + (this.currentPosition ?? 0)
+        };
+    }
+    tick() {
+        const scrollYOffset = this.getScrollOffset();
+        const threshold = 10;
+        const mouseX = this.mouse.x;
+        const mouseY = this.mouse.y + scrollYOffset;
+        let matchedId = null;
+        let matchedPosition = null;
+        let matchedBox = null;
+        const candidates = [];
+        for (const [id, { box, canAccept }] of this.zones){
+            const isWithinX = mouseX >= box.left && mouseX <= box.right;
+            if (isWithinX) {
+                if (Math.abs(mouseY - box.top) <= threshold) candidates.push({
+                    id,
+                    box,
+                    position: 0,
+                    canAccept
+                });
+                if (Math.abs(mouseY - box.bottom) <= threshold) candidates.push({
+                    id,
+                    box,
+                    position: 1,
+                    canAccept
+                });
+            }
+        }
+        if (candidates.length > 0) {
+            const eligible = candidates.filter((c)=>!c.canAccept || c.canAccept());
+            if (eligible.length > 0) {
+                const uniqueDepths = [
+                    ...new Set(eligible.map((c)=>c.box.depth))
+                ].sort((a, b)=>b - a);
+                if (1 === uniqueDepths.length) {
+                    const winner = eligible[0];
+                    matchedId = winner.id;
+                    matchedPosition = winner.position;
+                    matchedBox = winner.box;
+                } else {
+                    let rangeLeft = 1 / 0;
+                    let rangeRight = -1 / 0;
+                    for (const c of eligible){
+                        rangeLeft = Math.min(rangeLeft, c.box.left);
+                        rangeRight = Math.max(rangeRight, c.box.right);
+                    }
+                    const centerX = (rangeLeft + rangeRight) / 2;
+                    const halfWidth = (rangeRight - rangeLeft) / 2;
+                    const distFromCenter = halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;
+                    const depthIndex = Math.min(Math.floor(distFromCenter * uniqueDepths.length), uniqueDepths.length - 1);
+                    const winner = eligible.find((c)=>c.box.depth === uniqueDepths[depthIndex]);
+                    if (winner) {
+                        matchedId = winner.id;
+                        matchedPosition = winner.position;
+                        matchedBox = winner.box;
+                    }
+                }
+            }
+        }
+        if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {
+            this.currentTargetId = matchedId;
+            this.currentPosition = matchedPosition;
+            this.currentBox = matchedBox;
+            this.matchCallbacks.forEach((cb)=>cb(null !== matchedId));
+            for (const [id, entry] of this.zones){
+                const isTarget = id === matchedId;
+                entry.onProximityChange(isTarget ? {
+                    box: matchedBox,
+                    position: matchedPosition
+                } : null);
+            }
+        }
     }
-  }
-  getScrollOffset() {
-    const container = document.getElementById("preview-container");
-    if (!container) {
-      return 0;
+    getScrollOffset() {
+        const container = document.getElementById("preview-container");
+        if (!container) return 0;
+        return container.scrollTop;
     }
-    return container.scrollTop;
-  }
 }
+export { DropZoneManager };
 
 //# sourceMappingURL=DropZoneManager.js.map

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

@@ -1 +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","scrollYOffset","getScrollOffset","threshold","mouseX","x","mouseY","y","matchedId","matchedPosition","matchedBox","candidates","box","canAccept","isWithinX","left","right","Math","abs","top","push","position","bottom","length","eligible","filter","c","uniqueDepths","Set","map","depth","sort","a","b","winner","rangeLeft","Infinity","rangeRight","min","max","centerX","halfWidth","distFromCenter","depthIndex","floor","find","isTarget","onProximityChange","container","document","getElementById","scrollTop"],"sources":["DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box.js\";\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    canAccept?: () => boolean;\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 scrollYOffset = this.getScrollOffset();\n        const threshold = 10;\n        const mouseX = this.mouse.x;\n        const mouseY = this.mouse.y + scrollYOffset;\n\n        let matchedId: string | null = null;\n        let matchedPosition: DropPosition = null;\n        let matchedBox: Box | null = null;\n\n        // Collect all candidate matches with their canAccept callback.\n        const candidates: { id: string; box: Box; position: number; canAccept?: () => boolean }[] =\n            [];\n\n        for (const [id, { box, canAccept }] of this.zones) {\n            const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n            if (!isWithinX) {\n                continue;\n            }\n\n            if (Math.abs(mouseY - box.top) <= threshold) {\n                candidates.push({ id, box, position: 0, canAccept });\n            }\n\n            if (Math.abs(mouseY - box.bottom) <= threshold) {\n                candidates.push({ id, box, position: 1, canAccept });\n            }\n        }\n\n        if (candidates.length > 0) {\n            // Filter to only eligible candidates.\n            const eligible = candidates.filter(c => !c.canAccept || c.canAccept());\n\n            if (eligible.length > 0) {\n                const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort(\n                    (a, b) => b - a\n                );\n\n                if (uniqueDepths.length === 1) {\n                    const winner = eligible[0];\n                    matchedId = winner.id;\n                    matchedPosition = winner.position;\n                    matchedBox = winner.box;\n                } else {\n                    // Use X position to select depth band among eligible candidates only.\n                    let rangeLeft = Infinity;\n                    let rangeRight = -Infinity;\n                    for (const c of eligible) {\n                        rangeLeft = Math.min(rangeLeft, c.box.left);\n                        rangeRight = Math.max(rangeRight, c.box.right);\n                    }\n\n                    const centerX = (rangeLeft + rangeRight) / 2;\n                    const halfWidth = (rangeRight - rangeLeft) / 2;\n\n                    // 0 at center, 1 at edges.\n                    const distFromCenter =\n                        halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;\n\n                    // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).\n                    const depthIndex = Math.min(\n                        Math.floor(distFromCenter * uniqueDepths.length),\n                        uniqueDepths.length - 1\n                    );\n\n                    const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);\n                    if (winner) {\n                        matchedId = winner.id;\n                        matchedPosition = winner.position;\n                        matchedBox = winner.box;\n                    }\n                }\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    private getScrollOffset() {\n        const container = document.getElementById(\"preview-container\");\n        if (!container) {\n            return 0;\n        }\n\n        return container.scrollTop;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box.js\";\n\ntype DropPosition = number | null;\ntype MatchChangeCallback = (hasMatch: boolean) => void;\n\nexport interface DropZoneProximity {\n    box: Box;\n    position: DropPosition;\n}\n\ninterface DropzoneEntry {\n    id: string;\n    box: Box;\n    canAccept?: () => boolean;\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    private matchCallbacks = new Set<MatchChangeCallback>();\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    subscribeToMatchChange(cb: MatchChangeCallback): () => void {\n        this.matchCallbacks.add(cb);\n        return () => this.matchCallbacks.delete(cb);\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 scrollYOffset = this.getScrollOffset();\n        const threshold = 10;\n        const mouseX = this.mouse.x;\n        const mouseY = this.mouse.y + scrollYOffset;\n\n        let matchedId: string | null = null;\n        let matchedPosition: DropPosition = null;\n        let matchedBox: Box | null = null;\n\n        // Collect all candidate matches with their canAccept callback.\n        const candidates: { id: string; box: Box; position: number; canAccept?: () => boolean }[] =\n            [];\n\n        for (const [id, { box, canAccept }] of this.zones) {\n            const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n            if (!isWithinX) {\n                continue;\n            }\n\n            if (Math.abs(mouseY - box.top) <= threshold) {\n                candidates.push({ id, box, position: 0, canAccept });\n            }\n\n            if (Math.abs(mouseY - box.bottom) <= threshold) {\n                candidates.push({ id, box, position: 1, canAccept });\n            }\n        }\n\n        if (candidates.length > 0) {\n            // Filter to only eligible candidates.\n            const eligible = candidates.filter(c => !c.canAccept || c.canAccept());\n\n            if (eligible.length > 0) {\n                const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort(\n                    (a, b) => b - a\n                );\n\n                if (uniqueDepths.length === 1) {\n                    const winner = eligible[0];\n                    matchedId = winner.id;\n                    matchedPosition = winner.position;\n                    matchedBox = winner.box;\n                } else {\n                    // Use X position to select depth band among eligible candidates only.\n                    let rangeLeft = Infinity;\n                    let rangeRight = -Infinity;\n                    for (const c of eligible) {\n                        rangeLeft = Math.min(rangeLeft, c.box.left);\n                        rangeRight = Math.max(rangeRight, c.box.right);\n                    }\n\n                    const centerX = (rangeLeft + rangeRight) / 2;\n                    const halfWidth = (rangeRight - rangeLeft) / 2;\n\n                    // 0 at center, 1 at edges.\n                    const distFromCenter =\n                        halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;\n\n                    // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).\n                    const depthIndex = Math.min(\n                        Math.floor(distFromCenter * uniqueDepths.length),\n                        uniqueDepths.length - 1\n                    );\n\n                    const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);\n                    if (winner) {\n                        matchedId = winner.id;\n                        matchedPosition = winner.position;\n                        matchedBox = winner.box;\n                    }\n                }\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            this.matchCallbacks.forEach(cb => cb(matchedId !== null));\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    private getScrollOffset() {\n        const container = document.getElementById(\"preview-container\");\n        if (!container) {\n            return 0;\n        }\n\n        return container.scrollTop;\n    }\n}\n"],"names":["DropZoneManager","mouse","Map","Set","entry","id","cb","runDropzoneLoop","requestAnimationFrame","cancelAnimationFrame","scrollYOffset","threshold","mouseX","mouseY","matchedId","matchedPosition","matchedBox","candidates","box","canAccept","isWithinX","Math","eligible","c","uniqueDepths","a","b","winner","rangeLeft","Infinity","rangeRight","centerX","halfWidth","distFromCenter","depthIndex","isTarget","container","document"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["createGenericContext","DropZoneManagerContext","DropZoneManagerProvider","Provider","useDropZoneManager","dropzoneManager","useHook"],"sources":["DropZoneManagerProvider.tsx"],"sourcesContent":["import { createGenericContext } from \"@webiny/app-admin\";\nimport type { DropZoneManager } from \"./DropZoneManager.js\";\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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/DropZoneManagerProvider.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/DropZoneManagerProvider.tsx"],"sourcesContent":["import { createGenericContext } from \"@webiny/app-admin\";\nimport type { DropZoneManager } from \"./DropZoneManager.js\";\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"],"names":["DropZoneManagerContext","createGenericContext","DropZoneManagerProvider","useDropZoneManager","dropzoneManager"],"mappings":";AAGA,MAAMA,yBAAyBC,qBAC3B;AAGG,MAAMC,0BAA0BF,uBAAuB,QAAQ;AAE/D,MAAMG,qBAAqB;IAC9B,MAAM,EAAEC,eAAe,EAAE,GAAGJ,uBAAuB,OAAO;IAE1D,OAAOI;AACX"}

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

@@ -8,7 +8,7 @@ interface IframeProps {
     viewportManager: ViewportManager;
     onConnected: (messenger: Messenger) => void;
 }
-export declare const Iframe: (({ url, timestamp, ...props }: IframeProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Iframe: (({ url, timestamp, ...props }: IframeProps) => React.JSX.Element) & React.NamedExoticComponent<IframeProps> & {
+    readonly type: ({ url, timestamp, ...props }: IframeProps) => React.JSX.Element;
 };
 export {};

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useRef } from "react";
-import { cn, OverlayLoader } from "@webiny/admin-ui";
+import react, { useEffect, useMemo, useRef } from "react";
+import { OverlayLoader, cn } from "@webiny/admin-ui";
 import { observer } from "mobx-react-lite";
 import { ElementOverlays } from "./Overlays/ElementOverlays.js";
 import { ConnectEditorToPreview } from "../../../../DocumentEditor/ConnectEditorToPreview.js";
@@ -7,65 +7,61 @@ import { useResponsiveContainer } from "./useResponsiveContainer.js";
 import { usePreviewData } from "../../../hooks/usePreviewData.js";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { PreviewContainer } from "./PreviewContainer.js";
-export const Iframe = observer(({
-  url,
-  timestamp,
-  ...props
-}) => {
-  const iframeRef = useRef(null);
-  const previewBodyRef = useRef(null);
-  const previewWidth = useResponsiveContainer(props.viewportManager);
-  const {
-    viewport
-  } = usePreviewData();
-  const editor = useSelectFromEditor(state => ({
-    isReadOnly: state.isReadOnly,
-    reservedHeight: state.uiReservedSpace.height
-  }));
-  const isReadOnly = editor.isReadOnly;
-
-  // When preview width changes, we need to force calculation of the iframe scrollHeight
-  // by reducing the height of its parent div to the current viewport height.
-  // Otherwise, the iframe grows to fill the parent div, and will not report the correct content height.
-  useEffect(() => {
-    if (previewBodyRef.current) {
-      const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;
-      previewBodyRef.current.style.minHeight = minHeight;
-    }
-  }, [previewWidth]);
-  const iframeUrl = useMemo(() => {
-    const localUrl = new URL(url);
-    localUrl.searchParams.set("wb.ts", timestamp.toString());
-    return localUrl.toString();
-  }, [url, timestamp]);
-  return /*#__PURE__*/React.createElement(PreviewContainer, {
-    key: iframeUrl
-  }, /*#__PURE__*/React.createElement(ConnectEditorToPreview, {
-    iframeRef: iframeRef,
-    onConnected: props.onConnected
-  }), props.showLoading ? /*#__PURE__*/React.createElement(OverlayLoader, {
-    size: "lg",
-    variant: "accent",
-    text: "Loading preview...",
-    className: "bg-neutral-base"
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    id: "preview-body",
-    ref: previewBodyRef,
-    className: "outline outline-neutral-dimmed shadow-sm transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ",
-    style: {
-      position: "relative",
-      width: `${previewWidth}px`,
-      minHeight: `${viewport.scrollHeight}px`
-    }
-  }, !isReadOnly ? /*#__PURE__*/React.createElement(ElementOverlays, null) : null, /*#__PURE__*/React.createElement("iframe", {
-    scrolling: "no",
-    id: "preview-iframe",
-    className: cn("absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]", isReadOnly ? "pointer-events-auto" : "pointer-events-none"),
-    src: iframeUrl,
-    ref: iframeRef,
-    sandbox: "allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
-  })));
+const Iframe = observer(({ url, timestamp, ...props })=>{
+    const iframeRef = useRef(null);
+    const previewBodyRef = useRef(null);
+    const previewWidth = useResponsiveContainer(props.viewportManager);
+    const { viewport } = usePreviewData();
+    const editor = useSelectFromEditor((state)=>({
+            isReadOnly: state.isReadOnly,
+            reservedHeight: state.uiReservedSpace.height
+        }));
+    const isReadOnly = editor.isReadOnly;
+    useEffect(()=>{
+        if (previewBodyRef.current) {
+            const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;
+            previewBodyRef.current.style.minHeight = minHeight;
+        }
+    }, [
+        previewWidth
+    ]);
+    const iframeUrl = useMemo(()=>{
+        const localUrl = new URL(url);
+        localUrl.searchParams.set("wb.ts", timestamp.toString());
+        return localUrl.toString();
+    }, [
+        url,
+        timestamp
+    ]);
+    return /*#__PURE__*/ react.createElement(PreviewContainer, {
+        key: iframeUrl
+    }, /*#__PURE__*/ react.createElement(ConnectEditorToPreview, {
+        iframeRef: iframeRef,
+        onConnected: props.onConnected
+    }), props.showLoading ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        size: "lg",
+        variant: "accent",
+        text: "Loading preview...",
+        className: "bg-neutral-base"
+    }) : null, /*#__PURE__*/ react.createElement("div", {
+        id: "preview-body",
+        ref: previewBodyRef,
+        className: "transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+        style: {
+            position: "relative",
+            width: `${previewWidth}px`,
+            minHeight: `${viewport.scrollHeight}px`
+        }
+    }, isReadOnly ? null : /*#__PURE__*/ react.createElement(ElementOverlays, null), /*#__PURE__*/ react.createElement("iframe", {
+        scrolling: "no",
+        id: "preview-iframe",
+        className: cn("absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]", isReadOnly ? "pointer-events-auto" : "pointer-events-none"),
+        src: iframeUrl,
+        ref: iframeRef,
+        sandbox: "allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
+    })));
 });
 Iframe.displayName = "Iframe";
+export { Iframe };
 
 //# sourceMappingURL=Iframe.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","useRef","cn","OverlayLoader","observer","ElementOverlays","ConnectEditorToPreview","useResponsiveContainer","usePreviewData","useSelectFromEditor","PreviewContainer","Iframe","url","timestamp","props","iframeRef","previewBodyRef","previewWidth","viewportManager","viewport","editor","state","isReadOnly","reservedHeight","uiReservedSpace","height","current","minHeight","style","iframeUrl","localUrl","URL","searchParams","set","toString","createElement","key","onConnected","showLoading","size","variant","text","className","id","ref","position","width","scrollHeight","scrolling","src","sandbox","displayName"],"sources":["Iframe.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { cn, OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { observer } from \"mobx-react-lite\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays.js\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview.js\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js\";\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { PreviewContainer } from \"./PreviewContainer.js\";\n\ninterface IframeProps {\n    url: string;\n    timestamp: number;\n    showLoading: boolean;\n    viewportManager: ViewportManager;\n    onConnected: (messenger: Messenger) => void;\n}\n\nexport const Iframe = observer(({ url, timestamp, ...props }: IframeProps) => {\n    const iframeRef = useRef<HTMLIFrameElement>(null);\n    const previewBodyRef = useRef<HTMLDivElement>(null);\n    const previewWidth = useResponsiveContainer(props.viewportManager);\n    const { viewport } = usePreviewData();\n    const editor = useSelectFromEditor(state => ({\n        isReadOnly: state.isReadOnly,\n        reservedHeight: state.uiReservedSpace.height\n    }));\n\n    const isReadOnly = editor.isReadOnly;\n\n    // When preview width changes, we need to force calculation of the iframe scrollHeight\n    // by reducing the height of its parent div to the current viewport height.\n    // Otherwise, the iframe grows to fill the parent div, and will not report the correct content height.\n    useEffect(() => {\n        if (previewBodyRef.current) {\n            const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;\n            previewBodyRef.current.style.minHeight = minHeight;\n        }\n    }, [previewWidth]);\n\n    const iframeUrl = useMemo(() => {\n        const localUrl = new URL(url);\n        localUrl.searchParams.set(\"wb.ts\", timestamp.toString());\n        return localUrl.toString();\n    }, [url, timestamp]);\n\n    return (\n        <PreviewContainer key={iframeUrl}>\n            <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n            {props.showLoading ? (\n                <OverlayLoader\n                    size=\"lg\"\n                    variant=\"accent\"\n                    text=\"Loading preview...\"\n                    className={\"bg-neutral-base\"}\n                />\n            ) : null}\n            {/* Content wrapper - sized by iframe content */}\n            <div\n                id={\"preview-body\"}\n                ref={previewBodyRef}\n                className={\n                    \"outline outline-neutral-dimmed shadow-sm transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] \"\n                }\n                style={{\n                    position: \"relative\",\n                    width: `${previewWidth}px`,\n                    minHeight: `${viewport.scrollHeight}px`\n                }}\n            >\n                {!isReadOnly ? <ElementOverlays /> : null}\n                <iframe\n                    scrolling=\"no\"\n                    id={\"preview-iframe\"}\n                    className={cn(\n                        \"absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]\",\n                        isReadOnly ? \"pointer-events-auto\" : \"pointer-events-none\"\n                    )}\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        </PreviewContainer>\n    );\n});\n\nIframe.displayName = \"Iframe\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Iframe.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/Iframe.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { cn, OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { observer } from \"mobx-react-lite\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays.js\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview.js\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js\";\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { PreviewContainer } from \"./PreviewContainer.js\";\n\ninterface IframeProps {\n    url: string;\n    timestamp: number;\n    showLoading: boolean;\n    viewportManager: ViewportManager;\n    onConnected: (messenger: Messenger) => void;\n}\n\nexport const Iframe = observer(({ url, timestamp, ...props }: IframeProps) => {\n    const iframeRef = useRef<HTMLIFrameElement>(null);\n    const previewBodyRef = useRef<HTMLDivElement>(null);\n    const previewWidth = useResponsiveContainer(props.viewportManager);\n    const { viewport } = usePreviewData();\n    const editor = useSelectFromEditor(state => ({\n        isReadOnly: state.isReadOnly,\n        reservedHeight: state.uiReservedSpace.height\n    }));\n\n    const isReadOnly = editor.isReadOnly;\n\n    // When preview width changes, we need to force calculation of the iframe scrollHeight\n    // by reducing the height of its parent div to the current viewport height.\n    // Otherwise, the iframe grows to fill the parent div, and will not report the correct content height.\n    useEffect(() => {\n        if (previewBodyRef.current) {\n            const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;\n            previewBodyRef.current.style.minHeight = minHeight;\n        }\n    }, [previewWidth]);\n\n    const iframeUrl = useMemo(() => {\n        const localUrl = new URL(url);\n        localUrl.searchParams.set(\"wb.ts\", timestamp.toString());\n        return localUrl.toString();\n    }, [url, timestamp]);\n\n    return (\n        <PreviewContainer key={iframeUrl}>\n            <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n            {props.showLoading ? (\n                <OverlayLoader\n                    size=\"lg\"\n                    variant=\"accent\"\n                    text=\"Loading preview...\"\n                    className={\"bg-neutral-base\"}\n                />\n            ) : null}\n            {/* Content wrapper - sized by iframe content */}\n            <div\n                id={\"preview-body\"}\n                ref={previewBodyRef}\n                className={\n                    \"transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]\"\n                }\n                style={{\n                    position: \"relative\",\n                    width: `${previewWidth}px`,\n                    minHeight: `${viewport.scrollHeight}px`\n                }}\n            >\n                {!isReadOnly ? <ElementOverlays /> : null}\n                <iframe\n                    scrolling=\"no\"\n                    id={\"preview-iframe\"}\n                    className={cn(\n                        \"absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]\",\n                        isReadOnly ? \"pointer-events-auto\" : \"pointer-events-none\"\n                    )}\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        </PreviewContainer>\n    );\n});\n\nIframe.displayName = \"Iframe\";\n"],"names":["Iframe","observer","url","timestamp","props","iframeRef","useRef","previewBodyRef","previewWidth","useResponsiveContainer","viewport","usePreviewData","editor","useSelectFromEditor","state","isReadOnly","useEffect","minHeight","iframeUrl","useMemo","localUrl","URL","PreviewContainer","ConnectEditorToPreview","OverlayLoader","ElementOverlays","cn"],"mappings":";;;;;;;;;AAoBO,MAAMA,SAASC,SAAS,CAAC,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGC,OAAoB;IACrE,MAAMC,YAAYC,OAA0B;IAC5C,MAAMC,iBAAiBD,OAAuB;IAC9C,MAAME,eAAeC,uBAAuBL,MAAM,eAAe;IACjE,MAAM,EAAEM,QAAQ,EAAE,GAAGC;IACrB,MAAMC,SAASC,oBAAoBC,CAAAA,QAAU;YACzC,YAAYA,MAAM,UAAU;YAC5B,gBAAgBA,MAAM,eAAe,CAAC,MAAM;QAChD;IAEA,MAAMC,aAAaH,OAAO,UAAU;IAKpCI,UAAU;QACN,IAAIT,eAAe,OAAO,EAAE;YACxB,MAAMU,YAAY,CAAC,aAAa,EAAEL,OAAO,cAAc,CAAC,GAAG,CAAC;YAC5DL,eAAe,OAAO,CAAC,KAAK,CAAC,SAAS,GAAGU;QAC7C;IACJ,GAAG;QAACT;KAAa;IAEjB,MAAMU,YAAYC,QAAQ;QACtB,MAAMC,WAAW,IAAIC,IAAInB;QACzBkB,SAAS,YAAY,CAAC,GAAG,CAAC,SAASjB,UAAU,QAAQ;QACrD,OAAOiB,SAAS,QAAQ;IAC5B,GAAG;QAAClB;QAAKC;KAAU;IAEnB,OAAO,WAAP,GACI,oBAACmB,kBAAgBA;QAAC,KAAKJ;qBACnB,oBAACK,wBAAsBA;QAAC,WAAWlB;QAAW,aAAaD,MAAM,WAAW;QAC3EA,MAAM,WAAW,GAAG,WAAH,GACd,oBAACoB,eAAaA;QACV,MAAK;QACL,SAAQ;QACR,MAAK;QACL,WAAW;SAEf,oBAEJ,oBAAC;QACG,IAAI;QACJ,KAAKjB;QACL,WACI;QAEJ,OAAO;YACH,UAAU;YACV,OAAO,GAAGC,aAAa,EAAE,CAAC;YAC1B,WAAW,GAAGE,SAAS,YAAY,CAAC,EAAE,CAAC;QAC3C;OAEC,AAACK,aAAmC,OAAtB,WAAbA,GAAa,oBAACU,iBAAeA,OAAM,cACrC,oBAAC;QACG,WAAU;QACV,IAAI;QACJ,WAAWC,GACP,oFACAX,aAAa,wBAAwB;QAEzC,KAAKG;QACL,KAAKb;QACL,SAAQ;;AAK5B;AAEAL,OAAO,WAAW,GAAG"}

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

@@ -3,53 +3,49 @@ import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { useKeyHandler } from "../../../hooks/useKeyHandler.js";
 import { $getActiveElementId } from "../../../../editorSdk/utils/index.js";
 import { Commands } from "../../../index.js";
-export const KeyboardShortcuts = () => {
-  const editor = useDocumentEditor();
-  const {
-    addKeyHandler,
-    removeKeyHandler
-  } = useKeyHandler();
-  const deleteActiveElement = useCallback(() => {
-    const activeElementId = $getActiveElementId(editor);
-    if (activeElementId) {
-      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;
+const KeyboardShortcuts = ()=>{
+    const editor = useDocumentEditor();
+    const { addKeyHandler, removeKeyHandler } = useKeyHandler();
+    const deleteActiveElement = useCallback(()=>{
+        const activeElementId = $getActiveElementId(editor);
+        if (activeElementId) 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;
 };
+export { KeyboardShortcuts };
 
 //# sourceMappingURL=KeyboardShortcuts.js.map