@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,765 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import {
-  useEditContext,
-  useModifiedFieldsContext,
-  useEditContextRef,
-} from "../client/editContext";
-import { useThrottledCallback } from "use-debounce";
-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,
-  compareView,
-}: {
-  pageViewContext: PageViewContext;
-  compareView: boolean;
-}) {
-  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();
-    return (
-      fieldTypeLower === "single-line text" ||
-      fieldTypeLower === "multi-line text" ||
-      fieldTypeLower === "rich text"
-    );
-  };
-
-  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;
-      }
-
-      const modifiedFieldValue = modifiedFieldsContext?.modifiedFields.find(
-        (x) =>
-          x.fieldId === fieldId &&
-          x.item.id === itemId &&
-          x.item.language === language &&
-          x.item.version === version,
-      )?.value;
-
-      if (modifiedFieldValue === value) return;
-
-      contextRef.current?.operations.editField({
-        field: {
-          fieldId,
-          fieldName: fieldName ?? undefined,
-          item: {
-            id: itemId,
-            language,
-            version,
-          },
-        },
-        refresh: "none",
-        value: value,
-      });
-    },
-    context.configuration.debounceFieldEditsInterval,
-  );
-
-  useEffect(() => {
-    if (!context || compareView || context.mode === "preview") return;
-    const element = context.inlineEditingFieldElement;
-
-    const editableElements =
-      pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll(
-        '[contenteditable="true"]',
-      );
-
-    editableElements?.forEach((element) => {
-      if (element !== context.inlineEditingFieldElement)
-        element.setAttribute("contenteditable", "false");
-    });
-
-    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");
-      const language = element.getAttribute("data-language");
-      const versionText = element.getAttribute("data-version");
-      const version = versionText ? parseInt(versionText) : undefined;
-      const isRichText = element.getAttribute("data-is-richtext") === "true";
-
-      if (!fieldId || !itemId || !language || !version) return;
-
-      const fieldDescriptor = getFieldDescriptorFromElement(element);
-
-      const hasFielLock =
-        context.mode === "suggestions" ||
-        hasFieldLock(fieldDescriptor, context);
-
-      if (!hasFielLock) return;
-
-      element.setAttribute("contenteditable", "true");
-
-      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);
-
-      // 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() {
-      const element = context?.inlineEditingFieldElement;
-      if (!element) return;
-
-      const savedPosition = saveCaretPosition(element);
-
-      const start = savedPosition?.offset || 0;
-      let contentWasUpdated = false;
-
-      const fieldId = element.getAttribute("data-fieldid");
-      const itemId = element.getAttribute("data-itemid");
-      const language = element.getAttribute("data-language");
-      const versionStr = element.getAttribute("data-version");
-      if (!fieldId || !itemId || !language || !versionStr) return;
-
-      const version = parseInt(versionStr, 10);
-      const descriptor = { id: itemId, language, version };
-
-      // Retrieve the current field value from the repository.
-      const loadedItem = await context.itemsRepository.getItem(descriptor);
-      if (!loadedItem) return;
-      // Get the baseline value from the repository.
-      const repositoryField = loadedItem.fields.find(
-        (f: any) => f.id === fieldId,
-      );
-      let baseValue = repositoryField ? repositoryField.rawValue || "" : "";
-
-      // Override with the modified field value if it exists.
-      const modField = modifiedFieldsContext?.modifiedFields.find(
-        (mod: any) =>
-          mod.fieldId === fieldId &&
-          mod.item.id === itemId &&
-          mod.item.language === language &&
-          mod.item.version === version,
-      );
-      if (modField) {
-        baseValue = modField.value || "";
-      }
-
-      // If suggestions mode is active, merge all suggestions for this field.
-
-      if (context.mode === "suggestions") {
-        const fieldSuggestions = context.suggestedEdits.filter(
-          (s: any) =>
-            s.fieldId === fieldId &&
-            s.itemId === itemId &&
-            s.mainItemLanguage === language &&
-            s.mainItemVersion === version,
-        );
-        // Sort suggestions in chronological order (oldest first).
-        fieldSuggestions.sort(
-          (a: any, b: any) =>
-            new Date(a.created).getTime() - new Date(b.created).getTime(),
-        );
-
-        let mergedValue = baseValue;
-        for (const suggestion of fieldSuggestions) {
-          const patch = createPatch(
-            "field",
-            suggestion.oldValue,
-            suggestion.newValue,
-          );
-          const patchedCandidate = applyPatch(mergedValue, patch);
-          if (
-            patchedCandidate !== false &&
-            typeof patchedCandidate === "string"
-          ) {
-            mergedValue = patchedCandidate;
-          } else {
-            mergedValue = suggestion.newValue;
-          }
-        }
-        // Update focused field element with the merged plain text value.
-
-        element.innerHTML = mergedValue;
-        contentWasUpdated = true;
-      } else {
-        if (element.innerHTML !== baseValue) {
-          // If suggestions mode is off, update with the base value.
-          element.innerHTML = baseValue;
-          contentWasUpdated = true;
-        }
-      }
-
-      if (contentWasUpdated) {
-        setTimeout(() => {
-          restoreCaretPosition(element, start);
-        }, 0);
-      }
-    }
-
-    setTimeout(() => {
-      updateFocusedFieldContent();
-    }, 50);
-
-    return () => {
-      if (mutationObserverRef.current) {
-        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]);
-
-  function saveCaretPosition(
-    editableElement: HTMLElement,
-  ): { node: Node; offset: number } | null {
-    const selection =
-      pageViewContext.editorIframeRef.current?.contentWindow?.getSelection();
-    if (
-      !selection ||
-      selection.rangeCount === 0 ||
-      !editableElement.contains(selection.anchorNode)
-    ) {
-      return null;
-    }
-
-    // Get the current range
-    const range = selection.getRangeAt(0);
-    const startNode = range.startContainer;
-    const startOffset = range.startOffset;
-
-    // Calculate absolute position from the beginning of the element
-    let absoluteOffset = 0;
-
-    // Function to calculate text length before a node
-    function getTextLengthBefore(node: Node): number {
-      let length = 0;
-
-      // Process all nodes before this one in current parent
-      let currentNode = node.parentNode?.firstChild;
-      while (currentNode && currentNode !== node) {
-        length += currentNode.textContent?.length || 0;
-        currentNode = currentNode.nextSibling;
-      }
-
-      // If the node's parent isn't the editable element, add lengths from higher levels
-      if (
-        node.parentNode &&
-        node.parentNode !== editableElement &&
-        node.parentNode.parentNode
-      ) {
-        length += getTextLengthBefore(node.parentNode);
-      }
-
-      return length;
-    }
-
-    // If we're in a text node directly under the editable element
-    if (startNode.nodeType === Node.TEXT_NODE) {
-      absoluteOffset = getTextLengthBefore(startNode) + startOffset;
-    } else {
-      // Handle cases where selection is on an element node
-      absoluteOffset = getTextLengthBefore(startNode);
-    }
-
-    return { node: startNode, offset: absoluteOffset };
-  }
-
-  function restoreCaretPosition(element: HTMLElement, position: number) {
-    if (position === undefined || position === null) return;
-
-    const selection =
-      pageViewContext.editorIframeRef.current?.contentWindow?.getSelection();
-    if (!selection) return;
-
-    selection.removeAllRanges();
-
-    // Find the appropriate text node and offset
-    const currentNode = element.firstChild;
-    let currentPos = 0;
-
-    // Helper function to find the right node and position
-    function findNodeAtPosition(
-      node: Node | null,
-      targetPos: number,
-    ): { node: Node; offset: number } | null {
-      while (node) {
-        // Text node case
-        if (node.nodeType === Node.TEXT_NODE) {
-          const length = node.textContent?.length || 0;
-          if (currentPos + length >= targetPos) {
-            return { node, offset: targetPos - currentPos };
-          }
-          currentPos += length;
-        }
-        // Element node case - check its children
-        else if (node.nodeType === Node.ELEMENT_NODE && node.hasChildNodes()) {
-          const result = findNodeAtPosition(node.firstChild, targetPos);
-          if (result) return result;
-        }
-
-        node = node.nextSibling;
-      }
-      return null;
-    }
-
-    const result = findNodeAtPosition(currentNode, position);
-
-    // If we found a valid node, set the range
-    if (result) {
-      const range = new Range();
-      range.setStart(result.node, result.offset);
-      range.setEnd(result.node, result.offset);
-      selection.addRange(range);
-    } else if (element.firstChild) {
-      // Fallback to end of content if position is too large
-      const lastNode = element.lastChild;
-      if (lastNode && lastNode.nodeType === Node.TEXT_NODE) {
-        const range = new Range();
-        range.setStart(lastNode, lastNode.textContent?.length || 0);
-        range.setEnd(lastNode, lastNode.textContent?.length || 0);
-        selection.addRange(range);
-      }
-    }
-  }
-
-  useEffect(() => {
-    const updateFieldsWithSuggestions = async () => {
-      const iframeWindow =
-        pageViewContext.editorIframeRef.current?.contentWindow;
-      if (!iframeWindow) return;
-      const doc = iframeWindow.document;
-
-      // First, process modified fields directly (from updateFields functionality)
-      modifiedFieldsContext?.modifiedFields.forEach((field) => {
-        const elements = doc.querySelectorAll(
-          `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"`,
-        );
-
-        elements?.forEach(async (element) => {
-          if (element && element !== context?.inlineEditingFieldElement) {
-            const realField = await context.itemsRepository.getField(field);
-            const fieldType = realField?.type;
-
-            if (fieldType && isTextFieldType(fieldType)) {
-              element.innerHTML = field?.value ? (field.value as string) : "";
-            }
-          }
-        });
-      });
-
-      if (context.mode !== "suggestions" && !context.showSuggestedEdits) return;
-
-      // Now proceed with the original updateFieldsWithSuggestions logic
-      // Query all field elements by data attributes.
-      const allFieldElements = doc.querySelectorAll(
-        "[data-fieldid][data-itemid][data-language][data-version]",
-      );
-
-      const fieldItems = await context.itemsRepository.getItems(
-        Array.from(allFieldElements)
-          .map((element: Element) => {
-            const fieldId = element.getAttribute("data-fieldid");
-            return fieldId
-              ? {
-                  id: fieldId,
-                  language: "en",
-                  version: 0,
-                }
-              : null;
-          })
-          .filter(
-            (item): item is { id: string; language: string; version: number } =>
-              item !== null,
-          ),
-      );
-
-      const validFields = fieldItems.filter((item) => {
-        const typeField = item.fields.find((f: any) => f.name === "Type");
-        if (!typeField) return false;
-        const typeValue = typeField.value;
-        return typeValue && isTextFieldType(typeValue as string);
-      });
-
-      const validFieldElements = Array.from(allFieldElements).filter(
-        (element) =>
-          validFields.some(
-            (item) => element.getAttribute("data-fieldid") === item.id,
-          ),
-      );
-
-      validFields.forEach(async (item, index) => {
-        const fieldElement = validFieldElements[index];
-        if (!fieldElement) return;
-
-        // Do not update if this field is currently focused.
-        if (fieldElement === context.inlineEditingFieldElement) {
-          return;
-        }
-
-        const fieldId = fieldElement.getAttribute("data-fieldid");
-        const itemId = fieldElement.getAttribute("data-itemid");
-        const language = fieldElement.getAttribute("data-language");
-        const versionStr = fieldElement.getAttribute("data-version");
-        if (!fieldId || !itemId || !language || !versionStr) return;
-        const version = parseInt(versionStr, 10);
-
-        // Build an item descriptor.
-        const descriptor = { id: itemId, language, version };
-
-        // Fetch the current item from the repository.
-        const loadedItem = await context.itemsRepository.getItem(descriptor);
-        if (!loadedItem) return;
-
-        // Get the baseline from repository.
-        const repositoryField = loadedItem.fields.find(
-          (f: any) => f.id === fieldId,
-        );
-        let originalValue = repositoryField
-          ? repositoryField.rawValue || ""
-          : "";
-
-        // If the field is modified locally, use that value.
-        const modField = modifiedFieldsContext?.modifiedFields.find(
-          (mod: any) =>
-            mod.fieldId === fieldId &&
-            mod.item.id === itemId &&
-            mod.item.language === language &&
-            mod.item.version === version,
-        );
-        if (modField) {
-          originalValue = modField.value || "";
-        }
-
-        // If showSuggestedEdits is false, update with the base value.
-        if (!context.showSuggestedEdits && context.mode !== "suggestions") {
-          fieldElement.innerHTML = originalValue;
-
-          return;
-        }
-
-        // Otherwise, gather all suggestions for this field.
-        const fieldSuggestions = context.suggestedEdits.filter(
-          (s: any) =>
-            s.status === "Pending" &&
-            s.fieldId === fieldId &&
-            s.itemId === itemId &&
-            s.mainItemLanguage === language &&
-            s.mainItemId === pageViewContext.pageItemDescriptor?.id &&
-            s.mainItemVersion === version,
-        );
-
-        if (!fieldSuggestions.length) return;
-
-        // Sort suggestions in chronological order (oldest first).
-        fieldSuggestions.sort(
-          (a: any, b: any) =>
-            new Date(a.created).getTime() - new Date(b.created).getTime(),
-        );
-
-        // Apply suggestions sequentially to generate the merged value.
-        let mergedValue = originalValue;
-        let couldApplyPatch = true;
-
-        for (const suggestion of fieldSuggestions) {
-          // Compute a patch from the suggestion's baseline to its intended new value.
-          const patch = createPatch(
-            "field",
-            suggestion.oldValue,
-            suggestion.newValue,
-          );
-
-          const patchedCandidate = applyPatch(mergedValue, patch);
-
-          if (
-            patchedCandidate !== false &&
-            typeof patchedCandidate === "string"
-          ) {
-            mergedValue = patchedCandidate;
-          } else {
-            couldApplyPatch = false;
-          }
-        }
-
-        if (!couldApplyPatch)
-          mergedValue = fieldSuggestions[0]?.newValue || originalValue;
-
-        // If showSuggestedEditsDiff is false, show only the merged text
-        if (!context.showSuggestedEditsDiff) {
-          fieldElement.innerHTML = mergedValue;
-          return;
-        }
-
-        // Compute a word-based diff between originalValue and mergedValue.
-        const diffParts = diffWords(originalValue, mergedValue);
-
-        // Build HTML markup from the diff:
-        let diffHTML = "";
-        diffParts.forEach((part: any) => {
-          let style = "";
-          if (part.added) {
-            style = "color: green;";
-          } else if (part.removed) {
-            style = "color: red; text-decoration: line-through;";
-          } else {
-            style = "color: gray;";
-          }
-          // Escape any HTML in part.value if needed.
-          diffHTML += `<span style="${style}">${part.value}</span>`;
-        });
-
-        // Update the element's innerHTML with the diff markup.
-        fieldElement.innerHTML = diffHTML;
-      });
-    };
-
-    updateFieldsWithSuggestions();
-  }, [
-    context.mode,
-    modifiedFieldsContext?.modifiedFields,
-    context?.itemsRepository.revision,
-    context?.inlineEditingFieldElement,
-    context?.showSuggestedEdits,
-    context?.suggestedEdits,
-    pageViewContext.pageItemDescriptor,
-    context.pageView.page,
-    context.showSuggestedEditsDiff,
-    context.showSuggestedEdits,
-  ]);
-
-  useEffect(() => {
-    if (!context || compareView || context.mode === "preview") return;
-
-    const iframeDoc =
-      pageViewContext.editorIframeRef.current?.contentWindow?.document;
-    if (!iframeDoc) return;
-
-    // Query all field elements
-    const allFieldEls = Array.from(
-      iframeDoc.querySelectorAll<HTMLElement>(
-        "[data-fieldid][data-itemid][data-language][data-version]",
-      ),
-    );
-
-    allFieldEls.forEach(async (el) => {
-      if (context.mode === "suggestions" || context.showSuggestedEdits) return;
-      // don't stomp on the one that's live‑editing
-      if (el === context.inlineEditingFieldElement) return;
-
-      const fieldId = el.getAttribute("data-fieldid")!;
-
-      const realField = await context.itemsRepository.getItem({
-        id: fieldId,
-        language: "en",
-        version: 0,
-      });
-      const fieldType = realField?.fields.find((f) => f.name === "Type")?.value;
-
-      if (!fieldType || !isTextFieldType(fieldType as string)) {
-        return;
-      }
-
-      const itemId = el.getAttribute("data-itemid")!;
-      const language = el.getAttribute("data-language")!;
-      const version = parseInt(el.getAttribute("data-version")!, 10);
-
-      // lookup baseline
-      const loaded = await context.itemsRepository.getItem({
-        id: itemId,
-        language,
-        version,
-      });
-      const repoF = loaded?.fields.find((f) => f.id === fieldId);
-      let value = repoF?.rawValue ?? "";
-
-      // override with any local edit
-      const mod = modifiedFieldsContext?.modifiedFields.find(
-        (m) =>
-          m.fieldId === fieldId &&
-          m.item.id === itemId &&
-          m.item.language === language &&
-          m.item.version === version,
-      );
-
-      if (mod) value = mod.value as string;
-
-      // write it in
-      el.innerHTML = value;
-    });
-  }, [context.mode, context.showSuggestedEdits]);
-
-  return null;
-}