Mention

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

import React from 'react';

import { Plate } from '@udecode/plate-common/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 the handler for selecting an item in the mention combobox.

Parameters

Collapse all

Returns

Collapse all

    The handler for selecting an item in the mention combobox.