fix(richtext-lexical): slash menu query doesn't disappear after selec…

…ting slash menu item (payloadcms#9396) This happened only for certain slash menu items like inline blocks. Fixes payloadcms#9326
rilrom · Nov 21, 2024 · 3d0424b · 3d0424b
1 parent 0960290
commit 3d0424b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 26 deletions.
diff --git a/...richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx b/...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<SlashMenuGroupInternal>
   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
@@ -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
@@ -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 (
     <LexicalTypeaheadMenuPlugin
       anchorElem={anchorElem}
@@ -243,7 +234,6 @@ export function SlashMenuPlugin({
           : null
       }
       onQueryChange={setQueryString}
-      onSelectItem={onSelectItem}
       triggerFn={checkForTriggerMatch}
     />
   )