From 79219c60f04b83b7fe7f8325f71b58ae054c4938 Mon Sep 17 00:00:00 2001
From: Bradley Axen <baxen@squareup.com>
Date: Fri, 6 Feb 2026 17:11:12 -0800
Subject: [PATCH] fix: use marked + DOMPurify for note markdown rendering

Replace the hand-rolled regex-based markdown renderer in NoteViewerModal
with the marked library + DOMPurify sanitization, matching the approach
already used by StreamingMessages and LiveSessionView.

This fixes rendering issues with complex markdown (nested lists, ordered
lists, blockquotes, tables, etc.) and adds CSS styles for the additional
HTML elements that marked produces.
---
 staged/src/lib/NoteViewerModal.svelte | 105 +++++++++++---------------
 1 file changed, 46 insertions(+), 59 deletions(-)

diff --git a/staged/src/lib/NoteViewerModal.svelte b/staged/src/lib/NoteViewerModal.svelte
index f46eca1..ef125eb 100644
--- a/staged/src/lib/NoteViewerModal.svelte
+++ b/staged/src/lib/NoteViewerModal.svelte
@@ -1,61 +1,3 @@
-<script module lang="ts">
-  // Simple markdown renderer - converts basic markdown to HTML
-  // For a production app, you'd want to use a proper markdown library
-  function renderMarkdown(content: string): string {
-    let html = escapeHtml(content);
-
-    // Headers
-    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
-    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
-    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
-
-    // Bold and italic
-    html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
-    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
-
-    // Code blocks
-    html = html.replace(
-      /```(\w*)\n([\s\S]*?)```/g,
-      '<pre><code class="language-$1">$2</code></pre>'
-    );
-
-    // Inline code
-    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
-
-    // Links
-    html = html.replace(
-      /\[([^\]]+)\]\(([^)]+)\)/g,
-      '<a href="$2" target="_blank" rel="noopener">$1</a>'
-    );
-
-    // Unordered lists
-    html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
-    html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
-
-    // Paragraphs (double newlines)
-    html = html.replace(/\n\n+/g, '</p><p>');
-    html = '<p>' + html + '</p>';
-
-    // Clean up empty paragraphs and fix list wrapping
-    html = html.replace(/<p>\s*<\/p>/g, '');
-    html = html.replace(/<p>\s*(<ul>)/g, '$1');
-    html = html.replace(/(<\/ul>)\s*<\/p>/g, '$1');
-    html = html.replace(/<p>\s*(<h[123]>)/g, '$1');
-    html = html.replace(/(<\/h[123]>)\s*<\/p>/g, '$1');
-    html = html.replace(/<p>\s*(<pre>)/g, '$1');
-    html = html.replace(/(<\/pre>)\s*<\/p>/g, '$1');
-
-    return html;
-  }
-
-  function escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-</script>
-
 <!--
   NoteViewerModal.svelte - View a branch note's markdown content
 
@@ -63,8 +5,21 @@
 -->
 <script lang="ts">
   import { X } from 'lucide-svelte';
+  import { marked } from 'marked';
+  import DOMPurify from 'dompurify';
   import type { BranchNote } from './services/branch';
 
+  // Configure marked for safe rendering
+  marked.setOptions({
+    breaks: true,
+    gfm: true,
+  });
+
+  // Render markdown content safely
+  function renderMarkdown(content: string): string {
+    return DOMPurify.sanitize(marked.parse(content) as string);
+  }
+
   interface Props {
     note: BranchNote;
     onClose: () => void;
@@ -230,7 +185,8 @@
     margin: 0 0 12px 0;
   }
 
-  .markdown-content :global(ul) {
+  .markdown-content :global(ul),
+  .markdown-content :global(ol) {
     margin: 0 0 12px 0;
     padding-left: 24px;
   }
@@ -239,6 +195,37 @@
     margin: 4px 0;
   }
 
+  .markdown-content :global(blockquote) {
+    margin: 12px 0;
+    padding-left: 12px;
+    border-left: 3px solid var(--border-muted);
+    color: var(--text-muted);
+  }
+
+  .markdown-content :global(hr) {
+    margin: 16px 0;
+    border: none;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .markdown-content :global(table) {
+    border-collapse: collapse;
+    margin: 12px 0;
+    width: 100%;
+  }
+
+  .markdown-content :global(th),
+  .markdown-content :global(td) {
+    border: 1px solid var(--border-subtle);
+    padding: 6px 12px;
+    text-align: left;
+  }
+
+  .markdown-content :global(th) {
+    font-weight: 600;
+    background: var(--bg-hover);
+  }
+
   .markdown-content :global(code) {
     font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
     font-size: 0.9em;