Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
co-authored by
renee-png
parent
94a09ce76b
commit
699e8a07d2
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user