fix(visual-editing): correct insert after action, add dismiss (#2057)

* fix(visual-editing): return correct insert after action * fix(visual-editing): dismiss context menu on action
sanity-io · Oct 28, 2024 · af5a881 · af5a881
1 parent eb62091
commit af5a881
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/visual-editing/src/ui/context-menu/ContextMenu.tsx b/packages/visual-editing/src/ui/context-menu/ContextMenu.tsx
@@ -10,7 +10,7 @@ import {
   Text,
   type PopoverMargins,
 } from '@sanity/ui'
-import {useMemo, type FunctionComponent} from 'react'
+import {useCallback, useMemo, type FunctionComponent} from 'react'
 import type {ContextMenuNode, ContextMenuProps} from '../../types'
 import {getNodeIcon} from '../../util/getNodeIcon'
 import {useDocuments} from '../optimistic-state/useDocuments'
@@ -20,8 +20,15 @@ import {getContextMenuItems} from './contextMenuItems'
 
 const POPOVER_MARGINS: PopoverMargins = [-4, 4, -4, 4]
 
-function ContextMenuItem(props: {node: ContextMenuNode}) {
-  const {node} = props
+function ContextMenuItem(props: {node: ContextMenuNode; onDismiss?: () => void}) {
+  const {node, onDismiss} = props
+
+  const onClick = useCallback(() => {
+    if (node.type === 'action') {
+      node.action?.()
+      onDismiss?.()
+    }
+  }, [node, onDismiss])
 
   if (node.type === 'divider') {
     return <MenuDivider />
@@ -37,7 +44,7 @@ function ContextMenuItem(props: {node: ContextMenuNode}) {
         space={2}
         text={node.label}
         disabled={!node.action}
-        onClick={node.action}
+        onClick={onClick}
       />
     )
   }
@@ -132,7 +139,7 @@ export const ContextMenu: FunctionComponent<ContextMenuProps> = (props) => {
             <MenuDivider />
 
             {items.map((item, i) => (
-              <ContextMenuItem key={i} node={item} />
+              <ContextMenuItem key={i} node={item} onDismiss={onDismiss} />
             ))}
           </Menu>
         }

diff --git a/packages/visual-editing/src/ui/context-menu/contextMenuItems.ts b/packages/visual-editing/src/ui/context-menu/contextMenuItems.ts
@@ -281,7 +281,7 @@ function getContextMenuUnionItems(context: {
         type: 'action' as const,
         label: t.name === 'block' ? 'Paragraph' : t.title || t.name,
         icon: getNodeIcon(t),
-        action: () => getArrayInsertAction(node, doc, t.name, 'after'),
+        action: getArrayInsertAction(node, doc, t.name, 'after'),
       }
     }),
   })