@parhelia/core 0.1.12554 → 0.1.12556

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

@@ -1,29 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useCallback, useState, useMemo, useRef, } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { generatePageContext, getCachedContext, } from "../services/contextService";
-import { WandSparkles } from "lucide-react";
-import { createRoot } from "react-dom/client";
-import { LicenseFeatures, useFeature } from "../../licensing";
-function InlineCompletionHint({ hintText, isMobile, onAccept, positionStyle, }) {
-    return (_jsxs("div", { className: "shadow-[0_4px_14px_rgba(15,23,42,0.14),0_0_0_1px_rgba(15,23,42,0.06)]pointer-events-auto fixed z-95 inline-flex max-w-none cursor-pointer items-center gap-2 rounded-md border border-slate-400 bg-slate-100 px-2.5 py-2 text-xs leading-snug font-medium whitespace-nowrap text-slate-900", style: positionStyle, onClick: isMobile ? onAccept : undefined, role: isMobile ? "button" : undefined, children: [_jsx(WandSparkles, { className: "size-3.5 shrink-0 text-violet-600", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { children: hintText })] }));
-}
 export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatingRef, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
-    const canUseAi = useFeature(LicenseFeatures.AI);
     const [currentCompletion, setCurrentCompletion] = useState(null);
-    const [, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const abortControllerRef = useRef(null);
     const loadingAnimationRef = useRef(null);
-    const applyCompletionRef = useRef(null);
-    const hintReactRootRef = useRef(null);
     // Clean up hint element on unmount
     useEffect(() => {
         return () => {
-            hintReactRootRef.current?.unmount();
-            hintReactRootRef.current = null;
             const hintElement = document.getElementById(`${cursorSpanId}-hint`);
             if (hintElement) {
                 hintElement.remove();
@@ -35,7 +23,7 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
     }, [cursorSpanId]);
     const lastCaretPosRef = useRef(null);
     // Simple function to track caret position without inserting spans
-    const positionCursorSpan = useCallback(() => {
+    const positionCursorSpan = () => {
         if (isUpdatingRef.current)
             return;
         isUpdatingRef.current = true;
@@ -109,14 +97,55 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
                 isUpdatingRef.current = false;
             }, 10);
         }
-    }, [
-        pageViewContext.editorIframe?.contentWindow,
-        fieldsContext?.inlineEditingFieldElement,
-        cursorSpanId,
-        isUpdatingRef,
-    ]);
+    };
+    useEffect(() => {
+        // Handle keydown events - especially for cursor movement
+        const keyHandler = (e) => {
+            if (e.key === "ArrowLeft" ||
+                e.key === "ArrowRight" ||
+                e.key === "ArrowUp" ||
+                e.key === "ArrowDown" ||
+                e.key === " " ||
+                e.key === "Tab" ||
+                e.key === "End" ||
+                e.key === "Backspace" ||
+                e.key === "Delete" // Add Delete key handling
+            ) {
+                // Clear the completion when arrow keys are used
+                setCurrentCompletion(null);
+                clearCursorSpan();
+                // Let the browser handle the cursor movement/deletion
+                // Then update our cursor span after a small delay
+                setTimeout(() => {
+                    if (!isUpdatingRef.current) {
+                        positionCursorSpan();
+                    }
+                }, 10);
+                // Special handling for right arrow and delete which seems to have issues
+                if (e.key === "ArrowRight" || e.key === "Delete") {
+                    // Make sure the cursor span doesn't block the movement/deletion
+                    const cursorSpan = pageViewContext.editorIframe?.contentWindow?.document.getElementById(cursorSpanId);
+                    if (cursorSpan) {
+                        // Temporarily make it display none so it doesn't interfere with selection
+                        const originalDisplay = cursorSpan.style.display;
+                        cursorSpan.style.display = "none";
+                        // Restore after the browser has processed the movement/deletion
+                        setTimeout(() => {
+                            if (cursorSpan.parentNode) {
+                                cursorSpan.style.display = originalDisplay;
+                            }
+                        }, 0);
+                    }
+                }
+            }
+        };
+        pageViewContext.editorIframe?.contentWindow?.document.addEventListener("keydown", keyHandler);
+        return () => {
+            pageViewContext.editorIframe?.contentWindow?.document.removeEventListener("keydown", keyHandler);
+        };
+    }, [currentCompletion, pageViewContext.page]);
     // Extracts the text up to the cursor position in the editable element
-    const getContentUpToCursor = useCallback((element) => {
+    const getContentUpToCursor = (element) => {
         const iframeWindow = pageViewContext.editorIframe?.contentWindow;
         const selection = iframeWindow?.getSelection();
         if (!element || !selection || selection.rangeCount === 0)
@@ -139,17 +168,19 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             contentUpToCursor = tempRange.toString();
         }
         return contentUpToCursor;
-    }, [pageViewContext.editorIframe?.contentWindow]);
+    };
     // Loading animation with three dots changing color
-    const startLoadingAnimation = useCallback(() => {
+    const startLoadingAnimation = () => {
         const doc = pageViewContext.editorIframe?.contentWindow?.document;
         const span = doc?.getElementById(cursorSpanId);
         if (!doc || !span)
             return;
+        // Create dots container
         span.innerHTML = "";
         span.style.display = "inline-flex";
         span.style.gap = "4px";
         span.style.alignItems = "center";
+        // Create three dots
         for (let i = 0; i < 3; i++) {
             const dot = doc.createElement("span");
             dot.textContent = "•";
@@ -158,6 +189,7 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             dot.style.fontSize = "16px";
             span.appendChild(dot);
         }
+        // Animate dots
         let step = 0;
         const animate = () => {
             const dots = span.querySelectorAll("span");
@@ -171,6 +203,7 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             });
             step++;
             loadingAnimationRef.current = requestAnimationFrame(() => {
+                // Slow down animation by only updating every 15 frames (~250ms at 60fps)
                 if (step % 15 === 0) {
                     animate();
                 }
@@ -180,27 +213,34 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             });
         };
         animate();
-    }, [pageViewContext.editorIframe?.contentWindow?.document, cursorSpanId]);
-    const stopLoadingAnimation = useCallback(() => {
+    };
+    const stopLoadingAnimation = () => {
         if (loadingAnimationRef.current) {
             cancelAnimationFrame(loadingAnimationRef.current);
             loadingAnimationRef.current = null;
         }
-    }, []);
-    const getCompletion = useCallback(async (element, isManualTrigger = false) => {
+    };
+    const getCompletion = async (element, isManualTrigger = false) => {
         const contentUpToCursor = getContentUpToCursor(element);
         if (!contentUpToCursor?.trim())
             return null;
+        // Abort any in-flight request
         if (abortControllerRef.current) {
             abortControllerRef.current.abort();
         }
+        // Create a new abort controller for this request
         abortControllerRef.current = new AbortController();
+        const signal = abortControllerRef.current.signal;
+        // Get field attributes
         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 version = element.getAttribute("data-version");
         if (!fieldId || !itemId || !language || !version)
             return null;
+        // Only trigger completion after a space for automatic completions
+        // Manual triggers (Ctrl+Space) can work anywhere
         if (!isManualTrigger) {
             const lastChar = contentUpToCursor.slice(-1);
             if (lastChar !== " " && lastChar !== "\u00A0") {
@@ -209,6 +249,7 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
         }
         if (!editContext)
             return null;
+        // Get page context for better completions
         let pageContext = getCachedContext(editContext);
         if (!pageContext) {
             try {
@@ -216,20 +257,22 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             }
             catch (error) {
                 console.warn("Failed to generate page context:", error);
+                // Continue without context
             }
         }
         let contextString = "";
         if (pageContext) {
             contextString = `Page Name: ${pageContext.pageTitle} (${pageContext.pageType})\n PageSummary: ${pageContext.abstract}`;
         }
+        // Show loading indicator
         setIsLoading(true);
         startLoadingAnimation();
         try {
             const endpoint = `/parhelia/agent/GetTextCompletion`;
             const response = await fetch(endpoint, {
-                method: "POST",
+                method: 'POST',
                 headers: {
-                    "Content-Type": "application/x-www-form-urlencoded",
+                    'Content-Type': 'application/x-www-form-urlencoded',
                 },
                 body: new URLSearchParams({
                     textToComplete: contentUpToCursor,
@@ -240,22 +283,18 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             return data.completion || null;
         }
         catch (error) {
+            // Ignore AbortError as it's expected when cancelling
             if (error instanceof Error && error.name !== "AbortError") {
                 console.error("Error getting completion:", error);
             }
             return null;
         }
         finally {
+            // Hide loading indicator
             setIsLoading(false);
             stopLoadingAnimation();
         }
-    }, [
-        getContentUpToCursor,
-        editContext,
-        pageViewContext,
-        startLoadingAnimation,
-        stopLoadingAnimation,
-    ]);
+    };
     // Debounced AI call: recompute the sentence, call getCompletion, and extract only the "tail" for the ghost text
     const getCompletionDebounced = useDebouncedCallback(async (isManualTrigger = false) => {
         const el = fieldsContext?.inlineEditingFieldElement;
@@ -278,17 +317,50 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
         setCurrentCompletion(suggestion);
         updateCursorSpan(suggestion.substring(sentence.length));
     }, 250);
+    // Manual completion trigger (non-debounced for immediate response)
+    const getCompletionManual = async () => {
+        const el = fieldsContext?.inlineEditingFieldElement;
+        if (!el)
+            return;
+        // 1) Recompute the exact sentence at this moment
+        const full = getContentUpToCursor(el) || "";
+        const sentence = full.split(/[.?!]\s*/).pop() || "";
+        // 2) Ask AI for a completion
+        const rawSuggestion = await getCompletion(el, true);
+        if (!rawSuggestion) {
+            setCurrentCompletion(null);
+            clearCursorSpan();
+            return;
+        }
+        // 3) Strip off the already-typed sentence to leave just the "completion tail"
+        const suggestion = rawSuggestion.startsWith(sentence)
+            ? rawSuggestion
+            : sentence + rawSuggestion;
+        setCurrentCompletion(suggestion);
+        updateCursorSpan(suggestion.substring(sentence.length));
+    };
     // Inserts or clears the ghost text inside the cursor span
-    const updateCursorSpan = useCallback((text) => {
+    const updateCursorSpan = (text) => {
         const doc = pageViewContext.editorIframe?.contentWindow?.document;
         const span = doc?.getElementById(cursorSpanId);
         if (!doc || !span)
             return;
         // Update the completion text
         if (text) {
+            //   // Create a temporary span to measure the text width
+            //   const measureSpan = doc.createElement("span");
+            //   measureSpan.style.visibility = "hidden";
+            //   measureSpan.style.position = "absolute";
+            //   measureSpan.style.whiteSpace = "pre"; // Preserve whitespace
+            //   measureSpan.style.font = window.getComputedStyle(span).font; // Match the font
+            //   measureSpan.textContent = text;
+            //   doc.body.appendChild(measureSpan);
+            //   const textWidth = measureSpan.getBoundingClientRect().width;
+            //   measureSpan.remove();
             span.textContent = text;
             span.style.color = "#888";
             span.style.fontStyle = "italic";
+            //span.innerHTML = "hello";
             // Create or update hint element in the main document
             let hintElement = document.getElementById(`${cursorSpanId}-hint`);
             if (!hintElement) {
@@ -296,274 +368,70 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
                 hintElement.id = `${cursorSpanId}-hint`;
                 document.body.appendChild(hintElement);
             }
-            if (!hintReactRootRef.current) {
-                hintElement.replaceChildren();
-                hintReactRootRef.current = createRoot(hintElement);
-            }
-            const hintLabel = editContext?.isMobile
-                ? "Tap to accept"
-                : "Press Tab to accept ⇥";
-            const isMobile = editContext?.isMobile ?? false;
-            const iframeRect = pageViewContext.editorIframe?.getBoundingClientRect();
-            const spanRect = span.getBoundingClientRect();
-            let positionStyle = {
+            hintElement.textContent = "Press Tab to accept ⇥";
+            // Apply styles that match Tailwind's utility classes
+            Object.assign(hintElement.style, {
+                position: "fixed",
+                fontSize: "12px",
+                fontWeight: "normal",
+                color: "rgb(75, 85, 99)",
+                backgroundColor: "white",
+                padding: "0.5rem",
                 marginLeft: "0.25rem",
                 marginRight: "0.25rem",
-            };
+                borderRadius: "0.25rem",
+                border: "1px solid rgb(229, 231, 235)",
+                fontStyle: "normal",
+                display: "block",
+                lineHeight: "1.4",
+                zIndex: "95",
+                pointerEvents: "none",
+                boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+            });
+            // Position the hint element relative to the iframe and cursor span
+            const iframeRect = pageViewContext.editorIframe?.getBoundingClientRect();
+            const spanRect = span.getBoundingClientRect();
             if (iframeRect) {
-                if (isMobile) {
-                    const centerX = (spanRect.left + spanRect.right) / 2;
-                    const gap = 6;
-                    positionStyle = {
-                        ...positionStyle,
-                        left: centerX,
-                        top: spanRect.top - gap,
-                        transform: "translate(-50%, -100%)",
-                    };
+                // Create a range for the last character to get proper position
+                const textLength = span.textContent?.length || 0;
+                if (textLength > 0 && span.firstChild) {
+                    const range = doc.createRange();
+                    range.setStart(span.firstChild, Math.max(0, textLength - 1));
+                    range.setEnd(span.firstChild, textLength);
+                    const rangeRect = range.getBoundingClientRect();
+                    // Position at the end of the actual text
+                    const absoluteLeft = iframeRect.left + rangeRect.right;
+                    const absoluteTop = iframeRect.top + rangeRect.top;
+                    hintElement.style.left = `${absoluteLeft}px`;
+                    hintElement.style.top = `${absoluteTop}px`;
                 }
                 else {
-                    const textLength = span.textContent?.length || 0;
-                    let left;
-                    let top;
-                    if (textLength > 0 && span.firstChild) {
-                        const range = doc.createRange();
-                        range.setStart(span.firstChild, Math.max(0, textLength - 1));
-                        range.setEnd(span.firstChild, textLength);
-                        const rangeRect = range.getBoundingClientRect();
-                        left = iframeRect.left + rangeRect.right;
-                        top = iframeRect.top + rangeRect.top;
-                    }
-                    else {
-                        left = iframeRect.left + spanRect.right;
-                        top = iframeRect.top + spanRect.top;
-                    }
-                    positionStyle = {
-                        ...positionStyle,
-                        left,
-                        top,
-                        transform: undefined,
-                    };
+                    // Fallback to the old positioning if there's no text
+                    const absoluteLeft = iframeRect.left + spanRect.right;
+                    const absoluteTop = iframeRect.top + spanRect.top;
+                    hintElement.style.left = `${absoluteLeft}px`;
+                    hintElement.style.top = `${absoluteTop}px`;
                 }
             }
-            hintReactRootRef.current.render(_jsx(InlineCompletionHint, { hintText: hintLabel, isMobile: isMobile, onAccept: () => applyCompletionRef.current?.(), positionStyle: positionStyle }));
         }
         else {
             span.textContent = "";
             // Remove hint element if it exists
             const hintElement = document.getElementById(`${cursorSpanId}-hint`);
             if (hintElement) {
-                hintReactRootRef.current?.unmount();
-                hintReactRootRef.current = null;
                 hintElement.remove();
             }
         }
-    }, [pageViewContext.editorIframe, cursorSpanId, editContext?.isMobile]);
-    const clearCursorSpan = useCallback(() => {
+    };
+    const clearCursorSpan = () => {
         const doc = pageViewContext.editorIframe?.contentWindow?.document;
         if (!doc)
             return;
         // Clear the completion text
         updateCursorSpan("");
-    }, [pageViewContext.editorIframe?.contentWindow?.document, updateCursorSpan]);
-    // Handle keydown events for cursor movement (arrow keys, etc.)
-    useEffect(() => {
-        const keyHandler = (e) => {
-            if (e.key === "ArrowLeft" ||
-                e.key === "ArrowRight" ||
-                e.key === "ArrowUp" ||
-                e.key === "ArrowDown" ||
-                e.key === " " ||
-                e.key === "Tab" ||
-                e.key === "End" ||
-                e.key === "Backspace" ||
-                e.key === "Delete") {
-                setCurrentCompletion(null);
-                clearCursorSpan();
-                setTimeout(() => {
-                    if (!isUpdatingRef.current) {
-                        positionCursorSpan();
-                    }
-                }, 10);
-                if (e.key === "ArrowRight" || e.key === "Delete") {
-                    const cursorSpan = pageViewContext.editorIframe?.contentWindow?.document.getElementById(cursorSpanId);
-                    if (cursorSpan) {
-                        const originalDisplay = cursorSpan.style.display;
-                        cursorSpan.style.display = "none";
-                        setTimeout(() => {
-                            if (cursorSpan.parentNode) {
-                                cursorSpan.style.display = originalDisplay;
-                            }
-                        }, 0);
-                    }
-                }
-            }
-        };
-        const doc = pageViewContext.editorIframe?.contentWindow?.document;
-        if (!doc)
-            return;
-        doc.addEventListener("keydown", keyHandler);
-        return () => doc.removeEventListener("keydown", keyHandler);
-    }, [
-        clearCursorSpan,
-        cursorSpanId,
-        isUpdatingRef,
-        pageViewContext.editorIframe?.contentWindow?.document,
-        pageViewContext.page,
-        positionCursorSpan,
-    ]);
-    // Function to apply the completion (must be before handleInput)
-    const applyCompletion = useCallback(() => {
-        const iframeWindow = pageViewContext.editorIframe?.contentWindow;
-        const iframeDocument = iframeWindow?.document;
-        if (!iframeWindow ||
-            !iframeDocument ||
-            !fieldsContext?.inlineEditingFieldElement)
-            return;
-        const cursorSpan = iframeDocument.getElementById(cursorSpanId);
-        if (!cursorSpan)
-            return;
-        const completionToApply = cursorSpan.textContent || "";
-        if (!completionToApply)
-            return;
-        const element = fieldsContext.inlineEditingFieldElement;
-        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 versionStr = element.getAttribute("data-version");
-        const isRichText = element.getAttribute("data-is-richtext") === "true";
-        const version = versionStr ? parseInt(versionStr, 10) : undefined;
-        if (!fieldId || !itemId || !language || !version)
-            return;
-        const selection = iframeWindow.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        const range = selection.getRangeAt(0);
-        const tempRange = document.createRange();
-        tempRange.selectNodeContents(element);
-        tempRange.setEnd(range.startContainer, range.startOffset);
-        const textUpToCursor = tempRange.toString();
-        const wordBoundaryRegex = /[\s.,;:!?"'()[\]{}<>/|=+\-*&^%$#@~`](?=[^\s.,;:!?"'()[\]{}<>/|=+\-*&^%$#@~`]*$)/;
-        const match = textUpToCursor.match(wordBoundaryRegex);
-        const lastWordBoundaryIndex = match && match.index !== undefined ? match.index + 1 : 0;
-        const currentPartialWord = textUpToCursor
-            .substring(lastWordBoundaryIndex)
-            .trim();
-        const isOverlapping = currentPartialWord.length > 0 &&
-            completionToApply
-                .toLowerCase()
-                .startsWith(currentPartialWord.toLowerCase());
-        if (isOverlapping) {
-            const wordRange = document.createRange();
-            const startContainer = range.startContainer;
-            const startOffset = range.startOffset - currentPartialWord.length;
-            if (startOffset >= 0 && startContainer.nodeType === Node.TEXT_NODE) {
-                wordRange.setStart(startContainer, startOffset);
-                wordRange.setEnd(range.startContainer, range.startOffset);
-                wordRange.deleteContents();
-            }
-            else {
-                if (textUpToCursor.length > 0 && !textUpToCursor.endsWith(" ")) {
-                    const spaceNode = document.createTextNode(" ");
-                    range.insertNode(spaceNode);
-                    range.setStartAfter(spaceNode);
-                    range.setEndAfter(spaceNode);
-                }
-            }
-        }
-        else {
-            if (textUpToCursor.length > 0 &&
-                !textUpToCursor.endsWith(" ") &&
-                !textUpToCursor.endsWith("\n") &&
-                !/[.!?\-—:;({[\s]$/.test(textUpToCursor)) {
-                const spaceNode = document.createTextNode(" ");
-                range.insertNode(spaceNode);
-                range.setStartAfter(spaceNode);
-                range.setEndAfter(spaceNode);
-            }
-        }
-        const textNode = document.createTextNode(completionToApply);
-        range.insertNode(textNode);
-        range.setStartAfter(textNode);
-        range.setEndAfter(textNode);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        setCurrentCompletion(null);
-        clearCursorSpan();
-        setTimeout(() => {
-            let valueToSave;
-            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", "") || ""));
-                valueToSave = clone.innerHTML;
-            }
-            else {
-                valueToSave = (element.innerText || "").replaceAll("\u200B", "");
-            }
-            editContext?.operations.editField({
-                field: {
-                    fieldId,
-                    fieldName: fieldName ?? undefined,
-                    item: { id: itemId, language, version },
-                },
-                refresh: "none",
-                value: valueToSave,
-            });
-        }, 0);
-    }, [
-        pageViewContext.editorIframe?.contentWindow,
-        fieldsContext?.inlineEditingFieldElement,
-        cursorSpanId,
-        clearCursorSpan,
-        editContext?.operations,
-    ]);
-    applyCompletionRef.current = applyCompletion;
-    // Manual completion trigger (non-debounced)
-    const getCompletionManual = useCallback(async () => {
-        if (!canUseAi)
-            return;
-        const el = fieldsContext?.inlineEditingFieldElement;
-        if (!el)
-            return;
-        const full = getContentUpToCursor(el) || "";
-        const sentence = full.split(/[.?!]\s*/).pop() || "";
-        const rawSuggestion = await getCompletion(el, true);
-        if (!rawSuggestion) {
-            setCurrentCompletion(null);
-            clearCursorSpan();
-            return;
-        }
-        const suggestion = rawSuggestion.startsWith(sentence)
-            ? rawSuggestion
-            : sentence + rawSuggestion;
-        setCurrentCompletion(suggestion);
-        updateCursorSpan(suggestion.substring(sentence.length));
-    }, [
-        fieldsContext?.inlineEditingFieldElement,
-        canUseAi,
-        getContentUpToCursor,
-        getCompletion,
-        clearCursorSpan,
-        updateCursorSpan,
-    ]);
+    };
     // On every input: either reuse the existing suggestion or fire a new one
     const handleInput = useCallback((e) => {
-        if (!canUseAi) {
-            setCurrentCompletion(null);
-            clearCursorSpan();
-            return;
-        }
         const el = fieldsContext?.inlineEditingFieldElement;
         if (!el)
             return;
@@ -650,20 +518,13 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
         }
     }, [
         fieldsContext?.inlineEditingFieldElement,
-        getContentUpToCursor,
         currentCompletion,
-        canUseAi,
-        clearCursorSpan,
-        getCompletionManual,
-        pageViewContext.editorIframe?.contentWindow,
-        cursorSpanId,
-        applyCompletion,
-        updateCursorSpan,
         getCompletionDebounced,
+        getCompletionManual,
     ]);
     // Wire up the input listener
     useEffect(() => {
-        if (!canUseAi || !editContext?.enableCompletions)
+        if (!editContext?.enableCompletions)
             return;
         const el = fieldsContext?.inlineEditingFieldElement;
         if (!el)
@@ -673,12 +534,11 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
     }, [
         fieldsContext?.inlineEditingFieldElement,
         handleInput,
-        canUseAi,
         editContext?.enableCompletions,
     ]);
     // Add mouse click handler to update cursor span position
     useEffect(() => {
-        if (!canUseAi || !editContext?.enableCompletions)
+        if (!editContext?.enableCompletions)
             return;
         const el = fieldsContext?.inlineEditingFieldElement;
         if (!el)
@@ -697,11 +557,7 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
         return () => el.removeEventListener("mouseup", handleMouseUp);
     }, [
         fieldsContext?.inlineEditingFieldElement,
-        canUseAi,
         editContext?.enableCompletions,
-        isUpdatingRef,
-        positionCursorSpan,
-        clearCursorSpan,
     ]);
     // Clean up abort controller on unmount
     useEffect(() => {
@@ -716,13 +572,157 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             }
         };
     }, []);
+    // Function to apply the completion
+    const applyCompletion = () => {
+        // Get the cursor span to read the most up-to-date completion
+        const iframeWindow = pageViewContext.editorIframe?.contentWindow;
+        const iframeDocument = iframeWindow?.document;
+        if (!iframeWindow ||
+            !iframeDocument ||
+            !fieldsContext?.inlineEditingFieldElement)
+            return;
+        const cursorSpan = iframeDocument.getElementById(cursorSpanId);
+        if (!cursorSpan)
+            return;
+        // Get the completion text directly from the cursor span, which should be the most current
+        const completionToApply = cursorSpan.textContent || "";
+        if (!completionToApply)
+            return;
+        const element = fieldsContext?.inlineEditingFieldElement;
+        // Get field attributes for saving
+        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 versionStr = element.getAttribute("data-version");
+        const isRichText = element.getAttribute("data-is-richtext") === "true";
+        const version = versionStr ? parseInt(versionStr, 10) : undefined;
+        if (!fieldId || !itemId || !language || !version)
+            return;
+        // Get the current selection position
+        const selection = iframeWindow.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        // Get the text up to the cursor to analyze current word
+        const range = selection.getRangeAt(0);
+        const tempRange = document.createRange();
+        tempRange.selectNodeContents(element);
+        tempRange.setEnd(range.startContainer, range.startOffset);
+        const textUpToCursor = tempRange.toString();
+        // Get the current partial word by finding text from the last word boundary to cursor
+        // Look for last word boundary (space, punctuation, etc.)
+        const wordBoundaryRegex = /[\s.,;:!?"'()[\]{}<>\/\\|=+\-*&^%$#@~`](?=[^\s.,;:!?"'()[\]{}<>\/\\|=+\-*&^%$#@~`]*$)/;
+        const match = textUpToCursor.match(wordBoundaryRegex);
+        const lastWordBoundaryIndex = match && match.index !== undefined ? match.index + 1 : 0;
+        const currentPartialWord = textUpToCursor
+            .substring(lastWordBoundaryIndex)
+            .trim();
+        // Check if completion overlaps with current partial word
+        // (e.g., if user typed "int" and completion is "integer")
+        const isOverlapping = currentPartialWord.length > 0 &&
+            completionToApply
+                .toLowerCase()
+                .startsWith(currentPartialWord.toLowerCase());
+        console.log("Is overlapping:", isOverlapping);
+        // If there's overlap, we need to delete the current partial word
+        if (isOverlapping) {
+            // Create a range to select the current partial word
+            const wordRange = document.createRange();
+            // Position where the current word starts
+            let startContainer = range.startContainer;
+            let startOffset = range.startOffset - currentPartialWord.length;
+            // We need to handle the case where the word spans multiple text nodes
+            // For simplicity, we'll try to handle the common case first
+            if (startOffset >= 0 && startContainer.nodeType === Node.TEXT_NODE) {
+                // Simple case: word is in the same text node as cursor
+                wordRange.setStart(startContainer, startOffset);
+                wordRange.setEnd(range.startContainer, range.startOffset);
+                wordRange.deleteContents(); // Delete the partial word
+            }
+            else {
+                // Complex case: use a simpler approach - just insert, user can delete manually if needed
+                // This is a fallback for complex DOM structures
+                // Add a space if we're in the middle of a sentence
+                if (textUpToCursor.length > 0 && !textUpToCursor.endsWith(" ")) {
+                    const spaceNode = document.createTextNode(" ");
+                    range.insertNode(spaceNode);
+                    range.setStartAfter(spaceNode);
+                    range.setEndAfter(spaceNode);
+                }
+            }
+        }
+        else {
+            // Not overlapping, add a space if we're in the middle of text
+            // and not already at the beginning of text or after a space
+            if (textUpToCursor.length > 0 &&
+                !textUpToCursor.endsWith(" ") &&
+                // Don't add space at the start of a line or after punctuation that shouldn't have a space
+                !textUpToCursor.endsWith("\n") &&
+                !/[.!?\-—:;({[\s]$/.test(textUpToCursor)) {
+                const spaceNode = document.createTextNode(" ");
+                range.insertNode(spaceNode);
+                range.setStartAfter(spaceNode);
+                range.setEndAfter(spaceNode);
+            }
+        }
+        // Now insert the completion text
+        const textNode = document.createTextNode(isOverlapping
+            ? completionToApply // If overlapping, use the full completion
+            : completionToApply);
+        range.insertNode(textNode);
+        // Move the cursor after the inserted text
+        range.setStartAfter(textNode);
+        range.setEndAfter(textNode);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        setCurrentCompletion(null);
+        clearCursorSpan();
+        // Explicitly save the field value since the MutationObserver may miss this change
+        // when isUpdatingRef is true during cursor positioning
+        setTimeout(() => {
+            // Get the final value from the element (excluding cursor span content)
+            let valueToSave;
+            if (isRichText) {
+                const clone = element.cloneNode(true);
+                const cursorElem = clone.querySelector(`#${cursorSpanId}`);
+                if (cursorElem)
+                    cursorElem.parentNode?.removeChild(cursorElem);
+                // Clean up zero-width spaces
+                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", "") || ""));
+                valueToSave = clone.innerHTML;
+            }
+            else {
+                valueToSave = (element.innerText || "").replaceAll("\u200B", "");
+            }
+            // Call editField to save the value
+            editContext?.operations.editField({
+                field: {
+                    fieldId,
+                    fieldName: fieldName ?? undefined,
+                    item: {
+                        id: itemId,
+                        language,
+                        version,
+                    },
+                },
+                refresh: "none",
+                value: valueToSave,
+            });
+        }, 0);
+    };
     // Exposed manual trigger (if needed)
     return useMemo(() => () => {
         setCurrentCompletion(null);
         clearCursorSpan();
-        if (canUseAi) {
-            getCompletionManual();
-        }
-    }, [canUseAi, clearCursorSpan, getCompletionManual]);
+        getCompletionManual();
+    }, [getCompletionManual]);
 }
 //# sourceMappingURL=useInlineAICompletion.js.map