feat: add table, row, and cell borders for improved layout clarit

Author: zeeshanm

src/extensions/Table/Table.ts

@@ -1,16 +1,14 @@
 import TiptapTable from '@tiptap/extension-table';
-import { TableCell } from '@tiptap/extension-table-cell';
 import type { TableCellOptions } from '@tiptap/extension-table-cell';
 import { TableHeader } from '@tiptap/extension-table-header';
 import type { TableHeaderOptions } from '@tiptap/extension-table-header';
-import { TableRow } from '@tiptap/extension-table-row';
 import type { TableRowOptions } from '@tiptap/extension-table-row';
-
 import TableActionButton from '@/extensions/Table/components/TableActionButton';
 import type { GeneralOptions } from '@/types';
-
 import type { TableCellBackgroundOptions } from './cell-background';
 import { TableCellBackground } from './cell-background';
+import { TableRow } from './components/TableRow';
+import {TableCell} from "./components/TableCell"
 
 export interface TableOptions extends GeneralOptions<TableOptions> {
   HTMLAttributes: Record<string, any>
@@ -32,9 +30,17 @@ export const Table = /* @__PURE__ */ TiptapTable.extend<TableOptions>({
   addOptions() {
     return {
       ...this.parent?.(),
+      HTMLAttributes: {
+        style: `
+          border: 1px solid #000;         
+          border-collapse: collapse;     
+          width: 100%;
+        `,
+      },
       resizable: true,
       lastColumnResizable: true,
       allowTableNodeSelection: false,
+      
       button: ({ editor, t }: any) => ({
         component: TableActionButton,
         componentProps: {

src/extensions/Table/components/TableCell.ts

@@ -0,0 +1,19 @@
+import { TableCell as TBCell } from '@tiptap/extension-table-cell';
+
+ export const TableCell = TBCell.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+       HTMLAttributes: {
+          style: `
+            border-right: 1px solid #000; 
+            padding: 8px 12px;            
+            &:last-child {
+              border-right: none;        
+            }
+          `,
+        },
+    };
+  },
+ });
+

src/extensions/Table/components/TableRow.ts

@@ -0,0 +1,12 @@
+import { TableRow as TBRow } from "@tiptap/extension-table-row";
+
+export const TableRow = TBRow.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+       HTMLAttributes: {
+          style: "border-bottom: 1px solid #000;", /* Row borders */
+        },
+    };
+  },
+});