Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

deleteContentForward

How deleteContentForward inputType deletes content forward (Delete key) and varies across browsers.

Overview

The deleteContentForward inputType is triggered when the user presses the Delete key. It deletes the character or content after the cursor position (forward delete).

Basic Behavior

Scenario: Cursor position

Before (Cursor at position 5)

HTML:
<p>Hello|world</p>

After Delete key

HTML:
<p>Hello|orld</p>
Character after cursor deleted

Difference from deleteContentBackward

deleteContentForward (Delete key)

  • Deletes character/content after cursor
  • Forward deletion

deleteContentBackward (Backspace key)

  • Deletes character/content before cursor
  • Backward deletion

IME Composition + deleteContentForward

⚠️ Critical Issue

During IME composition, pressing the Delete key may cancel the composition or delete more than expected. The behavior varies significantly between browsers and IME implementations.

See: deleteContentBackward for similar issues with Backspace.

Editor-Specific Handling

Different editor frameworks handle forward deletion similarly to backward deletion. Here's how major editors implement deleteContentForward:

Slate.js

Forward Deletion

Slate uses Transforms.delete() without reverse flag: 

    import { Editor, Transforms } from 'slate';

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteContentForward') {
    e.preventDefault();
    
    const { selection } = editor;
    if (selection && !selection.isCollapsed) {
      // Delete selected content
      Transforms.delete(editor);
    } else if (selection) {
      // Delete character after cursor (forward)
      Transforms.delete(editor, { unit: 'character' });
    }
  }
});
  • Transforms.delete: Deletes content forward (default direction).
  • Same API: Uses same method as backward deletion, just without reverse: true.
ProseMirror

Forward Deletion

ProseMirror uses deleteSelection and forwardDelete commands: 

    import { deleteSelection, forwardDelete } from 'prosemirror-commands';

view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteContentForward') {
    e.preventDefault();
    const { state, dispatch } = view;
    
    if (state.selection.empty) {
      // Collapsed selection - use forwardDelete command
      if (forwardDelete(state, dispatch)) {
        // Handled
      }
    } else {
      // Non-collapsed - delete selection
      if (deleteSelection(state, dispatch)) {
        // Handled
      }
    }
  }
});
  • forwardDelete command: Handles forward deletion for collapsed selections.
  • Same pattern: Similar to backspace handling but uses forwardDelete command.
Draft.js

Forward Deletion

Draft.js uses Modifier.removeRange() with forward direction: 

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

function handleDeleteForward(editorState) {
  const contentState = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  
  let newSelection = selection;
  if (selection.isCollapsed) {
    // Move selection forward by one character
    newSelection = selection.merge({
      focusOffset: Math.min(
        selection.focusOffset + 1,
        selection.focusBlock.getLength()
      ),
    });
  }
  
  const newContentState = Modifier.removeRange(
    contentState,
    newSelection,
    'forward'
  );
  
  return EditorState.push(
    editorState,
    newContentState,
    'remove-range'
  );
}
  • Selection adjustment: For collapsed selection, extends selection forward before deleting.
  • Forward direction: Uses 'forward' direction in removeRange.

Related resources