multilingual support

apps/app/public/static/locales/en_US/commons.json

@@ -215,5 +215,22 @@
         "page_bulk_export": "Grants permission to edit page bulk export features."
       }
     }
+  },
+  "toolbar": {
+    "attachments": "Attachments",
+    "bold": "Bold",
+    "bullet_list": "Bullet List",
+    "checklist": "Checklist",
+    "code": "Code",
+    "diagram": "Diagram",
+    "emoji": "Emoji",
+    "heading": "Heading",
+    "italic": "Italic",
+    "numbered_list": "Numbered List",
+    "quote": "Quote",
+    "strikethrough": "Strikethrough",
+    "table": "Table",
+    "template": "Template",
+    "text_formatting": "Text Formatting"
   }
 }

apps/app/public/static/locales/fr_FR/commons.json

@@ -216,5 +216,22 @@
         "page_bulk_export": "Accorde la permission de modifier les fonctionnalités d'exportation en masse de pages."
       }
     }
+  },
+  "toolbar": {
+    "attachments": "Pièces jointes",
+    "bold": "Gras",
+    "bullet_list": "Liste à puces",
+    "checklist": "Liste de contrôle",
+    "code": "Code",
+    "diagram": "Diagramme",
+    "emoji": "Emoji",
+    "heading": "Titre",
+    "italic": "Italique",
+    "numbered_list": "Liste numérotée",
+    "quote": "Citation",
+    "strikethrough": "Barré",
+    "table": "Tableau",
+    "template": "Modèle",
+    "text_formatting": "Mise en forme du texte"
   }
 }

apps/app/public/static/locales/ja_JP/commons.json

@@ -219,5 +219,22 @@
         "page_bulk_export": "ページの一括エクスポート機能の編集権限を付与できます。"
       }
     }
+  },
+  "toolbar": {
+    "attachments": "添付ファイル",
+    "bold": "太字",
+    "bullet_list": "箇条書きリスト",
+    "checklist": "チェックリスト",
+    "code": "コード",
+    "diagram": "ダイアグラム",
+    "emoji": "絵文字",
+    "heading": "見出し",
+    "italic": "イタリック",
+    "numbered_list": "番号付きリスト",
+    "quote": "引用",
+    "strikethrough": "取り消し線",
+    "table": "テーブル",
+    "template": "テンプレート",
+    "text_formatting": "テキスト書式"
   }
 }

apps/app/public/static/locales/ko_KR/commons.json

@@ -123,5 +123,22 @@
     "transfer_key_limit": "전송 키는 발급 후 1시간 동안 유효합니다.",
     "once_transfer_key_used": "전송 키가 전송에 사용되면 다른 전송에는 사용할 수 없습니다.",
     "transfer_to_growi_cloud": "자세한 내용은 <a href='{{documentationUrl}}en/admin-guide/management-cookbook/g2g-transfer.html'>여기를 클릭하십시오.</a>"
+  },
+  "toolbar": {
+    "attachments": "첨부 파일",
+    "bold": "굵게",
+    "bullet_list": "글머리 기호 목록",
+    "checklist": "체크리스트",
+    "code": "코드",
+    "diagram": "다이어그램",
+    "emoji": "이모지",
+    "heading": "제목",
+    "italic": "기울임꼴",
+    "numbered_list": "번호 매기기 목록",
+    "quote": "인용",
+    "strikethrough": "취소선",
+    "table": "표",
+    "template": "템플릿",
+    "text_formatting": "텍스트 서식"
   }
 }

apps/app/public/static/locales/zh_CN/commons.json

@@ -218,5 +218,22 @@
         "page_bulk_export": "授予编辑页面批量导出功能的权限。"
       }
     }
+  },
+  "toolbar": {
+    "attachments": "附件",
+    "bold": "粗体",
+    "bullet_list": "无序列表",
+    "checklist": "清单",
+    "code": "代码",
+    "diagram": "图表",
+    "emoji": "表情符号",
+    "heading": "标题",
+    "italic": "斜体",
+    "numbered_list": "有序列表",
+    "quote": "引用",
+    "strikethrough": "删除线",
+    "table": "表格",
+    "template": "模板",
+    "text_formatting": "文本格式"
   }
 }

packages/editor/package.json

@@ -59,6 +59,7 @@
     "emoji-mart": "^5.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
     "i18next": "^23.16.5",
+    "react-i18next": "^15.1.1",
     "lib0": "^0.2.94",
     "markdown-table": "^3.0.3",
     "react-dropzone": "^14.2.3",

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/AttachmentsDropup.tsx

@@ -1,5 +1,6 @@
 import { type JSX, useId, useState } from 'react';
 import { AcceptedUploadFileType } from '@growi/core';
+import { useTranslation } from 'react-i18next';
 import {
   Dropdown,
   DropdownItem,
@@ -28,6 +29,7 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
   const [isOpen, setOpen] = useState(false);
 
   const id = useId();
+  const { t } = useTranslation('commons');
 
   return (
     <>
@@ -80,7 +82,7 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
       </Dropdown>
       {!isOpen && (
         <UncontrolledTooltip placement="top" target={CSS.escape(id)}>
-          Attachments
+          {t('toolbar.attachments')}
         </UncontrolledTooltip>
       )}
     </>

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/DiagramButton.tsx

@@ -1,4 +1,5 @@
 import { type JSX, useCallback, useId } from 'react';
+import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
 import { useDrawioModalForEditorActions } from '../../../../states/modal/drawio-for-editor';
@@ -11,6 +12,7 @@ export const DiagramButton = (props: Props): JSX.Element => {
   const { editorKey } = props;
   const { open: openDrawioModal } = useDrawioModalForEditorActions();
   const id = useId();
+  const { t } = useTranslation('commons');
 
   const onClickDiagramButton = useCallback(() => {
     openDrawioModal(editorKey);
@@ -28,7 +30,7 @@ export const DiagramButton = (props: Props): JSX.Element => {
         <span className="growi-custom-icons fs-6">drawer_io</span>
       </button>
       <UncontrolledTooltip placement="top" target={CSS.escape(id)}>
-        Diagram
+        {t('toolbar.diagram')}
       </UncontrolledTooltip>
     </>
   );

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -7,6 +7,7 @@ import {
   useId,
   useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Modal, UncontrolledTooltip } from 'reactstrap';
 
 import { useResolvedTheme } from '../../../../states/ui/resolved-theme';
@@ -26,6 +27,7 @@ export const EmojiButton = (props: Props): JSX.Element => {
   const { editorKey } = props;
 
   const id = useId();
+  const { t } = useTranslation('commons');
 
   const [isOpen, setIsOpen] = useState(false);
   const [Picker, setPicker] = useState<ComponentType<PickerProps> | null>(null);
@@ -101,7 +103,7 @@ export const EmojiButton = (props: Props): JSX.Element => {
         <span className="material-symbols-outlined fs-5">emoji_emotions</span>
       </button>
       <UncontrolledTooltip placement="top" target={CSS.escape(id)}>
-        Emoji
+        {t('toolbar.emoji')}
       </UncontrolledTooltip>
       {isOpen && Picker != null && emojiData != null && (
         <div className="mb-2 d-none d-md-block">

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TableButton.tsx

@@ -1,4 +1,5 @@
 import { type JSX, useCallback, useId } from 'react';
+import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
 import { useHandsontableModalForEditorActions } from '../../../../states/modal/handsontable';
@@ -12,6 +13,7 @@ export const TableButton = (props: Props): JSX.Element => {
   const { editorKey } = props;
 
   const id = useId();
+  const { t } = useTranslation('commons');
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
   const { open: openTableModal } = useHandsontableModalForEditorActions();
@@ -31,7 +33,7 @@ export const TableButton = (props: Props): JSX.Element => {
         <span className="material-symbols-outlined fs-5">table</span>
       </button>
       <UncontrolledTooltip placement="top" target={CSS.escape(id)}>
-        Table
+        {t('toolbar.table')}
       </UncontrolledTooltip>
     </>
   );

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TemplateButton.tsx

@@ -1,4 +1,5 @@
 import { type JSX, useCallback, useId } from 'react';
+import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
 import { useTemplateModalActions } from '../../../../states/modal/template';
@@ -12,6 +13,7 @@ export const TemplateButton = (props: Props): JSX.Element => {
   const { editorKey } = props;
 
   const id = useId();
+  const { t } = useTranslation('commons');
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
   const { open: openTemplateModal } = useTemplateModalActions();
@@ -38,7 +40,7 @@ export const TemplateButton = (props: Props): JSX.Element => {
         <span className="material-symbols-outlined fs-5">file_copy</span>
       </button>
       <UncontrolledTooltip placement="top" target={CSS.escape(id)}>
-        Template
+        {t('toolbar.template')}
       </UncontrolledTooltip>
     </>
   );

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -1,4 +1,5 @@
 import { type JSX, useCallback, useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Collapse, UncontrolledTooltip } from 'reactstrap';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
@@ -17,6 +18,7 @@ const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
   const { isOpen, onClick } = props;
 
   const id = useId();
+  const { t } = useTranslation('commons');
   const activeClass = isOpen ? 'active' : '';
 
   return (
@@ -30,7 +32,7 @@ const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
         <span className="material-symbols-outlined fs-3">match_case</span>
       </button>
       <UncontrolledTooltip placement="top" target={CSS.escape(id)}>
-        Text Formatting
+        {t('toolbar.text_formatting')}
       </UncontrolledTooltip>
     </>
   );
@@ -45,6 +47,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
   const { editorKey, onTextFormatToolsCollapseChange } = props;
   const [isOpen, setOpen] = useState(false);
   const baseId = useId();
+  const { t } = useTranslation('commons');
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
 
   const toggle = useCallback(() => {
@@ -85,7 +88,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-bold`)}
           >
-            Bold
+            {t('toolbar.bold')}
           </UncontrolledTooltip>
           <button
             id={`${baseId}-italic`}
@@ -101,7 +104,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-italic`)}
           >
-            Italic
+            {t('toolbar.italic')}
           </UncontrolledTooltip>
           <button
             id={`${baseId}-strikethrough`}
@@ -117,7 +120,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-strikethrough`)}
           >
-            Strikethrough
+            {t('toolbar.strikethrough')}
           </UncontrolledTooltip>
           <button
             id={`${baseId}-heading`}
@@ -132,7 +135,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-heading`)}
           >
-            Heading
+            {t('toolbar.heading')}
           </UncontrolledTooltip>
           <button
             id={`${baseId}-code`}
@@ -146,7 +149,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-code`)}
           >
-            Code
+            {t('toolbar.code')}
           </UncontrolledTooltip>
           <button
             id={`${baseId}-bullet-list`}
@@ -162,7 +165,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-bullet-list`)}
           >
-            Bullet List
+            {t('toolbar.bullet_list')}
           </UncontrolledTooltip>
           <button
             id={`${baseId}-numbered-list`}
@@ -178,7 +181,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-numbered-list`)}
           >
-            Numbered List
+            {t('toolbar.numbered_list')}
           </UncontrolledTooltip>
           <button
             id={`${baseId}-quote`}
@@ -193,7 +196,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-quote`)}
           >
-            Quote
+            {t('toolbar.quote')}
           </UncontrolledTooltip>
           <button
             id={`${baseId}-checklist`}
@@ -207,7 +210,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             placement="top"
             target={CSS.escape(`${baseId}-checklist`)}
           >
-            Checklist
+            {t('toolbar.checklist')}
           </UncontrolledTooltip>
         </div>
       </Collapse>

pnpm-lock.yaml

@@ -1395,6 +1395,9 @@ importers:
       react-hook-form:
         specifier: ^7.45.4
         version: 7.52.0(react@18.2.0)
+      react-i18next:
+        specifier: ^15.1.1
+        version: 15.1.1(i18next@23.16.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-toastify:
         specifier: ^9.1.3
         version: 9.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)