diff --git a/.changeset/dry-worms-happen.md b/.changeset/dry-worms-happen.md new file mode 100644 index 000000000..f37497c02 --- /dev/null +++ b/.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 diff --git a/packages/slate-react/src/components/android/android-editable.tsx b/packages/slate-react/src/components/android/android-editable.tsx index e98798388..5fe0c0021 100644 --- a/packages/slate-react/src/components/android/android-editable.tsx +++ b/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] diff --git a/packages/slate-react/src/components/android/android-input-manager.ts b/packages/slate-react/src/components/android/android-input-manager.ts index 6527fd561..36e34fb48 100644 --- a/packages/slate-react/src/components/android/android-input-manager.ts +++ b/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) } }) diff --git a/packages/slate-react/src/utils/weak-maps.ts b/packages/slate-react/src/utils/weak-maps.ts index 6b5bcb471..804548048 100644 --- a/packages/slate-react/src/utils/weak-maps.ts +++ b/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 = new WeakMap() export const IS_FOCUSED: WeakMap = new WeakMap() export const IS_DRAGGING: WeakMap = new WeakMap() export const IS_CLICKING: WeakMap = new WeakMap() -export const IS_COMPOSING: WeakMap = new WeakMap() -export const IS_ON_COMPOSITION_END: WeakMap = 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.