fix: handling of various table formats

Signed-off-by: Max <max@nextcloud.com>
nextcloud · Mar 31, 2022 · 0128849 · 0128849
1 parent 9229d45
commit 0128849
Show file tree

Hide file tree

Showing 14 changed files with 313 additions and 16 deletions.
diff --git a/src/nodes/Table.js b/src/nodes/Table.js
@@ -1,8 +1,41 @@
 import { Table } from '@tiptap/extension-table'
-import { mergeAttributes } from '@tiptap/core'
+import { Node, mergeAttributes } from '@tiptap/core'
+
+/*
+ * Markdown tables do not include captions.
+ * We still need to parse them though
+ * because otherwise tiptap will try to insert their text content
+ * and put it in the top row of the table.
+ */
+const tableCaption = Node.create({
+	name: 'tableCaption',
+	content: 'inline*',
+	addAttributes() {
+		return {}
+	},
+
+	renderHTML() {
+		return ['caption']
+	},
+
+	toMarkdown(state, node) {
+	},
+
+	parseHTML() {
+		return [
+			{ tag: 'table caption', priority: 90 },
+		]
+	},
+})
 
 export default Table.extend({
-	content: 'tableHead tableBody',
+	content: 'tableCaption? tableHead tableBody',
+
+	addExtensions() {
+		return [
+			tableCaption,
+		]
+	},
 
 	renderHTML({ HTMLAttributes }) {
 		return ['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]

diff --git a/src/nodes/TableBody.js b/src/nodes/TableBody.js
@@ -2,20 +2,14 @@ import { Node, mergeAttributes } from '@tiptap/core'
 
 export default Node.create({
 	name: 'tableBody',
-	content: 'tableRow',
+	content: 'tableRow*',
 
 	addOptions() {
 		return {
 			HTMLAttributes: {},
 		}
 	},
 
-	parseHTML() {
-		return [
-			{ tag: 'tbody' },
-		]
-	},
-
 	renderHTML({ HTMLAttributes }) {
 		return ['tbody', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
 	},

diff --git a/src/nodes/TableCell.js b/src/nodes/TableCell.js
@@ -13,4 +13,12 @@ export default TableCell.extend({
 		state.write(' |')
 	},
 
+	parseHTML() {
+		return [
+			{ tag: 'td' },
+			{ tag: 'th' },
+			{ tag: 'table thead ~ tbody th', priority: 70 },
+			{ tag: 'table thead ~ tbody td', priority: 70 },
+		]
+	},
 })
diff --git a/src/nodes/TableHead.js b/src/nodes/TableHead.js
@@ -39,12 +39,8 @@ export default Node.create({
 	},
 
 	addExtensions() {
-		return [tableHeadRow]
-	},
-
-	parseHTML() {
 		return [
-			{ tag: 'thead' },
+			tableHeadRow,
 		]
 	},
 

diff --git a/src/nodes/TableHeader.js b/src/nodes/TableHeader.js
@@ -13,4 +13,16 @@ export default TableHeader.extend({
 		state.write(' |')
 	},
 
+	parseHTML() {
+		return [
+			{ tag: 'table thead:empty ~ tbody :first-child th', priority: 80 },
+			{ tag: 'table thead:empty ~ tbody :first-child td', priority: 80 },
+			{ tag: 'table thead :first-child th', priority: 60 },
+			{ tag: 'table thead :first-child td', priority: 60 },
+			{ tag: 'table tbody :first-child th', priority: 60 },
+			{ tag: 'table tbody :first-child td', priority: 60 },
+			{ tag: 'table > :first-child > th', priority: 60 },
+			{ tag: 'table > :first-child > td', priority: 60 },
+		]
+	},
 })
diff --git a/src/nodes/TableRow.js b/src/nodes/TableRow.js
@@ -11,4 +11,9 @@ export default TableRow.extend({
 		state.renderInline(node)
 	},
 
+	parseHTML() {
+		return [
+			{ tag: 'tr', priority: 80 },
+		]
+	},
 })
diff --git a/src/tests/fixtures/tables/handbook-caption-tbody.html b/src/tests/fixtures/tables/handbook-caption-tbody.html
@@ -0,0 +1,34 @@
+<table id="bkmrk-section-name" style="border-collapse: collapse; width: 100%; height: 150px;" border="1">
+<caption>Testing tables
+</caption>
+<tbody>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Heading 0</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 1</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 2</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 3</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 4</strong></td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Letter</strong></td>
+<td style="width: 20%; height: 29px;">a</td>
+<td style="width: 20%; height: 29px;">b</td>
+<td style="width: 20%; height: 29px;">c</td>
+<td style="width: 20%; height: 29px;">d</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Number</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">2</td>
+<td style="width: 20%; height: 29px;">3</td>
+<td style="width: 20%; height: 29px;">4</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Square</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">4</td>
+<td style="width: 20%; height: 29px;">9</td>
+<td style="width: 20%; height: 29px;">16</td>
+</tr>
+</tbody>
+</table>
diff --git a/src/tests/fixtures/tables/handbook-empty-thead-tbody.html b/src/tests/fixtures/tables/handbook-empty-thead-tbody.html
@@ -0,0 +1,34 @@
+<table id="bkmrk-section-name" style="border-collapse: collapse; width: 100%; height: 150px;" border="1">
+<thead>
+</thead>
+<tbody>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Heading 0</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 1</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 2</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 3</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 4</strong></td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Letter</strong></td>
+<td style="width: 20%; height: 29px;">a</td>
+<td style="width: 20%; height: 29px;">b</td>
+<td style="width: 20%; height: 29px;">c</td>
+<td style="width: 20%; height: 29px;">d</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Number</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">2</td>
+<td style="width: 20%; height: 29px;">3</td>
+<td style="width: 20%; height: 29px;">4</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Square</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">4</td>
+<td style="width: 20%; height: 29px;">9</td>
+<td style="width: 20%; height: 29px;">16</td>
+</tr>
+</tbody>
+</table>
diff --git a/src/tests/fixtures/tables/handbook-multiple-tbody.html b/src/tests/fixtures/tables/handbook-multiple-tbody.html
@@ -0,0 +1,36 @@
+<table id="bkmrk-section-name" style="border-collapse: collapse; width: 100%; height: 150px;" border="1">
+<tbody>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Heading 0</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 1</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 2</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 3</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 4</strong></td>
+</tr>
+</tbody>
+<tbody>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Letter</strong></td>
+<td style="width: 20%; height: 29px;">a</td>
+<td style="width: 20%; height: 29px;">b</td>
+<td style="width: 20%; height: 29px;">c</td>
+<td style="width: 20%; height: 29px;">d</td>
+</tr>
+</tbody>
+<tbody>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Number</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">2</td>
+<td style="width: 20%; height: 29px;">3</td>
+<td style="width: 20%; height: 29px;">4</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Square</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">4</td>
+<td style="width: 20%; height: 29px;">9</td>
+<td style="width: 20%; height: 29px;">16</td>
+</tr>
+</tbody>
+</table>
diff --git a/src/tests/fixtures/tables/handbook-thead-tbody.html b/src/tests/fixtures/tables/handbook-thead-tbody.html
@@ -0,0 +1,34 @@
+<table id="bkmrk-section-name" style="border-collapse: collapse; width: 100%; height: 150px;" border="1">
+<thead>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Heading 0</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 1</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 2</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 3</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 4</strong></td>
+</tr>
+</thead>
+<tbody>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Letter</strong></td>
+<td style="width: 20%; height: 29px;">a</td>
+<td style="width: 20%; height: 29px;">b</td>
+<td style="width: 20%; height: 29px;">c</td>
+<td style="width: 20%; height: 29px;">d</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Number</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">2</td>
+<td style="width: 20%; height: 29px;">3</td>
+<td style="width: 20%; height: 29px;">4</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Square</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">4</td>
+<td style="width: 20%; height: 29px;">9</td>
+<td style="width: 20%; height: 29px;">16</td>
+</tr>
+</tbody>
+</table>
diff --git a/src/tests/fixtures/tables/handbook-with-caption.html b/src/tests/fixtures/tables/handbook-with-caption.html
@@ -0,0 +1,33 @@
+<table id="bkmrk-section-name" style="border-collapse: collapse; width: 100%; height: 150px;" border="1">
+<caption>test</caption>
+<tbody>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Heading 0</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 1</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 2</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 3</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 4</strong></td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Letter</strong></td>
+<td style="width: 20%; height: 29px;">a</td>
+<td style="width: 20%; height: 29px;">b</td>
+<td style="width: 20%; height: 29px;">c</td>
+<td style="width: 20%; height: 29px;">d</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Number</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">2</td>
+<td style="width: 20%; height: 29px;">3</td>
+<td style="width: 20%; height: 29px;">4</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Square</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">4</td>
+<td style="width: 20%; height: 29px;">9</td>
+<td style="width: 20%; height: 29px;">16</td>
+</tr>
+</tbody>
+</table>
diff --git a/src/tests/fixtures/tables/handbook.html b/src/tests/fixtures/tables/handbook.html
@@ -0,0 +1,32 @@
+<table id="bkmrk-section-name" style="border-collapse: collapse; width: 100%; height: 150px;" border="1">
+<tbody>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Heading 0</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 1</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 2</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 3</strong></td>
+<td style="width: 20%; height: 29px;"><strong>Heading 4</strong></td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Letter</strong></td>
+<td style="width: 20%; height: 29px;">a</td>
+<td style="width: 20%; height: 29px;">b</td>
+<td style="width: 20%; height: 29px;">c</td>
+<td style="width: 20%; height: 29px;">d</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Number</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">2</td>
+<td style="width: 20%; height: 29px;">3</td>
+<td style="width: 20%; height: 29px;">4</td>
+</tr>
+<tr style="height: 29px;">
+<td style="width: 20%; height: 29px;"><strong>Square</strong></td>
+<td style="width: 20%; height: 29px;">1</td>
+<td style="width: 20%; height: 29px;">4</td>
+<td style="width: 20%; height: 29px;">9</td>
+<td style="width: 20%; height: 29px;">16</td>
+</tr>
+</tbody>
+</table>
diff --git a/src/tests/fixtures/tables/handbook.out.html b/src/tests/fixtures/tables/handbook.out.html
@@ -0,0 +1,34 @@
+<table>
+<thead>
+<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>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><strong>Letter</strong></td>
+<td>a</td>
+<td>b</td>
+<td>c</td>
+<td>d</td>
+</tr>
+<tr>
+<td><strong>Number</strong></td>
+<td>1</td>
+<td>2</td>
+<td>3</td>
+<td>4</td>
+</tr>
+<tr>
+<td><strong>Square</strong></td>
+<td>1</td>
+<td>4</td>
+<td>9</td>
+<td>16</td>
+</tr>
+</tbody>
+</table>