feat: add tables to composer #236

components/email/rich-text-editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect, useCallback, useState, useRef } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
@@ -10,6 +10,10 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import Color from "@tiptap/extension-color";
 import { ResizableImage } from "@/components/email/resizable-image";
 import Placeholder from "@tiptap/extension-placeholder";
+import { Table } from "@tiptap/extension-table";
+import { TableRow } from "@tiptap/extension-table-row";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableCell } from "@tiptap/extension-table-cell";
 import { cn } from "@/lib/utils";
 import {
   Bold,
@@ -29,6 +33,10 @@ import {
   RemoveFormatting,
   Heading1,
   Heading2,
+  Table as TableIcon,
+  Trash2,
+  Rows3,
+  Columns3,
 } from "lucide-react";
 
 export interface InlineImageUpload {
@@ -79,6 +87,43 @@ function ToolbarSeparator() {
   return <div className="w-px h-5 bg-border mx-0.5" />;
 }
 
+const TABLE_PICKER_ROWS = 6;
+const TABLE_PICKER_COLS = 8;
+
+function TableSizePicker({ onPick }: { onPick: (rows: number, cols: number) => void }) {
+  const [hover, setHover] = useState<{ r: number; c: number } | null>(null);
+  return (
+    <div>
+      <div
+        className="grid gap-0.5"
+        style={{ gridTemplateColumns: `repeat(${TABLE_PICKER_COLS}, 1fr)` }}
+        onMouseLeave={() => setHover(null)}
+      >
+        {Array.from({ length: TABLE_PICKER_ROWS * TABLE_PICKER_COLS }).map((_, i) => {
+          const r = Math.floor(i / TABLE_PICKER_COLS);
+          const c = i % TABLE_PICKER_COLS;
+          const active = hover && r <= hover.r && c <= hover.c;
+          return (
+            <button
+              key={i}
+              type="button"
+              onMouseEnter={() => setHover({ r, c })}
+              onClick={() => onPick(r + 1, c + 1)}
+              className={cn(
+                "w-4 h-4 border border-border/60 rounded-[2px] transition-colors",
+                active ? "bg-primary border-primary" : "bg-background hover:bg-accent"
+              )}
+            />
+          );
+        })}
+      </div>
+      <div className="text-xs text-muted-foreground mt-1.5 text-center">
+        {hover ? `${hover.r + 1} × ${hover.c + 1}` : "Pick size"}
+      </div>
+    </div>
+  );
+}
+
 export function RichTextEditor({
   content,
   onChange,
@@ -109,6 +154,27 @@ export function RichTextEditor({
       Placeholder.configure({
         placeholder,
       }),
+      Table.configure({
+        resizable: true,
+        HTMLAttributes: {
+          border: "1",
+          cellpadding: "6",
+          cellspacing: "0",
+          width: "100%",
+          style: "width:100%;border-collapse:collapse;",
+        },
+      }),
+      TableRow,
+      TableHeader.configure({
+        HTMLAttributes: {
+          style: "padding:6px 8px;border:1px solid #ccc;background-color:#f5f5f5;color:#1f2937;text-align:left;",
+        },
+      }),
+      TableCell.configure({
+        HTMLAttributes: {
+          style: "padding:6px 8px;border:1px solid #ccc;vertical-align:top;",
+        },
+      }),
     ],
     content,
     editorProps: {
@@ -188,6 +254,20 @@ export function RichTextEditor({
       .run();
   }, [editor]);
 
+  const [tableMenuOpen, setTableMenuOpen] = useState(false);
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!tableMenuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (tableWrapperRef.current && !tableWrapperRef.current.contains(e.target as Node)) {
+        setTableMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [tableMenuOpen]);
+
   if (!editor) {
     return (
       <div className={cn("min-h-[100px]", className)} />
@@ -309,6 +389,89 @@ export function RichTextEditor({
           <LinkIcon className="w-4 h-4" />
         </ToolbarButton>
 
+        <div ref={tableWrapperRef} className="relative">
+          <ToolbarButton
+            active={editor.isActive("table")}
+            onClick={() => setTableMenuOpen((v) => !v)}
+            title="Table"
+          >
+            <TableIcon className="w-4 h-4" />
+          </ToolbarButton>
+          {tableMenuOpen && (
+            <div className="absolute z-50 top-full left-0 mt-1 bg-popover border border-border rounded-md shadow-md p-2 min-w-[200px]">
+              {editor.isActive("table") ? (
+                <div className="flex flex-col gap-0.5">
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().addRowBefore().run(); setTableMenuOpen(false); }}
+                  >
+                    <Rows3 className="w-4 h-4" /> Add row above
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().addRowAfter().run(); setTableMenuOpen(false); }}
+                  >
+                    <Rows3 className="w-4 h-4" /> Add row below
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().addColumnBefore().run(); setTableMenuOpen(false); }}
+                  >
+                    <Columns3 className="w-4 h-4" /> Add column before
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().addColumnAfter().run(); setTableMenuOpen(false); }}
+                  >
+                    <Columns3 className="w-4 h-4" /> Add column after
+                  </button>
+                  <div className="h-px bg-border my-1" />
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().deleteRow().run(); setTableMenuOpen(false); }}
+                  >
+                    <Trash2 className="w-4 h-4" /> Delete row
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().deleteColumn().run(); setTableMenuOpen(false); }}
+                  >
+                    <Trash2 className="w-4 h-4" /> Delete column
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().toggleHeaderRow().run(); setTableMenuOpen(false); }}
+                  >
+                    <Rows3 className="w-4 h-4" /> Toggle header row
+                  </button>
+                  <div className="h-px bg-border my-1" />
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left text-red-600 dark:text-red-400"
+                    onClick={() => { editor.chain().focus().deleteTable().run(); setTableMenuOpen(false); }}
+                  >
+                    <Trash2 className="w-4 h-4" /> Delete table
+                  </button>
+                </div>
+              ) : (
+                <TableSizePicker
+                  onPick={(rows, cols) => {
+                    editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                    setTableMenuOpen(false);
+                  }}
+                />
+              )}
+            </div>
+          )}
+        </div>
+
         <ToolbarSeparator />
 
         <ToolbarButton