Fix Android editor.insertText regression (#4779)

* * remove scheduling of text updates using setTimeout
* call Transforms.setSelection before Editor.insertText

* changeset

* Restore logic to set isComposing to false

.changeset/dry-worms-happen.md

@@ -0,0 +1,8 @@
+---
+'slate-react': patch
+---
+
+Android editable updates
+
+- Remove logic to delay handling of text insertion
+- Call Transforms.setSelection before Editor.insertText to adjust position

packages/slate-react/src/components/android/android-editable.tsx

@@ -24,11 +24,7 @@ import {
   IS_READ_ONLY,
   NODE_TO_ELEMENT,
   PLACEHOLDER_SYMBOL,
-  IS_COMPOSING,
-  IS_ON_COMPOSITION_END,
-  EDITOR_ON_COMPOSITION_TEXT,
 } from '../../utils/weak-maps'
-import { normalizeTextInsertionRange } from './diff-text'
 
 import { EditableProps, hasTarget } from '../editable'
 import useChildren from '../../hooks/use-children'
@@ -527,42 +523,6 @@ export const AndroidEditable = (props: EditableProps): JSX.Element => {
                 setTimeout(() => {
                   state.isComposing && setIsComposing(false)
                   state.isComposing = false
-
-                  IS_COMPOSING.set(editor, false)
-                  IS_ON_COMPOSITION_END.set(editor, true)
-
-                  const insertedText =
-                    EDITOR_ON_COMPOSITION_TEXT.get(editor) || []
-
-                  // `insertedText` is set in `MutationObserver` constructor.
-                  // If open phone keyboard association function, `CompositionEvent` will be triggered.
-                  if (!insertedText.length) {
-                    return
-                  }
-
-                  EDITOR_ON_COMPOSITION_TEXT.set(editor, [])
-
-                  const { selection, marks } = editor
-
-                  insertedText.forEach(insertion => {
-                    const text = insertion.text.insertText
-                    const at = normalizeTextInsertionRange(
-                      editor,
-                      selection,
-                      insertion
-                    )
-                    if (marks) {
-                      const node = { text, ...marks }
-                      Transforms.insertNodes(editor, node, {
-                        match: Text.isText,
-                        at,
-                        select: true,
-                      })
-                      editor.marks = null
-                    } else {
-                      Editor.insertText(editor, text)
-                    }
-                  })
                 }, RESOLVE_DELAY)
               }
             },
@@ -576,7 +536,6 @@ export const AndroidEditable = (props: EditableProps): JSX.Element => {
               ) {
                 !state.isComposing && setIsComposing(true)
                 state.isComposing = true
-                IS_COMPOSING.set(editor, true)
               }
             },
             [attributes.onCompositionUpdate]
@@ -589,7 +548,6 @@ export const AndroidEditable = (props: EditableProps): JSX.Element => {
               ) {
                 !state.isComposing && setIsComposing(true)
                 state.isComposing = true
-                IS_COMPOSING.set(editor, true)
               }
             },
             [attributes.onCompositionStart]

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

@@ -1,16 +1,9 @@
+import { Editor, Range, Text, Transforms } from 'slate'
 import { ReactEditor } from '../../plugin/react-editor'
-import { Editor, Range, Transforms, Text } from 'slate'
-import {
-  IS_COMPOSING,
-  IS_ON_COMPOSITION_END,
-  EDITOR_ON_COMPOSITION_TEXT,
-} from '../../utils/weak-maps'
-
 import { DOMNode } from '../../utils/dom'
-
 import {
-  normalizeTextInsertionRange,
   combineInsertedText,
+  normalizeTextInsertionRange,
   TextInsertion,
 } from './diff-text'
 import {
@@ -110,17 +103,6 @@ export class AndroidInputManager {
 
     const { selection, marks } = this.editor
 
-    // If it is in composing or after `onCompositionend`, set `EDITOR_ON_COMPOSITION_TEXT` and return.
-    // Text will be inserted on compositionend event.
-    if (
-      IS_COMPOSING.get(this.editor) ||
-      IS_ON_COMPOSITION_END.get(this.editor)
-    ) {
-      EDITOR_ON_COMPOSITION_TEXT.set(this.editor, insertedText)
-      IS_ON_COMPOSITION_END.set(this.editor, false)
-      return
-    }
-
     // Insert the batched text diffs
     insertedText.forEach(insertion => {
       const text = insertion.text.insertText
@@ -134,6 +116,7 @@ export class AndroidInputManager {
         })
         this.editor.marks = null
       } else {
+        Transforms.setSelection(this.editor, at)
         Editor.insertText(this.editor, text)
       }
     })

packages/slate-react/src/utils/weak-maps.ts

@@ -1,6 +1,5 @@
 import { Ancestor, Editor, Node } from 'slate'
 import { Key } from './key'
-import { TextInsertion } from '../components/android/diff-text'
 
 /**
  * Two weak maps that allow us rebuild a path given a node. They are populated
@@ -33,17 +32,6 @@ export const IS_READ_ONLY: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_FOCUSED: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_DRAGGING: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_CLICKING: WeakMap<Editor, boolean> = new WeakMap()
-export const IS_COMPOSING: WeakMap<Editor, boolean> = new WeakMap()
-export const IS_ON_COMPOSITION_END: WeakMap<Editor, boolean> = new WeakMap()
-
-/**
- * Weak maps for saving text on composition stage.
- */
-
-export const EDITOR_ON_COMPOSITION_TEXT: WeakMap<
-  Editor,
-  TextInsertion[]
-> = new WeakMap()
 
 /**
  * Weak map for associating the context `onChange` context with the plugin.