Handle markdown image links

Author: platypii

packages/components/src/components/Markdown.tsx

@@ -14,7 +14,10 @@ export default function Markdown({ text, className }: MarkdownProps) {
     function renderTextSegments(text: string): ReactNode[] {
       let result: ReactNode[] = []
 
-      // Parse images: ![alt](url)
+      // Process in order: image links, images, regular links, and then formatting
+      const imageInsideLinkRegex = /\[!\[([^\]]*)\]\(([^)]+)\)\]\(([^)]+)\)/g
+      // Handle mixed content within links: [text ![img](img_url) more text](link_url)
+      const mixedContentLinkRegex = /\[([^\]]*?!\[[^\]]*?\]\([^)]+?\)[^\]]*?)\]\(([^)]+)\)/g
       const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g
       const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g
       const codeRegex = /`([^`]+)`/g
@@ -33,6 +36,7 @@ export default function Markdown({ text, className }: MarkdownProps) {
             const str = segment
             let lastIndex = 0
             let match: RegExpExecArray | null
+            regex.lastIndex = 0 // Reset regex for safety
             while ((match = regex.exec(str)) !== null) {
               // Add text before match
               if (match.index > lastIndex) {
@@ -56,13 +60,24 @@ export default function Markdown({ text, className }: MarkdownProps) {
       // Start with entire text as a single segment
       result = [text]
 
-      // Apply in a certain order:
-      result = applyRegex(result, imageRegex, (m) => <img alt={m[1]} src={m[2]} />)
-      result = applyRegex(result, linkRegex, (m) => <a href={m[2]}>{m[1]}</a>)
-      result = applyRegex(result, codeRegex, (m) => <code>{m[1]}</code>)
-      result = applyRegex(result, boldRegex, (m) => <strong>{m[1]}</strong>)
-      result = applyRegex(result, italicRegex, (m) => <em>{m[1]}</em>)
-      result = applyRegex(result, underlineRegex, (m) => <u>{m[1]}</u>)
+      // Apply in a specific order to handle nested elements:
+      // First handle image-inside-link pattern
+      result = applyRegex(result, imageInsideLinkRegex, (m) => <a href={m[3]} key={`imglink-${m[3]}`}>
+        <img alt={m[1]} src={m[2]} key={`img-in-link-${m[2]}`} />
+      </a>)
+
+      // Then handle mixed content links (with images and text)
+      result = applyRegex(result, mixedContentLinkRegex, (m) => <a href={m[2]} key={`mixed-${m[2]}`}>{parseInline(m[1])}</a>)
+
+      // Then handle regular images and links
+      result = applyRegex(result, imageRegex, (m) => <img key={`img-${m[2]}`} alt={m[1]} src={m[2]} />)
+      result = applyRegex(result, linkRegex, (m) => <a href={m[2]} key={`link-${m[2]}`}>{parseInline(m[1])}</a>)
+
+      // Finally handle text formatting
+      result = applyRegex(result, codeRegex, (m) => <code key={`code-${m.index}`}>{m[1]}</code>)
+      result = applyRegex(result, boldRegex, (m) => <strong key={`bold-${m.index}`}>{m[1]}</strong>)
+      result = applyRegex(result, italicRegex, (m) => <em key={`italic-${m.index}`}>{m[1]}</em>)
+      result = applyRegex(result, underlineRegex, (m) => <u key={`underline-${m.index}`}>{m[1]}</u>)
 
       return result
     }

packages/components/test/components/Markdown.test.tsx

@@ -99,3 +99,63 @@ describe('Markdown', () => {
     expect(code?.textContent).toBe('console.log(\'Hello, world!\')')
   })
 })
+
+describe('Markdown with nested elements', () => {
+  it('renders an image inside a link', () => {
+    const text = '[![mit license](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT)'
+    const { container } = render(<Markdown text={text} />)
+
+    // Check that we have an image
+    const img = container.querySelector('img')
+    expect(img).toBeDefined()
+    expect(img?.getAttribute('alt')).toBe('mit license')
+    expect(img?.getAttribute('src')).toBe('https://img.shields.io/badge/License-MIT-orange.svg')
+
+    // Check that the image is inside a link
+    const link = container.querySelector('a')
+    expect(link).toBeDefined()
+    expect(link?.getAttribute('href')).toBe('https://opensource.org/licenses/MIT')
+    expect(link?.contains(img)).toBe(true)
+  })
+
+  it('handles multiple images inside links in one paragraph', () => {
+    const text = 'Check [![license](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT) and [![npm](https://img.shields.io/npm/v/package.svg)](https://www.npmjs.com/package)'
+    const { container } = render(<Markdown text={text} />)
+
+    const links = container.querySelectorAll('a')
+    expect(links.length).toBe(2)
+
+    const images = container.querySelectorAll('img')
+    expect(images.length).toBe(2)
+
+    // First link contains first image
+    expect(links[0].getAttribute('href')).toBe('https://opensource.org/licenses/MIT')
+    expect(links[0].contains(images[0])).toBe(true)
+    expect(images[0].getAttribute('alt')).toBe('license')
+
+    // Second link contains second image
+    expect(links[1].getAttribute('href')).toBe('https://www.npmjs.com/package')
+    expect(links[1].contains(images[1])).toBe(true)
+    expect(images[1].getAttribute('alt')).toBe('npm')
+  })
+
+  it('handles images and text inside links', () => {
+    const text = '[Click here ![icon](https://example.com/icon.png) for more info](https://example.com)'
+    const { container } = render(<Markdown text={text} />)
+
+    const link = container.querySelector('a')
+    expect(link).toBeDefined()
+    expect(link?.getAttribute('href')).toBe('https://example.com')
+
+    // Check that the link contains both text fragments
+    const linkText = link?.textContent ?? ''
+    expect(linkText.includes('Click here')).toBe(true)
+    expect(linkText.includes('for more info')).toBe(true)
+
+    // Image should be inside the link
+    const img = container.querySelector('img')
+    expect(img).toBeDefined()
+    expect(img?.getAttribute('src')).toBe('https://example.com/icon.png')
+    expect(link?.contains(img)).toBe(true)
+  })
+})