feat: paragraph margin

Author: geekdada

src/pages/Content/components/TranslationItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import Clipboard from 'react-clipboard.js'
 import { useSnackbar } from 'notistack'
 import { Collapse } from 'react-collapse'
@@ -17,10 +17,14 @@ const TranslationItem: React.FC<{
 }> = ({ job }) => {
   const config = useConfig()
   const [loading, setLoading] = useState(true)
-  const [result, setResult] = useState<string>()
+  const [result, setResult] = useState<string[]>()
   const [collapse, setCollapse] = useState(true)
   const { enqueueSnackbar } = useSnackbar()
 
+  const textContent = useMemo((): string[] => {
+    return job.text.split('\n')
+  }, [job.text])
+
   const findOriginal = () => {
     const { parentElement } = job
 
@@ -51,7 +55,7 @@ const TranslationItem: React.FC<{
           payload,
         })
 
-        setResult(payload.translations.map((item) => item.text).join('\n'))
+        setResult(payload.translations.map((item) => item.text))
 
         setLoading(false)
       })
@@ -73,15 +77,23 @@ const TranslationItem: React.FC<{
           className="ate_TranslationItem__original"
           onClick={() => setCollapse((prev) => !prev)}>
           <Collapse isOpened={!collapse}>
-            <div>{job.text}</div>
+            <>
+              {textContent.map((item, index) => (
+                <div key={index}>{item}</div>
+              ))}
+            </>
           </Collapse>
         </div>
 
         {loading ? (
           <div className="ate_TranslationItem__result">翻译中…</div>
         ) : undefined}
         {result ? (
-          <div className="ate_TranslationItem__result">{result}</div>
+          <div className="ate_TranslationItem__result">
+            {result.map((item, index) => (
+              <div key={index}>{item}</div>
+            ))}
+          </div>
         ) : undefined}
       </div>
       <div className="ate_TranslationItem__lower">

src/pages/Content/index.tsx

@@ -142,6 +142,7 @@ const getTextSelection = (
   selection: RangySelection,
 ): TextSelection & { selection: RangySelection } => {
   const text = selection.toString().trim()
+  // const html = selection.toHtml().trim()
 
   return {
     selection,

src/pages/Content/styles/components/TranslationItem.scss

@@ -21,9 +21,12 @@
 
       @apply ease-in-out duration-300;
     }
+    .ReactCollapse--content {
+      @apply space-y-2;
+    }
   }
   &__result {
-    @apply rounded bg-yellow-50 p-3;
+    @apply rounded bg-yellow-50 p-3 space-y-2;
   }
   &__source-lang-tag {
     @apply px-2 py-1 bg-green-50 text-green-600 text-sm rounded;