From 17b4ba9c16dbf5042de0218297bafaca9345a4b9 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 22 Jan 2021 00:31:00 +0100
Subject: [PATCH] add table editing plugin and allow table to be resizeable

---
 docs/src/demos/Nodes/Table/index.vue  | 16 +++++++++++++---
 packages/extension-table/src/table.ts | 13 +++++++++++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue
index f22af0ed..5f0bda14 100644
--- a/docs/src/demos/Nodes/Table/index.vue
+++ b/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>Test</th>
+              <th colspan="2">Test</th>
             </tr>
             <tr>
               <td>Test</td>
diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts
index 8bcda2b1..df3830cb 100644
--- a/packages/extension-table/src/table.ts
+++ b/packages/extension-table/src/table.ts
@@ -1,7 +1,7 @@
 import { Command, Node, mergeAttributes } from '@tiptap/core'
 import {
-  // tableEditing,
-  // columnResizing,
+  tableEditing,
+  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' {