Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

deleteContent

How deleteContent inputType deletes content and varies across browsers.

Overview

The deleteContent inputType is triggered when the user deletes selected content (typically via Delete key or programmatically). If the selection is collapsed, it may delete the character after the cursor (forward delete).

Basic Behavior

Scenario 1: Text selected

Before (Text selected)

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

After Delete

HTML:
<p>Hello text</p>
Selected text removed

Scenario 2: Collapsed cursor (forward delete)

Before (Cursor at position 5)

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

After Delete

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

IME Composition + deleteContent

⚠️ Critical Issue

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

See: deleteContentBackward and deleteContentForward for detailed information.

Editor-Specific Handling

The deleteContent inputType is a generic deletion that editors typically handle by checking selection state and delegating to forward or backward deletion:

Slate.js

Generic Content Deletion

Slate handles deleteContent by checking selection state: 

    import { Editor, Transforms } from 'slate';

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteContent') {
    e.preventDefault();
    
    const { selection } = editor;
    if (selection && !selection.isCollapsed) {
      // Delete selected content
      Transforms.delete(editor);
    } else {
      // For collapsed selection, default to forward delete
      Transforms.delete(editor, { unit: 'character' });
    }
  }
});
  • Selection-aware: Handles both collapsed and non-collapsed selections.
  • Default direction: Typically defaults to forward deletion for collapsed selections.
ProseMirror

Generic Content Deletion

ProseMirror uses deleteSelection or forwardDelete: 

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

view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteContent') {
    e.preventDefault();
    const { state, dispatch } = view;
    
    if (state.selection.empty) {
      // Default to forward delete
      if (forwardDelete(state, dispatch)) {
        // Handled
      }
    } else {
      if (deleteSelection(state, dispatch)) {
        // Handled
      }
    }
  }
});
  • Command delegation: Delegates to appropriate deletion command based on selection state.
Draft.js

Generic Content Deletion

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

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

function handleDeleteContent(editorState) {
  const contentState = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  
  if (!selection.isCollapsed) {
    // Delete selected range
    const newContentState = Modifier.removeRange(
      contentState,
      selection,
      'forward'
    );
    return EditorState.push(editorState, newContentState, 'remove-range');
  } else {
    // Default to forward delete for collapsed selection
    const 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');
  }
}
  • Direction handling: Uses forward direction by default for collapsed selections.

Related resources