fix(editor): don't strike through nested checklist items of a checked parent (#3715)

Unchecked checklist item nested under checked parent rendered greyed out
and struck through, so it looked checked.

Cause: `li[data-checked='true']` styled whole list item, including
nested task list inside item's content div. `text-decoration` propagates
to descendants and cannot be reset by child. Rule now scoped to item's
own content.

Fixes #3712

## How to verify

1. Create a task and open it.
2. Edit the description, add a checklist item "Parent item", then press
Enter and Tab to nest a second item "Child item" underneath it.
3. Check the checkbox of "Parent item" only, and save.
4. **Expected:** "Parent item" is greyed out and struck through. "Child
item" keeps normal text colour with no strikethrough, and its checkbox
stays unchecked.

**Before this PR:** "Child item" was greyed out and struck through too,
making it look checked.

---------

Co-authored-by: kolaente <k@knt.li>
Co-authored-by: kolaente <hello@kolaente.de>

Author: tink-bot

frontend/src/components/input/editor/TipTap.vue

@@ -1038,7 +1038,7 @@ ul[data-type='taskList'] {
 	padding: 0;
 	margin-inline-start: 0;
 
-	li[data-checked='true'] {
+	li[data-checked='true'] > div > :not(ul, ol) {
 		color: var(--grey-500);
 		text-decoration: line-through;
 	}

frontend/tests/e2e/task/nested-checklist-strikethrough.spec.ts

@@ -0,0 +1,66 @@
+import {test, expect} from '../../support/fixtures'
+import {TaskFactory} from '../../factories/task'
+import {ProjectFactory} from '../../factories/project'
+
+const NESTED_CHECKLIST = `<ul data-type="taskList">
+	<li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked><span></span></label>
+		<div>
+			<p>Parent item</p>
+			<ul data-type="taskList">
+				<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
+					<div><p>Child item</p></div>
+				</li>
+			</ul>
+		</div>
+	</li>
+</ul>`
+
+test.describe('Nested checklist items', () => {
+	test.beforeEach(async () => {
+		await ProjectFactory.create(1)
+	})
+
+	/**
+	 * Regression test for https://github.com/go-vikunja/vikunja/issues/3712
+	 *
+	 * Styling the whole `li[data-checked=true]` also hit the nested task list living
+	 * inside the item's content div, so an unchecked child rendered greyed out and
+	 * struck through - it looked checked.
+	 */
+	test('Should not strike through an unchecked child of a checked item (issue #3712)', async ({authenticatedPage: page}) => {
+		const tasks = await TaskFactory.create(1, {
+			id: 1,
+			description: NESTED_CHECKLIST,
+		})
+
+		await page.goto(`/tasks/${tasks[0].id}`)
+
+		const description = page.locator('.task-view .details.content.description .tiptap')
+		const checkedItem = description.locator('li[data-checked="true"] > div > p').first()
+		const uncheckedItem = description.locator('li[data-checked="false"] > div > p').first()
+
+		await expect(checkedItem).toHaveText('Parent item')
+		await expect(uncheckedItem).toHaveText('Child item')
+
+		// text-decoration propagates to descendants and cannot be reset by a child, so the
+		// only reliable check is that no ancestor of the child carries the strikethrough.
+		const struckAncestors = await uncheckedItem.evaluate(el => {
+			const decorated: string[] = []
+			for (let node = el; node; node = node.parentElement) {
+				if (node.classList.contains('tiptap')) {
+					break
+				}
+				if (getComputedStyle(node).textDecorationLine.includes('line-through')) {
+					decorated.push(node.tagName)
+				}
+			}
+			return decorated
+		})
+		expect(struckAncestors).toEqual([])
+
+		// The checked parent still gets its own strikethrough and muted colour.
+		await expect(checkedItem).toHaveCSS('text-decoration-line', 'line-through')
+		expect(await uncheckedItem.evaluate(el => getComputedStyle(el).color))
+			.not.toBe(await checkedItem.evaluate(el => getComputedStyle(el).color))
+	})
+})