From 27fc28b7dc10009896e9f57fab97cd4052295c27 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Fri, 19 Jan 2024 11:17:30 +0530
Subject: [PATCH] feat: added ability to toggle row and column header (not
 turned on by default)

---
 packages/editor/core/src/ui/extensions/table/table/icons.ts   | 2 ++
 .../editor/core/src/ui/extensions/table/table/table-view.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/editor/core/src/ui/extensions/table/table/icons.ts b/packages/editor/core/src/ui/extensions/table/table/icons.ts
index c08710ec3..a98eeb4b3 100644
--- a/packages/editor/core/src/ui/extensions/table/table/icons.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@@ -2,6 +2,8 @@ export const icons = {
   colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
   deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
   deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
+  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
+  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
   insertLeftTableIcon: `<svg
     xmlns="http://www.w3.org/2000/svg"
     length={24}
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
index 462d4496d..a8d19a92b 100644
--- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -98,7 +98,7 @@ function setCellsBackgroundColor(editor: Editor, backgroundColor: string) {
 const columnsToolboxItems: ToolboxItem[] = [
   {
     label: "Toggle Column Header",
-    icon: icons.insertBottomTableIcon,
+    icon: icons.toggleColumnHeader,
     action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderColumn().run(),
   },
   {
@@ -176,7 +176,7 @@ function setTableRowBackgroundColor(editor: Editor, backgroundColor: string) {
 const rowsToolboxItems: ToolboxItem[] = [
   {
     label: "Toggle Row Header",
-    icon: icons.insertBottomTableIcon,
+    icon: icons.toggleRowHeader,
     action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderRow().run(),
   },
   {