Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

deleteWordForward

How deleteWordForward inputType deletes words forward (Ctrl+Delete) and varies across browsers.

Overview

The deleteWordForward inputType is triggered when the user presses Ctrl/Cmd + Delete. The browser deletes the word after the cursor position (forward word deletion).

Basic Behavior

Scenario: Cursor in middle of word

Before (Cursor at position 8)

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

After Ctrl/Cmd + Delete

HTML:
<p>Hello | text</p>
Entire word "world " deleted

Difference from deleteWordBackward

deleteWordForward (Ctrl/Cmd + Delete)

  • Deletes word/content after cursor
  • Forward word deletion

deleteWordBackward (Ctrl/Cmd + Backspace)

  • Deletes word/content before cursor
  • Backward word deletion

IME Composition + deleteWordForward

⚠️ Critical Issue

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

See: deleteContentForward for similar issues with regular Delete.

Editor-Specific Handling

Different editor frameworks handle word-level forward deletion similarly to backward deletion. Here's how major editors implement deleteWordForward:

Slate.js

Word Forward Deletion

Slate uses Transforms.delete() with word unit (forward): 

    import { Editor, Transforms } from 'slate';

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteWordForward') {
    e.preventDefault();
    
    const { selection } = editor;
    if (selection) {
      // Delete word forward
      Transforms.delete(editor, { unit: 'word' });
    }
  }
});
  • Transforms.delete: Uses unit: 'word' without reverse flag.
  • Same API: Uses same method as backward deletion, just without reverse: true.
ProseMirror

Word Forward Deletion

ProseMirror uses word boundary detection forward: 

    view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteWordForward') {
    e.preventDefault();
    const { state, dispatch } = view;
    
    // Extend selection forward to word boundary
    const { $to } = state.selection;
    const wordEnd = $to.endOfWord($to);
    
    if (wordEnd !== null) {
      const tr = state.tr.delete($to.pos, wordEnd.pos);
      dispatch(tr);
    }
  }
});
  • Word boundary detection: Uses endOfWord() to find word end.
  • Transaction-based: Creates transaction to delete word range forward.
Draft.js

Word Forward Deletion

Draft.js finds word end and deletes: 

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

function handleDeleteWordForward(editorState) {
  const contentState = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  
  // Find word end
  const block = contentState.getBlockForKey(selection.getStartKey());
  const text = block.getText();
  const offset = selection.getStartOffset();
  
  // Find word boundary (simplified)
  let wordEnd = offset;
  while (wordEnd < text.length && /S/.test(text[wordEnd])) {
    wordEnd++;
  }
  
  // Create new selection from cursor to word end
  const newSelection = selection.merge({
    anchorOffset: offset,
    focusOffset: wordEnd,
  });
  
  // Delete selection
  const newContentState = Modifier.removeRange(
    contentState,
    newSelection,
    'forward'
  );
  
  return EditorState.push(
    editorState,
    newContentState,
    'remove-range'
  );
}
  • Word boundary detection: Manually finds word end by scanning forward for whitespace.
  • Selection extension: Extends selection to word boundary before deleting.

Related resources