From d1a838461f0dd42c96dc5132d5183fa51b501dfa Mon Sep 17 00:00:00 2001
From: Alberto <3170731+albcp@users.noreply.github.com>
Date: Mon, 25 May 2026 09:35:39 +0200
Subject: [PATCH] Make rendered markdown task list checkboxes clickable

---
 client/components/editor/editor-markdown.vue    |  2 +-
 client/themes/default/scss/app.scss             |  6 ++++--
 .../rendering/markdown-tasklists/renderer.js    |  2 +-
 .../rendering/markdown-tasklists.test.js        | 17 +++++++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 server/test/modules/rendering/markdown-tasklists.test.js

diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index baee118d..44f5f430 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -267,7 +267,7 @@ const md = new MarkdownIt({
   .use(mdDecorate)
   .use(underline)
   .use(mdEmoji)
-  .use(mdTaskLists, { label: false, labelAfter: false })
+  .use(mdTaskLists, { enabled: true, label: false, labelAfter: false })
   .use(mdExpandTabs)
   .use(mdAbbr)
   .use(mdSup)
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index 88380963..cdd42e78 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -790,12 +790,13 @@
     position: relative;
     list-style-type: none;
 
-    &-checkbox[disabled] {
+    &-checkbox {
       width: 1.1rem;
       height: 1.1rem;
       top: 2px;
       position: relative;
       margin-right: 2px;
+      cursor: pointer;
 
       &::after {
         position: absolute;
@@ -819,7 +820,8 @@
         }
       }
 
-      &[checked]::after  {
+      &[checked]::after,
+      &:checked::after {
         content: '✓';
       }
     }
diff --git a/server/modules/rendering/markdown-tasklists/renderer.js b/server/modules/rendering/markdown-tasklists/renderer.js
index 6950acdd..31e24e37 100644
--- a/server/modules/rendering/markdown-tasklists/renderer.js
+++ b/server/modules/rendering/markdown-tasklists/renderer.js
@@ -6,6 +6,6 @@ const mdTaskLists = require('markdown-it-task-lists')
 
 module.exports = {
   init (md, conf) {
-    md.use(mdTaskLists, { label: false, labelAfter: false })
+    md.use(mdTaskLists, { enabled: true, label: false, labelAfter: false })
   }
 }
diff --git a/server/test/modules/rendering/markdown-tasklists.test.js b/server/test/modules/rendering/markdown-tasklists.test.js
new file mode 100644
index 00000000..7bfc8586
--- /dev/null
+++ b/server/test/modules/rendering/markdown-tasklists.test.js
@@ -0,0 +1,17 @@
+const MarkdownIt = require('markdown-it')
+const taskListsRenderer = require('../../../../server/modules/rendering/markdown-tasklists/renderer')
+
+describe('rendering/markdown-tasklists', () => {
+  it('renders interactive task list checkboxes', () => {
+    const md = new MarkdownIt()
+
+    taskListsRenderer.init(md, {})
+
+    const result = md.render('- [ ] unchecked\n- [x] checked')
+
+    expect(result).toContain('class="task-list-item enabled"')
+    expect(result).toContain('class="task-list-item-checkbox"')
+    expect(result).toContain('checked=""')
+    expect(result).not.toContain('disabled="disabled"')
+  })
+})