demo · v143

Replacement text inspector

The third inputType that Chrome 143 exposes on input.dataTransfer is insertReplacementText — fired when the OS accepts a spell-check or autocorrect suggestion. Type in the editor with deliberate misspellings, accept the suggestion, and watch the inspector compare the older beforeinput payload with the final input payload.

Try typing teh and accepting Chrome's autocorrect. Or right-click a wavy red underline and pick a suggestion. With track changes off, the native edit lands and the input log shows whether v143 supplied the replacement payload. Turn track changes on to intercept the same replacement in beforeinput.

Try misspeling some werds heer. Chrome will suggest fixes — right-click an underline, pick one, and watch the diff land in the inspector.

last event

waiting…

diff

InputEvent log

What's happening

  1. The editor listens for both beforeinput and input with inputType === "insertReplacementText".
  2. beforeinput records the suggested string and target range that older Chrome builds already exposed.
  3. Chrome 143 adds the matching input.dataTransfer payload after the native edit lands, so the log can prove the replacement text survived to the committed event.
  4. Without this input-side payload, replacement detection required diffing the contenteditable's textContent after every event — fragile and lossy with IMEs.
  5. With track changes on, the editor cancels the default in beforeinput and inserts both versions wrapped in marks so the user can accept or reject.
editor.addEventListener("beforeinput", (e) => {
  if (e.inputType !== "insertReplacementText") return;
  rememberOldRange(e.getTargetRanges()[0]);
});

editor.addEventListener("input", (e) => {
  if (e.inputType !== "insertReplacementText") return;
  const newText = e.dataTransfer?.getData("text/plain");
  showDiff(oldText, newText);
});

see also