Trigger Config

Configure each trigger with its own data source, behavior, and appearance.

TriggerConfig

Prop	Type	Default	Description
`char` *	`string`	—	Trigger character — @, #, /, or any string
`data` *	`MentionItem[] \| (query, ctx) => Promise<MentionItem[]>`	—	Static array or async fetcher
`markup`	`string`	`"@[__display__](__id__)"`	Markup template
`allowSpaceInQuery`	`boolean`	`false`	Allow spaces in queries
`minChars`	`number`	`0`	Min chars before suggestions
`debounce`	`number`	`200`	Debounce ms for async fetchers
`maxSuggestions`	`number`	—	Cap number of suggestions
`color`	`string`	—	Mention highlight color

MentionContext

Second argument to async fetchers — provides editor context.

Prop	Type	Default	Description
`textBefore`	`string`	—	Plain text before the trigger
`textAfter`	`string`	—	Plain text after the query
`activeMentions`	`MentionItem[]`	—	All mentions in the editor
`fullText`	`string`	—	Complete plain text

Async Data

const triggers = [{
  char: "@",
  data: async (query, context) => {
    const res = await fetch(`/api/users?q=${query}`);
    return res.json();
  },
  debounce: 300,
  minChars: 2,
}];

Debouncing, aborting stale requests, and loading states are handled automatically.

Custom Markup

{ char: "@", data: users, markup: "{{@__display__:__id__}}" }
// Produces: {{@Alice Johnson:1}}

__display__ and __id__ are replaced with the selected item's label and id. Delimiter characters are escaped automatically.