Fix IME composition being cancelled on the first character in an empty leaf (Android)

.changeset/lucky-pandas-shave.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix IME composition being cancelled on the first character typed into an empty leaf on Android, which left the first character behind as a separate, uncomposed character (typing 안녕 in Korean produced ㅇ안녕).

packages/slate-react/src/components/string.tsx

@@ -3,7 +3,7 @@ import { Editor, Text, Path, Element, Node } from 'slate'
 
 import { ReactEditor, useSlateStatic } from '..'
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'
-import { IS_ANDROID } from 'slate-dom'
+import { IS_ANDROID, IS_COMPOSING } from 'slate-dom'
 import { MARK_PLACEHOLDER_SYMBOL } from 'slate-dom'
 
 /**
@@ -61,6 +61,7 @@ const String = (props: {
  */
 const TextString = (props: { text: string; isTrailing?: boolean }) => {
   const { text, isTrailing = false } = props
+  const editor = useSlateStatic()
   const ref = useRef<HTMLSpanElement>(null)
   const getTextContent = () => {
     return `${text ?? ''}${isTrailing ? '\n' : ''}`
@@ -81,6 +82,20 @@ const TextString = (props: { text: string; isTrailing?: boolean }) => {
     const textWithTrailing = getTextContent()
 
     if (ref.current && ref.current.textContent !== textWithTrailing) {
+      // On Android the DOM intentionally runs ahead of the value while the IME
+      // composes, since input is buffered as pending diffs. Writing
+      // `textContent` here would replace the text node the composition lives in
+      // and cancel it; the pending diffs reconcile this span when the
+      // composition ends.
+      if (IS_ANDROID && IS_COMPOSING.get(editor)) {
+        const composingNode =
+          ReactEditor.getWindow(editor).getSelection()?.anchorNode
+
+        if (composingNode && ref.current.contains(composingNode)) {
+          return
+        }
+      }
+
       ref.current.textContent = textWithTrailing
     }
 
@@ -135,9 +150,15 @@ export const ZeroWidthString = (props: {
   // be because accepting an IME suggestion when at the start of a block (no
   // preceding \uFEFF) removes one or more DOM elements that `toSlateRange`
   // depends on. (https://github.com/ianstormtaylor/slate/issues/5703)
+  // A leaf with no text node at all forces the IME to create one when the
+  // first character is composed there, and no re-render can then touch the
+  // leaf without cancelling the composition. Rendering the zero-width space on
+  // Android too gives the composition a React-owned text node to live in; the
+  // wrapper keeps its data-slate-zero-width attributes, so selection mapping
+  // is unchanged.
   return (
     <span {...attributes}>
-      {!IS_ANDROID || !isLineBreak ? '\uFEFF' : null}
+      {'\uFEFF'}
       {isLineBreak ? <br /> : null}
     </span>
   )

packages/slate-react/src/hooks/android-input-manager/android-input-manager.ts

@@ -1,4 +1,7 @@
 import { DebouncedFunc } from 'lodash'
+// Default import: the UMD build resolves react-dom through its CommonJS entry,
+// whose named exports rollup cannot discover statically.
+import ReactDOM from 'react-dom'
 import { Editor, Location, Node, Path, Point, Range, Transforms } from 'slate'
 import { ReactEditor } from '../../plugin/react-editor'
 import {
@@ -34,6 +37,16 @@ const RESOLVE_DELAY = 25
 // Time with no user interaction before the current user action is considered as done.
 const FLUSH_DELAY = 200
 
+// Time with no composition input after which a composition that never ended is
+// treated as stale. Long enough that pausing mid-word does not cut a live
+// composition short.
+const COMPOSITION_IDLE_TIMEOUT = 5000
+
+// How often a deferred flush re-checks whether the composition is still live.
+// Only bounds how quickly the value catches up with a composition that ended
+// without firing `compositionend`; one that ends normally flushes immediately.
+const COMPOSITION_RECHECK_DELAY = 50
+
 // Replace with `const debug = console.log` to debug
 const debug = (..._: unknown[]) => {}
 
@@ -78,6 +91,8 @@ export function createAndroidInputManager({
   let compositionEndTimeoutId: ReturnType<typeof setTimeout> | null = null
   let flushTimeoutId: ReturnType<typeof setTimeout> | null = null
   let actionTimeoutId: ReturnType<typeof setTimeout> | null = null
+  let lastCompositionActivity = 0
+  let compositionCleared = false
 
   let idCounter = 0
   let insertPositionHint: StringDiff | null | false = false
@@ -123,6 +138,45 @@ export function createAndroidInputManager({
     action.run()
   }
 
+  // `compositionend` is not fired reliably in every browser, which Slate
+  // already works around on keydown. Deferring flushes on a composition that
+  // never ends would strand the typed text outside the value, so a composition
+  // that has gone quiet, or that has lost focus, no longer holds flushes back.
+  const isCompositionLive = () => {
+    if (!IS_COMPOSING.get(editor) || compositionCleared) {
+      return false
+    }
+
+    try {
+      const editable = ReactEditor.toDOMNode(editor, editor)
+      const { activeElement } = ReactEditor.getWindow(editor).document
+
+      if (activeElement !== editable && !editable.contains(activeElement)) {
+        return false
+      }
+    } catch {
+      // Fall back to the idle check below if the editable can't be resolved.
+    }
+
+    return Date.now() - lastCompositionActivity < COMPOSITION_IDLE_TIMEOUT
+  }
+
+  // A leaf that Slate models as empty renders as a zero-width string, which on
+  // Android is a `<br>` rather than a text node. When the IME composes the
+  // first character into such a leaf, the browser creates a text node for the
+  // composition. Applying the pending diffs re-renders that leaf as a text
+  // leaf, which unmounts the zero-width span and takes the text node the IME is
+  // composing in with it, silently cancelling the composition.
+  const hasPendingDiffsInEmptyLeaf = () =>
+    !!EDITOR_TO_PENDING_DIFFS.get(editor)?.some(({ path }) => {
+      try {
+        return Node.leaf(editor, path).text.length === 0
+      } catch {
+        // The path may no longer resolve if the editor changed underneath us.
+        return false
+      }
+    })
+
   const flush = () => {
     if (flushTimeoutId) {
       clearTimeout(flushTimeoutId)
@@ -134,6 +188,17 @@ export function createAndroidInputManager({
       actionTimeoutId = null
     }
 
+    // Defer flushing until the composition ends, so that the re-render that
+    // would replace the composing text node cannot happen mid-composition.
+    // Composing into a leaf that already has text is unaffected: applying the
+    // diff there only updates `textContent`, so the value still updates on
+    // every `compositionupdate`.
+    if (isCompositionLive() && hasPendingDiffsInEmptyLeaf()) {
+      debug('deferring flush during composition in empty leaf')
+      flushTimeoutId = setTimeout(flush, COMPOSITION_RECHECK_DELAY)
+      return
+    }
+
     if (!hasPendingDiffs() && !hasPendingAction()) {
       applyPendingSelection()
       return
@@ -253,9 +318,31 @@ export function createAndroidInputManager({
       clearTimeout(compositionEndTimeoutId)
     }
 
+    // Diffs deferred by `flush` have to be applied synchronously here. IMEs
+    // that compose one syllable at a time (Hangul, kana) start the next
+    // composition in the same tick as this event, so an asynchronous render
+    // would replace the text node that composition has already started in.
+    if (hasPendingDiffsInEmptyLeaf() && !flushing) {
+      ReactDOM.flushSync(() => {
+        IS_COMPOSING.set(editor, false)
+        flush()
+      })
+      updatePlaceholderVisibility()
+      return
+    }
+
     compositionEndTimeoutId = setTimeout(() => {
       IS_COMPOSING.set(editor, false)
       flush()
+
+      if (compositionCleared) {
+        // A cancelled composition can take the empty leaf's text node with
+        // it. A forced render lets RestoreDOM put the leaf's DOM back, so the
+        // next composition starts from a clean state instead of a bare <br>.
+        EDITOR_TO_FORCE_RENDER.get(editor)?.()
+      }
+
+      updatePlaceholderVisibility()
     }, RESOLVE_DELAY)
   }
 
@@ -265,6 +352,8 @@ export function createAndroidInputManager({
     debug('composition start')
 
     IS_COMPOSING.set(editor, true)
+    lastCompositionActivity = Date.now()
+    compositionCleared = false
 
     if (compositionEndTimeoutId) {
       clearTimeout(compositionEndTimeoutId)
@@ -351,6 +440,38 @@ export function createAndroidInputManager({
     }
 
     const { inputType: type } = event
+
+    if (type === 'insertCompositionText' || type === 'deleteCompositionText') {
+      lastCompositionActivity = Date.now()
+
+      if (event.data) {
+        compositionCleared = false
+      } else {
+        // The IME threw away what it was composing. The deferred text never
+        // reached the value, so the value is already in the desired state -
+        // drop the deferral instead of applying and re-deleting it, which
+        // would churn the DOM mid-composition and can make Android close the
+        // keyboard.
+        compositionCleared = true
+        const deferredDiffs = EDITOR_TO_PENDING_DIFFS.get(editor)
+
+        if (deferredDiffs?.length) {
+          const allInEmptyLeaves = deferredDiffs.every(({ path }) => {
+            try {
+              return Node.leaf(editor, path).text.length === 0
+            } catch {
+              return false
+            }
+          })
+
+          if (allInEmptyLeaves) {
+            EDITOR_TO_PENDING_DIFFS.set(editor, [])
+            EDITOR_TO_PENDING_SELECTION.delete(editor)
+          }
+        }
+      }
+    }
+
     let targetRange: Range | null = null
     const data: DataTransfer | string | undefined =
       (event as any).dataTransfer || event.data || undefined

site/examples/js/android-tests.jsx

@@ -185,6 +185,26 @@ const TEST_CASES = [
       },
     ],
   },
+  {
+    id: 'ime-first-character',
+    name: 'IME first character',
+    instructions:
+      'Using a keyboard that composes (Korean, Japanese or pinyin), type a word into the empty first paragraph, then into the empty paragraph after "Second block". Every character must compose into the word you typed. If composition breaks, the first character is left behind on its own: typing 안녕 in Korean gives ㅇ안녕 or ㅇㅏㄴ녕.',
+    value: [
+      {
+        type: 'paragraph',
+        children: [{ text: '' }],
+      },
+      {
+        type: 'paragraph',
+        children: [{ text: 'Second block', bold: true }],
+      },
+      {
+        type: 'paragraph',
+        children: [{ text: '' }],
+      },
+    ],
+  },
 ]
 const AndroidTestsExample = () => {
   const [testId, setTestId] = useState(

site/examples/ts/android-tests.tsx

@@ -192,6 +192,26 @@ const TEST_CASES: AndroidTestCase[] = [
       },
     ],
   },
+  {
+    id: 'ime-first-character',
+    name: 'IME first character',
+    instructions:
+      'Using a keyboard that composes (Korean, Japanese or pinyin), type a word into the empty first paragraph, then into the empty paragraph after "Second block". Every character must compose into the word you typed. If composition breaks, the first character is left behind on its own: typing 안녕 in Korean gives ㅇ안녕 or ㅇㅏㄴ녕.',
+    value: [
+      {
+        type: 'paragraph',
+        children: [{ text: '' }],
+      },
+      {
+        type: 'paragraph',
+        children: [{ text: 'Second block', bold: true }],
+      },
+      {
+        type: 'paragraph',
+        children: [{ text: '' }],
+      },
+    ],
+  },
 ]
 
 const AndroidTestsExample = () => {