feat: add translation

This commit is contained in:
JimmFly
2023-01-04 18:07:21 +08:00
parent 0b61f4a2a0
commit 59b084c6a6
5 changed files with 113 additions and 89 deletions

View File

@@ -24,7 +24,7 @@ import { useAppState } from '@/providers/app-state-provider/context';
import { toast } from '@/ui/toast'; import { toast } from '@/ui/toast';
import { usePageHelper } from '@/hooks/use-page-helper'; import { usePageHelper } from '@/hooks/use-page-helper';
import { useTheme } from '@/providers/themeProvider'; import { useTheme } from '@/providers/themeProvider';
import { useTranslation } from 'react-i18next';
const FavoriteTag = ({ const FavoriteTag = ({
pageMeta: { favorite, id }, pageMeta: { favorite, id },
}: { }: {
@@ -32,9 +32,10 @@ const FavoriteTag = ({
}) => { }) => {
const { toggleFavoritePage } = usePageHelper(); const { toggleFavoritePage } = usePageHelper();
const { theme } = useTheme(); const { theme } = useTheme();
const { t } = useTranslation();
return ( return (
<Tooltip <Tooltip
content={favorite ? 'Favourited' : 'Favourite'} content={favorite ? t('Favourited') : t('Favourite')}
placement="top-start" placement="top-start"
> >
<IconButton <IconButton
@@ -43,7 +44,9 @@ const FavoriteTag = ({
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
toggleFavoritePage(id); toggleFavoritePage(id);
toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites'); toast(
!favorite ? t('Removed to Favourites') : t('Added to Favourites')
);
}} }}
style={{ style={{
color: favorite ? theme.colors.primaryColor : theme.colors.iconColor, color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
@@ -71,6 +74,7 @@ export const PageList = ({
}) => { }) => {
const router = useRouter(); const router = useRouter();
const { currentWorkspaceId } = useAppState(); const { currentWorkspaceId } = useAppState();
const { t } = useTranslation();
if (pageList.length === 0) { if (pageList.length === 0) {
return <Empty />; return <Empty />;
} }
@@ -80,10 +84,10 @@ export const PageList = ({
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell proportion={0.5}>Title</TableCell> <TableCell proportion={0.5}>{t('Title')}</TableCell>
<TableCell proportion={0.2}>Created</TableCell> <TableCell proportion={0.2}>{t('Created')}</TableCell>
<TableCell proportion={0.2}> <TableCell proportion={0.2}>
{isTrash ? 'Moved to Trash' : 'Updated'} {isTrash ? t('Moved to Trash') : t('Updated')}
</TableCell> </TableCell>
<TableCell proportion={0.1}></TableCell> <TableCell proportion={0.1}></TableCell>
</TableRow> </TableRow>
@@ -108,7 +112,7 @@ export const PageList = ({
<PaperIcon /> <PaperIcon />
)} )}
<Content ellipsis={true} color="inherit"> <Content ellipsis={true} color="inherit">
{pageMeta.title || 'Untitled'} {pageMeta.title || t('Untitled')}
</Content> </Content>
</StyledTitleLink> </StyledTitleLink>
{showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />} {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}

View File

@@ -1,21 +1,22 @@
import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons'; import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
import { useTranslation } from 'react-i18next';
export const config = (currentWorkspaceId: string) => { export const useSwitchToConfig = (currentWorkspaceId: string) => {
const { t } = useTranslation();
const List = [ const List = [
{ {
title: 'All pages', title: t('All pages'),
href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '', href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
icon: AllPagesIcon, icon: AllPagesIcon,
}, },
{ {
title: 'Favourites', title: t('Favourites'),
href: currentWorkspaceId href: currentWorkspaceId
? `/workspace/${currentWorkspaceId}/favorite` ? `/workspace/${currentWorkspaceId}/favorite`
: '', : '',
icon: FavouritesIcon, icon: FavouritesIcon,
}, },
{ {
title: 'Trash', title: t('Trash'),
href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '', href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
icon: TrashIcon, icon: TrashIcon,
}, },

View File

@@ -5,7 +5,7 @@ import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { useAppState } from '@/providers/app-state-provider'; import { useAppState } from '@/providers/app-state-provider';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { config } from './config'; import { useSwitchToConfig } from './config';
import { NoResultSVG } from './noResultSVG'; import { NoResultSVG } from './noResultSVG';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import usePageHelper from '@/hooks/use-page-helper'; import usePageHelper from '@/hooks/use-page-helper';
@@ -26,7 +26,7 @@ export const Results = (props: {
const router = useRouter(); const router = useRouter();
const { currentWorkspaceId } = useAppState(); const { currentWorkspaceId } = useAppState();
const { search } = usePageHelper(); const { search } = usePageHelper();
const List = config(currentWorkspaceId); const List = useSwitchToConfig(currentWorkspaceId);
const [results, setResults] = useState(new Map<string, string | undefined>()); const [results, setResults] = useState(new Map<string, string | undefined>());
const { t } = useTranslation(); const { t } = useTranslation();
useEffect(() => { useEffect(() => {

View File

@@ -1,71 +1,85 @@
export const macKeyboardShortcuts = { import { useTranslation } from 'react-i18next';
Undo: '⌘+Z', export const useMacKeyboardShortcuts = () => {
Redo: '⌘+⇧+Z', const { t } = useTranslation();
Bold: '⌘+B', return {
Italic: '⌘+I', [t('Undo')]: '⌘+Z',
Underline: '⌘+U', [t('Redo')]: '⌘+⇧+Z',
Strikethrough: '⌘+⇧+S', [t('Bold')]: '⌘+B',
'Inline code': ' ⌘+E', [t('Italic')]: '⌘+I',
'Code block': '⌘+⌥+C', [t('Underline')]: '⌘+U',
Link: '⌘+K', [t('Strikethrough')]: '⌘+⇧+S',
'Body text': '⌘+⌥+0', [t('Inline code')]: ' ⌘+E',
'Heading 1': '⌘+⌥+1', [t('Code block')]: '⌘+⌥+C',
'Heading 2': '⌘+⌥+2', [t('Link')]: '⌘+K',
'Heading 3': '⌘+⌥+3', [t('Body text')]: '⌘+⌥+0',
'Heading 4': '⌘+⌥+4', [t('Heading', { number: '1' })]: '⌘+⌥+1',
'Heading 5': '⌘+⌥+5', [t('Heading', { number: '2' })]: '⌘+⌥+2',
'Heading 6': '⌘+⌥+6', [t('Heading', { number: '3' })]: '⌘+⌥+3',
'Increase indent': 'Tab', [t('Heading', { number: '4' })]: '⌘+⌥+4',
'Reduce indent': '⇧+Tab', [t('Heading', { number: '5' })]: '⌘+⌥+5',
[t('Heading', { number: '6' })]: '⌘+⌥+6',
[t('Increase indent')]: 'Tab',
[t('Reduce indent')]: '⇧+Tab',
};
}; };
export const macMarkdownShortcuts = { export const useMacMarkdownShortcuts = () => {
Bold: '**Text** ', const { t } = useTranslation();
Italic: '*Text* ', return {
Underline: '~Text~ ', [t('Bold')]: '**Text** ',
Strikethrough: '~~Text~~ ', [t('Italic')]: '*Text* ',
Divider: '***', [t('Underline')]: '~Text~ ',
'Inline code': '`Text` ', [t('Strikethrough')]: '~~Text~~ ',
'Code block': '``` Space', [t('Divider')]: '***',
'Heading 1': '# Text', [t('Inline code')]: '`Text` ',
'Heading 2': '## Text', [t('Code block')]: '``` Space',
'Heading 3': '### Text', [t('Heading', { number: '1' })]: '# Text',
'Heading 4': '#### Text', [t('Heading', { number: '2' })]: '## Text',
'Heading 5': '##### Text', [t('Heading', { number: '3' })]: '### Text',
'Heading 6': '###### Text', [t('Heading', { number: '4' })]: '#### Text',
[t('Heading', { number: '5' })]: '##### Text',
[t('Heading', { number: '6' })]: '###### Text',
};
}; };
export const windowsKeyboardShortcuts = { export const useWindowsKeyboardShortcuts = () => {
Undo: 'Ctrl+Z', const { t } = useTranslation();
Redo: 'Ctrl+Y', return {
Bold: 'Ctrl+B', [t('Undo')]: 'Ctrl+Z',
Italic: 'Ctrl+I', [t('Redo')]: 'Ctrl+Y',
Underline: 'Ctrl+U', [t('Bold')]: 'Ctrl+B',
Strikethrough: 'Ctrl+Shift+S', [t('Italic')]: 'Ctrl+I',
'Inline code': ' Ctrl+E', [t('Underline')]: 'Ctrl+U',
'Code block': 'Ctrl+Alt+C', [t('Strikethrough')]: 'Ctrl+Shift+S',
Link: 'Ctrl+K', [t('Inline code')]: ' Ctrl+E',
'Body text': 'Ctrl+Shift+0', [t('Code block')]: 'Ctrl+Alt+C',
'Heading 1': 'Ctrl+Shift+1', [t('Link')]: 'Ctrl+K',
'Heading 2': 'Ctrl+Shift+2', [t('Body text')]: 'Ctrl+Shift+0',
'Heading 3': 'Ctrl+Shift+3', [t('Heading', { number: '1' })]: 'Ctrl+Shift+1',
'Heading 4': 'Ctrl+Shift+4', [t('Heading', { number: '2' })]: 'Ctrl+Shift+2',
'Heading 5': 'Ctrl+Shift+5', [t('Heading', { number: '3' })]: 'Ctrl+Shift+3',
'Heading 6': 'Ctrl+Shift+6', [t('Heading', { number: '4' })]: 'Ctrl+Shift+4',
'Increase indent': 'Tab', [t('Heading', { number: '5' })]: 'Ctrl+Shift+5',
'Reduce indent': 'Shift+Tab', [t('Heading', { number: '6' })]: 'Ctrl+Shift+6',
[t('Increase indent')]: 'Tab',
[t('Reduce indent')]: 'Shift+Tab',
};
}; };
export const winMarkdownShortcuts = { export const useWinMarkdownShortcuts = () => {
Bold: '**Text** ', const { t } = useTranslation();
Italic: '*Text* ', return {
Underline: '~Text~ ', [t('Bold')]: '**Text** ',
Strikethrough: '~~Text~~ ', [t('Italic')]: '*Text* ',
'Inline code': '`Text` ', [t('Underline')]: '~Text~ ',
'Code block': '``` Text', [t('Strikethrough')]: '~~Text~~ ',
'Heading 1': '# Text', [t('Divider')]: '***',
'Heading 2': '## Text', [t('Inline code')]: '`Text` ',
'Heading 3': '### Text', [t('Code block')]: '``` Text',
'Heading 4': '#### Text', [t('Heading', { number: '1' })]: '# Text',
'Heading 5': '##### Text', [t('Heading', { number: '2' })]: '## Text',
'Heading 6': '###### Text', [t('Heading', { number: '3' })]: '### Text',
[t('Heading', { number: '4' })]: '#### Text',
[t('Heading', { number: '5' })]: '##### Text',
[t('Heading', { number: '6' })]: '###### Text',
};
}; };

View File

@@ -8,10 +8,10 @@ import {
StyledTitle, StyledTitle,
} from './style'; } from './style';
import { import {
macKeyboardShortcuts, useMacKeyboardShortcuts,
macMarkdownShortcuts, useMacMarkdownShortcuts,
windowsKeyboardShortcuts, useWindowsKeyboardShortcuts,
winMarkdownShortcuts, useWinMarkdownShortcuts,
} from '@/components/shortcuts-modal/config'; } from '@/components/shortcuts-modal/config';
import Slide from '@mui/material/Slide'; import Slide from '@mui/material/Slide';
import { ModalCloseButton } from '@/ui/modal'; import { ModalCloseButton } from '@/ui/modal';
@@ -27,13 +27,18 @@ const isMac = () => {
}; };
export const ShortcutsModal = ({ open, onClose }: ModalProps) => { export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
const markdownShortcuts = isMac()
? macMarkdownShortcuts()
: winMarkdownShortcuts();
const keyboardShortcuts = isMac()
? macKeyboardShortcuts()
: windowsKeyboardShortcuts();
const { t } = useTranslation(); const { t } = useTranslation();
const macMarkdownShortcuts = useMacMarkdownShortcuts();
const winMarkdownShortcuts = useWinMarkdownShortcuts();
const macKeyboardShortcuts = useMacKeyboardShortcuts();
const windowsKeyboardShortcuts = useWindowsKeyboardShortcuts();
const markdownShortcuts = isMac()
? macMarkdownShortcuts
: winMarkdownShortcuts;
const keyboardShortcuts = isMac()
? macKeyboardShortcuts
: windowsKeyboardShortcuts;
return createPortal( return createPortal(
<Slide direction="left" in={open} mountOnEnter unmountOnExit> <Slide direction="left" in={open} mountOnEnter unmountOnExit>
<StyledShortcutsModal data-testid="shortcuts-modal"> <StyledShortcutsModal data-testid="shortcuts-modal">