From 699e8a07d2062b1e398945fc8ff5c112c7247d60 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 02:10:55 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/forms/custom-form-builder.tsx | 57 +++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/custom-form-builder.tsx b/src/components/forms/custom-form-builder.tsx
index 743c7e0..0e66821 100644
--- a/src/components/forms/custom-form-builder.tsx
+++ b/src/components/forms/custom-form-builder.tsx
@@ -238,6 +238,12 @@ export function CustomFormBuilder() {
   const [caseSearch, setCaseSearch] = useState("");
   const [saveFormat, setSaveFormat] = useState<"pdf" | "docx">("pdf");
 
+  // Insert-table dialog
+  const [tableDialogOpen, setTableDialogOpen] = useState(false);
+  const [tableRows, setTableRows] = useState(3);
+  const [tableCols, setTableCols] = useState(3);
+  const [tableHeader, setTableHeader] = useState(true);
+
   const editor = useEditor({
     extensions: [
       StarterKit.configure({ heading: { levels: [1, 2, 3] }, paragraph: false }),
@@ -977,7 +983,7 @@ export function CustomFormBuilder() {
                 <Outdent className="h-4 w-4" />
               </ToolbarBtn>
               <Separator orientation="vertical" className="h-6 mx-1" />
-              <ToolbarBtn title="Insert table" onClick={insertTable}>
+              <ToolbarBtn title="Insert table…" onClick={() => setTableDialogOpen(true)}>
                 <TableIcon className="h-4 w-4" />
               </ToolbarBtn>
               <ToolbarBtn
@@ -992,12 +998,61 @@ export function CustomFormBuilder() {
               >
                 <Columns className="h-4 w-4" />
               </ToolbarBtn>
+              <ToolbarBtn
+                title="Delete row"
+                onClick={() => editor?.chain().focus().deleteRow().run()}
+              >
+                <Rows className="h-4 w-4 opacity-50" />
+              </ToolbarBtn>
+              <ToolbarBtn
+                title="Delete column"
+                onClick={() => editor?.chain().focus().deleteColumn().run()}
+              >
+                <Columns className="h-4 w-4 opacity-50" />
+              </ToolbarBtn>
               <ToolbarBtn
                 title="Delete table"
                 onClick={() => editor?.chain().focus().deleteTable().run()}
               >
                 <X className="h-4 w-4" />
               </ToolbarBtn>
+              <Separator orientation="vertical" className="h-6 mx-1" />
+              <ToolbarBtn
+                title="Toggle top border (active cell)"
+                onClick={() => toggleCellBorder("t")}
+              >
+                <span className="text-[10px] font-bold">▔</span>
+              </ToolbarBtn>
+              <ToolbarBtn
+                title="Toggle right border (active cell)"
+                onClick={() => toggleCellBorder("r")}
+              >
+                <span className="text-[10px] font-bold">▕</span>
+              </ToolbarBtn>
+              <ToolbarBtn
+                title="Toggle bottom border (active cell)"
+                onClick={() => toggleCellBorder("b")}
+              >
+                <span className="text-[10px] font-bold">▁</span>
+              </ToolbarBtn>
+              <ToolbarBtn
+                title="Toggle left border (active cell)"
+                onClick={() => toggleCellBorder("l")}
+              >
+                <span className="text-[10px] font-bold">▏</span>
+              </ToolbarBtn>
+              <ToolbarBtn
+                title="All borders on (active cell)"
+                onClick={() => setAllCellBorders(true)}
+              >
+                <Square className="h-4 w-4" />
+              </ToolbarBtn>
+              <ToolbarBtn
+                title="All borders off (active cell)"
+                onClick={() => setAllCellBorders(false)}
+              >
+                <SquareDashed className="h-4 w-4" />
+              </ToolbarBtn>
               <ToolbarBtn
                 title="Toggle caption (paragraph below an image/table)"
                 onClick={toggleCaption}