fix: no new line when translating twitter in translation only mode (#846)

Author: ananaBMaster

.changeset/thick-squids-cough.md

@@ -0,0 +1,5 @@
+---
+"@read-frog/extension": patch
+---
+
+fix: no new line when translating twitter in translation only mode

src/entrypoints/host.content/style.css

@@ -13,13 +13,15 @@
   margin: 8px 0 !important; /* 上下边距设置为8px，并强制覆盖其他样式 */
   color: inherit; /* 保持文本颜色与周围文本一致 */
   font-family: inherit;
+  white-space: pre-wrap; /* 保留换行符 */
 }
 
 .read-frog-translated-inline-content {
   display: inline;
   color: inherit;
   font-family: inherit;
   text-decoration: inherit;
+  white-space: pre-wrap; /* 保留换行符 */
 }
 
 /* Simplified Chinese - macOS > Windows > Cross-platform > Fallback */

src/utils/host/dom/traversal.ts

@@ -23,6 +23,11 @@ export function extractTextContent(node: TransNode, config: Config): string {
     return node.textContent ?? ''
   }
 
+  // Handle <br> elements as line breaks
+  if (isHTMLElement(node) && node.tagName === 'BR') {
+    return '\n'
+  }
+
   // We already don't walk and label the element which isDontWalkIntoElement
   // for the parent element we already walk and label, if we have a notranslate element inside this parent element,
   // we should extract the text content of the parent.

src/utils/host/translate/core/translation-modes.ts

@@ -74,7 +74,7 @@ export async function translateNodesBilingualMode(
       }
     }
 
-    const textContent = transNodes.map(node => extractTextContent(node, config)).join(' ').trim()
+    const textContent = transNodes.map(node => extractTextContent(node, config)).join('').trim()
     if (!textContent || isNumericContent(textContent))
       return
 
@@ -213,7 +213,7 @@ export async function translateNodeTranslationOnlyMode(
       }
     }
 
-    const innerTextContent = transNodes.map(node => extractTextContent(node, config)).join(' ')
+    const innerTextContent = transNodes.map(node => extractTextContent(node, config)).join('')
     if (!innerTextContent.trim() || isNumericContent(innerTextContent))
       return
 
@@ -223,7 +223,11 @@ export async function translateNodeTranslationOnlyMode(
 
       let cleanedContent = content.replace(MARK_ATTRIBUTES_REGEX, '')
       cleanedContent = cleanedContent.replace(/<!--[\s\S]*?-->/g, ' ')
-      cleanedContent = cleanedContent.replace(/\s+/g, ' ').trim()
+      // Preserve newlines, only collapse horizontal whitespace (spaces/tabs)
+      cleanedContent = cleanedContent.replace(/[^\S\n]+/g, ' ')
+      // Trim spaces at start/end of each line, but preserve newlines
+      cleanedContent = cleanedContent.split('\n').map(line => line.trim()).join('\n')
+      cleanedContent = cleanedContent.trim()
 
       return cleanedContent
     }
@@ -276,7 +280,8 @@ export async function translateNodeTranslationOnlyMode(
       return
     }
 
-    translatedWrapperNode.innerHTML = translatedText
+    // Convert newlines to <br> for proper rendering in innerHTML
+    translatedWrapperNode.innerHTML = translatedText.replace(/\n/g, '<br>')
 
     // Batch final DOM mutations to reduce layout thrashing
     batchDOMOperation(() => {