Skip to main content

@lexical/react/LexicalTypeaheadMenuPlugin

Type Aliases​

MenuTextMatch = object

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

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:53

matchingString​

matchingString: string

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

replaceableString​

replaceableString: string

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

TriggerFn​

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

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

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:124

Props for the LexicalTypeaheadMenuPlugin component.

Type Parameters​

TOption​

TOption extends MenuOption

Properties​

anchorClassName?​

optional anchorClassName?: string

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

commandPriority?​

optional commandPriority?: CommandListenerPriority

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

ignoreEntityBoundary?​

optional ignoreEntityBoundary?: boolean

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

optional menuRenderFn?: MenuRenderFn<TOption>

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

onClose?​

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

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

Returns​

void | PromiseLike<void>

onOpen?​

optional onOpen?: (resolution) => void

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

Parameters​
resolution​

MenuResolution

Returns​

void

onQueryChange​

onQueryChange: (matchingString) => void

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

Parameters​
matchingString​

string | null

Returns​

void

onSelectOption​

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

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

Parameters​
option​

TOption

textNodeContainingQuery​

TextNode | null

closeMenu​

() => void

matchingString​

string

Returns​

void

options​

options: TOption[]

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

parent?​

optional parent?: HTMLElement

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

preselectFirstItem?​

optional preselectFirstItem?: boolean

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

triggerFn​

triggerFn: TriggerFn

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

Functions​

LexicalTypeaheadMenuPlugin()​

LexicalTypeaheadMenuPlugin<TOption>(__namedParameters): Element | null

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

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.

useDynamicPositioning()​

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

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

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​

getScrollParent​

Re-exports getScrollParent

Re-exports MenuOption

Re-exports MenuRenderFn

Re-exports MenuResolution

PUNCTUATION​

Re-exports PUNCTUATION

SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND​

Re-exports SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND

useBasicTypeaheadTriggerMatch​

Re-exports useBasicTypeaheadTriggerMatch