@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

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

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