Improve markdown loading and round-trip fidelity

Author: ChristianChiarulli

src-tauri/Cargo.lock

@@ -40,6 +40,7 @@ base64 = "0.22.1"
 regex-lite = "0.1.9"
 chacha20 = "0.9"
 chacha20poly1305 = "0.10.1"
+comrak = { version = "0.51", default-features = false }
 subtle = "2"
 getrandom = "0.3"
 hex = "0.4.3"

src-tauri/Cargo.toml

@@ -2,6 +2,7 @@ mod attachments;
 mod blossom;
 mod db;
 mod error;
+mod markdown;
 mod nip44_ext;
 mod nip59_ext;
 mod nostr;

src-tauri/src/lib.rs

@@ -0,0 +1,224 @@
+//! Markdown → Lexical-compatible HTML renderer using comrak.
+//!
+//! Produces HTML that Lexical's `$generateNodesFromDOM` can consume directly,
+//! matching the output of the marked.js pipeline in the frontend.
+
+use comrak::Arena;
+use comrak::options::{Extension, Options, Parse, Render};
+
+/// Full pipeline: preprocess → parse → render → postprocess.
+pub fn markdown_to_lexical_html(markdown: &str) -> String {
+    let preprocessed = preprocess_blank_lines(markdown);
+
+    let arena = Arena::new();
+    let opts = options();
+    let root = comrak::parse_document(&arena, &preprocessed, &opts);
+
+    let mut html = String::with_capacity(markdown.len() * 2);
+    comrak::format_html(root, &opts, &mut html).expect("HTML rendering failed");
+
+    postprocess_html(&html)
+}
+
+fn options<'a>() -> Options<'a> {
+    let mut options = Options::default();
+
+    options.parse = Parse::default();
+
+    options.extension = Extension::default();
+    options.extension.strikethrough = true;
+    options.extension.table = true;
+    options.extension.tasklist = true;
+    options.extension.autolink = true;
+    options.extension.highlight = true;
+
+    options.render = Render::default();
+    options.render.hardbreaks = true; // Soft breaks → <br> (matches `breaks: true`)
+    options.render.r#unsafe = true; // Allow raw HTML passthrough (for <p><br></p> markers)
+    options.render.tasklist_classes = true; // Add contains-task-list / task-list-item classes
+
+    options
+}
+
+/// Post-process the rendered HTML for Lexical compatibility.
+fn postprocess_html(html: &str) -> String {
+    let mut result = html.to_string();
+
+    // Code blocks: rewrite <pre><code class="language-X"> → <pre data-language="X"><code>
+    result = regex_lite::Regex::new(r#"<pre><code class="language-([^"]+)">"#)
+        .unwrap()
+        .replace_all(&result, r#"<pre data-language="$1"><code>"#)
+        .to_string();
+
+    // Strikethrough: comrak uses <del>, Lexical expects <s>
+    result = result.replace("<del>", "<s>").replace("</del>", "</s>");
+
+    // Comrak 0.51+ adds contains-task-list, task-list-item, and
+    // task-list-item-checkbox classes automatically. No post-processing needed.
+
+    // Strip whitespace between block-level tags. DOMParser turns newlines between
+    // tags (e.g. `</p>\n<pre>`, `</li>\n<li>`) into text nodes that Lexical wraps
+    // in phantom empty paragraphs or list items.
+    result = regex_lite::Regex::new(r#">\s+<(/?)(p|h[1-6]|ul|ol|li|pre|blockquote|table|thead|tbody|tr|th|td|hr|div|section)"#)
+        .unwrap()
+        .replace_all(&result, "><$1$2")
+        .to_string();
+
+    result
+}
+
+/// Preprocess blank lines into `<p><br></p>` markers, matching the frontend's
+/// `emptyParagraphPreprocess` hook.
+///
+/// First blank line in a group = standard block separator.
+/// Each additional blank = empty paragraph marker.
+fn preprocess_blank_lines(markdown: &str) -> String {
+    let lines: Vec<&str> = markdown.split('\n').collect();
+    let mut result: Vec<&str> = Vec::with_capacity(lines.len());
+    let mut fence_char: Option<u8> = None;
+    let mut fence_len: usize = 0;
+    let mut i = 0;
+
+    while i < lines.len() {
+        let line = lines[i];
+        let trimmed = line.trim_start().as_bytes();
+
+        // Track code fence state
+        if !trimmed.is_empty() && (trimmed[0] == b'`' || trimmed[0] == b'~') {
+            let ch = trimmed[0];
+            let len = trimmed.iter().take_while(|&&b| b == ch).count();
+            if len >= 3 {
+                // Skip single-line fenced code (```code```)
+                let is_single_line = ch == b'`' && {
+                    let rest = &line.trim_start()[len..];
+                    rest.contains('`')
+                        && rest.rfind('`').map_or(false, |p| {
+                            let trailing = rest[p..].bytes().take_while(|&b| b == b'`').count();
+                            trailing >= len && p > 0
+                        })
+                };
+                if !is_single_line {
+                    if let Some(fc) = fence_char {
+                        if ch == fc && len >= fence_len {
+                            fence_char = None;
+                        }
+                    } else {
+                        fence_char = Some(ch);
+                        fence_len = len;
+                    }
+                    result.push(line);
+                    i += 1;
+                    continue;
+                }
+            }
+        }
+
+        // Inside code fence — preserve as-is
+        if fence_char.is_some() {
+            result.push(line);
+            i += 1;
+            continue;
+        }
+
+        // Blank line group
+        if line.trim().is_empty() {
+            let mut blank_count = 0;
+            while i < lines.len() && lines[i].trim().is_empty() {
+                blank_count += 1;
+                i += 1;
+            }
+            // First blank = standard separator
+            result.push("");
+            // Additional blanks = empty paragraphs
+            for _ in 1..blank_count {
+                result.push("<p><br></p>");
+                result.push("");
+            }
+        } else {
+            result.push(line);
+            i += 1;
+        }
+    }
+
+    result.join("\n")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_basic_markdown() {
+        let html = markdown_to_lexical_html("# Hello\n\nWorld");
+        assert!(html.contains("<h1>"), "HTML: {html}");
+        assert!(html.contains("Hello"), "HTML: {html}");
+        assert!(html.contains("World"), "HTML: {html}");
+    }
+
+    #[test]
+    fn test_code_block_language() {
+        let html = markdown_to_lexical_html("```rust\nfn main() {}\n```");
+        assert!(html.contains("data-language=\"rust\""), "HTML: {html}");
+        assert!(html.contains("fn main()"), "HTML: {html}");
+    }
+
+    #[test]
+    fn test_strikethrough() {
+        let html = markdown_to_lexical_html("~~deleted~~");
+        assert!(html.contains("<s>"), "HTML: {html}");
+        assert!(html.contains("</s>"), "HTML: {html}");
+        assert!(!html.contains("<del>"), "HTML: {html}");
+    }
+
+    #[test]
+    fn test_highlight() {
+        let html = markdown_to_lexical_html("==highlighted==");
+        assert!(html.contains("<mark>"), "HTML: {html}");
+        assert!(html.contains("</mark>"), "HTML: {html}");
+    }
+
+    #[test]
+    fn test_empty_paragraphs() {
+        let html = markdown_to_lexical_html("hello\n\n\n\nworld");
+        let count = html.matches("<p><br></p>").count();
+        assert_eq!(count, 2, "Expected 2 empty paragraphs, got {count}. HTML: {html}");
+    }
+
+    #[test]
+    fn test_soft_breaks_become_hard() {
+        let html = markdown_to_lexical_html("line1\nline2");
+        assert!(html.contains("<br"), "Soft break should become <br>. HTML: {html}");
+    }
+
+    #[test]
+    fn test_checklist_classes() {
+        let html = markdown_to_lexical_html("- [x] done\n- [ ] todo");
+        assert!(html.contains("contains-task-list"), "UL should have contains-task-list. HTML: {html}");
+        assert!(html.contains("task-list-item"), "LI should have task-list-item. HTML: {html}");
+    }
+
+    #[test]
+    fn test_checklist_no_phantom_item() {
+        let md = "## Action Items\n\n- [x] First\n- [ ] Second\n- [ ] Third";
+        let html = markdown_to_lexical_html(md);
+        assert!(!html.contains("<li>\n</li>"), "Unexpected empty list item. HTML: {html}");
+        assert!(!html.contains("<li></li>"), "Unexpected empty list item. HTML: {html}");
+    }
+
+    #[test]
+    fn test_checklist_with_extra_blank_line() {
+        let md = "## Action Items\n\n\n- [x] Sarah to create Jira epics\n- [x] Marcus to schedule design review\n- [ ] David to benchmark latency";
+        let html = markdown_to_lexical_html(md);
+        // Should have exactly 3 list items and no empty ones
+        assert_eq!(html.matches("<li").count(), 3, "Expected 3 <li> tags. HTML: {html}");
+        assert!(!html.contains("<li>\n</li>"), "Unexpected empty list item. HTML: {html}");
+        assert!(!html.contains("<li></li>"), "Unexpected empty list item. HTML: {html}");
+    }
+
+    #[test]
+    fn test_image() {
+        let html = markdown_to_lexical_html("![alt](attachment://hash.png)");
+        assert!(html.contains("<img"), "HTML: {html}");
+        assert!(html.contains("attachment://hash.png"), "HTML: {html}");
+    }
+}

src-tauri/src/markdown.rs

@@ -55,6 +55,7 @@ pub struct LoadedNote {
     pub notebook: Option<NotebookRef>,
     pub modified_at: i64,
     pub markdown: String,
+    pub html: String,
     pub archived_at: Option<i64>,
     pub deleted_at: Option<i64>,
     pub pinned_at: Option<i64>,
@@ -1128,11 +1129,14 @@ fn set_last_open_note_id(conn: &Connection, note_id: Option<&str>) -> Result<(),
 fn row_to_loaded_note(row: &rusqlite::Row<'_>) -> rusqlite::Result<LoadedNote> {
     let notebook_id: Option<String> = row.get(4)?;
     let notebook_name: Option<String> = row.get(5)?;
+    let markdown: String = row.get(2)?;
+    let html = crate::markdown::markdown_to_lexical_html(&markdown);
 
     Ok(LoadedNote {
         id: row.get(0)?,
         title: row.get(1)?,
-        markdown: row.get(2)?,
+        markdown,
+        html,
         modified_at: row.get(3)?,
         notebook: notebook_id
             .zip(notebook_name)