fix: preserve image attributes when a title is present

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}`
 }

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<string> {
+  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"}'
+    )
+  })
+})