From b0166b9a5eb48c08b627a004f0ff7dd2e4caf689 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Mon, 9 Mar 2026 23:19:14 +0100
Subject: [PATCH] feat: add row/column management to table toolbar

Replace single "Insert table" button with a Table dropdown that shows
contextual row/column operations when the cursor is inside a table:
add row, add column, delete row, delete column, delete table.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 docs/FEATURES.md                            |  2 +-
 src/lib/components/FormattingToolbar.svelte | 82 ++++++++++++++++++---
 2 files changed, 74 insertions(+), 10 deletions(-)

diff --git a/docs/FEATURES.md b/docs/FEATURES.md
index ff1a8da..7f1c533 100644
--- a/docs/FEATURES.md
+++ b/docs/FEATURES.md
@@ -26,7 +26,7 @@
 - Code blocks (triple backtick)
 - Inline code (single backtick)
 - Links — insert, edit, and remove with URL input
-- Tables (insert 3×3 via toolbar)
+- Tables (insert, add/delete rows and columns)
 - Dividers (horizontal rules)
 - Text alignment (left, center, right, justify)
 - Line breaks
diff --git a/src/lib/components/FormattingToolbar.svelte b/src/lib/components/FormattingToolbar.svelte
index 4eb98e8..ccc01a2 100644
--- a/src/lib/components/FormattingToolbar.svelte
+++ b/src/lib/components/FormattingToolbar.svelte
@@ -24,7 +24,10 @@
 		Minus,
 		ChevronDown,
 		Ellipsis,
-		Table2
+		Table2,
+		BetweenHorizontalEnd,
+		BetweenVerticalEnd,
+		RemoveFormatting
 	} from 'lucide-svelte';
 
 	interface Props {
@@ -282,6 +285,75 @@
 		{/if}
 	</div>
 
+	<!-- Table dropdown -->
+	<div class="relative" data-dropdown="table">
+		<button
+			onclick={() => toggleDropdown('table')}
+			class={dropdownBtnClass(editor?.isActive('table') ?? false)}
+			title="Table"
+			data-testid="format-table"
+		>
+			<Table2 size={iconSize} />
+			<ChevronDown size={chevronSize} />
+		</button>
+		{#if openDropdown === 'table'}
+			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[190px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
+				<button
+					onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-table-insert"
+				>
+					<Table2 size={iconSize} />
+					<span>Insert table</span>
+				</button>
+				{#if editor?.isActive('table')}
+					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+					<button
+						onclick={() => { editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-add-row"
+					>
+						<BetweenHorizontalEnd size={iconSize} />
+						<span>Add row</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-add-col"
+					>
+						<BetweenVerticalEnd size={iconSize} />
+						<span>Add column</span>
+					</button>
+					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+					<button
+						onclick={() => { editor?.chain().focus().deleteRow().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-delete-row"
+					>
+						<Minus size={iconSize} />
+						<span>Delete row</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-delete-col"
+					>
+						<Minus size={iconSize} />
+						<span>Delete column</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().deleteTable().run(); closeDropdowns(); }}
+						class={`${dropdownItemClass()} text-[var(--destructive)]`}
+						data-testid="format-table-delete"
+					>
+						<RemoveFormatting size={iconSize} />
+						<span>Delete table</span>
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
 	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
 
 	<!-- More dropdown -->
@@ -339,14 +411,6 @@
 					<CodeXml size={iconSize} />
 					<span>Code block</span>
 				</button>
-				<button
-					onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass()}
-					data-testid="format-table"
-				>
-					<Table2 size={iconSize} />
-					<span>Table</span>
-				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setHorizontalRule().run(); closeDropdowns(); }}
 					class={dropdownItemClass()}