diff --git a/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx b/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
index 85ac4d2c98..7ca68fc36a 100644
--- a/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
@@ -3,20 +3,48 @@ import { SettingWrapper } from '@affine/component/setting-components';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
+ type ShortcutsInfo,
useEdgelessShortcuts,
useGeneralShortcuts,
useMarkdownShortcuts,
usePageShortcuts,
} from '../../../../../hooks/affine/use-shortcuts';
-import { shortcutRow } from './style.css';
+import { shortcutKey, shortcutKeyContainer, shortcutRow } from './style.css';
+
+const ShortcutsPanel = ({
+ shortcutsInfo,
+}: {
+ shortcutsInfo: ShortcutsInfo;
+}) => {
+ return (
+
+ {Object.entries(shortcutsInfo.shortcuts).map(([title, shortcuts]) => {
+ return (
+
+
{title}
+
+ {shortcuts.map(key => {
+ return (
+
+ {key}
+
+ );
+ })}
+
+
+ );
+ })}
+
+ );
+};
export const Shortcuts = () => {
const t = useAFFiNEI18N();
- const markdownShortcuts = useMarkdownShortcuts();
- const pageShortcuts = usePageShortcuts();
- const edgelessShortcuts = useEdgelessShortcuts();
- const generalShortcuts = useGeneralShortcuts();
+ const markdownShortcutsInfo = useMarkdownShortcuts();
+ const pageShortcutsInfo = usePageShortcuts();
+ const edgelessShortcutsInfo = useEdgelessShortcuts();
+ const generalShortcutsInfo = useGeneralShortcuts();
return (
<>
@@ -25,46 +53,10 @@ export const Shortcuts = () => {
subtitle={t['Check Keyboard Shortcuts quickly']()}
data-testid="keyboard-shortcuts-title"
/>
-
- {Object.entries(generalShortcuts).map(([title, shortcuts]) => {
- return (
-
- {title}
- {shortcuts}
-
- );
- })}
-
-
- {Object.entries(pageShortcuts).map(([title, shortcuts]) => {
- return (
-
- {title}
- {shortcuts}
-
- );
- })}
-
-
- {Object.entries(edgelessShortcuts).map(([title, shortcuts]) => {
- return (
-
- {title}
- {shortcuts}
-
- );
- })}
-
-
- {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
- return (
-
- {title}
- {shortcuts}
-
- );
- })}
-
+
+
+
+
>
);
};
diff --git a/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts b/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts
index cccce6f937..a6a1058738 100644
--- a/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts
+++ b/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts
@@ -1,4 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
export const shortcutRow = style({
height: '32px',
@@ -14,8 +14,25 @@ export const shortcutRow = style({
},
});
-globalStyle(`${shortcutRow} .shortcut`, {
- border: '1px solid var(--affine-border-color)',
- borderRadius: '8px',
- padding: '4px 18px',
+export const shortcutKeyContainer = style({
+ display: 'flex',
+});
+export const shortcutKey = style({
+ minWidth: '24px',
+ height: '20px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '0 6px',
+ border: '1px solid var(--affine-border-color)',
+ borderRadius: '4px',
+ background: 'var(--affine-background-tertiary-color)',
+ boxShadow:
+ '0px 6px 4px 0px rgba(255, 255, 255, 0.24) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.10) inset',
+ fontSize: 'var(--affine-font-xs)',
+ selectors: {
+ '&:not(:last-of-type)': {
+ marginRight: '2px',
+ },
+ },
});
diff --git a/apps/core/src/components/pure/shortcuts-modal/index.tsx b/apps/core/src/components/pure/shortcuts-modal/index.tsx
index 58f790a52b..cf101b7ea1 100644
--- a/apps/core/src/components/pure/shortcuts-modal/index.tsx
+++ b/apps/core/src/components/pure/shortcuts-modal/index.tsx
@@ -6,46 +6,80 @@ import {
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
+ type ShortcutsInfo,
useEdgelessShortcuts,
useGeneralShortcuts,
useMarkdownShortcuts,
usePageShortcuts,
} from '../../../hooks/affine/use-shortcuts';
import { KeyboardIcon } from './icons';
-import {
- StyledListItem,
- StyledModalHeader,
- StyledShortcutsModal,
- StyledSubTitle,
- StyledTitle,
-} from './style';
+import * as styles from './style.css';
+// import {
+// StyledListItem,
+// StyledModalHeader,
+// StyledShortcutsModal,
+// StyledSubTitle,
+// StyledTitle,
+// } from './style';
type ModalProps = {
open: boolean;
onClose: () => void;
};
+const ShortcutsPanel = ({
+ shortcutsInfo,
+}: {
+ shortcutsInfo: ShortcutsInfo;
+}) => {
+ return (
+ <>
+
{shortcutsInfo.title}
+
+ {Object.entries(shortcutsInfo.shortcuts).map(([title, shortcuts]) => {
+ return (
+
+
{title}
+
+ {shortcuts.map(key => {
+ return (
+
+ {key}
+
+ );
+ })}
+
+
+ );
+ })}
+ >
+ );
+};
+
export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
const t = useAFFiNEI18N();
- const markdownShortcuts = useMarkdownShortcuts();
- const pageShortcuts = usePageShortcuts();
- const edgelessShortcuts = useEdgelessShortcuts();
- const generalShortcuts = useGeneralShortcuts();
+ const markdownShortcutsInfo = useMarkdownShortcuts();
+ const pageShortcutsInfo = usePageShortcuts();
+ const edgelessShortcutsInfo = useEdgelessShortcuts();
+ const generalShortcutsInfo = useGeneralShortcuts();
return (
-
+
{
onClose();
}}
>
-
-
+
+
{t['Shortcuts']()}
-
+
{
onClose();
}}
/>
-
-
- {t['General']()}
-
- {Object.entries(generalShortcuts).map(([title, shortcuts]) => {
- return (
-
- {title}
- {shortcuts}
-
- );
- })}
- {t['Page']()}
- {Object.entries(pageShortcuts).map(([title, shortcuts]) => {
- return (
-
- {title}
- {shortcuts}
-
- );
- })}
- {t['Edgeless']()}
- {Object.entries(edgelessShortcuts).map(([title, shortcuts]) => {
- return (
-
- {title}
- {shortcuts}
-
- );
- })}
- {t['Markdown Syntax']()}
- {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
- return (
-
- {title}
- {shortcuts}
-
- );
- })}
+
+
+
+
+
-
+
);
};
diff --git a/apps/core/src/components/pure/shortcuts-modal/style.css.ts b/apps/core/src/components/pure/shortcuts-modal/style.css.ts
new file mode 100644
index 0000000000..1f3b633c60
--- /dev/null
+++ b/apps/core/src/components/pure/shortcuts-modal/style.css.ts
@@ -0,0 +1,89 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const shortcutsModal = style({
+ width: '288px',
+ height: '74vh',
+ paddingBottom: '28px',
+ backgroundColor: 'var(--affine-white)',
+ boxShadow: 'var(--affine-popover-shadow)',
+ borderRadius: `var(--affine-popover-radius)`,
+ overflow: 'auto',
+ position: 'fixed',
+ right: '12px',
+ top: '0',
+ bottom: '0',
+ margin: 'auto',
+ zIndex: 'var(--affine-z-index-modal)',
+});
+// export const shortcutsModal = style({
+// color: 'var(--affine-text-primary-color)',
+// fontWeight: '500',
+// fontSize: 'var(--affine-font-sm)',
+// height: '44px',
+// display: 'flex',
+// justifyContent: 'center',
+// alignItems: 'center',
+// svg: {
+// width: '20px',
+// marginRight: '14px',
+// color: 'var(--affine-primary-color)',
+// },
+// });
+export const title = style({
+ color: 'var(--affine-text-primary-color)',
+ fontWeight: '500',
+ fontSize: 'var(--affine-font-sm)',
+ height: '44px',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+});
+
+globalStyle(`${title} svg`, {
+ width: '20px',
+ marginRight: '14px',
+ color: 'var(--affine-primary-color)',
+});
+
+export const subtitle = style({
+ fontWeight: '500',
+ fontSize: 'var(--affine-font-sm)',
+ height: '34px',
+ lineHeight: '36px',
+ marginTop: '28px',
+ padding: '0 16px',
+});
+export const modalHeader = style({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingTop: '8px 4px 0 4px',
+ width: '100%',
+ padding: '8px 16px 0 16px',
+ position: 'sticky',
+ left: '0',
+ top: '0',
+ background: 'var(--affine-white)',
+ transition: 'background-color 0.5s',
+});
+
+export const listItem = style({
+ height: '34px',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ fontSize: 'var(--affine-font-sm)',
+ padding: '0 16px',
+});
+export const keyContainer = style({
+ display: 'flex',
+});
+
+export const key = style({
+ selectors: {
+ '&:not(:last-child)::after': {
+ content: '+',
+ margin: '0 4px',
+ },
+ },
+});
diff --git a/apps/core/src/components/pure/shortcuts-modal/style.ts b/apps/core/src/components/pure/shortcuts-modal/style.ts
deleted file mode 100644
index a94851b139..0000000000
--- a/apps/core/src/components/pure/shortcuts-modal/style.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { displayFlex, styled } from '@affine/component';
-
-export const StyledShortcutsModal = styled('div')(() => ({
- width: '288px',
- height: '74vh',
- paddingBottom: '28px',
- backgroundColor: 'var(--affine-white)',
- boxShadow: 'var(--affine-popover-shadow)',
- borderRadius: `var(--affine-popover-radius)`,
- overflow: 'auto',
- boxRadius: '10px',
- position: 'fixed',
- right: '12px',
- top: '0',
- bottom: '0',
- margin: 'auto',
- zIndex: 'var(--affine-z-index-modal)',
-}));
-export const StyledTitle = styled('div')(() => ({
- color: 'var(--affine-text-primary-color)',
- fontWeight: '500',
- fontSize: 'var(--affine-font-sm)',
- height: '44px',
- ...displayFlex('center', 'center'),
- svg: {
- width: '20px',
- marginRight: '14px',
- color: 'var(--affine-primary-color)',
- },
-}));
-export const StyledSubTitle = styled('div')(() => ({
- fontWeight: '500',
- fontSize: 'var(--affine-font-sm)',
- height: '34px',
- lineHeight: '36px',
- marginTop: '28px',
- padding: '0 16px',
-}));
-export const StyledModalHeader = styled('div')(() => ({
- ...displayFlex('space-between', 'center'),
- paddingTop: '8px 4px 0 4px',
- width: '100%',
- padding: '8px 16px 0 16px',
- position: 'sticky',
- left: '0',
- top: '0',
- background: 'var(--affine-white)',
- transition: 'background-color 0.5s',
-}));
-
-export const StyledListItem = styled('div')(() => ({
- height: '34px',
- ...displayFlex('space-between', 'center'),
- fontSize: 'var(--affine-font-sm)',
- padding: '0 16px',
-}));
diff --git a/apps/core/src/hooks/affine/use-shortcuts.ts b/apps/core/src/hooks/affine/use-shortcuts.ts
index 5c37700323..0804af7512 100644
--- a/apps/core/src/hooks/affine/use-shortcuts.ts
+++ b/apps/core/src/hooks/affine/use-shortcuts.ts
@@ -1,20 +1,24 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { useMemo } from 'react';
-interface ShortcutTip {
- [x: string]: string;
+interface ShortcutMap {
+ [x: string]: string[];
+}
+export interface ShortcutsInfo {
+ title: string;
+ shortcuts: ShortcutMap;
}
-export const useWinGeneralKeyboardShortcuts = (): ShortcutTip => {
+export const useWinGeneralKeyboardShortcuts = (): ShortcutMap => {
const t = useAFFiNEI18N();
return useMemo(
() => ({
- [t['Cancel']()]: 'ESC',
- [t['Quick Search']()]: 'Ctrl + K',
- [t['New Page']()]: 'Ctrl + N',
+ [t['Cancel']()]: ['ESC'],
+ [t['Quick Search']()]: ['Ctrl', 'K'],
+ [t['New Page']()]: ['Ctrl', 'N'],
// not implement yet
// [t['Append to Daily Note']()]: 'Ctrl + Alt + A',
- [t['Expand/Collapse Sidebar']()]: 'Ctrl + /',
+ [t['Expand/Collapse Sidebar']()]: ['Ctrl', '/'],
// not implement yet
// [t['Go Back']()]: 'Ctrl + [',
// [t['Go Forward']()]: 'Ctrl + ]',
@@ -22,16 +26,16 @@ export const useWinGeneralKeyboardShortcuts = (): ShortcutTip => {
[t]
);
};
-export const useMacGeneralKeyboardShortcuts = (): ShortcutTip => {
+export const useMacGeneralKeyboardShortcuts = (): ShortcutMap => {
const t = useAFFiNEI18N();
return useMemo(
() => ({
- [t['Cancel']()]: 'ESC',
- [t['Quick Search']()]: '⌘ + K',
- [t['New Page']()]: '⌘ + N',
+ [t['Cancel']()]: ['ESC'],
+ [t['Quick Search']()]: ['⌘', 'K'],
+ [t['New Page']()]: ['⌘', 'N'],
// not implement yet
// [t['Append to Daily Note']()]: '⌘ + ⌥ + A',
- [t['Expand/Collapse Sidebar']()]: '⌘ + /',
+ [t['Expand/Collapse Sidebar']()]: ['⌘', '/'],
// not implement yet
// [t['Go Back']()]: '⌘ + [',
// [t['Go Forward']()]: '⌘ + ]',
@@ -40,28 +44,28 @@ export const useMacGeneralKeyboardShortcuts = (): ShortcutTip => {
);
};
-export const useMacEdgelessKeyboardShortcuts = (): ShortcutTip => {
+export const useMacEdgelessKeyboardShortcuts = (): ShortcutMap => {
const t = useAFFiNEI18N();
return useMemo(
() => ({
- [t['Select All']()]: '⌘ + A',
- [t['Undo']()]: '⌘ + Z',
- [t['Redo']()]: '⌘ + ⇧ + Z',
- [t['Zoom in']()]: '⌘ + +',
- [t['Zoom out']()]: '⌘ + -',
- [t['Zoom to 100%']()]: '⌘ + 0',
- [t['Zoom to fit']()]: '⌘ + 1',
- [t['Select']()]: 'V',
- [t['Text']()]: 'T',
- [t['Shape']()]: 'S',
- [t['Image']()]: 'I',
- [t['Straight Connector']()]: 'L',
- [t['Elbowed Connector']()]: 'X',
+ [t['Select All']()]: ['⌘', 'A'],
+ [t['Undo']()]: ['⌘', 'Z'],
+ [t['Redo']()]: ['⌘', '⇧', 'Z'],
+ [t['Zoom in']()]: ['⌘', '+'],
+ [t['Zoom out']()]: ['⌘', '-'],
+ [t['Zoom to 100%']()]: ['⌘', '0'],
+ [t['Zoom to fit']()]: ['⌘', '1'],
+ [t['Select']()]: ['V'],
+ [t['Text']()]: ['T'],
+ [t['Shape']()]: ['S'],
+ [t['Image']()]: ['I'],
+ [t['Straight Connector']()]: ['L'],
+ [t['Elbowed Connector']()]: ['X'],
// not implement yet
// [t['Curve Connector']()]: 'C',
- [t['Pen']()]: 'P',
- [t['Hand']()]: 'H',
- [t['Note']()]: 'N',
+ [t['Pen']()]: ['P'],
+ [t['Hand']()]: ['H'],
+ [t['Note']()]: ['N'],
// not implement yet
// [t['Group']()]: '⌘ + G',
// [t['Ungroup']()]: '⌘ + ⇧ + G',
@@ -69,29 +73,29 @@ export const useMacEdgelessKeyboardShortcuts = (): ShortcutTip => {
[t]
);
};
-export const useWinEdgelessKeyboardShortcuts = (): ShortcutTip => {
+export const useWinEdgelessKeyboardShortcuts = (): ShortcutMap => {
const t = useAFFiNEI18N();
return useMemo(
() => ({
- [t['Select All']()]: 'Ctrl + A',
- [t['Undo']()]: 'Ctrl + Z',
- [t['Redo']()]: 'Ctrl + Y/Ctrl + Shift + Z',
- [t['Zoom in']()]: 'Ctrl + +',
- [t['Zoom out']()]: 'Ctrl + -',
- [t['Zoom to 100%']()]: 'Ctrl + 0',
- [t['Zoom to fit']()]: 'Ctrl + 1',
- [t['Select']()]: 'V',
- [t['Text']()]: 'T',
- [t['Shape']()]: 'S',
- [t['Image']()]: 'I',
- [t['Straight Connector']()]: 'L',
- [t['Elbowed Connector']()]: 'X',
+ [t['Select All']()]: ['Ctrl', 'A'],
+ [t['Undo']()]: ['Ctrl', 'Z'],
+ [t['Redo']()]: ['Ctrl', 'Y/Ctrl', 'Shift', 'Z'],
+ [t['Zoom in']()]: ['Ctrl', '+'],
+ [t['Zoom out']()]: ['Ctrl', '-'],
+ [t['Zoom to 100%']()]: ['Ctrl', '0'],
+ [t['Zoom to fit']()]: ['Ctrl', '1'],
+ [t['Select']()]: ['V'],
+ [t['Text']()]: ['T'],
+ [t['Shape']()]: ['S'],
+ [t['Image']()]: ['I'],
+ [t['Straight Connector']()]: ['L'],
+ [t['Elbowed Connector']()]: ['X'],
// not implement yet
// [t['Curve Connector']()]: 'C',
- [t['Pen']()]: 'P',
- [t['Hand']()]: 'H',
- [t['Note']()]: 'N',
- [t['Switch']()]: 'Alt + S',
+ [t['Pen']()]: ['P'],
+ [t['Hand']()]: ['H'],
+ [t['Note']()]: ['N'],
+ [t['Switch']()]: ['Alt ', ''],
// not implement yet
// [t['Group']()]: 'Ctrl + G',
// [t['Ungroup']()]: 'Ctrl + Shift + G',
@@ -99,31 +103,31 @@ export const useWinEdgelessKeyboardShortcuts = (): ShortcutTip => {
[t]
);
};
-export const useMacPageKeyboardShortcuts = (): ShortcutTip => {
+export const useMacPageKeyboardShortcuts = (): ShortcutMap => {
const t = useAFFiNEI18N();
return useMemo(
() => ({
- [t['Undo']()]: '⌘+Z',
- [t['Redo']()]: '⌘+⇧+Z',
- [t['Bold']()]: '⌘+B',
- [t['Italic']()]: '⌘+I',
- [t['Underline']()]: '⌘+U',
- [t['Strikethrough']()]: '⌘+⇧+S',
- [t['Inline code']()]: ' ⌘+E',
- [t['Code block']()]: '⌘+⌥+C',
- [t['Link']()]: '⌘+K',
- [t['Quick search']()]: '⌘+K',
- [t['Body text']()]: '⌘+⌥+0',
- [t['Heading']({ number: '1' })]: '⌘+⌥+1',
- [t['Heading']({ number: '2' })]: '⌘+⌥+2',
- [t['Heading']({ number: '3' })]: '⌘+⌥+3',
- [t['Heading']({ number: '4' })]: '⌘+⌥+4',
- [t['Heading']({ number: '5' })]: '⌘+⌥+5',
- [t['Heading']({ number: '6' })]: '⌘+⌥+6',
- [t['Increase indent']()]: 'Tab',
- [t['Reduce indent']()]: '⇧+Tab',
- [t['Group as Database']()]: '⌘ + G',
- [t['Switch']()]: '⌥ + S',
+ [t['Undo']()]: ['⌘', 'Z'],
+ [t['Redo']()]: ['⌘', '⇧', 'Z'],
+ [t['Bold']()]: ['⌘', 'B'],
+ [t['Italic']()]: ['⌘', 'I'],
+ [t['Underline']()]: ['⌘', 'U'],
+ [t['Strikethrough']()]: ['⌘', '⇧', 'S'],
+ [t['Inline code']()]: ['⌘', 'E'],
+ [t['Code block']()]: ['⌘', '⌥', 'C'],
+ [t['Link']()]: ['⌘', 'K'],
+ [t['Quick search']()]: ['⌘', 'K'],
+ [t['Body text']()]: ['⌘', '⌥', '0'],
+ [t['Heading']({ number: '1' })]: ['⌘', '⌥', '1'],
+ [t['Heading']({ number: '2' })]: ['⌘', '⌥', '2'],
+ [t['Heading']({ number: '3' })]: ['⌘', '⌥', '3'],
+ [t['Heading']({ number: '4' })]: ['⌘', '⌥', '4'],
+ [t['Heading']({ number: '5' })]: ['⌘', '⌥', '5'],
+ [t['Heading']({ number: '6' })]: ['⌘', '⌥', '6'],
+ [t['Increase indent']()]: ['Tab'],
+ [t['Reduce indent']()]: ['⇧', 'Tab'],
+ [t['Group as Database']()]: ['⌘', 'G'],
+ [t['Switch']()]: ['⌥', 'S'],
// not implement yet
// [t['Move Up']()]: '⌘ + ⌥ + ↑',
// [t['Move Down']()]: '⌘ + ⌥ + ↓',
@@ -132,53 +136,53 @@ export const useMacPageKeyboardShortcuts = (): ShortcutTip => {
);
};
-export const useMacMarkdownShortcuts = (): ShortcutTip => {
+export const useMacMarkdownShortcuts = (): ShortcutMap => {
const t = useAFFiNEI18N();
return useMemo(
() => ({
- [t['Bold']()]: '**Text** ',
- [t['Italic']()]: '*Text* ',
- [t['Underline']()]: '~Text~ ',
- [t['Strikethrough']()]: '~~Text~~ ',
- [t['Divider']()]: '***',
- [t['Inline code']()]: '`Text` ',
- [t['Code block']()]: '``` Space',
- [t['Heading']({ number: '1' })]: '# Text',
- [t['Heading']({ number: '2' })]: '## Text',
- [t['Heading']({ number: '3' })]: '### Text',
- [t['Heading']({ number: '4' })]: '#### Text',
- [t['Heading']({ number: '5' })]: '##### Text',
- [t['Heading']({ number: '6' })]: '###### Text',
+ [t['Bold']()]: ['**Text**'],
+ [t['Italic']()]: ['*Text*'],
+ [t['Underline']()]: ['~Text~'],
+ [t['Strikethrough']()]: ['~~Text~~'],
+ [t['Divider']()]: ['***'],
+ [t['Inline code']()]: ['`Text` '],
+ [t['Code block']()]: ['``` Space'],
+ [t['Heading']({ number: '1' })]: ['# Text'],
+ [t['Heading']({ number: '2' })]: ['## Text'],
+ [t['Heading']({ number: '3' })]: ['### Text'],
+ [t['Heading']({ number: '4' })]: ['#### Text'],
+ [t['Heading']({ number: '5' })]: ['##### Text'],
+ [t['Heading']({ number: '6' })]: ['###### Text'],
}),
[t]
);
};
-export const useWinPageKeyboardShortcuts = (): ShortcutTip => {
+export const useWinPageKeyboardShortcuts = (): ShortcutMap => {
const t = useAFFiNEI18N();
return useMemo(
() => ({
- [t['Undo']()]: 'Ctrl+Z',
- [t['Redo']()]: 'Ctrl+Y',
- [t['Bold']()]: 'Ctrl+B',
- [t['Italic']()]: 'Ctrl+I',
- [t['Underline']()]: 'Ctrl+U',
- [t['Strikethrough']()]: 'Ctrl+Shift+S',
- [t['Inline code']()]: ' Ctrl+E',
- [t['Code block']()]: 'Ctrl+Alt+C',
- [t['Link']()]: 'Ctrl+K',
- [t['Quick search']()]: 'Ctrl+K',
- [t['Body text']()]: 'Ctrl+Shift+0',
- [t['Heading']({ number: '1' })]: 'Ctrl+Shift+1',
- [t['Heading']({ number: '2' })]: 'Ctrl+Shift+2',
- [t['Heading']({ number: '3' })]: 'Ctrl+Shift+3',
- [t['Heading']({ number: '4' })]: 'Ctrl+Shift+4',
- [t['Heading']({ number: '5' })]: 'Ctrl+Shift+5',
- [t['Heading']({ number: '6' })]: 'Ctrl+Shift+6',
- [t['Increase indent']()]: 'Tab',
- [t['Reduce indent']()]: 'Shift+Tab',
- [t['Group as Database']()]: 'Ctrl + G',
- ['Switch']: 'Alt + S',
+ [t['Undo']()]: ['Ctrl', 'Z'],
+ [t['Redo']()]: ['Ctrl', 'Y'],
+ [t['Bold']()]: ['Ctrl', 'B'],
+ [t['Italic']()]: ['Ctrl', 'I'],
+ [t['Underline']()]: ['Ctrl', 'U'],
+ [t['Strikethrough']()]: ['Ctrl', 'Shift', 'S'],
+ [t['Inline code']()]: [' Ctrl', 'E'],
+ [t['Code block']()]: ['Ctrl', 'Alt', 'C'],
+ [t['Link']()]: ['Ctr', 'K'],
+ [t['Quick search']()]: ['Ctrl', 'K'],
+ [t['Body text']()]: ['Ctrl', 'Shift', '0'],
+ [t['Heading']({ number: '1' })]: ['Ctrl', 'Shift', '1'],
+ [t['Heading']({ number: '2' })]: ['Ctrl', 'Shift', '2'],
+ [t['Heading']({ number: '3' })]: ['Ctrl', 'Shift', '3'],
+ [t['Heading']({ number: '4' })]: ['Ctrl', 'Shift', '4'],
+ [t['Heading']({ number: '5' })]: ['Ctrl', 'Shift', '5'],
+ [t['Heading']({ number: '6' })]: ['Ctrl', 'Shift', '6'],
+ [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 + ↓',
@@ -186,54 +190,73 @@ export const useWinPageKeyboardShortcuts = (): ShortcutTip => {
[t]
);
};
-export const useWinMarkdownShortcuts = (): ShortcutTip => {
+export const useWinMarkdownShortcuts = (): ShortcutMap => {
const t = useAFFiNEI18N();
return useMemo(
() => ({
- [t['Bold']()]: '**Text** ',
- [t['Italic']()]: '*Text* ',
- [t['Underline']()]: '~Text~ ',
- [t['Strikethrough']()]: '~~Text~~ ',
- [t['Divider']()]: '***',
- [t['Inline code']()]: '`Text` ',
- [t['Code block']()]: '``` Text',
- [t['Heading']({ number: '1' })]: '# Text',
- [t['Heading']({ number: '2' })]: '## Text',
- [t['Heading']({ number: '3' })]: '### Text',
- [t['Heading']({ number: '4' })]: '#### Text',
- [t['Heading']({ number: '5' })]: '##### Text',
- [t['Heading']({ number: '6' })]: '###### Text',
+ [t['Bold']()]: ['**Text** '],
+ [t['Italic']()]: ['*Text* '],
+ [t['Underline']()]: ['~Text~ '],
+ [t['Strikethrough']()]: ['~~Text~~ '],
+ [t['Divider']()]: ['***'],
+ [t['Inline code']()]: ['`Text` '],
+ [t['Code block']()]: ['``` Text'],
+ [t['Heading']({ number: '1' })]: ['# Text'],
+ [t['Heading']({ number: '2' })]: ['## Text'],
+ [t['Heading']({ number: '3' })]: ['### Text'],
+ [t['Heading']({ number: '4' })]: ['#### Text'],
+ [t['Heading']({ number: '5' })]: ['##### Text'],
+ [t['Heading']({ number: '6' })]: ['###### Text'],
}),
[t]
);
};
-export const useMarkdownShortcuts = (): ShortcutTip => {
+export const useMarkdownShortcuts = (): ShortcutsInfo => {
+ const t = useAFFiNEI18N();
+
const macMarkdownShortcuts = useMacMarkdownShortcuts();
const winMarkdownShortcuts = useWinMarkdownShortcuts();
const isMac = environment.isBrowser && environment.isMacOs;
- return isMac ? macMarkdownShortcuts : winMarkdownShortcuts;
+ return {
+ title: t['Markdown Syntax'](),
+ shortcuts: isMac ? macMarkdownShortcuts : winMarkdownShortcuts,
+ };
};
-export const usePageShortcuts = (): ShortcutTip => {
+export const usePageShortcuts = (): ShortcutsInfo => {
+ const t = useAFFiNEI18N();
+
const macPageShortcuts = useMacPageKeyboardShortcuts();
const winPageShortcuts = useWinPageKeyboardShortcuts();
const isMac = environment.isBrowser && environment.isMacOs;
- return isMac ? macPageShortcuts : winPageShortcuts;
+ return {
+ title: t['Page'](),
+ shortcuts: isMac ? macPageShortcuts : winPageShortcuts,
+ };
};
-export const useEdgelessShortcuts = (): ShortcutTip => {
+export const useEdgelessShortcuts = (): ShortcutsInfo => {
+ const t = useAFFiNEI18N();
+
const macEdgelessShortcuts = useMacEdgelessKeyboardShortcuts();
const winEdgelessShortcuts = useWinEdgelessKeyboardShortcuts();
const isMac = environment.isBrowser && environment.isMacOs;
-
- return isMac ? macEdgelessShortcuts : winEdgelessShortcuts;
+ return {
+ title: t['Edgeless'](),
+ shortcuts: isMac ? macEdgelessShortcuts : winEdgelessShortcuts,
+ };
};
-export const useGeneralShortcuts = (): ShortcutTip => {
+export const useGeneralShortcuts = (): ShortcutsInfo => {
+ const t = useAFFiNEI18N();
+
const macGeneralShortcuts = useMacGeneralKeyboardShortcuts();
const winGeneralShortcuts = useWinGeneralKeyboardShortcuts();
const isMac = environment.isBrowser && environment.isMacOs;
- return isMac ? macGeneralShortcuts : winGeneralShortcuts;
+ return {
+ title: t['General'](),
+ shortcuts: isMac ? macGeneralShortcuts : winGeneralShortcuts,
+ };
};