Async Mention Feed Integration

Build an editor instance that supports mentions with asynchronous suggestions. The mention feed must debounce outgoing queries and ignore stale responses so the dropdown always reflects the most recent user input.

Capabilities

Debounced requests

• Typing @ then rapidly adding characters triggers a single feed request after 100ms of inactivity; intermediate keystrokes do not fire extra requests. @test

Stale response handling

• When two queries overlap (first slow, second fast), only suggestions for the newer query are rendered or applied; the older, slower response is discarded. @test

Graceful failure fallback

• If the suggestion provider rejects or times out, the mention list closes, the caret remains after the marker text, and further typing continues normally. @test

Implementation

@generates

API

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

export type MentionOptions = {
  marker?: string;
  debounceMs?: number;
  dropdownLimit?: number;
};

export async function createMentionEditor(
  rootElement: HTMLElement,
  fetchSuggestions: (marker: string, query: string) => Promise<MentionItem[]>,
  options?: MentionOptions
): Promise<{ destroy(): Promise<void> }>;

Dependencies { .dependencies }

@ckeditor/ckeditor5-mention { .dependency }

Provides mention UI with debounced async feeds and stale-response safeguards.