From 3f3b153c4b007431877be91eb458a42063bab72e Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Thu, 20 Feb 2025 18:46:20 +0800
Subject: [PATCH] feat(problem-description): Use compileMDX with remarkGfm for
 MDX rendering

---
 src/components/problem-description.tsx | 39 ++++++++++++++++++--------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/problem-description.tsx b/src/components/problem-description.tsx
index cdc2de6..16069ca 100644
--- a/src/components/problem-description.tsx
+++ b/src/components/problem-description.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react";
-import { MDXRemote } from "next-mdx-remote/rsc";
+import remarkGfm from "remark-gfm";
+import { compileMDX } from "next-mdx-remote/rsc";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
@@ -7,15 +8,29 @@ interface ProblemDescriptionProps {
   mdxSource: string;
 }
 
-export function ProblemDescription({ mdxSource }: ProblemDescriptionProps) {
-  return (
-    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]">
-      <Suspense fallback={<Skeleton className="h-full w-full" />}>
-        <div className="markdown-body">
-          <MDXRemote source={mdxSource} />
-        </div>
-      </Suspense>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+export async function ProblemDescription({ mdxSource }: ProblemDescriptionProps) {
+  try {
+    const { content } = await compileMDX({
+      source: mdxSource,
+      options: {
+        mdxOptions: {
+          remarkPlugins: [remarkGfm],
+        },
+      },
+    });
+
+    return (
+      <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]">
+        <Suspense fallback={<Skeleton className="h-full w-full" />}>
+          <div className="markdown-body">
+            {content}
+          </div>
+        </Suspense>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    );
+  } catch (error) {
+    console.error("Error compiling MDX:", error);
+    return <Skeleton className="h-full w-full" />;
+  }
 }