fix(TaskList): Add class name to rendered HTML

The upstream Tiptap tasklist implementation uses data-type attributes to
identify task lists and task items. We use class names instead as we
depend on the markdown-it-task-lists plugin.

This fixes copy & paste of task lists.

Fixes: #5237

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

cypress/e2e/shortcuts.spec.js

@@ -45,7 +45,7 @@ describe('keyboard shortcuts', () => {
 	it('codeblock', () => testShortcut(`${modKey}{alt}c`, 'pre'))
 	it('ordered-list', () => testShortcut(`${modKey}{shift}7`, 'ol'))
 	it('unordered-list', () => testShortcut(`${modKey}{shift}8`, 'ul'))
-	it('task-list', () => testShortcut(`${modKey}{shift}9`, 'ul[data-type="taskList"]'))
+	it('task-list', () => testShortcut(`${modKey}{shift}9`, 'ul.contains-task-list'))
 
 	// Headings
 	const levels = [1, 2, 3, 4, 5, 6]

cypress/e2e/workspace.spec.js

@@ -111,7 +111,7 @@ describe('Workspace', function() {
 		;[
 			['unordered-list', 'ul'],
 			['ordered-list', 'ol'],
-			['task-list', 'ul[data-type="taskList"]'],
+			['task-list', 'ul.contains-task-list'],
 		].forEach(([button, tag]) => testButton(button, tag, 'List me'))
 	})
 

src/nodes/TaskItem.js

@@ -42,7 +42,7 @@ const TaskItem = TipTapTaskItem.extend({
 	],
 
 	renderHTML({ node, HTMLAttributes }) {
-		const listAttributes = { class: 'checkbox-item' }
+		const listAttributes = { class: 'task-list-item checkbox-item' }
 		const checkboxAttributes = { type: 'checkbox', class: '', contenteditable: false }
 		if (node.attrs.checked) {
 			checkboxAttributes.checked = true
@@ -70,7 +70,7 @@ const TaskItem = TipTapTaskItem.extend({
 		state.renderContent(node)
 	},
 
-	 addInputRules() {
+	addInputRules() {
 		return [
 			...this.parent(),
 			wrappingInputRule({

src/nodes/TaskList.js

@@ -4,6 +4,7 @@
  */
 
 import TiptapTaskList from '@tiptap/extension-task-list'
+import { mergeAttributes } from '@tiptap/core'
 
 const TaskList = TiptapTaskList.extend({
 
@@ -14,6 +15,10 @@ const TaskList = TiptapTaskList.extend({
 		},
 	],
 
+	renderHTML({ HTMLAttributes }) {
+		return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { class: 'contains-task-list' }), 0]
+	},
+
 	addAttributes() {
 		return {
 			...this.parent?.(),

src/tests/tiptap.spec.js

@@ -25,4 +25,9 @@ describe('TipTap', () => {
         const markdown = 'Hard line break  \nNext Paragraph'
         expect(renderedHTML(markdown)).toEqual('<p>Hard line break<br>Next Paragraph</p>')
     })
+
+	it('render taskList', () => {
+		const markdown = '* [ ] item 1\n'
+		expect(renderedHTML(markdown)).toEqual('<ul class="contains-task-list"><li data-checked="false" class="task-list-item checkbox-item"><input type="checkbox" class="" contenteditable="false"><label><p>item 1</p></label></li></ul>')
+	})
 })