Skip to main content

@lexical/react/LexicalTypeaheadMenuPlugin

Type Aliases​

MenuTextMatch = object

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:48

Describes where a typeahead trigger matched the text before the cursor: the leadOffset where the match starts, the captured matchingString (the query after the trigger), and the replaceableString (the full matched text, including the trigger, that should be replaced when an option is selected).

Properties​

leadOffset​

leadOffset: number

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:49

matchingString​

matchingString: string

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:50

replaceableString​

replaceableString: string

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:51

TriggerFn​

TriggerFn = (text, editor) => MenuTextMatch | null

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:771

Detects whether the text before the cursor should open a typeahead menu. Given the current text and editor, it returns a MenuTextMatch describing the match, or null if there is none. See useBasicTypeaheadTriggerMatch for a common implementation.

Parameters​

text​

string

editor​

LexicalEditor

Returns​

MenuTextMatch | null

TypeaheadMenuPluginProps​

TypeaheadMenuPluginProps<TOption> = object

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:223

Props for the LexicalTypeaheadMenuPlugin component.

Type Parameters​

TOption​

TOption extends MenuOption

Properties​

anchorClassName?​

optional anchorClassName?: string

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:236

commandPriority?​

optional commandPriority?: CommandListenerPriority

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:237

ignoreEntityBoundary?​

optional ignoreEntityBoundary?: boolean

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:240

optional menuRenderFn?: MenuRenderFn<TOption>

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:233

onClose?​

optional onClose?: () => void | PromiseLike<void>

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:235

Returns​

void | PromiseLike<void>

onOpen?​

optional onOpen?: (resolution) => void

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:234

Parameters​
resolution​

MenuResolution

Returns​

void

onQueryChange​

onQueryChange: (matchingString) => void

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:224

Parameters​
matchingString​

string | null

Returns​

void

onSelectOption​

onSelectOption: (option, textNodeContainingQuery, closeMenu, matchingString) => void

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:225

Parameters​
option​

TOption

textNodeContainingQuery​

TextNode | null

closeMenu​

() => void

matchingString​

string

Returns​

void

options​

options: TOption[]

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:231

parent?​

optional parent?: HTMLElement

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:238

preselectFirstItem?​

optional preselectFirstItem?: boolean

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:239

triggerFn​

triggerFn: TriggerFn

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:232

Variables​

PUNCTUATION​

const PUNCTUATION: "\.,\+\*\?\$\@\|#{}\(\)\^\-\[\]\\/!%'"=<>_:;" = '\.,\+\*\?\$\@\|#{}\(\)\^\-\[\]\\/!%'"=<>_:;'

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:41

The default set of punctuation characters (as a character-class fragment) that terminate a typeahead query. Used as the default punctuation option of useBasicTypeaheadTriggerMatch.

SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND​

const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{ index: number; option: MenuOption; }>

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:158

Command dispatched while the typeahead menu is open to scroll the option at the given index into view. The default menu renderer listens for it; custom MenuRenderFns can handle it to implement their own scrolling.

Functions​

getScrollParent()​

getScrollParent(element, includeHidden): HTMLElement | HTMLBodyElement

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:122

Walks up from element and returns the nearest scrollable ancestor (or document.body if none is found), used to keep the active typeahead option scrolled into view. Set includeHidden to also treat overflow: hidden ancestors as scroll parents.

Parameters​

element​

HTMLElement

includeHidden​

boolean

Returns​

HTMLElement | HTMLBodyElement

LexicalTypeaheadMenuPlugin()​

LexicalTypeaheadMenuPlugin<TOption>(__namedParameters): Element | null

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:252

Renders a floating menu (such as an @-mention or slash-command picker) while the text before the cursor matches triggerFn. As the user types, the current query is reported via onQueryChange; supply the options to show and an onSelectOption handler to apply the chosen option. Use useBasicTypeaheadTriggerMatch to build a simple triggerFn.

Type Parameters​

TOption​

TOption extends MenuOption

Parameters​

__namedParameters​

TypeaheadMenuPluginProps<TOption>

Returns​

Element | null

The floating menu element, or null when no query is active.

useBasicTypeaheadTriggerMatch()​

useBasicTypeaheadTriggerMatch(trigger, __namedParameters): TriggerFn

Defined in: packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx:172

Builds a TriggerFn for the common case of a single-character trigger (such as @ or #) followed by a query. The returned function matches when the trigger is preceded by whitespace or the start of the line and is followed by between minLength and maxLength non-punctuation characters (optionally allowing whitespace).

Parameters​

trigger​

string

__namedParameters​
allowWhitespace?​

boolean = false

maxLength?​

number = 75

minLength?​

number = 1

punctuation?​

string = PUNCTUATION

Returns​

TriggerFn

A memoized trigger function for LexicalTypeaheadMenuPlugin.

useDynamicPositioning()​

useDynamicPositioning(resolution, targetElement, onReposition, onVisibilityChange?): void

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:236

Keeps an open menu aligned with its trigger by calling onReposition on scroll, window resize, and target element resize while resolution is set. Optionally calls onVisibilityChange when the trigger enters or leaves its nearest scroll container's viewport.

Parameters​

resolution​

MenuResolution | null

targetElement​

HTMLElement | null

onReposition​

() => void

onVisibilityChange?​

(isInView) => void

Returns​

void

References​

Re-exports MenuOption

Re-exports MenuRenderFn

Re-exports MenuResolution