feat(i18n): static type on i18n (#2225)

apps/web/src/components/pure/create-workspace-modal/index.tsx

@@ -6,7 +6,7 @@ import {
   ModalWrapper,
   styled,
 } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { KeyboardEvent } from 'react';
 import { useCallback, useRef, useState } from 'react';
 
@@ -35,7 +35,7 @@ export const CreateWorkspaceModal = ({
     },
     [handleCreateWorkspace, workspaceName]
   );
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return (
     <Modal open={open} onClose={onClose}>
       <ModalWrapper width={560} height={342} style={{ padding: '10px' }}>
@@ -49,8 +49,8 @@ export const CreateWorkspaceModal = ({
           />
         </Header>
         <Content>
-          <ContentTitle>{t('New Workspace')}</ContentTitle>
-          <p>{t('Workspace description')}</p>
+          <ContentTitle>{t['New Workspace']()}</ContentTitle>
+          <p>{t['Workspace description']()}</p>
           <Input
             ref={ref => {
               if (ref) {
@@ -59,7 +59,7 @@ export const CreateWorkspaceModal = ({
             }}
             data-testid="create-workspace-input"
             onKeyDown={handleKeyDown}
-            placeholder={t('Set a Workspace name')}
+            placeholder={t['Set a Workspace name']()}
             maxLength={15}
             minLength={0}
             onChange={value => {
@@ -86,7 +86,7 @@ export const CreateWorkspaceModal = ({
               handleCreateWorkspace();
             }}
           >
-            {t('Create')}
+            {t['Create']()}
           </Button>
         </Content>
       </ModalWrapper>

apps/web/src/components/pure/file-upload/index.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@affine/component';
 import { styled } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { ChangeEvent } from 'react';
 import type React from 'react';
 import { useRef } from 'react';
@@ -17,7 +17,7 @@ export const Upload: React.FC<UploadProps> = ({
   children,
   ...props
 }) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const input_ref = useRef<HTMLInputElement>(null);
   const _chooseFile = () => {
     if (input_ref.current) {
@@ -37,7 +37,7 @@ export const Upload: React.FC<UploadProps> = ({
   };
   return (
     <UploadStyle onClick={_chooseFile}>
-      {children ?? <Button>{t('Upload')}</Button>}
+      {children ?? <Button>{t['Upload']()}</Button>}
       <input
         ref={input_ref}
         type="file"

apps/web/src/components/pure/footer/index.tsx

@@ -2,7 +2,7 @@ import { FlexWrapper } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { Tooltip } from '@affine/component';
 import { config } from '@affine/env';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { AccessTokenMessage } from '@affine/workspace/affine/login';
 import { CloudWorkspaceIcon, SignOutIcon } from '@blocksuite/icons';
 import { useSetAtom } from 'jotai';
@@ -21,7 +21,7 @@ export type FooterProps = {
 };
 
 export const Footer: React.FC<FooterProps> = ({ user, onLogin, onLogout }) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const setOpen = useSetAtom(openDisableCloudAlertModalAtom);
   return (
     <StyledFooter data-testid="workspace-list-modal-footer">
@@ -38,7 +38,7 @@ export const Footer: React.FC<FooterProps> = ({ user, onLogin, onLogout }) => {
               <p>{user.email}</p>
             </StyleUserInfo>
           </FlexWrapper>
-          <Tooltip content={t('Sign out')} disablePortal={true}>
+          <Tooltip content={t['Sign out']()} disablePortal={true}>
             <IconButton
               data-testid="workspace-list-modal-sign-out"
               onClick={() => {
@@ -69,7 +69,7 @@ export const Footer: React.FC<FooterProps> = ({ user, onLogin, onLogout }) => {
             }
           }}
         >
-          {t('Sign in')}
+          {t['Sign in']()}
         </StyledSignInButton>
       )}
     </StyledFooter>

apps/web/src/components/pure/help-island/index.tsx

@@ -1,5 +1,5 @@
 import { MuiFade, Tooltip } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon } from '@blocksuite/icons';
 import { lazy, Suspense, useState } from 'react';
 
@@ -27,7 +27,7 @@ export const HelpIsland = ({
   const [spread, setShowSpread] = useState(false);
   // const { triggerShortcutsModal, triggerContactModal } = useModal();
   // const blockHub = useGlobalState(store => store.blockHub);
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   //
   // useEffect(() => {
   //   blockHub?.blockHubStatusUpdated.on(status => {
@@ -58,7 +58,7 @@ export const HelpIsland = ({
           style={{ height: spread ? `${showList.length * 44}px` : 0 }}
         >
           {showList.includes('whatNew') && (
-            <Tooltip content={t("Discover what's new!")} placement="left-end">
+            <Tooltip content={t["Discover what's new!"]()} placement="left-end">
               <StyledIconWrapper
                 data-testid="right-bottom-change-log-icon"
                 onClick={() => {
@@ -73,7 +73,7 @@ export const HelpIsland = ({
             </Tooltip>
           )}
           {showList.includes('contact') && (
-            <Tooltip content={t('Contact Us')} placement="left-end">
+            <Tooltip content={t['Contact Us']()} placement="left-end">
               <StyledIconWrapper
                 data-testid="right-bottom-contact-us-icon"
                 onClick={() => {
@@ -86,7 +86,7 @@ export const HelpIsland = ({
             </Tooltip>
           )}
           {showList.includes('shortcuts') && (
-            <Tooltip content={t('Keyboard Shortcuts')} placement="left-end">
+            <Tooltip content={t['Keyboard Shortcuts']()} placement="left-end">
               <StyledIconWrapper
                 data-testid="shortcuts-icon"
                 onClick={() => {
@@ -100,7 +100,7 @@ export const HelpIsland = ({
           )}
         </StyledAnimateWrapper>
 
-        <Tooltip content={t('Help and Feedback')} placement="left-end">
+        <Tooltip content={t['Help and Feedback']()} placement="left-end">
           <MuiFade in={!spread} data-testid="faq-icon">
             <StyledTriggerWrapper>
               <HelpIcon />

apps/web/src/components/pure/loading/PageLoading.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@affine/component';
 import { AffineLoading } from '@affine/component/affine-loading';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { memo, Suspense } from 'react';
 
 export const Loading = memo(function Loading() {
@@ -36,11 +36,11 @@ const StyledLoadingContainer = styled('div')(() => {
 });
 
 export const PageLoading = ({ text }: { text?: string }) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return (
     <StyledLoadingContainer>
       <Loading />
-      <h1>{text ? text : t('Loading')}</h1>
+      <h1>{text ? text : t['Loading']()}</h1>
     </StyledLoadingContainer>
   );
 };

apps/web/src/components/pure/quick-search-modal/Footer.tsx

@@ -1,5 +1,5 @@
 import { initPage } from '@affine/env/blocksuite';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageBlockModel } from '@blocksuite/blocks';
 import { PlusIcon } from '@blocksuite/icons';
 import { assertEquals, nanoid } from '@blocksuite/store';
@@ -27,7 +27,7 @@ export const Footer: React.FC<FooterProps> = ({
   router,
 }) => {
   const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const { jumpToPage } = useRouterHelper(router);
   const MAX_QUERY_SHOW_LENGTH = 20;
   const normalizedQuery =
@@ -60,9 +60,9 @@ export const Footer: React.FC<FooterProps> = ({
       <StyledModalFooterContent>
         <PlusIcon />
         {query ? (
-          <span>{t('New Keyword Page', { query: normalizedQuery })}</span>
+          <span>{t['New Keyword Page']({ query: normalizedQuery })}</span>
         ) : (
-          <span>{t('New Page')}</span>
+          <span>{t['New Page']()}</span>
         )}
       </StyledModalFooterContent>
     </Command.Item>

apps/web/src/components/pure/quick-search-modal/PublishedResults.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { Command } from 'cmdk';
@@ -41,7 +41,7 @@ export const PublishedResults: FC<PublishedResultsProps> = ({
   //       router.push('/404');
   //     });
   // }, [router, dataCenter, setPublishWorkspaceName]);
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   useEffect(() => {
     setResults(blockSuiteWorkspace.search(query));
     //Save the Map<BlockId, PageId> obtained from the search as state
@@ -57,7 +57,7 @@ export const PublishedResults: FC<PublishedResultsProps> = ({
       {query ? (
         resultsPageMeta.length ? (
           <Command.Group
-            heading={t('Find results', { number: resultsPageMeta.length })}
+            heading={t['Find results']({ number: `${resultsPageMeta.length}` })}
           >
             {resultsPageMeta.map(result => {
               return (
@@ -85,7 +85,7 @@ export const PublishedResults: FC<PublishedResultsProps> = ({
           </Command.Group>
         ) : (
           <StyledNotFound>
-            <span>{t('Find 0 result')}</span>
+            <span>{t['Find 0 result']()}</span>
             <Image
               src="/imgs/no-result.svg"
               alt="no result"

apps/web/src/components/pure/quick-search-modal/Results.tsx

@@ -1,5 +1,5 @@
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
@@ -36,7 +36,7 @@ export const Results: FC<ResultsProps> = ({
   const List = useSwitchToConfig(blockSuiteWorkspace.id);
 
   const recentlyViewed = useRecentlyViewed();
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const { jumpToPage } = useRouterHelper(router);
   const results = blockSuiteWorkspace.search(query);
 
@@ -61,7 +61,7 @@ export const Results: FC<ResultsProps> = ({
     return (
       <>
         {recentlyViewedItem.length > 0 && (
-          <Command.Group heading={t('Recent')}>
+          <Command.Group heading={t['Recent']()}>
             {recentlyViewedItem.map(recent => {
               const page = pageList.find(page => recent.id === page.id);
               assertExists(page);
@@ -87,7 +87,7 @@ export const Results: FC<ResultsProps> = ({
             })}
           </Command.Group>
         )}
-        <Command.Group heading={t('Jump to')}>
+        <Command.Group heading={t['Jump to']()}>
           {List.map(link => {
             return (
               <Command.Item
@@ -112,7 +112,7 @@ export const Results: FC<ResultsProps> = ({
   if (!resultsPageMeta.length) {
     return (
       <StyledNotFound>
-        <span>{t('Find 0 result')}</span>
+        <span>{t['Find 0 result']()}</span>
         <Image
           src="/imgs/no-result.svg"
           alt="no result"
@@ -124,7 +124,7 @@ export const Results: FC<ResultsProps> = ({
   }
   return (
     <Command.Group
-      heading={t('Find results', { number: resultsPageMeta.length })}
+      heading={t['Find results']({ number: `${resultsPageMeta.length}` })}
     >
       {resultsPageMeta.map(result => {
         return (

apps/web/src/components/pure/quick-search-modal/config.ts

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   DeleteTemporarilyIcon,
   FavoriteIcon,
@@ -16,26 +16,26 @@ export const useSwitchToConfig = (
   href: string;
   icon: FC<SVGProps<SVGSVGElement>>;
 }[] => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return useMemo(
     () => [
       {
-        title: t('All pages'),
+        title: t['All pages'](),
         href: pathGenerator.all(workspaceId),
         icon: FolderIcon,
       },
       {
-        title: t('Favorites'),
+        title: t['Favorites'](),
         href: pathGenerator.favorite(workspaceId),
         icon: FavoriteIcon,
       },
       {
-        title: t('Workspace Settings'),
+        title: t['Workspace Settings'](),
         href: pathGenerator.setting(workspaceId),
         icon: SettingsIcon,
       },
       {
-        title: t('Trash'),
+        title: t['Trash'](),
         href: pathGenerator.trash(workspaceId),
         icon: DeleteTemporarilyIcon,
       },

apps/web/src/components/pure/quick-search-modal/index.tsx

@@ -1,6 +1,6 @@
 import { Modal, ModalWrapper } from '@affine/component';
 import { getEnvironment } from '@affine/env';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Command } from 'cmdk';
 import type { NextRouter } from 'next/router';
 import type React from 'react';
@@ -45,7 +45,7 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
   router,
   blockSuiteWorkspace,
 }) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const inputRef = useRef<HTMLInputElement>(null);
   const [loading, startTransition] = useTransition();
   const [query, _setQuery] = useState('');
@@ -145,10 +145,10 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
               }}
               placeholder={
                 isPublicWorkspace
-                  ? t('Quick search placeholder2', {
+                  ? t['Quick search placeholder2']({
                       workspace: publishWorkspaceName,
                     })
-                  : t('Quick search placeholder')
+                  : t['Quick search placeholder']()
               }
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>

apps/web/src/components/pure/quick-search-modal/navigation-path/index.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Tooltip, TreeView } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   ArrowRightSmallIcon,
   CollapseIcon,
@@ -35,7 +35,7 @@ export const NavigationPath = ({
 }) => {
   const metas = useBlockSuitePageMeta(blockSuiteWorkspace);
   const router = useRouter();
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
 
   const [openExtend, setOpenExtend] = useState(false);
   const pageId = propsPageId ?? router.query.pageId;
@@ -59,7 +59,7 @@ export const NavigationPath = ({
     <>
       <StyledNavigationPathContainer data-testid="navigation-path">
         {openExtend ? (
-          <span>{t('Navigation Path')}</span>
+          <span>{t['Navigation Path']()}</span>
         ) : (
           pathData.path.map((meta, index) => {
             const isLast = index === pathData.path.length - 1;
@@ -96,7 +96,9 @@ export const NavigationPath = ({
         )}
         <Tooltip
           content={
-            openExtend ? t('Back to Quick Search') : t('View Navigation Path')
+            openExtend
+              ? t['Back to Quick Search']()
+              : t['View Navigation Path']()
           }
           placement="top"
           disablePortal={true}

apps/web/src/components/pure/shortcuts-modal/config.ts

@@ -1,90 +1,91 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
 interface ShortcutTip {
   [x: string]: string;
 }
 export const useMacKeyboardShortcuts = (): ShortcutTip => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return {
-    [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['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',
   };
 };
 
 export const useMacMarkdownShortcuts = (): ShortcutTip => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return {
-    [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',
   };
 };
 
 export const useWindowsKeyboardShortcuts = (): ShortcutTip => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return {
-    [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['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',
   };
 };
 export const useWinMarkdownShortcuts = (): ShortcutTip => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return {
-    [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',
   };
 };

apps/web/src/components/pure/shortcuts-modal/index.tsx

@@ -4,7 +4,7 @@ import {
   MuiSlide,
 } from '@affine/component';
 import { getEnvironment } from '@affine/env';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useEffect, useState } from 'react';
 
 import {
@@ -32,7 +32,7 @@ const checkIsMac = () => {
 };
 
 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const macMarkdownShortcuts = useMacMarkdownShortcuts();
   const winMarkdownShortcuts = useWinMarkdownShortcuts();
   const macKeyboardShortcuts = useMacKeyboardShortcuts();
@@ -59,7 +59,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
             <StyledModalHeader>
               <StyledTitle>
                 <KeyboardIcon />
-                {t('Shortcuts')}
+                {t['Shortcuts']()}
               </StyledTitle>
 
               <ModalCloseButton
@@ -73,7 +73,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
               />
             </StyledModalHeader>
             <StyledSubTitle style={{ marginTop: 0 }}>
-              {t('Keyboard Shortcuts')}
+              {t['Keyboard Shortcuts']()}
             </StyledSubTitle>
             {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
               return (
@@ -83,7 +83,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
                 </StyledListItem>
               );
             })}
-            <StyledSubTitle>{t('Markdown Syntax')}</StyledSubTitle>
+            <StyledSubTitle>{t['Markdown Syntax']()}</StyledSubTitle>
             {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
               return (
                 <StyledListItem key={title}>

apps/web/src/components/pure/workspace-list-modal/index.tsx

@@ -5,7 +5,7 @@ import {
   Tooltip,
 } from '@affine/component';
 import { WorkspaceList } from '@affine/component/workspace-list';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { AccessTokenMessage } from '@affine/workspace/affine/login';
 import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
@@ -57,7 +57,7 @@ export const WorkspaceListModal = ({
   currentWorkspaceId,
   onMoveWorkspace,
 }: WorkspaceModalProps) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
 
   return (
     <Modal open={open} onClose={onClose}>
@@ -71,9 +71,9 @@ export const WorkspaceListModal = ({
       >
         <StyledModalHeader>
           <StyledModalHeaderLeft>
-            <StyledModalTitle>{t('My Workspaces')}</StyledModalTitle>
+            <StyledModalTitle>{t['My Workspaces']()}</StyledModalTitle>
             <Tooltip
-              content={t('Workspace description')}
+              content={t['Workspace description']()}
               placement="top-start"
               disablePortal={true}
             >
@@ -124,8 +124,8 @@ export const WorkspaceListModal = ({
             </StyleWorkspaceAdd>
 
             <StyleWorkspaceInfo>
-              <StyleWorkspaceTitle>{t('New Workspace')}</StyleWorkspaceTitle>
-              <p>{t('Create Or Import')}</p>
+              <StyleWorkspaceTitle>{t['New Workspace']()}</StyleWorkspaceTitle>
+              <p>{t['Create Or Import']()}</p>
             </StyleWorkspaceInfo>
           </StyledCreateWorkspaceCard>
         </StyledModalContent>

apps/web/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx

@@ -1,12 +1,12 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import { StyledCollapseItem } from '../shared-styles';
 
 export const EmptyItem = () => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return (
     <StyledCollapseItem disable={true} textWrap={true}>
-      {t('Favorite pages for easy access')}
+      {t['Favorite pages for easy access']()}
     </StyledCollapseItem>
   );
 };

apps/web/src/components/pure/workspace-slider-bar/favorite/index.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowDownSmallIcon, FavoriteIcon } from '@blocksuite/icons';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useCallback, useState } from 'react';
@@ -26,7 +26,7 @@ export const Favorite = ({
 
   const [showSubFavorite, setOpenSubFavorite] = useState(true);
 
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
 
   return (
     <>
@@ -50,7 +50,7 @@ export const Favorite = ({
           }}
         >
           <FavoriteIcon />
-          {t('Favorites')}
+          {t['Favorites']()}
         </StyledLink>
       </StyledListItem>
       <FavoriteList