Function TextPatches

webapp/_webapp/src/components/text-patches.tsx:16–198

({ attachment, children }: TextPatchesProps)

// Attachment is actually the comparing candidate.
export function TextPatches({ attachment, children }: TextPatchesProps) {
  const { user } = useAuthStore();
  const { selectionRange, setSelectionRange } = useSelectionStore();
  const adapter = useAdapterOptional();
  const preRef = useRef<HTMLPreElement>(null);

  const [insertBtnText, setInsertBtnText] = useState("Insert");
  const [copyBtnText, setCopyBtnText] = useState("Copy");
  const [mappedNodes, setMappedNodes] = useState<React.ReactNode[]>([]);
  const [showDiff, setShowDiff] = useState(false);

  const copyText = useCallback(() => {
    if (preRef.current) {
      navigator.clipboard.writeText(preRef.current.innerText ?? "");
      setCopyBtnText("Copied!");
      setTimeout(() => {
        setCopyBtnText("Copy");
      }, 1500);
    }
  }, [preRef]);

  const applyText = useCallback(async () => {
    if (!preRef.current) return;

    const textToInsert = preRef.current.innerText;

    try {
      // Prefer adapter-based insertion if available
      if (adapter && adapter.isReady()) {
        await adapter.replaceSelection(textToInsert);
        setSelectionRange(null);
        setInsertBtnText("Applied!");
        setTimeout(() => {
          setInsertBtnText("Insert");
        }, 1500);
        return;
      }

      // Fallback to legacy Range-based insertion for Overleaf
      if (selectionRange) {
        const newText = document.createTextNode(textToInsert);
        selectionRange.deleteContents();
        selectionRange.insertNode(newText);
        setSelectionRange(null);
        setInsertBtnText("Applied!");
        setTimeout(() => {
          setInsertBtnText("Insert");
        }, 1500);
      }
    } catch (error) {
      console.error("Failed to apply text:", error);
      setInsertBtnText("Failed!");
      setTimeout(() => {
        setInsertBtnText("Insert");
      }, 1500);
    }
  }, [preRef, selectionRange, setSelectionRange, adapter]);