From c2b5f0a5a3be27ce0fc42fa2bd255a38d54d269b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 17 Apr 2025 18:34:40 +0300
Subject: [PATCH] feat(import/markdown): support todo lists in the CKEditor
 style

---
 docs/Release Notes/Release Notes/v0.93.0.md |  2 +-
 src/services/import/markdown.spec.ts        |  8 ++++
 src/services/import/markdown.ts             | 42 ++++++++++++++++++++-
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/docs/Release Notes/Release Notes/v0.93.0.md b/docs/Release Notes/Release Notes/v0.93.0.md
index 573e262ae..cf6a0d384 100644
--- a/docs/Release Notes/Release Notes/v0.93.0.md	
+++ b/docs/Release Notes/Release Notes/v0.93.0.md	
@@ -37,7 +37,7 @@
 *   Basic Touch Bar support for macOS.
 *   [Support Bearer Token](https://github.com/TriliumNext/Notes/issues/1701)
 *   The tab bar is now scrollable when there are many tabs by @SiriusXT
-*   Markdown export: support todo lists
+*   Markdown import/export: support todo lists
 
 ## 🌍 Internationalization
 
diff --git a/src/services/import/markdown.spec.ts b/src/services/import/markdown.spec.ts
index 02d0a81e8..53dda9c38 100644
--- a/src/services/import/markdown.spec.ts
+++ b/src/services/import/markdown.spec.ts
@@ -233,4 +233,12 @@ second line 2</code></pre><ul><li>Hello</li><li>world</li></ul><ol><li>Hello</li
         expect(markdownService.renderToHtml(input, "Title")).toStrictEqual(expected);
     });
 
+    it("imports todo lists properly", () => {
+         const input = trimIndentation`\
+            - [x] Hello
+            - [ ] World`;
+        const expected = `<ul class="todo-list"><li><label class="todo-list__label"><input type="checkbox" checked="checked" disabled="disabled"><span class="todo-list__label__description">Hello</span></label></li><li><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description">World</span></label></li></ul>`;
+        expect(markdownService.renderToHtml(input, "Title")).toStrictEqual(expected);
+    });
+
 });
diff --git a/src/services/import/markdown.ts b/src/services/import/markdown.ts
index d84deb043..8b7f8913d 100644
--- a/src/services/import/markdown.ts
+++ b/src/services/import/markdown.ts
@@ -48,12 +48,52 @@ class CustomMarkdownRenderer extends Renderer {
     }
 
     list(token: Tokens.List): string {
-        return super.list(token)
+        let result = super.list(token)
             .replace("\n", "")  // we replace the first one only.
             .trimEnd();
+
+        // Handle todo-list in the CKEditor format.
+        if (token.items.some(item => item.task)) {
+            result = result.replace(/^<ul>/, "<ul class=\"todo-list\">");
+        }
+
+        return result;
+    }
+
+    checkbox({ checked }: Tokens.Checkbox): string {
+        return '<input type="checkbox"'
+            + (checked ? 'checked="checked" ' : '')
+            + 'disabled="disabled">';
     }
 
     listitem(item: Tokens.ListItem): string {
+        // Handle todo-list in the CKEditor format.
+        if (item.task) {
+            let itemBody = '';
+            const checkbox = this.checkbox({ checked: !!item.checked });
+            if (item.loose) {
+                if (item.tokens[0]?.type === 'paragraph') {
+                    item.tokens[0].text = checkbox + item.tokens[0].text;
+                    if (item.tokens[0].tokens && item.tokens[0].tokens.length > 0 && item.tokens[0].tokens[0].type === 'text') {
+                        item.tokens[0].tokens[0].text = checkbox + escape(item.tokens[0].tokens[0].text);
+                        item.tokens[0].tokens[0].escaped = true;
+                    }
+                } else {
+                    item.tokens.unshift({
+                        type: 'text',
+                        raw: checkbox,
+                        text: checkbox,
+                        escaped: true,
+                    });
+                }
+            } else {
+                itemBody += checkbox;
+            }
+
+            itemBody += `<span class="todo-list__label__description">${this.parser.parse(item.tokens, !!item.loose)}</span>`;
+            return `<li><label class="todo-list__label">${itemBody}</label></li>`;
+        }
+
         return super.listitem(item).trimEnd();
     }