Mention

Mention turns trigger text such as @ into an inline combobox input and inserts a markable void mention node when the user selects an item. The package owns trigger detection, input node creation, mention insertion, selection movement, and Markdown mention serialization. The registry owns the demo item list and the inline combobox UI.

Features

• Inline void mention nodes with value and optional key.
• Inline void mention_input nodes created by trigger text.
• Trigger combobox support from @platejs/combobox.
• Configurable trigger strings, regexes, and trigger queries.
• Markable void rendering so bold, italic, and underline can style a mention.
• Optional trailing space after selected mention items.
• Markdown format through [display text](mention:id) plus bare @name deserialization.

Fast Path

Add The Kit

MentionKit installs MentionPlugin, MentionInputPlugin, the registry mention nodes, and a trigger rule that allows @ at the start of a line, after whitespace, or after quotes.

import { createPlateEditor } from 'platejs/react';

import { MentionKit } from '@/components/editor/plugins/mention-kit';

export const editor = createPlateEditor({
  plugins: MentionKit,
});

Render Mentions

mention-node renders both the selected mention and the temporary combobox input. The demo data lives in that registry UI file, so replace it with your app users, pages, or records.

Add Static Rendering

mention-base-kit uses BaseMentionPlugin with the static mention node for read-only output.

Ownership

Manual Setup

Install Package

npm install @platejs/mention

Add Plugins

Configure the mention plugin with the trigger behavior and render both node types.

import { MentionInputPlugin, MentionPlugin } from '@platejs/mention/react';
import { createPlateEditor } from 'platejs/react';

import {
  MentionElement,
  MentionInputElement,
} from '@/components/ui/mention-node';

export const editor = createPlateEditor({
  plugins: [
    MentionPlugin.configure({
      options: {
        triggerPreviousCharPattern: /^$|^[\s"']$/,
      },
    }).withComponent(MentionElement),
    MentionInputPlugin.withComponent(MentionInputElement),
  ],
});

Select An Item

Use getMentionOnSelectItem from your combobox item renderer. It inserts the mention, moves the cursor after it, and inserts a trailing space only when insertSpaceAfterMention is enabled and the mention lands at the end of the block.

import { getMentionOnSelectItem } from '@platejs/mention';

const onSelectItem = getMentionOnSelectItem();

<InlineComboboxItem
  value={item.text}
  onClick={() => onSelectItem(editor, item, search)}
>
  {item.text}
</InlineComboboxItem>;

Value Shape

BaseMentionPlugin uses KEYS.mention, which resolves to the mention node type. The input plugin uses KEYS.mentionInput, which resolves to mention_input.

const value = [
  {
    children: [
      { text: 'Assigned to ' },
      {
        children: [{ text: '' }],
        key: 'user_123',
        type: 'mention',
        value: 'Jane Smith',
      },
      { text: '.' },
    ],
    type: 'p',
  },
];

The mention node is isMarkableVoid, so marks on its empty child can style the rendered mention.

Trigger Flow

withTriggerCombobox overrides insertText. It creates a combobox input only when every gate passes.

The default createComboboxInput creates:

{
  children: [{ text: '' }],
  trigger: '@',
  type: KEYS.mentionInput,
}

If editor.meta.userId exists, the combobox input stores that userId so only the creator sees the transient input in collaborative editors.

Markdown

@platejs/markdown serializes mentions as link-style mention: URLs. It uses key for the URL when present and value for the visible text.

Hello [Jane Smith](mention:user_123).

Deserialization supports link-style mentions and bare @alice text. Normal links such as [@docs](/docs/mention) stay links.

API Reference