@alpaca-editor/core 1.0.3831 → 1.0.3833

package/src/editor/page-editor-chrome/InlineEditor.tsx

@@ -9,6 +9,9 @@ import { getFieldDescriptorFromElement, hasFieldLock } from "../utils";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { applyPatch, diffWords } from "diff";
 import { createPatch } from "diff";
+// import { useDebouncedCallback } from "use-debounce";
+// import { executePrompt } from "../services/aiService";
+import { useInlineAiCompletion } from "./useInlineAICompletion";
 
 export function InlineEditor({
   pageViewContext,
@@ -20,10 +23,20 @@ export function InlineEditor({
   const context = useEditContext();
   const contextRef = useEditContextRef();
   const modifiedFieldsContext = useModifiedFieldsContext();
-
+  const [cursorSpanId] = useState(
+    () => `cursor-indicator-${Math.random().toString(36).substring(2, 9)}`,
+  );
+  const isUpdatingRef = useRef(false);
   if (!context) return;
 
   const mutationObserverRef = useRef<MutationObserver | null>(null);
+  const selectionChangeListenerRef = useRef<() => void | null>(null);
+
+  const refreshCompletion = useInlineAiCompletion({
+    pageViewContext,
+    cursorSpanId,
+    isUpdatingRef,
+  });
 
   const isTextFieldType = (fieldType: string) => {
     const fieldTypeLower = fieldType.toLowerCase();
@@ -36,6 +49,31 @@ export function InlineEditor({
 
   const debouncedSetFieldvalue = useThrottledCallback(
     (value, fieldId, fieldName, itemId, language, version) => {
+      // Don't include our cursor indicator in the saved value
+      const iframeDocument =
+        pageViewContext.editorIframeRef.current?.contentWindow?.document;
+      const element = context.inlineEditingFieldElement;
+      const isRichText = element?.getAttribute("data-is-richtext") === "true";
+
+      // Clone element to avoid modifying the original
+      if (element && iframeDocument) {
+        const clone = element.cloneNode(true) as HTMLElement;
+        const cursorElem = clone.querySelector(`#${cursorSpanId}`);
+        if (cursorElem) {
+          cursorElem.parentNode?.removeChild(cursorElem);
+        }
+
+        // Remove any zero-width spaces we might have added
+        const textNodes = Array.from(clone.childNodes).filter(
+          (node) =>
+            node.nodeType === Node.TEXT_NODE && node.textContent === "\u200B",
+        );
+        textNodes.forEach((node) => node.parentNode?.removeChild(node));
+
+        value = isRichText ? clone.innerHTML : clone.innerText;
+        console.log("value", value);
+      }
+
       var modifiedFieldValue = modifiedFieldsContext?.modifiedFields.find(
         (x) =>
           x.fieldId === fieldId &&
@@ -78,6 +116,14 @@ export function InlineEditor({
     });
 
     if (element) {
+      // Clean up any existing cursor indicators
+      const iframeDocument =
+        pageViewContext.editorIframeRef.current?.contentWindow?.document;
+      const existingCursors = iframeDocument?.querySelectorAll(
+        '[data-cursor-indicator="true"]',
+      );
+      existingCursors?.forEach((el) => el.parentNode?.removeChild(el));
+
       const fieldId = element.getAttribute("data-fieldid");
       const fieldName = element.getAttribute("data-fieldname");
       const itemId = element.getAttribute("data-itemid");
@@ -98,28 +144,128 @@ export function InlineEditor({
 
       element.setAttribute("contenteditable", "true");
 
-      mutationObserverRef.current = new MutationObserver(() => {
-        debouncedSetFieldvalue(
-          isRichText ? element.innerHTML : element.innerText,
-          fieldId,
-          fieldName,
-          itemId,
-          language,
-          version,
-        );
-        // getCompletionDebounced();
+      const iframeWindow =
+        pageViewContext.editorIframeRef.current?.contentWindow;
+
+      // Setup a more robust mutation observer
+      mutationObserverRef.current = new MutationObserver((mutations) => {
+        // If we're already processing an update, don't trigger another one
+
+        if (isUpdatingRef.current) return;
+
+        // Check if mutations only affect our cursor span
+        const hasRealChanges = mutations.some((mutation) => {
+          // Skip our cursor span
+          if (
+            mutation.target.nodeType === Node.ELEMENT_NODE &&
+            (mutation.target as Element).id === cursorSpanId
+          ) {
+            console.log("skipping cursor span");
+            return false;
+          }
+
+          // Skip mutations where target is our span
+          if (
+            mutation.target.nodeType === Node.ELEMENT_NODE &&
+            (mutation.target as Element).getAttribute &&
+            (mutation.target as Element).getAttribute(
+              "data-cursor-indicator",
+            ) === "true"
+          ) {
+            console.log("skipping cursor span 2");
+            return false;
+          }
+
+          // Skip if all added/removed nodes are just our cursor span
+          if (mutation.type === "childList") {
+            const nonCursorChanges = Array.from(mutation.addedNodes)
+              .concat(Array.from(mutation.removedNodes))
+              .filter((node) => {
+                return (
+                  node.nodeType !== Node.ELEMENT_NODE ||
+                  !(node as Element).id ||
+                  (node as Element).id !== cursorSpanId
+                );
+              });
+            return nonCursorChanges.length > 0;
+          }
+
+          return true;
+        });
+
+        if (hasRealChanges) {
+          debouncedSetFieldvalue(
+            isRichText ? element.innerHTML : element.innerText,
+            fieldId,
+            fieldName,
+            itemId,
+            language,
+            version,
+          );
+        }
+
+        // Always update cursor position after any mutation,
+        // but delay to let the mutation processing complete
+        // if (!isUpdatingRef.current) {
+        //   setTimeout(updateCursorSpan, 0);
+        //   //   updateCompletion();
+        // }
       });
 
       setTimeout(() => {
         element.focus();
       }, 50);
 
-      mutationObserverRef.current.observe(element, {
-        childList: true, // observe direct children changes
-        subtree: true, // observe all descendants changes
-        characterData: true, // observe text changes
-        //attributes: true, // observe attribute changes (like style or class)
-      });
+      // Initial cursor placement
+      // setTimeout(updateCursorSpan, 10);
+
+      // Add listener for selection changes
+      if (iframeWindow) {
+        const selectionChangeHandler = () => {
+          // Only update if we're not already updating
+          // if (!isUpdatingRef.current) {
+          //   setTimeout(updateCursorSpan, 0);
+          // }
+        };
+
+        iframeWindow.document.addEventListener(
+          "selectionchange",
+          selectionChangeHandler,
+        );
+        selectionChangeListenerRef.current = () => {
+          iframeWindow.document.removeEventListener(
+            "selectionchange",
+            selectionChangeHandler,
+          );
+        };
+
+        mutationObserverRef.current.observe(element, {
+          childList: true, // observe direct children changes
+          subtree: true, // observe all descendants changes
+          characterData: true, // observe text changes
+        });
+
+        // Cleanup
+        return () => {
+          if (mutationObserverRef.current) {
+            mutationObserverRef.current.disconnect();
+            mutationObserverRef.current = null;
+          }
+
+          if (selectionChangeListenerRef.current) {
+            selectionChangeListenerRef.current();
+            selectionChangeListenerRef.current = null;
+          }
+
+          // iframeWindow.document.removeEventListener("keydown", keyHandler);
+
+          // Clean up any cursor indicators on unmount
+          const cursorElement = iframeDocument?.getElementById(cursorSpanId);
+          if (cursorElement) {
+            cursorElement.parentNode?.removeChild(cursorElement);
+          }
+        };
+      }
     }
 
     async function updateFocusedFieldContent() {
@@ -222,6 +368,19 @@ export function InlineEditor({
         mutationObserverRef.current.disconnect();
         mutationObserverRef.current = null;
       }
+
+      if (selectionChangeListenerRef.current) {
+        selectionChangeListenerRef.current();
+        selectionChangeListenerRef.current = null;
+      }
+
+      // Clean up any cursor indicators on unmount
+      const iframeDocument =
+        pageViewContext.editorIframeRef.current?.contentWindow?.document;
+      const cursorElement = iframeDocument?.getElementById(cursorSpanId);
+      if (cursorElement) {
+        cursorElement.parentNode?.removeChild(cursorElement);
+      }
     };
   }, [context?.inlineEditingFieldElement]);
 
@@ -558,7 +717,7 @@ export function InlineEditor({
 
     allFieldEls.forEach(async (el) => {
       if (context.mode === "suggestions" || context.showSuggestedEdits) return;
-      // don’t stomp on the one that’s live‑editing
+      // don't stomp on the one that's live‑editing
       if (el === context.inlineEditingFieldElement) return;
 
       const fieldId = el.getAttribute("data-fieldid")!;