diff --git a/src/components/forms/custom-form-builder.tsx b/src/components/forms/custom-form-builder.tsx index 72540a2..e1800e4 100644 --- a/src/components/forms/custom-form-builder.tsx +++ b/src/components/forms/custom-form-builder.tsx @@ -317,9 +317,34 @@ export function CustomFormBuilder() { .run(); }; - const insertTable = () => { + const insertTable = (rows: number, cols: number, withHeaderRow: boolean) => { if (!editor) return; - editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); + editor + .chain() + .focus() + .insertTable({ + rows: Math.max(1, Math.min(20, rows)), + cols: Math.max(1, Math.min(12, cols)), + withHeaderRow, + }) + .run(); + }; + + const toggleCellBorder = (side: "t" | "r" | "b" | "l") => { + if (!editor) return; + const isHeader = editor.isActive("tableHeader"); + const nodeName = isHeader ? "tableHeader" : "tableCell"; + const cur = parseBordersFromAttr(editor.getAttributes(nodeName).borders); + const next = { ...cur, [side]: !cur[side] }; + editor.chain().focus().updateAttributes(nodeName, { borders: bordersToAttr(next) }).run(); + }; + + const setAllCellBorders = (on: boolean) => { + if (!editor) return; + const isHeader = editor.isActive("tableHeader"); + const nodeName = isHeader ? "tableHeader" : "tableCell"; + const next: CellBorders = { t: on, r: on, b: on, l: on }; + editor.chain().focus().updateAttributes(nodeName, { borders: bordersToAttr(next) }).run(); }; const toggleCaption = () => { @@ -328,8 +353,8 @@ export function CustomFormBuilder() { editor.chain().focus().updateAttributes("paragraph", { caption: !cur }).run(); }; - // Linearized document segments for export. Tables are flattened into a "table" segment - // containing 2D rows of strings; paragraphs become text segments preserving alignment + indent. + // Linearized document segments for export. Tables now carry per-cell border data. + type TableCellSeg = { text: string; borders: CellBorders; isHeader: boolean }; type Segment = | { kind: "text"; @@ -339,7 +364,7 @@ export function CustomFormBuilder() { caption?: boolean; heading?: 0 | 1 | 2 | 3; } - | { kind: "table"; rows: string[][]; hasHeader: boolean }; + | { kind: "table"; rows: TableCellSeg[][] }; const getRenderedSegments = (): Segment[] => { if (!editor) return [];