fix: paste tables into document

Fixes #2708.

Try to read the first table row as headings.

Pasting works via `insertContent` while opening uses `setContent`.
They use the schema in different ways.
So we also need to make sure to test both for some corner cases.

`setContent` is fairly flexible in turning the input
into a valid document structure.
`insertContent` however fails to resolve structures
that would require picking lower priority parent elements.

Note: Some tests in src/tests/nodes/Table.spec.js
fail when using `insertContent` instead of `setContent`.
Pasting the correponding html table is fixed never the less.

Signed-off-by: Max <[email protected]>

src/nodes/Table/TableHeadRow.js

@@ -22,7 +22,7 @@ export default TableRow.extend({
 
 	parseHTML() {
 		return [
-			{ tag: 'tr', priority: 70 },
+			{ tag: 'tr:first-of-type', priority: 80 },
 		]
 	},
 })

src/nodes/Table/TableRow.js

@@ -11,7 +11,7 @@ export default TableRow.extend({
 
 	parseHTML() {
 		return [
-			{ tag: 'tr', priority: 80 },
+			{ tag: 'tr', priority: 70 },
 		]
 	},
 })

src/tests/helpers.js

@@ -49,3 +49,18 @@ export function markdownThroughEditorHtml(html) {
 	const serializer = createMarkdownSerializer(tiptap.schema)
 	return serializer.serialize(tiptap.state.doc)
 }
+
+/**
+ * Paste HTML into the Editor and return the serialized markdown
+ *
+ * @param {string} html
+ * @returns {string}
+ */
+export function markdownFromPaste(html) {
+	const tiptap = createEditor({
+		enableRichEditing: true
+	})
+	tiptap.commands.insertContent(html)
+	const serializer = createMarkdownSerializer(tiptap.schema)
+	return serializer.serialize(tiptap.state.doc)
+}

src/tests/markdown.spec.js

@@ -1,7 +1,11 @@
 import spec from "./fixtures/spec"
 import markdownit from './../markdownit'
 import { typesAvailable } from './../markdownit/callouts'
-import { markdownThroughEditor, markdownThroughEditorHtml } from "./helpers";
+import {
+	markdownThroughEditor,
+	markdownThroughEditorHtml,
+	markdownFromPaste
+} from "./helpers";
 import { createMarkdownSerializer } from "../extensions/Markdown";
 import createEditor from "../EditorFactory";
 
@@ -195,11 +199,20 @@ describe('Markdown serializer from html', () => {
 		)).toBe(`::: warn\n!warning!\n\n:::`)
 	})
 
+	test('table', () => {
+		expect(markdownThroughEditorHtml('<table><tbody><tr><th>greetings</th></tr><tr><td>hello</td></tr></tbody></table>')).toBe('| greetings |\n|-----------|\n| hello |\n')
+	})
+
 	test('table cell escaping', () => {
 		// while '|' has no special meaning in commonmark is has to be escaped for GFM tables
 		expect(markdownThroughEditorHtml('<table><tr><th>greetings</th></tr><tr><td>hello | hallo</td></tr></table>')).toBe('| greetings |\n|-----------|\n| hello \\| hallo |\n')
 	})
 
+	test('table pastes (#2708)', () => {
+		// while '|' has no special meaning in commonmark is has to be escaped for GFM tables
+		expect(markdownFromPaste('<table><tbody><tr><th>greetings</th></tr><tr><td>hello</td></tr></tbody></table>')).toBe('| greetings |\n|-----------|\n| hello |\n')
+	})
+
 	test('front matter', () => {
 		expect(markdownThroughEditorHtml('<pre id="frontmatter"><code>some: value</code></pre><h1>Heading</h1>')).toBe('---\nsome: value\n---\n\n# Heading')
 		// Test --- within front matter is allowed