forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: extract label from image-only playground links (#1462)
+21
-2
+8
-2
server/utils/readme.ts
+8
-2
server/utils/readme.ts
···
415
415
renderer.link = function ({ href, title, tokens }: Tokens.Link) {
416
416
const text = this.parser.parseInline(tokens)
417
417
const titleAttr = title ? ` title="${title}"` : ''
418
-
const plainText = text.replace(/<[^>]*>/g, '').trim()
418
+
let plainText = text.replace(/<[^>]*>/g, '').trim()
419
419
420
-
const intermediateTitleAttr = `${` data-title-intermediate="${plainText || title}"`}`
420
+
// If plain text is empty, check if we have an image with alt text
421
+
if (!plainText && tokens.length === 1 && tokens[0]?.type === 'image') {
422
+
plainText = tokens[0].text
423
+
}
424
+
425
+
const intermediateTitleAttr =
426
+
plainText || title ? ` data-title-intermediate="${plainText || title}"` : ''
421
427
422
428
return `<a href="${href}"${titleAttr}${intermediateTitleAttr}>${text}</a>`
423
429
}
+13
test/unit/server/utils/readme.spec.ts
+13
test/unit/server/utils/readme.spec.ts
···
62
62
expect(result.playgroundLinks).toHaveLength(1)
63
63
expect(result.playgroundLinks[0]!.provider).toBe('codesandbox')
64
64
})
65
+
66
+
it('extracts label from image link', async () => {
67
+
const markdown = `[](https://codesandbox.io/s/example-abc123)`
68
+
const result = await renderReadmeHtml(markdown, 'test-pkg')
69
+
70
+
expect(result.playgroundLinks).toHaveLength(1)
71
+
expect(result.playgroundLinks[0]).toMatchObject({
72
+
provider: 'codesandbox',
73
+
providerName: 'CodeSandbox',
74
+
label: 'Edit CodeSandbox',
75
+
url: 'https://codesandbox.io/s/example-abc123',
76
+
})
77
+
})
65
78
})
66
79
67
80
describe('Other Providers', () => {