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

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

@@ -1,10 +1,8 @@
-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, { useCallback, useRef } from "react";
+import react, { useCallback, useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { useDrop } from "react-dnd";
-import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
-import { findMatchingAstNode } from "@webiny/website-builder-sdk";
+import styled from "@emotion/styled";
+import { ComponentManifestToAstConverter, findMatchingAstNode } from "@webiny/website-builder-sdk";
 import { usePreviewData } from "../../../../hooks/usePreviewData.js";
 import { useSelectFromEditor } from "../../../../hooks/useSelectFromEditor.js";
 import { ElementOverlay } from "./ElementOverlay.js";
@@ -16,129 +14,94 @@ import { useDropZoneManager } from "../DropZoneManagerProvider.js";
 import { mergeRefs } from "../mergeRefs.js";
 import { Commands, EditorConfig } from "../../../../index.js";
 import { ElementOverlayProvider } from "./ElementOverlayProvider.js";
-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/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRPdmVybGF5cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0J5QiIsImZpbGUiOiJFbGVtZW50T3ZlcmxheXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IG9ic2VydmVyIH0gZnJvbSBcIm1vYngtcmVhY3QtbGl0ZVwiO1xuaW1wb3J0IHsgdXNlRHJvcCB9IGZyb20gXCJyZWFjdC1kbmRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgdHlwZSB7IFNsb3RJbnB1dCB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcbmltcG9ydCB7IENvbXBvbmVudE1hbmlmZXN0VG9Bc3RDb252ZXJ0ZXIgfSBmcm9tIFwiQHdlYmlueS93ZWJzaXRlLWJ1aWxkZXItc2RrXCI7XG5pbXBvcnQgeyBmaW5kTWF0Y2hpbmdBc3ROb2RlIH0gZnJvbSBcIkB3ZWJpbnkvd2Vic2l0ZS1idWlsZGVyLXNka1wiO1xuXG5pbXBvcnQgeyB1c2VQcmV2aWV3RGF0YSB9IGZyb20gXCJ+L0Jhc2VFZGl0b3IvaG9va3MvdXNlUHJldmlld0RhdGEuanNcIjtcbmltcG9ydCB7IHVzZVNlbGVjdEZyb21FZGl0b3IgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVNlbGVjdEZyb21FZGl0b3IuanNcIjtcbmltcG9ydCB7IEVsZW1lbnRPdmVybGF5IH0gZnJvbSBcIi4vRWxlbWVudE92ZXJsYXkuanNcIjtcbmltcG9ydCB7IHVzZUlzRHJhZ2dpbmcgfSBmcm9tIFwiLi4vdXNlSXNEcmFnZ2luZy5qc1wiO1xuaW1wb3J0IHR5cGUgeyBCb3ggfSBmcm9tIFwiLi4vQm94LmpzXCI7XG5pbXBvcnQgdHlwZSB7IERyb3BFdmVudCB9IGZyb20gXCIuLi91c2VQcm94aW1pdHlEcm9wem9uZS5qc1wiO1xuaW1wb3J0IHsgdXNlRG9jdW1lbnRFZGl0b3IgfSBmcm9tIFwifi9Eb2N1bWVudEVkaXRvci9pbmRleC5qc1wiO1xuaW1wb3J0IHsgRWxlbWVudERyb3BMaW5lcyB9IGZyb20gXCIuL0VsZW1lbnREcm9wTGluZXMuanNcIjtcbmltcG9ydCB7IERyb3BCb3ggfSBmcm9tIFwiLi9Ecm9wQm94LmpzXCI7XG5pbXBvcnQgeyB1c2VEcm9wWm9uZU1hbmFnZXIgfSBmcm9tIFwiLi4vRHJvcFpvbmVNYW5hZ2VyUHJvdmlkZXIuanNcIjtcbmltcG9ydCB7IG1lcmdlUmVmcyB9IGZyb20gXCIuLi9tZXJnZVJlZnMuanNcIjtcbmltcG9ydCB7IENvbW1hbmRzLCBFZGl0b3JDb25maWcgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2luZGV4LmpzXCI7XG5pbXBvcnQgdHlwZSB7IEVkaXRvciB9IGZyb20gXCJ+L2VkaXRvclNkay9FZGl0b3IuanNcIjtcbmltcG9ydCB7IEVsZW1lbnRPdmVybGF5UHJvdmlkZXIgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2RlZmF1bHRDb25maWcvQ29udGVudC9QcmV2aWV3L092ZXJsYXlzL0VsZW1lbnRPdmVybGF5UHJvdmlkZXIuanNcIjtcblxuY29uc3QgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICB6SW5kZXg6IDIwXG59KTtcblxuY29uc3QgZmlsdGVyRWxlbWVudHMgPSAoYm94OiBCb3gpID0+IHtcbiAgICByZXR1cm4gYm94LnR5cGUgPT09IFwiZWxlbWVudFwiICYmIGJveC5pZCAhPT0gXCJyb290XCI7XG59O1xuXG5jb25zdCBmaWx0ZXJTbG90cyA9IChib3g6IEJveCkgPT4ge1xuICAgIHJldHVybiBib3gudHlwZSA9PT0gXCJlbGVtZW50LXNsb3RcIjtcbn07XG5cbmV4cG9ydCBjb25zdCBFbGVtZW50T3ZlcmxheXMgPSBvYnNlcnZlcigoKSA9PiB7XG4gICAgY29uc3QgZHJvcHpvbmVNYW5hZ2VyID0gdXNlRHJvcFpvbmVNYW5hZ2VyKCk7XG4gICAgY29uc3QgZWRpdG9yID0gdXNlRG9jdW1lbnRFZGl0b3IoKTtcbiAgICBjb25zdCB7IGJveGVzIH0gPSB1c2VQcmV2aWV3RGF0YSgpO1xuICAgIGNvbnN0IGlzRHJhZ2dpbmcgPSB1c2VJc0RyYWdnaW5nKCk7XG4gICAgY29uc3QgeyBzZWxlY3RlZEVsZW1lbnQsIGhpZ2hsaWdodGVkRWxlbWVudCB9ID0gdXNlU2VsZWN0RnJvbUVkaXRvcihzdGF0ZSA9PiB7XG4gICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICBzZWxlY3RlZEVsZW1lbnQ6IHN0YXRlLnNlbGVjdGVkRWxlbWVudCxcbiAgICAgICAgICAgIGhpZ2hsaWdodGVkRWxlbWVudDogc3RhdGUuaGlnaGxpZ2h0ZWRFbGVtZW50XG4gICAgICAgIH07XG4gICAgfSk7XG5cbiAgICBjb25zdCBkcm9wUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgICBjb25zdCBbLCBkcm9wXSA9IHVzZURyb3AoKCkgPT4gKHtcbiAgICAgICAgYWNjZXB0OiBcIkVMRU1FTlRcIixcbiAgICAgICAgZHJvcDogKGl0ZW06IGFueSkgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZHJvcHpvbmVNYW5hZ2VyLmdldExhc3RNYXRjaGVkUG9zaXRpb24oKTtcbiAgICAgICAgICAgIGlmICh0YXJnZXQpIHtcbiAgICAgICAgICAgICAgICBvbkRyb3AoeyBpdGVtLCB0YXJnZXQgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9KSk7XG5cbiAgICBkcm9wKGRyb3BSZWYpO1xuXG4gICAgY29uc3QgY2FuRHJvcENvbXBvbmVudEludG9UYXJnZXQgPSAoXG4gICAgICAgIGVkaXRvcjogRWRpdG9yLFxuICAgICAgICBjb21wb25lbnROYW1lOiBzdHJpbmcsXG4gICAgICAgIHRhcmdldDogRHJvcEV2ZW50W1widGFyZ2V0XCJdXG4gICAgKSA9PiB7XG4gICAgICAgIC8vIERldGVybWluZSBjb21wb25lbnQgbWFuaWZlc3QgZnJvbSBkcm9wIHRhcmdldC5cbiAgICAgICAgY29uc3QgZG9jdW1lbnQgPSBlZGl0b3IuZ2V0RG9jdW1lbnRTdGF0ZSgpLnJlYWQoKTtcbiAgICAgICAgY29uc3QgeyBjb21wb25lbnQgfSA9IGRvY3VtZW50LmVsZW1lbnRzW3RhcmdldC5wYXJlbnRJZF07XG4gICAgICAgIGNvbnN0IGNvbXBvbmVudE1hbmlmZXN0ID0gZWRpdG9yLmdldEVkaXRvclN0YXRlKCkucmVhZCgpLmNvbXBvbmVudHNbY29tcG9uZW50Lm5hbWVdO1xuXG4gICAgICAgIC8vIEZpbmQgdGFyZ2V0IGlucHV0IHVzaW5nIEFTVC5cbiAgICAgICAgY29uc3QgaW5wdXRzQXN0ID0gQ29tcG9uZW50TWFuaWZlc3RUb0FzdENvbnZlcnRlci5jb252ZXJ0KGNvbXBvbmVudE1hbmlmZXN0LmlucHV0cyA/PyBbXSk7XG4gICAgICAgIGNvbnN0IHRhcmdldElucHV0Tm9kZSA9IGZpbmRNYXRjaGluZ0FzdE5vZGUodGFyZ2V0LnNsb3QsIGlucHV0c0FzdCk7XG5cbiAgICAgICAgbGV0IGNhbkFjY2VwdENvbXBvbmVudCA9IHRhcmdldElucHV0Tm9kZSAhPT0gdW5kZWZpbmVkO1xuICAgICAgICBpZiAodGFyZ2V0SW5wdXROb2RlKSB7XG4gICAgICAgICAgICBjb25zdCBzbG90SW5wdXQgPSB0YXJnZXRJbnB1dE5vZGUuaW5wdXQgYXMgU2xvdElucHV0O1xuICAgICAgICAgICAgY29uc3Qgd2hpdGVsaXN0ZWRDb21wb25lbnRzID0gc2xvdElucHV0LmNvbXBvbmVudHM7XG4gICAgICAgICAgICBpZiAod2hpdGVsaXN0ZWRDb21wb25lbnRzICYmIHdoaXRlbGlzdGVkQ29tcG9uZW50cy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICAgICAgY2FuQWNjZXB0Q29tcG9uZW50ID0gd2hpdGVsaXN0ZWRDb21wb25lbnRzLmluY2x1ZGVzKGNvbXBvbmVudE5hbWUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHJldHVybiBjYW5BY2NlcHRDb21wb25lbnQ7XG4gICAgfTtcblxuICAgIGNvbnN0IG9uRHJvcCA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoeyBpdGVtLCB0YXJnZXQgfTogRHJvcEV2ZW50KSA9PiB7XG4gICAgICAgICAgICBpZiAoIWNhbkRyb3BDb21wb25lbnRJbnRvVGFyZ2V0KGVkaXRvciwgaXRlbS5jb21wb25lbnROYW1lLCB0YXJnZXQpKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAoaXRlbS5pZCkge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIG1vdmluZyBhbiBleGlzdGluZyBlbGVtZW50LlxuICAgICAgICAgICAgICAgIGVkaXRvci5leGVjdXRlQ29tbWFuZChDb21tYW5kcy5Nb3ZlRWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgICBlbGVtZW50SWQ6IGl0ZW0uaWQsXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudElkOiB0YXJnZXQucGFyZW50SWQsXG4gICAgICAgICAgICAgICAgICAgIHNsb3Q6IHRhcmdldC5zbG90LFxuICAgICAgICAgICAgICAgICAgICBpbmRleDogdGFyZ2V0LmluZGV4XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIGNyZWF0aW5nIGEgbmV3IGVsZW1lbnQuXG4gICAgICAgICAgICAgICAgZWRpdG9yLmV4ZWN1dGVDb21tYW5kKENvbW1hbmRzLkNyZWF0ZUVsZW1lbnQsIHtcbiAgICAgICAgICAgICAgICAgICAgY29tcG9uZW50TmFtZTogaXRlbS5jb21wb25lbnROYW1lLFxuICAgICAgICAgICAgICAgICAgICBwYXJlbnRJZDogdGFyZ2V0LnBhcmVudElkLFxuICAgICAgICAgICAgICAgICAgICBzbG90OiB0YXJnZXQuc2xvdCxcbiAgICAgICAgICAgICAgICAgICAgaW5kZXg6IHRhcmdldC5pbmRleFxuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbZWRpdG9yXVxuICAgICk7XG5cbiAgICBjb25zdCB2aWV3cG9ydENvbnRhaW5lcjogUmVhY3QuQ1NTUHJvcGVydGllcyA9IHtcbiAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGxlZnQ6IDAsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgcG9pbnRlckV2ZW50czogaXNEcmFnZ2luZyA/IFwiYXV0b1wiIDogXCJub25lXCJcbiAgICB9O1xuXG4gICAgY29uc3Qgc2xvdHMgPSBib3hlcy5wcmV2aWV3LmZpbHRlcihmaWx0ZXJTbG90cyk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8T3ZlcmxheUNvbnRhaW5lciByZWY9e21lcmdlUmVmcyhkcm9wUmVmKX0gc3R5bGU9e3ZpZXdwb3J0Q29udGFpbmVyfT5cbiAgICAgICAgICAgIHtib3hlcy5wcmV2aWV3LmZpbHRlcihmaWx0ZXJFbGVtZW50cykubWFwKGJveCA9PiAoXG4gICAgICAgICAgICAgICAgPEVsZW1lbnRPdmVybGF5UHJvdmlkZXJcbiAgICAgICAgICAgICAgICAgICAga2V5PXtib3guaWR9XG4gICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZD17Ym94LmlkfVxuICAgICAgICAgICAgICAgICAgICBpc1NlbGVjdGVkPXtzZWxlY3RlZEVsZW1lbnQgPT09IGJveC5pZH1cbiAgICAgICAgICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17aGlnaGxpZ2h0ZWRFbGVtZW50ID09PSBib3guaWR9XG4gICAgICAgICAgICAgICAgICAgIGJveD17Ym94fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPEVsZW1lbnRPdmVybGF5IC8+XG4gICAgICAgICAgICAgICAgICAgIDxFbGVtZW50RHJvcExpbmVzXG4gICAgICAgICAgICAgICAgICAgICAgICBpc0ZpcnN0PXtib3gucGFyZW50SW5kZXggPT09IDB9XG4gICAgICAgICAgICAgICAgICAgICAgICBwcmV2aWV3Qm94PXtib3h9XG4gICAgICAgICAgICAgICAgICAgICAgICBlZGl0b3JCb3g9e2JveGVzLmVkaXRvci5nZXQoYm94LmlkKSF9XG4gICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgIDxFZGl0b3JDb25maWcuRWxlbWVudE92ZXJsYXkuRWxlbWVudHMgLz5cbiAgICAgICAgICAgICAgICA8L0VsZW1lbnRPdmVybGF5UHJvdmlkZXI+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgICAgIHtzbG90cy5tYXAoc2xvdCA9PiAoXG4gICAgICAgICAgICAgICAgPERyb3BCb3gga2V5PXtzbG90LmlkfSBib3g9e3Nsb3R9IG9uRHJvcD17b25Ecm9wfSAvPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgIDwvT3ZlcmxheUNvbnRhaW5lcj5cbiAgICApO1xufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const OverlayContainer = styled("div")({
+    overflow: "hidden",
+    position: "absolute",
+    zIndex: 20
 });
-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
-  } = usePreviewData();
-  const isDragging = useIsDragging();
-  const {
-    selectedElement,
-    highlightedElement
-  } = useSelectFromEditor(state => {
-    return {
-      selectedElement: state.selectedElement,
-      highlightedElement: state.highlightedElement
+const filterElements = (box)=>"element" === box.type && "root" !== box.id;
+const filterSlots = (box)=>"element-slot" === box.type;
+const ElementOverlays = observer(()=>{
+    const dropzoneManager = useDropZoneManager();
+    const editor = useDocumentEditor();
+    const { boxes } = usePreviewData();
+    const isDragging = useIsDragging();
+    const { selectedElement, highlightedElement } = useSelectFromEditor((state)=>({
+            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)=>{
+        const document = editor.getDocumentState().read();
+        const { component } = document.elements[target.parentId];
+        const componentManifest = editor.getEditorState().read().components[component.name];
+        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
+        const targetInputNode = findMatchingAstNode(target.slot, inputsAst);
+        let canAcceptComponent = void 0 !== targetInputNode;
+        if (targetInputNode) {
+            const slotInput = targetInputNode.input;
+            const whitelistedComponents = slotInput.components;
+            if (whitelistedComponents && whitelistedComponents.length > 0) canAcceptComponent = whitelistedComponents.includes(componentName);
+        }
+        return canAcceptComponent;
     };
-  });
-  const dropRef = useRef(null);
-  const [, drop] = useDrop(() => ({
-    accept: "ELEMENT",
-    drop: item => {
-      const target = dropzoneManager.getLastMatchedPosition();
-      if (target) {
-        onDrop({
-          item,
-          target
+    const onDrop = useCallback(({ item, target })=>{
+        if (!canDropComponentIntoTarget(editor, item.componentName, target)) return;
+        if (item.id) editor.executeCommand(Commands.MoveElement, {
+            elementId: item.id,
+            parentId: target.parentId,
+            slot: target.slot,
+            index: target.index
         });
-      }
-    }
-  }));
-  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]);
-  const viewportContainer = {
-    display: "block",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    pointerEvents: isDragging ? "auto" : "none"
-  };
-  const slots = boxes.preview.filter(filterSlots);
-  return /*#__PURE__*/React.createElement(OverlayContainer, {
-    ref: mergeRefs(dropRef),
-    style: viewportContainer
-  }, boxes.preview.filter(filterElements).map(box => /*#__PURE__*/React.createElement(ElementOverlayProvider, {
-    key: box.id,
-    elementId: box.id,
-    isSelected: selectedElement === box.id,
-    isHighlighted: highlightedElement === box.id,
-    box: box
-  }, /*#__PURE__*/React.createElement(ElementOverlay, null), /*#__PURE__*/React.createElement(ElementDropLines, {
-    isFirst: box.parentIndex === 0,
-    previewBox: box,
-    editorBox: boxes.editor.get(box.id)
-  }), /*#__PURE__*/React.createElement(EditorConfig.ElementOverlay.Elements, null))), slots.map(slot => /*#__PURE__*/React.createElement(DropBox, {
-    key: slot.id,
-    box: slot,
-    onDrop: onDrop
-  })));
+        else editor.executeCommand(Commands.CreateElement, {
+            componentName: item.componentName,
+            parentId: target.parentId,
+            slot: target.slot,
+            index: target.index
+        });
+    }, [
+        editor
+    ]);
+    const viewportContainer = {
+        display: "block",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: isDragging ? "auto" : "none"
+    };
+    const slots = boxes.preview.filter(filterSlots);
+    return /*#__PURE__*/ react.createElement(OverlayContainer, {
+        ref: mergeRefs(dropRef),
+        style: viewportContainer
+    }, boxes.preview.filter(filterElements).map((box)=>/*#__PURE__*/ react.createElement(ElementOverlayProvider, {
+            key: box.id,
+            elementId: box.id,
+            isSelected: selectedElement === box.id,
+            isHighlighted: highlightedElement === box.id,
+            box: box
+        }, /*#__PURE__*/ react.createElement(ElementOverlay, null), /*#__PURE__*/ react.createElement(ElementDropLines, {
+            isFirst: 0 === box.parentIndex,
+            previewBox: box,
+            editorBox: boxes.editor.get(box.id)
+        }), /*#__PURE__*/ react.createElement(EditorConfig.ElementOverlay.Elements, null))), slots.map((slot)=>/*#__PURE__*/ react.createElement(DropBox, {
+            key: slot.id,
+            box: slot,
+            onDrop: onDrop
+        })));
 });
+export { ElementOverlays };
 
 //# sourceMappingURL=ElementOverlays.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useRef","observer","useDrop","ComponentManifestToAstConverter","findMatchingAstNode","usePreviewData","useSelectFromEditor","ElementOverlay","useIsDragging","useDocumentEditor","ElementDropLines","DropBox","useDropZoneManager","mergeRefs","Commands","EditorConfig","ElementOverlayProvider","OverlayContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","filterElements","box","type","id","filterSlots","ElementOverlays","dropzoneManager","editor","boxes","isDragging","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","viewportContainer","display","position","top","left","width","height","pointerEvents","slots","preview","filter","createElement","ref","style","map","key","isSelected","isHighlighted","isFirst","parentIndex","previewBox","editorBox","get","Elements"],"sources":["ElementOverlays.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDrop } from \"react-dnd\";\nimport styled from \"@emotion/styled\";\n\nimport type { SlotInput } from \"@webiny/website-builder-sdk\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\n\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { ElementOverlay } from \"./ElementOverlay.js\";\nimport { useIsDragging } from \"../useIsDragging.js\";\nimport type { Box } from \"../Box.js\";\nimport type { DropEvent } from \"../useProximityDropzone.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { ElementDropLines } from \"./ElementDropLines.js\";\nimport { DropBox } from \"./DropBox.js\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider.js\";\nimport { mergeRefs } from \"../mergeRefs.js\";\nimport { Commands, EditorConfig } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { ElementOverlayProvider } from \"~/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js\";\n\nconst OverlayContainer = styled(\"div\")({\n    overflow: \"hidden\",\n    position: \"absolute\",\n    zIndex: 20\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 } = usePreviewData();\n    const isDragging = useIsDragging();\n    const { selectedElement, highlightedElement } = useSelectFromEditor(state => {\n        return {\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    const viewportContainer: React.CSSProperties = {\n        display: \"block\",\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: isDragging ? \"auto\" : \"none\"\n    };\n\n    const slots = boxes.preview.filter(filterSlots);\n\n    return (\n        <OverlayContainer ref={mergeRefs(dropRef)} style={viewportContainer}>\n            {boxes.preview.filter(filterElements).map(box => (\n                <ElementOverlayProvider\n                    key={box.id}\n                    elementId={box.id}\n                    isSelected={selectedElement === box.id}\n                    isHighlighted={highlightedElement === box.id}\n                    box={box}\n                >\n                    <ElementOverlay />\n                    <ElementDropLines\n                        isFirst={box.parentIndex === 0}\n                        previewBox={box}\n                        editorBox={boxes.editor.get(box.id)!}\n                    />\n                    <EditorConfig.ElementOverlay.Elements />\n                </ElementOverlayProvider>\n            ))}\n            {slots.map(slot => (\n                <DropBox key={slot.id} box={slot} onDrop={onDrop} />\n            ))}\n        </OverlayContainer>\n    );\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlays.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlays.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDrop } from \"react-dnd\";\nimport styled from \"@emotion/styled\";\n\nimport type { SlotInput } from \"@webiny/website-builder-sdk\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\n\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { ElementOverlay } from \"./ElementOverlay.js\";\nimport { useIsDragging } from \"../useIsDragging.js\";\nimport type { Box } from \"../Box.js\";\nimport type { DropEvent } from \"../useProximityDropzone.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { ElementDropLines } from \"./ElementDropLines.js\";\nimport { DropBox } from \"./DropBox.js\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider.js\";\nimport { mergeRefs } from \"../mergeRefs.js\";\nimport { Commands, EditorConfig } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { ElementOverlayProvider } from \"~/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js\";\n\nconst OverlayContainer = styled(\"div\")({\n    overflow: \"hidden\",\n    position: \"absolute\",\n    zIndex: 20\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 } = usePreviewData();\n    const isDragging = useIsDragging();\n    const { selectedElement, highlightedElement } = useSelectFromEditor(state => {\n        return {\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    const viewportContainer: React.CSSProperties = {\n        display: \"block\",\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: isDragging ? \"auto\" : \"none\"\n    };\n\n    const slots = boxes.preview.filter(filterSlots);\n\n    return (\n        <OverlayContainer ref={mergeRefs(dropRef)} style={viewportContainer}>\n            {boxes.preview.filter(filterElements).map(box => (\n                <ElementOverlayProvider\n                    key={box.id}\n                    elementId={box.id}\n                    isSelected={selectedElement === box.id}\n                    isHighlighted={highlightedElement === box.id}\n                    box={box}\n                >\n                    <ElementOverlay />\n                    <ElementDropLines\n                        isFirst={box.parentIndex === 0}\n                        previewBox={box}\n                        editorBox={boxes.editor.get(box.id)!}\n                    />\n                    <EditorConfig.ElementOverlay.Elements />\n                </ElementOverlayProvider>\n            ))}\n            {slots.map(slot => (\n                <DropBox key={slot.id} box={slot} onDrop={onDrop} />\n            ))}\n        </OverlayContainer>\n    );\n});\n"],"names":["OverlayContainer","styled","filterElements","box","filterSlots","ElementOverlays","observer","dropzoneManager","useDropZoneManager","editor","useDocumentEditor","boxes","usePreviewData","isDragging","useIsDragging","selectedElement","highlightedElement","useSelectFromEditor","state","dropRef","useRef","drop","useDrop","item","target","onDrop","canDropComponentIntoTarget","componentName","document","component","componentManifest","inputsAst","ComponentManifestToAstConverter","targetInputNode","findMatchingAstNode","canAcceptComponent","undefined","slotInput","whitelistedComponents","useCallback","Commands","viewportContainer","slots","mergeRefs","ElementOverlayProvider","ElementOverlay","ElementDropLines","EditorConfig","slot","DropBox"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { ViewportManager } from "@webiny/website-builder-sdk";
-import { mouseTracker } from "@webiny/website-builder-sdk";
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import { ViewportManager, mouseTracker } from "@webiny/website-builder-sdk";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Iframe } from "./Iframe.js";
 import { DropZoneManager } from "./DropZoneManager.js";
@@ -11,76 +10,68 @@ import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { AwaitIframeUrl } from "./AwaitIframeUrl.js";
 import { PreviewEvents } from "./PreviewEvents.js";
 import { ApplyTheme } from "./ApplyTheme.js";
-export const Preview = () => {
-  const editor = useDocumentEditor();
-  const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());
-  const loadingPreview = useSelectFromEditor(state => state.loadingPreview);
-  const viewportManager = useMemo(() => {
-    return new ViewportManager();
-  }, []);
-  const previewEvents = useMemo(() => {
-    return new PreviewEvents(editor);
-  }, []);
-  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: {}
+const Preview = ()=>{
+    const editor = useDocumentEditor();
+    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());
+    const loadingPreview = useSelectFromEditor((state)=>state.loadingPreview);
+    const viewportManager = useMemo(()=>new ViewportManager(), []);
+    const previewEvents = useMemo(()=>new PreviewEvents(editor), []);
+    const dropzoneManager = useMemo(()=>new DropZoneManager(mouseTracker), [
+        mouseTracker
+    ]);
+    useEffect(()=>{
+        editor.updateEditor((state)=>{
+            state.loadingPreview = true;
+        });
+        const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, ()=>{
+            setIframeTimestamp(Date.now());
+            editor.updateEditor((state)=>{
+                state.loadingPreview = true;
+                state.boxes = {
+                    preview: {},
+                    editor: {}
+                };
+            });
+        });
+        return ()=>{
+            offRefreshPreview();
         };
-      });
-    });
-    return () => {
-      offRefreshPreview();
-    };
-  }, []);
-
-  // Start various trackers
-  useEffect(() => {
-    mouseTracker.start();
-    dropzoneManager.start();
-    return () => {
-      dropzoneManager.stop();
-      mouseTracker.stop();
-      viewportManager.destroy();
-      previewEvents.destroy();
-    };
-  }, [dropzoneManager, mouseTracker]);
-
-  // Update mouse position while dragging
-  useEffect(() => {
-    const setMousePositionFromDrag = e => {
-      mouseTracker.setPosition(e.clientX, e.clientY);
-    };
-    window.addEventListener("dragover", setMousePositionFromDrag);
-    return () => {
-      window.removeEventListener("dragover", setMousePositionFromDrag);
-    };
-  }, []);
-  const onConnected = useCallback(messenger => {
-    previewEvents.onConnected(messenger);
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ApplyTheme, null), /*#__PURE__*/React.createElement(DropZoneManagerProvider, {
-    dropzoneManager: dropzoneManager
-  }, /*#__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));
+    }, []);
+    useEffect(()=>{
+        mouseTracker.start();
+        dropzoneManager.start();
+        return ()=>{
+            dropzoneManager.stop();
+            mouseTracker.stop();
+            viewportManager.destroy();
+            previewEvents.destroy();
+        };
+    }, [
+        dropzoneManager,
+        mouseTracker
+    ]);
+    useEffect(()=>{
+        const setMousePositionFromDrag = (e)=>{
+            mouseTracker.setPosition(e.clientX, e.clientY);
+        };
+        window.addEventListener("dragover", setMousePositionFromDrag);
+        return ()=>{
+            window.removeEventListener("dragover", setMousePositionFromDrag);
+        };
+    }, []);
+    const onConnected = useCallback((messenger)=>{
+        previewEvents.onConnected(messenger);
+    }, []);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ApplyTheme, null), /*#__PURE__*/ react.createElement(DropZoneManagerProvider, {
+        dropzoneManager: dropzoneManager
+    }, /*#__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));
 };
+export { Preview };
 
 //# sourceMappingURL=Preview.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","ViewportManager","mouseTracker","useDocumentEditor","Iframe","DropZoneManager","DropZoneManagerProvider","KeyboardShortcuts","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","ApplyTheme","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","boxes","preview","start","stop","destroy","setMousePositionFromDrag","e","setPosition","clientX","clientY","window","addEventListener","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 { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Iframe } from \"./Iframe.js\";\nimport { DropZoneManager } from \"./DropZoneManager.js\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider.js\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js\";\nimport { ApplyTheme } from \"./ApplyTheme.js\";\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 viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor);\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        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            viewportManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, 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        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <ApplyTheme />\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Preview.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Iframe } from \"./Iframe.js\";\nimport { DropZoneManager } from \"./DropZoneManager.js\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider.js\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js\";\nimport { ApplyTheme } from \"./ApplyTheme.js\";\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 viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor);\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        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            viewportManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, 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        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <ApplyTheme />\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\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"],"names":["Preview","editor","useDocumentEditor","iframeTimestamp","setIframeTimestamp","useState","Date","loadingPreview","useSelectFromEditor","state","viewportManager","useMemo","ViewportManager","previewEvents","PreviewEvents","dropzoneManager","DropZoneManager","mouseTracker","useEffect","offRefreshPreview","Commands","setMousePositionFromDrag","e","window","onConnected","useCallback","messenger","ApplyTheme","DropZoneManagerProvider","AwaitIframeUrl","url","Iframe","KeyboardShortcuts"],"mappings":";;;;;;;;;;;;AAeO,MAAMA,UAAU;IACnB,MAAMC,SAASC;IACf,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGC,SAASC,KAAK,GAAG;IAE/D,MAAMC,iBAAiBC,oBAAoBC,CAAAA,QAASA,MAAM,cAAc;IAExE,MAAMC,kBAAkBC,QAAQ,IACrB,IAAIC,mBACZ,EAAE;IAEL,MAAMC,gBAAgBF,QAAQ,IACnB,IAAIG,cAAcb,SAC1B,EAAE;IAEL,MAAMc,kBAAkBJ,QAAQ,IACrB,IAAIK,gBAAgBC,eAC5B;QAACA;KAAa;IAEjBC,UAAU;QAENjB,OAAO,YAAY,CAACQ,CAAAA;YAChBA,MAAM,cAAc,GAAG;QAC3B;QAEA,MAAMU,oBAAoBlB,OAAO,sBAAsB,CAACmB,SAAS,cAAc,EAAE;YAC7EhB,mBAAmBE,KAAK,GAAG;YAE3BL,OAAO,YAAY,CAACQ,CAAAA;gBAEhBA,MAAM,cAAc,GAAG;gBACvBA,MAAM,KAAK,GAAG;oBACV,SAAS,CAAC;oBACV,QAAQ,CAAC;gBACb;YACJ;QACJ;QAEA,OAAO;YACHU;QACJ;IACJ,GAAG,EAAE;IAGLD,UAAU;QACND,aAAa,KAAK;QAClBF,gBAAgB,KAAK;QAErB,OAAO;YACHA,gBAAgB,IAAI;YACpBE,aAAa,IAAI;YACjBP,gBAAgB,OAAO;YACvBG,cAAc,OAAO;QACzB;IACJ,GAAG;QAACE;QAAiBE;KAAa;IAGlCC,UAAU;QACN,MAAMG,2BAA2B,CAACC;YAC9BL,aAAa,WAAW,CAACK,EAAE,OAAO,EAAEA,EAAE,OAAO;QACjD;QAEAC,OAAO,gBAAgB,CAAC,YAAYF;QAEpC,OAAO;YACHE,OAAO,mBAAmB,CAAC,YAAYF;QAC3C;IACJ,GAAG,EAAE;IAEL,MAAMG,cAAcC,YAAY,CAACC;QAC7Bb,cAAc,WAAW,CAACa;IAC9B,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,wDACI,oBAACC,YAAUA,OAAAA,WAAAA,GACX,oBAACC,yBAAuBA;QAAC,iBAAiBb;qBACtC,oBAACc,gBAAcA,MACV,CAAC,EAAEC,GAAG,EAAE,iBACL,oBAACC,QAAMA;YACH,KAAKD;YACL,WAAW3B;YACX,iBAAiBO;YACjB,aAAac;YACb,aAAajB;4BAK7B,oBAACyB,mBAAiBA;AAG9B"}

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

@@ -1,16 +1,15 @@
-import React from "react";
+import react from "react";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
-export const PreviewContainer = ({
-  children
-}) => {
-  const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);
-  return /*#__PURE__*/React.createElement("div", {
-    id: "preview-container",
-    style: {
-      height: `calc(100vh - ${uiHeight}px)`
-    },
-    className: "fill-grid relative flex flex-col items-center w-full overflow-auto"
-  }, children);
+const PreviewContainer = ({ children })=>{
+    const uiHeight = useSelectFromEditor((state)=>state.uiReservedSpace.height);
+    return /*#__PURE__*/ react.createElement("div", {
+        id: "preview-container",
+        style: {
+            height: `calc(100vh - ${uiHeight}px)`
+        },
+        className: "fill-grid relative flex flex-col items-center w-full overflow-auto"
+    }, children);
 };
+export { PreviewContainer };
 
 //# sourceMappingURL=PreviewContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useSelectFromEditor","PreviewContainer","children","uiHeight","state","uiReservedSpace","height","createElement","id","style","className"],"sources":["PreviewContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\ninterface PreviewContainerProps {\n    children: React.ReactNode;\n}\n\nexport const PreviewContainer = ({ children }: PreviewContainerProps) => {\n    const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);\n\n    return (\n        <div\n            id={\"preview-container\"}\n            style={{ height: `calc(100vh - ${uiHeight}px)` }}\n            className={\"fill-grid relative flex flex-col items-center w-full overflow-auto\"}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAM5B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC;AAAgC,CAAC,KAAK;EACrE,MAAMC,QAAQ,GAAGH,mBAAmB,CAACI,KAAK,IAAIA,KAAK,CAACC,eAAe,CAACC,MAAM,CAAC;EAE3E,oBACIP,KAAA,CAAAQ,aAAA;IACIC,EAAE,EAAE,mBAAoB;IACxBC,KAAK,EAAE;MAAEH,MAAM,EAAE,gBAAgBH,QAAQ;IAAM,CAAE;IACjDO,SAAS,EAAE;EAAqE,GAE/ER,QACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/PreviewContainer.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/PreviewContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\ninterface PreviewContainerProps {\n    children: React.ReactNode;\n}\n\nexport const PreviewContainer = ({ children }: PreviewContainerProps) => {\n    const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);\n\n    return (\n        <div\n            id={\"preview-container\"}\n            style={{ height: `calc(100vh - ${uiHeight}px)` }}\n            className={\"fill-grid relative flex flex-col items-center w-full overflow-auto\"}\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["PreviewContainer","children","uiHeight","useSelectFromEditor","state"],"mappings":";;AAOO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAChE,MAAMC,WAAWC,oBAAoBC,CAAAA,QAASA,MAAM,eAAe,CAAC,MAAM;IAE1E,OAAO,WAAP,GACI,oBAAC;QACG,IAAI;QACJ,OAAO;YAAE,QAAQ,CAAC,aAAa,EAAEF,SAAS,GAAG,CAAC;QAAC;QAC/C,WAAW;OAEVD;AAGb"}