[stable27] Fix/2708 pasting tables

src/components/PlainTextReader.vue

@@ -25,9 +25,11 @@
 </template>
 
 <script>
+/* eslint-disable import/no-named-as-default */
+import CodeBlock from '@tiptap/extension-code-block'
+import escapeHtml from 'escape-html'
 import BaseReader from './BaseReader.vue'
 import { PlainText } from './../extensions/index.js'
-import escapeHtml from 'escape-html'
 
 export default {
 	name: 'PlainTextReader',
@@ -37,7 +39,7 @@ export default {
 		renderHtml(content) {
 			return '<pre>' + escapeHtml(content) + '</pre>'
 		},
-		extensions: () => [PlainText],
+		extensions: () => [PlainText, CodeBlock],
 	},
 
 	props: {

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.js'
 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