feat: media picker and image removal

web/src/lib/__tests__/articleImage.spec.ts

@@ -61,6 +61,23 @@ describe('Selecting an inserted image reveals its delete button', () => {
 	})
 })
 
+describe('The remove button is labelled and neutral', () => {
+	it('reads "Remove image" with a trash icon and is not styled as destructive', async () => {
+		const { wrapper, getEditor } = mountHarness()
+		activeWrapper = wrapper
+		const editor = getEditor()
+		editor.commands.setArticleImage({ src: 'photo.png', alt: '', imageId: 10 })
+		editor.commands.setNodeSelection(findArticleImagePos(editor, 10) as number)
+		await flush()
+
+		const button = deleteButton()!
+
+		expect(button.textContent?.trim()).toBe('Remove image')
+		expect(button.className).not.toContain('text-error')
+		expect(button.className).toContain('border-accented')
+	})
+})
+
 describe('An image with no data-image-id gets no delete affordance', () => {
 	it('renders no delete button even when the node is selected', async () => {
 		const { wrapper, getEditor } = mountHarness()

web/src/lib/__tests__/bodyImageIds.spec.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { bodyImageIds } from '../bodyImageIds'
+
+describe('bodyImageIds', () => {
+	it('lists the ids of the images that carry data-image-id', () => {
+		const body =
+			'<p>a</p><img src="/a.jpg" alt="" data-image-id="1"><p>b</p><img data-image-id="4" src="/b.svg">'
+
+		expect(bodyImageIds(body)).toEqual([1, 4])
+	})
+
+	it('ignores images without an id and non numeric ids', () => {
+		const body =
+			'<img src="/a.jpg"><img src="/b.jpg" data-image-id="abc"><img data-image-id="">'
+
+		expect(bodyImageIds(body)).toEqual([])
+	})
+
+	it('returns nothing for a body without images', () => {
+		expect(bodyImageIds('<p>Hello</p>')).toEqual([])
+	})
+})