feat(core): add context menu for navigation and explorer (#13216)

## Summary by CodeRabbit * **New Features** * Introduced a customizable context menu component for desktop interfaces, enabling right-click menus in various UI elements. * Added context menu support to document list items and navigation tree nodes, allowing users to access additional operations via right-click. * **Improvements** * Enhanced submenu and menu item components to support both dropdown and context menu variants based on context. * Updated click handling in workbench links to prevent unintended actions on non-left mouse button clicks. * **Chores** * Added `@radix-ui/react-context-menu` as a dependency to relevant frontend packages.
2026-02-13 12:55:00 +00:00 · 2025-07-16 12:40:10 +08:00
parent d44771dfe9
commit cdff5c3117
12 changed files with 247 additions and 106 deletions
--- a/packages/frontend/component/src/ui/menu/desktop/context-menu.tsx
+++ b/packages/frontend/component/src/ui/menu/desktop/context-menu.tsx
@@ -0,0 +1,58 @@
+import * as RadixContextMenu from '@radix-ui/react-context-menu';
+import clsx from 'clsx';
+import type { RefAttributes } from 'react';
+
+import * as styles from '../styles.css';
+import { DesktopMenuContext } from './context';
+import * as desktopStyles from './styles.css';
+
+export type ContextMenuProps = RadixContextMenu.ContextMenuProps &
+  RadixContextMenu.ContextMenuTriggerProps &
+  RefAttributes<HTMLSpanElement> & {
+    items: React.ReactNode;
+    contentProps?: RadixContextMenu.ContextMenuContentProps;
+  };
+
+const ContextMenuContextValue = {
+  type: 'context-menu',
+} as const;
+
+export const ContextMenu = ({
+  children,
+  onOpenChange,
+  dir,
+  modal,
+  items,
+  contentProps,
+  ...props
+}: ContextMenuProps) => {
+  return (
+    <DesktopMenuContext.Provider value={ContextMenuContextValue}>
+      <RadixContextMenu.Root
+        onOpenChange={onOpenChange}
+        dir={dir}
+        modal={modal}
+      >
+        <RadixContextMenu.Trigger {...props}>
+          {children}
+        </RadixContextMenu.Trigger>
+        <RadixContextMenu.Portal>
+          <RadixContextMenu.Content
+            className={clsx(
+              styles.menuContent,
+              desktopStyles.contentAnimation,
+              contentProps?.className
+            )}
+            style={{
+              zIndex: 'var(--affine-z-index-popover)',
+              ...contentProps?.style,
+            }}
+            {...contentProps}
+          >
+            {items}
+          </RadixContextMenu.Content>
+        </RadixContextMenu.Portal>
+      </RadixContextMenu.Root>
+    </DesktopMenuContext.Provider>
+  );
+};
--- a/packages/frontend/component/src/ui/menu/desktop/context.ts
+++ b/packages/frontend/component/src/ui/menu/desktop/context.ts
@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+interface DesktopMenuContextValue {
+  type: 'dropdown-menu' | 'context-menu';
+}
+
+export const DesktopMenuContext = createContext<DesktopMenuContextValue>({
+  type: 'dropdown-menu',
+});
--- a/packages/frontend/component/src/ui/menu/desktop/item.tsx
+++ b/packages/frontend/component/src/ui/menu/desktop/item.tsx
@@ -1,13 +1,30 @@
+import * as ContextMenu from '@radix-ui/react-context-menu';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { useContext } from 'react';

 import type { MenuItemProps } from '../menu.types';
 import { useMenuItem } from '../use-menu-item';
+import { DesktopMenuContext } from './context';

 export const DesktopMenuItem = (props: MenuItemProps) => {
+  const { type } = useContext(DesktopMenuContext);
  const { className, children, otherProps } = useMenuItem(props);
-  return (
-    <DropdownMenu.Item className={className} {...otherProps}>
-      {children}
-    </DropdownMenu.Item>
-  );
+
+  if (type === 'dropdown-menu') {
+    return (
+      <DropdownMenu.Item className={className} {...otherProps}>
+        {children}
+      </DropdownMenu.Item>
+    );
+  }
+
+  if (type === 'context-menu') {
+    return (
+      <ContextMenu.Item className={className} {...otherProps}>
+        {children}
+      </ContextMenu.Item>
+    );
+  }
+
+  return null;
 };
--- a/packages/frontend/component/src/ui/menu/desktop/root.tsx
+++ b/packages/frontend/component/src/ui/menu/desktop/root.tsx
@@ -4,8 +4,13 @@ import React, { useCallback, useImperativeHandle, useState } from 'react';

 import type { MenuProps } from '../menu.types';
 import * as styles from '../styles.css';
+import { DesktopMenuContext } from './context';
 import * as desktopStyles from './styles.css';

+const MenuContextValue = {
+  type: 'dropdown-menu',
+} as const;
+
 export const DesktopMenu = ({
  children,
  items,
@@ -53,37 +58,39 @@ export const DesktopMenu = ({

  const ContentWrapper = noPortal ? React.Fragment : DropdownMenu.Portal;
  return (
-    <DropdownMenu.Root
-      modal={modal ?? false}
-      open={finalOpen}
-      onOpenChange={handleOpenChange}
-      {...rootOptions}
-    >
-      <DropdownMenu.Trigger
-        asChild
-        onClick={e => {
-          e.stopPropagation();
-          e.preventDefault();
-        }}
+    <DesktopMenuContext.Provider value={MenuContextValue}>
+      <DropdownMenu.Root
+        modal={modal ?? false}
+        open={finalOpen}
+        onOpenChange={handleOpenChange}
+        {...rootOptions}
      >
-        {children}
-      </DropdownMenu.Trigger>
-
-      <ContentWrapper {...portalOptions}>
-        <DropdownMenu.Content
-          className={clsx(
-            styles.menuContent,
-            desktopStyles.contentAnimation,
-            className
-          )}
-          sideOffset={4}
-          align="start"
-          style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
-          {...otherContentOptions}
+        <DropdownMenu.Trigger
+          asChild
+          onClick={e => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
        >
-          {items}
-        </DropdownMenu.Content>
-      </ContentWrapper>
-    </DropdownMenu.Root>
+          {children}
+        </DropdownMenu.Trigger>
+
+        <ContentWrapper {...portalOptions}>
+          <DropdownMenu.Content
+            className={clsx(
+              styles.menuContent,
+              desktopStyles.contentAnimation,
+              className
+            )}
+            sideOffset={4}
+            align="start"
+            style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
+            {...otherContentOptions}
+          >
+            {items}
+          </DropdownMenu.Content>
+        </ContentWrapper>
+      </DropdownMenu.Root>
+    </DesktopMenuContext.Provider>
  );
 };
--- a/packages/frontend/component/src/ui/menu/desktop/sub.tsx
+++ b/packages/frontend/component/src/ui/menu/desktop/sub.tsx
@@ -1,11 +1,13 @@
 import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
+import * as ContextMenu from '@radix-ui/react-context-menu';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';

 import type { MenuSubProps } from '../menu.types';
 import * as styles from '../styles.css';
 import { useMenuItem } from '../use-menu-item';
+import { DesktopMenuContext } from './context';

 export const DesktopMenuSub = ({
  children: propsChildren,
@@ -19,12 +21,37 @@ export const DesktopMenuSub = ({
    ...otherSubContentOptions
  } = {},
 }: MenuSubProps) => {
+  const { type } = useContext(DesktopMenuContext);
  const { className, children, otherProps } = useMenuItem({
    children: propsChildren,
    suffixIcon: <ArrowRightSmallIcon />,
    ...triggerOptions,
  });

+  const contentClassName = useMemo(
+    () => clsx(styles.menuContent, subContentClassName),
+    [subContentClassName]
+  );
+
+  if (type === 'context-menu') {
+    return (
+      <ContextMenu.Sub defaultOpen={defaultOpen} {...otherSubOptions}>
+        <ContextMenu.SubTrigger className={className} {...otherProps}>
+          {children}
+        </ContextMenu.SubTrigger>
+        <ContextMenu.Portal {...portalOptions}>
+          <ContextMenu.SubContent
+            className={contentClassName}
+            style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
+            {...otherSubContentOptions}
+          >
+            {items}
+          </ContextMenu.SubContent>
+        </ContextMenu.Portal>
+      </ContextMenu.Sub>
+    );
+  }
+
  return (
    <DropdownMenu.Sub defaultOpen={defaultOpen} {...otherSubOptions}>
      <DropdownMenu.SubTrigger className={className} {...otherProps}>
@@ -32,10 +59,7 @@ export const DesktopMenuSub = ({
      </DropdownMenu.SubTrigger>
      <DropdownMenu.Portal {...portalOptions}>
        <DropdownMenu.SubContent
-          className={useMemo(
-            () => clsx(styles.menuContent, subContentClassName),
-            [subContentClassName]
-          )}
+          className={contentClassName}
          style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
          {...otherSubContentOptions}
        >
--- a/packages/frontend/component/src/ui/menu/index.ts
+++ b/packages/frontend/component/src/ui/menu/index.ts
@@ -1,4 +1,5 @@
 export * from './menu.types';
+import { ContextMenu } from './desktop/context-menu';
 import { DesktopMenuItem } from './desktop/item';
 import { DesktopMenu } from './desktop/root';
 import { DesktopMenuSeparator } from './desktop/separator';
@@ -19,6 +20,7 @@ const MenuSub = BUILD_CONFIG.isMobileEdition ? MobileMenuSub : DesktopMenuSub;
 const Menu = BUILD_CONFIG.isMobileEdition ? MobileMenu : DesktopMenu;

 export {
+  ContextMenu,
  DesktopMenu,
  DesktopMenuItem,
  DesktopMenuSeparator,