Fix block images always add additional newlines on the end of the file

src/nodes/Image.js

@@ -24,6 +24,7 @@ import TiptapImage from '@tiptap/extension-image'
 import { Plugin } from 'prosemirror-state'
 import ImageView from './ImageView.vue'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import { defaultMarkdownSerializer } from 'prosemirror-markdown'
 
 const Image = TiptapImage.extend({
 
@@ -93,12 +94,11 @@ const Image = TiptapImage.extend({
 		]
 	},
 
-	// Append two newlines after image to make it a block image
-	toMarkdown(state, node) {
-		state.write('![' + state.esc(node.attrs.alt || '') + '](' + node.attrs.src.replace(/[()]/g, '\\$&')
-			+ (node.attrs.title ? ' "' + node.attrs.title.replace(/"/g, '\\"') + '"' : '') + ')\n\n')
+	/* Serializes an image node as a block image, so it ensures an image is always a block by itself */
+	toMarkdown(state, node, parent, index) {
+		defaultMarkdownSerializer.nodes.image(state, node, parent, index)
+		state.closeBlock(node)
 	},
-
 })
 
 export default Image

src/nodes/ImageInline.js

@@ -23,6 +23,7 @@
 import TiptapImage from '@tiptap/extension-image'
 import ImageView from './ImageView.vue'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import { defaultMarkdownSerializer } from 'prosemirror-markdown'
 
 // Inline image extension. Needed if markdown contains inline images.
 // Not supported to be created from our UI (we default to block images).
@@ -65,9 +66,8 @@ const ImageInline = TiptapImage.extend({
 		return VueNodeViewRenderer(ImageView)
 	},
 
-	toMarkdown(state, node) {
-		state.write('![' + state.esc(node.attrs.alt || '') + '](' + node.attrs.src.replace(/[()]/g, '\\$&')
-			+ (node.attrs.title ? ' "' + node.attrs.title.replace(/"/g, '\\"') + '"' : '') + ')')
+	toMarkdown(state, node, parent, index) {
+		return defaultMarkdownSerializer.nodes.image(state, node, parent, index)
 	},
 })
 

src/tests/extensions/Markdown.spec.js

@@ -61,11 +61,11 @@ describe('Markdown extension integrated in the editor', () => {
 
 	it('serializes block images with the default prosemirror way', () => {
 		const editor = createEditor({
-			content: '<figure><img alt="Hello" src="test"></figure>',
+			content: '<figure><img alt="Hello" src="test"></figure><p>hello</p>',
 			extensions: [Markdown, Image, ImageInline],
 		})
 		const serializer = createMarkdownSerializer(editor.schema)
-		expect(serializer.serialize(editor.state.doc)).toBe('![Hello](test)\n\n')
+		expect(serializer.serialize(editor.state.doc)).toBe('![Hello](test)\n\nhello')
 	})
 
 	it('serializes inline images with the default prosemirror way', () => {

src/tests/markdown.spec.js

@@ -66,21 +66,6 @@ describe('Commonmark', () => {
 	})
 })
 
-describe('Commonmark images', () => {
-	beforeAll(() => {
-		// Make sure html tests pass
-		// entry.section === 'HTML blocks' || entry.section === 'Raw HTML'
-		markdownit.set({ html: true})
-	})
-	afterAll(() => {
-		markdownit.set({ html: false})
-	})
-
-	test('commonmark 513', () => {
-		expect(markdownit.render('[![moon](moon.jpg)](/uri)\n')).toBe('<figure><a href=\"/uri\"><img src=\"moon.jpg\" alt=\"moon\" /></a></figure>\n')
-	})
-})
-
 describe('Markdown though editor', () => {
 	test('headlines', () => {
 		expect(markdownThroughEditor('# Test')).toBe('# Test')
@@ -120,9 +105,11 @@ describe('Markdown though editor', () => {
 		expect(markdownThroughEditor('[bar\\\\]: /uri\n\n[bar\\\\]')).toBe('[bar\\\\](/uri)')
 	})
 	test('images', () => {
+		// Inline images
 		expect(markdownThroughEditor('text ![test](foo) moretext')).toBe('text ![test](foo) moretext')
-		// regression introduced in #3282. To be fixed in #3428.
-		expect(markdownThroughEditor('![test](foo)')).toBe('![test](foo)\n\n')
+		// regression introduced in #3282. See issue #3428.
+		expect(markdownThroughEditor('![test](foo)')).toBe('![test](foo)')
+		expect(markdownThroughEditor('Hello\n\n![test](foo)')).toBe('Hello\n\n![test](foo)')
 	})
 	test('special characters', () => {
 		expect(markdownThroughEditor('"\';&.-#><')).toBe('"\';&.-#><')

src/tests/markdownit.spec.js

@@ -5,6 +5,10 @@ import tableHtml from './fixtures/table.html'
 
 describe('markdownit', () => {
 
+	it('render image figures', () => {
+		expect(markdownit.render('[![moon](moon.jpg)](/uri)\n')).toBe('<figure><a href=\"/uri\"><img src=\"moon.jpg\" alt=\"moon\" /></a></figure>\n')
+	})
+
 	it('renders task lists', () => {
 		const rendered = markdownit.render('* [ ] task\n* not a task')
 		expect(stripIndent(rendered)).toBe(stripIndent(`