@sigx/lynx-markdown · Stable · Component library

SuggestionPopup#

The neutral suggestion popup for trigger sessions such as @-mentions. It positions itself from a caret rect and the container's frame, picks the side of the caret with room, and clamps above the keyboard; rows are replaceable.

Import#

TSX

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

MarkdownEditor renders this popup for you — inside the block the session belongs to — whenever a plugin's trigger opens a session. You rarely mount it yourself:

To style it, pass suggestionPopup to MarkdownEditor (see below).
To replace it with your own list, pass suggestions="none" and renderSuggestions to MarkdownEditor — see Rendering suggestions yourself.
To skin the rows, give the trigger a renderItem (createMentionPlugin({ renderItem }), createEmojiPlugin({ renderItem })).

Sessions come from the core's trigger machinery: they are derived from the block's text and caret, so whitespace, a caret leaving the run, blur and a selection all close them.

The popup reads keyboard height through @sigx/lynx-keyboard's useKeyboard(), so it needs a <SafeAreaProvider> ancestor.

Styling through the editor#

TSX

// Auto-tinted from the dark editor text — no popup colours needed.
<MarkdownEditor value={draft} onChange={save} textColor="#e5e7eb" plugins={plugins} />

// Or set only the fields you care about; the rest still auto-tint.
<MarkdownEditor value={draft} onChange={save} suggestionPopup={{ width: 280, placement: 'above' }} plugins={plugins} />

SuggestionPopupStyle fields are all optional: width (dp, default 240, clamped to the editor width), maxHeight (dp, default 220), placement ('auto' measures for room; a composer pinned to the bottom of the screen can pin 'above'), surfaceColor, borderColor, activeColor, textColor and class. derivePopupStyleFromText(textColor) is the auto-tint the editor applies.

Props#

Prop	Type	Description
`items`	`TriggerItem[]`	Rows for the active session.
`caretRect`	`CaretRect \| null`	Caret rectangle the popup anchors to.
`containerFrame`	`ElementLayout \| null`	Viewport frame of the relative container.
`onMeasureRequest`	`() => void`	Asks the owner to re-measure `containerFrame` — on mount and whenever the keyboard changes.
`renderItem`	`SuggestionRenderItem`	Per-row render override: `(item, active) => JSXElement`.
`onSelect`	`(item: TriggerItem) => void`	Fired when a row is chosen.
`activeIndex`	`number`	Highlighted row; `-1` or omitted means none.
`maxHeight` / `width`	`number`	Size in dp.
`placement`	`'auto' \| 'above' \| 'below'`	Pin the side of the caret.
`surfaceColor` / `borderColor` / `activeColor` / `textColor`	`string`	Colours; neutral defaults.
`class`	`string`	Extra classes on the popup root.

See the API reference for SuggestionPopupStyle and the trigger types.