diff --git a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx index 9c4e5d54b39..728fb4c51a6 100644 --- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx +++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx @@ -207,7 +207,6 @@ export function LexicalMenu({ // groups filtering is already handled in SlashMenu/index.tsx. Thus, groups always contains the matching items. groups, menuRenderFn, - onSelectItem, resolution, shouldSplitNodeWithQuery = false, }: { @@ -216,7 +215,6 @@ export function LexicalMenu({ editor: LexicalEditor groups: Array menuRenderFn: MenuRenderFn - onSelectItem: (item: SlashMenuItem, closeMenu: () => void, matchingString: string) => void resolution: MenuResolution shouldSplitNodeWithQuery?: boolean }): JSX.Element | null { @@ -254,6 +252,8 @@ export function LexicalMenu({ const selectItemAndCleanUp = useCallback( (selectedItem: SlashMenuItem) => { + close() + editor.update( () => { const textNodeContainingQuery = @@ -265,11 +265,17 @@ export function LexicalMenu({ textNodeContainingQuery.remove() } }, - { discrete: true }, + { + onUpdate() { + selectedItem.onSelect({ + editor, + queryString: resolution.match ? resolution.match.matchingString : '', + }) + }, + }, ) - onSelectItem(selectedItem, close, resolution.match ? resolution.match.matchingString : '') }, - [editor, shouldSplitNodeWithQuery, resolution.match, onSelectItem, close], + [editor, shouldSplitNodeWithQuery, resolution.match, close], ) useEffect(() => { diff --git a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx index 736f475397e..c07250bc66d 100644 --- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx +++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx @@ -1,11 +1,5 @@ 'use client' -import type { - LexicalCommand, - LexicalEditor, - ParagraphNode, - RangeSelection, - TextNode, -} from 'lexical' +import type { LexicalCommand, LexicalEditor, ParagraphNode, RangeSelection } from 'lexical' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js' import { mergeRegister } from '@lexical/utils' @@ -21,7 +15,7 @@ import * as React from 'react' import type { MenuTextMatch, TriggerFn } from '../useMenuTriggerMatch.js' import type { MenuRenderFn, MenuResolution } from './LexicalMenu.js' -import type { SlashMenuGroupInternal, SlashMenuItem } from './types.js' +import type { SlashMenuGroupInternal } from './types.js' import { LexicalMenu, useMenuAnchorRef } from './LexicalMenu.js' @@ -110,7 +104,6 @@ export type TypeaheadMenuPluginProps = { onClose?: () => void onOpen?: (resolution: MenuResolution) => void onQueryChange: (matchingString: null | string) => void - onSelectItem: (item: SlashMenuItem, closeMenu: () => void, matchingString: string) => void triggerFn: TriggerFn } @@ -126,7 +119,6 @@ export function LexicalTypeaheadMenuPlugin({ onClose, onOpen, onQueryChange, - onSelectItem, triggerFn, }: TypeaheadMenuPluginProps): JSX.Element | null { const [editor] = useLexicalComposerContext() @@ -244,7 +236,6 @@ export function LexicalTypeaheadMenuPlugin({ editor={editor} groups={groups} menuRenderFn={menuRenderFn} - onSelectItem={onSelectItem} resolution={resolution} shouldSplitNodeWithQuery /> diff --git a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.tsx b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.tsx index c652c77f448..a0a17378e00 100644 --- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.tsx +++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.tsx @@ -181,15 +181,6 @@ export function SlashMenuPlugin({ schemaPath, ]) - const onSelectItem = useCallback( - (selectedItem: SlashMenuItemType, closeMenu: () => void, matchingString: string) => { - closeMenu() - - selectedItem.onSelect({ editor, queryString: matchingString }) - }, - [editor], - ) - return ( )