Fix native composer lag with revision-gated updates

apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorModule.swift

@@ -5,14 +5,8 @@ public class T3ComposerEditorModule: Module {
     Name("T3ComposerEditor")
 
     View(T3ComposerEditorView.self) {
-      Prop("value") { (view: T3ComposerEditorView, value: String) in
-        view.setValue(value)
-      }
-      Prop("tokensJson") { (view: T3ComposerEditorView, tokensJson: String) in
-        view.setTokensJson(tokensJson)
-      }
-      Prop("selectionJson") { (view: T3ComposerEditorView, selectionJson: String) in
-        view.setSelectionJson(selectionJson)
+      Prop("controlledDocumentJson") { (view: T3ComposerEditorView, documentJson: String) in
+        view.setControlledDocumentJson(documentJson)
       }
       Prop("themeJson") { (view: T3ComposerEditorView, themeJson: String) in
         view.setThemeJson(themeJson)

apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorView.swift

@@ -15,6 +15,14 @@ private struct ComposerSelectionPayload: Decodable {
   let end: Int
 }
 
+private struct ComposerControlledDocumentPayload: Decodable {
+  let value: String
+  let selection: ComposerSelectionPayload?
+  let tokensJson: String
+  let mostRecentEventCount: Int
+  let isNativeEcho: Bool
+}
+
 private struct ComposerThemePayload: Decodable {
   let text: String
   let placeholder: String
@@ -281,6 +289,7 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate {
   private var shouldAutoFocus = false
   private var didAutoFocus = false
   private var isApplyingControlledValue = false
+  private var nativeEventCount = 0
   private var lastContentSize = CGSize.zero
   private var iconImages: [String: UIImage] = [:]
   private var pendingIconUris = Set<String>()
@@ -350,32 +359,28 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate {
     }
   }
 
-  func setValue(_ value: String) {
-    self.value = value
-    applyControlledDocument(force: tokensNeedRebuild)
-    if tokensMatchCurrentValue() {
-      tokensNeedRebuild = false
+  func setControlledDocumentJson(_ documentJson: String) {
+    guard let document = decode(ComposerControlledDocumentPayload.self, from: documentJson),
+          document.mostRecentEventCount >= nativeEventCount else {
+      return
     }
-  }
-
-  func setTokensJson(_ tokensJson: String) {
-    guard self.tokensJson != tokensJson else {
+    if document.isNativeEcho && textView.serializedText() != document.value {
       return
     }
-    self.tokensJson = tokensJson
-    tokens = decode([ComposerTokenPayload].self, from: tokensJson) ?? []
-    tokensNeedRebuild = true
-    applyControlledDocument(force: true)
+    if tokensJson != document.tokensJson {
+      tokensJson = document.tokensJson
+      tokens = decode([ComposerTokenPayload].self, from: document.tokensJson) ?? []
+      tokensNeedRebuild = true
+    }
+    value = document.value
+    requestedSelection = document.selection
+    applyControlledDocument(force: tokensNeedRebuild)
+    applyRequestedSelection()
     if tokensMatchCurrentValue() {
       tokensNeedRebuild = false
     }
   }
 
-  func setSelectionJson(_ selectionJson: String) {
-    requestedSelection = decode(ComposerSelectionPayload.self, from: selectionJson)
-    applyRequestedSelection()
-  }
-
   func setThemeJson(_ themeJson: String) {
     guard let nextTheme = decode(ComposerThemePayload.self, from: themeJson) else {
       return
@@ -700,18 +705,23 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate {
     }
     value = textView.serializedText()
     let selection = sourceSelection()
+    nativeEventCount += 1
     onComposerChange([
       "value": value,
       "selection": ["start": selection.start, "end": selection.end],
+      "eventCount": nativeEventCount,
     ])
     updatePlaceholderVisibility()
     emitContentSizeIfNeeded()
   }
 
   private func emitSelection() {
+    let currentValue = textView.serializedText()
     let selection = sourceSelection()
     onComposerSelectionChange([
+      "value": currentValue,
       "selection": ["start": selection.start, "end": selection.end],
+      "eventCount": nativeEventCount,
     ])
   }
 
@@ -752,6 +762,7 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate {
     isApplyingControlledValue = true
     textView.selectedRange = nextRange
     isApplyingControlledValue = false
+    self.requestedSelection = nil
   }
 
   private func updatePlaceholderVisibility() {

apps/mobile/src/native/T3ComposerEditor.ios.tsx

@@ -1,13 +1,27 @@
 import { collectComposerInlineTokens } from "@t3tools/shared/composerInlineTokens";
 import { requireNativeView } from "expo";
-import { useImperativeHandle, useMemo, useRef, type Ref } from "react";
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type Ref,
+} from "react";
 import type { NativeSyntheticEvent, StyleProp, ViewProps, ViewStyle } from "react-native";
 import { Image, StyleSheet } from "react-native";
 
 import { markdownFileIconSource } from "@t3tools/mobile-markdown-text/file-icons";
 import { resolveMarkdownFileIcon } from "@t3tools/mobile-markdown-text/links";
 import { MOBILE_TYPOGRAPHY } from "../lib/typography";
 import { useThemeColor } from "../lib/useThemeColor";
+import {
+  acknowledgeComposerNativeEvent,
+  isComposerNativeEcho,
+  resolveComposerControlledEventCount,
+  type ComposerNativeEventSnapshot,
+} from "./composerEditorRevision";
 import type { ComposerEditorProps, ComposerEditorSelection } from "./T3ComposerEditor.types";
 
 const NATIVE_MODULE_NAME = "T3ComposerEditor";
@@ -16,10 +30,13 @@ const EMPTY_SKILLS: NonNullable<ComposerEditorProps["skills"]> = [];
 type NativeEditorEvent = NativeSyntheticEvent<{
   readonly value: string;
   readonly selection: ComposerEditorSelection;
+  readonly eventCount: number;
 }>;
 
 type NativeSelectionEvent = NativeSyntheticEvent<{
+  readonly value: string;
   readonly selection: ComposerEditorSelection;
+  readonly eventCount: number;
 }>;
 
 type NativePasteImagesEvent = NativeSyntheticEvent<{
@@ -34,9 +51,7 @@ interface NativeComposerEditorRef {
 
 interface NativeComposerEditorProps extends ViewProps {
   readonly ref?: Ref<NativeComposerEditorRef>;
-  readonly value: string;
-  readonly tokensJson: string;
-  readonly selectionJson: string;
+  readonly controlledDocumentJson: string;
   readonly themeJson: string;
   readonly placeholder: string;
   readonly fontFamily: string;
@@ -81,6 +96,13 @@ export function ComposerEditor({
   ...props
 }: ComposerEditorProps) {
   const nativeRef = useRef<NativeComposerEditorRef>(null);
+  const mostRecentEventCountRef = useRef(0);
+  const [mostRecentEventCount, setMostRecentEventCount] = useState(0);
+  const [nativeEventSequence, setNativeEventSequence] = useState(0);
+  const previousRenderedEventSequenceRef = useRef(0);
+  const nativeEventSnapshotsRef = useRef<ComposerNativeEventSnapshot[]>([
+    { eventCount: 0, value: props.value, selection: selection ?? null },
+  ]);
   const confirmedTokensRef = useRef(collectComposerInlineTokens(props.value));
   const textColor = useThemeColor("--color-foreground");
   const placeholderColor = useThemeColor("--color-placeholder");
@@ -126,6 +148,56 @@ export function ComposerEditor({
       })),
     );
   }, [props.value, skillLabels]);
+  const includesNativeEvent = nativeEventSequence !== previousRenderedEventSequenceRef.current;
+  const controlledEventCount = includesNativeEvent
+    ? resolveComposerControlledEventCount(
+        props.value,
+        selection ?? null,
+        mostRecentEventCount,
+        nativeEventSnapshotsRef.current,
+      )
+    : mostRecentEventCount;
+  const isNativeEcho =
+    includesNativeEvent &&
+    isComposerNativeEcho(
+      props.value,
+      selection ?? null,
+      controlledEventCount,
+      nativeEventSnapshotsRef.current,
+    );
+  const controlledDocumentJson = JSON.stringify({
+    value: props.value,
+    selection: isNativeEcho ? null : (selection ?? null),
+    tokensJson,
+    mostRecentEventCount: controlledEventCount,
+    isNativeEcho,
+  });
+  useEffect(() => {
+    previousRenderedEventSequenceRef.current = nativeEventSequence;
+    const snapshots = nativeEventSnapshotsRef.current;
+    if (snapshots.length > 50) {
+      nativeEventSnapshotsRef.current = snapshots.slice(-50);
+    }
+  }, [nativeEventSequence]);
+  const acceptNativeEvent = useCallback(
+    (eventCount: number, value: string, nextSelection: ComposerEditorSelection) => {
+      const acknowledgedEventCount = acknowledgeComposerNativeEvent(
+        mostRecentEventCountRef.current,
+        eventCount,
+      );
+      if (acknowledgedEventCount === null) {
+        return false;
+      }
+      mostRecentEventCountRef.current = acknowledgedEventCount;
+      nativeEventSnapshotsRef.current.push({
+        eventCount: acknowledgedEventCount,
+        value,
+        selection: nextSelection,
+      });
+      return acknowledgedEventCount;
+    },
+    [],
+  );
   const themeJson = JSON.stringify({
     text: String(textColor),
     placeholder: String(placeholderColor),
@@ -141,9 +213,7 @@ export function ComposerEditor({
   return (
     <NativeView
       ref={nativeRef}
-      value={props.value}
-      tokensJson={tokensJson}
-      selectionJson={selection ? JSON.stringify(selection) : ""}
+      controlledDocumentJson={controlledDocumentJson}
       themeJson={themeJson}
       placeholder={props.placeholder ?? ""}
       fontFamily={
@@ -169,10 +239,28 @@ export function ComposerEditor({
       spellCheck={props.spellCheck ?? true}
       style={style as StyleProp<ViewStyle>}
       onComposerChange={(event) => {
+        const acknowledgedEventCount = acceptNativeEvent(
+          event.nativeEvent.eventCount,
+          event.nativeEvent.value,
+          event.nativeEvent.selection,
+        );
+        if (acknowledgedEventCount === false) return;
         onChangeText(event.nativeEvent.value);
         onSelectionChange?.(event.nativeEvent.selection);
+        setMostRecentEventCount(acknowledgedEventCount);
+        setNativeEventSequence((sequence) => sequence + 1);
+      }}
+      onComposerSelectionChange={(event) => {
+        const acknowledgedEventCount = acceptNativeEvent(
+          event.nativeEvent.eventCount,
+          event.nativeEvent.value,
+          event.nativeEvent.selection,
+        );
+        if (acknowledgedEventCount === false) return;
+        onSelectionChange?.(event.nativeEvent.selection);
+        setMostRecentEventCount(acknowledgedEventCount);
+        setNativeEventSequence((sequence) => sequence + 1);
       }}
-      onComposerSelectionChange={(event) => onSelectionChange?.(event.nativeEvent.selection)}
       onComposerPasteImages={(event) => onPasteImages?.(event.nativeEvent.uris)}
       onComposerFocus={onFocus}
       onComposerBlur={onBlur}

apps/mobile/src/native/composerEditorRevision.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from "@effect/vitest";
+
+import {
+  acknowledgeComposerNativeEvent,
+  isComposerNativeEcho,
+  resolveComposerControlledEventCount,
+} from "./composerEditorRevision";
+
+describe("acknowledgeComposerNativeEvent", () => {
+  it("advances to newer native text revisions", () => {
+    expect(acknowledgeComposerNativeEvent(4, 5)).toBe(5);
+  });
+
+  it("accepts a duplicate event from the current native revision", () => {
+    expect(acknowledgeComposerNativeEvent(5, 5)).toBe(5);
+  });
+
+  it("rejects events older than the latest native text revision", () => {
+    expect(acknowledgeComposerNativeEvent(5, 4)).toBeNull();
+  });
+
+  it("rejects malformed revision counters", () => {
+    expect(acknowledgeComposerNativeEvent(5, Number.NaN)).toBeNull();
+    expect(acknowledgeComposerNativeEvent(5, 5.5)).toBeNull();
+  });
+});
+
+describe("isComposerNativeEcho", () => {
+  const snapshots = [{ eventCount: 3, value: "native", selection: { start: 6, end: 6 } }];
+
+  it("matches the exact native text revision and selection", () => {
+    expect(isComposerNativeEcho("native", { start: 6, end: 6 }, 3, snapshots)).toBe(true);
+  });
+
+  it("does not claim parent-driven selection or repeated-text updates", () => {
+    expect(isComposerNativeEcho("native", { start: 2, end: 2 }, 3, snapshots)).toBe(false);
+    expect(isComposerNativeEcho("native", { start: 6, end: 6 }, 4, snapshots)).toBe(false);
+    expect(isComposerNativeEcho("parent edit", { start: 6, end: 6 }, 3, snapshots)).toBe(false);
+  });
+
+  it("matches value and revision when selection is uncontrolled", () => {
+    expect(isComposerNativeEcho("native", null, 3, snapshots)).toBe(true);
+  });
+});
+
+describe("resolveComposerControlledEventCount", () => {
+  const snapshots = [
+    { eventCount: 0, value: "", selection: { start: 0, end: 0 } },
+    { eventCount: 2, value: "a", selection: { start: 1, end: 1 } },
+    { eventCount: 4, value: "ab", selection: { start: 2, end: 2 } },
+  ];
+
+  it("tags a delayed parent value with the native revision that produced it", () => {
+    expect(resolveComposerControlledEventCount("a", { start: 1, end: 1 }, 4, snapshots)).toBe(2);
+  });
+
+  it("does not acknowledge the pre-edit parent value as the latest revision", () => {
+    expect(resolveComposerControlledEventCount("", { start: 0, end: 0 }, 4, snapshots)).toBe(0);
+  });
+
+  it("acknowledges the latest native value at the latest revision", () => {
+    expect(resolveComposerControlledEventCount("ab", { start: 2, end: 2 }, 4, snapshots)).toBe(4);
+  });
+
+  it("allows an unmatched parent-driven edit at the latest native revision", () => {
+    expect(resolveComposerControlledEventCount("/plan ", { start: 6, end: 6 }, 4, snapshots)).toBe(
+      4,
+    );
+  });
+
+  it("uses the newest revision when selection events repeat the same value", () => {
+    expect(
+      resolveComposerControlledEventCount("ab", { start: 1, end: 1 }, 5, [
+        ...snapshots,
+        { eventCount: 5, value: "ab", selection: { start: 1, end: 1 } },
+      ]),
+    ).toBe(5);
+  });
+
+  it("keeps a stale selection paired with current text behind the native revision", () => {
+    expect(resolveComposerControlledEventCount("ab", { start: 1, end: 1 }, 4, snapshots)).toBe(3);
+  });
+
+  it("does not control selection when no selection prop is provided", () => {
+    expect(resolveComposerControlledEventCount("ab", null, 4, snapshots)).toBe(4);
+  });
+});