Mentions Component

The main component. Renders a complete mentions editor with dropdown.

Import

import { Mentions } from "@skyastrall/mentions-react";

import { Mentions } from "@skyastrall/mentions-vue";

import { Mentions } from "@skyastrall/mentions-svelte";

import { SaMentions } from "@skyastrall/mentions-angular";
// Standalone — add SaMentions (and FormsModule for [(ngModel)]) to imports.

Props

Prop	Type	Default	Description
`triggers` *	`TriggerConfig[]`	—	Trigger configurations
`value`	`string`	—	Controlled markup value
`defaultValue`	`string`	`""`	Initial markup (uncontrolled)
`onChange`	`(markup, plainText) => void`	—	Fires on every content change
`onSelect`	`(item, trigger) => void`	—	Fires when a mention is inserted
`onRemove`	`(item, trigger) => void`	—	Fires when a mention is deleted
`onQueryChange`	`(query, trigger) => void`	—	Fires as the user types after a trigger
`onOpen`	`(trigger) => void`	—	Fires when the dropdown opens
`onClose`	`() => void`	—	Fires when the dropdown closes
`onError`	`(error: Error) => void`	—	Fires on async data fetch errors
`placeholder`	`string`	—	Editor placeholder text
`className`	`string`	—	CSS class for the editor div
`disabled`	`boolean`	`false`	Disables editing
`readOnly`	`boolean`	`false`	Makes the editor read-only
`autoFocus`	`boolean`	`false`	Focuses editor on mount
`singleLine`	`boolean`	`false`	Prevents newlines
`renderItem`	`(item, highlighted) => ReactNode`	—	Custom suggestion renderer
`ghostText`	`string`	—	Dimmed inline completion
`onAcceptGhostText`	`() => void`	—	Fires when Tab accepts ghost text
`ref`	`Ref<MentionsHandle>`	—	Imperative handle

Angular's <sa-mentions> exposes the same options as signal inputs ([triggers], [singleLine], [disabled], [readOnly], [placeholder], [ghostText], [autoFocus]) with two-way [(ngModel)] for the value, and surfaces the callbacks as outputs: (mentionInsert), (mentionRemove), (opened), (closed), (acceptGhostText). Errors are handled globally via provideMentions({ onError }).

MentionsHandle

Methods available via the ref prop (React/Vue/Svelte) or a template ref to SaMentions (Angular).

Prop	Type	Default	Description
`focus`	`() => void`	—	Focuses the editor
`clear`	`() => void`	—	Clears all content
`getValue`	`() => { markup, plainText }`	—	Returns current values
`insertTrigger`	`(trigger: string) => void`	—	Inserts trigger and opens dropdown
`insertText`	`(text: string) => void`	—	Inserts arbitrary text at the caret (emoji, slash output, AI completions, …)

Compound Components

Provide children to use compound components for custom layouts:

Mentions.Editor

The contenteditable editor. Accepts placeholder, className, style, disabled, readOnly, autoFocus, singleLine.

Mentions.Portal

Positions the dropdown at the caret. Renders inline by default. Pass container to portal elsewhere.

Mentions.List

The suggestion list (<ul> with ARIA listbox attributes).

Mentions.Item

A suggestion item. Use render for custom rendering, or pass children.

<Mentions.Item render={({ item, highlighted }) => (
  <div style={{ fontWeight: highlighted ? 600 : 400 }}>
    {item.label}
  </div>
)} />

<MentionsItem v-slot="{ item, highlighted }">
  <div :style="{ fontWeight: highlighted ? 600 : 400 }">
    {{ item.label }}
  </div>
</MentionsItem>

<MentionsItem>
  {#snippet children({ item, highlighted })}
    <div style:font-weight={highlighted ? 600 : 400}>
      {item.label}
    </div>
  {/snippet}
</MentionsItem>

Mentions.Empty

Shown when there are no matching suggestions.

Mentions.Loading

Shown during async data fetching.