@parhelia/core 0.1.10745

package/dist/editor/page-viewer/PageViewerFrame.js

@@ -0,0 +1,857 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { MiniMap } from "./MiniMap";
+import { useEditContext, useEditContextRef, useFieldsEditContext, useFieldsEditContextRef, } from "../client/editContext";
+import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
+import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
+import morphdom from "morphdom";
+import uuid from "react-uuid";
+import { cn } from "../../lib/utils";
+import { findComponentRect, findFieldElement, findNearestEditableComponentId, findParentWithAttribute, getAbsolutePosition, getFieldDescriptorFromElement, findClosestFieldElement, } from "../utils";
+import { getComponentById } from "../componentTreeHelper";
+import { buildComponentContextMenuItems } from "../ContextMenu";
+import { loadFieldButtons } from "../services/editService";
+import { usePathname } from "next/navigation";
+import { EditorWarnings } from "../EditorWarnings";
+import { FieldActionsOverlay, } from "../FieldActionsOverlay";
+import { NoLayout } from "../page-editor-chrome/NoLayout";
+import { Spinner } from "../ui/Spinner";
+import { DeviceToolbar } from "./DeviceToolbar";
+import { buildPageModelSkeleton } from "./pageModelSkeletonBuilder";
+export function PageViewerFrame({ compareView, pageViewContext, className, }) {
+    const editContext = useEditContext();
+    const fieldsContext = useFieldsEditContext();
+    const pathname = usePathname();
+    const pageViewContextRef = useRef(undefined);
+    if (!editContext || !pageViewContext)
+        return null;
+    useEffect(() => {
+        pageViewContextRef.current = pageViewContext;
+    }, [pageViewContext]);
+    const editContextRef = useEditContextRef();
+    const fieldsContextRef = useFieldsEditContextRef();
+    const iframeRef = useRef(null);
+    const currentLoadRef = useRef(null);
+    const [showSpinner, setShowSpinner] = useState(false);
+    const [scroll, setScroll] = useState(0);
+    const [showMiniMap, setShowMiniMap] = useState(false);
+    const fieldActionsOverlay = useRef(null);
+    const [contextMenuFieldButtons, setContextMenuFieldButtons] = useState([]);
+    const [contextMenuField, setContextMenuField] = useState();
+    const [contextMenuPosition, setContextMenuPosition] = useState();
+    const [preSelectedAction, setPreSelectedAction] = useState();
+    // 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(undefined);
+    // Field action handlers for the overlay
+    const handleActionClick = async (action) => {
+        if (contextMenuField) {
+            editContext?.triggerFieldAction(contextMenuField, action);
+        }
+    };
+    const handleParameterizedActionExecute = async (action, parameters) => {
+        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;
+    // Update the context whenever the iframe ref changes
+    useEffect(() => {
+        pageViewContext.setEditorIframe(iframeRef.current);
+    }, [iframeRef.current, pageViewContext.setEditorIframe]);
+    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, 200, {
+        leading: true,
+        trailing: true,
+    });
+    const [iframeSrc, setIframeSrc] = useState();
+    useEffect(() => {
+        const isHeadless = pageViewContext.isHeadless;
+        if (!pageItemDescriptor ||
+            isHeadless === undefined ||
+            !pageViewContext.editUrl ||
+            !pageViewContext.previewUrl)
+            return;
+        const urlPath = editContext.mode === "preview"
+            ? pageViewContext.previewUrl
+            : pageViewContext.editUrl;
+        const renderUrl = new URL(urlPath, window.location.origin);
+        renderUrl.searchParams.set("edit_rev", 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);
+                // Track expected revision for this navigation to guard stale load events
+                currentLoadRef.current = {
+                    controller: new AbortController(),
+                    revision: editContext.revision ?? "",
+                };
+                setIframeSrc(renderUrl.toString());
+            }
+            else {
+                const initialLoad = currentItemDescriptor?.id !== pageItemDescriptor.id ||
+                    currentItemDescriptor?.language !== pageItemDescriptor.language ||
+                    currentItemDescriptor?.version !== pageItemDescriptor.version;
+                // Abort any in-flight load before starting a new one
+                try {
+                    currentLoadRef.current?.controller.abort();
+                }
+                catch { }
+                const controller = new AbortController();
+                const expectedRevision = editContext.revision ?? "";
+                currentLoadRef.current = { controller, revision: expectedRevision };
+                loadContent(renderUrl.toString(), initialLoad, expectedRevision, controller.signal);
+            }
+        }
+        setCurrentItemDescriptor(pageItemDescriptor);
+    }, [
+        pathname,
+        editContext.revision,
+        pageItemDescriptor,
+        pageViewContext.isHeadless,
+        pageViewContext.editUrl,
+        editContext.mode,
+    ]);
+    useEffect(() => {
+        if (fieldsContext?.focusedField) {
+            if (editContext.selection.length > 0 &&
+                fieldsContext.focusedField.item.id !== editContext.selection[0])
+                return;
+            const fieldElement = findFieldElement(iframeRef.current, fieldsContext.focusedField);
+            if (fieldElement) {
+                const rect = getAbsolutePosition(fieldElement, iframeRef.current);
+                const scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
+                const iframeHeight = iframeRef.current?.getBoundingClientRect().height;
+                const isInViewport = rect.y + rect.height > scrollTop &&
+                    rect.y < scrollTop + (iframeHeight || 0);
+                if (!isInViewport) {
+                    iframeRef.current?.contentWindow?.scrollTo({
+                        top: rect.y,
+                        behavior: "smooth",
+                    });
+                }
+            }
+        }
+    }, [fieldsContext?.focusedField]);
+    useEffect(() => {
+        if (!fieldsContext?.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, fieldsContext?.focusedField]);
+    const loadContent = async (href, initialLoad, expectedRevision, signal) => {
+        console.log("Loading content:", href);
+        const start = performance.now();
+        if (!href)
+            return;
+        try {
+            const content = await fetch(href, { signal });
+            const text = await content.text();
+            console.log("Content loaded in " + (performance.now() - start) + " ms");
+            // Skip applying if this response is stale
+            if (expectedRevision !== (editContextRef.current?.revision ?? "")) {
+                console.log("Stale refresh skipped", {
+                    expectedRevision,
+                    current: editContextRef.current?.revision,
+                });
+                return;
+            }
+            console.log("Content loaded in " + (performance.now() - start) + " ms");
+            const doc = iframeRef.current?.contentDocument;
+            if (doc) {
+                if (initialLoad) {
+                    // Guard again just before applying
+                    if (expectedRevision !== (editContextRef.current?.revision ?? "")) {
+                        console.log("Stale initial load skipped", {
+                            expectedRevision,
+                            current: editContextRef.current?.revision,
+                        });
+                        return;
+                    }
+                    doc.open();
+                    doc.write(text);
+                    doc.close();
+                }
+                else {
+                    const parser = new DOMParser();
+                    const newDoc = parser.parseFromString(text, "text/html");
+                    // Guard before morphing DOM to avoid applying stale content
+                    if (expectedRevision !== (editContextRef.current?.revision ?? "")) {
+                        console.log("Stale morphdom skipped", {
+                            expectedRevision,
+                            current: editContextRef.current?.revision,
+                        });
+                        return;
+                    }
+                    morphdom(doc.documentElement, newDoc.documentElement);
+                    if (iframeRef.current.contentWindow.XA) {
+                        console.log("init XA");
+                        iframeRef.current.contentWindow.XA.init();
+                    }
+                    setShowSpinner(false);
+                }
+                injectEditorCSS(doc, editContext.mode !== "preview");
+                setTimeout(() => {
+                    injectSXAScripts(iframeRef.current);
+                }, 1000);
+                buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
+            }
+        }
+        catch (err) {
+            if (err?.name === "AbortError") {
+                // Swallow aborts – a newer refresh superseded this one
+                return;
+            }
+            throw err;
+        }
+    };
+    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) => {
+            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 = useDebouncedCallback(() => {
+        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);
+            // Guard: if layout components are hidden, do not set focus for fields of layout components
+            if (editContextRef.current?.showLayoutComponents === false &&
+                pageViewContextRef.current?.page) {
+                const ownerId = fieldElement.getAttribute("data-itemid") || "";
+                const owner = getComponentById(ownerId, pageViewContextRef.current.page);
+                if (owner?.layoutId)
+                    return;
+            }
+            // fieldsContextRef.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(),
+            });
+        }
+    }, 300);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        const handleIframeMouseDown = async (event) => {
+            const target = event.target;
+            if (editContextRef.current?.isRefreshing)
+                return;
+            let componentId = findNearestEditableComponentId(target);
+            // Layout components can still be selected even when showLayoutComponents is false
+            // They will be displayed in read-only mode
+            const currentOverlayName = editContextRef.current?.currentOverlay;
+            const isGeneratorOverlay = !!(currentOverlayName &&
+                typeof currentOverlayName === "string" &&
+                currentOverlayName.endsWith("_generators"));
+            // Don't close context-menu overlay on mousedown - let it handle its own closing
+            if (editContextRef.current?.currentOverlay &&
+                !isGeneratorOverlay &&
+                editContextRef.current.currentOverlay !== "context-menu")
+                editContextRef.current?.setCurrentOverlay(undefined);
+            if (componentId) {
+                const currentSelection = editContextRef.current?.selection || [];
+                if (event.shiftKey && currentSelection.length > 0) {
+                    const page = pageViewContextRef.current?.page;
+                    if (page) {
+                        // Build ordered list of visible component ids by DOM order
+                        const doc = iframeRef.current?.contentDocument;
+                        const orderedIds = [];
+                        if (doc) {
+                            const all = Array.from(doc.querySelectorAll("[data-component-id]"));
+                            for (const el of all) {
+                                const id = el.getAttribute("data-component-id");
+                                if (!id)
+                                    continue;
+                                // Layout components are now selectable even when showLayoutComponents is false
+                                orderedIds.push(id);
+                            }
+                        }
+                        const anchorId = currentSelection[currentSelection.length - 1];
+                        const aIdx = orderedIds.indexOf(anchorId);
+                        const bIdx = orderedIds.indexOf(componentId);
+                        if (aIdx !== -1 && bIdx !== -1) {
+                            const start = Math.min(aIdx, bIdx);
+                            const end = Math.max(aIdx, bIdx);
+                            const range = orderedIds.slice(start, end + 1);
+                            if (event.ctrlKey) {
+                                const union = new Set([...currentSelection, ...range]);
+                                editContextRef.current?.select(Array.from(union));
+                            }
+                            else {
+                                editContextRef.current?.select(range);
+                            }
+                        }
+                        else {
+                            editContextRef.current?.select([componentId]);
+                        }
+                    }
+                    else {
+                        editContextRef.current?.select([componentId]);
+                    }
+                }
+                else if (event.ctrlKey) {
+                    // Toggle selection: add if not selected, remove if already selected
+                    const idx = currentSelection.indexOf(componentId);
+                    if (idx === -1) {
+                        editContextRef.current?.select([...currentSelection, componentId]);
+                    }
+                    else {
+                        const newSelection = [...currentSelection];
+                        newSelection.splice(idx, 1);
+                        editContextRef.current?.select(newSelection);
+                    }
+                }
+                else {
+                    // Regular click: always select just this component
+                    editContextRef.current?.select([componentId]);
+                }
+                //  if (mode !== "edit") {
+                //editContextRef.current?.setScrollIntoView(componentId);
+                //}
+            }
+            else
+                editContextRef.current?.select([]);
+            console.log("componentId", componentId);
+            // Skip field focusing when using modifier keys for multi-selection
+            if (!event.ctrlKey &&
+                !event.shiftKey &&
+                ((editContextRef.current?.mode === "edit" &&
+                    pageViewContextRef.current?.page?.item.canWriteItem) ||
+                    editContextRef.current?.mode === "suggestions")) {
+                const fieldElement = findParentWithAttribute(target, "data-fieldid");
+                if (fieldElement?.hasAttribute("data-itemid")) {
+                    // Guard: if layout components are hidden, do not allow editing fields of layout components
+                    if (editContextRef.current?.showLayoutComponents === false &&
+                        pageViewContextRef.current?.page) {
+                        const owningItemId = fieldElement.getAttribute("data-itemid") || "";
+                        const ownerComponent = getComponentById(owningItemId, pageViewContextRef.current.page);
+                        if (ownerComponent?.layoutId) {
+                            return;
+                        }
+                    }
+                    blockBlurEventRef.current = Date.now() + 500;
+                    console.log("[PageViewerFrame] Attempting to focus field:", {
+                        fieldId: fieldElement.getAttribute("data-fieldid"),
+                        itemId: fieldElement.getAttribute("data-itemid"),
+                        mode: editContextRef.current?.mode,
+                        currentlyFocusedField: fieldsContextRef.current?.focusedField,
+                        timestamp: new Date().toISOString(),
+                    });
+                    const hasLock = editContextRef.current?.mode === "suggestions" ||
+                        (await fieldsContextRef.current?.setFocusedField(getFieldDescriptorFromElement(fieldElement), true));
+                    console.log("[PageViewerFrame] Focus field result:", {
+                        hasLock,
+                        fieldId: fieldElement.getAttribute("data-fieldid"),
+                    });
+                    if (hasLock &&
+                        fieldsContextRef.current?.inlineEditingFieldElement !== fieldElement) {
+                        fieldsContextRef.current?.setInlineEditingFieldElement(fieldElement);
+                        // Don't prevent default - we want the browser's natural cursor positioning
+                    }
+                }
+                else {
+                    // Clicked inside iframe but not on a field: clear focused field
+                    fieldsContextRef.current?.setFocusedField(undefined, false);
+                    fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+                    // Release field locks when unfocusing field
+                    if (editContextRef.current?.unlockField) {
+                        editContextRef.current.unlockField(undefined);
+                    }
+                }
+            }
+            const clickEvent = new MouseEvent("click", {
+                view: window,
+                bubbles: true,
+                cancelable: true,
+                clientX: event.clientX,
+                clientY: event.clientY,
+            });
+            if (!isGeneratorOverlay) {
+                document.dispatchEvent(clickEvent);
+            }
+        };
+        const handleIframeClick = async (event) => {
+            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.href;
+                // Block only navigation links, allow anchor links and javascript links
+                if (href && !href.startsWith("#") && !href.startsWith("javascript:")) {
+                    event.preventDefault();
+                }
+            }
+        };
+        const handleContextMenu = async (event) => {
+            if (editContextRef.current?.isRefreshing)
+                return;
+            const target = event.target;
+            if (!target)
+                return;
+            if (event.ctrlKey)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            let componentId = findNearestEditableComponentId(target);
+            // Layout components can now be right-clicked even when showLayoutComponents is false
+            // Context menu will show limited/read-only actions
+            if (componentId) {
+                // Only change selection if right-clicking on a component that's not in the current selection
+                // AND we don't have multiple components selected
+                if (!editContextRef.current?.selection.includes(componentId)) {
+                    // If we have multiple components selected, don't change the selection
+                    // unless we're specifically trying to select a different component
+                    if ((editContextRef.current?.selection.length || 0) <= 1) {
+                        editContextRef.current.select([componentId]);
+                    }
+                }
+            }
+            const fieldElement = findParentWithAttribute(target, "data-fieldid");
+            const selectedComponents = editContextRef.current?.selection
+                .map((id) => getComponentById(id, pageViewContextRef.current.page))
+                .filter((x) => x);
+            // Context menu will now show for layout components even when showLayoutComponents is false
+            // Commands will be appropriately filtered/disabled
+            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);
+            // Only show a spinner if work takes longer than 100ms
+            let loadingShown = false;
+            const loadingTimer = setTimeout(() => {
+                loadingShown = true;
+                editContextRef.current?.showContextMenu(adjustedEvent, [
+                    {
+                        id: "loading",
+                        label: "Loading…",
+                        disabled: true,
+                        icon: _jsx(Spinner, { size: "sm", className: "mr-2" }),
+                    },
+                ]);
+            }, 100);
+            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, action, allFieldButtons, event) => {
+                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 items = await buildComponentContextMenuItems(selectedComponents, editContextRef.current, field, fieldButtons, handleParameterizedActionWithPosition);
+            clearTimeout(loadingTimer);
+            if (loadingShown)
+                editContextRef.current?.updateContextMenu(items);
+            else
+                editContextRef.current?.showContextMenu(adjustedEvent, items);
+        };
+        const handleLoad = () => {
+            // Skip handling if this load does not correspond to the latest requested revision
+            const expectedRevision = currentLoadRef.current?.revision ?? "";
+            const currentRevision = editContextRef.current?.revision ?? "";
+            if (expectedRevision && expectedRevision !== currentRevision) {
+                console.log("Stale headless load skipped", {
+                    expectedRevision,
+                    currentRevision,
+                });
+                return;
+            }
+            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) => {
+                    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()) {
+                        fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+                        editContextRef.current?.operations.onFieldBlur?.();
+                    }
+                    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.getAttribute("data-fieldid") &&
+                        x.target.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) => {
+        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 _jsx(NoLayout, {});
+    }
+    const deviceHeight = pageViewContext.device === "desktop" || !pageViewContext.deviceHeight
+        ? "100%"
+        : pageViewContext.deviceHeight || 640;
+    return (_jsxs("div", { className: cn("relative flex h-full w-full flex-col items-center select-none", className, (editContext.showComponentNavigator ||
+            (editContext.showAgentsPanel && !editContext.currentWizardId)) &&
+            "pr-0"), children: [!editContext.pageView.fullscreen && (_jsx(EditorWarnings, { item: pageViewContext.page?.item })), pageViewContext.device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("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",
+                }, children: [_jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [_jsx("iframe", { ref: iframeRef, className: "page-iframe h-full w-full bg-white", style: { height: deviceHeight }, src: iframeSrc, "data-testid": "pageEditoriframe" }), iframeRef.current && (_jsx(PageEditorChrome, { iframe: iframeRef.current, compareView: compareView, pageViewContext: pageViewContext })), pageViewContext.deviceHeight && pageViewContext.device && (_jsx("div", { className: "bg-gray-4 relative z-40 h-full w-full" }))] }), !editContext.pageView.fullscreen && showMiniMap && (_jsx(MiniMap, { compareView: compareView, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext, deviceHeight: pageViewContext.device === "Desktop"
+                            ? undefined
+                            : pageViewContext.deviceHeight })), showSpinner && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-gray-4/50 absolute top-0 left-0 h-full w-full" }), _jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: _jsx(Spinner, {}) })] }))] }), _jsx(FieldActionsOverlay, { ref: fieldActionsOverlay, generatorButtons: contextMenuFieldButtons, onActionClick: handleActionClick, onParameterizedActionExecute: handleParameterizedActionExecute, currentOverlay: editContext?.currentOverlay, fieldId: contextMenuField?.fieldId || "", setCurrentOverlay: editContext?.setCurrentOverlay || (() => { }), preSelectedAction: preSelectedAction })] }));
+}
+function injectEditorCSS(iframeDocument, editMode) {
+    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) {
+    if (!iframe)
+        return;
+    const iframeDocument = iframe.contentDocument;
+    const iframeWindow = iframe.contentWindow;
+    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: [],
+                    // Optionally, you can add a method to trigger all callbacks if needed.
+                    trigger: function (...args) {
+                        this._callbacks.forEach((callback) => 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, targetNode, localOffset) {
+    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;
+}
+//# sourceMappingURL=PageViewerFrame.js.map