fix(cleaner,parser): fix KaTeX inline math preview and preserve emphasis whitespace in lists

Author: shailesh1729

package-lock.json

@@ -23,7 +23,9 @@
     "vitest": "^3.2.7"
   },
   "dependencies": {
+    "@types/katex": "^0.16.8",
     "@types/prismjs": "^1.26.6",
+    "katex": "^0.18.5",
     "mermaid": "^11.17.2",
     "prismjs": "^1.30.0"
   }

package.json

@@ -562,47 +562,52 @@ export function fixEmphasisSpacing(text: string): { result: string; count: numbe
   let totalCount = 0;
   let result = text;
 
+  // We ensure that delimiters are flanking content and bounded by start of line, whitespace, or punctuation/brackets.
+  // This prevents stripping valid inter-phrase whitespace (e.g. `*Sequence Flows* model ... strictly *within*`).
+  const startPunct = '(?:^|[\\s(\\[{<"\'\u201c\u2018])';
+  const endPunct = '(?=[\\s)\\]}>"\'\u201d\u2019,.;:!?]|$)';
+
   // 1. Triple asterisks *** text ***
-  result = result.replace(/\*\*\*([ \t]*)([^\n*]+?)([ \t]*)\*\*\*/g, (match, leading, content, trailing) => {
+  result = result.replace(new RegExp(`(${startPunct})\\*\\*\\*([ \\t]*)([^\\n*]+?)([ \\t]*)\\*\\*\\*${endPunct}`, 'g'), (match, prefix, leading, content, trailing) => {
     if (leading.length > 0 || trailing.length > 0) {
       totalCount++;
-      return `***${content.trim()}***`;
+      return `${prefix}***${content.trim()}***`;
     }
     return match;
   });
 
   // 2. Double asterisks ** text **
-  result = result.replace(/\*\*([ \t]*)([^\n*]+?)([ \t]*)\*\*/g, (match, leading, content, trailing) => {
+  result = result.replace(new RegExp(`(${startPunct})\\*\\*([ \\t]*)([^\\n*]+?)([ \\t]*)\\*\\*${endPunct}`, 'g'), (match, prefix, leading, content, trailing) => {
     if (leading.length > 0 || trailing.length > 0) {
       totalCount++;
-      return `**${content.trim()}**`;
+      return `${prefix}**${content.trim()}**`;
     }
     return match;
   });
 
   // 3. Double underscores __ text __
-  result = result.replace(/__([ \t]*)([^\n_]+?)([ \t]*)__/g, (match, leading, content, trailing) => {
+  result = result.replace(new RegExp(`(${startPunct})__([ \\t]*)([^\\n_]+?)([ \\t]*)__${endPunct}`, 'g'), (match, prefix, leading, content, trailing) => {
     if (leading.length > 0 || trailing.length > 0) {
       totalCount++;
-      return `__${content.trim()}__`;
+      return `${prefix}__${content.trim()}__`;
     }
     return match;
   });
 
   // 4. Single asterisks * text *
-  result = result.replace(/(?<!\*)\*([ \t]*)([^\n*]+?)([ \t]*)\*(?!\*)/g, (match, leading, content, trailing) => {
+  result = result.replace(new RegExp(`(${startPunct})\\*(?!\\*)([ \\t]*)([^\\n*]+?)([ \\t]*)\\*(?!\\*)${endPunct}`, 'g'), (match, prefix, leading, content, trailing) => {
     if (leading.length > 0 || trailing.length > 0) {
       totalCount++;
-      return `*${content.trim()}*`;
+      return `${prefix}*${content.trim()}*`;
     }
     return match;
   });
 
   // 5. Single underscores _ text _
-  result = result.replace(/(?<!_)_([ \t]*)([^\n_]+?)([ \t]*)_(?!_)/g, (match, leading, content, trailing) => {
+  result = result.replace(new RegExp(`(${startPunct})_(?!_)([ \\t]*)([^\\n_]+?)([ \\t]*)_(?!_)${endPunct}`, 'g'), (match, prefix, leading, content, trailing) => {
     if (leading.length > 0 || trailing.length > 0) {
       totalCount++;
-      return `_${content.trim()}_`;
+      return `${prefix}_${content.trim()}_`;
     }
     return match;
   });

src/lib/cleaner.ts

@@ -1,4 +1,5 @@
 import Prism from 'prismjs';
+import katex from 'katex';
 
 // Core dependencies and language grammars
 import 'prismjs/components/prism-clike';
@@ -51,6 +52,25 @@ function escapeHtml(str: string): string {
     .replace(/'/g, ''');
 }
 
+/**
+ * Renders a LaTeX math expression using KaTeX with graceful fallback.
+ */
+export function renderKaTeX(formula: string, displayMode: boolean): string {
+  try {
+    return katex.renderToString(formula.trim(), {
+      displayMode,
+      throwOnError: false,
+      output: 'htmlAndMathml',
+    });
+  } catch {
+    const escapedFormula = escapeHtml(formula.trim());
+    if (displayMode) {
+      return `<div class="obsidian-math-block">$$ ${escapedFormula} $$</div>`;
+    }
+    return `<span class="obsidian-inline-math">$${escapedFormula}$</span>`;
+  }
+}
+
 const LANGUAGE_ALIASES: Record<string, string> = {
   js: 'javascript',
   ts: 'typescript',
@@ -190,7 +210,8 @@ export function parseMarkdownToHtml(markdown: string): string {
     if (line.trim() === '$$' || /^\$\$(.*)\$\$$/.test(line.trim())) {
       if (/^\$\$(.+)\$\$$/.test(line.trim())) {
         const formula = line.trim().slice(2, -2).trim();
-        blocks.push(`<div class="obsidian-math-block">$$ ${escapeHtml(formula)} $$</div>`);
+        const rendered = renderKaTeX(formula, true);
+        blocks.push(`<div class="obsidian-math-block">${rendered}</div>`);
         i++;
         continue;
       } else {
@@ -201,7 +222,9 @@ export function parseMarkdownToHtml(markdown: string): string {
           i++;
         }
         i++; // Skip closing $$
-        blocks.push(`<div class="obsidian-math-block">$$\n${escapeHtml(mathLines.join('\n'))}\n$$</div>`);
+        const formula = mathLines.join('\n');
+        const rendered = renderKaTeX(formula, true);
+        blocks.push(`<div class="obsidian-math-block">${rendered}</div>`);
         continue;
       }
     }
@@ -408,13 +431,25 @@ function renderListBlock(lines: string[]): string {
 export function renderInline(text: string): string {
   if (!text) return '';
 
-  let escaped = escapeHtml(text);
+  // 1. Extract and isolate inline code tokens: `code`
+  const codeTokens: string[] = [];
+  let masked = text.replace(/`([^`]+)`/g, (_match, code) => {
+    const token = `%%OBS-INLINE-CODE-${codeTokens.length}%%`;
+    codeTokens.push(`<code class="obsidian-inline-code">${escapeHtml(code)}</code>`);
+    return token;
+  });
 
-  // 1. Inline Code: `code`
-  escaped = escaped.replace(/`([^`]+)`/g, '<code class="obsidian-inline-code">$1</code>');
+  // 2. Extract and render inline math tokens with KaTeX: $math$ (e.g. $A$, $x + y$)
+  const mathTokens: string[] = [];
+  const inlineMathRegex = /\$([^\s\$\n](?:[^\$\n]*?[^\s\$\n])?)\$/g;
+  masked = masked.replace(inlineMathRegex, (_match, formula) => {
+    const token = `%%OBS-INLINE-MATH-${mathTokens.length}%%`;
+    const rendered = renderKaTeX(formula, false);
+    mathTokens.push(rendered);
+    return token;
+  });
 
-  // 2. Inline Math: $math$
-  escaped = escaped.replace(/\$([^\$\n]+)\$/g, '<span class="obsidian-inline-math">$$1</span>');
+  let escaped = escapeHtml(masked);
 
   // 3. Bold + Italic: ***text*** or ___text___
   escaped = escaped.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>');
@@ -442,5 +477,13 @@ export function renderInline(text: string): string {
   // 9. Obsidian Tags: #tag (must have whitespace or start before it)
   escaped = escaped.replace(/(^|\s)#([a-zA-Z0-9_\-\/]+)(?=\s|$)/g, '$1<span class="obsidian-tag">#$2</span>');
 
+  // 10. Restore code and math tokens safely
+  for (let i = 0; i < codeTokens.length; i++) {
+    escaped = escaped.replace(`%%OBS-INLINE-CODE-${i}%%`, () => codeTokens[i]);
+  }
+  for (let i = 0; i < mathTokens.length; i++) {
+    escaped = escaped.replace(`%%OBS-INLINE-MATH-${i}%%`, () => mathTokens[i]);
+  }
+
   return escaped;
 }

src/lib/parser.ts

@@ -1,4 +1,5 @@
 import { mount } from 'svelte'
+import 'katex/dist/katex.min.css'
 import './app.css'
 import App from './App.svelte'
 

src/main.ts

@@ -192,10 +192,30 @@ describe('Markdown Cleaner - Bold & Italic Whitespace', () => {
     expect(result).toBe('This is *italic text* here.');
   });
 
-  it('fixes spaces inside triple asterisks *** text *** -> ***text***', () => {
-    const input = 'This is *** bold italic *** text.';
-    const { result } = fixEmphasisSpacing(input);
-    expect(result).toBe('This is ***bold italic*** text.');
+  it('preserves list item bullet with italic text and inter-word spaces', () => {
+    const input = [
+      '# Foundational Elements of the System View',
+      '',
+      'Wazlawick uses BPMN as the primary notation to map business reality prior to software requirements engineering:',
+      '',
+      '* **Pools and Lanes:** A *Pool* represents an autonomous business entity or external participant (e.g., an external enterprise, partner, or bank). A *Lane* partitions a single pool into internal roles, departments, or subsystem responsibilities.',
+      '* **Flow Types:**',
+      '* *Sequence Flows* model execution order and control strictly *within* a single pool.',
+      '* *Message Flows* (dashed lines with open circles/arrows) model asynchronous communication *between* independent pools. Sequence flows are forbidden from crossing pool boundaries.',
+    ].join('\n');
+
+    const { cleaned, stats } = cleanMarkdown(input);
+    expect(cleaned).toContain('* *Sequence Flows* model execution order and control strictly *within* a single pool.');
+    expect(cleaned).toContain('* *Message Flows* (dashed lines with open circles/arrows) model asynchronous communication *between* independent pools.');
+    expect(cleaned).toContain('* **Pools and Lanes:** A *Pool* represents an autonomous business entity');
+    expect(stats.emphasisFixed).toBe(0);
+  });
+
+  it('corrects malformed emphasis while preserving punctuation and delimiters', () => {
+    const input = '"** bold in quotes **" and (* italic in parens *) and ** bold **, ** bold 2 **! ** bold 3 **?';
+    const { result, count } = fixEmphasisSpacing(input);
+    expect(result).toBe('"**bold in quotes**" and (*italic in parens*) and **bold**, **bold 2**! **bold 3**?');
+    expect(count).toBe(5);
   });
 });
 

tests/cleaner.test.ts

@@ -0,0 +1,53 @@
+// @vitest-environment happy-dom
+import { describe, it, expect } from 'vitest';
+import { parseMarkdownToHtml, renderInline } from '../src/lib/parser';
+
+describe('Obsidian Previewer Parser & Math Rendering', () => {
+  it('correctly renders inline math variables without corrupting them into $1 or $Is', () => {
+    const text = 'Glitch-Free Reactive Propagation: Fine-grained reactive graphs track dynamic dependencies at runtime, ensuring that if Signal $A$ updates both Signal $B$ and $C$, and $D$ depends on both, $D$ recalculates exactly once without intermediate stale reads ("glitches").';
+    const html = parseMarkdownToHtml(text);
+
+    // Verify it contains KaTeX math rendering for A, B, C, and D
+    expect(html).toContain('katex');
+    expect(html).toContain('A</annotation>');
+    expect(html).toContain('B</annotation>');
+    expect(html).toContain('C</annotation>');
+    expect(html).toContain('D</annotation>');
+
+    // Must NOT contain corrupted $1 or $Is
+    expect(html).not.toContain('$1');
+    expect(html).not.toContain('&gt;1&lt;');
+    expect(html).not.toContain('>$1<');
+  });
+
+  it('renders single character and formula inline math', () => {
+    const single = renderInline('Formula $x$ and $y = mx + b$');
+    expect(single).toContain('katex');
+    expect(single).toContain('x</annotation>');
+    expect(single).toContain('y = mx + b</annotation>');
+  });
+
+  it('does not confuse currency values with inline math', () => {
+    const currency = renderInline('Item costs $100 and shipping is $20 for all users.');
+    expect(currency).not.toContain('katex');
+    expect(currency).toContain('$100');
+    expect(currency).toContain('$20');
+  });
+
+  it('renders display math blocks with KaTeX', () => {
+    const md = '$$\n\\frac{a}{b} = c\n$$';
+    const html = parseMarkdownToHtml(md);
+    expect(html).toContain('obsidian-math-block');
+    expect(html).toContain('katex-display');
+    expect(html).toContain('\\frac{a}{b} = c</annotation>');
+  });
+
+  it('renders inline code, bold, and italics cleanly alongside math', () => {
+    const md = 'Use `Signal<T>` with invariant $A$ and **bold** *italic* formatting.';
+    const html = renderInline(md);
+    expect(html).toContain('<code class="obsidian-inline-code">Signal&lt;T&gt;</code>');
+    expect(html).toContain('<strong>bold</strong>');
+    expect(html).toContain('<em>italic</em>');
+    expect(html).toContain('A</annotation>');
+  });
+});