@parhelia/core 0.1.12802 → 0.1.12836

package/dist/editor/page-editor-chrome/InlineEditor.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { useEditContext, useFieldsEditContext, useEditContextRef, } from "../client/editContext";
 import { getFieldDescriptorFromElement, hasFieldLock, getSessionWithFieldLock, } from "../utils";
 import { applyPatch, diffWords } from "diff";
@@ -9,6 +10,137 @@ import { createPatch } from "diff";
 import { useInlineAiCompletion } from "./useInlineAICompletion";
 import { getComponentById } from "../componentTreeHelper";
 import { useSlotContext } from "../views/editorSlotContext";
+const INLINE_FORMAT_QUERY_COMMANDS_BY_MARK = {
+    bold: "bold",
+    italic: "italic",
+    underline: "underline",
+    strikethrough: "strikeThrough",
+    subscript: "subscript",
+    superscript: "superscript",
+};
+function getInlineFormatMarkId(menuItemId) {
+    return menuItemId
+        .replace(/^slate-format-mark-/, "")
+        .replace(/^format-mark-/, "");
+}
+function getInlineFieldKey(fieldElement) {
+    const fieldId = fieldElement.getAttribute("data-fieldid") || "";
+    const itemId = fieldElement.getAttribute("data-itemid") || "";
+    const language = fieldElement.getAttribute("data-language") || "";
+    const version = fieldElement.getAttribute("data-version") || "";
+    return `${itemId}:${language}:${version}:${fieldId}`;
+}
+function getSelectedTextAnchorRect(range, root) {
+    const ownerDocument = root.ownerDocument;
+    const nodeFilter = ownerDocument.defaultView?.NodeFilter.SHOW_TEXT ?? NodeFilter.SHOW_TEXT;
+    const walker = ownerDocument.createTreeWalker(root, nodeFilter);
+    let currentNode = walker.nextNode();
+    while (currentNode) {
+        if (range.intersectsNode(currentNode)) {
+            const textNode = currentNode;
+            const start = textNode === range.startContainer ? range.startOffset : 0;
+            const end = textNode === range.endContainer ? range.endOffset : textNode.length;
+            if (end > start) {
+                const probeRange = ownerDocument.createRange();
+                probeRange.setStart(textNode, start);
+                probeRange.setEnd(textNode, end);
+                const rect = Array.from(probeRange.getClientRects()).find((candidate) => candidate.width > 0 && candidate.height > 0);
+                probeRange.detach();
+                if (rect)
+                    return rect;
+            }
+        }
+        currentNode = walker.nextNode();
+    }
+    return null;
+}
+function getFirstVisibleSelectionLineRect(range, viewportWidth, viewportHeight) {
+    const visibleRects = Array.from(range.getClientRects())
+        .filter((rect) => rect.width > 0 &&
+        rect.height > 0 &&
+        rect.bottom >= 0 &&
+        rect.top <= viewportHeight &&
+        rect.right >= 0 &&
+        rect.left <= viewportWidth)
+        .sort((a, b) => a.top - b.top || a.left - b.left);
+    const firstRect = visibleRects[0];
+    if (!firstRect)
+        return null;
+    const rowTolerance = Math.max(2, firstRect.height / 2);
+    const firstLineRects = visibleRects.filter((rect) => Math.abs(rect.top - firstRect.top) <= rowTolerance);
+    const left = Math.min(...firstLineRects.map((rect) => rect.left));
+    const top = Math.min(...firstLineRects.map((rect) => rect.top));
+    const right = Math.max(...firstLineRects.map((rect) => rect.right));
+    const bottom = Math.max(...firstLineRects.map((rect) => rect.bottom));
+    return DOMRect.fromRect({
+        x: left,
+        y: top,
+        width: right - left,
+        height: bottom - top,
+    });
+}
+function hasUsableRect(rect) {
+    return (!!rect &&
+        Number.isFinite(rect.left) &&
+        Number.isFinite(rect.top) &&
+        rect.width > 0 &&
+        rect.height > 0);
+}
+function getInlineFormatAnchorRect(range, fieldElement, viewportWidth, viewportHeight) {
+    const candidates = [
+        getFirstVisibleSelectionLineRect(range, viewportWidth, viewportHeight),
+        getSelectedTextAnchorRect(range, fieldElement),
+        range.getBoundingClientRect(),
+        fieldElement.getBoundingClientRect(),
+    ].filter(hasUsableRect);
+    return (candidates.find((rect) => rect.bottom >= 0 &&
+        rect.top <= viewportHeight &&
+        rect.right >= 0 &&
+        rect.left <= viewportWidth) ??
+        candidates[0] ??
+        null);
+}
+function getTextNodeAtTextOffset(root, offset, affinity = "backward") {
+    const ownerDocument = root.ownerDocument || document;
+    const nodeFilter = ownerDocument.defaultView?.NodeFilter.SHOW_TEXT ?? NodeFilter.SHOW_TEXT;
+    const walker = ownerDocument.createTreeWalker(root, nodeFilter);
+    let currentNode;
+    let boundaryNode = null;
+    let remainingOffset = offset;
+    while ((currentNode = walker.nextNode())) {
+        const nodeLength = currentNode.textContent?.length || 0;
+        if (remainingOffset < nodeLength) {
+            return { node: currentNode, offset: remainingOffset };
+        }
+        if (remainingOffset === nodeLength) {
+            if (affinity === "backward") {
+                return { node: currentNode, offset: remainingOffset };
+            }
+            boundaryNode = currentNode;
+            remainingOffset = 0;
+            continue;
+        }
+        remainingOffset -= nodeLength;
+    }
+    return boundaryNode
+        ? { node: boundaryNode, offset: boundaryNode.textContent?.length || 0 }
+        : null;
+}
+function createRangeFromTextOffsets(fieldElement, startOffset, endOffset) {
+    const startData = getTextNodeAtTextOffset(fieldElement, startOffset, "forward");
+    const endData = getTextNodeAtTextOffset(fieldElement, endOffset, "backward");
+    if (!startData || !endData)
+        return null;
+    try {
+        const range = fieldElement.ownerDocument.createRange();
+        range.setStart(startData.node, startData.offset);
+        range.setEnd(endData.node, endData.offset);
+        return range;
+    }
+    catch {
+        return null;
+    }
+}
 function getAccessibleIframeDocument(iframe) {
     if (!iframe)
         return null;
@@ -43,8 +175,19 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
     const isUpdatingRef = useRef(false);
     const mutationObserverRef = useRef(null);
     const selectionChangeListenerRef = useRef(null);
-    const lastQueuedInlineValueRef = useRef(null);
+    const lastQueuedInlineValueRef = useRef(new Map());
     const lastInlineUserEditAtRef = useRef(0);
+    const [inlineFormatOverlay, setInlineFormatOverlay] = useState({
+        visible: false,
+        left: 0,
+        top: 0,
+        activeCommandIds: [],
+    });
+    const inlineFormatOverlayRef = useRef(null);
+    const inlineFormatSelectionRef = useRef(null);
+    const inlineFormatCommandsCacheRef = useRef(new Map());
+    const inlineFormatCommandsLoadingRef = useRef(new Set());
+    const inlineFormatPointerDownRef = useRef(false);
     const refreshCompletion = useInlineAiCompletion({
         pageViewContext,
         cursorSpanId,
@@ -56,6 +199,222 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
             fieldTypeLower === "multi-line text" ||
             fieldTypeLower === "rich text");
     };
+    const hideInlineFormatOverlay = () => {
+        inlineFormatSelectionRef.current = null;
+        setInlineFormatOverlay((current) => current.visible
+            ? { visible: false, left: 0, top: 0, activeCommandIds: [] }
+            : current);
+    };
+    const getSelectedInlineRichTextField = (range) => {
+        const candidate = range.commonAncestorContainer instanceof Element
+            ? range.commonAncestorContainer
+            : range.commonAncestorContainer.parentElement;
+        const fieldElement = candidate?.closest?.('[data-is-richtext="true"][data-fieldid][data-itemid][data-language][data-version]');
+        if (!fieldElement ||
+            !fieldElement.contains(range.startContainer) ||
+            !fieldElement.contains(range.endContainer)) {
+            return null;
+        }
+        return fieldElement;
+    };
+    const getInlineRichTextFieldForSelectedRange = (iframeDocument, selectedRange) => {
+        if (!selectedRange?.fieldId || !selectedRange.itemId)
+            return null;
+        const fields = Array.from(iframeDocument.querySelectorAll('[data-is-richtext="true"][data-fieldid][data-itemid][data-language][data-version]'));
+        return (fields.find((fieldElement) => {
+            const version = fieldElement.getAttribute("data-version");
+            return (fieldElement.getAttribute("data-fieldid") === selectedRange.fieldId &&
+                fieldElement.getAttribute("data-itemid") === selectedRange.itemId &&
+                (!selectedRange.language ||
+                    fieldElement.getAttribute("data-language") ===
+                        selectedRange.language) &&
+                (selectedRange.version == null ||
+                    version === String(selectedRange.version)));
+        }) ?? null);
+    };
+    const loadInlineFormatCommands = async (fieldElement) => {
+        const key = getInlineFieldKey(fieldElement);
+        if (inlineFormatCommandsCacheRef.current.has(key) ||
+            inlineFormatCommandsLoadingRef.current.has(key)) {
+            return;
+        }
+        inlineFormatCommandsLoadingRef.current.add(key);
+        try {
+            const currentContext = contextRef.current;
+            if (!currentContext)
+                return;
+            const field = await currentContext.itemsRepository.getField(getFieldDescriptorFromElement(fieldElement));
+            const contextMenuFactory = field
+                ? currentContext.configuration.fieldTypes[field.type]
+                    ?.contextMenuFactory
+                : undefined;
+            if (!field || !contextMenuFactory) {
+                inlineFormatCommandsCacheRef.current.set(key, []);
+                return;
+            }
+            const menuItems = await contextMenuFactory(field, currentContext);
+            const formatSubmenu = menuItems.find((item) => item.items?.length &&
+                (item.id === "format-submenu" ||
+                    item.id === "slate-format-submenu" ||
+                    item.label === "Format"));
+            const commands = formatSubmenu?.items
+                ?.filter((item) => !item.separator && !item.disabled && !!item.command)
+                .map((item) => ({
+                id: item.id,
+                label: item.label ?? "",
+                icon: item.icon,
+                command: item.command,
+                queryCommand: INLINE_FORMAT_QUERY_COMMANDS_BY_MARK[getInlineFormatMarkId(item.id)],
+            })) ?? [];
+            inlineFormatCommandsCacheRef.current.set(key, commands);
+        }
+        catch (error) {
+            console.error("[InlineEditor] Failed to load format overlay:", error);
+            inlineFormatCommandsCacheRef.current.set(key, []);
+        }
+        finally {
+            inlineFormatCommandsLoadingRef.current.delete(key);
+            window.requestAnimationFrame(updateInlineFormatOverlay);
+        }
+    };
+    const getActiveInlineFormatCommandIds = (iframeDocument, range, commands) => {
+        const selection = iframeDocument.getSelection();
+        if (!selection)
+            return [];
+        const queryActiveCommands = () => commands
+            .filter((command) => {
+            if (!command.queryCommand)
+                return false;
+            try {
+                return iframeDocument.queryCommandState(command.queryCommand);
+            }
+            catch {
+                return false;
+            }
+        })
+            .map((command) => command.id);
+        const currentRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+        if (!currentRange ||
+            currentRange.startContainer !== range.startContainer ||
+            currentRange.startOffset !== range.startOffset ||
+            currentRange.endContainer !== range.endContainer ||
+            currentRange.endOffset !== range.endOffset) {
+            return [];
+        }
+        return queryActiveCommands();
+    };
+    const updateInlineFormatOverlay = () => {
+        if (inlineFormatPointerDownRef.current) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        if (compareView ||
+            contextRef.current?.readonly ||
+            (contextRef.current?.mode !== "edit" &&
+                contextRef.current?.mode !== "suggestions")) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        const iframe = pageViewContext.editorIframe;
+        const iframeDocument = getAccessibleIframeDocument(iframe);
+        if (!iframe || !iframeDocument) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        const selection = getAccessibleIframeSelection(iframe);
+        const selectedRange = contextRef.current?.selectedRange;
+        if (selection?.rangeCount && selection.isCollapsed) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        const liveRange = selection && !selection.isCollapsed && selection.rangeCount > 0
+            ? selection.getRangeAt(0)
+            : null;
+        const liveRangeText = liveRange?.toString().trim();
+        if (!liveRangeText && !selectedRange?.text?.trim()) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        const liveRangeFieldElement = liveRange
+            ? getSelectedInlineRichTextField(liveRange)
+            : null;
+        const fieldElement = liveRangeFieldElement ??
+            getInlineRichTextFieldForSelectedRange(iframeDocument, selectedRange);
+        if (!fieldElement || !fieldElement.isContentEditable) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        const range = (liveRangeFieldElement ? liveRange : null) ??
+            createRangeFromTextOffsets(fieldElement, selectedRange?.startOffset ?? 0, selectedRange?.endOffset ?? 0);
+        if (!range) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        const commandKey = getInlineFieldKey(fieldElement);
+        const inlineFormatCommands = inlineFormatCommandsCacheRef.current.get(commandKey);
+        if (!inlineFormatCommands) {
+            void loadInlineFormatCommands(fieldElement);
+            hideInlineFormatOverlay();
+            return;
+        }
+        if (inlineFormatCommands.length === 0) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        const iframeViewportWidth = iframe.contentWindow?.innerWidth ?? iframe.clientWidth;
+        const iframeViewportHeight = iframe.contentWindow?.innerHeight ?? iframe.clientHeight;
+        const anchorRect = getInlineFormatAnchorRect(range, fieldElement, iframeViewportWidth, iframeViewportHeight) ?? fieldElement.getBoundingClientRect();
+        const iframeRect = iframe.getBoundingClientRect();
+        const overlayWidth = inlineFormatOverlayRef.current?.offsetWidth ?? 180;
+        const overlayHeight = inlineFormatOverlayRef.current?.offsetHeight ?? 34;
+        const viewportPadding = 8;
+        const selectionGap = 8;
+        const anchorCenter = iframeRect.left +
+            anchorRect.left +
+            Math.min(anchorRect.width, overlayWidth) / 2;
+        let top = iframeRect.top + anchorRect.top - overlayHeight - selectionGap;
+        if (top < viewportPadding) {
+            top = iframeRect.top + anchorRect.bottom + selectionGap + 36;
+        }
+        top = Math.max(viewportPadding, Math.min(top, window.innerHeight - overlayHeight - viewportPadding));
+        const left = Math.max(viewportPadding, Math.min(anchorCenter - overlayWidth / 2, window.innerWidth - overlayWidth - viewportPadding));
+        inlineFormatSelectionRef.current = {
+            range: range.cloneRange(),
+            fieldElement,
+        };
+        setInlineFormatOverlay({
+            visible: true,
+            left,
+            top,
+            activeCommandIds: getActiveInlineFormatCommandIds(iframeDocument, range, inlineFormatCommands),
+        });
+    };
+    const applyInlineFormatCommand = async (command, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const selectionContext = inlineFormatSelectionRef.current;
+        if (!selectionContext?.range || !command.command)
+            return;
+        const iframeWindow = pageViewContext.editorIframe?.contentWindow;
+        const iframeDocument = selectionContext.range.startContainer.ownerDocument;
+        if (!iframeDocument)
+            return;
+        const selection = iframeDocument.getSelection();
+        if (!selection)
+            return;
+        iframeWindow?.focus();
+        selectionContext.fieldElement.focus({ preventScroll: true });
+        selection.removeAllRanges();
+        selection.addRange(selectionContext.range);
+        await command.command(event);
+        if (selection.rangeCount > 0) {
+            inlineFormatSelectionRef.current = {
+                range: selection.getRangeAt(0).cloneRange(),
+                fieldElement: selectionContext.fieldElement,
+            };
+        }
+        window.requestAnimationFrame(updateInlineFormatOverlay);
+    };
     // Stable identity check: compare by field key (not by DOM node reference).
     // This avoids stomping the active field if the iframe DOM is replaced/morphed.
     const getFieldKeyFromElement = (el) => {
@@ -110,6 +469,14 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
             element.contains(selection.focusNode));
     };
     const isElementActiveOrSelectedInIframe = (doc, element) => isElementActiveInIframe(doc, element) || isSelectionInsideElement(element);
+    const isInlineFieldBeingEdited = (doc, element) => {
+        if (!doc || !element)
+            return false;
+        const iframe = pageViewContext.editorIframe;
+        const iframeHasFocus = iframe?.ownerDocument.activeElement === iframe || doc.hasFocus() === true;
+        return ((iframeHasFocus && isElementActiveInIframe(doc, element)) ||
+            isSelectionInsideElement(element));
+    };
     const focusInlineElement = (element) => {
         const iframeWindow = pageViewContext.editorIframe?.contentWindow;
         const selection = getAccessibleIframeSelection(pageViewContext.editorIframe);
@@ -128,6 +495,19 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
         const prevHTML = element.innerHTML ?? "";
         if (prevHTML === nextHTML)
             return false;
+        if (contextRef.current?.mode === "suggestions") {
+            const iframeDocument = getAccessibleIframeDocument(pageViewContext.editorIframe);
+            const iframeHasFocus = pageViewContext.editorIframe?.ownerDocument.activeElement ===
+                pageViewContext.editorIframe || iframeDocument?.hasFocus() === true;
+            const recentlyEdited = Date.now() - lastInlineUserEditAtRef.current < 1500;
+            const isFocusedEditable = iframeHasFocus &&
+                (isElementActiveInIframe(iframeDocument, element) ||
+                    isSelectionInsideElement(element));
+            const willSkipRewrite = isFocusedEditable || (element.isContentEditable && recentlyEdited);
+            if (willSkipRewrite) {
+                return false;
+            }
+        }
         isUpdatingRef.current = true;
         element.innerHTML = nextHTML;
         setTimeout(() => {
@@ -185,27 +565,46 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
         if (iframeDocument && sourceElement.ownerDocument !== iframeDocument) {
             return false;
         }
-        const activeElement = modifiedFieldsContext?.inlineEditingFieldElement;
-        if (!activeElement || !isSameFieldKey(sourceElement, key))
-            return false;
         const activePage = pageViewContext.pageItemDescriptor;
         if (activePage?.language && activePage.language !== key.language) {
             return false;
         }
+        const activeElement = modifiedFieldsContext?.inlineEditingFieldElement;
+        if (activeElement && isSameFieldKey(sourceElement, key))
+            return true;
+        if (key.fromUserInput &&
+            contextRef.current?.mode === "suggestions" &&
+            sourceElement instanceof HTMLElement &&
+            sourceElement.isContentEditable &&
+            isSameFieldKey(sourceElement, key)) {
+            return true;
+        }
+        if (contextRef.current?.mode === "suggestions" &&
+            sourceElement instanceof HTMLElement &&
+            sourceElement.isContentEditable &&
+            isSameFieldKey(sourceElement, key) &&
+            isInlineFieldBeingEdited(iframeDocument, sourceElement)) {
+            return true;
+        }
+        if (!activeElement || !isSameFieldKey(sourceElement, key))
+            return false;
         return true;
     }
-    function queueInlineFieldValue({ value, fieldId, fieldName, itemId, language, version, sourceElement, }) {
-        if (!isCurrentInlineEditSource(sourceElement, {
+    function queueInlineFieldValue({ value, fieldId, fieldName, itemId, language, version, sourceElement, fromUserInput = false, source = "unknown", }) {
+        const isCurrentSource = isCurrentInlineEditSource(sourceElement, {
             fieldId,
             itemId,
             language,
             version,
-        })) {
+            fromUserInput,
+        });
+        if (!isCurrentSource) {
             return;
         }
-        if (lastQueuedInlineValueRef.current === value)
+        const fieldValueKey = `${itemId}:${language}:${version}:${fieldId}`;
+        if (lastQueuedInlineValueRef.current.get(fieldValueKey) === value)
             return;
-        lastQueuedInlineValueRef.current = value;
+        lastQueuedInlineValueRef.current.set(fieldValueKey, value);
         lastInlineUserEditAtRef.current = Date.now();
         contextRef.current?.operations.editField({
             field: {
@@ -217,22 +616,177 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                     version,
                 },
             },
+            forceMode: contextRef.current?.mode === "suggestions" ||
+                context.mode === "suggestions"
+                ? "suggestions"
+                : undefined,
             originatingSlotId: slotContext?.slotId,
             refresh: "none",
             value,
         });
     }
+    const sanitizeEditableValue = (element, isRichText) => {
+        let currentValue = isRichText ? element.innerHTML : element.innerText;
+        if (isRichText) {
+            const clone = element.cloneNode(true);
+            const cursorElem = clone.querySelector(`#${cursorSpanId}`);
+            if (cursorElem)
+                cursorElem.parentNode?.removeChild(cursorElem);
+            const ownerDoc = clone.ownerDocument || document;
+            const walker = ownerDoc.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
+            const toClean = [];
+            while (walker.nextNode()) {
+                const tn = walker.currentNode;
+                if (tn.nodeValue && tn.nodeValue.includes("\u200B")) {
+                    toClean.push(tn);
+                }
+            }
+            toClean.forEach((tn) => (tn.nodeValue = tn.nodeValue?.replaceAll("\u200B", "") || ""));
+            currentValue = clone.innerHTML;
+        }
+        else {
+            currentValue = currentValue.replaceAll("\u200B", "");
+        }
+        return currentValue;
+    };
+    useEffect(() => {
+        if (compareView || context.mode === "preview")
+            return;
+        const queueElementValue = (element, fromUserInput = false) => {
+            if (contextRef.current?.mode !== "suggestions" &&
+                context.mode !== "suggestions") {
+                return;
+            }
+            if (isUpdatingRef.current)
+                return;
+            if (!element?.isContentEditable)
+                return;
+            const fieldId = element.getAttribute("data-fieldid");
+            const fieldName = element.getAttribute("data-fieldname");
+            const itemId = element.getAttribute("data-itemid");
+            const language = element.getAttribute("data-language");
+            const versionText = element.getAttribute("data-version");
+            const version = versionText ? parseInt(versionText) : undefined;
+            if (!fieldId || !itemId || !language || !version)
+                return;
+            queueInlineFieldValue({
+                value: sanitizeEditableValue(element, element.getAttribute("data-is-richtext") === "true"),
+                fieldId,
+                fieldName,
+                itemId,
+                language,
+                version,
+                sourceElement: element,
+                fromUserInput,
+            });
+        };
+        const getFieldElement = (target) => {
+            const element = target instanceof Element ? target : target?.parentElement;
+            return element?.closest?.("[data-fieldid][data-itemid][data-language][data-version]");
+        };
+        const inputHandler = (event) => {
+            queueElementValue(getFieldElement(event.target), true);
+        };
+        let detachDocumentInput = null;
+        const attachToCurrentIframeDocument = () => {
+            detachDocumentInput?.();
+            const iframeDocument = getAccessibleIframeDocument(pageViewContext.editorIframe);
+            if (!iframeDocument) {
+                detachDocumentInput = null;
+                return;
+            }
+            iframeDocument.addEventListener("input", inputHandler, true);
+            const observer = new MutationObserver((mutations) => {
+                const queuedElements = new Set();
+                for (const mutation of mutations) {
+                    const fieldElement = getFieldElement(mutation.target);
+                    if (fieldElement)
+                        queuedElements.add(fieldElement);
+                    mutation.addedNodes.forEach((node) => {
+                        const addedFieldElement = getFieldElement(node);
+                        if (addedFieldElement)
+                            queuedElements.add(addedFieldElement);
+                    });
+                }
+                queuedElements.forEach((element) => queueElementValue(element));
+            });
+            observer.observe(iframeDocument.body || iframeDocument.documentElement, {
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+            const pollFocusedField = () => {
+                if (contextRef.current?.mode !== "suggestions" &&
+                    context.mode !== "suggestions") {
+                    return;
+                }
+                const activeField = iframeDocument.activeElement?.closest?.("[data-fieldid][data-itemid][data-language][data-version]");
+                if (activeField) {
+                    queueElementValue(activeField, true);
+                    return;
+                }
+                const selection = iframeDocument.defaultView?.getSelection();
+                const selectionElement = selection?.anchorNode instanceof Element
+                    ? selection.anchorNode
+                    : selection?.anchorNode?.parentElement;
+                const selectedField = selectionElement?.closest?.("[data-fieldid][data-itemid][data-language][data-version]");
+                if (selectedField) {
+                    queueElementValue(selectedField, true);
+                    return;
+                }
+                iframeDocument
+                    .querySelectorAll('[contenteditable="true"][data-fieldid][data-itemid][data-language][data-version]')
+                    .forEach((fieldElement) => queueElementValue(fieldElement, true));
+            };
+            const pollIntervalId = iframeDocument.defaultView?.setInterval(pollFocusedField, 250);
+            detachDocumentInput = () => {
+                iframeDocument.removeEventListener("input", inputHandler, true);
+                observer.disconnect();
+                if (pollIntervalId !== undefined) {
+                    iframeDocument.defaultView?.clearInterval(pollIntervalId);
+                }
+            };
+        };
+        attachToCurrentIframeDocument();
+        pageViewContext.editorIframe?.addEventListener("load", attachToCurrentIframeDocument);
+        return () => {
+            pageViewContext.editorIframe?.removeEventListener("load", attachToCurrentIframeDocument);
+            detachDocumentInput?.();
+        };
+    }, [compareView, context.mode, pageViewContext.editorIframe]);
     useEffect(() => {
         if (!context || compareView || context.mode === "preview")
             return;
-        const element = modifiedFieldsContext?.inlineEditingFieldElement;
-        const editableElements = getAccessibleIframeDocument(pageViewContext.editorIframe)?.querySelectorAll('[contenteditable="true"]');
-        editableElements?.forEach((element) => {
-            if (element !== modifiedFieldsContext?.inlineEditingFieldElement)
-                element.setAttribute("contenteditable", "false");
-        });
+        const iframeDocument = getAccessibleIframeDocument(pageViewContext.editorIframe);
+        let element = modifiedFieldsContext?.inlineEditingFieldElement;
+        if (!element && context.mode === "suggestions" && iframeDocument) {
+            const iframeHasFocus = pageViewContext.editorIframe?.ownerDocument.activeElement ===
+                pageViewContext.editorIframe || iframeDocument.hasFocus() === true;
+            if (iframeHasFocus) {
+                const activeFieldElement = iframeDocument.activeElement?.closest?.("[data-fieldid][data-itemid][data-language][data-version]") ?? null;
+                const selection = getAccessibleIframeSelection(pageViewContext.editorIframe);
+                const selectionElement = selection?.anchorNode instanceof Element
+                    ? selection.anchorNode
+                    : selection?.anchorNode?.parentElement;
+                const selectedFieldElement = selectionElement?.closest?.("[data-fieldid][data-itemid][data-language][data-version]") ?? null;
+                const recoveredElement = (activeFieldElement ??
+                    selectedFieldElement);
+                if (recoveredElement?.isConnected) {
+                    element = recoveredElement;
+                    modifiedFieldsContext?.setInlineEditingFieldElement(recoveredElement);
+                }
+            }
+        }
+        const editableElements = iframeDocument?.querySelectorAll('[contenteditable="true"]');
         if (element) {
-            lastQueuedInlineValueRef.current = null;
+            editableElements?.forEach((editableElement) => {
+                if (editableElement !== element) {
+                    editableElement.setAttribute("contenteditable", "false");
+                }
+            });
+        }
+        if (element) {
+            lastQueuedInlineValueRef.current.clear();
             // Clean up any existing cursor indicators
             const iframeDocument = getAccessibleIframeDocument(pageViewContext.editorIframe);
             const existingCursors = iframeDocument?.querySelectorAll('[data-cursor-indicator="true"]');
@@ -267,29 +821,7 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                 return;
             element.setAttribute("contenteditable", "true");
             const iframeWindow = pageViewContext.editorIframe?.contentWindow;
-            const sanitizeCurrentValue = () => {
-                let currentValue = isRichText ? element.innerHTML : element.innerText;
-                if (isRichText) {
-                    const clone = element.cloneNode(true);
-                    const cursorElem = clone.querySelector(`#${cursorSpanId}`);
-                    if (cursorElem)
-                        cursorElem.parentNode?.removeChild(cursorElem);
-                    const ownerDoc = clone.ownerDocument || document;
-                    const walker = ownerDoc.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
-                    const toClean = [];
-                    while (walker.nextNode()) {
-                        const tn = walker.currentNode;
-                        if (tn.nodeValue && tn.nodeValue.includes("\u200B"))
-                            toClean.push(tn);
-                    }
-                    toClean.forEach((tn) => (tn.nodeValue = tn.nodeValue?.replaceAll("\u200B", "") || ""));
-                    currentValue = clone.innerHTML;
-                }
-                else {
-                    currentValue = currentValue.replaceAll("\u200B", "");
-                }
-                return currentValue;
-            };
+            const sanitizeCurrentValue = () => sanitizeEditableValue(element, isRichText);
             const inputHandler = () => {
                 const currentValue = sanitizeCurrentValue();
                 queueInlineFieldValue({
@@ -300,6 +832,8 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                     language,
                     version,
                     sourceElement: element,
+                    fromUserInput: true,
+                    source: "input",
                 });
             };
             element.addEventListener("input", inputHandler);
@@ -347,6 +881,7 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                         language,
                         version,
                         sourceElement: element,
+                        source: "mutation",
                     });
                 }
                 // Always update cursor position after any mutation,
@@ -356,7 +891,7 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                 //   //   updateCompletion();
                 // }
             });
-            setTimeout(() => {
+            const focusIfNeeded = () => {
                 // Only focus if no other important element has focus (like the AI dialog)
                 const activeEl = document.activeElement;
                 const isInDialog = activeEl?.closest(".agent-inline-dialog") ||
@@ -366,7 +901,9 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                 if (!isInDialog && !alreadyFocused) {
                     focusInlineElement(element);
                 }
-            }, 50);
+            };
+            focusIfNeeded();
+            setTimeout(focusIfNeeded, 50);
             // Initial cursor placement
             // setTimeout(updateCursorSpan, 10);
             // Add listener for selection changes
@@ -517,7 +1054,7 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                 cursorElement.parentNode?.removeChild(cursorElement);
             }
         };
-    }, [modifiedFieldsContext?.inlineEditingFieldElement]);
+    }, [context.mode, modifiedFieldsContext?.inlineEditingFieldElement]);
     function saveCaretPosition(editableElement) {
         const selection = getAccessibleIframeSelection(pageViewContext.editorIframe);
         if (!selection ||
@@ -691,19 +1228,8 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                 // Do not update if this field is currently being edited inline.
                 // In suggestions mode we show suggested text in all fields, but must NOT overwrite
                 // the focused field while the user is actively typing - that resets the cursor.
-                // We detect active typing by checking if the field is both the inlineEditingFieldElement
-                // AND the iframe's activeElement (when the user clicks mode-switch buttons, focus moves
-                // to the parent frame so the iframe field is no longer activeElement).
-                const iframeDoc = getAccessibleIframeDocument(pageViewContext.editorIframe);
-                const isFieldActiveInIframe = isElementActiveOrSelectedInIframe(iframeDoc, fieldElement);
-                if (isFieldActiveInIframe) {
-                    return;
-                }
-                if (isSameFieldKey(fieldElement, activeFieldKey)) {
-                    if (context.mode !== "suggestions") {
-                        return;
-                    }
-                }
+                // Treat stale iframe activeElement state as inactive once focus has left
+                // the iframe, otherwise persisted suggestions can overwrite active typing.
                 const fieldId = fieldElement.getAttribute("data-fieldid");
                 const itemId = fieldElement.getAttribute("data-itemid");
                 const language = fieldElement.getAttribute("data-language");
@@ -711,14 +1237,23 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
                 if (!fieldId || !itemId || !language || !versionStr)
                     return;
                 const version = parseInt(versionStr, 10);
-                // Skip if this field currently has local modifications to avoid stomping fresh edits.
-                // In suggestions mode, don't skip - we need to re-apply the merged suggestion after
-                // unfocus. The cursor-jump protection above (isFieldActiveInIframe) prevents overwrites
-                // while the user is actively typing.
                 const isModifiedNow = modifiedFieldsContext?.modifiedFields?.some((m) => m.fieldId === fieldId &&
                     m.item.id === itemId &&
                     m.item.language === language &&
                     m.item.version === version);
+                const iframeDoc = getAccessibleIframeDocument(pageViewContext.editorIframe);
+                const isFieldBeingEdited = isInlineFieldBeingEdited(iframeDoc, fieldElement);
+                if (isFieldBeingEdited) {
+                    return;
+                }
+                if (isSameFieldKey(fieldElement, activeFieldKey)) {
+                    if (context.mode !== "suggestions") {
+                        return;
+                    }
+                }
+                // Skip if this field currently has local modifications to avoid stomping fresh edits.
+                // In suggestions mode, don't skip after the edit has been persisted - we need to
+                // re-apply the merged suggestion even if the iframe still reports the field as active.
                 if (isModifiedNow && context.mode !== "suggestions") {
                     return;
                 }
@@ -932,6 +1467,114 @@ function InlineEditorContent({ pageViewContext, compareView, context, }) {
             }
         });
     }, [context.mode, context.showSuggestedEdits, context.suggestedEdits]);
-    return null;
+    useEffect(() => {
+        if (compareView || context.mode === "preview") {
+            hideInlineFormatOverlay();
+            return;
+        }
+        const iframe = pageViewContext.editorIframe;
+        if (!iframe) {
+            hideInlineFormatOverlay();
+            return;
+        }
+        let detachDocumentListeners = null;
+        const attachToCurrentIframeDocument = () => {
+            detachDocumentListeners?.();
+            const iframeDocument = getAccessibleIframeDocument(iframe);
+            if (!iframeDocument) {
+                detachDocumentListeners = null;
+                hideInlineFormatOverlay();
+                return;
+            }
+            let animationFrame = 0;
+            const scheduleUpdate = () => {
+                window.cancelAnimationFrame(animationFrame);
+                animationFrame = window.requestAnimationFrame(updateInlineFormatOverlay);
+            };
+            const handlePointerDown = () => {
+                inlineFormatPointerDownRef.current = true;
+                hideInlineFormatOverlay();
+            };
+            const handlePointerUp = () => {
+                inlineFormatPointerDownRef.current = false;
+                scheduleUpdate();
+            };
+            iframeDocument.addEventListener("selectionchange", scheduleUpdate);
+            iframeDocument.addEventListener("pointerdown", handlePointerDown);
+            iframeDocument.addEventListener("pointerup", handlePointerUp);
+            iframeDocument.addEventListener("mouseup", scheduleUpdate);
+            iframeDocument.addEventListener("keyup", scheduleUpdate);
+            iframe.contentWindow?.addEventListener("scroll", scheduleUpdate, true);
+            window.addEventListener("scroll", scheduleUpdate, true);
+            window.addEventListener("resize", scheduleUpdate);
+            scheduleUpdate();
+            detachDocumentListeners = () => {
+                window.cancelAnimationFrame(animationFrame);
+                iframeDocument.removeEventListener("selectionchange", scheduleUpdate);
+                iframeDocument.removeEventListener("pointerdown", handlePointerDown);
+                iframeDocument.removeEventListener("pointerup", handlePointerUp);
+                iframeDocument.removeEventListener("mouseup", scheduleUpdate);
+                iframeDocument.removeEventListener("keyup", scheduleUpdate);
+                iframe.contentWindow?.removeEventListener("scroll", scheduleUpdate, true);
+                window.removeEventListener("scroll", scheduleUpdate, true);
+                window.removeEventListener("resize", scheduleUpdate);
+            };
+        };
+        attachToCurrentIframeDocument();
+        iframe.addEventListener("load", attachToCurrentIframeDocument);
+        return () => {
+            iframe.removeEventListener("load", attachToCurrentIframeDocument);
+            detachDocumentListeners?.();
+        };
+    }, [compareView, context.mode, pageViewContext.editorIframe]);
+    useEffect(() => {
+        const animationFrame = window.requestAnimationFrame(updateInlineFormatOverlay);
+        return () => window.cancelAnimationFrame(animationFrame);
+    }, [
+        context.selectedRange?.fieldId,
+        context.selectedRange?.itemId,
+        context.selectedRange?.language,
+        context.selectedRange?.version,
+        context.selectedRange?.startOffset,
+        context.selectedRange?.endOffset,
+        context.selectedRange?.text,
+    ]);
+    useEffect(() => {
+        if (!inlineFormatOverlay.visible)
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (target &&
+                (inlineFormatOverlayRef.current?.contains(target) ||
+                    target === pageViewContext.editorIframe)) {
+                return;
+            }
+            hideInlineFormatOverlay();
+        };
+        window.addEventListener("pointerdown", handlePointerDown, true);
+        return () => {
+            window.removeEventListener("pointerdown", handlePointerDown, true);
+        };
+    }, [inlineFormatOverlay.visible, pageViewContext.editorIframe]);
+    const visibleInlineFormatCommands = inlineFormatSelectionRef.current
+        ? (inlineFormatCommandsCacheRef.current.get(getInlineFieldKey(inlineFormatSelectionRef.current.fieldElement)) ?? [])
+        : [];
+    if (!inlineFormatOverlay.visible ||
+        visibleInlineFormatCommands.length === 0) {
+        return null;
+    }
+    const overlay = (_jsx("div", { ref: inlineFormatOverlayRef, className: "border-border-default bg-neutral-grey-5 fixed z-[1000] flex h-8 items-center gap-0.5 rounded-md border px-0.5 py-px shadow-lg", style: {
+            left: inlineFormatOverlay.left,
+            top: inlineFormatOverlay.top,
+        }, onMouseDown: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        }, children: visibleInlineFormatCommands.map((item) => {
+            const isActive = inlineFormatOverlay.activeCommandIds.includes(item.id);
+            return (_jsx("button", { type: "button", className: `inline-flex h-7 w-7 items-center justify-center rounded-sm p-0 text-[13px] leading-none font-semibold focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-blue-600 ${isActive
+                    ? "text-neutral-grey-100 bg-white"
+                    : "bg-neutral-grey-5 text-neutral-grey-100 hover:bg-neutral-grey-10"}`, title: item.label, "aria-label": item.label, "aria-pressed": isActive, onMouseDown: (event) => void applyInlineFormatCommand(item, event), children: _jsx("span", { "aria-hidden": "true", className: "inline-flex translate-y-px items-center justify-center leading-none", children: item.icon ?? item.label }) }, item.id));
+        }) }));
+    return createPortal(overlay, document.body);
 }
 //# sourceMappingURL=InlineEditor.js.map