Mention Integrity Setup

Create a helper that initializes a rich-text editor with mention support centered around marker-based feeds and keeps mention metadata consistent when users edit text. Use @ as the default marker when none is provided.

Capabilities

Cleans broken mentions

• After inserting a mention, if the trigger character is removed from within the mention text, the mention metadata is dropped and the remaining text is plain. @test
• When a mention is split by pressing Enter or inserting an inline element in the middle, both resulting parts are plain text without any mention metadata. @test

Attribute propagation

• Applying a text attribute (e.g., bold) to a single character inside a mention causes the entire mention to share that attribute. @test

Cursor guard

• Typing immediately before or after a mention inserts plain text without inheriting mention metadata, leaving the mention unchanged. @test

Implementation

@generates

API

export interface MentionFeedItem {
  id: string;
  text?: string;
  [key: string]: unknown;
}

export interface MentionEditor {
  setData(data: string): Promise<void>;
  getData(): string;
  applyTextAttribute(rangeStart: number, rangeEnd: number, attributeName: string): Promise<void>;
  destroy(): Promise<void>;
}

export interface MentionEditorConfig {
  element: HTMLElement;
  feedItems: MentionFeedItem[];
  marker?: string;
}

export function createMentionEditor(config: MentionEditorConfig): Promise<MentionEditor>;

Dependencies { .dependencies }

@ckeditor/ckeditor5-mention { .dependency }

Provides mention feed configuration, dropdown UI, and mention integrity helpers.