Mention-Enabled Note Editor

Build a lightweight rich text note editor that offers mention-style autocomplete dropdowns with full keyboard navigation and configurable feeds.

Capabilities

Triggered suggestions per marker

• Typing text like "Hello @al" shows up to the configured number of @ suggestions once the minimum character count is met, and pressing Enter inserts the highlighted suggestion with a trailing space while closing the dropdown. @test

Keyboard-controlled selection

• With a dropdown open, ArrowDown/ArrowUp move the highlight through the list, Enter commits the currently highlighted item into the document, and Escape closes the dropdown without inserting anything. @test

Feed-specific limits and matching

• Different markers (e.g., @, #) honor their own minimumCharacters and dropdownLimit settings and only show items belonging to the active marker; typing "#a" never shows @ results and respects the # dropdown limit. @test

Custom display vs insertion text

• Feed items with a display label different from their insertion text render using the label but insert the provided text value when selected. @test

Implementation

@generates

API

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

export interface MentionFeed {
  marker: string;
  minimumCharacters?: number;
  dropdownLimit?: number;
  fetchItems(query: string): Promise<MentionItem[]>;
  renderItemLabel?: (item: MentionItem) => string | HTMLElement;
}

export interface MentionEditorOptions {
  commitKeys?: string[];
  initialContent?: string;
}

export interface MentionEditorHandles {
  destroy(): Promise<void>;
  getContent(): string;
  isDropdownOpen(): boolean;
}

export async function initMentionEditor(
  container: HTMLElement,
  feeds: MentionFeed[],
  options?: MentionEditorOptions
): Promise<MentionEditorHandles>;

Dependencies { .dependencies }

@ckeditor/ckeditor5-mention { .dependency }

Provides mention autocomplete dropdowns with keyboard navigation.