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

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

@@ -0,0 +1,239 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import defaultImage from "@webiny/icons/extension.svg";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+import { AddressBar } from "./AddressBar";
+import { Iframe } from "./Iframe";
+import { HoverManager } from "./HoverManager";
+import { DropZoneManager } from "./DropZoneManager";
+import { DropZoneManagerProvider } from "./DropZoneManagerProvider";
+import { MouseStatus } from "./MouseStatus";
+import { Boxes } from "../../../hooks/Boxes";
+import { ScrollTracker } from "./ScrollTracker";
+import { KeyboardShortcuts } from "./KeyboardShortcuts";
+import { ViewportManager } from "../../../../sdk/ViewportManager";
+import { mouseTracker } from "../../../../sdk";
+import { Commands } from "../../..";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
+import { $createElement } from "../../../../editorSdk/utils";
+export const Preview = () => {
+  const editor = useDocumentEditor();
+  const loadingPreview = useSelectFromEditor(state => state.loadingPreview);
+  useEffect(() => {
+    // On first mount, show loading.
+    editor.updateEditor(state => {
+      state.loadingPreview = true;
+    });
+  }, []);
+  const getIframeBox = useCallback(() => {
+    const iframe = document.getElementById("preview-iframe");
+    if (!iframe) {
+      return {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    const iframeRect = iframe.getBoundingClientRect();
+    return {
+      top: iframeRect.top,
+      left: iframeRect.left,
+      width: iframeRect.width,
+      height: iframeRect.height
+    };
+  }, []);
+  const mapCoordinatesToEditorSpace = useCallback((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
+      };
+    }
+    return newBoxes;
+  }, [getIframeBox]);
+  const hoverManager = useMemo(() => {
+    return new HoverManager(mouseTracker, () => {
+      const editorState = editor.getEditorState().read();
+      return new Boxes(editorState.boxes.editor).filter(box => box.id !== "root");
+    });
+  }, [mouseTracker]);
+  const viewportManager = useMemo(() => {
+    return new ViewportManager();
+  }, []);
+  const scrollTracker = useMemo(() => {
+    return new ScrollTracker(window, e => {
+      const source = e.target;
+      if (!source) {
+        return false;
+      }
+      return source.dataset.role === "element-overlay";
+    });
+  }, []);
+  const dropzoneManager = useMemo(() => {
+    return new DropZoneManager(mouseTracker);
+  }, [mouseTracker]);
+
+  // Start various trackers
+  useEffect(() => {
+    mouseTracker.start();
+    scrollTracker.start();
+    dropzoneManager.start();
+    return () => {
+      dropzoneManager.stop();
+      mouseTracker.stop();
+      scrollTracker.destroy();
+      viewportManager.destroy();
+      hoverManager.destroy();
+    };
+  }, [dropzoneManager, scrollTracker, mouseTracker]);
+
+  // Update mouse position while dragging
+  useEffect(() => {
+    const setMousePositionFromDrag = e => {
+      mouseTracker.setPosition(e.clientX, e.clientY);
+    };
+    window.addEventListener("dragover", setMousePositionFromDrag);
+    const offHoverChange = hoverManager.onHoverChange(id => {
+      editor.updateEditor(state => {
+        state.highlightedElement = id;
+      });
+    });
+    return () => {
+      window.removeEventListener("dragover", setMousePositionFromDrag);
+      offHoverChange();
+    };
+  }, []);
+  const onConnected = useCallback(messenger => {
+    messenger.send("document.set", editor.getDocumentState().toJson());
+    editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {
+      messenger.send(`element.patch.${payload.elementId}`, payload.patch);
+    });
+    messenger.on("preview.viewport.change.start", () => {
+      editor.updateEditor(state => {
+        state.showOverlays = false;
+      });
+    });
+    messenger.on("preview.escape", () => {
+      editor.executeCommand(Commands.DeselectElement);
+    });
+    messenger.on("preview.undo", () => {
+      editor.undo();
+    });
+    messenger.on("preview.redo", () => {
+      editor.redo();
+    });
+    messenger.on("document.fragments", payload => {
+      const fragments = payload.fragments;
+      editor.updateEditor(state => {
+        state.fragments = fragments;
+      });
+      const document = 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(editor, {
+            componentName: "Webiny/Fragment",
+            parentId: "root",
+            slot: "children",
+            index,
+            bindings: {
+              inputs: {
+                name: fragment
+              }
+            }
+          });
+          index++;
+        });
+      }
+    });
+    messenger.on("preview.viewport", ({
+      boxes,
+      viewport
+    }) => {
+      const iframeBox = getIframeBox();
+      editor.updateEditor(state => {
+        state.viewport = {
+          ...viewport,
+          top: iframeBox.top,
+          left: iframeBox.left
+        };
+        state.boxes = {
+          preview: boxes,
+          editor: mapCoordinatesToEditorSpace(state.viewport, boxes)
+        };
+        state.showOverlays = true;
+      });
+    });
+    messenger.on("preview.component.register", component => {
+      editor.updateEditor(state => {
+        if (!state.components) {
+          state.components = {};
+        }
+        state.components[component.name] = {
+          ...component,
+          image: component.image ?? defaultImage
+        };
+      });
+    });
+    messenger.on("preview.componentGroup.register", group => {
+      editor.updateEditor(state => {
+        if (!state.componentGroups) {
+          state.componentGroups = {};
+        }
+        state.componentGroups[group.name] = group;
+      });
+    });
+    messenger.on("preview.element.click", ({
+      id
+    }) => {
+      editor.updateEditor(state => {
+        state.selectedElement = id;
+      });
+    });
+    messenger.on("preview.mouse.move", ({
+      x,
+      y
+    }) => {
+      const iframeBox = getIframeBox();
+      const globalX = x + iframeBox.left;
+      const globalY = y + iframeBox.top;
+      mouseTracker.setPosition(globalX, globalY);
+    });
+    const offDocumentStateChange = editor.onDocumentStateChange(event => {
+      if (event.reason === "update") {
+        messenger.send("document.patch", event.diff);
+      } else {
+        messenger.send("document.set", event.state);
+      }
+    });
+
+    // Scroll wheel
+    scrollTracker.onChange(event => {
+      messenger.send("preview.scroll", {
+        deltaX: event.deltaX,
+        deltaY: event.deltaY
+      });
+    });
+    setTimeout(() => {
+      editor.updateEditor(state => {
+        state.loadingPreview = false;
+      });
+    }, 100);
+    return () => {
+      offDocumentStateChange();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropZoneManagerProvider, {
+    dropzoneManager: dropzoneManager
+  }, /*#__PURE__*/React.createElement(AddressBar, null), /*#__PURE__*/React.createElement(Iframe, {
+    viewportManager: viewportManager,
+    onConnected: onConnected,
+    showLoading: loadingPreview
+  })), /*#__PURE__*/React.createElement(MouseStatus, null), /*#__PURE__*/React.createElement(KeyboardShortcuts, null));
+};
+
+//# sourceMappingURL=Preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","defaultImage","useDocumentEditor","AddressBar","Iframe","HoverManager","DropZoneManager","DropZoneManagerProvider","MouseStatus","Boxes","ScrollTracker","KeyboardShortcuts","ViewportManager","mouseTracker","Commands","useSelectFromEditor","$createElement","Preview","editor","loadingPreview","state","updateEditor","getIframeBox","iframe","document","getElementById","top","left","width","height","iframeRect","getBoundingClientRect","mapCoordinatesToEditorSpace","viewport","boxes","newBoxes","key","box","hoverManager","editorState","getEditorState","read","filter","id","viewportManager","scrollTracker","window","e","source","target","dataset","role","dropzoneManager","start","stop","destroy","setMousePositionFromDrag","setPosition","clientX","clientY","addEventListener","offHoverChange","onHoverChange","highlightedElement","removeEventListener","onConnected","messenger","send","getDocumentState","toJson","registerCommandHandler","PreviewPatchElement","payload","elementId","patch","on","showOverlays","executeCommand","DeselectElement","undo","redo","fragments","Object","keys","elements","length","index","forEach","fragment","componentName","parentId","slot","bindings","inputs","name","iframeBox","preview","component","components","image","group","componentGroups","selectedElement","x","y","globalX","globalY","offDocumentStateChange","onDocumentStateChange","event","reason","diff","onChange","deltaX","deltaY","setTimeout","createElement","Fragment","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport defaultImage from \"@webiny/icons/extension.svg\";\nimport { Messenger } from \"~/sdk/messenger\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { AddressBar } from \"./AddressBar\";\nimport { Iframe } from \"./Iframe\";\nimport type {\n    ComponentManifest,\n    EditorViewportInfo,\n    BoxesData,\n    PreviewViewportData,\n    SerializedComponentGroup\n} from \"~/sdk/types\";\nimport { HoverManager } from \"./HoverManager\";\nimport { DropZoneManager } from \"./DropZoneManager\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider\";\nimport { MouseStatus } from \"~/BaseEditor/defaultConfig/Content/Preview/MouseStatus\";\nimport { Boxes } from \"~/BaseEditor/hooks/Boxes\";\nimport { ScrollTracker } from \"~/BaseEditor/defaultConfig/Content/Preview/ScrollTracker\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts\";\nimport { ViewportManager } from \"~/sdk/ViewportManager\";\nimport { mouseTracker } from \"~/sdk\";\nimport { Commands } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { $createElement } from \"~/editorSdk/utils\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n    useEffect(() => {\n        // On first mount, show loading.\n        editor.updateEditor(state => {\n            state.loadingPreview = true;\n        });\n    }, []);\n\n    const getIframeBox = useCallback(() => {\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    const mapCoordinatesToEditorSpace = useCallback(\n        (viewport: EditorViewportInfo, boxes: PreviewViewportData[\"boxes\"]) => {\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        [getIframeBox]\n    );\n\n    const hoverManager = useMemo(() => {\n        return new HoverManager(mouseTracker, () => {\n            const editorState = editor.getEditorState().read();\n            return new Boxes(editorState.boxes.editor).filter(box => box.id !== \"root\");\n        });\n    }, [mouseTracker]);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const scrollTracker = useMemo(() => {\n        return new ScrollTracker(window, e => {\n            const source = e.target as HTMLDivElement | null;\n\n            if (!source) {\n                return false;\n            }\n\n            return source.dataset.role === \"element-overlay\";\n        });\n    }, []);\n\n    const dropzoneManager = useMemo(() => {\n        return new DropZoneManager(mouseTracker);\n    }, [mouseTracker]);\n\n    // Start various trackers\n    useEffect(() => {\n        mouseTracker.start();\n        scrollTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            scrollTracker.destroy();\n            viewportManager.destroy();\n            hoverManager.destroy();\n        };\n    }, [dropzoneManager, scrollTracker, mouseTracker]);\n\n    // Update mouse position while dragging\n    useEffect(() => {\n        const setMousePositionFromDrag = (e: DragEvent) => {\n            mouseTracker.setPosition(e.clientX, e.clientY);\n        };\n\n        window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n        const offHoverChange = hoverManager.onHoverChange(id => {\n            editor.updateEditor(state => {\n                state.highlightedElement = id;\n            });\n        });\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n            offHoverChange();\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        messenger.send(\"document.set\", editor.getDocumentState().toJson());\n\n        editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {\n            messenger.send(`element.patch.${payload.elementId}`, payload.patch);\n        });\n\n        messenger.on(\"preview.viewport.change.start\", () => {\n            editor.updateEditor(state => {\n                state.showOverlays = false;\n            });\n        });\n\n        messenger.on(\"preview.escape\", () => {\n            editor.executeCommand(Commands.DeselectElement);\n        });\n\n        messenger.on(\"preview.undo\", () => {\n            editor.undo();\n        });\n\n        messenger.on(\"preview.redo\", () => {\n            editor.redo();\n        });\n\n        messenger.on(\"document.fragments\", payload => {\n            const fragments: string[] = payload.fragments;\n            editor.updateEditor(state => {\n                state.fragments = fragments;\n            });\n\n            const document = 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(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 = getIframeBox();\n\n            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: mapCoordinatesToEditorSpace(state.viewport, boxes)\n                };\n                state.showOverlays = true;\n            });\n        });\n\n        messenger.on(\"preview.component.register\", (component: ComponentManifest) => {\n            editor.updateEditor(state => {\n                if (!state.components) {\n                    state.components = {};\n                }\n                state.components[component.name] = {\n                    ...component,\n                    image: component.image ?? defaultImage\n                };\n            });\n        });\n\n        messenger.on(\"preview.componentGroup.register\", (group: SerializedComponentGroup) => {\n            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            editor.updateEditor(state => {\n                state.selectedElement = id;\n            });\n        });\n\n        messenger.on(\"preview.mouse.move\", ({ x, y }) => {\n            const iframeBox = getIframeBox();\n            const globalX = x + iframeBox.left;\n            const globalY = y + iframeBox.top;\n\n            mouseTracker.setPosition(globalX, globalY);\n        });\n\n        const offDocumentStateChange = editor.onDocumentStateChange(event => {\n            if (event.reason === \"update\") {\n                messenger.send(\"document.patch\", event.diff);\n            } else {\n                messenger.send(\"document.set\", event.state);\n            }\n        });\n\n        // Scroll wheel\n        scrollTracker.onChange(event => {\n            messenger.send(\"preview.scroll\", {\n                deltaX: event.deltaX,\n                deltaY: event.deltaY\n            });\n        });\n\n        setTimeout(() => {\n            editor.updateEditor(state => {\n                state.loadingPreview = false;\n            });\n        }, 100);\n\n        return () => {\n            offDocumentStateChange();\n        };\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <AddressBar />\n                <Iframe\n                    viewportManager={viewportManager}\n                    onConnected={onConnected}\n                    showLoading={loadingPreview}\n                />\n            </DropZoneManagerProvider>\n            <MouseStatus />\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,17 @@
+type ScrollCallback = (event: WheelEvent) => void;
+type ScrollFilter = (event: WheelEvent) => boolean;
+export declare class ScrollTracker {
+    private window;
+    private filter;
+    private callbacks;
+    private scrollEvent;
+    private frameId;
+    private isTracking;
+    constructor(window: Window, filter?: ScrollFilter);
+    onChange(cb: ScrollCallback): () => void;
+    start(): void;
+    destroy(): void;
+    private onScroll;
+    private tick;
+}
+export {};

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

@@ -0,0 +1,50 @@
+export class ScrollTracker {
+  callbacks = new Set();
+  scrollEvent = null;
+  frameId = null;
+  isTracking = false;
+  constructor(window, filter = () => true) {
+    this.window = window;
+    this.filter = filter;
+  }
+  onChange(cb) {
+    this.callbacks.add(cb);
+    return () => {
+      this.callbacks.delete(cb);
+    };
+  }
+  start() {
+    if (this.isTracking) {
+      return;
+    }
+    this.window.addEventListener("wheel", this.onScroll, {
+      passive: true
+    });
+    this.isTracking = true;
+  }
+  destroy() {
+    this.isTracking = false;
+    this.window.removeEventListener("wheel", this.onScroll);
+    this.callbacks.clear();
+  }
+  onScroll = e => {
+    this.scrollEvent = e;
+    if (this.frameId === null) {
+      this.frameId = this.window.requestAnimationFrame(this.tick);
+    }
+  };
+  tick = () => {
+    this.frameId = null;
+    if (!this.scrollEvent) {
+      return;
+    }
+    if (this.filter(this.scrollEvent)) {
+      for (const cb of this.callbacks) {
+        cb(this.scrollEvent);
+      }
+    }
+    this.scrollEvent = null;
+  };
+}
+
+//# sourceMappingURL=ScrollTracker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ScrollTracker","callbacks","Set","scrollEvent","frameId","isTracking","constructor","window","filter","onChange","cb","add","delete","start","addEventListener","onScroll","passive","destroy","removeEventListener","clear","e","requestAnimationFrame","tick"],"sources":["ScrollTracker.ts"],"sourcesContent":["type ScrollCallback = (event: WheelEvent) => void;\ntype ScrollFilter = (event: WheelEvent) => boolean;\n\nexport class ScrollTracker {\n    private callbacks = new Set<ScrollCallback>();\n    private scrollEvent: WheelEvent | null = null;\n    private frameId: number | null = null;\n    private isTracking = false;\n\n    constructor(private window: Window, private filter: ScrollFilter = () => true) {}\n\n    onChange(cb: ScrollCallback) {\n        this.callbacks.add(cb);\n\n        return () => {\n            this.callbacks.delete(cb);\n        };\n    }\n\n    start() {\n        if (this.isTracking) {\n            return;\n        }\n\n        this.window.addEventListener(\"wheel\", this.onScroll, { passive: true });\n        this.isTracking = true;\n    }\n\n    destroy() {\n        this.isTracking = false;\n        this.window.removeEventListener(\"wheel\", this.onScroll);\n        this.callbacks.clear();\n    }\n\n    private onScroll = (e: Event) => {\n        this.scrollEvent = e as WheelEvent;\n        if (this.frameId === null) {\n            this.frameId = this.window.requestAnimationFrame(this.tick);\n        }\n    };\n\n    private tick = () => {\n        this.frameId = null;\n\n        if (!this.scrollEvent) {\n            return;\n        }\n\n        if (this.filter(this.scrollEvent)) {\n            for (const cb of this.callbacks) {\n                cb(this.scrollEvent);\n            }\n        }\n\n        this.scrollEvent = null;\n    };\n}\n"],"mappings":"AAGA,OAAO,MAAMA,aAAa,CAAC;EACfC,SAAS,GAAG,IAAIC,GAAG,CAAiB,CAAC;EACrCC,WAAW,GAAsB,IAAI;EACrCC,OAAO,GAAkB,IAAI;EAC7BC,UAAU,GAAG,KAAK;EAE1BC,WAAWA,CAASC,MAAc,EAAUC,MAAoB,GAAGA,CAAA,KAAM,IAAI,EAAE;IAAA,KAA3DD,MAAc,GAAdA,MAAc;IAAA,KAAUC,MAAoB,GAApBA,MAAoB;EAAgB;EAEhFC,QAAQA,CAACC,EAAkB,EAAE;IACzB,IAAI,CAACT,SAAS,CAACU,GAAG,CAACD,EAAE,CAAC;IAEtB,OAAO,MAAM;MACT,IAAI,CAACT,SAAS,CAACW,MAAM,CAACF,EAAE,CAAC;IAC7B,CAAC;EACL;EAEAG,KAAKA,CAAA,EAAG;IACJ,IAAI,IAAI,CAACR,UAAU,EAAE;MACjB;IACJ;IAEA,IAAI,CAACE,MAAM,CAACO,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,QAAQ,EAAE;MAAEC,OAAO,EAAE;IAAK,CAAC,CAAC;IACvE,IAAI,CAACX,UAAU,GAAG,IAAI;EAC1B;EAEAY,OAAOA,CAAA,EAAG;IACN,IAAI,CAACZ,UAAU,GAAG,KAAK;IACvB,IAAI,CAACE,MAAM,CAACW,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAACH,QAAQ,CAAC;IACvD,IAAI,CAACd,SAAS,CAACkB,KAAK,CAAC,CAAC;EAC1B;EAEQJ,QAAQ,GAAIK,CAAQ,IAAK;IAC7B,IAAI,CAACjB,WAAW,GAAGiB,CAAe;IAClC,IAAI,IAAI,CAAChB,OAAO,KAAK,IAAI,EAAE;MACvB,IAAI,CAACA,OAAO,GAAG,IAAI,CAACG,MAAM,CAACc,qBAAqB,CAAC,IAAI,CAACC,IAAI,CAAC;IAC/D;EACJ,CAAC;EAEOA,IAAI,GAAGA,CAAA,KAAM;IACjB,IAAI,CAAClB,OAAO,GAAG,IAAI;IAEnB,IAAI,CAAC,IAAI,CAACD,WAAW,EAAE;MACnB;IACJ;IAEA,IAAI,IAAI,CAACK,MAAM,CAAC,IAAI,CAACL,WAAW,CAAC,EAAE;MAC/B,KAAK,MAAMO,EAAE,IAAI,IAAI,CAACT,SAAS,EAAE;QAC7BS,EAAE,CAAC,IAAI,CAACP,WAAW,CAAC;MACxB;IACJ;IAEA,IAAI,CAACA,WAAW,GAAG,IAAI;EAC3B,CAAC;AACL","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Preview\";\n"],"mappings":"AAAA","ignoreList":[]}

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

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

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

@@ -0,0 +1,13 @@
+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;
+      }
+    }
+  };
+}
+
+//# sourceMappingURL=mergeRefs.js.map

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

@@ -0,0 +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":[]}

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

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

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

@@ -0,0 +1,11 @@
+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]);
+};
+
+//# sourceMappingURL=useElementComponentManifest.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,3 @@
+export declare const useIframeUrl: () => {
+    iframeUrl: string;
+};

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

@@ -0,0 +1,50 @@
+import { useEffect, useMemo } from "react";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { useGetWebsiteBuilderSettings } from "../../../../features";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+export const useIframeUrl = () => {
+  const editor = useDocumentEditor();
+  const {
+    getSettings
+  } = useGetWebsiteBuilderSettings();
+  const id = useSelectFromDocument(document => document.id);
+  const documentType = useSelectFromDocument(document => document.metadata.documentType);
+  const path = useSelectFromDocument(document => document.properties.path);
+  const lastPreviewUrl = useSelectFromDocument(document => document.metadata.lastPreviewUrl);
+  const iframeUrl = useMemo(() => {
+    const url = new URL(lastPreviewUrl);
+    addSearchParamsFromDocument(url, id, documentType);
+    return url.toString();
+  }, [lastPreviewUrl]);
+  useEffect(() => {
+    getSettings().then(settings => {
+      // In an odd case, when lastPreviewUrl is not set, ensure it is set.
+      if (!iframeUrl) {
+        const url = new URL(`${settings.previewDomain}${path}`);
+        addSearchParamsFromDocument(url, id, documentType);
+        editor.updateDocument(document => {
+          document.metadata.lastPreviewUrl = url.toString();
+        });
+        return;
+      }
+      const newUrl = new URL(`${settings.previewDomain}${path}`);
+      addSearchParamsFromDocument(newUrl, id, documentType);
+      editor.updateDocument(document => {
+        document.metadata.lastPreviewUrl = newUrl.toString();
+      });
+    });
+  }, [iframeUrl, path]);
+  return {
+    iframeUrl
+  };
+};
+function addSearchParamsFromDocument(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);
+}
+
+//# sourceMappingURL=useIframeUrl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useSelectFromDocument","useGetWebsiteBuilderSettings","useDocumentEditor","useIframeUrl","editor","getSettings","id","document","documentType","metadata","path","properties","lastPreviewUrl","iframeUrl","url","URL","addSearchParamsFromDocument","toString","then","settings","previewDomain","updateDocument","newUrl","searchParams","set","pathname","window","location","origin"],"sources":["useIframeUrl.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { useGetWebsiteBuilderSettings } from \"~/features\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\n\nexport const useIframeUrl = () => {\n    const editor = useDocumentEditor();\n    const { getSettings } = useGetWebsiteBuilderSettings();\n\n    const id = useSelectFromDocument(document => document.id);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n    const path = useSelectFromDocument(document => document.properties.path);\n    const lastPreviewUrl = useSelectFromDocument(document => document.metadata.lastPreviewUrl);\n\n    const iframeUrl = useMemo(() => {\n        const url = new URL(lastPreviewUrl);\n        addSearchParamsFromDocument(url, id, documentType);\n        return url.toString();\n    }, [lastPreviewUrl]);\n\n    useEffect(() => {\n        getSettings().then(settings => {\n            // In an odd case, when lastPreviewUrl is not set, ensure it is set.\n            if (!iframeUrl) {\n                const url = new URL(`${settings.previewDomain}${path}`);\n                addSearchParamsFromDocument(url, id, documentType);\n                editor.updateDocument(document => {\n                    document.metadata.lastPreviewUrl = url.toString();\n                });\n                return;\n            }\n\n            const newUrl = new URL(`${settings.previewDomain}${path}`);\n            addSearchParamsFromDocument(newUrl, id, documentType);\n            editor.updateDocument(document => {\n                document.metadata.lastPreviewUrl = newUrl.toString();\n            });\n        });\n    }, [iframeUrl, path]);\n\n    return { iframeUrl };\n};\n\nfunction addSearchParamsFromDocument(url: URL, id: string, documentType: string) {\n    const searchParams = url.searchParams;\n    searchParams.set(\"wb.editing\", \"true\");\n    searchParams.set(\"wb.type\", documentType);\n    searchParams.set(\"wb.id\", id);\n    searchParams.set(\"wb.path\", url.pathname);\n    searchParams.set(\"wb.referrer\", window.location.origin);\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAC1C,SAASC,qBAAqB;AAC9B,SAASC,4BAA4B;AACrC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAMC,MAAM,GAAGF,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEG;EAAY,CAAC,GAAGJ,4BAA4B,CAAC,CAAC;EAEtD,MAAMK,EAAE,GAAGN,qBAAqB,CAACO,QAAQ,IAAIA,QAAQ,CAACD,EAAE,CAAC;EACzD,MAAME,YAAY,GAAGR,qBAAqB,CAACO,QAAQ,IAAIA,QAAQ,CAACE,QAAQ,CAACD,YAAY,CAAC;EACtF,MAAME,IAAI,GAAGV,qBAAqB,CAACO,QAAQ,IAAIA,QAAQ,CAACI,UAAU,CAACD,IAAI,CAAC;EACxE,MAAME,cAAc,GAAGZ,qBAAqB,CAACO,QAAQ,IAAIA,QAAQ,CAACE,QAAQ,CAACG,cAAc,CAAC;EAE1F,MAAMC,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,MAAMe,GAAG,GAAG,IAAIC,GAAG,CAACH,cAAc,CAAC;IACnCI,2BAA2B,CAACF,GAAG,EAAER,EAAE,EAAEE,YAAY,CAAC;IAClD,OAAOM,GAAG,CAACG,QAAQ,CAAC,CAAC;EACzB,CAAC,EAAE,CAACL,cAAc,CAAC,CAAC;EAEpBd,SAAS,CAAC,MAAM;IACZO,WAAW,CAAC,CAAC,CAACa,IAAI,CAACC,QAAQ,IAAI;MAC3B;MACA,IAAI,CAACN,SAAS,EAAE;QACZ,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAAC,GAAGI,QAAQ,CAACC,aAAa,GAAGV,IAAI,EAAE,CAAC;QACvDM,2BAA2B,CAACF,GAAG,EAAER,EAAE,EAAEE,YAAY,CAAC;QAClDJ,MAAM,CAACiB,cAAc,CAACd,QAAQ,IAAI;UAC9BA,QAAQ,CAACE,QAAQ,CAACG,cAAc,GAAGE,GAAG,CAACG,QAAQ,CAAC,CAAC;QACrD,CAAC,CAAC;QACF;MACJ;MAEA,MAAMK,MAAM,GAAG,IAAIP,GAAG,CAAC,GAAGI,QAAQ,CAACC,aAAa,GAAGV,IAAI,EAAE,CAAC;MAC1DM,2BAA2B,CAACM,MAAM,EAAEhB,EAAE,EAAEE,YAAY,CAAC;MACrDJ,MAAM,CAACiB,cAAc,CAACd,QAAQ,IAAI;QAC9BA,QAAQ,CAACE,QAAQ,CAACG,cAAc,GAAGU,MAAM,CAACL,QAAQ,CAAC,CAAC;MACxD,CAAC,CAAC;IACN,CAAC,CAAC;EACN,CAAC,EAAE,CAACJ,SAAS,EAAEH,IAAI,CAAC,CAAC;EAErB,OAAO;IAAEG;EAAU,CAAC;AACxB,CAAC;AAED,SAASG,2BAA2BA,CAACF,GAAQ,EAAER,EAAU,EAAEE,YAAoB,EAAE;EAC7E,MAAMe,YAAY,GAAGT,GAAG,CAACS,YAAY;EACrCA,YAAY,CAACC,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;EACtCD,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEhB,YAAY,CAAC;EACzCe,YAAY,CAACC,GAAG,CAAC,OAAO,EAAElB,EAAE,CAAC;EAC7BiB,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEV,GAAG,CAACW,QAAQ,CAAC;EACzCF,YAAY,CAACC,GAAG,CAAC,aAAa,EAAEE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;AAC3D","ignoreList":[]}

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

@@ -0,0 +1 @@
+export declare function useIsDragging(): boolean;

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

@@ -0,0 +1,6 @@
+import { useDragLayer } from "react-dnd";
+export function useIsDragging() {
+  return useDragLayer(monitor => monitor.isDragging());
+}
+
+//# sourceMappingURL=useIsDragging.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useDragLayer","useIsDragging","monitor","isDragging"],"sources":["useIsDragging.ts"],"sourcesContent":["import { useDragLayer } from \"react-dnd\";\n\nexport function useIsDragging(): boolean {\n    return useDragLayer(monitor => monitor.isDragging());\n}\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,WAAW;AAExC,OAAO,SAASC,aAAaA,CAAA,EAAY;EACrC,OAAOD,YAAY,CAACE,OAAO,IAAIA,OAAO,CAACC,UAAU,CAAC,CAAC,CAAC;AACxD","ignoreList":[]}

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

@@ -0,0 +1,21 @@
+import { Box } from "./Box";
+import { DropZoneProximity } from "./DropZoneManager";
+export interface DropEvent {
+    item: {
+        id?: string;
+        componentName: string;
+    };
+    target: {
+        parentId: string;
+        slot: string;
+        index: number;
+    };
+}
+interface UseProximityDropzoneParams {
+    id: string;
+    box: Box;
+}
+export declare function useProximityDropzone({ id, box }: UseProximityDropzoneParams): {
+    proximity: DropZoneProximity | null;
+};
+export {};

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

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { useDropZoneManager } from "./DropZoneManagerProvider";
+export function useProximityDropzone({
+  id,
+  box
+}) {
+  const dropzoneManager = useDropZoneManager();
+  const [proximity, setProximity] = useState(null);
+  useEffect(() => {
+    dropzoneManager.register({
+      id,
+      box,
+      onProximityChange: setProximity
+    });
+    return () => {
+      dropzoneManager.unregister(id);
+    };
+  }, [id, box]);
+  return {
+    proximity
+  };
+}
+
+//# sourceMappingURL=useProximityDropzone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","useDropZoneManager","useProximityDropzone","id","box","dropzoneManager","proximity","setProximity","register","onProximityChange","unregister"],"sources":["useProximityDropzone.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDropZoneManager } from \"./DropZoneManagerProvider\";\nimport { Box } from \"./Box\";\nimport { DropZoneProximity } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManager\";\n\nexport interface DropEvent {\n    item: { id?: string; componentName: string };\n    target: { parentId: string; slot: string; index: number };\n}\n\ninterface UseProximityDropzoneParams {\n    id: string;\n    box: Box;\n}\n\nexport function useProximityDropzone({ id, box }: UseProximityDropzoneParams) {\n    const dropzoneManager = useDropZoneManager();\n    const [proximity, setProximity] = useState<DropZoneProximity | null>(null);\n\n    useEffect(() => {\n        dropzoneManager.register({\n            id,\n            box,\n            onProximityChange: setProximity\n        });\n\n        return () => {\n            dropzoneManager.unregister(id);\n        };\n    }, [id, box]);\n\n    return { proximity };\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,kBAAkB;AAc3B,OAAO,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC;AAAgC,CAAC,EAAE;EAC1E,MAAMC,eAAe,GAAGJ,kBAAkB,CAAC,CAAC;EAC5C,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAA2B,IAAI,CAAC;EAE1ED,SAAS,CAAC,MAAM;IACZM,eAAe,CAACG,QAAQ,CAAC;MACrBL,EAAE;MACFC,GAAG;MACHK,iBAAiB,EAAEF;IACvB,CAAC,CAAC;IAEF,OAAO,MAAM;MACTF,eAAe,CAACK,UAAU,CAACP,EAAE,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACA,EAAE,EAAEC,GAAG,CAAC,CAAC;EAEb,OAAO;IAAEE;EAAU,CAAC;AACxB","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+import { ViewportManager } from "../../../../sdk/ViewportManager";
+/**
+ * Calculate the real width of the preview container, taking into account the current display mode
+ * and actual container size. If the display mode width is larger than the available space, return the
+ * width of the available space.
+ */
+export declare const useResponsiveContainer: (viewportManager: ViewportManager) => string;

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

@@ -0,0 +1,26 @@
+import { useEffect, useMemo, useState } from "react";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+/**
+ * Calculate the real width of the preview container, taking into account the current display mode
+ * and actual container size. If the display mode width is larger than the available space, return the
+ * width of the available space.
+ */
+export const useResponsiveContainer = viewportManager => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  useEffect(() => {
+    const updateContainerWidth = () => {
+      const width = document.body.clientWidth - 600;
+      setContainerWidth(width);
+    };
+    updateContainerWidth();
+    return viewportManager.onViewportChangeEnd(updateContainerWidth);
+  }, []);
+  const {
+    breakpoint
+  } = useBreakpoint();
+  return useMemo(() => {
+    return Math.min(containerWidth, breakpoint.maxWidth) + "px";
+  }, [breakpoint.name, containerWidth]);
+};
+
+//# sourceMappingURL=useResponsiveContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","useBreakpoint","useResponsiveContainer","viewportManager","containerWidth","setContainerWidth","updateContainerWidth","width","document","body","clientWidth","onViewportChangeEnd","breakpoint","Math","min","maxWidth","name"],"sources":["useResponsiveContainer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { ViewportManager } from \"~/sdk/ViewportManager\";\n\n/**\n * Calculate the real width of the preview container, taking into account the current display mode\n * and actual container size. If the display mode width is larger than the available space, return the\n * width of the available space.\n */\nexport const useResponsiveContainer = (viewportManager: ViewportManager) => {\n    const [containerWidth, setContainerWidth] = useState(0);\n\n    useEffect(() => {\n        const updateContainerWidth = () => {\n            const width = document.body.clientWidth - 600;\n            setContainerWidth(width);\n        };\n\n        updateContainerWidth();\n\n        return viewportManager.onViewportChangeEnd(updateContainerWidth);\n    }, []);\n\n    const { breakpoint } = useBreakpoint();\n\n    return useMemo(() => {\n        return Math.min(containerWidth, breakpoint.maxWidth) + \"px\";\n    }, [breakpoint.name, containerWidth]);\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,aAAa;AAGtB;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAIC,eAAgC,IAAK;EACxE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC;EAEvDF,SAAS,CAAC,MAAM;IACZ,MAAMQ,oBAAoB,GAAGA,CAAA,KAAM;MAC/B,MAAMC,KAAK,GAAGC,QAAQ,CAACC,IAAI,CAACC,WAAW,GAAG,GAAG;MAC7CL,iBAAiB,CAACE,KAAK,CAAC;IAC5B,CAAC;IAEDD,oBAAoB,CAAC,CAAC;IAEtB,OAAOH,eAAe,CAACQ,mBAAmB,CAACL,oBAAoB,CAAC;EACpE,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEM;EAAW,CAAC,GAAGX,aAAa,CAAC,CAAC;EAEtC,OAAOF,OAAO,CAAC,MAAM;IACjB,OAAOc,IAAI,CAACC,GAAG,CAACV,cAAc,EAAEQ,UAAU,CAACG,QAAQ,CAAC,GAAG,IAAI;EAC/D,CAAC,EAAE,CAACH,UAAU,CAACI,IAAI,EAAEZ,cAAc,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/DefaultEditorConfig.d.ts

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