fix: page mode shortcut (#3097)

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

@@ -9,7 +9,7 @@ import { useEffect } from 'react';
 import { pageSettingFamily } from '../../../../atoms';
 import type { BlockSuiteWorkspace } from '../../../../shared';
 import { toast } from '../../../../utils';
-import { StyledEditorModeSwitch } from './style';
+import { StyledEditorModeSwitch, StyledKeyboardItem } from './style';
 import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
 
 export type EditorModeSwitchProps = {
@@ -18,7 +18,16 @@ export type EditorModeSwitchProps = {
   pageId: string;
   style?: CSSProperties;
 };
-
+const TooltipContent = () => {
+  return (
+    <div>
+      Switch
+      <StyledKeyboardItem>
+        {!environment.isServer && environment.isMacOs ? '⌥ + S' : 'Alt + S'}
+      </StyledKeyboardItem>
+    </div>
+  );
+};
 export const EditorModeSwitch = ({
   style,
   blockSuiteWorkspace,
@@ -34,7 +43,11 @@ export const EditorModeSwitch = ({
   const { trash } = pageMeta;
   useEffect(() => {
     const keydown = (e: KeyboardEvent) => {
-      if ((e.key === 's' && e.metaKey) || (e.key === 's' && e.altKey)) {
+      if (
+        !environment.isServer && environment.isMacOs
+          ? e.key === 'ß'
+          : e.key === 's' && e.altKey
+      ) {
         e.preventDefault();
         setSetting(setting => {
           if (setting?.mode !== 'page') {
@@ -51,8 +64,9 @@ export const EditorModeSwitch = ({
     return () =>
       document.removeEventListener('keydown', keydown, { capture: true });
   }, [setSetting, t]);
+
   return (
-    <Tooltip content={'Switch ⌘ + S'}>
+    <Tooltip content={<TooltipContent />}>
       <StyledEditorModeSwitch
         style={style}
         switchLeft={currentMode === 'page'}

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts

@@ -53,3 +53,14 @@ export const StyledSwitchItem = styled('button')<{
     },
   };
 });
+
+export const StyledKeyboardItem = styled('span')(() => {
+  return {
+    marginLeft: '5px',
+    fontSize: '4px',
+    paddingLeft: '5px',
+    paddingRight: '5px',
+    backgroundColor: '#55545A',
+    borderRadius: '4px',
+  };
+});

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

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

packages/component/src/ui/tooltip/tooltip.tsx

@@ -1,5 +1,5 @@
-import type { TooltipProps } from '@mui/material';
 import { NoSsr } from '@mui/material';
+import type { ReactElement } from 'react';
 
 import { styled } from '../../styles';
 import { Popper, type PopperProps } from '../popper';
@@ -18,6 +18,11 @@ const StyledTooltip = styled(StyledPopperContainer)(() => {
   };
 });
 
+interface TooltipProps {
+  content: string | ReactElement<any, any>;
+  placement?: PopperProps['placement'];
+  children: ReactElement<any, any>;
+}
 export const Tooltip = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
   const { content, placement = 'top-start', children } = props;
   return (

packages/i18n/src/resources/en.json

@@ -405,5 +405,6 @@
   "Workspace Settings with name": "{{name}}'s Settings",
   "You can customize your workspace here.": "You can customise your workspace here.",
   "Font Style": "Font Style",
-  "Choose your font style": "Choose your font style"
+  "Choose your font style": "Choose your font style",
+  "Switch": "Switch"
 }