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

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

@@ -1,13 +1,11 @@
-import type { Editor } from "../../../../editorSdk/Editor";
 import type { Messenger } from "@webiny/website-builder-sdk";
-import type { ScrollTracker } from "./ScrollTracker";
+import type { Editor } from "../../../../editorSdk/Editor.js";
 export declare class PreviewEvents {
     private editor;
     private editorEventsRegistered;
     private messenger;
-    private scrollTracker;
     private listeners;
-    constructor(editor: Editor, scrollTracker: ScrollTracker);
+    constructor(editor: Editor);
     onConnected(messenger: Messenger): void;
     destroy(): void;
     private registerEditorEvents;

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

@@ -1,192 +1,187 @@
-import { mouseTracker } from "@webiny/website-builder-sdk";
-import defaultImage from "@webiny/icons/extension.svg";
-import { Commands } from "../../..";
-import { $createElement } from "../../../../editorSdk/utils";
-export class PreviewEvents {
-  editorEventsRegistered = false;
-  listeners = [];
-  constructor(editor, scrollTracker) {
-    this.scrollTracker = scrollTracker;
-    this.editor = editor;
-  }
-  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;
+import { functionConverter, mouseTracker } from "@webiny/website-builder-sdk";
+import extension from "@webiny/icons/extension.svg";
+import { Commands } from "../../../index.js";
+import { $createElement } from "../../../../editorSdk/utils/index.js";
+function deserializeHandlers(value) {
+    if (Array.isArray(value)) return value.map((s)=>functionConverter.deserialize(s));
+    return functionConverter.deserialize(value);
+}
+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();
+        });
     }
-    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);
-      }
-    }),
-    // Scroll start
-    this.scrollTracker.onScrollStart(() => {
-      this.editor.updateEditor(state => {
-        state.showOverlays = false;
-      });
-    }),
-    // Scrolling
-    this.scrollTracker.onScroll(event => {
-      this.getMessenger().send("preview.scroll", {
-        deltaX: event.deltaX,
-        deltaY: event.deltaY
-      });
-    }),
-    // Scroll end
-    this.scrollTracker.onScrollEnd(() => {
-      this.editor.updateEditor(state => {
-        state.showOverlays = true;
-      });
-    }),
-    // Element preview
-    this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {
-      this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);
-    }));
-  }
-  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.
-        let index = 0;
-        fragments.forEach(fragment => {
-          $createElement(this.editor, {
-            componentName: "Webiny/Fragment",
-            parentId: "root",
-            slot: "children",
-            index,
-            bindings: {
-              inputs: {
-                name: fragment
-              }
+    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());
+        const themeMode = this.editor.getEditorState().read().themeMode;
+        if (themeMode) messenger.send("theme.mode", {
+            mode: themeMode
+        });
+        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 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);
             }
-          });
-          index++;
+            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 = {
-          ...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 => {
-      this.editor.updateEditor(state => {
-        if (!state.components) {
-          state.components = {};
-        }
-        state.components[component.name] = {
-          ...component,
-          image: component.image ?? defaultImage,
-          tags: component.tags ?? []
+        const bodyRect = previewBody.getBoundingClientRect();
+        return {
+            top: bodyRect.top + previewContainer.scrollTop,
+            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 iframe = document.getElementById("preview-iframe");
-    if (!iframe) {
-      return {
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0
-      };
+        return newBoxes;
     }
-    const iframeRect = iframe.getBoundingClientRect();
-    return {
-      top: iframeRect.top,
-      left: iframeRect.left,
-      width: iframeRect.width,
-      height: iframeRect.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":["mouseTracker","defaultImage","Commands","$createElement","PreviewEvents","editorEventsRegistered","listeners","constructor","editor","scrollTracker","onConnected","messenger","dispose","registerEditorEvents","subscribeToIframe","setTimeout","updateEditor","state","loadingPreview","selectedElement","destroy","forEach","unsubscribe","push","onDocumentStateChange","event","reason","getMessenger","send","diff","onScrollStart","showOverlays","onScroll","deltaX","deltaY","onScrollEnd","registerCommandHandler","PreviewPatchElement","payload","elementId","patch","getDocumentState","toJson","on","theme","executeCommand","SetTheme","fragments","document","read","Object","keys","elements","length","index","fragment","componentName","parentId","slot","bindings","inputs","name","boxes","viewport","iframeBox","getIframeBox","top","left","preview","mapCoordinatesToEditorSpace","component","components","image","tags","group","componentGroups","id","x","y","globalX","globalY","setPosition","iframe","getElementById","width","height","iframeRect","getBoundingClientRect","newBoxes","key","box"],"sources":["PreviewEvents.ts"],"sourcesContent":["import type { Editor } from \"~/editorSdk/Editor\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport {\n    type BoxesData,\n    type ComponentManifest,\n    type EditorViewportInfo,\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\";\nimport { $createElement } from \"~/editorSdk/utils\";\nimport type { ScrollTracker } from \"./ScrollTracker\";\n\nexport class PreviewEvents {\n    private editor: Editor;\n    private editorEventsRegistered = false;\n    private messenger: Messenger | undefined;\n    private scrollTracker: ScrollTracker;\n    private listeners: Array<() => void> = [];\n\n    constructor(editor: Editor, scrollTracker: ScrollTracker) {\n        this.scrollTracker = scrollTracker;\n        this.editor = editor;\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            // Scroll start\n            this.scrollTracker.onScrollStart(() => {\n                this.editor.updateEditor(state => {\n                    state.showOverlays = false;\n                });\n            }),\n\n            // Scrolling\n            this.scrollTracker.onScroll(event => {\n                this.getMessenger().send(\"preview.scroll\", {\n                    deltaX: event.deltaX,\n                    deltaY: event.deltaY\n                });\n            }),\n\n            // Scroll end\n            this.scrollTracker.onScrollEnd(() => {\n                this.editor.updateEditor(state => {\n                    state.showOverlays = true;\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    }\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: string[] = 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                let index = 0;\n                fragments.forEach(fragment => {\n                    $createElement(this.editor, {\n                        componentName: \"Webiny/Fragment\",\n                        parentId: \"root\",\n                        slot: \"children\",\n                        index,\n                        bindings: {\n                            inputs: {\n                                name: fragment\n                            }\n                        }\n                    });\n                    index++;\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                    ...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            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 iframe = document.getElementById(\"preview-iframe\");\n        if (!iframe) {\n            return {\n                top: 0,\n                left: 0,\n                width: 0,\n                height: 0\n            };\n        }\n\n        const iframeRect = iframe.getBoundingClientRect();\n\n        return {\n            top: iframeRect.top,\n            left: iframeRect.left,\n            width: iframeRect.width,\n            height: iframeRect.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        // Re-apply the previewed light/dark mode, so a reloaded/reconnected iframe keeps it.\n        const themeMode = this.editor.getEditorState().read().themeMode;\n        if (themeMode) {\n            messenger.send(\"theme.mode\", { mode: themeMode });\n        }\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 bodyRect = previewBody.getBoundingClientRect();\n\n        return {\n            top: bodyRect.top + previewContainer.scrollTop,\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","themeMode","theme","fragments","document1","Object","fragment","index","boxes","viewport","iframeBox","component","c","e","console","defaultImage","group","id","x","y","globalX","globalY","mouseTracker","previewContainer","document","previewBody","bodyRect","newBoxes","key","box"],"mappings":"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"}

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

@@ -1 +1 @@
-export * from "./Preview";
+export * from "./Preview.js";

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

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

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function mergeRefs<T = any>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T>;

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.d.ts

@@ -1 +1 @@
-export declare const useElementComponentManifest: (elementId: string) => import("@webiny/website-builder-sdk").ComponentManifest | undefined;
+export declare const useElementComponentManifest: (elementId: string) => import("@webiny/website-builder-sdk/types").ComponentManifest;

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

@@ -1,11 +1,13 @@
-import { useMemo } from "react";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { $getComponentManifestByElementId } from "../../../../editorSdk/utils";
-export const useElementComponentManifest = elementId => {
-  const editor = useDocumentEditor();
-  return useMemo(() => {
-    return $getComponentManifestByElementId(editor, elementId ?? "");
-  }, [elementId]);
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+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":["useMemo","useDocumentEditor","$getComponentManifestByElementId","useElementComponentManifest","elementId","editor"],"sources":["useElementComponentManifest.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils\";\n\nexport const useElementComponentManifest = (elementId: string) => {\n    const editor = useDocumentEditor();\n\n    return useMemo(() => {\n        return $getComponentManifestByElementId(editor, elementId ?? \"\");\n    }, [elementId]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,gCAAgC;AAEzC,OAAO,MAAMC,2BAA2B,GAAIC,SAAiB,IAAK;EAC9D,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAElC,OAAOD,OAAO,CAAC,MAAM;IACjB,OAAOE,gCAAgC,CAACG,MAAM,EAAED,SAAS,IAAI,EAAE,CAAC;EACpE,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;AACnB,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

@@ -1,34 +1,47 @@
-import { useMemo } from "react";
-import { useTenancy } from "@webiny/app-tenancy";
-import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
-import { usePreviewDomain } from "./usePreviewDomain";
-export const useIframeUrl = () => {
-  const {
-    tenant
-  } = useTenancy();
-  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]);
+import { useEffect, useMemo, useState } from "react";
+import { useTenantContext } from "@webiny/app-admin";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
+import { usePreviewDomain } from "../usePreviewDomain.js";
+import { usePreviewUrlModifier } from "../../../../features/previewUrl/usePreviewUrlModifier.js";
+const useIframeUrl = ()=>{
+    const { tenant } = useTenantContext();
+    const { previewDomain } = usePreviewDomain();
+    const modifier = usePreviewUrlModifier();
+    const id = useSelectFromDocument((document)=>document.id);
+    const documentType = useSelectFromDocument((document)=>document.metadata.documentType);
+    const path = useSelectFromDocument((document)=>document.properties.path);
+    const baseUrl = useMemo(()=>{
+        if (!previewDomain) return null;
+        const url = new URL(`${previewDomain}${path}`);
+        addSearchParamsFromDocument(tenant, url, id, documentType);
+        return url.toString();
+    }, [
+        previewDomain,
+        id,
+        path,
+        documentType
+    ]);
+    const [url, setUrl] = useState(baseUrl);
+    useEffect(()=>{
+        if (!baseUrl) return void setUrl(null);
+        if (!modifier) return void setUrl(baseUrl);
+        const urlObj = new URL(baseUrl);
+        modifier.modify(urlObj).then(()=>setUrl(urlObj.toString()));
+    }, [
+        baseUrl,
+        modifier
+    ]);
+    return url;
 };
 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