From 70ebdd771d41bc49d8667fa996b3f14820bbded4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Tue, 24 Mar 2026 13:07:38 +0400
Subject: [PATCH] Add table extension
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 package-lock.json                         | 15 +++++++++++++++
 packages/ui/package.json                  |  1 +
 packages/ui/src/RichEditor/BlockMenu.tsx  |  3 ++-
 packages/ui/src/RichEditor/RichEditor.tsx |  2 ++
 packages/ui/src/rich-editor.css           | 18 ++++++++++++++++++
 5 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 5f3e424b9..8cdbc7180 100644
--- a/package-lock.json
+++ b/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",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index fbe5cbfdf..2ee69f0f9 100644
--- a/packages/ui/package.json
+++ b/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",
diff --git a/packages/ui/src/RichEditor/BlockMenu.tsx b/packages/ui/src/RichEditor/BlockMenu.tsx
index 0bdd7bddb..be6850206 100644
--- a/packages/ui/src/RichEditor/BlockMenu.tsx
+++ b/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({
diff --git a/packages/ui/src/RichEditor/RichEditor.tsx b/packages/ui/src/RichEditor/RichEditor.tsx
index cf016a9b4..d39ba6502 100644
--- a/packages/ui/src/RichEditor/RichEditor.tsx
+++ b/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({
diff --git a/packages/ui/src/rich-editor.css b/packages/ui/src/rich-editor.css
index 1d2c685ac..5da5f6d8b 100644
--- a/packages/ui/src/rich-editor.css
+++ b/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; }
+        }
+    }
 }