feat: add translation
This commit is contained in:
@@ -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} />}
|
||||||
|
|||||||
@@ -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,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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(() => {
|
||||||
|
|||||||
@@ -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',
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user