demo · v150 · developer trial

Code Editor Selection

A code editor where selection-aware actions — comment toggle, copy selection, wrap in quotes — read selectionStart/selectionEnd directly in their click handlers. In Chrome 150, the click fires after the mouseup default action settles the selection, so no setTimeout is needed. Drag-select a range, then click any toolbar button to see it act on the correct selection.

Drag-select text, then click a button
Click handler reads selection Chrome 150
—
Correct — selection updated before click fires
setTimeout(0) workaround pre-150
—
Deferred — still works but now unnecessary in Chrome 150

Selection state (in click handler)

selectionStart—
selectionEnd—
length—
selected text—
event—
timingimmediate (Chrome 150)

Event log

// Chrome 150: no setTimeout needed — selection is correct in click handler
document.querySelector('#bold-btn').addEventListener('click', () => {
  const editor = document.querySelector('textarea');
  const start = editor.selectionStart; // ✓ correct in Chrome 150+
  const end   = editor.selectionEnd;   // ✓ correct in Chrome 150+
  const sel   = editor.value.slice(start, end);
  // act on selection immediately
  wrapWith('**', sel, editor, start, end);
});

// Pre-Chrome 150: had to defer to read the correct selection
document.querySelector('#bold-btn').addEventListener('click', () => {
  setTimeout(() => { // ← ugly workaround, now dead code in Chrome 150
    const start = editor.selectionStart;
    // ...
  }, 0);
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗