handle image paste, ignore the event's text if it contains a file (#2265)

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

2 files changed, 28 insertions, 0 deletions

diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index 5e5e0398b..58dfb3aef 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -37,6 +37,7 @@
 			<div v-if="tiptap"
 				id="editor"
 				:class="{ draggedOver }"
+				@image-paste="onPaste"
 				@dragover.prevent.stop="draggedOver = true"
 				@dragleave.prevent.stop="draggedOver = false"
 				@drop.prevent.stop="onEditorDrop">
@@ -566,6 +567,9 @@ export default {
 		hideHelp() {
 			this.displayHelp = false
 		},
+		onPaste(e) {
+			this.uploadImageFiles(e.detail.files)
+		},
 		onEditorDrop(e) {
 			this.uploadImageFiles(e.dataTransfer.files)
 			this.draggedOver = false
diff --git a/src/nodes/Image.js b/src/nodes/Image.js
index 11b3f8912..0d92f2108 100644
--- a/src/nodes/Image.js
+++ b/src/nodes/Image.js
@@ -21,6 +21,7 @@
  */
 
 import TiptapImage from '@tiptap/extension-image'
+import { Plugin } from 'prosemirror-state'
 import ImageView from './ImageView'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
 
@@ -39,6 +40,29 @@ const Image = TiptapImage.extend({
 		return VueNodeViewRenderer(ImageView)
 	},
 
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				props: {
+					handlePaste: (view, event, slice) => {
+						// only prevent the paste if it contains files
+						if (event.clipboardData.files && event.clipboardData.files.length > 0) {
+							// let the editor wrapper catch this custom event
+							const customEvent = new CustomEvent('image-paste', {
+								bubbles: true,
+								detail: {
+									files: event.clipboardData.files,
+								},
+							})
+							event.target.dispatchEvent(customEvent)
+							return true
+						}
+					},
+				},
+			}),
+		]
+	},
+
 })
 
 export default Image