fix(Markdown): copy full block node if it has more than one child

* Single list item is selected: copy only it's content
* Multiple list items are selected: copy list with markdown formatting
* Single table cell is selected: copy only it's conten
* Full table is selected: copy table with markdown formatting

Fixes: #7826

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

src/extensions/Markdown.js

@@ -92,11 +92,15 @@ const Markdown = Extension.create({
 					},
 					clipboardTextSerializer: (slice) => {
 						const traverseNodes = (slice) => {
-							if (slice.content.childCount > 1) {
+							if (slice.content.childCount > 1 || slice.content.firstChild?.childCount > 1) {
+								// Selected several nodes or several children of one block node
 								return clipboardSerializer(this.editor.schema).serialize(slice.content)
 							} else if (slice.isLeaf) {
 								return slice.textContent
 							} else {
+								// Only one block node selected, copy it's child content
+								// Required to not copy wrapping block node when selecting e.g. one table
+								// cell, one list item or the content of block quotes/callouts.
 								return traverseNodes(slice.content.firstChild)
 							}
 						}

src/tests/extensions/Markdown.spec.js

@@ -7,8 +7,11 @@ import { Markdown } from './../../extensions/index.js'
 import { createMarkdownSerializer } from './../../extensions/Markdown.js'
 import { CodeBlock } from '@tiptap/extension-code-block'
 import { Blockquote } from '@tiptap/extension-blockquote'
+import { ListItem } from '@tiptap/extension-list-item'
 import Image from './../../nodes/Image.js'
 import ImageInline from './../../nodes/ImageInline.js'
+import OrderedList from './../../nodes/OrderedList.js'
+import Table from './../../nodes/Table.js'
 import TaskList from './../../nodes/TaskList.js'
 import TaskItem from './../../nodes/TaskItem.js'
 import { Italic, Strong, Underline, Link } from './../../marks/index.js'
@@ -33,6 +36,7 @@ describe('Markdown extension unit', () => {
 		expect(underline).toEqual(Underline.config.toMarkdown)
 		const listItem = serializer.serializer.nodes.listItem
 		expect(typeof listItem).toBe('function')
+		editor.destroy()
 	})
 })
 
@@ -41,6 +45,7 @@ describe('Markdown extension integrated in the editor', () => {
 		const editor = createCustomEditor('<p><u>Test</u></p>', [Markdown, Underline])
 		const serializer = createMarkdownSerializer(editor.schema)
 		expect(serializer.serialize(editor.state.doc)).toBe('__Test__')
+		editor.destroy()
 	})
 
 	it('serializes nodes according to their spec', () => {
@@ -50,6 +55,7 @@ describe('Markdown extension integrated in the editor', () => {
 		)
 		const serializer = createMarkdownSerializer(editor.schema)
 		expect(serializer.serialize(editor.state.doc)).toBe('\n- [ ] Hello')
+		editor.destroy()
 	})
 
 	it('serializes images with the default prosemirror way', () => {
@@ -59,6 +65,7 @@ describe('Markdown extension integrated in the editor', () => {
 		)
 		const serializer = createMarkdownSerializer(editor.schema)
 		expect(serializer.serialize(editor.state.doc)).toBe('![Hello](test)')
+		editor.destroy()
 	})
 
 	it('serializes block images with the default prosemirror way', () => {
@@ -79,13 +86,14 @@ describe('Markdown extension integrated in the editor', () => {
 		expect(serializer.serialize(editor.state.doc)).toBe('inline image ![Hello](test) inside text')
 	})
 
-	it('copies task lists to plaintext like markdown', () => {
+	it('copies markdown syntax for task list if selected together with a paragraph', () => {
 		const editor = createCustomEditor(
 			'<p><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></p>',
 			[Markdown, TaskList, TaskItem],
 		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('\n- [ ] Hello')
+		editor.destroy()
 	})
 
 	it('copies code block content to plaintext according to their spec', () => {
@@ -95,15 +103,47 @@ describe('Markdown extension integrated in the editor', () => {
 		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hello')
+		editor.destroy()
 	})
 
-	it('copies nested task list nodes to markdown like syntax', () => {
+	it('copies just the content of a single list item', () => {
 		const editor = createCustomEditor(
-			'<blockquote><p><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></blockquote>',
+			'<p>paragraph1</p><ol><li><p>first</p></li></ol><p>paragraph2</p>',
+			[Markdown, ListItem, OrderedList],
+		)
+		const text = copyEditorContent(editor, editor.schema.nodes.orderedList)
+		expect(text).toBe('first')
+		editor.destroy()
+	})
+
+	it('copies markdown syntax for multiple list items', () => {
+		const editor = createCustomEditor(
+			'<p>paragraph1</p><ol><li><p>first</p></li><li><p>second</p></li></ol><p>paragraph2</p>',
+			[Markdown, ListItem, OrderedList],
+		)
+		const text = copyEditorContent(editor, editor.schema.nodes.orderedList)
+		expect(text).toBe('1. first\n2. second')
+		editor.destroy()
+	})
+
+	it('copies just the content of a single nested task list item', () => {
+		const editor = createCustomEditor(
+			'<blockquote><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></blockquote>',
 			[Markdown, Blockquote, TaskList, TaskItem],
 		)
 		const text = copyEditorContent(editor)
-		expect(text).toBe('\n- [ ] Hello')
+		expect(text).toBe('Hello')
+		editor.destroy()
+	})
+
+	it('copies markdown syntax for multiple nested task list items', () => {
+		const editor = createCustomEditor(
+			'<blockquote><ul class="contains-task-list"><li><input type="checkbox">Hello</li><li><input type="checkbox">World</li></ul></blockquote>',
+			[Markdown, Blockquote, TaskList, TaskItem],
+		)
+		const text = copyEditorContent(editor)
+		expect(text).toBe('- [ ] Hello\n- [ ] World')
+		editor.destroy()
 	})
 
 	it('copies address from blockquote to markdown', () => {
@@ -113,6 +153,7 @@ describe('Markdown extension integrated in the editor', () => {
 		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hermannsreute 44A')
+		editor.destroy()
 	})
 
 	it('copy version number without escape character', () => {
@@ -122,6 +163,27 @@ describe('Markdown extension integrated in the editor', () => {
 		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hello\n\n28.0.4')
+		editor.destroy()
+	})
+
+	it('copies just content for table cell', () => {
+		const editor = createCustomEditor(
+			'<p>paragraph</p><table><tr><th>headercell</th></tr><tr><td>contentcell</td></tr></table>',
+			[Markdown, Table],
+		)
+		const text = copyEditorContent(editor, editor.schema.nodes.tableCell)
+		expect(text).toBe('contentcell')
+		editor.destroy()
+	})
+
+	it('copies markdown syntax for full table', () => {
+		const editor = createCustomEditor(
+			'<p>paragraph</p><table><tr><th>headercell</th></tr><tr><td>contentcell</td></tr></table>',
+			[Markdown, Table],
+		)
+		const text = copyEditorContent(editor, editor.schema.nodes.table)
+		expect(text).toBe('| headercell  |\n|-------------|\n| contentcell |\n')
+		editor.destroy()
 	})
 
 	it('strips bold, italic, and other marks from paragraph', () => {
@@ -131,6 +193,7 @@ describe('Markdown extension integrated in the editor', () => {
 		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hello\n\nlonely world')
+		editor.destroy()
 	})
 
 	it('strips href and link formatting from email address', () => {
@@ -140,12 +203,22 @@ describe('Markdown extension integrated in the editor', () => {
 		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hello\n\nexample@example.com')
+		editor.destroy()
 	})
 
 })
 
-const copyEditorContent = (editor) => {
-	editor.commands.selectAll()
+const copyEditorContent = (editor, nodeType = null) => {
+	if (nodeType) {
+		editor.state.doc.descendants((node, pos) => {
+			if (node.type === nodeType) {
+				editor.commands.setNodeSelection(pos)
+			}
+		})
+	} else {
+		editor.commands.selectAll()
+	}
+
 	const slice = editor.state.selection.content()
 	const { text } = editor.view.serializeForClipboard(slice)
 	return text