From f5b448808d4ebbfdf885214ecc06e897453a70e9 Mon Sep 17 00:00:00 2001
From: drelich <david.relich@me.com>
Date: Tue, 31 Mar 2026 10:26:38 +0200
Subject: [PATCH] Implement task list rendering in preview mode

- Enabled GitHub Flavored Markdown (GFM) in marked.js for task list support
- Added custom CSS styling for task lists:
  - Hide bullet points, show only checkboxes
  - Increased checkbox size to 20px for better visibility
  - Green accent color for checked items
  - Flexbox layout for proper multi-line text alignment
- Task lists render as read-only checkboxes in preview mode
---
 src/components/NoteEditor.tsx |  6 ++++++
 src/index.css                 | 26 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/NoteEditor.tsx b/src/components/NoteEditor.tsx
index f50279c..9cecb8b 100644
--- a/src/components/NoteEditor.tsx
+++ b/src/components/NoteEditor.tsx
@@ -24,6 +24,12 @@ interface NoteEditorProps {
 
 const imageCache = new Map<string, string>();
 
+// Configure marked to support task lists
+marked.use({
+  gfm: true,
+  breaks: true,
+});
+
 
 export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChanges, categories, isFocusMode, onToggleFocusMode, editorFont = 'Source Code Pro', editorFontSize = 14, previewFont = 'Merriweather', previewFontSize = 16, api }: NoteEditorProps) {
   const [localContent, setLocalContent] = useState('');
diff --git a/src/index.css b/src/index.css
index a3f79e3..1ce21b5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -213,3 +213,29 @@ code {
 .dark .ProseMirror hr {
   border-top-color: #374151;
 }
+
+/* Task list styling for preview mode */
+.prose ul li:has(> input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -1.5em;
+  display: flex;
+  align-items: flex-start;
+}
+
+.prose ul:has(li > input[type="checkbox"]) {
+  list-style: none;
+  padding-left: 1.5em;
+}
+
+.prose input[type="checkbox"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 0.75rem;
+  margin-top: 0.32rem;
+  cursor: default;
+  flex-shrink: 0;
+}
+
+.prose input[type="checkbox"]:checked {
+  accent-color: #16a34a;
+}