@parhelia/core 0.1.12534 → 0.1.12555

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

@@ -4,13 +4,11 @@ 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 { useViewportChangeSignal } from "./pageViewContext";
 import morphdom from "morphdom";
 import uuid from "react-uuid";
 import { cn } from "../../lib/utils";
-import { findComponentRect, findFieldElement, findNearestEditableComponentId, findParentWithAttribute, getAbsolutePosition, getFieldDescriptorFromElement, findClosestFieldElement, extractItemIdFromItemUri, } from "../utils";
+import { findComponentRect, findFieldElement, findNearestEditableComponentId, findParentWithAttribute, getAbsolutePosition, getFieldDescriptorFromElement, findClosestFieldElement, } from "../utils";
 import { extractDOMSelectionContext } from "../utils/selectionContext";
-import { cleanId } from "../utils/id-helper";
 import { getAllComponentInstances, getComponentById, } from "../componentTreeHelper";
 import { buildComponentContextMenuItems } from "../ContextMenu";
 import { loadFieldButtons } from "../services/editService";
@@ -22,10 +20,9 @@ import { Spinner } from "../ui/Spinner";
 import { DeviceToolbar } from "./DeviceToolbar";
 import { buildPageModelSkeleton } from "./pageModelSkeletonBuilder";
 const EDITOR_CSS_STYLE_ID = "parhelia-editor-css";
-export function PageViewerFrame({ compareView, pageViewContext, className, slotCloseButton, }) {
+export function PageViewerFrame({ compareView, pageViewContext, className, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
-    useViewportChangeSignal();
     const pathname = usePathname();
     const pageViewContextRef = useRef(undefined);
     if (!editContext || !pageViewContext)
@@ -38,7 +35,6 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
     const iframeRef = useRef(null);
     const currentLoadRef = useRef(null);
     const rebindIframeInteractionsRef = useRef(null);
-    const prevModeRef = useRef(editContext.mode);
     const [showSpinner, setShowSpinner] = useState(false);
     const [scroll, setScroll] = useState(0);
     const [showMiniMap, setShowMiniMap] = useState(false);
@@ -108,11 +104,6 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
         leading: true,
         trailing: true,
     });
-    const requestPageModelBuild = (doc) => {
-        if (!doc)
-            return;
-        buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
-    };
     const [iframeSrc, setIframeSrc] = useState();
     const editorCssGuardRef = useRef({ doc: null, observer: null, editMode: true });
     const ensureEditorCssGuard = (doc, editMode) => {
@@ -179,16 +170,11 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
             editorCssGuardRef.current.doc = null;
         };
     }, []);
-    // If the editor mode flips (edit/preview), re-apply CSS and disable inline editing in the iframe.
+    // If the editor mode flips (edit/preview), re-apply CSS in the current iframe doc.
     useEffect(() => {
         const doc = iframeRef.current?.contentDocument;
-        const isPreview = editContext.mode === "preview";
         if (doc)
-            ensureEditorCssGuard(doc, !isPreview);
-        if (isPreview) {
-            editContextRef.current?.setSelectedRange(undefined);
-            fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
-        }
+            ensureEditorCssGuard(doc, editContext.mode !== "preview");
     }, [editContext.mode]);
     useEffect(() => {
         if (!pageItemDescriptor ||
@@ -198,12 +184,6 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
         const urlPath = editContext.mode === "preview"
             ? pageViewContext.previewUrl
             : pageViewContext.editUrl;
-        const prevMode = prevModeRef.current;
-        prevModeRef.current = editContext.mode;
-        const modeOnlyChange = prevMode !== editContext.mode &&
-            prevMode !== "preview" &&
-            editContext.mode !== "preview";
-        const savedScrollY = iframeRef.current?.contentWindow?.scrollY ?? 0;
         const renderUrl = new URL(urlPath, window.location.origin);
         const editRev = uuid();
         renderUrl.searchParams.set("edit_rev", editRev);
@@ -224,10 +204,6 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
         const runIntegrationRefresh = (refreshFn, message) => {
             console.log(message);
             refreshFn(renderUrl.toString());
-            const doc = iframeRef.current?.contentDocument;
-            if (doc) {
-                requestPageModelBuild(doc);
-            }
             // The integration refresh path may replace/normalize <head> during hydration,
             // which can remove our injected style. Re-ensure a few times post-refresh.
             const ensureLater = (delay) => {
@@ -242,21 +218,6 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
             ensureLater(100);
             ensureLater(500);
             ensureLater(1200);
-            if (modeOnlyChange && savedScrollY > 0) {
-                const restoreScroll = (delay) => {
-                    setTimeout(() => {
-                        const win = iframeRef.current?.contentWindow;
-                        if (win && win.scrollY === 0) {
-                            win.scrollTo(0, savedScrollY);
-                        }
-                    }, delay);
-                };
-                restoreScroll(50);
-                restoreScroll(200);
-                restoreScroll(500);
-                restoreScroll(1000);
-                restoreScroll(2000);
-            }
         };
         const runFallbackRefresh = () => {
             setShowSpinner(true);
@@ -414,7 +375,7 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
                     injectSXAScripts(iframeRef.current);
                 }, 1000);
                 try {
-                    requestPageModelBuild(doc);
+                    buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
                 }
                 catch (buildErr) { }
             }
@@ -470,110 +431,95 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
     }, []);
     const selecionChangeHandler = useDebouncedCallback(() => {
         const sel = iframeRef.current?.contentDocument?.getSelection();
-        const isInlineAiUiFocused = () => {
-            const activeEl = document.activeElement;
-            return !!(activeEl?.closest(".agent-inline-dialog") ||
-                activeEl?.closest(".agent-inline-trigger") ||
-                activeEl?.closest('[role="dialog"]'));
-        };
-        if (!sel || sel.rangeCount === 0) {
-            if (!isInlineAiUiFocused()) {
-                editContextRef.current?.setSelectedRange(undefined);
-            }
-            return;
-        }
-        // Preserve the last non-collapsed selection while the inline AI UI takes focus.
-        // This avoids losing context when users click the trigger or dialog.
-        if (sel.isCollapsed && isInlineAiUiFocused()) {
-            return;
-        }
-        // Find the field element containing the selection/caret
-        const fieldElement = findClosestFieldElement(sel.anchorNode);
-        if (!fieldElement) {
-            if (!isInlineAiUiFocused()) {
-                editContextRef.current?.setSelectedRange(undefined);
-            }
-            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)
+        if (sel && sel.rangeCount > 0) {
+            // Only process selections that have text.
+            // Collapsed selections (carets) should not overwrite a previous AI selection context.
+            if (sel.isCollapsed)
                 return;
-        }
-        // 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);
-        const selectedText = range.toString();
-        // Extract plain text context from the DOM
-        const { contextBefore, contextAfter } = extractDOMSelectionContext(fieldElement, globalStartOffset, globalEndOffset);
-        // Clone the range for the replaceText callback (ranges can become invalid after DOM changes)
-        const rangeClone = range.cloneRange();
-        const itemId = fieldElement.getAttribute("data-itemid") || "";
-        const language = fieldElement.getAttribute("data-language") || "";
-        const versionStr = fieldElement.getAttribute("data-version");
-        const version = versionStr ? parseInt(versionStr, 10) : 0;
-        editContextRef.current?.setSelectedRange({
-            itemId,
-            fieldId: fieldId,
-            language,
-            version,
-            startOffset: globalStartOffset,
-            endOffset: globalEndOffset,
-            text: selectedText,
-            contextBefore,
-            contextAfter,
-            // Create a callback that uses DOM Range API to replace text in contenteditable
-            replaceText: (newText) => {
-                try {
-                    // Delete the selected content (no-op for collapsed ranges)
-                    rangeClone.deleteContents();
-                    // Insert the new text - use the correct document from the range containers
-                    const doc = rangeClone.startContainer.ownerDocument || document;
-                    const textNode = doc.createTextNode(newText);
-                    rangeClone.insertNode(textNode);
-                    // Collapse the range to the end of the inserted text
-                    rangeClone.setStartAfter(textNode);
-                    rangeClone.collapse(true);
-                    // Update the selection
-                    const iframeSel = iframeRef.current?.contentDocument?.getSelection();
-                    if (iframeSel) {
-                        iframeSel.removeAllRanges();
-                        iframeSel.addRange(rangeClone);
+            // 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;
+            }
+            // 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);
+            const selectedText = range.toString();
+            // Extract plain text context from the DOM
+            const { contextBefore, contextAfter } = extractDOMSelectionContext(fieldElement, globalStartOffset, globalEndOffset);
+            // Clone the range for the replaceText callback (ranges can become invalid after DOM changes)
+            const rangeClone = range.cloneRange();
+            const itemId = fieldElement.getAttribute("data-itemid") || "";
+            const language = fieldElement.getAttribute("data-language") || "";
+            const versionStr = fieldElement.getAttribute("data-version");
+            const version = versionStr ? parseInt(versionStr, 10) : 0;
+            editContextRef.current?.setSelectedRange({
+                itemId,
+                fieldId: fieldId,
+                language,
+                version,
+                startOffset: globalStartOffset,
+                endOffset: globalEndOffset,
+                text: selectedText,
+                contextBefore,
+                contextAfter,
+                // Create a callback that uses DOM Range API to replace text in contenteditable
+                replaceText: (newText) => {
+                    try {
+                        // Delete the selected content
+                        rangeClone.deleteContents();
+                        // Insert the new text - use the correct document from the range containers
+                        const doc = rangeClone.startContainer.ownerDocument || document;
+                        const textNode = doc.createTextNode(newText);
+                        rangeClone.insertNode(textNode);
+                        // Collapse the range to the end of the inserted text
+                        rangeClone.setStartAfter(textNode);
+                        rangeClone.collapse(true);
+                        // Update the selection
+                        const iframeSel = iframeRef.current?.contentDocument?.getSelection();
+                        if (iframeSel) {
+                            iframeSel.removeAllRanges();
+                            iframeSel.addRange(rangeClone);
+                        }
+                        // Explicitly save the field value since the MutationObserver may not be active
+                        // when text is selected without entering inline edit mode
+                        const isRichText = fieldElement?.getAttribute("data-is-richtext") === "true";
+                        const valueToSave = isRichText
+                            ? fieldElement?.innerHTML
+                            : fieldElement?.innerText;
+                        if (fieldId &&
+                            itemId &&
+                            language &&
+                            version &&
+                            editContextRef.current) {
+                            editContextRef.current.operations.editField({
+                                field: {
+                                    fieldId,
+                                    fieldName: fieldElement?.getAttribute("data-fieldname") || undefined,
+                                    item: { id: itemId, language, version },
+                                },
+                                refresh: "none",
+                                value: valueToSave,
+                            });
+                        }
                     }
-                    // Explicitly save the field value since the MutationObserver may not be active
-                    // when text is selected without entering inline edit mode
-                    const isRichText = fieldElement?.getAttribute("data-is-richtext") === "true";
-                    const valueToSave = isRichText
-                        ? fieldElement?.innerHTML
-                        : fieldElement?.innerText;
-                    if (fieldId &&
-                        itemId &&
-                        language &&
-                        version &&
-                        editContextRef.current) {
-                        editContextRef.current.operations.editField({
-                            field: {
-                                fieldId,
-                                fieldName: fieldElement?.getAttribute("data-fieldname") || undefined,
-                                item: { id: itemId, language, version },
-                            },
-                            refresh: "none",
-                            value: valueToSave,
-                        });
+                    catch (error) {
+                        console.error("[PageViewerFrame] Failed to replace text:", error);
                     }
-                }
-                catch (error) {
-                    console.error("[PageViewerFrame] Failed to replace text:", error);
-                }
-            },
-        });
+                },
+            });
+        }
     }, 300);
     useEffect(() => {
         const iframe = iframeRef.current;
@@ -761,16 +707,12 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
                     const isDialog = activeEl?.closest(".agent-inline-dialog") ||
                         activeEl?.closest('[role="dialog"]');
                     const isTrigger = activeEl?.closest(".agent-inline-trigger");
-                    // If focus moved to dialog/trigger (e.g. inline AI), don't force a blur boundary yet.
-                    if (!isDialog && !isTrigger) {
-                        // Always mark a field blur operation boundary so consecutive edits do not
-                        // collapse into a single undo step when a selection range is still present.
+                    // If focus moved to dialog or trigger, OR if we still have a selection, don't clear.
+                    if (!isDialog &&
+                        !isTrigger &&
+                        !editContextRef.current?.selectedRange) {
+                        fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
                         editContextRef.current?.operations.onFieldBlur?.();
-                        // Keep selection-related state intact, but clear inline editing element
-                        // when there is no active selectedRange.
-                        if (!editContextRef.current?.selectedRange) {
-                            fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
-                        }
                     }
                 }, 100);
             }
@@ -826,7 +768,7 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
                     "getAttribute" in x.target &&
                     x.target.getAttribute("data-fieldid") &&
                     x.target.getAttribute("data-itemid")))) {
-                    requestPageModelBuild(iframeDocument);
+                    buildPageModelThrottled(iframeDocument, editContextRef, pageViewContextRef);
                 }
             });
             mutationObserver.observe(iframeDocument, {
@@ -835,126 +777,19 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
                 characterData: false, // observe text changes
                 //attributes: true, // observe attribute changes (like style or class)
             });
-            requestPageModelBuild(iframeDocument);
-        };
-        const parsePositiveInt = (value) => {
-            if (!value)
-                return undefined;
-            const parsed = parseInt(value, 10);
-            return Number.isFinite(parsed) ? parsed : undefined;
-        };
-        const resolveLinkedItemDescriptor = (anchor, clickedElement) => {
-            const href = anchor.getAttribute("href") || anchor.href;
-            let hrefUrl;
-            try {
-                hrefUrl = new URL(anchor.href, iframe.contentWindow?.location?.href || window.location.href);
-            }
-            catch {
-                return undefined;
-            }
-            const attributeContainer = clickedElement?.closest("[data-itemid],[data-language],[data-version],[sc_item],[sc_itemid],[sc_lang]") || anchor;
-            // Parse Sitecore RTE format first: ~/link.aspx?_id=GUID&_z=z (target item, not the containing component)
-            let itemIdRaw;
-            if (href.includes("~/link.aspx?_id=") ||
-                href.includes("link.aspx?_id=")) {
-                const idFromUrl = hrefUrl.searchParams.get("_id");
-                if (idFromUrl) {
-                    // Convert compact GUID (AD973E51E8454BD2B333859375FBBA24) to standard format with dashes
-                    itemIdRaw = idFromUrl
-                        .replace(/^(\w{8})(\w{4})(\w{4})(\w{4})(\w{12})$/i, "$1-$2-$3-$4-$5")
-                        .toLowerCase();
-                }
-            }
-            if (!itemIdRaw) {
-                itemIdRaw =
-                    hrefUrl.searchParams.get("sc_itemid") ??
-                        hrefUrl.searchParams.get("itemid") ??
-                        anchor.getAttribute("data-itemid") ??
-                        anchor.getAttribute("sc_itemid") ??
-                        attributeContainer?.getAttribute("data-itemid") ??
-                        attributeContainer?.getAttribute("sc_itemid") ??
-                        (anchor.getAttribute("sc_item")
-                            ? extractItemIdFromItemUri(anchor.getAttribute("sc_item"))
-                            : undefined) ??
-                        (attributeContainer?.getAttribute("sc_item")
-                            ? extractItemIdFromItemUri(attributeContainer.getAttribute("sc_item"))
-                            : undefined);
-            }
-            const itemId = cleanId(itemIdRaw);
-            if (!itemId)
-                return undefined;
-            const language = hrefUrl.searchParams.get("sc_lang") ??
-                hrefUrl.searchParams.get("lang") ??
-                hrefUrl.searchParams.get("language") ??
-                anchor.getAttribute("data-language") ??
-                anchor.getAttribute("sc_lang") ??
-                attributeContainer?.getAttribute("data-language") ??
-                attributeContainer?.getAttribute("sc_lang") ??
-                editContextRef.current?.currentItemDescriptor?.language ??
-                editContextRef.current?.item?.language;
-            if (!language)
-                return undefined;
-            const version = parsePositiveInt(hrefUrl.searchParams.get("sc_version")) ??
-                parsePositiveInt(hrefUrl.searchParams.get("version")) ??
-                parsePositiveInt(anchor.getAttribute("data-version")) ??
-                parsePositiveInt(attributeContainer?.getAttribute("data-version")) ??
-                editContextRef.current?.currentItemDescriptor?.version ??
-                editContextRef.current?.item?.version ??
-                0;
-            return {
-                id: itemId,
-                language,
-                version,
-            };
+            buildPageModelThrottled(iframeDocument, editContextRef, pageViewContextRef);
         };
         const handleIframeClick = async (event) => {
             const target = event.target;
-            if (!target)
-                return;
-            const anchor = target.tagName.toLowerCase() === "a"
-                ? target
-                : target.closest("a");
-            if (!anchor)
-                return;
-            const href = anchor.getAttribute("href") || anchor.href;
-            if (!href || href.startsWith("#") || href.startsWith("javascript:")) {
-                return;
-            }
-            const mode = editContextRef.current?.mode;
-            const isPreviewOrSuggestions = mode === "preview" || mode === "suggestions";
-            if (isPreviewOrSuggestions) {
-                let hrefUrl;
-                try {
-                    hrefUrl = new URL(anchor.href, iframe.contentWindow?.location?.href || window.location.href);
-                }
-                catch {
-                    return;
-                }
-                const iframeOrigin = iframe.contentWindow?.location?.origin;
-                const isInternalLink = hrefUrl.origin === window.location.origin ||
-                    (iframeOrigin ? hrefUrl.origin === iframeOrigin : false);
-                if (!isInternalLink) {
+            // 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();
-                    event.stopPropagation();
-                    window.open(hrefUrl.toString(), "_blank", "noopener,noreferrer");
-                    return;
-                }
-                if (isInternalLink) {
-                    const linkedItem = resolveLinkedItemDescriptor(anchor, target);
-                    if (linkedItem) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        await editContextRef.current?.loadItem(linkedItem, {
-                            openInNewSlot: event.altKey,
-                        });
-                        return;
-                    }
                 }
-                // If this link cannot be resolved to an item, allow browser behavior.
-                return;
             }
-            // In edit mode, keep navigation inside iframe disabled.
-            event.preventDefault();
         };
         const handleContextMenu = async (event) => {
             if (editContextRef.current?.isRefreshing && showSpinner)
@@ -1147,7 +982,9 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
     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.showAgentsPanel && !editContext.currentWizardId && "pr-0"), children: [!pageViewContext.fullscreen && (_jsx(EditorWarnings, { item: pageViewContext.page?.item })), slotCloseButton && (_jsx("div", { className: "absolute top-3 right-3 z-50", children: slotCloseButton })), pageViewContext.device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("div", { className: "relative flex flex-1 select-none", "data-testid": "page-viewer-viewport", style: {
+    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: [!pageViewContext.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", "data-testid": "page-viewer-viewport", style: {
                     width: pageViewContext.device === "desktop" ||
                         pageViewContext.device === "Responsive"
                         ? "100%"
@@ -1163,32 +1000,15 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
                                         setTimeout(() => {
                                             injectSXAScripts(iframeRef.current);
                                         }, 1000);
-                                        requestPageModelBuild(doc);
+                                        buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
                                     }
                                 } }), 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" }))] }), !pageViewContext.fullscreen &&
                         showMiniMap &&
                         editContext.showMinimap &&
-                        !editContext.isMobile &&
-                        editContext.parheliaSettings?.showMinimap !== false && (_jsx(MiniMap, { scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext, deviceHeight: pageViewContext.device === "Desktop"
+                        editContext.parheliaSettings?.showMinimap !== false && (_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, iframe: iframeRef.current })] }));
 }
-/**
- * In preview mode, disable editing in the iframe: set contentEditable=false on all
- * editable elements and blur the active element so the caret is removed and typing does nothing.
- */
-function disableEditingInIframeDocument(doc) {
-    if (!doc || !doc.body)
-        return;
-    const editable = doc.querySelectorAll("[contenteditable='true'], [contenteditable='']");
-    editable.forEach((el) => {
-        el.contentEditable = "false";
-    });
-    const active = doc.activeElement;
-    if (active?.isContentEditable) {
-        active.blur();
-    }
-}
 function injectEditorCSS(iframeDocument, editMode) {
     if (!iframeDocument)
         return;
@@ -1225,9 +1045,6 @@ function injectEditorCSS(iframeDocument, editMode) {
     if (iframeDocument && iframeDocument.head) {
         iframeDocument.head.appendChild(style);
     }
-    if (!editMode) {
-        disableEditingInIframeDocument(iframeDocument);
-    }
 }
 function resolveComponentIdForTarget(rawId, target, page) {
     const direct = getComponentById(rawId, page);