feat: Add toggle group translations for multiple locales (#462)

mdx-editor · May 22, 2024 · db113d2 · db113d2
1 parent 401e48c
commit db113d2
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 3 deletions.
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -58,6 +58,7 @@
       "selectBlockTypeTooltip": "Select block type",
       "placeholder": "Block type"
     },
+    "toggleGroup":"toggle group",
     "removeBold": "Remove bold",
     "bold": "Bold",
     "removeItalic": "Remove italic",
@@ -97,5 +98,8 @@
   "codeBlock": {
     "language": "Code block language",
     "selectLanguage": "Select code block language"
+  },
+  "contentArea":{
+    "editableMarkdown": "editable markdown"
   }
 }
diff --git a/locales/pt-br/translation.json b/locales/pt-br/translation.json
@@ -58,6 +58,7 @@
       "selectBlockTypeTooltip": "Selecione o tipo de bloco de texto",
       "placeholder": "Bloco de texto"
     },
+    "toggleGroup": "Grupo de alternância",
     "removeBold": "Remover negrito",
     "bold": "Negrito",
     "removeItalic": "Remover itálico",
@@ -97,5 +98,8 @@
   "codeBlock": {
     "language": "Linguagem do bloco de código",
     "selectLanguage": "Selecionar linguagem do bloco de código"
+  },
+  "contentArea":{
+    "editableMarkdown": "Markdown editável"
   }
 }
diff --git a/locales/uk-ua/translation.json b/locales/uk-ua/translation.json
@@ -58,6 +58,7 @@
         "selectBlockTypeTooltip": "Виберіть тип блоку",
         "placeholder": "Тип блоку"
       },
+      "toggleGroup": "Група перемикачів",
       "removeBold": "Прибрати жирний шрифт",
       "bold": "Жирний шрифт",
       "removeItalic": "Видалити курсив",
@@ -97,6 +98,9 @@
     "codeBlock": {
       "language": "Мова блоку коду",
       "selectLanguage": "Виберіть мову блоку коду"
+    },
+    "contentArea":{
+      "editableMarkdown": "редагований маркдаун"
     }
   }
 
diff --git a/locales/zh-cn/translation.json b/locales/zh-cn/translation.json
@@ -58,6 +58,7 @@
       "selectBlockTypeTooltip": "选择块类型",
       "placeholder": "块类型"
     },
+    "toggleGroup": "切换组",
     "removeBold": "移除粗体",
     "bold": "粗体",
     "removeItalic": "移除斜体",
@@ -97,5 +98,8 @@
   "codeBlock": {
     "language": "代码块语言",
     "selectLanguage": "选择代码块语言"
+  },
+  "contentArea":{
+    "editableMarkdown": "可编辑的 Markdown"
   }
 }
diff --git a/locales/zh-tw/translation.json b/locales/zh-tw/translation.json
@@ -58,6 +58,7 @@
       "selectBlockTypeTooltip": "選擇塊類型",
       "placeholder": "塊類型"
     },
+    "toggleGroup": "切換群組",
     "removeBold": "移除粗體",
     "bold": "粗體",
     "removeItalic": "移除斜體",
@@ -97,5 +98,8 @@
   "codeBlock": {
     "language": "程式碼區塊語言",
     "selectLanguage": "選擇程式碼區塊語言"
+  },
+  "contentArea":{
+    "editableMarkdown": "可編輯的 Markdown"
   }
 }
diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
@@ -15,6 +15,7 @@ import {
   rootEditor$,
   setMarkdown$,
   topAreaChildren$,
+  useTranslation,
   viewMode$
 } from './plugins/core'
 
@@ -42,6 +43,7 @@ const LexicalProvider: React.FC<{
 }
 
 const RichTextEditor: React.FC = () => {
+  const t = useTranslation()
   const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
     contentEditableClassName$,
     composerChildren$,
@@ -58,7 +60,10 @@ const RichTextEditor: React.FC = () => {
         <div className={classNames(styles.rootContentEditableWrapper, 'mdxeditor-root-contenteditable')}>
           <RichTextPlugin
             contentEditable={
-              <ContentEditable className={classNames(styles.contentEditable, contentEditableClassName)} ariaLabel="editable markdown" />
+              <ContentEditable
+                className={classNames(styles.contentEditable, contentEditableClassName)}
+                ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
+              />
             }
             placeholder={
               <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableClassName)}>

diff --git a/src/plugins/toolbar/primitives/toolbar.tsx b/src/plugins/toolbar/primitives/toolbar.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import styles from '../../../styles/ui.module.css'
 import { TooltipWrap } from './TooltipWrap'
 import { SelectButtonTrigger, SelectContent, SelectItem } from './select'
-import { EditorInFocus, editorInFocus$, readOnly$ } from '../../core'
+import { EditorInFocus, editorInFocus$, readOnly$, useTranslation } from '../../core'
 import { useCellValue } from '@mdxeditor/gurx'
 
 //
@@ -152,10 +152,12 @@ export const SingleChoiceToggleGroup = <T extends string>({
   value: T | ''
   className?: string
 }) => {
+  const t = useTranslation()
+
   return (
     <div className={styles.toolbarGroupOfGroups}>
       <RadixToolbar.ToggleGroup
-        aria-label="toggle group"
+        aria-label={t('toolbar.toggleGroup', 'toggle group')}
         type="single"
         className={classNames(styles.toolbarToggleSingleGroup, className)}
         onValueChange={onChange}