fix: extract label from image-only playground links (#1462)

Author: rzzf

server/utils/readme.ts

@@ -415,9 +415,15 @@ ${html}
   renderer.link = function ({ href, title, tokens }: Tokens.Link) {
     const text = this.parser.parseInline(tokens)
     const titleAttr = title ? ` title="${title}"` : ''
-    const plainText = text.replace(/<[^>]*>/g, '').trim()
+    let plainText = text.replace(/<[^>]*>/g, '').trim()
+
+    // If plain text is empty, check if we have an image with alt text
+    if (!plainText && tokens.length === 1 && tokens[0]?.type === 'image') {
+      plainText = tokens[0].text
+    }
 
-    const intermediateTitleAttr = `${` data-title-intermediate="${plainText || title}"`}`
+    const intermediateTitleAttr =
+      plainText || title ? ` data-title-intermediate="${plainText || title}"` : ''
 
     return `<a href="${href}"${titleAttr}${intermediateTitleAttr}>${text}</a>`
   }

test/unit/server/utils/readme.spec.ts

@@ -62,6 +62,19 @@ describe('Playground Link Extraction', () => {
       expect(result.playgroundLinks).toHaveLength(1)
       expect(result.playgroundLinks[0]!.provider).toBe('codesandbox')
     })
+
+    it('extracts label from image link', async () => {
+      const markdown = `[![Edit CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/example-abc123)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(1)
+      expect(result.playgroundLinks[0]).toMatchObject({
+        provider: 'codesandbox',
+        providerName: 'CodeSandbox',
+        label: 'Edit CodeSandbox',
+        url: 'https://codesandbox.io/s/example-abc123',
+      })
+    })
   })
 
   describe('Other Providers', () => {