feat: page mode shortcut (#2985)

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx

@@ -1,8 +1,10 @@
+import { Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtom } from 'jotai';
 import type { CSSProperties } from 'react';
+import { useEffect } from 'react';
 
 import { pageSettingFamily } from '../../../../atoms';
 import type { BlockSuiteWorkspace } from '../../../../shared';
@@ -30,39 +32,59 @@ export const EditorModeSwitch = ({
   const t = useAFFiNEI18N();
   assertExists(pageMeta);
   const { trash } = pageMeta;
-
+  useEffect(() => {
-  return (
+    const keydown = (e: KeyboardEvent) => {
-    <StyledEditorModeSwitch
+      if ((e.key === 's' && e.metaKey) || (e.key === 's' && e.altKey)) {
-      style={style}
+        e.preventDefault();
-      switchLeft={currentMode === 'page'}
+        setSetting(setting => {
-      showAlone={trash}
+          if (setting?.mode !== 'page') {
-    >
+            toast(t['com.affine.pageMode']());
-      <PageSwitchItem
-        data-testid="switch-page-mode-button"
-        active={currentMode === 'page'}
-        hide={trash && currentMode !== 'page'}
-        onClick={() => {
-          setSetting(setting => {
-            if (setting?.mode !== 'page') {
-              toast(t['com.affine.pageMode']());
-            }
             return { ...setting, mode: 'page' };
-          });
+          } else {
-        }}
+            toast(t['com.affine.edgelessMode']());
-      />
-      <EdgelessSwitchItem
-        data-testid="switch-edgeless-mode-button"
-        active={currentMode === 'edgeless'}
-        hide={trash && currentMode !== 'edgeless'}
-        onClick={() => {
-          setSetting(setting => {
-            if (setting?.mode !== 'edgeless') {
-              toast(t['com.affine.pageMode']());
-            }
             return { ...setting, mode: 'edgeless' };
-          });
+          }
-        }}
+        });
-      />
+      }
-    </StyledEditorModeSwitch>
+    };
+    document.addEventListener('keydown', keydown, { capture: true });
+    return () =>
+      document.removeEventListener('keydown', keydown, { capture: true });
+  }, [setSetting, t]);
+  return (
+    <Tooltip content={'Switch ⌘ + S'}>
+      <StyledEditorModeSwitch
+        style={style}
+        switchLeft={currentMode === 'page'}
+        showAlone={trash}
+      >
+        <PageSwitchItem
+          data-testid="switch-page-mode-button"
+          active={currentMode === 'page'}
+          hide={trash && currentMode !== 'page'}
+          onClick={() => {
+            setSetting(setting => {
+              if (setting?.mode !== 'page') {
+                toast(t['com.affine.pageMode']());
+              }
+              return { ...setting, mode: 'page' };
+            });
+          }}
+        />
+        <EdgelessSwitchItem
+          data-testid="switch-edgeless-mode-button"
+          active={currentMode === 'edgeless'}
+          hide={trash && currentMode !== 'edgeless'}
+          onClick={() => {
+            setSetting(setting => {
+              if (setting?.mode !== 'edgeless') {
+                toast(t['com.affine.edgelessMode']());
+              }
+              return { ...setting, mode: 'edgeless' };
+            });
+          }}
+        />
+      </StyledEditorModeSwitch>
+    </Tooltip>
   );
 };

apps/web/src/hooks/affine/use-shortcuts.ts

@@ -91,6 +91,7 @@ export const useWinEdgelessKeyboardShortcuts = (): ShortcutTip => {
       [t['Pen']()]: 'P',
       [t['Hand']()]: 'H',
       [t['Note']()]: 'N',
+      ['Switch']: 'Alt + S',
       // not implement yet
       // [t['Group']()]: 'Ctrl + G',
       // [t['Ungroup']()]: 'Ctrl + Shift + G',
@@ -122,6 +123,7 @@ export const useMacPageKeyboardShortcuts = (): ShortcutTip => {
       [t['Increase indent']()]: 'Tab',
       [t['Reduce indent']()]: '⇧+Tab',
       [t['Group as Database']()]: '⌘ + G',
+      ['Switch']: '⌘ + S',
       // not implement yet
       // [t['Move Up']()]: '⌘ + ⌥ + ↑',
       // [t['Move Down']()]: '⌘ + ⌥ + ↓',
@@ -176,6 +178,7 @@ export const useWinPageKeyboardShortcuts = (): ShortcutTip => {
       [t['Increase indent']()]: 'Tab',
       [t['Reduce indent']()]: 'Shift+Tab',
       [t['Group as Database']()]: 'Ctrl + G',
+      ['Switch']: 'Alt + S',
       // not implement yet
       // [t['Move Up']()]: 'Ctrl + Alt + ↑',
       // [t['Move Down']()]: 'Ctrl + Alt + ↓',