@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,1022 @@
+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 {
+  FieldActionsOverlay,
+  FieldActionsOverlayRef,
+} from "../FieldActionsOverlay";
+import { FieldButton, FieldDescriptor } from "../pageModel";
+
+import { Component, ItemDescriptor } from "../pageModel";
+import { NoLayout } from "../page-editor-chrome/NoLayout";
+import { Spinner } from "../ui/Spinner";
+import { DeviceToolbar } from "./DeviceToolbar";
+import { buildPageModelSkeleton } from "./pageModelSkeletonBuilder";
+declare global {
+  interface Window {
+    requestRefresh?: (newUri?: string) => boolean;
+  }
+}
+
+export function PageViewerFrame({
+  compareView,
+  pageViewContext,
+}: {
+  compareView: boolean;
+  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 fieldActionsOverlay = useRef<FieldActionsOverlayRef>(null);
+  const [contextMenuFieldButtons, setContextMenuFieldButtons] = useState<
+    FieldButton[]
+  >([]);
+  const [contextMenuField, setContextMenuField] = useState<
+    FieldDescriptor | undefined
+  >();
+  const [contextMenuPosition, setContextMenuPosition] = useState<
+    { x: number; y: number } | undefined
+  >();
+  const [preSelectedAction, setPreSelectedAction] = useState<
+    FieldButton | undefined
+  >();
+
+  // Clear preSelectedAction when overlay is closed
+  useEffect(() => {
+    if (
+      editContext?.currentOverlay !==
+      `${contextMenuField?.fieldId || ""}_generators`
+    ) {
+      setPreSelectedAction(undefined);
+    }
+  }, [editContext?.currentOverlay, contextMenuField?.fieldId]);
+
+  const zoom = pageViewContext.zoom;
+  const blockBlurEventRef = useRef(0);
+  const [currentItemDescriptor, setCurrentItemDescriptor] = useState<
+    ItemDescriptor | undefined
+  >(undefined);
+
+  // Field action handlers for the overlay
+  const handleActionClick = async (action: FieldButton): Promise<void> => {
+    if (contextMenuField) {
+      editContext?.triggerFieldAction(contextMenuField, action);
+    }
+  };
+
+  const handleParameterizedActionExecute = async (
+    action: FieldButton,
+    parameters: Record<string, string>,
+  ): Promise<void> => {
+    if (contextMenuField) {
+      editContext?.triggerFieldAction(contextMenuField, action, parameters);
+    }
+  };
+
+  // Note: handleParameterizedActionFromContextMenu is now created inline in handleContextMenu
+  // to avoid React state timing issues with contextMenuPosition
+
+  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();
+
+  const buildPageModelThrottled = useThrottledCallback(
+    buildPageModelSkeleton,
+    500,
+    {
+      leading: false,
+      trailing: true,
+    },
+  );
+
+  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(),
+      );
+      if (editContext.mode === "preview") {
+        renderUrl.searchParams.set("alpaca_preview", "1");
+      } else {
+        renderUrl.searchParams.set("alpaca_editor", "1");
+      }
+      renderUrl.searchParams.set("sc_mode", "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.mode === "preview" ? "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.mode,
+  ]);
+
+  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",
+          });
+        }
+      }
+    }
+  }, [editContext.focusedField]);
+
+  useEffect(() => {
+    if (!editContext.focusedField && editContext.selection.length > 0) {
+      const lastSelectedComponent = getComponentById(
+        editContext.selection[editContext.selection.length - 1]!,
+        pageViewContextRef.current!.page!,
+      );
+      if (lastSelectedComponent) {
+        editContext.setScrollIntoView(lastSelectedComponent.id);
+      }
+    }
+  }, [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);
+        if ((iframeRef.current!.contentWindow as any).XA) {
+          console.log("init XA");
+          (iframeRef.current!.contentWindow as any).XA.init();
+        }
+        setShowSpinner(false);
+      }
+
+      injectEditorCSS(doc, editContext.mode !== "preview");
+
+      setTimeout(() => {
+        injectSXAScripts(iframeRef.current!);
+      }, 1000);
+
+      buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
+    }
+  };
+
+  useEffect(() => {
+    if (
+      !editContext.scrollIntoView ||
+      !iframeRef.current?.contentDocument?.documentElement
+    )
+      return;
+
+    const component = getComponentById(
+      editContext.scrollIntoView,
+      pageViewContextRef.current!.page!,
+    );
+
+    if (!component) return;
+
+    const rect = findComponentRect(iframeRef.current!, component, 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"),
+          },
+        },
+        editContext.mode === "edit",
+      );
+
+      // 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({
+        itemId: fieldElement.getAttribute("data-itemid") || "",
+        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);
+      if (editContextRef.current?.currentOverlay)
+        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 {
+          if (editContextRef.current?.selection.indexOf(componentId) === -1) {
+            editContextRef.current?.select([componentId]);
+          }
+        }
+
+        //  if (mode !== "edit") {
+        //editContextRef.current?.setScrollIntoView(componentId);
+        //}
+      } else editContextRef.current?.select([]);
+
+      if (
+        (editContext.mode === "edit" &&
+          pageViewContextRef.current?.page?.item.canWriteItem) ||
+        editContext.mode === "suggestions"
+      ) {
+        const fieldElement = findParentWithAttribute(target, "data-fieldid");
+        if (fieldElement?.hasAttribute("data-itemid")) {
+          blockBlurEventRef.current = Date.now() + 500;
+
+          const hasLock =
+            editContext.mode === "suggestions" ||
+            (await editContextRef.current?.setFocusedField(
+              getFieldDescriptorFromElement(fieldElement),
+              true,
+            ));
+
+          if (
+            hasLock &&
+            editContextRef.current?.inlineEditingFieldElement !== fieldElement
+          ) {
+            editContextRef.current?.setInlineEditingFieldElement(fieldElement);
+            // Don't prevent default - we want the browser's natural cursor positioning
+          }
+        }
+      }
+      //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();
+        }
+      }
+    };
+
+    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)) {
+          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,
+      });
+
+      // Store the original context menu position for overlay positioning
+      const menuPosition = {
+        x: event.clientX + iframeRect.x,
+        y: event.clientY + iframeRect.y,
+      };
+      setContextMenuPosition(menuPosition);
+
+      console.log("Original event:", event);
+      console.log("Adjusted event:", adjustedEvent);
+      console.log("Menu position:", menuPosition);
+
+      const field = fieldElement
+        ? getFieldDescriptorFromElement(fieldElement)
+        : undefined;
+
+      const fieldButtons = field ? await loadFieldButtons(field) : [];
+
+      // Create a handler that has access to the current menu position
+      const handleParameterizedActionWithPosition = (
+        field: FieldDescriptor,
+        action: FieldButton,
+        allFieldButtons: FieldButton[],
+        event: any,
+      ) => {
+        setContextMenuField(field);
+        setContextMenuFieldButtons([action]);
+        setPreSelectedAction(action);
+
+        // Create a new MouseEvent with the captured position
+        const syntheticEvent = new MouseEvent("click", {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          clientX: menuPosition.x,
+          clientY: menuPosition.y,
+          screenX: menuPosition.x,
+          screenY: menuPosition.y,
+        });
+
+        // Add target property to the event for proper positioning
+        Object.defineProperty(syntheticEvent, "target", {
+          value: document.body,
+          enumerable: true,
+        });
+        console.log("About to show overlay with position:", {
+          menuPosition,
+          syntheticEvent,
+          preSelectedAction: action,
+        });
+
+        // Add a small delay to ensure context menu has closed
+        setTimeout(() => {
+          console.log("Showing overlay with position:", {
+            menuPosition,
+            syntheticEvent,
+            preSelectedAction: action,
+          });
+
+          // Create a temporary element at the exact position for better positioning
+          const tempElement = document.createElement("div");
+          tempElement.style.position = "fixed";
+          tempElement.style.left = menuPosition.x + "px";
+          tempElement.style.top = menuPosition.y + "px";
+          tempElement.style.width = "1px";
+          tempElement.style.height = "1px";
+          tempElement.style.visibility = "hidden";
+          tempElement.style.pointerEvents = "none";
+          document.body.appendChild(tempElement);
+
+          // Create event targeting the positioned element
+          const positionedEvent = new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: menuPosition.x,
+            clientY: menuPosition.y,
+          });
+          Object.defineProperty(positionedEvent, "target", {
+            value: tempElement,
+            enumerable: true,
+          });
+
+          fieldActionsOverlay.current?.show(positionedEvent, action);
+
+          // Clean up the temporary element after overlay is shown
+          setTimeout(() => {
+            document.body.removeChild(tempElement);
+          }, 1000);
+        }, 100);
+      };
+
+      const showMenu = await showComponentContextMenu(
+        selectedComponents,
+        editContextRef.current!,
+        field,
+        fieldButtons,
+        handleParameterizedActionWithPosition,
+      );
+      if (showMenu) showMenu(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,
+              editContextRef,
+              pageViewContextRef,
+            );
+          }
+        });
+
+        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)
+        });
+
+        buildPageModelThrottled(
+          iframeDocument,
+          editContextRef,
+          pageViewContextRef,
+        );
+      }
+    };
+
+    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 (!compareView) 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}
+              compareView={compareView}
+              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
+            compareView={compareView}
+            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>
+      <FieldActionsOverlay
+        ref={fieldActionsOverlay}
+        generatorButtons={contextMenuFieldButtons}
+        onActionClick={handleActionClick}
+        onParameterizedActionExecute={handleParameterizedActionExecute}
+        currentOverlay={editContext?.currentOverlay}
+        fieldId={contextMenuField?.fieldId || ""}
+        setCurrentOverlay={editContext?.setCurrentOverlay || (() => {})}
+        preSelectedAction={preSelectedAction}
+      />
+    </div>
+  );
+}
+
+function injectEditorCSS(iframeDocument: Document, editMode: boolean) {
+  if (!iframeDocument) return;
+  const style = iframeDocument.createElement("style");
+
+  style.textContent = editMode
+    ? `[contentEditable]:empty:before {
+    content: attr(placeholder);
+    opacity: 0.6;
+  }
+
+  .scChromeData, code {
+    display: none;
+  }
+
+  [contenteditable] {
+    outline: 0px solid transparent;
+  }
+      `
+    : `
+ [contenteditable] {
+    outline: 0px solid transparent;
+  }
+  .scChromeData, code {
+    display: none;
+  }
+`;
+
+  if (iframeDocument && iframeDocument.head) {
+    iframeDocument.head.appendChild(style);
+  }
+}
+
+function injectSXAScripts(iframe: HTMLIFrameElement): void {
+  if (!iframe) return;
+  const iframeDocument = iframe.contentDocument;
+  const iframeWindow = iframe.contentWindow as any;
+  if (!iframeDocument || !iframeWindow) return;
+
+  iframeWindow.Sitecore = {
+    PageModes: {
+      HoverFrame: {
+        extend: () => {
+          //  console.log("extend hoverframe");
+        },
+      },
+      ChromeManager: {
+        chromes: () => {
+          //  console.log("chromes");
+          return [];
+        },
+        resetChromes: () => {
+          //   console.log("resetChromes");
+          iframeWindow.XA.init();
+        },
+        chromesReseted: {
+          observe: () => {
+            //  console.log("chromesReseted.observe");
+          },
+        },
+        // Dummy selectionChanged with an _callbacks array
+        selectionChanged: {
+          _callbacks: [] as any[],
+          // Optionally, you can add a method to trigger all callbacks if needed.
+          trigger: function (...args: any[]): void {
+            this._callbacks.forEach((callback: Function) => callback(...args));
+          },
+        },
+      },
+
+      ChromeControls: function () {},
+      ChromeTypes: {
+        PlaceholderSorting: function () {},
+        Rendering: function () {},
+      },
+    },
+  };
+
+  // Option 1: Use main window's jQuery if available.
+  if (iframeWindow.jQuery) {
+    // Be cautious: if the iframe's document is different, it's better to load jQuery within the iframe.
+    iframeWindow.$sc = iframeWindow.jQuery;
+  } else {
+    // Option 2: Dynamically load jQuery in the iframe.
+    const jqueryScript = iframeDocument.createElement("script");
+    jqueryScript.type = "text/javascript";
+    jqueryScript.src = "https://code.jquery.com/jquery-3.6.0.min.js"; // Use the version you prefer.
+    jqueryScript.onload = () => {
+      // Once loaded, assign it to $sc using noConflict to avoid global collisions.
+      iframeWindow.$sc = iframeWindow.jQuery.noConflict();
+      //  console.log("jQuery loaded in iframe and assigned to $sc");
+    };
+    (iframeDocument.head || iframeDocument.body).appendChild(jqueryScript);
+  }
+
+  // Add a dummy implementation for renderExpandCommand on the ChromeControls prototype.
+  iframeWindow.Sitecore.PageModes.ChromeControls.prototype.renderExpandCommand =
+    function () {
+      console.log("renderExpandCommand called");
+      // Return a dummy value if needed. For example, you might return a dummy HTML string.
+      return "<div>Dummy Expand Command</div>";
+    };
+
+  iframeWindow.Sitecore.PageModes.ChromeTypes.PlaceholderSorting.prototype.insertSortingHandle =
+    function () {
+      console.log("insertSortingHandle called");
+    };
+}
+
+/**
+ * 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;
+}