SuggestionPopup#

The neutral suggestion popup for trigger sessions such as @-mentions. Positions itself from a caret rect and the container's page frame; rows are replaceable.

Import#

import { SuggestionPopup, createTriggerSessionManager } from '@sigx/lynx-markdown/editor';

SuggestionPopup is the presentational surface; createTriggerSessionManager is the state machine that decides when a session is open and what to show. Most apps get this wired automatically by passing a mention plugin to MarkdownEditor — reach for the popup directly only when building a custom trigger UI.

The popup imports @sigx/lynx-keyboard's useKeyboard(), so it needs a <SafeAreaProvider> ancestor while open.

Usage#

Drive the popup from a trigger session: feed the editor's text and caret to the manager, and render the popup whenever a session is active.

import { component } from '@sigx/lynx';
import { SuggestionPopup, createTriggerSessionManager } from '@sigx/lynx-markdown/editor';

export const Mentions = component(({ signal }) => {
  const state = signal({ session: null as any });

  const sessions = createTriggerSessionManager({
    triggers: [{ char: '@', search: (q) => findPeople(q) }],
    onUpdate: (session) => (state.session = session),
  });

  return () => state.session && (
    <SuggestionPopup
      items={state.session.items}
      caretRect={state.session.caretRect}
      containerFrame={state.session.containerFrame}
      activeIndex={state.session.activeIndex}
      onSelect={(item) => sessions.close()}
    />
  );
});

Whitespace, caret exits, blur, and selection all close the session for free — the manager derives state purely from bindchange text and the collapsed caret offset.

Props#

See the API reference for createTriggerSessionManager, TriggerSession, and the trigger contract types.