feat: add remark gfm for table nodes and more

ntua-unit-of-control-and-informatics · Jul 31, 2024 · fc825a7 · fc825a7
1 parent 2e70d05
commit fc825a7
Show file tree

Hide file tree

Showing 3 changed files with 282 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-markdown": "^9.0.1",
     "react-multi-email": "^1.0.23",
     "recharts": "^2.12.7",
+    "remark-gfm": "^4.0.0",
     "sharp": "^0.33.4",
     "swr": "^2.2.5"
   },

diff --git a/src/app/dashboard/models/[modelId]/components/MarkdownRenderer.tsx b/src/app/dashboard/models/[modelId]/components/MarkdownRenderer.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import Markdown from 'react-markdown';
-import { ReactNode } from 'react';
 import { Link } from '@nextui-org/link';
+import remarkGfm from 'remark-gfm';
 
 export default function MarkdownRenderer({
   children,
@@ -11,6 +11,7 @@ export default function MarkdownRenderer({
 }>) {
   return (
     <Markdown
+      remarkPlugins={[remarkGfm]}
       components={{
         a(props: any) {
           return (
@@ -47,6 +48,9 @@ export default function MarkdownRenderer({
             </blockquote>
           );
         },
+        table({ children }) {
+          return <table className="table-auto">{children}</table>;
+        },
       }}
     >
       {children}