Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-04-18 02:10:55 +00:00
co-authored by renee-png
parent 94a09ce76b
commit 699e8a07d2
+56 -1
View File
@@ -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}