fix: Markdown 沒有被渲染

client/deno.jsonc

@@ -26,6 +26,7 @@
     "split.js": "npm:split.js@1.3.2",
     "crypto-js": "npm:crypto-js@4.2.0",
     "socket.io-client": "npm:socket.io-client@4.8.1",
-    "marked": "npm:marked@16.3.0"
+    "marked": "npm:marked@16.3.0",
+    "dompurify": "npm:dompurify@3.2.7"
   }
 }

client/ui/chat/ChatFragment.tsx

@@ -11,6 +11,7 @@ import data from "../../Data.ts"
 import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
 import useAsyncEffect from "../useAsyncEffect.ts"
 import * as marked from 'marked'
+import DOMPurify from 'dompurify'
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     target: string
@@ -18,6 +19,15 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
     onReturnButtonClicked?: () => void
 }
 
+const markedInstance = new marked.Marked({
+    renderer: {
+        heading({ tokens, depth: _depth }) {
+            const text = this.parser.parseInline(tokens);
+            return `<span>${text}</span>`
+        }
+    }
+})
+
 export default function ChatFragment({ target, showReturnButton, onReturnButtonClicked, ...props }: Args) {
     const [messagesList, setMessagesList] = React.useState([] as Message[])
     const [chatInfo, setChatInfo] = React.useState({
@@ -177,7 +187,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                 <Element_Message
                                     key={msg.id}
                                     userId={msg.user_id}>
-                                    {msg.text}
+                                    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(markedInstance.parse(msg.text) as string) }}></div>
                                 </Element_Message>
                             )
                         }