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]>
nextcloud · Sep 6, 2024 · d76282c · d76282c
1 parent 5d5f5dd
commit d76282c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/nodes/TaskItem.js b/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({

diff --git a/src/nodes/TaskList.js b/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?.(),

diff --git a/src/tests/tiptap.spec.js b/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>')
+	})
 })