fix(image): keep data: URI images on markdown round-trip

src/nodes/Image.ts

@@ -54,6 +54,10 @@ const Image = TiptapImage.extend<ImageOptions>({
 		return {
 			...this.parent?.() as ImageOptions,
 			noLazyImages: false,
+			// Markdown files can legitimately contain base64 data: URI images.
+			// Parsing them is required, otherwise they are silently dropped on
+			// the next save (issue #9108).
+			allowBase64: true,
 		}
 	},
 

src/nodes/ImageInline.ts

@@ -49,6 +49,9 @@ const ImageInline = TiptapImage.extend<ImageOptions>({
 			...this.parent?.() as ImageOptions,
 			noLazyImages: false,
 			inline: true,
+			// See Image.ts: data: URI images must survive an edit round-trip
+			// instead of being dropped on save (issue #9108).
+			allowBase64: true,
 		}
 	},
 

src/tests/markdown.spec.js

@@ -38,6 +38,13 @@ describe('Markdown though editor', () => {
 		expect(markdownThroughEditor('~~Test~~')).toBe('~~Test~~')
 		expect(markdownThroughEditor('Have an `inline code` element')).toBe('Have an `inline code` element')
 	})
+	test('images with data: URI survive a round-trip (#9108)', ({ markdownThroughEditor }) => {
+		const dataUri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=='
+		// standalone image (block level, wrapped in a figure)
+		expect(markdownThroughEditor(`![pixel](${dataUri})`)).toBe(`![pixel](${dataUri})`)
+		// inline image inside a paragraph
+		expect(markdownThroughEditor(`Before ![pixel](${dataUri}) after`)).toBe(`Before ![pixel](${dataUri}) after`)
+	})
 	test('ul', ({ markdownThroughEditor }) => {
 		expect(markdownThroughEditor('+ foo\n+ bar')).toBe('+ foo\n+ bar')
 		expect(markdownThroughEditor('* foo\n* bar')).toBe('* foo\n* bar')