fix: keep tables separate in markdown

Also make sure that table rows are rendered on one line each.

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

cypress/fixtures/Table.md

@@ -0,0 +1,54 @@
+## Preserve Tables 
+
+This is a table
+
+| Header | other Header |
+|--------|--------------|
+| Cell   | other cell   |
+| Cell   | other cell   |
+
+---
+
+This is a table
+
+| Header | other Header |
+|--------|--------------|
+| Cell | other cell |
+| Cell | other cell |
+
+## Create a table
+
+insertTable
+
+---
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  |  |
+
+did insertTable
+
+## Create second tables
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  |  |
+
+insertTable
+
+---
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  |  |
+
+|  |  |  |
+|--|--|--|
+|  |  |  |
+|  |  |  |
+
+did insertTable
+

cypress/integration/Table.spec.js

@@ -0,0 +1,76 @@
+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 Markdown from './../../src/extensions/Markdown'
+import markdownit from './../../src/markdownit'
+import { createMarkdownSerializer } from './../../src/extensions/Markdown';
+import { findChildren, findChildrenByType } from 'prosemirror-utils'
+import createEditor from './../../src/tests/createEditor'
+import testData from '../fixtures/Table.md'
+
+describe('ListItem extension integrated in the editor', () => {
+
+	const editor = createEditor({
+		content: '',
+		extensions: [
+			Markdown,
+			Table,
+			TableBody,
+			TableCell,
+			TableHead,
+			TableHeader,
+			TableRow,
+		],
+	})
+
+	for (const spec of testData.split(/#+\s+/)){
+		const [description, ...rest] = spec.split(/\n/)
+		const [input, output] = rest.join('\n').split(/\n\n---\n\n/)
+		if (!description) {
+			continue
+		}
+		it(description, () => {
+			expect(spec).to.include('\n')
+			expect(input).to.be.ok
+			expect(output).to.be.ok
+			loadMarkdown(input)
+			runCommands()
+			expectMarkdown(output.replace(/\n*$/, ''))
+		})
+	}
+
+	function loadMarkdown(markdown) {
+		editor.commands.setContent(markdownit.render(markdown))
+	}
+
+	function runCommands() {
+		let found
+		while (found = findCommand()) {
+			const name = found.node.text
+			editor.commands.setTextSelection(found.pos)
+			editor.commands[name]()
+			const updated = findCommand()
+			editor.commands.setTextSelection(updated.pos)
+			editor.commands.insertContent('did ')
+		}
+	}
+
+	function findCommand() {
+		const doc = editor.state.doc
+		return findChildren(doc, child => {
+			return child.isText && editor.commands.hasOwnProperty(child.text)
+		})[0]
+	}
+
+	function expectMarkdown(markdown) {
+		expect(getMarkdown().replace(/\n$/, '')).to.equal(markdown)
+	}
+
+	function getMarkdown() {
+		const serializer = createMarkdownSerializer(editor.schema)
+		return serializer.serialize(editor.state.doc)
+	}
+})

src/nodes/Table.js

@@ -105,6 +105,7 @@ export default Table.extend({
 
 	toMarkdown(state, node) {
 		state.renderContent(node)
+		state.closeBlock(node)
 	},
 
 })

src/nodes/TableRow.js

@@ -9,6 +9,7 @@ export default TableRow.extend({
 	toMarkdown(state, node) {
 		state.write('|')
 		state.renderInline(node)
+		state.ensureNewLine()
 	},
 
 	parseHTML() {

src/tests/tables.spec.js

@@ -17,7 +17,7 @@ describe('Table', () => {
 	test('serialize from editor', () => {
 		const tiptap = editorWithContent(markdownit.render(input))
 		const serializer = createMarkdownSerializer(tiptap.schema)
-		expect(serializer.serialize(tiptap.state.doc)).toBe(input.replace(/\n$/, ''))
+		expect(serializer.serialize(tiptap.state.doc)).toBe(input)
 	})
 
 	test('handle html table with other structure', () => {