feat: support render table (#7)

package.json

@@ -56,6 +56,10 @@
     "is-hotkey": "^0.2.0",
     "lucide-react": "^0.468.0",
     "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-gfm-table": "^2.0.0",
+    "micromark-extension-gfm": "^3.0.0",
+    "micromark-extension-gfm-table": "^2.1.1",
     "prismjs": "^1.29.0",
     "quill-delta": "^5.1.0",
     "sass": "^1.83.0",
@@ -64,11 +68,11 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/prismjs": "^1.26.5",
     "@eslint/js": "^9.15.0",
     "@types/is-hotkey": "^0.1.10",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.10.2",
+    "@types/prismjs": "^1.26.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",

src/components/element/CodeBlock/index.tsx

@@ -2,9 +2,9 @@ import { RenderElementProps } from 'slate-react';
 
 function Code({ attributes, children, element }: RenderElementProps) {
   return (
-    <div {...attributes} className="flex flex-col gap-4 bg-accent rounded-[8px] !p-2">
+    <div {...attributes} className="flex flex-col appflowy-scrollbar gap-4 bg-accent rounded-[8px] !p-2">
       <div className={'w-fit p-2 rounded-[8px] bg-muted'}>{element.data?.language as string}</div>
-      <pre className={'p-2 pt-0'}>
+      <pre className={'p-2 pt-0 w-full overflow-auto'}>
         <code>{children}</code>
       </pre>
     </div>

src/components/element/Element.tsx

@@ -9,6 +9,9 @@ import LinkPreview from '@/components/element/LinkPreview';
 import Image from '@/components/element/Image';
 import Divider from '@/components/element/Divider';
 import Code from '@/components/element/CodeBlock';
+import Table from '@/components/element/Table';
+import TableRow from '@/components/element/TableRow';
+import TableCell from '@/components/element/TableCell';
 
 export function Element({
   element,
@@ -48,6 +51,21 @@ export function Element({
         break;
       }
       return <Code {...{ attributes, children, element }} />;
+    case NodeType.Table:
+      if (!readOnly) {
+        break;
+      }
+      return <Table {...{ attributes, children, element }} />;
+    case NodeType.TableRow:
+      if (!readOnly) {
+        break;
+      }
+      return <TableRow {...{ attributes, children, element }} />;
+    case NodeType.TableCell:
+      if (!readOnly) {
+        break;
+      }
+      return <TableCell {...{ attributes, children, element }} />;
   }
 
   return (