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;