@webiny/app-website-builder 0.0.0-unstable.06b2ede40f

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

@@ -0,0 +1,152 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import React, { Fragment, useCallback, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import { useDrop } from "react-dnd";
+import { usePreviewData } from "../../../../hooks/usePreviewData";
+import { useSelectFromEditor } from "../../../../hooks/useSelectFromEditor";
+import { ElementOverlay } from "./ElementOverlay";
+import { useIsDragging } from "../useIsDragging";
+import { useDocumentEditor } from "../../../../../DocumentEditor";
+import { ElementDropLines } from "./ElementDropLines";
+import { DropBox } from "./DropBox";
+import { useDropZoneManager } from "../DropZoneManagerProvider";
+import { mergeRefs } from "../mergeRefs";
+import { Commands } from "../../../..";
+import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
+import { findMatchingAstNode } from "@webiny/website-builder-sdk";
+const OverlayContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1avjb810"
+} : {
+  target: "e1avjb810",
+  label: "OverlayContainer"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1bhccdb",
+  styles: "overflow:hidden;position:absolute;z-index:20"
+} : {
+  name: "1bhccdb",
+  styles: "overflow:hidden;position:absolute;z-index:20",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRPdmVybGF5cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0J5QiIsImZpbGUiOiJFbGVtZW50T3ZlcmxheXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZyYWdtZW50LCB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCB7IHVzZURyb3AgfSBmcm9tIFwicmVhY3QtZG5kXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdXNlUHJldmlld0RhdGEgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVByZXZpZXdEYXRhXCI7XG5pbXBvcnQgeyB1c2VTZWxlY3RGcm9tRWRpdG9yIH0gZnJvbSBcIn4vQmFzZUVkaXRvci9ob29rcy91c2VTZWxlY3RGcm9tRWRpdG9yXCI7XG5pbXBvcnQgeyBFbGVtZW50T3ZlcmxheSB9IGZyb20gXCIuL0VsZW1lbnRPdmVybGF5XCI7XG5pbXBvcnQgdHlwZSB7IFByZXZpZXdWaWV3cG9ydEluZm8sIFNsb3RJbnB1dCB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcbmltcG9ydCB7IHVzZUlzRHJhZ2dpbmcgfSBmcm9tIFwiLi4vdXNlSXNEcmFnZ2luZ1wiO1xuaW1wb3J0IHR5cGUgeyBCb3ggfSBmcm9tIFwiLi4vQm94XCI7XG5pbXBvcnQgdHlwZSB7IERyb3BFdmVudCB9IGZyb20gXCIuLi91c2VQcm94aW1pdHlEcm9wem9uZVwiO1xuaW1wb3J0IHsgdXNlRG9jdW1lbnRFZGl0b3IgfSBmcm9tIFwifi9Eb2N1bWVudEVkaXRvclwiO1xuaW1wb3J0IHsgRWxlbWVudERyb3BMaW5lcyB9IGZyb20gXCIuL0VsZW1lbnREcm9wTGluZXNcIjtcbmltcG9ydCB7IERyb3BCb3ggfSBmcm9tIFwiLi9Ecm9wQm94XCI7XG5pbXBvcnQgeyB1c2VEcm9wWm9uZU1hbmFnZXIgfSBmcm9tIFwiLi4vRHJvcFpvbmVNYW5hZ2VyUHJvdmlkZXJcIjtcbmltcG9ydCB7IG1lcmdlUmVmcyB9IGZyb20gXCIuLi9tZXJnZVJlZnNcIjtcbmltcG9ydCB7IENvbW1hbmRzIH0gZnJvbSBcIn4vQmFzZUVkaXRvclwiO1xuaW1wb3J0IHR5cGUgeyBFZGl0b3IgfSBmcm9tIFwifi9lZGl0b3JTZGsvRWRpdG9yXCI7XG5pbXBvcnQgeyBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyIH0gZnJvbSBcIkB3ZWJpbnkvd2Vic2l0ZS1idWlsZGVyLXNka1wiO1xuaW1wb3J0IHsgZmluZE1hdGNoaW5nQXN0Tm9kZSB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcblxuY29uc3QgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICB6SW5kZXg6IDIwXG59KTtcblxuY29uc3QgZmlsdGVyVmlzaWJsZUJveGVzID0gKHZpZXdwb3J0OiBQcmV2aWV3Vmlld3BvcnRJbmZvKSA9PiB7XG4gICAgcmV0dXJuIChib3g6IEJveCkgPT4ge1xuICAgICAgICBjb25zdCB2ZXJ0aWNhbGx5VmlzaWJsZSA9IGJveC50b3AgKyBib3guaGVpZ2h0ID4gMCAmJiBib3gudG9wIDwgdmlld3BvcnQuaGVpZ2h0O1xuXG4gICAgICAgIGNvbnN0IGhvcml6b250YWxseVZpc2libGUgPSBib3gubGVmdCArIGJveC53aWR0aCA+IDAgJiYgYm94LmxlZnQgPCB2aWV3cG9ydC53aWR0aDtcbiAgICAgICAgcmV0dXJuIHZlcnRpY2FsbHlWaXNpYmxlICYmIGhvcml6b250YWxseVZpc2libGU7XG4gICAgfTtcbn07XG5cbmNvbnN0IGZpbHRlckVsZW1lbnRzID0gKGJveDogQm94KSA9PiB7XG4gICAgcmV0dXJuIGJveC50eXBlID09PSBcImVsZW1lbnRcIiAmJiBib3guaWQgIT09IFwicm9vdFwiO1xufTtcblxuY29uc3QgZmlsdGVyU2xvdHMgPSAoYm94OiBCb3gpID0+IHtcbiAgICByZXR1cm4gYm94LnR5cGUgPT09IFwiZWxlbWVudC1zbG90XCI7XG59O1xuXG5leHBvcnQgY29uc3QgRWxlbWVudE92ZXJsYXlzID0gb2JzZXJ2ZXIoKCkgPT4ge1xuICAgIGNvbnN0IGRyb3B6b25lTWFuYWdlciA9IHVzZURyb3Bab25lTWFuYWdlcigpO1xuICAgIGNvbnN0IGVkaXRvciA9IHVzZURvY3VtZW50RWRpdG9yKCk7XG4gICAgY29uc3QgeyBib3hlcywgdmlld3BvcnQgfSA9IHVzZVByZXZpZXdEYXRhKCk7XG4gICAgY29uc3QgaXNEcmFnZ2luZyA9IHVzZUlzRHJhZ2dpbmcoKTtcbiAgICBjb25zdCB7IHNob3dPdmVybGF5cywgc2VsZWN0ZWRFbGVtZW50LCBoaWdobGlnaHRlZEVsZW1lbnQgfSA9IHVzZVNlbGVjdEZyb21FZGl0b3Ioc3RhdGUgPT4ge1xuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgc2hvd092ZXJsYXlzOiBzdGF0ZS5zaG93T3ZlcmxheXMsXG4gICAgICAgICAgICBzZWxlY3RlZEVsZW1lbnQ6IHN0YXRlLnNlbGVjdGVkRWxlbWVudCxcbiAgICAgICAgICAgIGhpZ2hsaWdodGVkRWxlbWVudDogc3RhdGUuaGlnaGxpZ2h0ZWRFbGVtZW50XG4gICAgICAgIH07XG4gICAgfSk7XG5cbiAgICBjb25zdCBkcm9wUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgICBjb25zdCBbLCBkcm9wXSA9IHVzZURyb3AoKCkgPT4gKHtcbiAgICAgICAgYWNjZXB0OiBcIkVMRU1FTlRcIixcbiAgICAgICAgZHJvcDogKGl0ZW06IGFueSkgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZHJvcHpvbmVNYW5hZ2VyLmdldExhc3RNYXRjaGVkUG9zaXRpb24oKTtcbiAgICAgICAgICAgIGlmICh0YXJnZXQpIHtcbiAgICAgICAgICAgICAgICBvbkRyb3AoeyBpdGVtLCB0YXJnZXQgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9KSk7XG5cbiAgICBkcm9wKGRyb3BSZWYpO1xuXG4gICAgY29uc3QgY2FuRHJvcENvbXBvbmVudEludG9UYXJnZXQgPSAoXG4gICAgICAgIGVkaXRvcjogRWRpdG9yLFxuICAgICAgICBjb21wb25lbnROYW1lOiBzdHJpbmcsXG4gICAgICAgIHRhcmdldDogRHJvcEV2ZW50W1widGFyZ2V0XCJdXG4gICAgKSA9PiB7XG4gICAgICAgIC8vIERldGVybWluZSBjb21wb25lbnQgbWFuaWZlc3QgZnJvbSBkcm9wIHRhcmdldC5cbiAgICAgICAgY29uc3QgZG9jdW1lbnQgPSBlZGl0b3IuZ2V0RG9jdW1lbnRTdGF0ZSgpLnJlYWQoKTtcbiAgICAgICAgY29uc3QgeyBjb21wb25lbnQgfSA9IGRvY3VtZW50LmVsZW1lbnRzW3RhcmdldC5wYXJlbnRJZF07XG4gICAgICAgIGNvbnN0IGNvbXBvbmVudE1hbmlmZXN0ID0gZWRpdG9yLmdldEVkaXRvclN0YXRlKCkucmVhZCgpLmNvbXBvbmVudHNbY29tcG9uZW50Lm5hbWVdO1xuXG4gICAgICAgIC8vIEZpbmQgdGFyZ2V0IGlucHV0IHVzaW5nIEFTVC5cbiAgICAgICAgY29uc3QgaW5wdXRzQXN0ID0gQ29tcG9uZW50TWFuaWZlc3RUb0FzdENvbnZlcnRlci5jb252ZXJ0KGNvbXBvbmVudE1hbmlmZXN0LmlucHV0cyA/PyBbXSk7XG4gICAgICAgIGNvbnN0IHRhcmdldElucHV0Tm9kZSA9IGZpbmRNYXRjaGluZ0FzdE5vZGUodGFyZ2V0LnNsb3QsIGlucHV0c0FzdCk7XG5cbiAgICAgICAgbGV0IGNhbkFjY2VwdENvbXBvbmVudCA9IHRhcmdldElucHV0Tm9kZSAhPT0gdW5kZWZpbmVkO1xuICAgICAgICBpZiAodGFyZ2V0SW5wdXROb2RlKSB7XG4gICAgICAgICAgICBjb25zdCBzbG90SW5wdXQgPSB0YXJnZXRJbnB1dE5vZGUuaW5wdXQgYXMgU2xvdElucHV0O1xuICAgICAgICAgICAgY29uc3Qgd2hpdGVsaXN0ZWRDb21wb25lbnRzID0gc2xvdElucHV0LmNvbXBvbmVudHM7XG4gICAgICAgICAgICBpZiAod2hpdGVsaXN0ZWRDb21wb25lbnRzICYmIHdoaXRlbGlzdGVkQ29tcG9uZW50cy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICAgICAgY2FuQWNjZXB0Q29tcG9uZW50ID0gd2hpdGVsaXN0ZWRDb21wb25lbnRzLmluY2x1ZGVzKGNvbXBvbmVudE5hbWUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHJldHVybiBjYW5BY2NlcHRDb21wb25lbnQ7XG4gICAgfTtcblxuICAgIGNvbnN0IG9uRHJvcCA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoeyBpdGVtLCB0YXJnZXQgfTogRHJvcEV2ZW50KSA9PiB7XG4gICAgICAgICAgICBpZiAoIWNhbkRyb3BDb21wb25lbnRJbnRvVGFyZ2V0KGVkaXRvciwgaXRlbS5jb21wb25lbnROYW1lLCB0YXJnZXQpKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAoaXRlbS5pZCkge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIG1vdmluZyBhbiBleGlzdGluZyBlbGVtZW50LlxuICAgICAgICAgICAgICAgIGVkaXRvci5leGVjdXRlQ29tbWFuZChDb21tYW5kcy5Nb3ZlRWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgICBlbGVtZW50SWQ6IGl0ZW0uaWQsXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudElkOiB0YXJnZXQucGFyZW50SWQsXG4gICAgICAgICAgICAgICAgICAgIHNsb3Q6IHRhcmdldC5zbG90LFxuICAgICAgICAgICAgICAgICAgICBpbmRleDogdGFyZ2V0LmluZGV4XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIGNyZWF0aW5nIGEgbmV3IGVsZW1lbnQuXG4gICAgICAgICAgICAgICAgZWRpdG9yLmV4ZWN1dGVDb21tYW5kKENvbW1hbmRzLkNyZWF0ZUVsZW1lbnQsIHtcbiAgICAgICAgICAgICAgICAgICAgY29tcG9uZW50TmFtZTogaXRlbS5jb21wb25lbnROYW1lLFxuICAgICAgICAgICAgICAgICAgICBwYXJlbnRJZDogdGFyZ2V0LnBhcmVudElkLFxuICAgICAgICAgICAgICAgICAgICBzbG90OiB0YXJnZXQuc2xvdCxcbiAgICAgICAgICAgICAgICAgICAgaW5kZXg6IHRhcmdldC5pbmRleFxuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbZWRpdG9yXVxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8T3ZlcmxheUNvbnRhaW5lclxuICAgICAgICAgICAgcmVmPXttZXJnZVJlZnMoZHJvcFJlZil9XG4gICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgIHdpZHRoOiBgJHt2aWV3cG9ydC53aWR0aH1weGAsXG4gICAgICAgICAgICAgICAgaGVpZ2h0OiBgJHt2aWV3cG9ydC5oZWlnaHR9cHhgLFxuICAgICAgICAgICAgICAgIGRpc3BsYXk6IHNob3dPdmVybGF5cyA/IFwiYmxvY2tcIiA6IFwibm9uZVwiLFxuICAgICAgICAgICAgICAgIHBvaW50ZXJFdmVudHM6IGlzRHJhZ2dpbmcgPyBcImF1dG9cIiA6IFwibm9uZVwiXG4gICAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAgICB7Ym94ZXMucHJldmlld1xuICAgICAgICAgICAgICAgIC5maWx0ZXIoZmlsdGVyRWxlbWVudHMpXG4gICAgICAgICAgICAgICAgLmZpbHRlcihmaWx0ZXJWaXNpYmxlQm94ZXModmlld3BvcnQpKVxuICAgICAgICAgICAgICAgIC5tYXAoYm94ID0+IChcbiAgICAgICAgICAgICAgICAgICAgPEZyYWdtZW50IGtleT17Ym94LmlkfT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxFbGVtZW50T3ZlcmxheVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZD17Ym94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzU2VsZWN0ZWQ9e3NlbGVjdGVkRWxlbWVudCA9PT0gYm94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzSGlnaGxpZ2h0ZWQ9e2hpZ2hsaWdodGVkRWxlbWVudCA9PT0gYm94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHByZXZpZXdCb3g9e2JveH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBlZGl0b3JCb3g9e2JveGVzLmVkaXRvci5nZXQoYm94LmlkKSF9XG4gICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEVsZW1lbnREcm9wTGluZXNcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzRmlyc3Q9e2JveC5wYXJlbnRJbmRleCA9PT0gMH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzSGlnaGxpZ2h0ZWQ9e2hpZ2hsaWdodGVkRWxlbWVudCA9PT0gYm94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWRpdG9yQm94PXtib3hlcy5lZGl0b3IuZ2V0KGJveC5pZCkhfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcHJldmlld0JveD17Ym94fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9FbGVtZW50T3ZlcmxheT5cbiAgICAgICAgICAgICAgICAgICAgPC9GcmFnbWVudD5cbiAgICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgIHtib3hlcy5wcmV2aWV3XG4gICAgICAgICAgICAgICAgLmZpbHRlcihmaWx0ZXJTbG90cylcbiAgICAgICAgICAgICAgICAuZmlsdGVyKGZpbHRlclZpc2libGVCb3hlcyh2aWV3cG9ydCkpXG4gICAgICAgICAgICAgICAgLm1hcChib3ggPT4gKFxuICAgICAgICAgICAgICAgICAgICA8RHJvcEJveCBrZXk9e2JveC5pZH0gYm94PXtib3h9IG9uRHJvcD17b25Ecm9wfSAvPlxuICAgICAgICAgICAgICAgICkpfVxuICAgICAgICA8L092ZXJsYXlDb250YWluZXI+XG4gICAgKTtcbn0pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const filterVisibleBoxes = viewport => {
+  return box => {
+    const verticallyVisible = box.top + box.height > 0 && box.top < viewport.height;
+    const horizontallyVisible = box.left + box.width > 0 && box.left < viewport.width;
+    return verticallyVisible && horizontallyVisible;
+  };
+};
+const filterElements = box => {
+  return box.type === "element" && box.id !== "root";
+};
+const filterSlots = box => {
+  return box.type === "element-slot";
+};
+export const ElementOverlays = observer(() => {
+  const dropzoneManager = useDropZoneManager();
+  const editor = useDocumentEditor();
+  const {
+    boxes,
+    viewport
+  } = usePreviewData();
+  const isDragging = useIsDragging();
+  const {
+    showOverlays,
+    selectedElement,
+    highlightedElement
+  } = useSelectFromEditor(state => {
+    return {
+      showOverlays: state.showOverlays,
+      selectedElement: state.selectedElement,
+      highlightedElement: state.highlightedElement
+    };
+  });
+  const dropRef = useRef(null);
+  const [, drop] = useDrop(() => ({
+    accept: "ELEMENT",
+    drop: item => {
+      const target = dropzoneManager.getLastMatchedPosition();
+      if (target) {
+        onDrop({
+          item,
+          target
+        });
+      }
+    }
+  }));
+  drop(dropRef);
+  const canDropComponentIntoTarget = (editor, componentName, target) => {
+    // Determine component manifest from drop target.
+    const document = editor.getDocumentState().read();
+    const {
+      component
+    } = document.elements[target.parentId];
+    const componentManifest = editor.getEditorState().read().components[component.name];
+
+    // Find target input using AST.
+    const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
+    const targetInputNode = findMatchingAstNode(target.slot, inputsAst);
+    let canAcceptComponent = targetInputNode !== undefined;
+    if (targetInputNode) {
+      const slotInput = targetInputNode.input;
+      const whitelistedComponents = slotInput.components;
+      if (whitelistedComponents && whitelistedComponents.length > 0) {
+        canAcceptComponent = whitelistedComponents.includes(componentName);
+      }
+    }
+    return canAcceptComponent;
+  };
+  const onDrop = useCallback(({
+    item,
+    target
+  }) => {
+    if (!canDropComponentIntoTarget(editor, item.componentName, target)) {
+      return;
+    }
+    if (item.id) {
+      // We're moving an existing element.
+      editor.executeCommand(Commands.MoveElement, {
+        elementId: item.id,
+        parentId: target.parentId,
+        slot: target.slot,
+        index: target.index
+      });
+    } else {
+      // We're creating a new element.
+      editor.executeCommand(Commands.CreateElement, {
+        componentName: item.componentName,
+        parentId: target.parentId,
+        slot: target.slot,
+        index: target.index
+      });
+    }
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(OverlayContainer, {
+    ref: mergeRefs(dropRef),
+    style: {
+      width: `${viewport.width}px`,
+      height: `${viewport.height}px`,
+      display: showOverlays ? "block" : "none",
+      pointerEvents: isDragging ? "auto" : "none"
+    }
+  }, boxes.preview.filter(filterElements).filter(filterVisibleBoxes(viewport)).map(box => /*#__PURE__*/React.createElement(Fragment, {
+    key: box.id
+  }, /*#__PURE__*/React.createElement(ElementOverlay, {
+    elementId: box.id,
+    isSelected: selectedElement === box.id,
+    isHighlighted: highlightedElement === box.id,
+    previewBox: box,
+    editorBox: boxes.editor.get(box.id)
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementDropLines, {
+    isFirst: box.parentIndex === 0,
+    isHighlighted: highlightedElement === box.id,
+    editorBox: boxes.editor.get(box.id),
+    previewBox: box
+  }))))), boxes.preview.filter(filterSlots).filter(filterVisibleBoxes(viewport)).map(box => /*#__PURE__*/React.createElement(DropBox, {
+    key: box.id,
+    box: box,
+    onDrop: onDrop
+  })));
+});
+
+//# sourceMappingURL=ElementOverlays.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","useCallback","useRef","observer","useDrop","usePreviewData","useSelectFromEditor","ElementOverlay","useIsDragging","useDocumentEditor","ElementDropLines","DropBox","useDropZoneManager","mergeRefs","Commands","ComponentManifestToAstConverter","findMatchingAstNode","OverlayContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","filterVisibleBoxes","viewport","box","verticallyVisible","top","height","horizontallyVisible","left","width","filterElements","type","id","filterSlots","ElementOverlays","dropzoneManager","editor","boxes","isDragging","showOverlays","selectedElement","highlightedElement","state","dropRef","drop","accept","item","getLastMatchedPosition","onDrop","canDropComponentIntoTarget","componentName","document","getDocumentState","read","component","elements","parentId","componentManifest","getEditorState","components","inputsAst","convert","inputs","targetInputNode","slot","canAcceptComponent","undefined","slotInput","input","whitelistedComponents","length","includes","executeCommand","MoveElement","elementId","index","CreateElement","createElement","ref","style","display","pointerEvents","preview","filter","key","isSelected","isHighlighted","previewBox","editorBox","get","isFirst","parentIndex"],"sources":["ElementOverlays.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDrop } from \"react-dnd\";\nimport styled from \"@emotion/styled\";\n\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { ElementOverlay } from \"./ElementOverlay\";\nimport type { PreviewViewportInfo, SlotInput } from \"@webiny/website-builder-sdk\";\nimport { useIsDragging } from \"../useIsDragging\";\nimport type { Box } from \"../Box\";\nimport type { DropEvent } from \"../useProximityDropzone\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { ElementDropLines } from \"./ElementDropLines\";\nimport { DropBox } from \"./DropBox\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider\";\nimport { mergeRefs } from \"../mergeRefs\";\nimport { Commands } from \"~/BaseEditor\";\nimport type { Editor } from \"~/editorSdk/Editor\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\n\nconst OverlayContainer = styled(\"div\")({\n    overflow: \"hidden\",\n    position: \"absolute\",\n    zIndex: 20\n});\n\nconst filterVisibleBoxes = (viewport: PreviewViewportInfo) => {\n    return (box: Box) => {\n        const verticallyVisible = box.top + box.height > 0 && box.top < viewport.height;\n\n        const horizontallyVisible = box.left + box.width > 0 && box.left < viewport.width;\n        return verticallyVisible && horizontallyVisible;\n    };\n};\n\nconst filterElements = (box: Box) => {\n    return box.type === \"element\" && box.id !== \"root\";\n};\n\nconst filterSlots = (box: Box) => {\n    return box.type === \"element-slot\";\n};\n\nexport const ElementOverlays = observer(() => {\n    const dropzoneManager = useDropZoneManager();\n    const editor = useDocumentEditor();\n    const { boxes, viewport } = usePreviewData();\n    const isDragging = useIsDragging();\n    const { showOverlays, selectedElement, highlightedElement } = useSelectFromEditor(state => {\n        return {\n            showOverlays: state.showOverlays,\n            selectedElement: state.selectedElement,\n            highlightedElement: state.highlightedElement\n        };\n    });\n\n    const dropRef = useRef<HTMLElement | null>(null);\n\n    const [, drop] = useDrop(() => ({\n        accept: \"ELEMENT\",\n        drop: (item: any) => {\n            const target = dropzoneManager.getLastMatchedPosition();\n            if (target) {\n                onDrop({ item, target });\n            }\n        }\n    }));\n\n    drop(dropRef);\n\n    const canDropComponentIntoTarget = (\n        editor: Editor,\n        componentName: string,\n        target: DropEvent[\"target\"]\n    ) => {\n        // Determine component manifest from drop target.\n        const document = editor.getDocumentState().read();\n        const { component } = document.elements[target.parentId];\n        const componentManifest = editor.getEditorState().read().components[component.name];\n\n        // Find target input using AST.\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        const targetInputNode = findMatchingAstNode(target.slot, inputsAst);\n\n        let canAcceptComponent = targetInputNode !== undefined;\n        if (targetInputNode) {\n            const slotInput = targetInputNode.input as SlotInput;\n            const whitelistedComponents = slotInput.components;\n            if (whitelistedComponents && whitelistedComponents.length > 0) {\n                canAcceptComponent = whitelistedComponents.includes(componentName);\n            }\n        }\n        return canAcceptComponent;\n    };\n\n    const onDrop = useCallback(\n        ({ item, target }: DropEvent) => {\n            if (!canDropComponentIntoTarget(editor, item.componentName, target)) {\n                return;\n            }\n\n            if (item.id) {\n                // We're moving an existing element.\n                editor.executeCommand(Commands.MoveElement, {\n                    elementId: item.id,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            } else {\n                // We're creating a new element.\n                editor.executeCommand(Commands.CreateElement, {\n                    componentName: item.componentName,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            }\n        },\n        [editor]\n    );\n\n    return (\n        <OverlayContainer\n            ref={mergeRefs(dropRef)}\n            style={{\n                width: `${viewport.width}px`,\n                height: `${viewport.height}px`,\n                display: showOverlays ? \"block\" : \"none\",\n                pointerEvents: isDragging ? \"auto\" : \"none\"\n            }}\n        >\n            {boxes.preview\n                .filter(filterElements)\n                .filter(filterVisibleBoxes(viewport))\n                .map(box => (\n                    <Fragment key={box.id}>\n                        <ElementOverlay\n                            elementId={box.id}\n                            isSelected={selectedElement === box.id}\n                            isHighlighted={highlightedElement === box.id}\n                            previewBox={box}\n                            editorBox={boxes.editor.get(box.id)!}\n                        >\n                            <>\n                                <ElementDropLines\n                                    isFirst={box.parentIndex === 0}\n                                    isHighlighted={highlightedElement === box.id}\n                                    editorBox={boxes.editor.get(box.id)!}\n                                    previewBox={box}\n                                />\n                            </>\n                        </ElementOverlay>\n                    </Fragment>\n                ))}\n            {boxes.preview\n                .filter(filterSlots)\n                .filter(filterVisibleBoxes(viewport))\n                .map(box => (\n                    <DropBox key={box.id} box={box} onDrop={onDrop} />\n                ))}\n        </OverlayContainer>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,114 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+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 { Boxes } from "../../../hooks/Boxes";
+import { ScrollTracker } from "./ScrollTracker";
+import { KeyboardShortcuts } from "./KeyboardShortcuts";
+import { ViewportManager } from "@webiny/website-builder-sdk";
+import { mouseTracker } from "@webiny/website-builder-sdk";
+import { Commands } from "../../..";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
+import { AwaitIframeUrl } from "./AwaitIframeUrl";
+import { PreviewEvents } from "./PreviewEvents";
+import { ApplyTheme } from "./ApplyTheme";
+export const Preview = () => {
+  const editor = useDocumentEditor();
+  const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());
+  const loadingPreview = useSelectFromEditor(state => state.loadingPreview);
+  const scrollTracker = useMemo(() => {
+    return new ScrollTracker(window, e => {
+      const source = e.target;
+      if (!source) {
+        return false;
+      }
+      return source.dataset.role === "element-overlay";
+    });
+  }, []);
+  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 previewEvents = useMemo(() => {
+    return new PreviewEvents(editor, scrollTracker);
+  }, []);
+  const dropzoneManager = useMemo(() => {
+    return new DropZoneManager(mouseTracker);
+  }, [mouseTracker]);
+  useEffect(() => {
+    // On first mount, show loading.
+    editor.updateEditor(state => {
+      state.loadingPreview = true;
+    });
+    const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {
+      setIframeTimestamp(Date.now());
+      editor.updateEditor(state => {
+        // Unset boxes to remove old overlays.
+        state.loadingPreview = true;
+        state.boxes = {
+          preview: {},
+          editor: {}
+        };
+      });
+    });
+    return () => {
+      offRefreshPreview();
+    };
+  }, []);
+
+  // Start various trackers
+  useEffect(() => {
+    scrollTracker.start();
+    mouseTracker.start();
+    dropzoneManager.start();
+    return () => {
+      dropzoneManager.stop();
+      mouseTracker.stop();
+      scrollTracker.destroy();
+      viewportManager.destroy();
+      hoverManager.destroy();
+      previewEvents.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 => {
+    previewEvents.onConnected(messenger);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropZoneManagerProvider, {
+    dropzoneManager: dropzoneManager
+  }, /*#__PURE__*/React.createElement(ApplyTheme, null), /*#__PURE__*/React.createElement(AddressBar, null), /*#__PURE__*/React.createElement(AwaitIframeUrl, null, ({
+    url
+  }) => /*#__PURE__*/React.createElement(Iframe, {
+    url: url,
+    timestamp: iframeTimestamp,
+    viewportManager: viewportManager,
+    onConnected: onConnected,
+    showLoading: loadingPreview
+  }))), /*#__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","useState","useDocumentEditor","AddressBar","Iframe","HoverManager","DropZoneManager","DropZoneManagerProvider","Boxes","ScrollTracker","KeyboardShortcuts","ViewportManager","mouseTracker","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","ApplyTheme","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","scrollTracker","window","e","source","target","dataset","role","hoverManager","editorState","getEditorState","read","boxes","filter","box","id","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","preview","start","stop","destroy","setMousePositionFromDrag","setPosition","clientX","clientY","addEventListener","offHoverChange","onHoverChange","highlightedElement","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { AddressBar } from \"./AddressBar\";\nimport { Iframe } from \"./Iframe\";\nimport { HoverManager } from \"./HoverManager\";\nimport { DropZoneManager } from \"./DropZoneManager\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider\";\nimport { Boxes } from \"~/BaseEditor/hooks/Boxes\";\nimport { ScrollTracker } from \"~/BaseEditor/defaultConfig/Content/Preview/ScrollTracker\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents\";\nimport { ApplyTheme } from \"./ApplyTheme\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\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 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 previewEvents = useMemo(() => {\n        return new PreviewEvents(editor, scrollTracker);\n    }, []);\n\n    const dropzoneManager = useMemo(() => {\n        return new DropZoneManager(mouseTracker);\n    }, [mouseTracker]);\n\n    useEffect(() => {\n        // On first mount, show loading.\n        editor.updateEditor(state => {\n            state.loadingPreview = true;\n        });\n\n        const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n            setIframeTimestamp(Date.now());\n\n            editor.updateEditor(state => {\n                // Unset boxes to remove old overlays.\n                state.loadingPreview = true;\n                state.boxes = {\n                    preview: {},\n                    editor: {}\n                };\n            });\n        });\n\n        return () => {\n            offRefreshPreview();\n        };\n    }, []);\n\n    // Start various trackers\n    useEffect(() => {\n        scrollTracker.start();\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            scrollTracker.destroy();\n            viewportManager.destroy();\n            hoverManager.destroy();\n            previewEvents.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        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <ApplyTheme />\n                <AddressBar />\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,191 @@
+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;
+      });
+    }, 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);
+      }
+    }),
+    // 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
+              }
+            }
+          });
+          index++;
+        });
+      }
+    });
+    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.component.register", component => {
+      this.editor.updateEditor(state => {
+        if (!state.components) {
+          state.components = {};
+        }
+        state.components[component.name] = {
+          ...component,
+          image: component.image ?? defaultImage,
+          tags: component.tags ?? []
+        };
+      });
+    });
+    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 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
+    };
+  }
+  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
+      };
+    }
+    return newBoxes;
+  }
+  getMessenger() {
+    return this.messenger;
+  }
+}
+
+//# sourceMappingURL=PreviewEvents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mouseTracker","defaultImage","Commands","$createElement","PreviewEvents","editorEventsRegistered","listeners","constructor","editor","scrollTracker","onConnected","messenger","dispose","registerEditorEvents","subscribeToIframe","setTimeout","updateEditor","state","loadingPreview","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","selectedElement","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            });\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":[]}

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

@@ -0,0 +1,21 @@
+type ScrollFilter = (event: WheelEvent) => boolean;
+type ScrollHandler = (event: WheelEvent) => void;
+export declare class ScrollTracker {
+    private readonly changeTimeout;
+    private readonly scrollStartSubscribers;
+    private readonly scrollSubscribers;
+    private readonly scrollEndSubscribers;
+    private isChanging;
+    private changeTimer;
+    private filter;
+    private window;
+    constructor(window: Window, filter?: ScrollFilter);
+    onScrollStart(callback: ScrollHandler): () => void;
+    onScroll(callback: ScrollHandler): () => void;
+    onScrollEnd(callback: ScrollHandler): () => void;
+    start(): void;
+    destroy(): void;
+    private handleScroll;
+    private notifySubscribers;
+}
+export {};