add table editing plugin and allow table to be resizeable

docs/src/demos/Nodes/Table/index.vue

@@ -39,6 +39,15 @@
     <button @click="editor.chain().focus().toggleHeaderCell().run()">
       ✅ toggleHeaderCell
     </button>
+    <button disabled>
+      ⚠️ fixTables
+    </button>
+    <button disabled>
+      ⚠️ toggleCellMerge
+    </button>
+    <button disabled>
+      ⚠️ setCellAttr
+    </button>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -71,7 +80,9 @@ export default {
         Document,
         Paragraph,
         Text,
-        Table,
+        Table.configure({
+          resizable: true,
+        }),
         TableRow,
         TableHeader,
         TableCell,
@@ -82,8 +93,7 @@ export default {
           <tbody>
             <tr>
               <th>Test</th>
-              <th>Test</th>
+              <th colspan="2">Test</th>
-              <th>Test</th>
             </tr>
             <tr>
               <td>Test</td>

packages/extension-table/src/table.ts

@@ -1,7 +1,7 @@
 import { Command, Node, mergeAttributes } from '@tiptap/core'
 import {
-  // tableEditing,
+  tableEditing,
-  // columnResizing,
+  columnResizing,
   // goToNextCell,
   addColumnBefore,
   addColumnAfter,
@@ -23,6 +23,7 @@ export interface TableOptions {
   HTMLAttributes: {
     [key: string]: any
   },
+  resizable: boolean,
 }
 
 export const Table = Node.create({
@@ -30,6 +31,7 @@ export const Table = Node.create({
 
   defaultOptions: <TableOptions>{
     HTMLAttributes: {},
+    resizable: false,
   },
 
   content: 'table_row+',
@@ -126,6 +128,13 @@ export const Table = Node.create({
       // setCellAttr: ({ name, value }) => setCellAttr(name, value),
     }
   },
+
+  addProseMirrorPlugins() {
+    return [
+      ...(this.options.resizable ? [columnResizing({})] : []),
+      tableEditing({}),
+    ]
+  },
 })
 
 declare module '@tiptap/core' {