diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 5e5e0398b7e..58dfb3aef31 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -37,6 +37,7 @@
@@ -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 11b3f8912b8..0d92f210871 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