Mention Dropdown Customization

Build an editor setup that renders rich mention suggestions with custom rows and inserts alternate text when a suggestion is chosen.

Capabilities

Custom row rendering

• When typing @jo, the dropdown rows show an avatar placeholder, the primary label, and the handle (prefixed with @) for each suggestion object { id, label, handle, avatarUrl }; rows display exactly the provided label and handle text. @test

Insert handle instead of label

• Selecting the suggestion labeled "Veronica Hill" with handle "vh" inserts @vh into the document while the visible mention text stays "Veronica Hill". @test

Override inserted text

• If a suggestion provides an insert override, the inserted content uses that override (e.g., @veronica) while the mention still displays the label. @test

Metadata preserved

• The mention data attached to the inserted content includes id, label, handle, avatarUrl, and any optional note field so that the same data can be read back later. @test

Implementation

@generates

API

export async function createMentionEditor(rootElement, options);
/**
 * rootElement: HTMLElement where the rich text editor is mounted.
 * options.feeds: array of feed configs with marker, name, and initial items [{ id, label, handle, avatarUrl, note?, insert? }].
 * options.renderRow: optional function(item) => HTMLElement|string for custom dropdown rendering.
 * options.onReady?: callback receiving the editor instance once initialized.
 * Returns: editor instance with mention support configured.
 */

export function updateFeedItems(editor, feedName, items);
/**
 * Replaces the feed items for the named feed with the provided array of suggestion objects.
 */

Dependencies { .dependencies }

@ckeditor/ckeditor5-mention { .dependency }

Provides mention suggestion dropdowns and mention insertion support.

@ckeditor/ckeditor5-build-classic { .dependency }

Provides the base rich text editor used for rendering and typing.