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

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

@@ -1,240 +1,184 @@
 import { functionConverter, mouseTracker } from "@webiny/website-builder-sdk";
-import defaultImage from "@webiny/icons/extension.svg";
+import extension from "@webiny/icons/extension.svg";
 import { Commands } from "../../../index.js";
 import { $createElement } from "../../../../editorSdk/utils/index.js";
-// oxlint-disable-next-line typescript/no-unsafe-function-type
 function deserializeHandlers(value) {
-  if (Array.isArray(value)) {
-    return value.map(s => functionConverter.deserialize(s));
-  }
-  return functionConverter.deserialize(value);
+    if (Array.isArray(value)) return value.map((s)=>functionConverter.deserialize(s));
+    return functionConverter.deserialize(value);
 }
-export class PreviewEvents {
-  editorEventsRegistered = false;
-  listeners = [];
-  constructor(editor) {
-    this.editor = editor;
-
-    // @ts-ignore 123
-    window["aiCreateElement"] = input => {
-      const elements = Array.isArray(input) ? input : [input];
-      elements.forEach(element => {
-        $createElement(this.editor, {
-          componentName: element.component,
-          bindings: {
-            inputs: element.inputs
-          },
-          parentId: "root",
-          index: 0,
-          slot: "children"
+class PreviewEvents {
+    constructor(editor){
+        this.editorEventsRegistered = false;
+        this.listeners = [];
+        this.editor = editor;
+        window["aiCreateElement"] = (input)=>{
+            const elements = Array.isArray(input) ? input : [
+                input
+            ];
+            elements.forEach((element)=>{
+                $createElement(this.editor, {
+                    componentName: element.component,
+                    bindings: {
+                        inputs: element.inputs
+                    },
+                    parentId: "root",
+                    index: 0,
+                    slot: "children"
+                });
+            });
+        };
+    }
+    onConnected(messenger) {
+        this.messenger?.dispose();
+        this.messenger = messenger;
+        this.registerEditorEvents();
+        this.subscribeToIframe(messenger);
+        setTimeout(()=>{
+            this.editor.updateEditor((state)=>{
+                state.loadingPreview = false;
+                state.selectedElement = null;
+            });
+        }, 100);
+    }
+    destroy() {
+        this.listeners.forEach((unsubscribe)=>{
+            unsubscribe();
         });
-      });
-    };
-  }
-  onConnected(messenger) {
-    // Dispose of the old messenger.
-    this.messenger?.dispose();
-    this.messenger = messenger;
-    this.registerEditorEvents();
-    this.subscribeToIframe(messenger);
-    setTimeout(() => {
-      this.editor.updateEditor(state => {
-        state.loadingPreview = false;
-        state.selectedElement = null;
-      });
-    }, 100);
-  }
-  destroy() {
-    this.listeners.forEach(unsubscribe => {
-      unsubscribe();
-    });
-  }
-  registerEditorEvents() {
-    if (this.editorEventsRegistered) {
-      return;
     }
-    this.editorEventsRegistered = true;
-    this.listeners.push(
-    // Propagate changes
-    this.editor.onDocumentStateChange(event => {
-      if (event.reason === "update") {
-        this.getMessenger().send("document.patch", event.diff);
-      } else {
-        this.getMessenger().send("document.set", event.state);
-      }
-    }),
-    // Element preview
-    this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {
-      this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);
-    }),
-    // Forward arbitrary messages to the preview iframe.
-    this.editor.registerCommandHandler(Commands.SendPreviewMessage, ({
-      type,
-      payload
-    }) => {
-      this.getMessenger().send(type, payload);
-    }));
-  }
-  subscribeToIframe(messenger) {
-    // When `onConnected` is executed, we need to send new data to the live preview.
-    messenger.send("document.set", this.editor.getDocumentState().toJson());
-    messenger.on("preview.theme", ({
-      theme
-    }) => {
-      this.editor.executeCommand(Commands.SetTheme, {
-        theme
-      });
-    });
-    messenger.on("document.fragments", payload => {
-      const fragments = payload.fragments;
-      this.editor.updateEditor(state => {
-        state.fragments = fragments;
-      });
-      const document = this.editor.getDocumentState().read();
-      if (Object.keys(document.elements).length === 1) {
-        // We only have the default "root" element, create fragment elements.
-        fragments.forEach((fragment, index) => {
-          if (fragment.type === "fixed") {
-            $createElement(this.editor, {
-              componentName: "Webiny/Fragment",
-              parentId: "root",
-              slot: "children",
-              index,
-              bindings: {
-                inputs: {
-                  name: fragment.name
-                }
-              }
+    registerEditorEvents() {
+        if (this.editorEventsRegistered) return;
+        this.editorEventsRegistered = true;
+        this.listeners.push(this.editor.onDocumentStateChange((event)=>{
+            if ("update" === event.reason) this.getMessenger().send("document.patch", event.diff);
+            else this.getMessenger().send("document.set", event.state);
+        }), this.editor.registerCommandHandler(Commands.PreviewPatchElement, (payload)=>{
+            this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);
+        }), this.editor.registerCommandHandler(Commands.SendPreviewMessage, ({ type, payload })=>{
+            this.getMessenger().send(type, payload);
+        }));
+    }
+    subscribeToIframe(messenger) {
+        messenger.send("document.set", this.editor.getDocumentState().toJson());
+        messenger.on("preview.theme", ({ theme })=>{
+            this.editor.executeCommand(Commands.SetTheme, {
+                theme
             });
-            return;
-          }
-          $createElement(this.editor, {
-            componentName: fragment.component,
-            parentId: "root",
-            slot: "children",
-            index,
-            bindings: {
-              inputs: fragment.inputs
+        });
+        messenger.on("document.fragments", (payload)=>{
+            const fragments = payload.fragments;
+            this.editor.updateEditor((state)=>{
+                state.fragments = fragments;
+            });
+            const document1 = this.editor.getDocumentState().read();
+            if (1 === Object.keys(document1.elements).length) fragments.forEach((fragment, index)=>{
+                if ("fixed" === fragment.type) return void $createElement(this.editor, {
+                    componentName: "Webiny/Fragment",
+                    parentId: "root",
+                    slot: "children",
+                    index,
+                    bindings: {
+                        inputs: {
+                            name: fragment.name
+                        }
+                    }
+                });
+                $createElement(this.editor, {
+                    componentName: fragment.component,
+                    parentId: "root",
+                    slot: "children",
+                    index,
+                    bindings: {
+                        inputs: fragment.inputs
+                    }
+                });
+            });
+        });
+        messenger.on("preview.viewport", ({ boxes, viewport })=>{
+            const iframeBox = this.getIframeBox();
+            this.editor.updateEditor((state)=>{
+                state.viewport = {
+                    ...state.viewport,
+                    ...viewport,
+                    top: iframeBox.top,
+                    left: iframeBox.left
+                };
+                state.boxes = {
+                    preview: boxes,
+                    editor: this.mapCoordinatesToEditorSpace(state.viewport, boxes)
+                };
+            });
+        });
+        messenger.on("preview.component.register", (component)=>{
+            try {
+                if (component.constraints) component.constraints = component.constraints.map((c)=>"string" == typeof c ? functionConverter.deserialize(c) : c);
+                if (component.descendantConstraints) component.descendantConstraints = component.descendantConstraints.map((c)=>"string" == typeof c ? functionConverter.deserialize(c) : c);
+                if (component.canDelete && "string" == typeof component.canDelete) component.canDelete = functionConverter.deserialize(component.canDelete);
+                if (component.onChange) component.onChange = deserializeHandlers(component.onChange);
+                if (component.onDescendantChange) component.onDescendantChange = deserializeHandlers(component.onDescendantChange);
+            } catch (e) {
+                console.log(`Couldn't deserialize ${component.name} component callbacks:`, e.message);
             }
-          });
+            this.editor.updateEditor((state)=>{
+                if (!state.components) state.components = {};
+                state.components[component.name] = {
+                    ...component,
+                    image: component.image ?? extension,
+                    tags: component.tags ?? []
+                };
+            });
         });
-      }
-    });
-    messenger.on("preview.viewport", ({
-      boxes,
-      viewport
-    }) => {
-      const iframeBox = this.getIframeBox();
-      this.editor.updateEditor(state => {
-        state.viewport = {
-          ...state.viewport,
-          ...viewport,
-          top: iframeBox.top,
-          left: iframeBox.left
-        };
-        state.boxes = {
-          preview: boxes,
-          editor: this.mapCoordinatesToEditorSpace(state.viewport, boxes)
+        messenger.on("preview.componentGroup.register", (group)=>{
+            this.editor.updateEditor((state)=>{
+                if (!state.componentGroups) state.componentGroups = {};
+                state.componentGroups[group.name] = group;
+            });
+        });
+        messenger.on("preview.element.click", ({ id })=>{
+            this.editor.updateEditor((state)=>{
+                state.selectedElement = id;
+            });
+        });
+        messenger.on("preview.mouse.move", ({ x, y })=>{
+            const iframeBox = this.getIframeBox();
+            const globalX = x + iframeBox.left;
+            const globalY = y + iframeBox.top;
+            mouseTracker.setPosition(globalX, globalY);
+        });
+    }
+    getIframeBox() {
+        const previewContainer = document.getElementById("preview-container");
+        const previewBody = document.getElementById("preview-body");
+        if (!previewContainer || !previewBody) return {
+            top: 0,
+            left: 0,
+            width: 0,
+            height: 0
         };
-      });
-    });
-    messenger.on("preview.component.register", component => {
-      // Deserialize constraint check functions once on arrival.
-      try {
-        if (component.constraints) {
-          component.constraints = component.constraints.map(c => typeof c === "string" ? functionConverter.deserialize(c) : c);
-        }
-        if (component.descendantConstraints) {
-          component.descendantConstraints = component.descendantConstraints.map(c => typeof c === "string" ? functionConverter.deserialize(c) : c);
-        }
-        if (component.canDelete && typeof component.canDelete === "string") {
-          component.canDelete = functionConverter.deserialize(component.canDelete);
-        }
-        if (component.onChange) {
-          component.onChange = deserializeHandlers(component.onChange);
-        }
-        if (component.onDescendantChange) {
-          component.onDescendantChange = deserializeHandlers(component.onDescendantChange);
-        }
-      } catch (e) {
-        console.log(`Couldn't deserialize ${component.name} component callbacks:`, e.message);
-      }
-      this.editor.updateEditor(state => {
-        if (!state.components) {
-          state.components = {};
-        }
-        state.components[component.name] = {
-          ...component,
-          image: component.image ?? defaultImage,
-          tags: component.tags ?? []
+        const containerRect = previewContainer.getBoundingClientRect();
+        const bodyRect = previewBody.getBoundingClientRect();
+        return {
+            top: containerRect.top,
+            left: bodyRect.left,
+            width: bodyRect.width,
+            height: bodyRect.height
         };
-      });
-    });
-    messenger.on("preview.componentGroup.register", group => {
-      this.editor.updateEditor(state => {
-        if (!state.componentGroups) {
-          state.componentGroups = {};
+    }
+    mapCoordinatesToEditorSpace(viewport, boxes) {
+        const newBoxes = {};
+        for(const key in boxes){
+            const box = boxes[key];
+            newBoxes[key] = {
+                ...box,
+                top: box.top + viewport.top,
+                left: box.left + viewport.left
+            };
         }
-        state.componentGroups[group.name] = group;
-      });
-    });
-    messenger.on("preview.element.click", ({
-      id
-    }) => {
-      this.editor.updateEditor(state => {
-        state.selectedElement = id;
-      });
-    });
-    messenger.on("preview.mouse.move", ({
-      x,
-      y
-    }) => {
-      const iframeBox = this.getIframeBox();
-      const globalX = x + iframeBox.left;
-      const globalY = y + iframeBox.top;
-      mouseTracker.setPosition(globalX, globalY);
-    });
-  }
-  getIframeBox() {
-    const previewContainer = document.getElementById("preview-container");
-    const previewBody = document.getElementById("preview-body");
-    if (!previewContainer || !previewBody) {
-      return {
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0
-      };
+        return newBoxes;
     }
-
-    /**
-     * We need to use the `preview-container` to get the exact position from the top (we MUST ignore scroll position).
-     * However, for everything else we use the actual `preview-body`,
-     */
-    const containerRect = previewContainer.getBoundingClientRect();
-    const bodyRect = previewBody.getBoundingClientRect();
-    return {
-      top: containerRect.top,
-      left: bodyRect.left,
-      width: bodyRect.width,
-      height: bodyRect.height
-    };
-  }
-  mapCoordinatesToEditorSpace(viewport, boxes) {
-    const newBoxes = {};
-    for (const key in boxes) {
-      const box = boxes[key];
-      newBoxes[key] = {
-        ...box,
-        top: box.top + viewport.top,
-        left: box.left + viewport.left
-      };
+    getMessenger() {
+        return this.messenger;
     }
-    return newBoxes;
-  }
-  getMessenger() {
-    return this.messenger;
-  }
 }
+export { PreviewEvents };
 
 //# sourceMappingURL=PreviewEvents.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["functionConverter","mouseTracker","defaultImage","Commands","$createElement","deserializeHandlers","value","Array","isArray","map","s","deserialize","PreviewEvents","editorEventsRegistered","listeners","constructor","editor","window","input","elements","forEach","element","componentName","component","bindings","inputs","parentId","index","slot","onConnected","messenger","dispose","registerEditorEvents","subscribeToIframe","setTimeout","updateEditor","state","loadingPreview","selectedElement","destroy","unsubscribe","push","onDocumentStateChange","event","reason","getMessenger","send","diff","registerCommandHandler","PreviewPatchElement","payload","elementId","patch","SendPreviewMessage","type","getDocumentState","toJson","on","theme","executeCommand","SetTheme","fragments","document","read","Object","keys","length","fragment","name","boxes","viewport","iframeBox","getIframeBox","top","left","preview","mapCoordinatesToEditorSpace","constraints","c","descendantConstraints","canDelete","onChange","onDescendantChange","e","console","log","message","components","image","tags","group","componentGroups","id","x","y","globalX","globalY","setPosition","previewContainer","getElementById","previewBody","width","height","containerRect","getBoundingClientRect","bodyRect","newBoxes","key","box"],"sources":["PreviewEvents.ts"],"sourcesContent":["import type { Messenger } from \"@webiny/website-builder-sdk\";\nimport {\n    type BoxesData,\n    type ComponentManifest,\n    type EditorViewportInfo,\n    functionConverter,\n    mouseTracker,\n    type PreviewViewportData,\n    type SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport defaultImage from \"@webiny/icons/extension.svg\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { $createElement } from \"~/editorSdk/utils/index.js\";\n\ntype FragmentConfig =\n    | {\n          type: \"fixed\";\n          name: string;\n          element: React.ReactNode;\n      }\n    | { type: \"component\"; component: string; inputs: Record<string, any> };\n\n// oxlint-disable-next-line typescript/no-unsafe-function-type\nfunction deserializeHandlers(value: string | string[]): Function | Function[] {\n    if (Array.isArray(value)) {\n        return value.map(s => functionConverter.deserialize(s));\n    }\n    return functionConverter.deserialize(value);\n}\n\nexport class PreviewEvents {\n    private editor: Editor;\n    private editorEventsRegistered = false;\n    private messenger: Messenger | undefined;\n    private listeners: Array<() => void> = [];\n\n    constructor(editor: Editor) {\n        this.editor = editor;\n\n        // @ts-ignore 123\n        window[\"aiCreateElement\"] = (input: any) => {\n            const elements = Array.isArray(input) ? input : [input];\n            elements.forEach(element => {\n                $createElement(this.editor, {\n                    componentName: element.component,\n                    bindings: { inputs: element.inputs },\n                    parentId: \"root\",\n                    index: 0,\n                    slot: \"children\"\n                });\n            });\n        };\n    }\n\n    onConnected(messenger: Messenger) {\n        // Dispose of the old messenger.\n        this.messenger?.dispose();\n\n        this.messenger = messenger;\n\n        this.registerEditorEvents();\n\n        this.subscribeToIframe(messenger);\n\n        setTimeout(() => {\n            this.editor.updateEditor(state => {\n                state.loadingPreview = false;\n                state.selectedElement = null;\n            });\n        }, 100);\n    }\n\n    destroy() {\n        this.listeners.forEach(unsubscribe => {\n            unsubscribe();\n        });\n    }\n\n    private registerEditorEvents() {\n        if (this.editorEventsRegistered) {\n            return;\n        }\n\n        this.editorEventsRegistered = true;\n\n        this.listeners.push(\n            // Propagate changes\n            this.editor.onDocumentStateChange(event => {\n                if (event.reason === \"update\") {\n                    this.getMessenger().send(\"document.patch\", event.diff);\n                } else {\n                    this.getMessenger().send(\"document.set\", event.state);\n                }\n            }),\n\n            // Element preview\n            this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {\n                this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);\n            }),\n\n            // Forward arbitrary messages to the preview iframe.\n            this.editor.registerCommandHandler(Commands.SendPreviewMessage, ({ type, payload }) => {\n                this.getMessenger().send(type, payload);\n            })\n        );\n    }\n\n    private subscribeToIframe(messenger: Messenger) {\n        // When `onConnected` is executed, we need to send new data to the live preview.\n        messenger.send(\"document.set\", this.editor.getDocumentState().toJson());\n\n        messenger.on(\"preview.theme\", ({ theme }) => {\n            this.editor.executeCommand(Commands.SetTheme, { theme });\n        });\n\n        messenger.on(\"document.fragments\", payload => {\n            const fragments: FragmentConfig[] = payload.fragments;\n            this.editor.updateEditor(state => {\n                state.fragments = fragments;\n            });\n\n            const document = this.editor.getDocumentState().read();\n\n            if (Object.keys(document.elements).length === 1) {\n                // We only have the default \"root\" element, create fragment elements.\n                fragments.forEach((fragment, index) => {\n                    if (fragment.type === \"fixed\") {\n                        $createElement(this.editor, {\n                            componentName: \"Webiny/Fragment\",\n                            parentId: \"root\",\n                            slot: \"children\",\n                            index,\n                            bindings: {\n                                inputs: {\n                                    name: fragment.name\n                                }\n                            }\n                        });\n                        return;\n                    }\n\n                    $createElement(this.editor, {\n                        componentName: fragment.component,\n                        parentId: \"root\",\n                        slot: \"children\",\n                        index,\n                        bindings: {\n                            inputs: fragment.inputs\n                        }\n                    });\n                });\n            }\n        });\n\n        messenger.on(\"preview.viewport\", ({ boxes, viewport }: PreviewViewportData) => {\n            const iframeBox = this.getIframeBox();\n\n            this.editor.updateEditor(state => {\n                state.viewport = {\n                    ...state.viewport,\n                    ...viewport,\n                    top: iframeBox.top,\n                    left: iframeBox.left\n                };\n\n                state.boxes = {\n                    preview: boxes,\n                    editor: this.mapCoordinatesToEditorSpace(state.viewport, boxes)\n                };\n            });\n        });\n\n        messenger.on(\"preview.component.register\", (component: ComponentManifest) => {\n            // Deserialize constraint check functions once on arrival.\n            try {\n                if (component.constraints) {\n                    component.constraints = (component.constraints as any[]).map(c =>\n                        typeof c === \"string\" ? functionConverter.deserialize(c) : c\n                    );\n                }\n                if (component.descendantConstraints) {\n                    component.descendantConstraints = (\n                        component.descendantConstraints as any[]\n                    ).map(c => (typeof c === \"string\" ? functionConverter.deserialize(c) : c));\n                }\n                if (component.canDelete && typeof component.canDelete === \"string\") {\n                    component.canDelete = functionConverter.deserialize(component.canDelete);\n                }\n                if (component.onChange) {\n                    component.onChange = deserializeHandlers(component.onChange as any) as any;\n                }\n                if (component.onDescendantChange) {\n                    component.onDescendantChange = deserializeHandlers(\n                        component.onDescendantChange as any\n                    ) as any;\n                }\n            } catch (e) {\n                console.log(\n                    `Couldn't deserialize ${component.name} component callbacks:`,\n                    e.message\n                );\n            }\n\n            this.editor.updateEditor(state => {\n                if (!state.components) {\n                    state.components = {};\n                }\n                state.components[component.name] = {\n                    ...component,\n                    image: component.image ?? defaultImage,\n                    tags: component.tags ?? []\n                };\n            });\n        });\n\n        messenger.on(\"preview.componentGroup.register\", (group: SerializedComponentGroup) => {\n            this.editor.updateEditor(state => {\n                if (!state.componentGroups) {\n                    state.componentGroups = {};\n                }\n                state.componentGroups[group.name] = group;\n            });\n        });\n\n        messenger.on(\"preview.element.click\", ({ id }) => {\n            this.editor.updateEditor(state => {\n                state.selectedElement = id;\n            });\n        });\n\n        messenger.on(\"preview.mouse.move\", ({ x, y }) => {\n            const iframeBox = this.getIframeBox();\n            const globalX = x + iframeBox.left;\n            const globalY = y + iframeBox.top;\n\n            mouseTracker.setPosition(globalX, globalY);\n        });\n    }\n\n    private getIframeBox() {\n        const previewContainer = document.getElementById(\"preview-container\");\n        const previewBody = document.getElementById(\"preview-body\");\n\n        if (!previewContainer || !previewBody) {\n            return {\n                top: 0,\n                left: 0,\n                width: 0,\n                height: 0\n            };\n        }\n\n        /**\n         * We need to use the `preview-container` to get the exact position from the top (we MUST ignore scroll position).\n         * However, for everything else we use the actual `preview-body`,\n         */\n        const containerRect = previewContainer.getBoundingClientRect();\n        const bodyRect = previewBody.getBoundingClientRect();\n\n        return {\n            top: containerRect.top,\n            left: bodyRect.left,\n            width: bodyRect.width,\n            height: bodyRect.height\n        };\n    }\n\n    private mapCoordinatesToEditorSpace(\n        viewport: EditorViewportInfo,\n        boxes: PreviewViewportData[\"boxes\"]\n    ) {\n        const newBoxes: BoxesData = {};\n\n        for (const key in boxes) {\n            const box = boxes[key];\n            newBoxes[key] = {\n                ...box,\n                top: box.top + viewport.top,\n                left: box.left + viewport.left\n            };\n        }\n\n        return newBoxes;\n    }\n\n    private getMessenger(): Messenger {\n        return this.messenger!;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.ts"],"sourcesContent":["import type { Messenger } from \"@webiny/website-builder-sdk\";\nimport {\n    type BoxesData,\n    type ComponentManifest,\n    type EditorViewportInfo,\n    functionConverter,\n    mouseTracker,\n    type PreviewViewportData,\n    type SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport defaultImage from \"@webiny/icons/extension.svg\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { $createElement } from \"~/editorSdk/utils/index.js\";\n\ntype FragmentConfig =\n    | {\n          type: \"fixed\";\n          name: string;\n          element: React.ReactNode;\n      }\n    | { type: \"component\"; component: string; inputs: Record<string, any> };\n\n// oxlint-disable-next-line typescript/no-unsafe-function-type\nfunction deserializeHandlers(value: string | string[]): Function | Function[] {\n    if (Array.isArray(value)) {\n        return value.map(s => functionConverter.deserialize(s));\n    }\n    return functionConverter.deserialize(value);\n}\n\nexport class PreviewEvents {\n    private editor: Editor;\n    private editorEventsRegistered = false;\n    private messenger: Messenger | undefined;\n    private listeners: Array<() => void> = [];\n\n    constructor(editor: Editor) {\n        this.editor = editor;\n\n        // @ts-ignore 123\n        window[\"aiCreateElement\"] = (input: any) => {\n            const elements = Array.isArray(input) ? input : [input];\n            elements.forEach(element => {\n                $createElement(this.editor, {\n                    componentName: element.component,\n                    bindings: { inputs: element.inputs },\n                    parentId: \"root\",\n                    index: 0,\n                    slot: \"children\"\n                });\n            });\n        };\n    }\n\n    onConnected(messenger: Messenger) {\n        // Dispose of the old messenger.\n        this.messenger?.dispose();\n\n        this.messenger = messenger;\n\n        this.registerEditorEvents();\n\n        this.subscribeToIframe(messenger);\n\n        setTimeout(() => {\n            this.editor.updateEditor(state => {\n                state.loadingPreview = false;\n                state.selectedElement = null;\n            });\n        }, 100);\n    }\n\n    destroy() {\n        this.listeners.forEach(unsubscribe => {\n            unsubscribe();\n        });\n    }\n\n    private registerEditorEvents() {\n        if (this.editorEventsRegistered) {\n            return;\n        }\n\n        this.editorEventsRegistered = true;\n\n        this.listeners.push(\n            // Propagate changes\n            this.editor.onDocumentStateChange(event => {\n                if (event.reason === \"update\") {\n                    this.getMessenger().send(\"document.patch\", event.diff);\n                } else {\n                    this.getMessenger().send(\"document.set\", event.state);\n                }\n            }),\n\n            // Element preview\n            this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {\n                this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);\n            }),\n\n            // Forward arbitrary messages to the preview iframe.\n            this.editor.registerCommandHandler(Commands.SendPreviewMessage, ({ type, payload }) => {\n                this.getMessenger().send(type, payload);\n            })\n        );\n    }\n\n    private subscribeToIframe(messenger: Messenger) {\n        // When `onConnected` is executed, we need to send new data to the live preview.\n        messenger.send(\"document.set\", this.editor.getDocumentState().toJson());\n\n        messenger.on(\"preview.theme\", ({ theme }) => {\n            this.editor.executeCommand(Commands.SetTheme, { theme });\n        });\n\n        messenger.on(\"document.fragments\", payload => {\n            const fragments: FragmentConfig[] = payload.fragments;\n            this.editor.updateEditor(state => {\n                state.fragments = fragments;\n            });\n\n            const document = this.editor.getDocumentState().read();\n\n            if (Object.keys(document.elements).length === 1) {\n                // We only have the default \"root\" element, create fragment elements.\n                fragments.forEach((fragment, index) => {\n                    if (fragment.type === \"fixed\") {\n                        $createElement(this.editor, {\n                            componentName: \"Webiny/Fragment\",\n                            parentId: \"root\",\n                            slot: \"children\",\n                            index,\n                            bindings: {\n                                inputs: {\n                                    name: fragment.name\n                                }\n                            }\n                        });\n                        return;\n                    }\n\n                    $createElement(this.editor, {\n                        componentName: fragment.component,\n                        parentId: \"root\",\n                        slot: \"children\",\n                        index,\n                        bindings: {\n                            inputs: fragment.inputs\n                        }\n                    });\n                });\n            }\n        });\n\n        messenger.on(\"preview.viewport\", ({ boxes, viewport }: PreviewViewportData) => {\n            const iframeBox = this.getIframeBox();\n\n            this.editor.updateEditor(state => {\n                state.viewport = {\n                    ...state.viewport,\n                    ...viewport,\n                    top: iframeBox.top,\n                    left: iframeBox.left\n                };\n\n                state.boxes = {\n                    preview: boxes,\n                    editor: this.mapCoordinatesToEditorSpace(state.viewport, boxes)\n                };\n            });\n        });\n\n        messenger.on(\"preview.component.register\", (component: ComponentManifest) => {\n            // Deserialize constraint check functions once on arrival.\n            try {\n                if (component.constraints) {\n                    component.constraints = (component.constraints as any[]).map(c =>\n                        typeof c === \"string\" ? functionConverter.deserialize(c) : c\n                    );\n                }\n                if (component.descendantConstraints) {\n                    component.descendantConstraints = (\n                        component.descendantConstraints as any[]\n                    ).map(c => (typeof c === \"string\" ? functionConverter.deserialize(c) : c));\n                }\n                if (component.canDelete && typeof component.canDelete === \"string\") {\n                    component.canDelete = functionConverter.deserialize(component.canDelete);\n                }\n                if (component.onChange) {\n                    component.onChange = deserializeHandlers(component.onChange as any) as any;\n                }\n                if (component.onDescendantChange) {\n                    component.onDescendantChange = deserializeHandlers(\n                        component.onDescendantChange as any\n                    ) as any;\n                }\n            } catch (e) {\n                console.log(\n                    `Couldn't deserialize ${component.name} component callbacks:`,\n                    e.message\n                );\n            }\n\n            this.editor.updateEditor(state => {\n                if (!state.components) {\n                    state.components = {};\n                }\n                state.components[component.name] = {\n                    ...component,\n                    image: component.image ?? defaultImage,\n                    tags: component.tags ?? []\n                };\n            });\n        });\n\n        messenger.on(\"preview.componentGroup.register\", (group: SerializedComponentGroup) => {\n            this.editor.updateEditor(state => {\n                if (!state.componentGroups) {\n                    state.componentGroups = {};\n                }\n                state.componentGroups[group.name] = group;\n            });\n        });\n\n        messenger.on(\"preview.element.click\", ({ id }) => {\n            this.editor.updateEditor(state => {\n                state.selectedElement = id;\n            });\n        });\n\n        messenger.on(\"preview.mouse.move\", ({ x, y }) => {\n            const iframeBox = this.getIframeBox();\n            const globalX = x + iframeBox.left;\n            const globalY = y + iframeBox.top;\n\n            mouseTracker.setPosition(globalX, globalY);\n        });\n    }\n\n    private getIframeBox() {\n        const previewContainer = document.getElementById(\"preview-container\");\n        const previewBody = document.getElementById(\"preview-body\");\n\n        if (!previewContainer || !previewBody) {\n            return {\n                top: 0,\n                left: 0,\n                width: 0,\n                height: 0\n            };\n        }\n\n        /**\n         * We need to use the `preview-container` to get the exact position from the top (we MUST ignore scroll position).\n         * However, for everything else we use the actual `preview-body`,\n         */\n        const containerRect = previewContainer.getBoundingClientRect();\n        const bodyRect = previewBody.getBoundingClientRect();\n\n        return {\n            top: containerRect.top,\n            left: bodyRect.left,\n            width: bodyRect.width,\n            height: bodyRect.height\n        };\n    }\n\n    private mapCoordinatesToEditorSpace(\n        viewport: EditorViewportInfo,\n        boxes: PreviewViewportData[\"boxes\"]\n    ) {\n        const newBoxes: BoxesData = {};\n\n        for (const key in boxes) {\n            const box = boxes[key];\n            newBoxes[key] = {\n                ...box,\n                top: box.top + viewport.top,\n                left: box.left + viewport.left\n            };\n        }\n\n        return newBoxes;\n    }\n\n    private getMessenger(): Messenger {\n        return this.messenger!;\n    }\n}\n"],"names":["deserializeHandlers","value","Array","s","functionConverter","PreviewEvents","editor","window","input","elements","element","$createElement","messenger","setTimeout","state","unsubscribe","event","Commands","payload","type","theme","fragments","document1","Object","fragment","index","boxes","viewport","iframeBox","component","c","e","console","defaultImage","group","id","x","y","globalX","globalY","mouseTracker","previewContainer","document","previewBody","containerRect","bodyRect","newBoxes","key","box"],"mappings":"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"}

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

@@ -1,3 +1 @@
 export * from "./Preview.js";
-
-//# sourceMappingURL=index.js.map

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

@@ -1,13 +1,9 @@
-export function mergeRefs(...refs) {
-  return value => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref && typeof ref === "object") {
-        ref.current = value;
-      }
-    }
-  };
+function mergeRefs(...refs) {
+    return (value)=>{
+        for (const ref of refs)if ("function" == typeof ref) ref(value);
+        else if (ref && "object" == typeof ref) ref.current = value;
+    };
 }
+export { mergeRefs };
 
 //# sourceMappingURL=mergeRefs.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["mergeRefs","refs","value","ref","current"],"sources":["mergeRefs.ts"],"sourcesContent":["export function mergeRefs<T = any>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {\n    return (value: T) => {\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                ref(value);\n            } else if (ref && typeof ref === \"object\") {\n                (ref as React.MutableRefObject<T | null>).current = value;\n            }\n        }\n    };\n}\n"],"mappings":"AAAA,OAAO,SAASA,SAASA,CAAU,GAAGC,IAAkC,EAAwB;EAC5F,OAAQC,KAAQ,IAAK;IACjB,KAAK,MAAMC,GAAG,IAAIF,IAAI,EAAE;MACpB,IAAI,OAAOE,GAAG,KAAK,UAAU,EAAE;QAC3BA,GAAG,CAACD,KAAK,CAAC;MACd,CAAC,MAAM,IAAIC,GAAG,IAAI,OAAOA,GAAG,KAAK,QAAQ,EAAE;QACtCA,GAAG,CAAsCC,OAAO,GAAGF,KAAK;MAC7D;IACJ;EACJ,CAAC;AACL","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/mergeRefs.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/mergeRefs.ts"],"sourcesContent":["export function mergeRefs<T = any>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {\n    return (value: T) => {\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                ref(value);\n            } else if (ref && typeof ref === \"object\") {\n                (ref as React.MutableRefObject<T | null>).current = value;\n            }\n        }\n    };\n}\n"],"names":["mergeRefs","refs","value","ref"],"mappings":"AAAO,SAASA,UAAmB,GAAGC,IAAkC;IACpE,OAAO,CAACC;QACJ,KAAK,MAAMC,OAAOF,KACd,IAAI,AAAe,cAAf,OAAOE,KACPA,IAAID;aACD,IAAIC,OAAO,AAAe,YAAf,OAAOA,KACpBA,IAAyC,OAAO,GAAGD;IAGhE;AACJ"}

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

@@ -1,12 +1,13 @@
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
-export const useElementComponentManifest = elementId => {
-  const editor = useDocumentEditor();
-  const document = editor.getDocumentState().read();
-  const componentName = document.elements[elementId]?.component.name;
-  return useSelectFromEditor(state => {
-    return state.components[componentName];
-  }, [componentName]);
+const useElementComponentManifest = (elementId)=>{
+    const editor = useDocumentEditor();
+    const document = editor.getDocumentState().read();
+    const componentName = document.elements[elementId]?.component.name;
+    return useSelectFromEditor((state)=>state.components[componentName], [
+        componentName
+    ]);
 };
+export { useElementComponentManifest };
 
 //# sourceMappingURL=useElementComponentManifest.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useDocumentEditor","useSelectFromEditor","useElementComponentManifest","elementId","editor","document","getDocumentState","read","componentName","elements","component","name","state","components"],"sources":["useElementComponentManifest.ts"],"sourcesContent":["import { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\nexport const useElementComponentManifest = (elementId: string) => {\n    const editor = useDocumentEditor();\n    const document = editor.getDocumentState().read();\n    const componentName = document.elements[elementId]?.component.name;\n\n    return useSelectFromEditor(\n        state => {\n            return state.components[componentName];\n        },\n        [componentName]\n    );\n};\n"],"mappings":"AAAA,SAASA,iBAAiB;AAC1B,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,2BAA2B,GAAIC,SAAiB,IAAK;EAC9D,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClC,MAAMK,QAAQ,GAAGD,MAAM,CAACE,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;EACjD,MAAMC,aAAa,GAAGH,QAAQ,CAACI,QAAQ,CAACN,SAAS,CAAC,EAAEO,SAAS,CAACC,IAAI;EAElE,OAAOV,mBAAmB,CACtBW,KAAK,IAAI;IACL,OAAOA,KAAK,CAACC,UAAU,CAACL,aAAa,CAAC;EAC1C,CAAC,EACD,CAACA,aAAa,CAClB,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.ts"],"sourcesContent":["import { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\nexport const useElementComponentManifest = (elementId: string) => {\n    const editor = useDocumentEditor();\n    const document = editor.getDocumentState().read();\n    const componentName = document.elements[elementId]?.component.name;\n\n    return useSelectFromEditor(\n        state => {\n            return state.components[componentName];\n        },\n        [componentName]\n    );\n};\n"],"names":["useElementComponentManifest","elementId","editor","useDocumentEditor","document","componentName","useSelectFromEditor","state"],"mappings":";;AAGO,MAAMA,8BAA8B,CAACC;IACxC,MAAMC,SAASC;IACf,MAAMC,WAAWF,OAAO,gBAAgB,GAAG,IAAI;IAC/C,MAAMG,gBAAgBD,SAAS,QAAQ,CAACH,UAAU,EAAE,UAAU;IAE9D,OAAOK,oBACHC,CAAAA,QACWA,MAAM,UAAU,CAACF,cAAc,EAE1C;QAACA;KAAc;AAEvB"}

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

@@ -2,33 +2,33 @@ import { useMemo } from "react";
 import { useTenantContext } from "@webiny/app-admin";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { usePreviewDomain } from "../usePreviewDomain.js";
-export const useIframeUrl = () => {
-  const {
-    tenant
-  } = useTenantContext();
-  const {
-    previewDomain
-  } = usePreviewDomain();
-  const id = useSelectFromDocument(document => document.id);
-  const documentType = useSelectFromDocument(document => document.metadata.documentType);
-  const path = useSelectFromDocument(document => document.properties.path);
-  return useMemo(() => {
-    if (!previewDomain) {
-      return null;
-    }
-    const newUrl = new URL(`${previewDomain}${path}`);
-    addSearchParamsFromDocument(tenant, newUrl, id, documentType);
-    return newUrl.toString();
-  }, [previewDomain, id, path, documentType]);
+const useIframeUrl = ()=>{
+    const { tenant } = useTenantContext();
+    const { previewDomain } = usePreviewDomain();
+    const id = useSelectFromDocument((document)=>document.id);
+    const documentType = useSelectFromDocument((document)=>document.metadata.documentType);
+    const path = useSelectFromDocument((document)=>document.properties.path);
+    return useMemo(()=>{
+        if (!previewDomain) return null;
+        const newUrl = new URL(`${previewDomain}${path}`);
+        addSearchParamsFromDocument(tenant, newUrl, id, documentType);
+        return newUrl.toString();
+    }, [
+        previewDomain,
+        id,
+        path,
+        documentType
+    ]);
 };
 function addSearchParamsFromDocument(tenant, url, id, documentType) {
-  const searchParams = url.searchParams;
-  searchParams.set("wb.editing", "true");
-  searchParams.set("wb.type", documentType);
-  searchParams.set("wb.id", id);
-  searchParams.set("wb.path", url.pathname);
-  searchParams.set("wb.referrer", window.location.origin);
-  searchParams.set("wb.tenant", tenant);
+    const searchParams = url.searchParams;
+    searchParams.set("wb.editing", "true");
+    searchParams.set("wb.type", documentType);
+    searchParams.set("wb.id", id);
+    searchParams.set("wb.path", url.pathname);
+    searchParams.set("wb.referrer", window.location.origin);
+    searchParams.set("wb.tenant", tenant);
 }
+export { useIframeUrl };
 
 //# sourceMappingURL=useIframeUrl.js.map