v150 · User Input · Text

Toolbar Builder

Drag-select text inside the editor. The inline toolbar is positioned from the selection read during the editor's own mouseup and click events. In Chrome 150+, the click handler sees the committed selection immediately, so the toolbar can appear without a deferred setTimeout read.

Interact with the editor to compare mouseup, immediate click, and deferred click selection reads.

Article draft

mouseup read

range-
text-

click read

range-
text-

deferred read

range-
match-

Select text in the editor to open the inline toolbar.

editor.addEventListener("click", () => {
  const start = editor.selectionStart;
  const end = editor.selectionEnd;
  showToolbarForSelection(start, end);
});

// Chrome 150+: the direct click read already matches the committed mouseup range.
// The old setTimeout(0) read is only shown here as a comparison.

see also

implementation reference

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