fix: table issues and improve tables button in editor

apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx

@@ -12,6 +12,7 @@ import {
   ColumnsIcon,
   SectionIcon,
   ContainerIcon,
+  ChevronDownIcon,
 } from '@radix-ui/react-icons'
 import {
   AlertCircle,
@@ -24,14 +25,18 @@ import {
   Lightbulb,
   MousePointerClick,
   Sigma,
+  Table,
   Tag,
   Tags,
   Video,
 } from 'lucide-react'
 import { SiYoutube } from '@icons-pack/react-simple-icons'
 import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
+import React from 'react'
 
 export const ToolbarButtons = ({ editor, props }: any) => {
+  const [showTableMenu, setShowTableMenu] = React.useState(false)
+
   if (!editor) {
     return null
   }
@@ -49,6 +54,34 @@ export const ToolbarButtons = ({ editor, props }: any) => {
     }
   }
 
+  const tableOptions = [
+    {
+      label: 'Insert new table (3×3)',
+      icon: <TableIcon />,
+      action: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+    },
+    {
+      label: 'Add row below',
+      icon: <RowsIcon />,
+      action: () => editor.chain().focus().addRowAfter().run()
+    },
+    {
+      label: 'Add column right',
+      icon: <ColumnsIcon />,
+      action: () => editor.chain().focus().addColumnAfter().run()
+    },
+    {
+      label: 'Delete current row',
+      icon: <SectionIcon />,
+      action: () => editor.chain().focus().deleteRow().run()
+    },
+    {
+      label: 'Delete current column',
+      icon: <ContainerIcon />,
+      action: () => editor.chain().focus().deleteColumn().run()
+    }
+  ]
+
   return (
     <ToolButtonsWrapper>
       <ToolBtn onClick={() => editor.chain().focus().undo().run()}>
@@ -97,35 +130,31 @@ export const ToolbarButtons = ({ editor, props }: any) => {
         <option value="5">Heading 5</option>
         <option value="6">Heading 6</option>
       </ToolSelect>
-      <DividerVerticalIcon
-        style={{ marginTop: 'auto', marginBottom: 'auto', color: 'grey' }}
-      />
-      <ToolBtn content={'Create table'}
-        onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
-      >
-        <TableIcon/>
-      </ToolBtn>
-      <ToolBtn content={'Insert row'}
-        onClick={() => editor.chain().focus().addRowAfter().run()}
-      >
-        <RowsIcon/>
-      </ToolBtn>
-      <ToolBtn content={'Insert column'}
-        onClick={() => editor.chain().focus().addColumnAfter().run()}
-      >
-        <ColumnsIcon/>
-      </ToolBtn>
-      <ToolBtn content={'Remove column'}
-        onClick={() => editor.chain().focus().deleteColumn().run()}
-      >
-        <ContainerIcon/>
-      </ToolBtn>
-      <ToolBtn content={'Remove row'}
-        onClick={() => editor.chain().focus().deleteRow().run()}
-      >
-        <SectionIcon/>
-      </ToolBtn>
-      {/* TODO: fix this : toggling only works one-way */}
+      <TableMenuWrapper>
+        <ToolBtn 
+          onClick={() => setShowTableMenu(!showTableMenu)}
+          className={showTableMenu ? 'is-active' : ''}
+        >
+          <TableIcon width={18} />
+          <ChevronDownIcon  />
+        </ToolBtn>
+        {showTableMenu && (
+          <TableDropdown>
+            {tableOptions.map((option, index) => (
+              <TableMenuItem 
+                key={index}
+                onClick={() => {
+                  option.action()
+                  setShowTableMenu(false)
+                }}
+              >
+                <span className="icon">{option.icon}</span>
+                <span className="label">{option.label}</span>
+              </TableMenuItem>
+            ))}
+          </TableDropdown>
+        )}
+      </TableMenuWrapper>
       <DividerVerticalIcon
         style={{ marginTop: 'auto', marginBottom: 'auto', color: 'grey' }}
       />
@@ -285,7 +314,7 @@ const ToolBtn = styled.div`
   display: flex;
   background: rgba(217, 217, 217, 0.24);
   border-radius: 6px;
-  width: 25px;
+  min-width: 25px;
   height: 25px;
   padding: 5px;
   margin-right: 5px;
@@ -322,3 +351,44 @@ const ToolSelect = styled.select`
   font-family: 'DM Sans';
   margin-right: 5px;
 `
+
+const TableMenuWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`
+
+const TableDropdown = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  border: 1px solid rgba(217, 217, 217, 0.5);
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 180px;
+  margin-top: 4px;
+`
+
+const TableMenuItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(217, 217, 217, 0.24);
+  }
+
+  .icon {
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+  }
+
+  .label {
+    font-size: 12px;
+    font-family: 'DM Sans';
+  }
+`