1 files changed, 38 insertions, 6 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/nodes/task_list_item.js b/app/assets/javascripts/behaviors/markdown/nodes/task_list_item.js
index 10ffce9b1b8..095634340c1 100644
--- a/app/assets/javascripts/behaviors/markdown/nodes/task_list_item.js
+++ b/app/assets/javascripts/behaviors/markdown/nodes/task_list_item.js
@@ -5,8 +5,8 @@ export default () => ({
   name: 'task_list_item',
   schema: {
     attrs: {
-      done: {
-        default: false,
+      state: {
+        default: null,
       },
     },
     defining: true,
@@ -18,21 +18,53 @@ export default () => ({
         tag: 'li.task-list-item',
         getAttrs: (el) => {
           const checkbox = el.querySelector('input[type=checkbox].task-list-item-checkbox');
-          return { done: checkbox && checkbox.checked };
+          if (checkbox?.matches('[data-inapplicable]')) {
+            return { state: 'inapplicable' };
+          } else if (checkbox?.checked) {
+            return { state: 'done' };
+          }
+
+          return {};
         },
       },
     ],
     toDOM(node) {
       return [
         'li',
-        { class: 'task-list-item' },
-        ['input', { type: 'checkbox', class: 'task-list-item-checkbox', checked: node.attrs.done }],
+        {
+          class: () => {
+            if (node.attrs.state === 'inapplicable') {
+              return 'task-list-item inapplicable';
+            }
+
+            return 'task-list-item';
+          },
+        },
+        [
+          'input',
+          {
+            type: 'checkbox',
+            class: 'task-list-item-checkbox',
+            checked: node.attrs.state === 'done',
+            'data-inapplicable': node.attrs.state === 'inapplicable',
+          },
+        ],
         ['div', { class: 'todo-content' }, 0],
       ];
     },
   },
   toMarkdown(state, node) {
-    state.write(`[${node.attrs.done ? 'x' : ' '}] `);
+    switch (node.attrs.state) {
+      case 'done':
+        state.write('[x] ');
+        break;
+      case 'inapplicable':
+        state.write('[~] ');
+        break;
+      default:
+        state.write('[ ] ');
+        break;
+    }
     state.renderContent(node);
   },
 });