diff --git a/server/utils/readme.ts b/server/utils/readme.ts index 9920eb2af..a76e6442b 100644 --- a/server/utils/readme.ts +++ b/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 `${text}` } diff --git a/test/unit/server/utils/readme.spec.ts b/test/unit/server/utils/readme.spec.ts index 08db45be2..9dc6464c9 100644 --- a/test/unit/server/utils/readme.spec.ts +++ b/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', () => {