fix single dollar sign text rendering as math (#64)

* Disable singleDollarTextMath

* Create wet-islands-slide.md

* Update tests

* Update mathematics.tsx

* Update wet-islands-slide.md

* Revert "Update wet-islands-slide.md"

This reverts commit 3e8f80a.

Author: haydenbleasel

.changeset/wet-islands-slide.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+fix single dollar sign text rendering as math

apps/website/app/components/mathematics.tsx

@@ -2,9 +2,9 @@ import { Section } from './section';
 
 const markdown = `## Inline Math
 
-The quadratic formula is $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$ for solving $ax^2 + bx + c = 0$.
+The quadratic formula is $$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$$ for solving $$ax^2 + bx + c = 0$$.
 
-Euler's identity: $e^{i\\pi} + 1 = 0$ combines five fundamental mathematical constants.
+Euler's identity: $$e^{i\\pi} + 1 = 0$$ combines five fundamental mathematical constants.
 
 ## Block Math
 
@@ -16,9 +16,9 @@ $$
 
 ## Summations and Integrals
 
-The sum of the first $n$ natural numbers: $\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$
+The sum of the first $$n$$ natural numbers: $$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$$
 
-Integration by parts: $\\int u \\, dv = uv - \\int v \\, du$
+Integration by parts: $$\\int u \\, dv = uv - \\int v \\, du$$
 `;
 
 export const Mathematics = () => (

packages/streamdown/__tests__/dollar-sign.test.tsx

@@ -0,0 +1,91 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { Streamdown } from '../index';
+
+describe('Dollar sign handling', () => {
+  it('should not render dollar amounts as math', () => {
+    const content = '$20 is a sum that isn\'t larger than a few dollars';
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    
+    // Check if content is incorrectly wrapped in math elements
+    const katexElements = container.querySelectorAll('.katex');
+    
+    // The text should be rendered as plain text, not math
+    expect(katexElements.length).toBe(0);
+    
+    // Check that the dollar signs are preserved in the text
+    const text = container.textContent;
+    expect(text).toContain('$20');
+    expect(text).toContain('dollars');
+  });
+
+  it('should handle multiple dollar signs in text', () => {
+    const content = 'The price is $50 and the discount is $10 off';
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    
+    const katexElements = container.querySelectorAll('.katex');
+    expect(katexElements.length).toBe(0);
+    
+    // Check that both dollar amounts are preserved
+    const text = container.textContent;
+    expect(text).toContain('$50');
+    expect(text).toContain('$10');
+  });
+
+  it('should handle single dollar sign at end of text', () => {
+    const content = 'The cost is $';
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    
+    const katexElements = container.querySelectorAll('.katex');
+    expect(katexElements.length).toBe(0);
+    
+    // Check that the single dollar sign is preserved without adding a trailing one
+    const text = container.textContent;
+    expect(text).toBe('The cost is $');
+  });
+
+  it('should handle text with dollar sign followed by non-numeric characters', () => {
+    const content = 'Use $variable in the code';
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    
+    const katexElements = container.querySelectorAll('.katex');
+    expect(katexElements.length).toBe(0);
+    
+    const text = container.textContent;
+    expect(text).toContain('$variable');
+  });
+
+  it('should still render block math with double dollar signs', () => {
+    const content = 'Display math: $$E = mc^2$$';
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    
+    const katexElements = container.querySelectorAll('.katex');
+    // Block math should still work
+    expect(katexElements.length).toBeGreaterThan(0);
+  });
+
+  it('should not render inline math with single dollar signs', () => {
+    const content = 'This $x = y$ should not be rendered as math';
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    
+    const katexElements = container.querySelectorAll('.katex');
+    // With singleDollarTextMath: false, this should not render as math
+    expect(katexElements.length).toBe(0);
+    
+    const text = container.textContent;
+    expect(text).toContain('$x = y$');
+  });
+
+  it('should handle mixed content with both currency and block math', () => {
+    const content = 'The price is $99.99 and the formula is $$x^2 + y^2 = z^2$$';
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    
+    const katexElements = container.querySelectorAll('.katex');
+    // Only the block math should render
+    expect(katexElements.length).toBe(1);
+    
+    const text = container.textContent;
+    expect(text).toContain('$99.99');
+  });
+});

packages/streamdown/__tests__/parse-incomplete-markdown.test.ts

@@ -318,14 +318,16 @@ describe('parseIncompleteMarkdown', () => {
   });
 
   describe('KaTeX inline formatting ($)', () => {
-    it('should complete incomplete inline KaTeX', () => {
+    it('should NOT complete single dollar signs (likely currency)', () => {
+      // Single dollar signs are likely currency, not math
       expect(parseIncompleteMarkdown('Text with $formula')).toBe(
-        'Text with $formula$'
+        'Text with $formula'
       );
-      expect(parseIncompleteMarkdown('$incomplete')).toBe('$incomplete$');
+      expect(parseIncompleteMarkdown('$incomplete')).toBe('$incomplete');
     });
 
-    it('should keep complete inline KaTeX unchanged', () => {
+    it('should keep text with paired dollar signs unchanged', () => {
+      // Even paired dollar signs are preserved but not treated as math
       const text = 'Text with $x^2 + y^2 = z^2$';
       expect(parseIncompleteMarkdown(text)).toBe(text);
     });
@@ -335,20 +337,23 @@ describe('parseIncompleteMarkdown', () => {
       expect(parseIncompleteMarkdown(text)).toBe(text);
     });
 
-    it('should complete odd number of inline KaTeX markers', () => {
+    it('should NOT complete odd number of dollar signs', () => {
+      // We don't auto-complete dollar signs anymore
       expect(parseIncompleteMarkdown('$first$ and $second')).toBe(
-        '$first$ and $second$'
+        '$first$ and $second'
       );
     });
 
-    it('should not confuse single $ with block $$', () => {
+    it('should not complete single $ but should complete block $$', () => {
+      // Block math $$ is completed, single $ is not
       expect(parseIncompleteMarkdown('$$block$$ and $inline')).toBe(
-        '$$block$$ and $inline$'
+        '$$block$$ and $inline'
       );
     });
 
-    it('should handle inline KaTeX at start of text', () => {
-      expect(parseIncompleteMarkdown('$x + y = z')).toBe('$x + y = z$');
+    it('should NOT complete dollar sign at start of text', () => {
+      // Single dollar sign is likely currency
+      expect(parseIncompleteMarkdown('$x + y = z')).toBe('$x + y = z');
     });
 
     it('should handle escaped dollar signs', () => {
@@ -542,10 +547,10 @@ describe('parseIncompleteMarkdown', () => {
       );
     });
 
-    it('should handle KaTeX inside other formatting', () => {
-      // Bold gets closed first, then KaTeX
+    it('should handle dollar sign inside other formatting', () => {
+      // Bold gets closed, dollar sign stays as-is (likely currency)
       expect(parseIncompleteMarkdown('**bold with $x^2')).toBe(
-        '**bold with $x^2**$'
+        '**bold with $x^2**'
       );
     });
 
@@ -610,11 +615,12 @@ describe('parseIncompleteMarkdown', () => {
         'The formula $E = mc^2$ shows',
       ];
 
+      // Single dollar signs are not auto-completed (likely currency)
       expect(parseIncompleteMarkdown(chunks[0])).toBe(chunks[0]);
-      expect(parseIncompleteMarkdown(chunks[1])).toBe('The formula $E$');
-      expect(parseIncompleteMarkdown(chunks[2])).toBe('The formula $E = mc$');
+      expect(parseIncompleteMarkdown(chunks[1])).toBe('The formula $E');
+      expect(parseIncompleteMarkdown(chunks[2])).toBe('The formula $E = mc');
       expect(parseIncompleteMarkdown(chunks[3])).toBe(
-        'The formula $E = mc^2$'
+        'The formula $E = mc^2'
       );
       expect(parseIncompleteMarkdown(chunks[4])).toBe(chunks[4]);
     });
@@ -656,10 +662,10 @@ describe('parseIncompleteMarkdown', () => {
     });
 
     it('should not add underscore when math block has incomplete underscore', () => {
-      // Incomplete math blocks get completed by handleIncompleteInlineKatex
-      // The underscore inside should not be treated as italic
+      // We no longer auto-complete single dollar signs
+      // The underscore inside is not treated as italic since it's likely part of a variable name
       const text = 'Math expression $x_';
-      expect(parseIncompleteMarkdown(text)).toBe('Math expression $x_$');
+      expect(parseIncompleteMarkdown(text)).toBe('Math expression $x_');
 
       const text2 = '$$formula_';
       expect(parseIncompleteMarkdown(text2)).toBe('$$formula_$$');
@@ -791,7 +797,7 @@ describe('parseIncompleteMarkdown', () => {
       expect(parseIncompleteMarkdown('text**')).toBe('text****');
       expect(parseIncompleteMarkdown('text*')).toBe('text**');
       expect(parseIncompleteMarkdown('text`')).toBe('text``');
-      expect(parseIncompleteMarkdown('text$')).toBe('text$$');
+      expect(parseIncompleteMarkdown('text$')).toBe('text$'); // Single dollar not completed
       expect(parseIncompleteMarkdown('text~~')).toBe('text~~~~');
     });
 

packages/streamdown/index.tsx

@@ -103,7 +103,11 @@ export const Streamdown = memo(
               // biome-ignore lint/suspicious/noArrayIndexKey: "required"
               key={`${generatedId}-block_${index}`}
               rehypePlugins={[rehypeKatexPlugin, ...(rehypePlugins ?? [])]}
-              remarkPlugins={[remarkGfm, remarkMath, ...(remarkPlugins ?? [])]}
+              remarkPlugins={[
+                remarkGfm,
+                [remarkMath, { singleDollarTextMath: false }],
+                ...(remarkPlugins ?? []),
+              ]}
               shouldParseIncompleteMarkdown={shouldParseIncompleteMarkdown}
             />
           ))}

packages/streamdown/lib/parse-incomplete-markdown.ts

@@ -6,7 +6,7 @@ const singleAsteriskPattern = /(\*)([^*]*?)$/;
 const singleUnderscorePattern = /(_)([^_]*?)$/;
 const inlineCodePattern = /(`)([^`]*?)$/;
 const strikethroughPattern = /(~~)([^~]*?)$/;
-const inlineKatexPattern = /(\$)([^$]*?)$/;
+// Removed inlineKatexPattern - no longer processing single dollar signs
 const blockKatexPattern = /(\$\$)([^$]*?)$/;
 
 // Helper function to check if we have a complete code block
@@ -300,21 +300,11 @@ const handleIncompleteBlockKatex = (text: string): string => {
 };
 
 // Completes incomplete inline KaTeX formatting ($)
+// Note: Since we've disabled single dollar math delimiters in remarkMath,
+// we should not auto-complete single dollar signs as they're likely currency symbols
 const handleIncompleteInlineKatex = (text: string): string => {
-  // Don't process if inside a complete code block
-  if (hasCompleteCodeBlock(text)) {
-    return text;
-  }
-  
-  const inlineKatexMatch = text.match(inlineKatexPattern);
-
-  if (inlineKatexMatch) {
-    const singleDollars = countSingleDollarSigns(text);
-    if (singleDollars % 2 === 1) {
-      return `${text}$`;
-    }
-  }
-
+  // Don't process single dollar signs - they're likely currency symbols, not math
+  // Only process block math ($$) which is handled separately
   return text;
 };
 
@@ -381,9 +371,9 @@ export const parseIncompleteMarkdown = (text: string): string => {
   result = handleIncompleteInlineCode(result);
   result = handleIncompleteStrikethrough(result);
 
-  // Handle KaTeX formatting (block first, then inline)
+  // Handle KaTeX formatting (only block math with $$)
   result = handleIncompleteBlockKatex(result);
-  result = handleIncompleteInlineKatex(result);
+  // Note: We don't handle inline KaTeX with single $ as they're likely currency symbols
 
   return result;
 };