修复md预览框换行不显示

README.md

@@ -91,33 +91,14 @@ location / {
 部署完成owo。
 
 
+
 5、管理页面
 
 
+
 前往/admin，输入初始化时设置的token即可！
 
 
-`python api\_server.py`
-
-
-
-后端API已部署完成喵！接下来，请调用/init接口进行初始化
-
-
-
-## TODO
-
-
-
-目前收到的几个建议：
-
-
-
-1、开设不同讨论板块
-
-
-
-
 
 ## License
 

package.json

@@ -23,6 +23,7 @@
     "react-markdown-editor-lite": "^1.3.4",
     "react-router-dom": "^7.9.3",
     "react-toastify": "^11.0.5",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-ins": "^1.2.1"
   },

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       react-toastify:
         specifier: ^11.0.5
         version: 11.0.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      remark-breaks:
+        specifier: ^4.0.0
+        version: 4.0.0
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
@@ -1959,6 +1962,9 @@ packages:
   mdast-util-mdxjs-esm@2.0.1:
     resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
 
+  mdast-util-newline-to-break@2.0.0:
+    resolution: {integrity: sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==}
+
   mdast-util-phrasing@4.1.0:
     resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
 
@@ -2301,6 +2307,9 @@ packages:
   rehype@13.0.2:
     resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
 
+  remark-breaks@4.0.0:
+    resolution: {integrity: sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==}
+
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
@@ -5281,6 +5290,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-newline-to-break@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-find-and-replace: 3.0.2
+
   mdast-util-phrasing@4.1.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -5808,6 +5822,12 @@ snapshots:
       rehype-stringify: 10.0.1
       unified: 11.0.5
 
+  remark-breaks@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-newline-to-break: 2.0.0
+      unified: 11.0.5
+
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4

src/components/CreatePost.tsx

@@ -4,6 +4,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkIns from 'remark-ins';
+import remarkBreaks from 'remark-breaks';
 import MdEditor from 'react-markdown-editor-lite';
 import 'react-markdown-editor-lite/lib/index.css';
 import { uploadImage, submitPost } from '../api';
@@ -169,7 +170,11 @@ const CreatePost: React.FC<CreatePostProps> = ({ onSubmitSuccess }) => {
         <MdEditor
           value={content}
           style={{ height: '500px' }}
-          renderHTML={(text) => <ReactMarkdown remarkPlugins={[remarkGfm, remarkIns]}>{text}</ReactMarkdown>}
+          renderHTML={(text) => (
+            <ReactMarkdown remarkPlugins={[remarkGfm, remarkIns, remarkBreaks]}>
+              {text}
+            </ReactMarkdown>
+          )}
           onChange={handleEditorChange}
           onImageUpload={handleImageUpload}
         />