fix: preserve td and th attributes

Prosemirror expects colspan, rowspan and the like to calculate the table layout.

Signed-off-by: Max <max@nextcloud.com>

8 files changed, 97 insertions, 60 deletions

diff --git a/cypress/fixtures/Table.md b/cypress/fixtures/Table.md
index 634544249..546ecb189 100644
--- a/cypress/fixtures/Table.md
+++ b/cypress/fixtures/Table.md
@@ -52,3 +52,63 @@ insertTable
 
 did insertTable
 
+## Add a new row at the end
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  | addRowAfter |
+
+
+---
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  | did addRowAfter |
+|  |  |  |
+
+## Add a new column at the end
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  | addColumnAfter |
+
+
+---
+
+|  |  |  |  |
+|--|--|--|--|
+|  |  |  |  |
+|  |  | did addColumnAfter |  |
+
+## Delete row at the end
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  | deleteRow |
+
+
+---
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+
+## Delete column at the end
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  | deleteColumn |
+
+
+---
+
+|  |  |
+|--|--|
+|  |  |
+|  |  |
+
diff --git a/cypress/integration/Table.spec.js b/cypress/integration/Table.spec.js
index a04601123..cbf38f86d 100644
--- a/cypress/integration/Table.spec.js
+++ b/cypress/integration/Table.spec.js
@@ -1,9 +1,8 @@
 import Table from './../../src/nodes/Table'
-import TableBody from './../../src/nodes/TableBody'
 import TableCell from './../../src/nodes/TableCell'
-import TableHead from './../../src/nodes/TableHead'
 import TableHeader from './../../src/nodes/TableHeader'
 import TableRow from './../../src/nodes/TableRow'
+import TableHeadRow from './../../src/nodes/TableHeadRow'
 import Markdown from './../../src/extensions/Markdown'
 import markdownit from './../../src/markdownit'
 import { createMarkdownSerializer } from './../../src/extensions/Markdown';
@@ -18,10 +17,9 @@ describe('ListItem extension integrated in the editor', () => {
 		extensions: [
 			Markdown,
 			Table,
-			TableBody,
 			TableCell,
-			TableHead,
 			TableHeader,
+			TableHeadRow,
 			TableRow,
 		],
 	})
@@ -53,8 +51,10 @@ describe('ListItem extension integrated in the editor', () => {
 			editor.commands.setTextSelection(found.pos)
 			editor.commands[name]()
 			const updated = findCommand()
-			editor.commands.setTextSelection(updated.pos)
-			editor.commands.insertContent('did ')
+			if (updated) {
+				editor.commands.setTextSelection(updated.pos)
+				editor.commands.insertContent('did ')
+			}
 		}
 	}
 
diff --git a/src/nodes/TableCell.js b/src/nodes/TableCell.js
index 82fa666b3..a8ce69234 100644
--- a/src/nodes/TableCell.js
+++ b/src/nodes/TableCell.js
@@ -3,10 +3,6 @@ import { TableCell } from '@tiptap/extension-table-cell'
 export default TableCell.extend({
 	content: 'inline*',
 
-	addAttributes() {
-		return {}
-	},
-
 	toMarkdown(state, node) {
 		state.write(' ')
 		state.renderInline(node)
diff --git a/src/nodes/TableHeadRow.js b/src/nodes/TableHeadRow.js
index 8845ae462..ea13c9b2e 100644
--- a/src/nodes/TableHeadRow.js
+++ b/src/nodes/TableHeadRow.js
@@ -1,25 +1,8 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import TableRow from './TableRow'
 
-export default Node.create({
+export default TableRow.extend({
 	name: 'tableHeadRow',
 	content: 'tableHeader*',
-	tableRole: 'row',
-
-	addOptions() {
-		return {
-			HTMLAttributes: {},
-		}
-	},
-
-	parseHTML() {
-		return [
-			{ tag: 'tr' },
-		]
-	},
-
-	renderHTML({ HTMLAttributes }) {
-		return ['tr', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
-	},
 
 	toMarkdown(state, node) {
 		state.write('|')
@@ -33,4 +16,9 @@ export default Node.create({
 		state.ensureNewLine()
 	},
 
+	parseHTML() {
+		return [
+			{ tag: 'tr', priority: 70 },
+		]
+	},
 })
diff --git a/src/nodes/TableHeader.js b/src/nodes/TableHeader.js
index b08f5c609..db9224742 100644
--- a/src/nodes/TableHeader.js
+++ b/src/nodes/TableHeader.js
@@ -3,10 +3,6 @@ import { TableHeader } from '@tiptap/extension-table-header'
 export default TableHeader.extend({
 	content: 'inline*',
 
-	addAttributes() {
-		return {}
-	},
-
 	toMarkdown(state, node) {
 		state.write(' ')
 		state.renderInline(node)
diff --git a/src/nodes/TableRow.js b/src/nodes/TableRow.js
index 61e0b982a..b7343eb9a 100644
--- a/src/nodes/TableRow.js
+++ b/src/nodes/TableRow.js
@@ -2,9 +2,6 @@ import { TableRow } from '@tiptap/extension-table-row'
 
 export default TableRow.extend({
 	content: 'tableCell*',
-	addAttributes() {
-		return {}
-	},
 
 	toMarkdown(state, node) {
 		state.write('|')
diff --git a/src/tests/fixtures/tables/basic.out.html b/src/tests/fixtures/tables/basic.out.html
index c0b517180..d92b28d0f 100644
--- a/src/tests/fixtures/tables/basic.out.html
+++ b/src/tests/fixtures/tables/basic.out.html
@@ -1,10 +1,10 @@
 <table>
 <tr>
-<th>heading</th>
-<th>other heading</th>
+<th colspan="1" rowspan="1">heading</th>
+<th colspan="1" rowspan="1">other heading</th>
 </tr>
 <tr>
-<td>cell</td>
-<td>other cell</td>
+<td colspan="1" rowspan="1">cell</td>
+<td colspan="1" rowspan="1">other cell</td>
 </tr>
 </table>
diff --git a/src/tests/fixtures/tables/handbook.out.html b/src/tests/fixtures/tables/handbook.out.html
index 4d8afad4f..32a29d132 100644
--- a/src/tests/fixtures/tables/handbook.out.html
+++ b/src/tests/fixtures/tables/handbook.out.html
@@ -1,30 +1,30 @@
 <table>
 <tr>
-<th><strong>Heading 0</strong></th>
-<th><strong>Heading 1</strong></th>
-<th><strong>Heading 2</strong></th>
-<th><strong>Heading 3</strong></th>
-<th><strong>Heading 4</strong></th>
+<th colspan="1" rowspan="1"><strong>Heading 0</strong></th>
+<th colspan="1" rowspan="1"><strong>Heading 1</strong></th>
+<th colspan="1" rowspan="1"><strong>Heading 2</strong></th>
+<th colspan="1" rowspan="1"><strong>Heading 3</strong></th>
+<th colspan="1" rowspan="1"><strong>Heading 4</strong></th>
 </tr>
 <tr>
-<td><strong>Letter</strong></td>
-<td>a</td>
-<td>b</td>
-<td>c</td>
-<td>d</td>
+<td colspan="1" rowspan="1"><strong>Letter</strong></td>
+<td colspan="1" rowspan="1">a</td>
+<td colspan="1" rowspan="1">b</td>
+<td colspan="1" rowspan="1">c</td>
+<td colspan="1" rowspan="1">d</td>
 </tr>
 <tr>
-<td><strong>Number</strong></td>
-<td>1</td>
-<td>2</td>
-<td>3</td>
-<td>4</td>
+<td colspan="1" rowspan="1"><strong>Number</strong></td>
+<td colspan="1" rowspan="1">1</td>
+<td colspan="1" rowspan="1">2</td>
+<td colspan="1" rowspan="1">3</td>
+<td colspan="1" rowspan="1">4</td>
 </tr>
 <tr>
-<td><strong>Square</strong></td>
-<td>1</td>
-<td>4</td>
-<td>9</td>
-<td>16</td>
+<td colspan="1" rowspan="1"><strong>Square</strong></td>
+<td colspan="1" rowspan="1">1</td>
+<td colspan="1" rowspan="1">4</td>
+<td colspan="1" rowspan="1">9</td>
+<td colspan="1" rowspan="1">16</td>
 </tr>
 </table>