Mention

PreviousNext
PlusComboboxMention Nodes
Loading...

Features

  • Smart autocompletion for mentioning users, pages, or any reference
  • Triggered by configurable characters (default: @)
  • Keyboard navigation and selection
  • Customizable mention data and rendering

Kit Usage

Installation

The fastest way to add mentions is with the MentionKit, which includes pre-configured MentionPlugin and MentionInputPlugin along with their Plate UI components.

Add Kit

import { createPlateEditor } from 'platejs/react';
import { MentionKit } from '@/components/editor/plugins/mention-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...MentionKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/mention

Add Plugins

import { MentionPlugin, MentionInputPlugin } from '@platejs/mention/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    MentionPlugin,
    MentionInputPlugin,
  ],
});

Configure Plugins

import { MentionPlugin, MentionInputPlugin } from '@platejs/mention/react';
import { createPlateEditor } from 'platejs/react';
import { MentionElement, MentionInputElement } from '@/components/ui/mention-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    MentionPlugin.configure({
      options: {
        trigger: '@',
        triggerPreviousCharPattern: /^$|^[\s"']$/,
        insertSpaceAfterMention: false,
      },
    }).withComponent(MentionElement),
    MentionInputPlugin.withComponent(MentionInputElement),
  ],
});
  • options.trigger: Character that triggers the mention combobox
  • options.triggerPreviousCharPattern: RegExp pattern for the character before trigger. The kit uses /^$|^[\s"']$/ to allow mentions at start of line, after whitespace, or after quotes
  • options.insertSpaceAfterMention: Whether to automatically insert a space after inserting a mention
  • withComponent: Assigns the UI components for rendering mentions and mention input

Plate Plus

Plugins

MentionPlugin

Plugin for mention functionality. Extends TriggerComboboxPluginOptions.

Options

  • insertSpaceAfterMention optional boolean

    Whether to insert a space after the mention.

    • Default: false

  • trigger optional string

    Character that triggers the mention combobox.

    • Default: '@'

  • triggerPreviousCharPattern optional RegExp

    Pattern to match the character before trigger.

    • Default: /^\s?$/

  • createComboboxInput optional (trigger: string) => TElement

    Function to create the input element when trigger is activated.

MentionInputPlugin

Plugin for mention input functionality.

API

api.insert.mention

Inserts a mention element at the current selection.

Parameters

Collapse all

  • options object

getMentionOnSelectItem

Gets handler for selecting mention combobox item.

Options

Collapse all

  • key optional string

    Plugin key for mention plugin.

    • Default: MentionPlugin.key

Returns

    Handler function for mention item selection.

提及功能表格