diff --git a/packages/comark/src/internal/stringify/handlers/img.ts b/packages/comark/src/internal/stringify/handlers/img.ts index b1254878..7a8b33e6 100644 --- a/packages/comark/src/internal/stringify/handlers/img.ts +++ b/packages/comark/src/internal/stringify/handlers/img.ts @@ -8,5 +8,6 @@ export function img(node: ComarkElement, _state: State) { const attrsString = Object.keys(rest).length > 0 ? comarkAttributes(rest) : '' - return title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})${attrsString}` + const link = title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})` + return `${link}${attrsString}` } diff --git a/packages/comark/test/img-attributes.test.ts b/packages/comark/test/img-attributes.test.ts new file mode 100644 index 00000000..a7374c0e --- /dev/null +++ b/packages/comark/test/img-attributes.test.ts @@ -0,0 +1,28 @@ +import { describe, expect, it } from 'vitest' +import { parse } from 'comark' +import { renderMarkdown } from 'comark/render' + +async function roundTrip(src: string): Promise { + const tree = await parse(`${src}\n`) + return (await renderMarkdown(tree, {})).trim() +} + +describe('image: attributes are preserved alongside a title', () => { + it('keeps attributes when the image has no title', async () => { + expect(await roundTrip('![alt](img.png){width="200"}')).toBe('![alt](img.png){width="200"}') + }) + + it('keeps the title when the image has no attributes', async () => { + expect(await roundTrip('![alt](img.png "A title")')).toBe('![alt](img.png "A title")') + }) + + it('keeps width when the image also has a title', async () => { + expect(await roundTrip('![alt](img.png "A title"){width="200"}')).toBe('![alt](img.png "A title"){width="200"}') + }) + + it('keeps class and width when the image also has a title', async () => { + expect(await roundTrip('![alt](img.png "A title"){.rounded-asymmetric width="200"}')).toBe( + '![alt](img.png "A title"){.rounded-asymmetric width="200"}' + ) + }) +})