diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx index 1223cf548c..fcbf436c05 100644 --- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx +++ b/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; - - return ( - - { - setSetting(setting => { - if (setting?.mode !== 'page') { - toast(t['com.affine.pageMode']()); - } + 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' }; - }); - }} - /> - { - setSetting(setting => { - if (setting?.mode !== 'edgeless') { - toast(t['com.affine.pageMode']()); - } + } 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 ( + + + { + setSetting(setting => { + if (setting?.mode !== 'page') { + toast(t['com.affine.pageMode']()); + } + return { ...setting, mode: 'page' }; + }); + }} + /> + { + setSetting(setting => { + if (setting?.mode !== 'edgeless') { + toast(t['com.affine.edgelessMode']()); + } + return { ...setting, mode: 'edgeless' }; + }); + }} + /> + + ); }; diff --git a/apps/web/src/hooks/affine/use-shortcuts.ts b/apps/web/src/hooks/affine/use-shortcuts.ts index e94bcf3161..ffc59e1759 100644 --- a/apps/web/src/hooks/affine/use-shortcuts.ts +++ b/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 + ↓',