Skip to main content

@lexical/react/LexicalTypeaheadMenuPlugin

Type Aliases​

MenuTextMatch = object

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

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

matchingString​

matchingString: string

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

replaceableString​

replaceableString: string

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

TriggerFn​

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

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

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

Props for the LexicalTypeaheadMenuPlugin component.

Type Parameters​

TOption​

TOption extends MenuOption

Properties​

anchorClassName?​

optional anchorClassName?: string

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

commandPriority?​

optional commandPriority?: CommandListenerPriority

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

ignoreEntityBoundary?​

optional ignoreEntityBoundary?: boolean

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

optional menuRenderFn?: MenuRenderFn<TOption>

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

onClose?​

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

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

Returns​

void | PromiseLike<void>

onOpen?​

optional onOpen?: (resolution) => void

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

Parameters​
resolution​

MenuResolution

Returns​

void

onQueryChange​

onQueryChange: (matchingString) => void

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

Parameters​
matchingString​

string | null

Returns​

void

onSelectOption​

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

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

Parameters​
option​

TOption

textNodeContainingQuery​

TextNode | null

closeMenu​

() => void

matchingString​

string

Returns​

void

options​

options: TOption[]

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

parent?​

optional parent?: HTMLElement

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

preselectFirstItem?​

optional preselectFirstItem?: boolean

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

triggerFn​

triggerFn: TriggerFn

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

Variables​

getScrollParent​

const getScrollParent: (element, includeHidden) => HTMLElement | HTMLBodyElement = getScrollParent_

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

Walks up from element and returns the nearest scrollable ancestor (or ownerDocument.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.

The walk crosses ShadowRoot→host (via getParentElement) so a shadow-mounted editor's scroll parent is found in the enclosing light-DOM ancestor chain, and the styles / body are resolved through the element's own realm so an iframe-mounted editor stays inside its document.

Parameters​

element​

HTMLElement

includeHidden​

boolean

Returns​

HTMLElement | HTMLBodyElement

Deprecated​

Moved to @lexical/utils. Import getScrollParent from there.

PUNCTUATION​

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

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

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

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​

LexicalTypeaheadMenuPlugin()​

LexicalTypeaheadMenuPlugin<TOption>(__namedParameters): Element | null

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

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

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

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