fix: add Markdown preview option in translation settings (#7250)

src/renderer/src/i18n/locales/en-us.json

@@ -1885,7 +1885,8 @@
         "model_desc": "Model used for translation service",
         "bidirectional": "Bidirectional Translation Settings",
         "bidirectional_tip": "When enabled, only bidirectional translation between source and target languages is supported",
-        "scroll_sync": "Scroll Sync Settings"
+        "scroll_sync": "Scroll Sync Settings",
+        "preview": "Markdown Preview"
       },
       "title": "Translation",
       "tooltip.newline": "Newline",

src/renderer/src/i18n/locales/ja-jp.json

@@ -1884,7 +1884,8 @@
         "model_desc": "翻訳サービスで使用されるモデル",
         "bidirectional": "双方向翻訳設定",
         "bidirectional_tip": "有効にすると、ソース言語と目標言語間の双方向翻訳のみがサポートされます",
-        "scroll_sync": "スクロール同期設定"
+        "scroll_sync": "スクロール同期設定",
+        "preview": "Markdown プレビュー"
       },
       "title": "翻訳",
       "tooltip.newline": "改行",

src/renderer/src/i18n/locales/ru-ru.json

@@ -1883,7 +1883,8 @@
         "model_desc": "Модель, используемая для службы перевода",
         "bidirectional": "Настройки двунаправленного перевода",
         "scroll_sync": "Настройки синхронизации прокрутки",
-        "bidirectional_tip": "Если включено, перевод будет выполняться в обоих направлениях, исходный текст будет переведен на целевой язык и наоборот."
+        "bidirectional_tip": "Если включено, перевод будет выполняться в обоих направлениях, исходный текст будет переведен на целевой язык и наоборот.",
+        "preview": "Markdown предпросмотр"
       },
       "title": "Перевод",
       "tooltip.newline": "Перевести",

src/renderer/src/i18n/locales/zh-cn.json

@@ -1887,7 +1887,8 @@
         "model_desc": "翻译服务使用的模型",
         "bidirectional": "双向翻译设置",
         "bidirectional_tip": "开启后，仅支持在源语言和目标语言之间进行双向翻译",
-        "scroll_sync": "滚动同步设置"
+        "scroll_sync": "滚动同步设置",
+        "preview": "Markdown 预览"
       },
       "title": "翻译",
       "tooltip.newline": "换行",

src/renderer/src/i18n/locales/zh-tw.json

@@ -1884,7 +1884,8 @@
         "model_desc": "翻譯服務使用的模型",
         "bidirectional": "雙向翻譯設定",
         "bidirectional_tip": "開啟後，僅支援在源語言和目標語言之間進行雙向翻譯",
-        "scroll_sync": "滾動同步設定"
+        "scroll_sync": "滾動同步設定",
+        "preview": "Markdown 預覽"
       },
       "title": "翻譯",
       "tooltip.newline": "換行",

src/renderer/src/pages/translate/TranslatePage.tsx

@@ -26,6 +26,7 @@ import { find, isEmpty, sortBy } from 'lodash'
 import { HelpCircle, Settings2, TriangleAlert } from 'lucide-react'
 import { FC, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 
 let _text = ''
@@ -39,6 +40,8 @@ const TranslateSettings: FC<{
   setIsScrollSyncEnabled: (value: boolean) => void
   isBidirectional: boolean
   setIsBidirectional: (value: boolean) => void
+  enableMarkdown: boolean
+  setEnableMarkdown: (value: boolean) => void
   bidirectionalPair: [string, string]
   setBidirectionalPair: (value: [string, string]) => void
   translateModel: Model | undefined
@@ -52,6 +55,8 @@ const TranslateSettings: FC<{
   setIsScrollSyncEnabled,
   isBidirectional,
   setIsBidirectional,
+  enableMarkdown,
+  setEnableMarkdown,
   bidirectionalPair,
   setBidirectionalPair,
   translateModel,
@@ -82,6 +87,7 @@ const TranslateSettings: FC<{
     setBidirectionalPair(localPair)
     db.settings.put({ id: 'translate:bidirectional:pair', value: localPair })
     db.settings.put({ id: 'translate:scroll:sync', value: isScrollSyncEnabled })
+    db.settings.put({ id: 'translate:markdown:enabled', value: enableMarkdown })
     window.message.success({
       content: t('message.save.success.title'),
       key: 'translate-settings-save'
@@ -135,6 +141,13 @@ const TranslateSettings: FC<{
           </div>
         </div>
 
+        <div>
+          <Flex align="center" justify="space-between">
+            <div style={{ fontWeight: 500 }}>{t('translate.settings.preview')}</div>
+            <Switch checked={enableMarkdown} onChange={setEnableMarkdown} />
+          </Flex>
+        </div>
+
         <div>
           <Flex align="center" justify="space-between">
             <div style={{ fontWeight: 500 }}>{t('translate.settings.scroll_sync')}</div>
@@ -212,6 +225,7 @@ const TranslatePage: FC = () => {
   const [historyDrawerVisible, setHistoryDrawerVisible] = useState(false)
   const [isScrollSyncEnabled, setIsScrollSyncEnabled] = useState(false)
   const [isBidirectional, setIsBidirectional] = useState(false)
+  const [enableMarkdown, setEnableMarkdown] = useState(false)
   const [bidirectionalPair, setBidirectionalPair] = useState<[string, string]>(['english', 'chinese'])
   const [settingsVisible, setSettingsVisible] = useState(false)
   const [detectedLanguage, setDetectedLanguage] = useState<string | null>(null)
@@ -388,6 +402,9 @@ const TranslatePage: FC = () => {
 
       const scrollSyncSetting = await db.settings.get({ id: 'translate:scroll:sync' })
       setIsScrollSyncEnabled(scrollSyncSetting ? scrollSyncSetting.value : false)
+
+      const markdownSetting = await db.settings.get({ id: 'translate:markdown:enabled' })
+      setEnableMarkdown(markdownSetting ? markdownSetting.value : false)
     })
   }, [])
 
@@ -586,7 +603,13 @@ const TranslatePage: FC = () => {
           </OperationBar>
 
           <OutputText ref={outputTextRef} onScroll={handleOutputScroll} className="selectable">
-            {result || t('translate.output.placeholder')}
+            {!result ? (
+              t('translate.output.placeholder')
+            ) : enableMarkdown ? (
+              <ReactMarkdown>{result}</ReactMarkdown>
+            ) : (
+              result
+            )}
           </OutputText>
         </OutputContainer>
       </ContentContainer>
@@ -598,6 +621,8 @@ const TranslatePage: FC = () => {
         setIsScrollSyncEnabled={setIsScrollSyncEnabled}
         isBidirectional={isBidirectional}
         setIsBidirectional={toggleBidirectional}
+        enableMarkdown={enableMarkdown}
+        setEnableMarkdown={setEnableMarkdown}
         bidirectionalPair={bidirectionalPair}
         setBidirectionalPair={setBidirectionalPair}
         translateModel={translateModel}