Mention

ComboboxMention ElementMention Input Element
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

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

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

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

Features

  • Provides smart autocompletion for mentioning users or applying tags.
  • Invoke combobox with @ or # and select suggestion.

Installation

npm install @udecode/plate-mention

Usage

import { MentionPlugin } from '@udecode/plate-mention/react';
 
const plugins = [
  // ...otherPlugins,
  MentionPlugin,
];

Plugins

MentionPlugin

Plugin for mention functionality. Extends TriggerComboboxPlugin.

OptionsMentionPluginOptions

Collapse all

    Whether to insert a space after the mention.

    • Default: false

    Character that triggers the mention combobox.

    • Default: '@'

MentionInputPlugin

Plugin for mention input functionality.

API

editor.api.insert.mention

Override this API method to customize how mentions are inserted.

getMentionOnSelectItem

Gets handler for selecting mention combobox item.

OptionsGetMentionOnSelectItemOptions

Collapse all

    Plugin key for mention plugin.

    • Default: MentionPlugin.key

ReturnsMentionOnSelectItem

    Handler for mention item selection.