From abe8df4ecacc3e6a90d6532e8f65819e0844abf8 Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Sat, 2 Sep 2023 00:45:34 +0530
Subject: [PATCH] added table-icons for left,right columns and top,bottom rows
 (#2061)

---
 .../table-menu/InsertBottomTableIcon.tsx      | 15 +++++++++++
 .../tiptap/table-menu/InsertLeftTableIcon.tsx | 14 +++++++++++
 .../table-menu/InsertRightTableIcon.tsx       | 15 +++++++++++
 .../tiptap/table-menu/InsertTopTableIcon.tsx  | 14 +++++++++++
 .../components/tiptap/table-menu/index.tsx    | 25 +++++++++++++++----
 5 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 apps/app/components/tiptap/table-menu/InsertBottomTableIcon.tsx
 create mode 100644 apps/app/components/tiptap/table-menu/InsertLeftTableIcon.tsx
 create mode 100644 apps/app/components/tiptap/table-menu/InsertRightTableIcon.tsx
 create mode 100644 apps/app/components/tiptap/table-menu/InsertTopTableIcon.tsx

diff --git a/apps/app/components/tiptap/table-menu/InsertBottomTableIcon.tsx b/apps/app/components/tiptap/table-menu/InsertBottomTableIcon.tsx
new file mode 100644
index 000000000..b3f99855e
--- /dev/null
+++ b/apps/app/components/tiptap/table-menu/InsertBottomTableIcon.tsx
@@ -0,0 +1,15 @@
+const InsertBottomTableIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+)
+
+export default InsertBottomTableIcon;
diff --git a/apps/app/components/tiptap/table-menu/InsertLeftTableIcon.tsx b/apps/app/components/tiptap/table-menu/InsertLeftTableIcon.tsx
new file mode 100644
index 000000000..8a92705d8
--- /dev/null
+++ b/apps/app/components/tiptap/table-menu/InsertLeftTableIcon.tsx
@@ -0,0 +1,14 @@
+const InsertLeftTableIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+)
+export default InsertLeftTableIcon
diff --git a/apps/app/components/tiptap/table-menu/InsertRightTableIcon.tsx b/apps/app/components/tiptap/table-menu/InsertRightTableIcon.tsx
new file mode 100644
index 000000000..04348ece1
--- /dev/null
+++ b/apps/app/components/tiptap/table-menu/InsertRightTableIcon.tsx
@@ -0,0 +1,15 @@
+const InsertRightTableIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+)
+
+export default InsertRightTableIcon
diff --git a/apps/app/components/tiptap/table-menu/InsertTopTableIcon.tsx b/apps/app/components/tiptap/table-menu/InsertTopTableIcon.tsx
new file mode 100644
index 000000000..14036f998
--- /dev/null
+++ b/apps/app/components/tiptap/table-menu/InsertTopTableIcon.tsx
@@ -0,0 +1,14 @@
+const InsertTopTableIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+)
+export default InsertTopTableIcon;
diff --git a/apps/app/components/tiptap/table-menu/index.tsx b/apps/app/components/tiptap/table-menu/index.tsx
index 0da68410e..e6513fc43 100644
--- a/apps/app/components/tiptap/table-menu/index.tsx
+++ b/apps/app/components/tiptap/table-menu/index.tsx
@@ -2,6 +2,10 @@ import { useState, useEffect } from "react";
 import { Rows, Columns, ToggleRight } from "lucide-react";
 import { cn } from "../utils";
 import { Tooltip } from "components/ui";
+import InsertLeftTableIcon from "./InsertLeftTableIcon";
+import InsertRightTableIcon from "./InsertRightTableIcon";
+import InsertTopTableIcon from "./InsertTopTableIcon";
+import InsertBottomTableIcon from "./InsertBottomTableIcon";
 
 interface TableMenuItem {
   command: () => void;
@@ -24,13 +28,25 @@ export const TableMenu = ({ editor }: { editor: any }) => {
   const items: TableMenuItem[] = [
     {
       command: () => editor.chain().focus().addColumnBefore().run(),
-      icon: Columns,
+      icon: InsertLeftTableIcon,
+      key: "insert-column-left",
+      name: "Insert 1 column left",
+    },
+    {
+      command: () => editor.chain().focus().addColumnAfter().run(),
+      icon: InsertRightTableIcon,
       key: "insert-column-right",
       name: "Insert 1 column right",
     },
+    {
+      command: () => editor.chain().focus().addRowBefore().run(),
+      icon: InsertTopTableIcon,
+      key: "insert-row-above",
+      name: "Insert 1 row above",
+    },
     {
       command: () => editor.chain().focus().addRowAfter().run(),
-      icon: Rows,
+      icon: InsertBottomTableIcon,
       key: "insert-row-below",
       name: "Insert 1 row below",
     },
@@ -99,9 +115,8 @@ export const TableMenu = ({ editor }: { editor: any }) => {
 
   return (
     <section
-      className={`fixed left-1/2 transform -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
-        isOpen ? "block" : "hidden"
-      }`}
+      className={`fixed left-1/2 transform -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${isOpen ? "block" : "hidden"
+        }`}
       style={{
         bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`,
         left: `${tableLocation.left}px`,