Docs
Mention

Mention

Enable autocompletion for user mentions.

ComboboxMention ComboboxMention ElementMention Input Element

＠ Mention

Mention and reference other users or entities within your text using @-mentions.
Try mentioning
R2-D2
or
Mace Windu
.

Features

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

Installation

npm install @udecode/plate-mention @udecode/plate-combobox

Usage

import { createComboboxPlugin } from '@udecode/plate-combobox';
import { createMentionPlugin } from '@udecode/plate-mention';
 
const plugins = [
  // ...otherPlugins,
  createComboboxPlugin(),
  createMentionPlugin(),
];

API

createMentionPlugin

Options

Collapse all

    A function to create the mention node.

    A unique ID for the mention plugin.

    Whether to insert a space after the mention.

    The character that triggers the mention (for example, '@' in the case of a user mention).

    An object containing the key-value pair for creating an input.

    A query function to enable the behavior.

getMentionOnSelectItem

Gets the ComboboxOnSelectItem handler for selecting an item in the mention combobox.

Parameters

Collapse all

Returns

Collapse all

    The ComboboxOnSelectItem handler for selecting an item in the mention combobox.

findMentionInput

Finds the mention input node in the editor.

Parameters

Collapse all

    The editor instance.

    Additional options for finding the mention input node.

Returns

Collapse all

    The mention input node entry if found, otherwise undefined.

isNodeMentionInput

Checks if a node is a mention input node in the editor.

Parameters

Collapse all

    The editor instance.

    The node to check.

Returns

Collapse all

    true if the node is a mention input node, otherwise false.

isSelectionInMentionInput

Checks if the current selection in the editor is within a mention input.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the selection is within a mention input, otherwise false.

mentionOnKeyDownHandler

Handles keydown events for mention-related functionality, such as removing mention inputs and moving the selection by offset.

Parameters

Collapse all

    Options for moving the selection by offset.

moveSelectionByOffset

Moves the selection by offset based on the keyboard arrow keys.

Parameters

Collapse all

    The editor instance.

    Options for moving the selection by offset. This is an optional parameter.

removeMentionInput

Removes the mention input node at the specified path.

Parameters

Collapse all

    The editor instance.

    The path of the mention input node to remove.

MediaReset Node