fix: render of markdown preview

src/components/Markdowns/MarkdownContent.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import "katex/dist/katex.min.css";
+import "./MarkdownContent.css";
+import { fetch_ } from "../../utils/requestUtils";
+import config from "../../config";
+import MarkdownView from "./MarkdownView";
+
+const MarkdownContent = () => {
+    const { id } = useParams();
+    const [content, setContent] = useState(null);
+    const [title, setTitle] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`, {}, {
+            use_cache: true,
+            use_token: false
+        })
+            .then((data) => {
+                setTitle(data.title);
+                setContent(data.content);
+            })
+            .catch((error) => setError(error));
+    }, [id]);
+
+    if (error) {
+        return <div>Error: {error.message || "Failed to load content"}</div>;
+    }
+
+    if (!content) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div className="markdown-content-container">
+            <h1 className="title">{title}</h1>
+            <MarkdownView content={content} />
+        </div>
+    );
+};
+
+export default MarkdownContent;