@alpaca-editor/core 1.0.0

package/src/editor/page-viewer/PageViewerFrame.tsx

@@ -0,0 +1,1030 @@
+import { useEffect, useRef, useState } from "react";
+import { MiniMap } from "./MiniMap";
+import { useEditContext, useEditContextRef } from "../client/editContext";
+import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
+import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
+import { PageViewContext } from "./pageViewContext";
+import morphdom from "morphdom";
+import uuid from "react-uuid";
+
+import {
+  findComponentRect,
+  findFieldElement,
+  findNearestComponentId,
+  findParentComponentId,
+  findParentWithAttribute,
+  getAbsolutePosition,
+  getFieldDescriptorFromElement,
+  findClosestFieldElement,
+} from "../utils";
+
+import { getComponentById } from "../componentTreeHelper";
+import { showComponentContextMenu } from "../ContextMenu";
+import { loadFieldButtons } from "../services/editService";
+import { usePathname } from "next/navigation";
+import { EditorWarnings } from "../EditorWarnings";
+
+import {
+  Component,
+  PageSkeleton,
+  ComponentSkeleton,
+  PlaceholderSkeleton,
+  RenderedItemSkeleton,
+  ItemDescriptor,
+} from "../pageModel";
+import { NoLayout } from "../page-editor-chrome/NoLayout";
+import { Spinner } from "../ui/Spinner";
+import { DeviceToolbar } from "./DeviceToolbar";
+
+declare global {
+  interface Window {
+    requestRefresh?: (newUri?: string) => boolean;
+  }
+}
+
+export function PageViewerFrame({
+  mode,
+  pageViewContext,
+}: {
+  mode: "edit" | "compare" | "view";
+  pageViewContext?: PageViewContext;
+}) {
+  const editContext = useEditContext();
+
+  const pathname = usePathname();
+
+  const pageViewContextRef = useRef<PageViewContext | undefined>(undefined);
+
+  if (!editContext || !pageViewContext) return null;
+
+  useEffect(() => {
+    pageViewContextRef.current = pageViewContext;
+  }, [pageViewContext]);
+
+  const editContextRef = useEditContextRef();
+
+  const iframeRef = pageViewContext.editorIframeRef;
+
+  const [showSpinner, setShowSpinner] = useState(false);
+  const [scroll, setScroll] = useState(0);
+  const [showMiniMap, setShowMiniMap] = useState(false);
+
+  const zoom = pageViewContext.zoom;
+  const blockBlurEventRef = useRef(0);
+  const [currentItemDescriptor, setCurrentItemDescriptor] = useState<
+    ItemDescriptor | undefined
+  >(undefined);
+
+  const pageItemDescriptor = pageViewContext.pageItemDescriptor;
+
+  useEffect(() => {
+    //Workaround for iframeref updates not propagating to usePageViewContext
+    pageViewContext.setWorkaround((x) => !x);
+  }, [iframeRef.current]);
+
+  const updateMiniMapVisibility = useDebouncedCallback(() => {
+    if (!iframeRef.current) return;
+    const iframe = iframeRef.current;
+    const doc = iframe.contentDocument;
+    if (!doc?.documentElement) return;
+    const scrollContainer = doc.scrollingElement || doc.body;
+    if (!scrollContainer) return;
+
+    const contentHeight = scrollContainer.scrollHeight;
+    const clientHeight = iframe.clientHeight;
+
+    const upperThreshold = clientHeight + 100; // show minimap if content exceeds this height
+    const lowerThreshold = clientHeight; // hide minimap if content falls below this
+
+    if (showMiniMap) {
+      if (contentHeight <= lowerThreshold) {
+        setShowMiniMap(false);
+      }
+    } else {
+      if (contentHeight > upperThreshold) {
+        setShowMiniMap(true);
+      }
+    }
+  }, 100);
+
+  updateMiniMapVisibility();
+
+  function buildPageModel(iframeDocument: Document | undefined) {
+    if (
+      !iframeDocument ||
+      !editContextRef.current ||
+      !pageViewContextRef.current
+    )
+      return;
+
+    const pageItemDescriptor = pageViewContextRef.current?.pageItemDescriptor;
+
+    if (!pageItemDescriptor) return;
+
+    const pageItem: RenderedItemSkeleton = {
+      ...pageItemDescriptor,
+      renderedFieldIds: [],
+    };
+
+    const start = performance.now();
+
+    const treeWalker = iframeDocument.createTreeWalker(
+      iframeDocument.documentElement, // Root node to start traversal
+      NodeFilter.SHOW_ELEMENT, // Only show element nodes
+      null, // Optional filter function, can be `null`
+    );
+
+    const root: ComponentSkeleton = {
+      placeholders: [],
+      id: "page",
+      type: "Page",
+      typeId: "",
+      name: "Page",
+      items: [pageItem],
+      datasourceItem: pageItem,
+      renderedDictionaryKeys: [],
+      editorFields: {},
+    };
+
+    let currentComponent: ComponentSkeleton | undefined = root;
+    let currentPlaceholder: undefined | PlaceholderSkeleton;
+
+    while (treeWalker.nextNode()) {
+      const node = treeWalker.currentNode;
+
+      if (node.nodeType !== Node.ELEMENT_NODE) continue;
+
+      const element = node as Element;
+
+      if (currentComponent && element.hasAttribute("data-fieldid")) {
+        const fieldId = element.getAttribute("data-fieldid")!;
+
+        const language =
+          element.getAttribute("data-language") ||
+          currentComponent.datasourceItem?.language ||
+          pageItem.language;
+        const version = element.hasAttribute("data-version")
+          ? parseInt(element.getAttribute("data-version")!)
+          : currentComponent.datasourceItem?.version || pageItem.version;
+        const itemId =
+          element.getAttribute("data-itemid") ||
+          currentComponent.datasourceItem?.id;
+
+        if (!itemId) continue;
+
+        let renderedItem = currentComponent.items.find(
+          (x) =>
+            x.id === itemId && x.language === language && x.version === version,
+        );
+
+        if (!renderedItem) {
+          renderedItem = {
+            id: itemId,
+            language,
+            version,
+            renderedFieldIds: [],
+          };
+          currentComponent.items.push(renderedItem);
+        }
+
+        if (renderedItem.renderedFieldIds.indexOf(fieldId) === -1) {
+          renderedItem.renderedFieldIds.push(fieldId);
+        }
+      }
+
+      if (element.tagName === "SCRIPT") {
+        const placeholderStartId = element.getAttribute(
+          "data-placeholder-start",
+        );
+        const placeholderEndId = element.getAttribute("data-placeholder-end");
+        const componentStartId = element.getAttribute("data-component-start");
+        const componentEndId = element.getAttribute("data-component-end");
+        const dictionaryKeyStart = element.getAttribute(
+          "data-dictionary-key-start",
+        );
+        const editorGroup = element.getAttribute("data-editor-group");
+
+        if (currentComponent && editorGroup) {
+          let group = currentComponent.editorFields[editorGroup];
+          if (!group) {
+            group = {
+              addFields: [],
+              removeFields: [],
+            };
+            currentComponent.editorFields[editorGroup] = group;
+          }
+          const addFields = element.getAttribute("data-add-fields")?.split(",");
+          const removeFields = element
+            .getAttribute("data-remove-fields")
+            ?.split(",");
+
+          group.addFields = [...group.addFields, ...(addFields || [])];
+          group.removeFields = [...group.removeFields, ...(removeFields || [])];
+        }
+
+        if (dictionaryKeyStart) {
+          if (!currentComponent) {
+            console.error(
+              "Dictionary key without component:",
+              dictionaryKeyStart,
+            );
+          } else {
+            currentComponent.renderedDictionaryKeys.push(dictionaryKeyStart);
+          }
+        }
+        if (placeholderStartId) {
+          if (!currentComponent) {
+            console.error(
+              "Placeholder start without component:",
+              placeholderStartId,
+              "Current placeholder",
+              currentPlaceholder,
+            );
+          } else {
+            currentPlaceholder = currentComponent.placeholders.find(
+              (x) => x.key === placeholderStartId,
+            );
+
+            if (!currentPlaceholder) {
+              currentPlaceholder = {
+                key: placeholderStartId,
+                name:
+                  placeholderStartId.indexOf(currentComponent.id + "_") === 0
+                    ? placeholderStartId.substring(
+                        currentComponent.id.length + 1,
+                      )
+                    : placeholderStartId,
+                description: "",
+                components: [],
+                parentComponent: currentComponent,
+              };
+
+              currentComponent.placeholders.push(currentPlaceholder);
+            }
+            currentComponent = undefined;
+          }
+        }
+
+        if (placeholderEndId) {
+          currentComponent = currentPlaceholder?.parentComponent;
+          if (currentPlaceholder?.key !== placeholderEndId) {
+            console.error(
+              "Placeholder end does not match start",
+              currentPlaceholder,
+              placeholderEndId,
+            );
+          }
+          currentPlaceholder = undefined;
+        }
+
+        if (componentStartId) {
+          if (!currentPlaceholder) {
+            if (!currentComponent) {
+              console.error(
+                "Component start without parent component:",
+                componentStartId,
+              );
+              continue;
+            }
+
+            currentPlaceholder = {
+              key: "implicit_" + componentStartId,
+              name: "no-placeholder",
+              description: "",
+              components: [],
+              parentComponent: currentComponent,
+            };
+            if (!currentComponent) {
+              console.error(
+                "Component start without placeholder or parent component",
+              );
+            } else {
+              currentComponent.placeholders.push(currentPlaceholder);
+            }
+          }
+          if (currentPlaceholder) {
+            const language =
+              element.getAttribute("data-language") || pageItem.language;
+            const version = element.hasAttribute("data-version")
+              ? parseInt(element.getAttribute("data-version")!)
+              : pageItem.version;
+
+            const itemId = element.getAttribute("data-itemid");
+
+            const datasourceItem = itemId
+              ? {
+                  id: itemId,
+                  language,
+                  version,
+                  renderedFieldIds: [],
+                }
+              : undefined;
+
+            const layoutId = element.getAttribute("data-layoutid");
+
+            currentComponent = currentPlaceholder.components.find(
+              (x) => x.id === componentStartId,
+            );
+
+            if (!currentComponent) {
+              currentComponent = {
+                id: componentStartId,
+                name: "",
+                type: element.getAttribute("data-type") || "",
+                typeId: element.getAttribute("data-typeid") || "",
+                items: datasourceItem ? [datasourceItem] : [],
+                placeholders: [],
+                parentPlaceholder: currentPlaceholder,
+                renderedDictionaryKeys: [],
+                datasourceItem,
+                layoutId: layoutId || undefined,
+                editorFields: {},
+              };
+
+              currentPlaceholder.components.push(currentComponent);
+            }
+            currentPlaceholder = undefined;
+          }
+        }
+
+        if (componentEndId) {
+          if (!currentComponent || currentComponent.id !== componentEndId) {
+            console.error(
+              "Component end does not match start",
+              currentComponent,
+              componentEndId,
+            );
+
+            // Placeholder closed implicitly
+            if (currentPlaceholder?.parentComponent.id === componentEndId) {
+              currentComponent = currentPlaceholder.parentComponent;
+              currentPlaceholder = undefined;
+            }
+          }
+          currentPlaceholder = currentComponent?.parentPlaceholder;
+
+          if (currentPlaceholder?.key.startsWith("implicit_")) {
+            currentComponent = currentPlaceholder.parentComponent;
+          } else currentComponent = undefined;
+        }
+      }
+    }
+
+    const page: PageSkeleton = {
+      rootComponent: root,
+      item: pageItem,
+      editRevision: editContextRef.current?.revision ?? "",
+    };
+    const time = performance.now() - start;
+
+    console.log("PAGE MODEL SKELETON", page, time);
+    pageViewContextRef.current?.setPageSkeleton(page);
+  }
+
+  const buildPageModelThrottled = useThrottledCallback(buildPageModel, 1000);
+
+  const [iframeSrc, setIframeSrc] = useState<string>();
+
+  useEffect(() => {
+    const isHeadless = pageViewContext.isHeadless;
+    if (!pageItemDescriptor || isHeadless === undefined) return;
+
+    let renderUrl: URL;
+    if (!isHeadless) {
+      // Sitecore MVC rendering
+      renderUrl = new URL(window.location.href);
+      renderUrl.pathname = "/";
+
+      renderUrl.searchParams.set("sc_itemid", pageItemDescriptor.id);
+      renderUrl.searchParams.set("sc_lang", pageItemDescriptor.language);
+      renderUrl.searchParams.set(
+        "sc_version",
+        pageItemDescriptor.version.toString(),
+      );
+      renderUrl.searchParams.set(
+        "sc_mode",
+        editContext.previewMode ? "preview" : "edit",
+      );
+      renderUrl.searchParams.set("alpaca_editor", "1");
+      renderUrl.searchParams.set("sc_database", "master");
+      //renderUrl.searchParams.set(
+      //        "sc_site",
+      //      editContext.site?.name || "website"
+      //  );
+    } else {
+      // Headless rendering
+      console.log("Headless rendering", pageItemDescriptor);
+      renderUrl = new URL(window.location.href);
+      if (editContext.configuration.services.renderService.path)
+        renderUrl.pathname =
+          editContext.configuration.services.renderService.path;
+
+      renderUrl.searchParams.set("itemid", pageItemDescriptor.id);
+      renderUrl.searchParams.set("lang", pageItemDescriptor.language);
+      renderUrl.searchParams.set(
+        "version",
+        pageItemDescriptor.version.toString(),
+      );
+
+      renderUrl.searchParams.set(
+        "site",
+        editContext.pageView.site?.name || "website",
+      );
+      renderUrl.searchParams.set(
+        "mode",
+        editContext.previewMode ? "preview" : "edit",
+      );
+    }
+
+    renderUrl.searchParams.set("edit_rev", editContext.revision ?? uuid());
+
+    if (iframeRef.current?.contentWindow?.requestRefresh) {
+      console.log("Integration - requesting refresh");
+      iframeRef.current?.contentWindow.requestRefresh(renderUrl.toString());
+    } else {
+      setShowSpinner(true);
+      console.log("No integration - reloading frame");
+      if (isHeadless) {
+        console.log("Setting iframe src", renderUrl.toString());
+        setIframeSrc(renderUrl.toString());
+      } else {
+        const initialLoad =
+          currentItemDescriptor?.id !== pageItemDescriptor.id ||
+          currentItemDescriptor?.language !== pageItemDescriptor.language ||
+          currentItemDescriptor?.version !== pageItemDescriptor.version;
+
+        loadContent(renderUrl.toString(), initialLoad);
+      }
+    }
+
+    setCurrentItemDescriptor(pageItemDescriptor);
+  }, [
+    pathname,
+    editContext.revision,
+    pageItemDescriptor,
+    pageViewContext.isHeadless,
+    editContext.previewMode,
+  ]);
+
+  useEffect(() => {
+    if (editContext.focusedField) {
+      if (
+        editContext.selection.length > 0 &&
+        editContext.focusedField.item.id !== editContext.selection[0]
+      )
+        return;
+
+      const fieldElement = findFieldElement(
+        iframeRef.current!,
+        editContext.focusedField,
+      );
+      if (fieldElement) {
+        const rect = getAbsolutePosition(
+          fieldElement as HTMLElement,
+          iframeRef.current!,
+        );
+
+        const scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
+        const iframeHeight = iframeRef.current?.getBoundingClientRect().height;
+
+        const isInViewport =
+          rect.y >= scrollTop && rect.y <= scrollTop + (iframeHeight || 0);
+
+        if (!isInViewport) {
+          iframeRef.current?.contentWindow?.scrollTo({
+            top: rect.y,
+            behavior: "smooth",
+          });
+        }
+      }
+    } else {
+      if (editContext.selection.length > 0) {
+        const lastSelectedComponent = getComponentById(
+          editContext.selection[editContext.selection.length - 1]!,
+          pageViewContextRef.current!.page!,
+        );
+        if (lastSelectedComponent) {
+          editContext.setScrollIntoView(lastSelectedComponent.id);
+        }
+      }
+    }
+  }, [editContext.focusedField, editContext.selection]);
+
+  const loadContent = async (href: string, initialLoad: boolean) => {
+    console.log("Loading content:", href);
+    const start = performance.now();
+    if (!href) return;
+    const content = await fetch(href);
+    const text = await content.text();
+    console.log("Content loaded in " + (performance.now() - start) + " ms");
+    const doc = iframeRef.current?.contentDocument;
+
+    if (doc) {
+      if (initialLoad) {
+        doc.open();
+        doc.write(text);
+        doc.close();
+      } else {
+        const parser = new DOMParser();
+        const newDoc = parser.parseFromString(text, "text/html");
+        morphdom(doc.documentElement, newDoc.documentElement);
+        setShowSpinner(false);
+      }
+
+      if (mode === "edit" && !editContext.previewMode) injectEditorCSS(doc);
+
+      buildPageModel(doc);
+    }
+  };
+
+  useEffect(() => {
+    if (
+      !editContext.scrollIntoView ||
+      !iframeRef.current?.contentDocument?.documentElement
+    )
+      return;
+
+    const rect = findComponentRect(
+      iframeRef.current!,
+      editContext.scrollIntoView,
+      true,
+    );
+
+    if (!rect) return;
+
+    // Check if element is already in viewport
+    const iframeHeight = iframeRef.current.getBoundingClientRect().height;
+
+    const scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
+    const elementTop = rect.rect.y;
+
+    const isInViewport =
+      elementTop >= scrollTop && elementTop <= scrollTop + iframeHeight;
+
+    // If already in viewport, no need to scroll
+    if (isInViewport) {
+      editContext.setScrollIntoView(undefined);
+      return;
+    }
+
+    const scrollPosition =
+      rect.rect.y - iframeHeight / 2 + rect.rect.height / 2;
+
+    iframeRef.current?.contentWindow?.scrollTo({
+      top: scrollPosition,
+      behavior: "smooth",
+    });
+
+    editContext.setScrollIntoView(undefined);
+  }, [editContext.scrollIntoView, pageViewContext.page]);
+
+  useEffect(() => {
+    const handleMessage = (message: MessageEvent) => {
+      if (message.data.type === "editor-exitFullscreen") {
+        editContext.pageView.setFullscreen(false);
+      }
+      if (message.data.type === "editor-timings") {
+        editContext.setTimings(message.data.timings);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  const selecionChangeHandler = useThrottledCallback(() => {
+    const sel = iframeRef.current?.contentDocument?.getSelection();
+
+    if (sel && sel.rangeCount > 0) {
+      // Find the field element containing the selection
+      const fieldElement = findClosestFieldElement(sel.anchorNode);
+
+      if (!fieldElement) return;
+
+      const fieldId = fieldElement.getAttribute("data-fieldid");
+      if (!fieldId) return;
+
+      const range = sel.getRangeAt(0);
+
+      editContextRef.current?.setFocusedField(
+        {
+          fieldId: fieldId,
+          item: {
+            id: fieldElement.getAttribute("data-itemid") || "",
+            language: fieldElement.getAttribute("data-language") || "",
+            version: parseInt(fieldElement.getAttribute("data-version") || "0"),
+          },
+        },
+        true,
+      );
+
+      // Compute the global offsets relative to the field element.
+      const globalStartOffset = getGlobalTextOffset(
+        fieldElement,
+        range.startContainer,
+        range.startOffset,
+      );
+      const globalEndOffset = getGlobalTextOffset(
+        fieldElement,
+        range.endContainer,
+        range.endOffset,
+      );
+
+      editContextRef.current?.setSelectedRange({
+        fieldId: fieldId,
+        startOffset: globalStartOffset,
+        endOffset: globalEndOffset,
+        text: range.toString(),
+      });
+    }
+  }, 100);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const handleIframeMouseDown = async (event: any) => {
+      const target = event.target;
+
+      if (editContextRef.current?.isRefreshing) return;
+
+      const componentId = findParentComponentId(target);
+      editContextRef.current?.setCurrentOverlay(undefined);
+
+      if (componentId) {
+        if (event.ctrlKey) {
+          const currentSelection = editContextRef.current?.selection || [];
+          if (currentSelection.indexOf(componentId) === -1)
+            editContextRef.current?.select([...currentSelection, componentId]);
+        } else {
+          editContextRef.current?.select([componentId]);
+        }
+
+        //  if (mode !== "edit") {
+        //editContextRef.current?.setScrollIntoView(componentId);
+        //}
+      } else editContextRef.current?.select([]);
+
+      if (
+        mode === "edit" &&
+        pageViewContextRef.current?.page?.item.canWriteItem
+      ) {
+        const fieldElement = findParentWithAttribute(target, "data-fieldid");
+        if (fieldElement?.hasAttribute("data-itemid")) {
+          const hasLock = await editContextRef.current?.setFocusedField(
+            getFieldDescriptorFromElement(fieldElement),
+            true,
+          );
+          blockBlurEventRef.current = Date.now() + 500;
+
+          if (hasLock) {
+            editContextRef.current?.setInlineEditingFieldElement(fieldElement);
+          }
+        }
+      }
+      //Forward events so primereact overlays can close
+      const clickEvent = new MouseEvent("click", {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+        clientX: event.clientX,
+        clientY: event.clientY,
+      });
+
+      document.dispatchEvent(clickEvent);
+    };
+
+    const handleIframeClick = async (event: any) => {
+      const target = event.target;
+      // Check if the click target is a link (anchor tag)
+      const anchor =
+        target.tagName.toLowerCase() === "a" ? target : target.closest("a");
+      if (anchor) {
+        const href = (anchor as HTMLAnchorElement).href;
+
+        // Block only navigation links, allow anchor links and javascript links
+        if (href && !href.startsWith("#") && !href.startsWith("javascript:")) {
+          event.preventDefault();
+          console.log("Navigation link blocked:", href);
+        }
+      }
+    };
+
+    const handleContextMenu = async (event: MouseEvent) => {
+      if (editContextRef.current?.isRefreshing) return;
+      const target = event.target;
+      if (!target) return;
+
+      if (event.ctrlKey) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const componentId = findNearestComponentId(target as HTMLElement);
+
+      if (componentId) {
+        if (!editContextRef.current?.selection.includes(componentId)) {
+          console.log("Selecting component CONTEXT MENU", componentId);
+          editContextRef.current!.select([componentId]);
+        }
+      }
+
+      const fieldElement = findParentWithAttribute(
+        target as HTMLElement,
+        "data-fieldid",
+      );
+
+      const selectedComponents = editContextRef.current?.selection
+        .map((id) => getComponentById(id, pageViewContextRef.current!.page!))
+        .filter((x) => x) as Component[];
+
+      const iframeRect = iframe.getBoundingClientRect();
+      const adjustedEvent = new MouseEvent("contextmenu", {
+        bubbles: true,
+        cancelable: true,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        view: window,
+        clientX: event.clientX + iframeRect.x,
+        clientY: event.clientY + iframeRect.y,
+      });
+
+      const field = fieldElement
+        ? getFieldDescriptorFromElement(fieldElement)
+        : undefined;
+
+      const fieldButtons = field ? await loadFieldButtons(field) : [];
+
+      if (
+        showComponentContextMenu(
+          selectedComponents,
+          editContextRef.current!,
+          field,
+          fieldButtons,
+        )(adjustedEvent)
+      ) {
+      }
+    };
+
+    const handleLoad = () => {
+      setShowSpinner(false);
+      const iframeDocument =
+        iframe!.contentDocument || iframe!.contentWindow?.document;
+      if (iframeDocument) {
+        iframeDocument.documentElement.addEventListener(
+          "mousedown",
+          handleIframeMouseDown,
+        );
+        iframeDocument.documentElement.addEventListener(
+          "click",
+          handleIframeClick,
+        );
+        iframe.contentWindow?.addEventListener(
+          "contextmenu",
+          handleContextMenu,
+          true,
+        );
+
+        const scrollContainer =
+          iframe.contentWindow?.document.scrollingElement ||
+          iframe.contentWindow?.document.body;
+        scrollContainer?.addEventListener("scroll", () => {
+          const scrollTop = scrollContainer.scrollTop || 0;
+          scrollHandler(scrollTop);
+        });
+        iframe.contentWindow?.addEventListener("scroll", () => {
+          const scrollTop = scrollContainer?.scrollTop || 0;
+          scrollHandler(scrollTop);
+        });
+
+        iframeDocument.addEventListener(
+          "selectionchange",
+          selecionChangeHandler,
+        );
+
+        iframeDocument.addEventListener("keydown", (event: KeyboardEvent) => {
+          editContextRef.current?.handleKeyDown(event);
+        });
+
+        iframeDocument.documentElement?.addEventListener(
+          "blur",
+          () => {
+            // Block blur event if it was triggered by clicking on a field
+            if (blockBlurEventRef.current < Date.now()) {
+              //editContext.setFocusedField(undefined, false);
+              editContext.setInlineEditingFieldElement(undefined);
+            } else {
+              blockBlurEventRef.current = 0;
+            }
+          },
+          true,
+        );
+
+        const observer = new MutationObserver((records) => {
+          // Ignore all text field edits
+          if (
+            records.some(
+              (x) =>
+                !(
+                  x &&
+                  "getAttribute" in x.target &&
+                  (x.target as Element).getAttribute("data-fieldid") &&
+                  (x.target as Element).getAttribute("data-itemid")
+                ),
+            )
+          ) {
+            buildPageModelThrottled(iframeDocument);
+          }
+        });
+
+        observer.observe(iframeDocument!, {
+          childList: true, // observe direct children changes
+          subtree: true, // observe all descendants changes
+          characterData: false, // observe text changes
+
+          //attributes: true, // observe attribute changes (like style or class)
+        });
+
+        buildPageModel(iframeDocument);
+      }
+    };
+
+    if (iframe) {
+      iframe.addEventListener("load", handleLoad);
+    }
+
+    // Cleanup function
+    return () => {
+      if (iframe) {
+        iframe.removeEventListener("load", handleLoad);
+
+        const iframeDocument =
+          iframe.contentDocument || iframe.contentWindow?.document;
+        if (iframeDocument) {
+          iframeDocument.documentElement.removeEventListener(
+            "click",
+            handleIframeMouseDown,
+          );
+          iframeDocument.documentElement.removeEventListener(
+            "contextmenu",
+            handleContextMenu,
+          );
+        }
+      }
+    };
+  }, [iframeRef.current]);
+
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage(
+      { type: "componentsSelected", componentIds: editContext.selection },
+      "*",
+    );
+  }, [editContext.selection]);
+
+  const updateScrollPosition = (e: number) => {
+    setScroll(e);
+    if (mode === "edit") pageViewContextRef.current?.setScroll(e);
+  };
+
+  useEffect(() => {
+    if (!iframeRef.current) return;
+    const body = iframeRef.current.contentWindow?.document.documentElement;
+    if (!body) return;
+    body.style.transform = `scale(${zoom})`;
+    body.style.transformOrigin = "top center";
+    body.style.overflow = "auto";
+    //body.style.height = `${body.scrollHeight / zoom}px`;
+  }, [zoom]);
+
+  const scrollHandler = useThrottledCallback(updateScrollPosition, 100);
+
+  if (pageViewContext.page?.item && !pageViewContext.page?.item.hasLayout) {
+    return <NoLayout />;
+  }
+
+  const deviceHeight =
+    pageViewContext.device === "desktop" || !pageViewContext.deviceHeight
+      ? "100%"
+      : pageViewContext.deviceHeight || 640;
+
+  return (
+    <div className="relative flex h-full w-full flex-col items-center bg-slate-100 select-none">
+      {!editContext.pageView.fullscreen && (
+        <EditorWarnings item={pageViewContext.page?.item} />
+      )}
+      {pageViewContext.device !== "desktop" && (
+        <DeviceToolbar
+          pageViewContext={pageViewContext}
+          configuration={editContext.configuration}
+        />
+      )}
+      <div
+        className="relative flex flex-1 select-none"
+        style={{
+          width:
+            pageViewContext.device === "desktop" ||
+            pageViewContext.device === "Responsive"
+              ? "100%"
+              : (pageViewContext.deviceWidth || 640) +
+                editContext.configuration.outline.width +
+                "px",
+        }}
+      >
+        <div className="relative h-full w-full">
+          <iframe
+            ref={iframeRef}
+            className="page-iframe h-full w-full bg-white"
+            style={{ height: deviceHeight }}
+            src={iframeSrc}
+            data-testid="pageEditoriframe"
+          />
+
+          {iframeRef.current && (
+            <PageEditorChrome
+              iframe={iframeRef.current}
+              mode={mode || "edit"}
+              pageViewContext={pageViewContext}
+            />
+          )}
+          {pageViewContext.deviceHeight && pageViewContext.device && (
+            <div className="relative z-40 h-full w-full bg-slate-100"></div>
+          )}
+        </div>
+        {!editContext.pageView.fullscreen && showMiniMap && (
+          <MiniMap
+            mode={mode}
+            scroll={scroll}
+            mainViewIframeRef={iframeRef}
+            pageViewContext={pageViewContext}
+            deviceHeight={
+              pageViewContext.device === "Desktop"
+                ? undefined
+                : pageViewContext.deviceHeight
+            }
+          />
+        )}
+        {showSpinner && (
+          <>
+            <div className="absolute top-0 left-0 h-full w-full bg-slate-100/50"></div>
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+              <Spinner />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function injectEditorCSS(iframeDocument: Document) {
+  if (!iframeDocument) return;
+  const style = iframeDocument.createElement("style");
+  style.textContent = `[contentEditable]:empty:before {
+    content: attr(placeholder);
+    opacity: 0.6;
+  }
+
+  [contenteditable] {
+    outline: 0px solid transparent;
+  }
+      `;
+
+  if (iframeDocument && iframeDocument.head) {
+    iframeDocument.head.appendChild(style);
+  }
+}
+
+/**
+ * Calculates the global offset of a given target node and its local offset,
+ * relative to the container's complete text content.
+ *
+ * @param container - The container element that holds the text nodes.
+ * @param targetNode - The text node where the selection starts or ends.
+ * @param localOffset - The offset within the target text node.
+ * @returns The computed global offset.
+ */
+function getGlobalTextOffset(
+  container: Node,
+  targetNode: Node,
+  localOffset: number,
+): number {
+  let globalOffset = 0;
+  const walker = document.createTreeWalker(
+    container,
+    NodeFilter.SHOW_TEXT,
+    null,
+  );
+  while (walker.nextNode()) {
+    const currentNode = walker.currentNode;
+    // If we've reached the target node, add the local offset and return.
+    if (currentNode === targetNode) {
+      return globalOffset + localOffset;
+    }
+    // Otherwise, add the length of this text node.
+    globalOffset += (currentNode.textContent || "").length;
+  }
+  return globalOffset;
+}