Add editor to chapter

package.json

@@ -13,9 +13,11 @@
     "eslint": "9",
     "eslint-plugin-react": "^7.37.5",
     "lodash.isequal": "^4.5.0",
+    "monaco-editor": "0.52",
     "pocketbase": "^0.26.8",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-monaco-editor": "^0.59.0",
     "react-router": "^7.13.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.56.0"

src/manage/qd/BookChapter.tsx

@@ -4,6 +4,7 @@ import { useBookContext, useBookStatus } from "./BookStatusProvider";
 import { useEffect, useState } from "react";
 import { useDb } from "../dbProvider";
 import type { QdChapterInfo } from "../../types";
+import MonacoEditor from 'react-monaco-editor';
 
 export default function BookChapter() {
     const setItems = useBookContext();
@@ -13,11 +14,13 @@ export default function BookChapter() {
     const db = useDb();
     const [err, setErr] = useState<string | null>(null);
     const [chapter, setChapter] = useState<QdChapterInfo | null>(null);
+    const [chapterContent, setChapterContent] = useState<string>('');
     async function load() {
         const primaryKey = bookStatus.chapterLists?.find(chapter => chapter.id === id)?.primaryKey;
         const data = await (primaryKey ? db.getQdChapter(primaryKey) : db.getLatestQdChapter(id));
         if (data) {
             setChapter(data);
+            setChapterContent(data.contents ? data.contents.join('\n') : data.chapterInfo.content);
         } else {
             setErr("章节不存在");
         }
@@ -46,5 +49,16 @@ export default function BookChapter() {
             subTitle={err}
             extra={<Button type="primary" onClick={() => { setErr(null); load(); }}>重试</Button>} />;
     }
-    return (<></>)
+    return (<>
+        <MonacoEditor
+            value={chapterContent}
+            language="plaintext"
+            width="100%"
+            height="calc(100vh - 50px)"
+            onChange={setChapterContent}
+            options={{
+                wordWrap: 'on',
+            }}
+         />
+    </>)
 }

yarn.lock

@@ -2043,6 +2043,11 @@ minimatch@^9.0.5:
   dependencies:
     brace-expansion "^2.0.1"
 
+[email protected]:
+  version "0.52.2"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.52.2.tgz#53c75a6fcc6802684e99fd1b2700299857002205"
+  integrity sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==
+
 ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
@@ -2228,6 +2233,11 @@ react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-monaco-editor@^0.59.0:
+  version "0.59.0"
+  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.59.0.tgz#a3cdef4a47fd0cb899f412c9d66b365c51a76096"
+  integrity sha512-SggqfZCdUauNk7GI0388bk5n25zYsQ1ai1i+VhxAgwbCH+MTGl7L1fBNTJ6V+oXeUApf+bpzikprHJEZm9J/zA==
+
 react-router@^7.13.0:
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.13.0.tgz#de9484aee764f4f65b93275836ff5944d7f5bd3b"