Add table extension

Signed-off-by: Émile Ré <emile@getprobo.com>

package-lock.json

@@ -5889,6 +5889,20 @@
         "@tiptap/core": "^3.21.0"
       }
     },
+    "node_modules/@tiptap/extension-table": {
+      "version": "3.20.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-3.20.4.tgz",
+      "integrity": "sha512-vEHXRL9k9G02pp3P+DyUnN4YRaRAHGfTBC6gck0s9TpsCM9NIchL0qI1fb/u46Bu6UaoMMk58DGr7xaJ29g7KQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.20.4",
+        "@tiptap/pm": "^3.20.4"
+      }
+    },
     "node_modules/@tiptap/extension-text": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.21.0.tgz",
@@ -19726,6 +19740,7 @@
         "@radix-ui/react-scroll-area": "^1.2.10",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
+        "@tiptap/extension-table": "^3.20.4",
         "@tiptap/pm": "^3.20.2",
         "@tiptap/react": "^3.20.2",
         "@tiptap/starter-kit": "^3.20.2",

packages/ui/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@tiptap/extension-table": "^3.20.4",
     "@tiptap/pm": "^3.20.2",
     "@tiptap/react": "^3.20.2",
     "@tiptap/starter-kit": "^3.20.2",

packages/ui/src/RichEditor/BlockMenu.tsx

@@ -10,7 +10,7 @@ import {
   useFloating,
 } from "@floating-ui/react";
 import type { Icon } from "@phosphor-icons/react";
-import { CodeBlockIcon, ListBulletsIcon, ListNumbersIcon, MinusIcon, PlusIcon, QuotesIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextTIcon } from "@phosphor-icons/react";
+import { CodeBlockIcon, GridFourIcon, ListBulletsIcon, ListNumbersIcon, MinusIcon, PlusIcon, QuotesIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextTIcon } from "@phosphor-icons/react";
 import { type useEditor, useEditorState } from "@tiptap/react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
@@ -37,6 +37,7 @@ const BLOCK_ITEMS: BlockItem[] = [
   { label: "Code Block", icon: CodeBlockIcon, action: chain => chain.toggleCodeBlock() },
   { label: "Blockquote", icon: QuotesIcon, action: chain => chain.toggleBlockquote() },
   { label: "Divider", icon: MinusIcon, action: chain => chain.setHorizontalRule() },
+  { label: "Table", icon: GridFourIcon, action: chain => chain.insertTable() },
 ];
 
 const blockMenuVariants = tv({

packages/ui/src/RichEditor/RichEditor.tsx

@@ -14,6 +14,7 @@ import { Italic } from "@tiptap/extension-italic";
 import { BulletList, ListItem, OrderedList } from "@tiptap/extension-list";
 import { Paragraph } from "@tiptap/extension-paragraph";
 import { Strike } from "@tiptap/extension-strike";
+import { TableKit } from "@tiptap/extension-table";
 import { Text } from "@tiptap/extension-text";
 import { Underline } from "@tiptap/extension-underline";
 import { Dropcursor, Gapcursor, UndoRedo } from "@tiptap/extensions";
@@ -53,6 +54,7 @@ const extensions = [
   Dropcursor,
   Gapcursor,
   UndoRedo,
+  TableKit,
 ];
 
 const richEditorVariants = tv({

packages/ui/src/rich-editor.css

@@ -66,4 +66,22 @@
         content: attr(data-placeholder);
         @apply text-txt-tertiary;
     }
+
+    table {
+        @apply border border-border-mid border-collapse;
+        tbody {
+            @apply border border-border-mid border-collapse;
+        }
+        tr {
+            @apply border border-border-mid border-collapse;
+        }
+        th {
+            @apply px-2 py-1.5 border border-border-mid border-collapse bg-subtle text-left font-semibold;
+            p { @apply m-0; }
+        }
+        td {
+            @apply px-2 py-1.5 border border-border-mid border-collapse bg-level-0 text-left;
+            p { @apply m-0; }
+        }
+    }
 }