From 45ed1c7fc6b43f8d69e1f8f9e428464800115d0c Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 20 Jan 2021 23:42:01 +0100
Subject: [PATCH 1/7] init table, table-row and table-cell

---
 docs/src/demos/Nodes/Table/index.spec.js      |  7 +++
 docs/src/demos/Nodes/Table/index.vue          | 62 +++++++++++++++++++
 docs/src/docPages/api/nodes/table.md          |  4 ++
 packages/extension-table-cell/README.md       | 14 +++++
 packages/extension-table-cell/package.json    | 27 ++++++++
 packages/extension-table-cell/src/index.ts    |  5 ++
 .../extension-table-cell/src/table-cell.ts    | 11 ++++
 packages/extension-table-row/README.md        | 14 +++++
 packages/extension-table-row/package.json     | 27 ++++++++
 packages/extension-table-row/src/index.ts     |  5 ++
 packages/extension-table-row/src/table-row.ts | 11 ++++
 packages/extension-table/README.md            | 14 +++++
 packages/extension-table/package.json         | 27 ++++++++
 packages/extension-table/src/index.ts         |  5 ++
 packages/extension-table/src/table.ts         | 11 ++++
 15 files changed, 244 insertions(+)
 create mode 100644 docs/src/demos/Nodes/Table/index.spec.js
 create mode 100644 docs/src/demos/Nodes/Table/index.vue
 create mode 100644 packages/extension-table-cell/README.md
 create mode 100644 packages/extension-table-cell/package.json
 create mode 100644 packages/extension-table-cell/src/index.ts
 create mode 100644 packages/extension-table-cell/src/table-cell.ts
 create mode 100644 packages/extension-table-row/README.md
 create mode 100644 packages/extension-table-row/package.json
 create mode 100644 packages/extension-table-row/src/index.ts
 create mode 100644 packages/extension-table-row/src/table-row.ts
 create mode 100644 packages/extension-table/README.md
 create mode 100644 packages/extension-table/package.json
 create mode 100644 packages/extension-table/src/index.ts
 create mode 100644 packages/extension-table/src/table.ts

diff --git a/docs/src/demos/Nodes/Table/index.spec.js b/docs/src/demos/Nodes/Table/index.spec.js
new file mode 100644
index 00000000..e70768b8
--- /dev/null
+++ b/docs/src/demos/Nodes/Table/index.spec.js
@@ -0,0 +1,7 @@
+context('/api/nodes/table', () => {
+  before(() => {
+    cy.visit('/api/nodes/table')
+  })
+
+  // TODO: Write tests
+})
diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue
new file mode 100644
index 00000000..4e028811
--- /dev/null
+++ b/docs/src/demos/Nodes/Table/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Table from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableCell from '@tiptap/extension-table-cell'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableCell,
+      ],
+      content: `
+        <p>Example Text</p>
+        <table>
+          <tr>
+            <td>Test</td>
+            <td>Test</td>
+            <td>Test</td>
+          </tr>
+        </table>
+        <p>Example Text</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style>
+table {
+  border: 3px solid red;
+}
+</style>
diff --git a/docs/src/docPages/api/nodes/table.md b/docs/src/docPages/api/nodes/table.md
index 9ffa2192..cbb8ac30 100644
--- a/docs/src/docPages/api/nodes/table.md
+++ b/docs/src/docPages/api/nodes/table.md
@@ -5,3 +5,7 @@ We need your support to maintain, update, support and develop tiptap 2. If you
 :::
 
 TODO
+
+⚠️ Preview
+
+<demo name="Nodes/Table" />
diff --git a/packages/extension-table-cell/README.md b/packages/extension-table-cell/README.md
new file mode 100644
index 00000000..8924b07e
--- /dev/null
+++ b/packages/extension-table-cell/README.md
@@ -0,0 +1,14 @@
+# @tiptap/extension-table-cell
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-cell.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-cell)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-cell.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-table-cell.svg)](https://www.npmjs.com/package/@tiptap/extension-table-cell)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
diff --git a/packages/extension-table-cell/package.json b/packages/extension-table-cell/package.json
new file mode 100644
index 00000000..e5cbc249
--- /dev/null
+++ b/packages/extension-table-cell/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@tiptap/extension-table-cell",
+  "description": "table cell extension for tiptap",
+  "version": "2.0.0-alpha.5",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-table-cell.cjs.js",
+  "umd": "dist/tiptap-extension-table-cell.umd.js",
+  "module": "dist/tiptap-extension-table-cell.esm.js",
+  "unpkg": "dist/tiptap-extension-table-cell.bundle.umd.min.js",
+  "types": "dist/packages/extension-table-cell/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-alpha.6"
+  }
+}
diff --git a/packages/extension-table-cell/src/index.ts b/packages/extension-table-cell/src/index.ts
new file mode 100644
index 00000000..d3091a48
--- /dev/null
+++ b/packages/extension-table-cell/src/index.ts
@@ -0,0 +1,5 @@
+import { TableCell } from './table-cell'
+
+export * from './table-cell'
+
+export default TableCell
diff --git a/packages/extension-table-cell/src/table-cell.ts b/packages/extension-table-cell/src/table-cell.ts
new file mode 100644
index 00000000..fd16c216
--- /dev/null
+++ b/packages/extension-table-cell/src/table-cell.ts
@@ -0,0 +1,11 @@
+import { Node } from '@tiptap/core'
+
+export const TableCell = Node.create({
+  name: 'tableCell',
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    TableCell: typeof TableCell,
+  }
+}
diff --git a/packages/extension-table-row/README.md b/packages/extension-table-row/README.md
new file mode 100644
index 00000000..a1249cd8
--- /dev/null
+++ b/packages/extension-table-row/README.md
@@ -0,0 +1,14 @@
+# @tiptap/extension-table-row
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-row.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-row)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-row.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-table-row.svg)](https://www.npmjs.com/package/@tiptap/extension-table-row)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
diff --git a/packages/extension-table-row/package.json b/packages/extension-table-row/package.json
new file mode 100644
index 00000000..bc604250
--- /dev/null
+++ b/packages/extension-table-row/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@tiptap/extension-table-row",
+  "description": "table row extension for tiptap",
+  "version": "2.0.0-alpha.5",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-table-row.cjs.js",
+  "umd": "dist/tiptap-extension-table-row.umd.js",
+  "module": "dist/tiptap-extension-table-row.esm.js",
+  "unpkg": "dist/tiptap-extension-table-row.bundle.umd.min.js",
+  "types": "dist/packages/extension-table-row/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-alpha.6"
+  }
+}
diff --git a/packages/extension-table-row/src/index.ts b/packages/extension-table-row/src/index.ts
new file mode 100644
index 00000000..bdba9f60
--- /dev/null
+++ b/packages/extension-table-row/src/index.ts
@@ -0,0 +1,5 @@
+import { TableRow } from './table-row'
+
+export * from './table-row'
+
+export default TableRow
diff --git a/packages/extension-table-row/src/table-row.ts b/packages/extension-table-row/src/table-row.ts
new file mode 100644
index 00000000..b9adf247
--- /dev/null
+++ b/packages/extension-table-row/src/table-row.ts
@@ -0,0 +1,11 @@
+import { Node } from '@tiptap/core'
+
+export const TableRow = Node.create({
+  name: 'tableRow',
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    TableRow: typeof TableRow,
+  }
+}
diff --git a/packages/extension-table/README.md b/packages/extension-table/README.md
new file mode 100644
index 00000000..797c9c1b
--- /dev/null
+++ b/packages/extension-table/README.md
@@ -0,0 +1,14 @@
+# @tiptap/extension-table
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-table.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-table.svg)](https://www.npmjs.com/package/@tiptap/extension-table)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
diff --git a/packages/extension-table/package.json b/packages/extension-table/package.json
new file mode 100644
index 00000000..22899b80
--- /dev/null
+++ b/packages/extension-table/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@tiptap/extension-table",
+  "description": "table extension for tiptap",
+  "version": "2.0.0-alpha.5",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-table.cjs.js",
+  "umd": "dist/tiptap-extension-table.umd.js",
+  "module": "dist/tiptap-extension-table.esm.js",
+  "unpkg": "dist/tiptap-extension-table.bundle.umd.min.js",
+  "types": "dist/packages/extension-table/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-alpha.6"
+  }
+}
diff --git a/packages/extension-table/src/index.ts b/packages/extension-table/src/index.ts
new file mode 100644
index 00000000..bac8d297
--- /dev/null
+++ b/packages/extension-table/src/index.ts
@@ -0,0 +1,5 @@
+import { Table } from './table'
+
+export * from './table'
+
+export default Table
diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts
new file mode 100644
index 00000000..4ba4d518
--- /dev/null
+++ b/packages/extension-table/src/table.ts
@@ -0,0 +1,11 @@
+import { Node } from '@tiptap/core'
+
+export const Table = Node.create({
+  name: 'table',
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    Table: typeof Table,
+  }
+}

From 4fc66747108dcae932fe5514e0b2da827dc951e0 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 20 Jan 2021 23:53:53 +0100
Subject: [PATCH 2/7] add schema

---
 docs/src/demos/Nodes/Table/index.vue          | 14 ++++++----
 .../extension-table-cell/src/table-cell.ts    | 28 ++++++++++++++++++-
 packages/extension-table-row/src/table-row.ts | 25 ++++++++++++++++-
 packages/extension-table/src/table.ts         | 28 ++++++++++++++++++-
 4 files changed, 86 insertions(+), 9 deletions(-)

diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue
index 4e028811..d9bb6dd4 100644
--- a/docs/src/demos/Nodes/Table/index.vue
+++ b/docs/src/demos/Nodes/Table/index.vue
@@ -38,11 +38,13 @@ export default {
       content: `
         <p>Example Text</p>
         <table>
-          <tr>
-            <td>Test</td>
-            <td>Test</td>
-            <td>Test</td>
-          </tr>
+          <tbody>
+            <tr>
+              <td>Test</td>
+              <td>Test</td>
+              <td>Test</td>
+            </tr>
+          </tbody>
         </table>
         <p>Example Text</p>
       `,
@@ -56,7 +58,7 @@ export default {
 </script>
 
 <style>
-table {
+table, tr, td {
   border: 3px solid red;
 }
 </style>
diff --git a/packages/extension-table-cell/src/table-cell.ts b/packages/extension-table-cell/src/table-cell.ts
index fd16c216..48143fb9 100644
--- a/packages/extension-table-cell/src/table-cell.ts
+++ b/packages/extension-table-cell/src/table-cell.ts
@@ -1,7 +1,33 @@
-import { Node } from '@tiptap/core'
+import { Node, mergeAttributes } from '@tiptap/core'
 
+export interface TableCellOptions {
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
 export const TableCell = Node.create({
   name: 'tableCell',
+
+  defaultOptions: <TableCellOptions>{
+    HTMLAttributes: {},
+  },
+
+  // content: options.cellContent,
+  content: 'block+',
+  // attrs: cellAttrs,
+  // tableRole: 'cell',
+  isolating: true,
+
+  parseHTML() {
+    // return [{ tag: 'td', getAttrs: dom => getCellAttrs(dom, extraAttrs) }]
+    return [{ tag: 'td' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    // toDOM(node) { return ["td", setCellAttrs(node, extraAttrs), 0] }
+    return ['td', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+
 })
 
 declare module '@tiptap/core' {
diff --git a/packages/extension-table-row/src/table-row.ts b/packages/extension-table-row/src/table-row.ts
index b9adf247..0a6f2fc8 100644
--- a/packages/extension-table-row/src/table-row.ts
+++ b/packages/extension-table-row/src/table-row.ts
@@ -1,7 +1,30 @@
-import { Node } from '@tiptap/core'
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export interface TableRowOptions {
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
 
 export const TableRow = Node.create({
   name: 'tableRow',
+
+  defaultOptions: <TableRowOptions>{
+    HTMLAttributes: {},
+  },
+
+  // content: '(tableCell | tableHeader)*',
+  content: 'tableCell*',
+
+  // tableRole: 'row',
+
+  parseHTML() {
+    return [{ tag: 'tr' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['tr', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
 })
 
 declare module '@tiptap/core' {
diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts
index 4ba4d518..ceb1399b 100644
--- a/packages/extension-table/src/table.ts
+++ b/packages/extension-table/src/table.ts
@@ -1,7 +1,33 @@
-import { Node } from '@tiptap/core'
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export interface TableOptions {
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
 
 export const Table = Node.create({
   name: 'table',
+
+  defaultOptions: <TableOptions>{
+    HTMLAttributes: {},
+  },
+
+  content: 'tableRow+',
+
+  // tableRole: 'table',
+
+  isolating: true,
+
+  group: 'block',
+
+  parseHTML() {
+    return [{ tag: 'table' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ['tbody', 0]]
+  },
 })
 
 declare module '@tiptap/core' {

From a1f2e9374b5fe3b293c017c96d743661051da10c Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 21 Jan 2021 00:16:45 +0100
Subject: [PATCH 3/7] add table commands, add tableRole to the schema, add
 buttons to the example

---
 docs/src/demos/Nodes/Table/index.vue          |  47 +++++++-
 packages/core/src/Node.ts                     |   5 +
 packages/core/src/helpers/getSchema.ts        |   1 +
 .../extension-table-cell/src/table-cell.ts    |   8 +-
 packages/extension-table-row/src/table-row.ts |   6 +-
 packages/extension-table/package.json         |   3 +
 packages/extension-table/src/table.ts         | 104 +++++++++++++++++-
 7 files changed, 163 insertions(+), 11 deletions(-)

diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue
index d9bb6dd4..5d33711a 100644
--- a/docs/src/demos/Nodes/Table/index.vue
+++ b/docs/src/demos/Nodes/Table/index.vue
@@ -1,5 +1,44 @@
 <template>
   <div v-if="editor">
+    <button disabled>
+      ⚠️ createTable
+    </button>
+    <button @click="editor.chain().focus().addColumnBefore().run()">
+      ⚠️ addColumnBefore
+    </button>
+    <button @click="editor.chain().focus().addColumnAfter().run()">
+      ⚠️ addColumnAfter
+    </button>
+    <button @click="editor.chain().focus().deleteColumn().run()">
+      ⚠️ deleteColumn
+    </button>
+    <button @click="editor.chain().focus().addRowBefore().run()">
+      ⚠️ addRowBefore
+    </button>
+    <button @click="editor.chain().focus().addRowAfter().run()">
+      ⚠️ addRowAfter
+    </button>
+    <button @click="editor.chain().focus().deleteRow().run()">
+      ⚠️ deleteRow
+    </button>
+    <button @click="editor.chain().focus().deleteTable().run()">
+      ✅ deleteTable
+    </button>
+    <button @click="editor.chain().focus().mergeCells().run()">
+      ⚠️ mergeCells
+    </button>
+    <button @click="editor.chain().focus().splitCell().run()">
+      ⚠️ splitCell
+    </button>
+    <button @click="editor.chain().focus().toggleHeaderColumn().run()">
+      ⚠️ toggleHeaderColumn
+    </button>
+    <button @click="editor.chain().focus().toggleHeaderRow().run()">
+      ⚠️ toggleHeaderRow
+    </button>
+    <button @click="editor.chain().focus().toggleHeaderCell().run()">
+      ⚠️ toggleHeaderCell
+    </button>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -57,8 +96,10 @@ export default {
 }
 </script>
 
-<style>
-table, tr, td {
-  border: 3px solid red;
+<style lang="scss">
+.ProseMirror {
+  table, tr, td {
+    border: 3px solid red;
+  }
 }
 </style>
diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts
index f5ba9cc2..6f04f242 100644
--- a/packages/core/src/Node.ts
+++ b/packages/core/src/Node.ts
@@ -68,6 +68,11 @@ export interface NodeConfig<Options = any, Commands = {}> extends Overwrite<Exte
    */
   isolating?: NodeSpec['isolating'] | ((this: { options: Options }) => NodeSpec['isolating']),
 
+  /**
+   * Table Role
+   */
+  tableRole?: NodeSpec['tableRole'] | ((this: { options: Options }) => NodeSpec['tableRole']),
+
   /**
    * Parse HTML
    */
diff --git a/packages/core/src/helpers/getSchema.ts b/packages/core/src/helpers/getSchema.ts
index cd279ab1..2f65659a 100644
--- a/packages/core/src/helpers/getSchema.ts
+++ b/packages/core/src/helpers/getSchema.ts
@@ -36,6 +36,7 @@ export default function getSchema(extensions: Extensions): Schema {
       code: callOrReturn(extension.config.code, context),
       defining: callOrReturn(extension.config.defining, context),
       isolating: callOrReturn(extension.config.isolating, context),
+      tableRole: callOrReturn(extension.config.tableRole, context),
       attrs: Object.fromEntries(extensionAttributes.map(extensionAttribute => {
         return [extensionAttribute.name, { default: extensionAttribute?.attribute?.default }]
       })),
diff --git a/packages/extension-table-cell/src/table-cell.ts b/packages/extension-table-cell/src/table-cell.ts
index 48143fb9..7ef49242 100644
--- a/packages/extension-table-cell/src/table-cell.ts
+++ b/packages/extension-table-cell/src/table-cell.ts
@@ -6,16 +6,20 @@ export interface TableCellOptions {
   },
 }
 export const TableCell = Node.create({
-  name: 'tableCell',
+  name: 'table_cell',
 
   defaultOptions: <TableCellOptions>{
     HTMLAttributes: {},
   },
 
   // content: options.cellContent,
+
   content: 'block+',
+
   // attrs: cellAttrs,
-  // tableRole: 'cell',
+
+  tableRole: 'cell',
+
   isolating: true,
 
   parseHTML() {
diff --git a/packages/extension-table-row/src/table-row.ts b/packages/extension-table-row/src/table-row.ts
index 0a6f2fc8..c8368e8d 100644
--- a/packages/extension-table-row/src/table-row.ts
+++ b/packages/extension-table-row/src/table-row.ts
@@ -7,16 +7,16 @@ export interface TableRowOptions {
 }
 
 export const TableRow = Node.create({
-  name: 'tableRow',
+  name: 'table_row',
 
   defaultOptions: <TableRowOptions>{
     HTMLAttributes: {},
   },
 
   // content: '(tableCell | tableHeader)*',
-  content: 'tableCell*',
+  content: 'table_cell*',
 
-  // tableRole: 'row',
+  tableRole: 'row',
 
   parseHTML() {
     return [{ tag: 'tr' }]
diff --git a/packages/extension-table/package.json b/packages/extension-table/package.json
index 22899b80..edd80eb8 100644
--- a/packages/extension-table/package.json
+++ b/packages/extension-table/package.json
@@ -23,5 +23,8 @@
   ],
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-alpha.6"
+  },
+  "dependencies": {
+    "prosemirror-tables": "^1.1.1"
   }
 }
diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts
index ceb1399b..90ae979b 100644
--- a/packages/extension-table/src/table.ts
+++ b/packages/extension-table/src/table.ts
@@ -1,4 +1,23 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { Command, Node, mergeAttributes } from '@tiptap/core'
+import {
+  // tableEditing,
+  // columnResizing,
+  // goToNextCell,
+  addColumnBefore,
+  addColumnAfter,
+  deleteColumn,
+  addRowBefore,
+  addRowAfter,
+  deleteRow,
+  deleteTable,
+  mergeCells,
+  splitCell,
+  toggleHeaderColumn,
+  toggleHeaderRow,
+  toggleHeaderCell,
+  setCellAttr,
+  fixTables,
+} from 'prosemirror-tables'
 
 export interface TableOptions {
   HTMLAttributes: {
@@ -13,9 +32,9 @@ export const Table = Node.create({
     HTMLAttributes: {},
   },
 
-  content: 'tableRow+',
+  content: 'table_row+',
 
-  // tableRole: 'table',
+  tableRole: 'table',
 
   isolating: true,
 
@@ -28,6 +47,85 @@ export const Table = Node.create({
   renderHTML({ HTMLAttributes }) {
     return ['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ['tbody', 0]]
   },
+
+  addCommands() {
+    return {
+      // createTable: ({ rowsCount, colsCount, withHeaderRow }) => (
+      //   (state, dispatch) => {
+      //     const offset = state.tr.selection.anchor + 1
+
+      //     const nodes = createTable(schema, rowsCount, colsCount, withHeaderRow)
+      //     const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView()
+      //     const resolvedPos = tr.doc.resolve(offset)
+
+      //     tr.setSelection(TextSelection.near(resolvedPos))
+
+      //     dispatch(tr)
+      //   }
+      // ),
+      addColumnBefore: (): Command => ({ state, dispatch }) => {
+        console.log('addColumnBefore')
+        return addColumnBefore(state, dispatch)
+      },
+      addColumnAfter: (): Command => ({ state, dispatch }) => {
+        console.log('addColumnAfter')
+        return addColumnAfter(state, dispatch)
+      },
+      deleteColumn: (): Command => ({ state, dispatch }) => {
+        console.log('deleteColumn')
+        return deleteColumn(state, dispatch)
+      },
+      addRowBefore: (): Command => ({ state, dispatch }) => {
+        console.log('addRowBefore')
+        return addRowBefore(state, dispatch)
+      },
+      addRowAfter: (): Command => ({ state, dispatch }) => {
+        console.log('addRowAfter')
+        return addRowAfter(state, dispatch)
+      },
+      deleteRow: (): Command => ({ state, dispatch }) => {
+        console.log('deleteRow')
+        return deleteRow(state, dispatch)
+      },
+      deleteTable: (): Command => ({ state, dispatch }) => {
+        console.log('deleteTable')
+        return deleteTable(state, dispatch)
+      },
+      mergeCells: (): Command => ({ state, dispatch }) => {
+        console.log('mergeCells')
+        return mergeCells(state, dispatch)
+      },
+      splitCell: (): Command => ({ state, dispatch }) => {
+        console.log('splitCell')
+        return splitCell(state, dispatch)
+      },
+      toggleHeaderColumn: (): Command => ({ state, dispatch }) => {
+        console.log('toggleHeaderColumn')
+        return toggleHeaderColumn(state, dispatch)
+      },
+      toggleHeaderRow: (): Command => ({ state, dispatch }) => {
+        console.log('toggleHeaderRow')
+        return toggleHeaderRow(state, dispatch)
+      },
+      toggleHeaderCell: (): Command => ({ state, dispatch }) => {
+        console.log('toggleHeaderCell')
+        return toggleHeaderCell(state, dispatch)
+      },
+      // fixTables: (): Command => ({ state, dispatch }) => {
+      //   console.log('fixTables')
+      //   return fixTables(state, dispatch)
+      // },
+      // toggleCellMerge: () => (
+      //     (state, dispatch) => {
+      //       if (mergeCells(state, dispatch)) {
+      //         return
+      //       }
+      //       splitCell(state, dispatch)
+      //     }
+      // ),
+      // setCellAttr: ({ name, value }) => setCellAttr(name, value),
+    }
+  },
 })
 
 declare module '@tiptap/core' {

From cdcbe507b703956f9062fea152a2b41533e5f259 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 21 Jan 2021 00:24:19 +0100
Subject: [PATCH 4/7] clean up

---
 docs/src/demos/Nodes/Table/index.vue            | 5 +++++
 packages/extension-table-cell/src/table-cell.ts | 2 --
 packages/extension-table/src/table.ts           | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue
index 5d33711a..c05d96f8 100644
--- a/docs/src/demos/Nodes/Table/index.vue
+++ b/docs/src/demos/Nodes/Table/index.vue
@@ -83,6 +83,11 @@ export default {
               <td>Test</td>
               <td>Test</td>
             </tr>
+            <tr>
+              <td>Test</td>
+              <td>Test</td>
+              <td>Test</td>
+            </tr>
           </tbody>
         </table>
         <p>Example Text</p>
diff --git a/packages/extension-table-cell/src/table-cell.ts b/packages/extension-table-cell/src/table-cell.ts
index 7ef49242..23e397a0 100644
--- a/packages/extension-table-cell/src/table-cell.ts
+++ b/packages/extension-table-cell/src/table-cell.ts
@@ -12,8 +12,6 @@ export const TableCell = Node.create({
     HTMLAttributes: {},
   },
 
-  // content: options.cellContent,
-
   content: 'block+',
 
   // attrs: cellAttrs,
diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts
index 90ae979b..8bcda2b1 100644
--- a/packages/extension-table/src/table.ts
+++ b/packages/extension-table/src/table.ts
@@ -15,8 +15,8 @@ import {
   toggleHeaderColumn,
   toggleHeaderRow,
   toggleHeaderCell,
-  setCellAttr,
-  fixTables,
+  // setCellAttr,
+  // fixTables,
 } from 'prosemirror-tables'
 
 export interface TableOptions {

From 8e78b952134332afd2762ebbe7e4901e1cc9bfb3 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 22 Jan 2021 00:07:31 +0100
Subject: [PATCH 5/7] add attributes to table cells

---
 docs/src/demos/Nodes/Table/index.vue            | 12 ++++++------
 packages/extension-table-cell/src/table-cell.ts | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue
index c05d96f8..f9898eba 100644
--- a/docs/src/demos/Nodes/Table/index.vue
+++ b/docs/src/demos/Nodes/Table/index.vue
@@ -4,22 +4,22 @@
       ⚠️ createTable
     </button>
     <button @click="editor.chain().focus().addColumnBefore().run()">
-      ⚠️ addColumnBefore
+      ✅ addColumnBefore
     </button>
     <button @click="editor.chain().focus().addColumnAfter().run()">
-      ⚠️ addColumnAfter
+      ✅ addColumnAfter
     </button>
     <button @click="editor.chain().focus().deleteColumn().run()">
-      ⚠️ deleteColumn
+      ✅ deleteColumn
     </button>
     <button @click="editor.chain().focus().addRowBefore().run()">
-      ⚠️ addRowBefore
+      ✅ addRowBefore
     </button>
     <button @click="editor.chain().focus().addRowAfter().run()">
-      ⚠️ addRowAfter
+      ✅ addRowAfter
     </button>
     <button @click="editor.chain().focus().deleteRow().run()">
-      ⚠️ deleteRow
+      ✅ deleteRow
     </button>
     <button @click="editor.chain().focus().deleteTable().run()">
       ✅ deleteTable
diff --git a/packages/extension-table-cell/src/table-cell.ts b/packages/extension-table-cell/src/table-cell.ts
index 23e397a0..7257628e 100644
--- a/packages/extension-table-cell/src/table-cell.ts
+++ b/packages/extension-table-cell/src/table-cell.ts
@@ -14,7 +14,19 @@ export const TableCell = Node.create({
 
   content: 'block+',
 
-  // attrs: cellAttrs,
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+      },
+    }
+  },
 
   tableRole: 'cell',
 

From c656517b85fc5815acfc18d1dc7e6e2240dac570 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 22 Jan 2021 00:16:58 +0100
Subject: [PATCH 6/7] add table headers

---
 docs/src/demos/Nodes/Table/index.vue          | 20 +++++---
 docs/src/docPages/api/nodes/table-header.md   |  8 +++
 docs/src/links.yaml                           |  3 ++
 packages/extension-table-header/README.md     | 14 +++++
 packages/extension-table-header/package.json  | 27 ++++++++++
 packages/extension-table-header/src/index.ts  |  5 ++
 .../src/table-header.ts                       | 51 +++++++++++++++++++
 packages/extension-table-row/src/table-row.ts |  3 +-
 8 files changed, 122 insertions(+), 9 deletions(-)
 create mode 100644 docs/src/docPages/api/nodes/table-header.md
 create mode 100644 packages/extension-table-header/README.md
 create mode 100644 packages/extension-table-header/package.json
 create mode 100644 packages/extension-table-header/src/index.ts
 create mode 100644 packages/extension-table-header/src/table-header.ts

diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue
index f9898eba..f22af0ed 100644
--- a/docs/src/demos/Nodes/Table/index.vue
+++ b/docs/src/demos/Nodes/Table/index.vue
@@ -31,13 +31,13 @@
       ⚠️ splitCell
     </button>
     <button @click="editor.chain().focus().toggleHeaderColumn().run()">
-      ⚠️ toggleHeaderColumn
+      ✅ toggleHeaderColumn
     </button>
     <button @click="editor.chain().focus().toggleHeaderRow().run()">
-      ⚠️ toggleHeaderRow
+      ✅ toggleHeaderRow
     </button>
     <button @click="editor.chain().focus().toggleHeaderCell().run()">
-      ⚠️ toggleHeaderCell
+      ✅ toggleHeaderCell
     </button>
     <editor-content :editor="editor" />
   </div>
@@ -52,6 +52,7 @@ import Text from '@tiptap/extension-text'
 import Table from '@tiptap/extension-table'
 import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
 
 export default {
   components: {
@@ -72,6 +73,7 @@ export default {
         Text,
         Table,
         TableRow,
+        TableHeader,
         TableCell,
       ],
       content: `
@@ -79,9 +81,9 @@ export default {
         <table>
           <tbody>
             <tr>
-              <td>Test</td>
-              <td>Test</td>
-              <td>Test</td>
+              <th>Test</th>
+              <th>Test</th>
+              <th>Test</th>
             </tr>
             <tr>
               <td>Test</td>
@@ -103,8 +105,12 @@ export default {
 
 <style lang="scss">
 .ProseMirror {
-  table, tr, td {
+  table, td {
     border: 3px solid red;
   }
+
+  th {
+    border: 3px solid blue;
+  }
 }
 </style>
diff --git a/docs/src/docPages/api/nodes/table-header.md b/docs/src/docPages/api/nodes/table-header.md
new file mode 100644
index 00000000..ea9e355a
--- /dev/null
+++ b/docs/src/docPages/api/nodes/table-header.md
@@ -0,0 +1,8 @@
+# TableHeader
+
+:::pro Fund the development 💖
+We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open source](/sponsor).
+:::
+
+TODO
+
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index ff19c090..a8ad84ed 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -135,6 +135,9 @@
         - title: TableCell
           link: /api/nodes/table-cell
           type: draft
+        - title: TableHeader
+          link: /api/nodes/table-header
+          type: draft
         - title: TaskList
           link: /api/nodes/task-list
         - title: TaskItem
diff --git a/packages/extension-table-header/README.md b/packages/extension-table-header/README.md
new file mode 100644
index 00000000..4dba7844
--- /dev/null
+++ b/packages/extension-table-header/README.md
@@ -0,0 +1,14 @@
+# @tiptap/extension-table-header
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-header.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-header)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-header.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-table-header.svg)](https://www.npmjs.com/package/@tiptap/extension-table-header)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
diff --git a/packages/extension-table-header/package.json b/packages/extension-table-header/package.json
new file mode 100644
index 00000000..b08cc214
--- /dev/null
+++ b/packages/extension-table-header/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@tiptap/extension-table-header",
+  "description": "table cell extension for tiptap",
+  "version": "2.0.0-alpha.5",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-table-header.cjs.js",
+  "umd": "dist/tiptap-extension-table-header.umd.js",
+  "module": "dist/tiptap-extension-table-header.esm.js",
+  "unpkg": "dist/tiptap-extension-table-header.bundle.umd.min.js",
+  "types": "dist/packages/extension-table-header/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-alpha.6"
+  }
+}
diff --git a/packages/extension-table-header/src/index.ts b/packages/extension-table-header/src/index.ts
new file mode 100644
index 00000000..bfa5d100
--- /dev/null
+++ b/packages/extension-table-header/src/index.ts
@@ -0,0 +1,5 @@
+import { TableHeader } from './table-header'
+
+export * from './table-header'
+
+export default TableHeader
diff --git a/packages/extension-table-header/src/table-header.ts b/packages/extension-table-header/src/table-header.ts
new file mode 100644
index 00000000..6802ccf4
--- /dev/null
+++ b/packages/extension-table-header/src/table-header.ts
@@ -0,0 +1,51 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export interface TableHeaderOptions {
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
+export const TableHeader = Node.create({
+  name: 'table_header',
+
+  defaultOptions: <TableHeaderOptions>{
+    HTMLAttributes: {},
+  },
+
+  content: 'block+',
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+      },
+    }
+  },
+
+  tableRole: 'header_cell',
+
+  isolating: true,
+
+  parseHTML() {
+    // return [{ tag: 'th', getAttrs: dom => getCellAttrs(dom, extraAttrs) }]
+    return [{ tag: 'th' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    // toDOM(node) { return ["th", setCellAttrs(node, extraAttrs), 0] }
+    return ['th', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    TableHeader: typeof TableHeader,
+  }
+}
diff --git a/packages/extension-table-row/src/table-row.ts b/packages/extension-table-row/src/table-row.ts
index c8368e8d..6f75613e 100644
--- a/packages/extension-table-row/src/table-row.ts
+++ b/packages/extension-table-row/src/table-row.ts
@@ -13,8 +13,7 @@ export const TableRow = Node.create({
     HTMLAttributes: {},
   },
 
-  // content: '(tableCell | tableHeader)*',
-  content: 'table_cell*',
+  content: '(table_cell | table_header)*',
 
   tableRole: 'row',
 

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 7/7] 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' {