diff options
-rw-r--r-- | src/components/EditorWrapper.vue | 4 | ||||
-rw-r--r-- | src/nodes/Image.js | 24 |
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 |