Unselect uploaded image in case it is the first element in editor

Tiptap `setImage()` marks the added image as selected when added as
first element in the document), which leads to the image being
overwritten by subsequent `insertContent()` command.

See ueberdosis/tiptap#3355 for the relevant
upstream bug.

Mitigate this bug by explicitly placing the cursor at the end of the
selection between adding the image and the line break.

Signed-off-by: Jonas <[email protected]>

src/components/Editor/MediaHandler.vue

@@ -194,7 +194,21 @@ export default {
 				? this.$editor.chain().focus(position)
 				: this.$editor.chain()
 
-			chain.setImage({ src, alt }).insertContent('<br />').focus().run()
+			chain.setImage({ src, alt }).run()
+
+			const selection = this.$editor.view.state.selection
+			if (!selection.empty) {
+				// If inserted image is first element, it is selected and would get overwritten by
+				// subsequent editor inserts (see tiptap#3355). So unselect the image by placing
+				// the cursor at the end of the selection.
+				this.$editor.commands.focus(selection.to)
+			} else {
+				// Place the cursor after the inserted image node
+				this.$editor.commands.focus(selection.to + 2)
+			}
+
+			// Insert a newline to allow placing the cursor in between subsequent images
+			this.$editor.chain().insertContent('<br />').focus().run()
 		},
 	},
 }