Show checkbox for TODO / DONE and update

editor/package-lock.json

@@ -9241,9 +9241,9 @@
       }
     },
     "wiki-list-editor": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/wiki-list-editor/-/wiki-list-editor-0.8.3.tgz",
-      "integrity": "sha512-ZBSk3V2ln8359+8P+2Mj/kiz+F1V5sKR01/pchwIEQYLc+JbgplTJXIKenpxdneD0KKitCMt7oEI5ur+MKqBLg==",
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/wiki-list-editor/-/wiki-list-editor-0.8.7.tgz",
+      "integrity": "sha512-93pNyMljk+/v4jFE2fEamK42zwzzQ5DUyEXAAkrMsRuZSQvo2s8sC0O6nUMcJwn32s8vqIhdCx6KFSeCFbfWcA==",
       "requires": {
         "dragula": "^3.7.2",
         "he": "^1.2.0",

editor/package.json

@@ -38,7 +38,7 @@
     "vis-data": "^6.6.1",
     "vis-network": "^7.6.10",
     "vis-util": "^4.3.2",
-    "wiki-list-editor": "^0.8.3"
+    "wiki-list-editor": "^0.8.7"
   },
   "scripts": {
     "test": "node_modules/.bin/mocha -r esm",

editor/src/index.js

@@ -205,13 +205,41 @@ if (holder) {
 
     const options = {
         transform(text, element) {
-            let converted = (text.startsWith("```", 0)) ? MD.render(text) : MD.renderInline(text)
+            let converted = text
+            if (converted.startsWith("```", 0)) {
+                converted = MD.render(converted)
+            } else {
+                if (text.match(/#\[\[TODO]]/)) {
+                    converted = converted.replace('#[[TODO]]', '<input class="checkbox" type="checkbox" />')
+                } else if (text.match(/#\[\[DONE]]/)) {
+                    converted = converted.replace('#[[DONE]]', '<input class="checkbox" type="checkbox" checked />')
+                }
+                MD.options.html = true
+                converted = MD.renderInline(converted)
+                MD.options.html = false
+            }
+
             element.html(converted)
         }
     }
 
     let editor = listEditor(holder, JSON.parse(holder.dataset.input), options);
 
+    $(document).on('click', '.content input[type="checkbox"]', function (event) {
+        let that = this
+        let id = $(this).closest('.list-item').data('id')
+        editor.update(id, function (item, prev, next) {
+            if (that.checked) {
+                item.text = item.text.replace('#[[TODO]]', '#[[DONE]]')
+            } else {
+                item.text = item.text.replace('#[[DONE]]', '#[[TODO]]')
+            }
+            return item
+        });
+        event.stopPropagation()
+        return true
+    })
+
     editor.on('change', function () {
         let element = document.getElementById('editor');
         let indicator = Indicator(document.getElementById('save-indicator'), 2);