Make rendered markdown task list checkboxes clickable

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)

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: '✓';
       }
     }

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 })
   }
 }

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"')
+  })
+})