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,8 +32,27 @@ export const EditorModeSwitch = ({
   const t = useAFFiNEI18N();
   assertExists(pageMeta);
   const { trash } = pageMeta;
-
+  useEffect(() => {
+    const keydown = (e: KeyboardEvent) => {
+      if ((e.key === 's' && e.metaKey) || (e.key === 's' && e.altKey)) {
+        e.preventDefault();
+        setSetting(setting => {
+          if (setting?.mode !== 'page') {
+            toast(t['com.affine.pageMode']());
+            return { ...setting, mode: 'page' };
+          } else {
+            toast(t['com.affine.edgelessMode']());
+            return { ...setting, mode: 'edgeless' };
+          }
+        });
+      }
+    };
+    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'}
@@ -57,12 +78,13 @@ export const EditorModeSwitch = ({
           onClick={() => {
             setSetting(setting => {
               if (setting?.mode !== 'edgeless') {
-              toast(t['com.affine.pageMode']());
+                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 + ↓',