Single Line

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

Usage

<Mentions singleLine triggers={triggers} />
<Mentions single-line :triggers="triggers" />
<Mentions singleLine {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.

Dynamic Toggle

Switching from multi-line to single-line mode at runtime automatically strips existing newlines and <br> tags from the editor content.

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.