Add table extension

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

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; }
+        }
+    }
 }