fix: the unterminated long link text is not rendering anything until the full link has completed streaming (#85)

* Update terminator-parser.tsx

* Automatically close links with placeholder url

* Create yummy-lines-matter.md

Author: haydenbleasel

.changeset/yummy-lines-matter.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+fix: links invisible while streaming

apps/website/app/components/terminator-parser.tsx

@@ -1,10 +1,8 @@
 import { Section } from './section';
 
-const markdown = `# This is a showcase of unterminated Markdown blocks
+const markdown = `**This is a very long bold text that keeps going and going without a clear end, so you can see how unterminated bold blocks are handled by the renderer.**
 
-**This is a very long bold text that keeps going and going without a clear end, so you can see how unterminated bold blocks are handled by the renderer, especially when the text wraps across multiple lines and continues even further to really test the limits of the parser**
-
-*Here is an equally lengthy italicized sentence that stretches on and on, never quite reaching a conclusion, so you can observe how unterminated italic blocks behave in a streaming Markdown context, particularly when the content is verbose and spans several lines for demonstration purposes*
+*Here is an equally lengthy italicized sentence that stretches on and on, never quite reaching a conclusion, so you can observe how unterminated italic blocks behave in a streaming Markdown context, particularly when the content is verbose.*
 
 \`This is a long inline code block that should be unterminated and continues for quite a while, including some code-like content such as const foo = "bar"; and more, to see how the parser deals with it when the code block is not properly closed\`
 

packages/streamdown/__tests__/components.test.tsx

@@ -126,6 +126,21 @@ describe('Markdown Components', () => {
       expect(link?.getAttribute('target')).toBe('_blank');
     });
 
+    it('should mark incomplete links with data attribute', () => {
+      const A = components.a!;
+      const { container } = render(
+        <A href="streamdown:incomplete-link" node={null as any}>
+          Incomplete link text
+        </A>
+      );
+      // Should render a normal anchor with data-incomplete attribute
+      const link = container.querySelector('a[data-streamdown="link"]');
+      expect(link).toBeTruthy();
+      expect(link?.getAttribute('data-incomplete')).toBe('true');
+      expect(link?.getAttribute('href')).toBe('streamdown:incomplete-link');
+      expect(link?.textContent).toBe('Incomplete link text');
+    });
+
     it('should render blockquote with correct classes', () => {
       const Blockquote = components.blockquote!;
       const { container } = render(

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

@@ -20,11 +20,11 @@ describe('parseIncompleteMarkdown', () => {
   });
 
   describe('link handling', () => {
-    it('should remove incomplete links', () => {
+    it('should preserve incomplete links with special marker', () => {
       expect(parseIncompleteMarkdown('Text with [incomplete link')).toBe(
-        'Text with '
+        'Text with [incomplete link](streamdown:incomplete-link)'
       );
-      expect(parseIncompleteMarkdown('Text [partial')).toBe('Text ');
+      expect(parseIncompleteMarkdown('Text [partial')).toBe('Text [partial](streamdown:incomplete-link)');
     });
 
     it('should keep complete links unchanged', () => {
@@ -269,9 +269,9 @@ describe('parseIncompleteMarkdown', () => {
       expect(parseIncompleteMarkdown(text)).toBe(text);
     });
 
-    it('should prioritize link/image removal over formatting completion', () => {
+    it('should prioritize link/image preservation over formatting completion', () => {
       expect(parseIncompleteMarkdown('Text with [link and **bold')).toBe(
-        'Text with '
+        'Text with [link and **bold](streamdown:incomplete-link)'
       );
     });
 
@@ -464,7 +464,7 @@ describe('parseIncompleteMarkdown', () => {
     });
 
     it('should handle partial link at chunk boundary', () => {
-      expect(parseIncompleteMarkdown('Check out [this lin')).toBe('Check out ');
+      expect(parseIncompleteMarkdown('Check out [this lin')).toBe('Check out [this lin](streamdown:incomplete-link)');
       // Links with partial URLs are kept as-is since they might be complete
       expect(parseIncompleteMarkdown('Visit [our site](https://exa')).toBe(
         'Visit [our site](https://exa'

packages/streamdown/lib/components.tsx

@@ -127,18 +127,23 @@ export const components: Options['components'] = {
       {children}
     </span>
   ),
-  a: ({ node, children, className, href, ...props }) => (
-    <a
-      className={cn('font-medium text-primary underline', className)}
-      data-streamdown="link"
-      href={href}
-      rel="noreferrer"
-      target="_blank"
-      {...props}
-    >
-      {children}
-    </a>
-  ),
+  a: ({ node, children, className, href, ...props }) => {
+    const isIncomplete = href === 'streamdown:incomplete-link';
+
+    return (
+      <a
+        className={cn('font-medium text-primary underline', className)}
+        data-incomplete={isIncomplete}
+        data-streamdown="link"
+        href={href}
+        rel="noreferrer"
+        target="_blank"
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  },
   h1: ({ node, children, className, ...props }) => (
     <h1
       className={cn('mt-6 mb-2 font-semibold text-3xl', className)}

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

@@ -6,22 +6,31 @@ const singleAsteriskPattern = /(\*)([^*]*?)$/;
 const singleUnderscorePattern = /(_)([^_]*?)$/;
 const inlineCodePattern = /(`)([^`]*?)$/;
 const strikethroughPattern = /(~~)([^~]*?)$/;
-// Removed inlineKatexPattern - no longer processing single dollar signs
-const blockKatexPattern = /(\$\$)([^$]*?)$/;
 
 // Helper function to check if we have a complete code block
 const hasCompleteCodeBlock = (text: string): boolean => {
   const tripleBackticks = (text.match(/```/g) || []).length;
-  return tripleBackticks > 0 && tripleBackticks % 2 === 0 && text.includes('\n');
+  return (
+    tripleBackticks > 0 && tripleBackticks % 2 === 0 && text.includes('\n')
+  );
 };
 
-// Handles incomplete links and images by removing them if not closed
+// Handles incomplete links and images by preserving them with a special marker
 const handleIncompleteLinksAndImages = (text: string): string => {
   const linkMatch = text.match(linkImagePattern);
 
   if (linkMatch) {
-    const startIndex = text.lastIndexOf(linkMatch[1]);
-    return text.substring(0, startIndex);
+    const isImage = linkMatch[1].startsWith('!');
+
+    // For images, we still remove them as they can't show skeleton
+    if (isImage) {
+      const startIndex = text.lastIndexOf(linkMatch[1]);
+      return text.substring(0, startIndex);
+    }
+
+    // For links, preserve the text and close the link with a
+    // special placeholder URL that indicates it's incomplete
+    return `${text}](streamdown:incomplete-link)`;
   }
 
   return text;
@@ -33,7 +42,7 @@ const handleIncompleteBold = (text: string): string => {
   if (hasCompleteCodeBlock(text)) {
     return text;
   }
-  
+
   const boldMatch = text.match(boldPattern);
 
   if (boldMatch) {
@@ -85,7 +94,10 @@ const countSingleAsterisks = (text: string): number => {
       }
       // Check if this asterisk is at the beginning of a line (with optional whitespace)
       const beforeAsterisk = text.substring(lineStartIndex, index);
-      if (beforeAsterisk.trim() === '' && (nextChar === ' ' || nextChar === '\t')) {
+      if (
+        beforeAsterisk.trim() === '' &&
+        (nextChar === ' ' || nextChar === '\t')
+      ) {
         // This is likely a list marker, don't count it
         return acc;
       }
@@ -103,7 +115,7 @@ const handleIncompleteSingleAsteriskItalic = (text: string): string => {
   if (hasCompleteCodeBlock(text)) {
     return text;
   }
-  
+
   const singleAsteriskMatch = text.match(singleAsteriskPattern);
 
   if (singleAsteriskMatch) {
@@ -121,14 +133,14 @@ const isWithinMathBlock = (text: string, position: number): boolean => {
   // Count dollar signs before this position
   let inInlineMath = false;
   let inBlockMath = false;
-  
+
   for (let i = 0; i < text.length && i < position; i++) {
     // Skip escaped dollar signs
     if (text[i] === '\\' && text[i + 1] === '$') {
       i++; // Skip the next character
       continue;
     }
-    
+
     if (text[i] === '$') {
       // Check for block math ($$)
       if (text[i + 1] === '$') {
@@ -141,7 +153,7 @@ const isWithinMathBlock = (text: string, position: number): boolean => {
       }
     }
   }
-  
+
   return inInlineMath || inBlockMath;
 };
 
@@ -173,7 +185,7 @@ const handleIncompleteSingleUnderscoreItalic = (text: string): string => {
   if (hasCompleteCodeBlock(text)) {
     return text;
   }
-  
+
   const singleUnderscoreMatch = text.match(singleUnderscorePattern);
 
   if (singleUnderscoreMatch) {
@@ -221,17 +233,21 @@ const handleIncompleteInlineCode = (text: string): string => {
     // Already complete inline triple backticks
     return text;
   }
-  
+
   // Check if we're inside a multi-line code block (complete or incomplete)
   const allTripleBackticks = (text.match(/```/g) || []).length;
   const insideIncompleteCodeBlock = allTripleBackticks % 2 === 1;
-  
+
   // Don't modify text if we have complete multi-line code blocks (even pairs of ```)
-  if (allTripleBackticks > 0 && allTripleBackticks % 2 === 0 && text.includes('\n')) {
+  if (
+    allTripleBackticks > 0 &&
+    allTripleBackticks % 2 === 0 &&
+    text.includes('\n')
+  ) {
     // We have complete multi-line code blocks, don't add any backticks
     return text;
   }
-  
+
   // Special case: if text ends with ```\n (triple backticks followed by newline)
   // This is actually a complete code block, not incomplete
   if (text.endsWith('```\n') || text.endsWith('```')) {
@@ -289,40 +305,32 @@ const countSingleDollarSigns = (text: string): number => {
 const handleIncompleteBlockKatex = (text: string): string => {
   // Count all $$ pairs in the text
   const dollarPairs = (text.match(/\$\$/g) || []).length;
-  
+
   // If we have an even number of $$, the block is complete
   if (dollarPairs % 2 === 0) {
     return text;
   }
-  
+
   // If we have an odd number, add closing $$
   // Check if this looks like a multi-line math block (contains newlines after opening $$)
   const firstDollarIndex = text.indexOf('$$');
-  const hasNewlineAfterStart = firstDollarIndex !== -1 && text.indexOf('\n', firstDollarIndex) !== -1;
-  
+  const hasNewlineAfterStart =
+    firstDollarIndex !== -1 && text.indexOf('\n', firstDollarIndex) !== -1;
+
   // For multi-line blocks, add newline before closing $$ if not present
   if (hasNewlineAfterStart && !text.endsWith('\n')) {
     return `${text}\n$$`;
   }
-  
+
   // For inline blocks or when already ending with newline, just add $$
   return `${text}$$`;
 };
 
-// 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 single dollar signs - they're likely currency symbols, not math
-  // Only process block math ($$) which is handled separately
-  return text;
-};
-
 // Counts triple asterisks that are not part of quadruple or more asterisks
 const countTripleAsterisks = (text: string): number => {
   let count = 0;
   const matches = text.match(/\*+/g) || [];
-  
+
   for (const match of matches) {
     // Count how many complete triple asterisks are in this sequence
     const asteriskCount = match.length;
@@ -331,7 +339,7 @@ const countTripleAsterisks = (text: string): number => {
       count += Math.floor(asteriskCount / 3);
     }
   }
-  
+
   return count;
 };
 
@@ -341,13 +349,13 @@ const handleIncompleteBoldItalic = (text: string): string => {
   if (hasCompleteCodeBlock(text)) {
     return text;
   }
-  
+
   // Don't process if text is only asterisks and has 4 or more consecutive asterisks
   // This prevents cases like **** from being treated as incomplete ***
   if (/^\*{4,}$/.test(text)) {
     return text;
   }
-  
+
   const boldItalicMatch = text.match(boldItalicPattern);
 
   if (boldItalicMatch) {
@@ -368,8 +376,16 @@ export const parseIncompleteMarkdown = (text: string): string => {
 
   let result = text;
 
-  // Handle incomplete links and images first (removes content)
-  result = handleIncompleteLinksAndImages(result);
+  // Handle incomplete links and images first
+  const processedResult = handleIncompleteLinksAndImages(result);
+  
+  // If we added an incomplete link marker, don't process other formatting
+  // as the content inside the link should be preserved as-is
+  if (processedResult.endsWith('](streamdown:incomplete-link)')) {
+    return processedResult;
+  }
+  
+  result = processedResult;
 
   // Handle various formatting completions
   // Handle triple asterisks first (most specific)
@@ -380,7 +396,7 @@ export const parseIncompleteMarkdown = (text: string): string => {
   result = handleIncompleteSingleUnderscoreItalic(result);
   result = handleIncompleteInlineCode(result);
   result = handleIncompleteStrikethrough(result);
-  
+
   // Handle KaTeX formatting (only block math with $$)
   result = handleIncompleteBlockKatex(result);
   // Note: We don't handle inline KaTeX with single $ as they're likely currency symbols