feat: update react 18

package.json

@@ -26,14 +26,14 @@
     "axios": "^0.26.1",
     "bcryptjs": "^2.4.3",
     "jsonwebtoken": "^8.5.1",
-    "jszip": "^3.7.1",
+    "jszip": "^3.9.1",
     "koa": "^2.13.4",
     "koa-body": "^4.2.0",
     "koa-compose": "^4.1.0",
     "koa-router": "^10.1.1",
     "md5": "^2.3.0",
     "mime": "^3.0.0",
-    "mongoose": "^6.2.9",
+    "mongoose": "^6.2.10",
     "node-schedule": "^2.1.0",
     "nodemailer": "^6.7.3",
     "ws": "^8.5.0"
@@ -43,7 +43,7 @@
     "@types/dompurify": "^2.3.3",
     "@types/js-cookie": "^3.0.1",
     "@types/jsonwebtoken": "^8.5.8",
-    "@types/katex": "^0.11.1",
+    "@types/katex": "^0.14.0",
     "@types/koa-compose": "^3.2.5",
     "@types/koa-router": "^7.4.4",
     "@types/marked": "^4.0.3",
@@ -54,7 +54,7 @@
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "ace-builds": "^1.4.14",
-    "antd": "^4.19.3",
+    "antd": "^4.19.5",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.1",
     "dompurify": "^2.3.6",
@@ -69,17 +69,17 @@
     "less-loader": "^10.2.0",
     "marked": "^4.0.12",
     "mini-css-extract-plugin": "^2.6.0",
-    "moment": "^2.29.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router": "^6.2.2",
-    "react-router-dom": "^6.2.2",
+    "moment": "^2.29.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "ts-loader": "^9.2.8",
     "ts-node-dev": "^1.1.8",
     "typescript": "^4.6.3",
-    "webpack": "^5.70.0",
+    "webpack": "^5.71.0",
     "webpack-cdn-plugin": "^3.3.1",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "^4.8.1"
   }
 }

web/component/markdown/index.tsx

@@ -1,10 +1,10 @@
 import './index.less'
+import katex from 'katex'
 import hljs from 'highlight.js'
 import React, { useEffect, useRef } from 'react'
 import { marked } from 'marked'
 import { message } from 'antd'
 import { sanitize } from 'dompurify'
-import { renderToString } from 'katex'
 
 const mathRegExp = /(\${1,2})([\s\S]+?)\1/g
 const codeRegExp = /\s*([`~]{3})(\w*)\n([\s\S]+?)\1/g
@@ -49,7 +49,7 @@ export function MarkDown({ trusted = false, children = '' }) {
 			const displayMode = tok === '$$'
 			const tag = displayMode ? 'div' : 'span'
 			try {
-				return renderToString(math, { displayMode })
+				return katex.renderToString(math, { displayMode })
 			} catch {
 				const el = document.createElement(tag)
 				el.style.color = 'red'

web/index.tsx

@@ -1,6 +1,6 @@
 import './index.less'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import { Layout } from 'antd'
 import { GlobalProvider } from './global'
@@ -10,8 +10,9 @@ import { Router } from './router'
 
 const container = document.createElement('div')
 document.body.appendChild(container)
+const root = createRoot(container)
 
-render(<BrowserRouter>
+root.render(<BrowserRouter>
 	<Layout className="container">
 		<GlobalProvider>
 			<Sider />
@@ -25,4 +26,4 @@ render(<BrowserRouter>
 			</Layout>
 		</GlobalProvider>
 	</Layout>
-</BrowserRouter>, container)
+</BrowserRouter>)