Mention

PreviousNext
PlusComboboxMention Nodes
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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.

'use client';
 
import { MentionInputPlugin, MentionPlugin } from '@platejs/mention/react';
 
import {
  MentionElement,
  MentionInputElement,
} from '@/components/ui/mention-node';
 
export const MentionKit = [
  MentionPlugin.configure({
    options: { triggerPreviousCharPattern: /^$|^[\s"']$/ },
  }).withComponent(MentionElement),
  MentionInputPlugin.withComponent(MentionInputElement),
];

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

Collapse all

    Whether to insert a space after the mention.

    • Default: false

    Character that triggers the mention combobox.

    • Default: '@'

    Pattern to match the character before trigger.

    • Default: /^\s?$/

    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

getMentionOnSelectItem

Gets handler for selecting mention combobox item.

Options

Collapse all

    Plugin key for mention plugin.

    • Default: MentionPlugin.key

Returns

    Handler function for mention item selection.

MediaTable