Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

insertFromPredictiveText

How insertFromPredictiveText inputType handles predictive text insertion and varies across browsers and mobile devices.

Overview

The insertFromPredictiveText inputType is triggered when text is inserted via predictive text features on mobile devices or smart keyboards. This is similar to insertReplacementText but specifically indicates that the text came from a predictive text system.

Basic Behavior

Scenario: Predictive text suggestion selected

Before (User typing "hel")

HTML:
<p>hel|</p>
Keyboard suggests "hello"

After selecting suggestion "hello"

HTML:
<p>hello|</p>
Predictive text inserted, partial text replaced

Browser Support

ℹ️ Limited Browser Support

insertFromPredictiveText is not widely supported across all browsers. Many browsers and keyboards may use insertReplacementText or insertText instead.

This inputType is more commonly found on mobile devices with advanced keyboard features.

Difference from insertReplacementText

insertFromPredictiveText

  • Specifically indicates text from predictive text system
  • Less commonly used
  • May be used by some mobile keyboards

insertReplacementText

  • More general - covers auto-complete, suggestions, and replacements
  • More widely supported
  • Used by most browsers and keyboards

Mobile-Specific Behavior

On mobile devices, predictive text behavior may vary:

  • iOS QuickType may use insertFromPredictiveText or insertReplacementText
  • Android keyboards (Gboard, Samsung Keyboard) may use different inputType values
  • Behavior may differ between keyboard apps and browser combinations

Editor-Specific Handling

Different editor frameworks handle predictive text insertion similarly to replacement text. Here's how major editors implement insertFromPredictiveText:

Slate.js

Predictive Text Handling

Slate handles predictive text similarly to replacement text: 

    import { Editor, Transforms } from 'slate';

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'insertFromPredictiveText' && e.data) {
    e.preventDefault();
    
    const { selection } = editor;
    if (selection && !selection.isCollapsed) {
      // Delete selected text first
      Transforms.delete(editor);
    }
    
    // Insert predictive text
    Transforms.insertText(editor, e.data);
  }
});
  • Same pattern: Uses same handling as insertReplacementText.
  • Text insertion: Inserts predictive text at selection position.
ProseMirror

Predictive Text Handling

ProseMirror handles predictive text: 

    import { insertText } from 'prosemirror-commands';

view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'insertFromPredictiveText' && e.data) {
    e.preventDefault();
    const { state, dispatch } = view;
    
    // Replace selection with predictive text
    if (insertText(state, e.data, state.selection.$from.marks(), dispatch)) {
      // Handled
    }
  }
});
  • insertText command: Uses same command as regular text insertion.
  • Mark preservation: Current marks are applied to predictive text.
Draft.js

Predictive Text Handling

Draft.js handles predictive text: 

    import { EditorState, Modifier } from 'draft-js';

function handlePredictiveText(editorState, text) {
  const contentState = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  
  // Replace selection with predictive text
  const newContentState = Modifier.replaceText(
    contentState,
    selection,
    text,
    editorState.getCurrentInlineStyle()
  );
  
  return EditorState.push(
    editorState,
    newContentState,
    'insert-characters'
  );
}

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'insertFromPredictiveText' && e.data) {
    e.preventDefault();
    const newState = handlePredictiveText(editorState, e.data);
    setEditorState(newState);
  }
});
  • Modifier.replaceText: Replaces selection with predictive text.
  • Style preservation: Current inline styles are applied.

Related resources