Marker-Triggered Mention Configuration

Build configuration for marker-driven mention feeds in a rich text editor, combining static and async data sources.

Capabilities

Builds multi-feed config

• Calling createMentionConfig with people and issue sources returns mention configuration with two feeds: @ uses provided people while # queries the async issue loader with a minimum of two characters, and each feed applies its own dropdown limit (5 for @, 8 for #) overriding the global default of 6. @test
• Global commit keys include Enter and Tab, and feeds reject invalid markers that are not single-character symbols by throwing. @test

Custom rendering and inserted text

• @ feed renders rows combining display name and role, while inserted text uses the handle prefixed by the marker plus a trailing space unless the next character already separates mentions. @test
• # feed renders rows showing issue number and title, and inserts marker-prefixed issue keys without adding a trailing space when followed by a closing bracket. @test

Async feed hygiene

• When users type quickly, stale async responses from the # feed are discarded and only the latest matching results populate the dropdown. @test
• Async feed calls are debounced to avoid over-fetching when typing single characters rapidly. @test

Implementation

@generates

API

/**
 * Builds mention configuration with static '@' people feed and async '#'
 * issue feed. Throws when feed markers are invalid.
 */
export interface MentionSources {
  users: Array<{ id: string; displayName: string; handle: string; role?: string }>;
  loadIssues: (query: string) => Promise<Array<{ id: string; number: string; title: string }>>;
}

export interface MentionConfig {
  mention: {
    feeds: Array<{
      marker: string;
      feed:
        | string[]
        | ((queryText: string) => Promise<Array<{ id: string; text?: string; [key: string]: unknown }>>);
      minimumCharacters?: number;
      itemRenderer?: (item: unknown) => HTMLElement | string;
      dropdownLimit?: number;
    }>;
    commitKeys?: string[];
    dropdownLimit?: number;
  };
  // Additional editor config is allowed.
  [key: string]: unknown;
}

/**
 * Returns a mention configuration with:
 * - Global dropdownLimit of 6 and commitKeys including Enter and Tab.
 * - '@' feed using people from sources.users (text inserts handle with marker) and dropdownLimit of 5.
 * - '#' feed using sources.loadIssues with minimumCharacters = 2 and dropdownLimit of 8.
 * Each feed uses its own dropdownLimit overriding the global default.
 */
export function createMentionConfig(sources: MentionSources): MentionConfig;

Dependencies { .dependencies }

mention-support { .dependency }

Marker-triggered mention feeds with dropdown rendering and insertion handling.

@satisfied-by