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, + }; };