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

Extends TriggerComboboxPlugin

Options

Collapse all

    Whether to insert a space after the mention.

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.

Parameters

Collapse all

    Options for mention selection.

Optionsoptions

Collapse all

    Plugin key for mention plugin.

    • Default: MentionPlugin.key

ReturnsMentionOnSelectItem

    Handler for mention item selection.