v145 · DOM · InputEvent · demo

Rich Text Editor

A mini editor that intercepts beforeinput events and uses inputType to decide how to chunk the undo history. Rapid deleteContentBackward strokes are coalesced; deleteWordBackward and selection-delete types each start a new history entry. The Chrome 145 fix means selection-based word deletes now report the correct granularity type instead of generic deleteContentBackward.

Chrome 145+inputType values for deletion on non-collapsed selections are now granularity-correct (deleteWordBackward etc.). In older Chrome, these all reported deleteContentBackward, causing editors to merge word-deletes with character-deletes in undo history.

Type text · select words with Shift+arrow or mouse · press Ctrl+Backspace to delete by word · see the undo history chunk at word granularity · press Ctrl+Z to undo

untitled.txt Ctrl+Backspace delete word · Ctrl+Z undo · Shift+click select
The quick brown fox jumps over the lazy dog. Select some words and press Ctrl+Backspace to delete by word granularity.
Last inputType: History entries: 0
Undo history
Edit the document to see undo history chunks here…
beforeinput events
Waiting for edits…
// InputEvent deletion types — Chrome 145
// Non-collapsed selection deletes now report word/line granularity.

element.addEventListener('beforeinput', e => {
  const { inputType } = e;

  // Chrome 145 fix: Ctrl+Backspace on selection → 'deleteWordBackward'
  // Before Chrome 145: same action → 'deleteContentBackward' (wrong)

  if (inputType === 'deleteWordBackward' || inputType === 'deleteWordForward') {
    // Start a new undo stack entry (word granularity delete)
    undoStack.push({ type: 'word-delete', ... });
  } else if (inputType === 'deleteContentBackward') {
    // Coalesce with previous character delete
    undoStack.coalesceLastCharDelete();
  }
});

see also