Single Line

Restrict the editor to a single line. Newlines are blocked from all input sources.

Usage

<Mentions singleLine triggers={triggers} />

How It Works

Single-line mode uses a 5-layer defense to prevent newlines:

  1. beforeinput event — blocks insertParagraph and insertLineBreak from all sources
  2. keydown — fallback Enter prevention for older browsers
  3. paste handler — strips \n and \r, replaces with spaces
  4. drop handler — same treatment for dragged text
  5. CSS — white-space: nowrap, overflow: hidden, and br { display: none }

Enter Key and Dropdown

The Enter key still works for selecting items from the dropdown. Only "bare" Enter presses (when nothing is being selected) are blocked.

Styling

In single-line mode, the editor gets a data-singleline attribute. Overflow is hidden with horizontal scrolling:

[data-mentions-editor][data-singleline] {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
}

Accessibility

The editor sets aria-multiline="false" in single-line mode, signaling to screen readers that this is a single-line input.