fix(TaskItem): use div instead of label element as task item wrapper

Fixes problems with more than one block node in task items. `label`
elements have special click behaviour: clicking on them fires a second
click on the their first "labelable" descendant.

This resulted in weird bugs when having e.g. a code block or image as
second block node in a task item.

Fixes: #5225

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

Author: mejo-

src/css/prosemirror.scss

@@ -75,11 +75,11 @@ div.ProseMirror {
 				background-color: var(--color-primary-element);
 				border-color: var(--color-primary-element);
 			}
-			> label > p {
+			> .task-item-content > p {
 				color: var(--color-text-maxcontrast);
 			}
 		}
-		label {
+		.task-item-content {
 			display: block;
 			flex-grow: 1;
 			max-width: calc(100% - 28px);

src/nodes/TaskItem.ts

@@ -62,7 +62,7 @@ const TaskItem = TipTapTaskItem.extend({
 			'li',
 			mergeAttributes(HTMLAttributes, listAttributes),
 			['input', checkboxAttributes],
-			['label', 0],
+			['div', { class: 'task-item-content' }, 0],
 		]
 	},
 

src/tests/tiptap.spec.js

@@ -31,7 +31,7 @@ describe('TipTap', () => {
 	it('render taskList', () => {
 		const markdown = '* [ ] item 1\n'
 		expect(renderedHTML(markdown)).toEqual(
-			'<ul class="contains-task-list"><li dir="ltr" data-checked="false" class="task-list-item checkbox-item"><input type="checkbox" class="" contenteditable="false"><label><p dir="ltr">item 1</p></label></li></ul>',
+			'<ul class="contains-task-list"><li dir="ltr" data-checked="false" class="task-list-item checkbox-item"><input type="checkbox" class="" contenteditable="false"><div class="task-item-content"><p dir="ltr">item 1</p></div></li></ul>',
 		)
 	})
 })