diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/EditorWrapper.vue | 20 | ||||
-rw-r--r-- | src/nodes/Image.js | 12 |
2 files changed, 24 insertions, 8 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index de3071080..46d92d143 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -40,7 +40,7 @@ @image-paste="onPaste" @dragover.prevent.stop="draggedOver = true" @dragleave.prevent.stop="draggedOver = false" - @drop.prevent.stop="onEditorDrop"> + @image-drop="onEditorDrop"> <MenuBar v-if="renderMenus" ref="menubar" :editor="tiptap" @@ -571,29 +571,29 @@ export default { this.uploadImageFiles(e.detail.files) }, onEditorDrop(e) { - this.uploadImageFiles(e.dataTransfer.files) + this.uploadImageFiles(e.detail.files, e.detail.position) this.draggedOver = false }, - uploadImageFiles(files) { + uploadImageFiles(files, position = null) { if (!files) { return } this.uploadingImages = true const uploadPromises = [...files].map((file) => { - return this.uploadImageFile(file) + return this.uploadImageFile(file, position) }) Promise.all(uploadPromises).then((values) => { this.uploadingImages = false }) }, - async uploadImageFile(file) { + async uploadImageFile(file, position = null) { if (!IMAGE_MIMES.includes(file.type)) { showError(t('text', 'Image file format not supported')) return } return this.syncService.uploadImage(file).then((response) => { - this.insertAttachmentImage(response.data?.name, response.data?.id) + this.insertAttachmentImage(response.data?.name, response.data?.id, position) }).catch((error) => { console.error(error) showError(error?.response?.data?.error) @@ -610,12 +610,16 @@ export default { this.uploadingImages = false }) }, - insertAttachmentImage(name, fileId) { + insertAttachmentImage(name, fileId, position = null) { const src = 'text://image?imageFileName=' + encodeURIComponent(name) // simply get rid of brackets to make sure link text is valid // as it does not need to be unique and matching the real file name const alt = name.replaceAll(/[[\]]/g, '') - this.tiptap.chain().setImage({ src, alt }).focus().run() + if (position) { + this.tiptap.chain().focus(position).setImage({ src, alt }).focus().run() + } else { + this.tiptap.chain().setImage({ src, alt }).focus().run() + } }, }, } diff --git a/src/nodes/Image.js b/src/nodes/Image.js index 0d92f2108..11a05532a 100644 --- a/src/nodes/Image.js +++ b/src/nodes/Image.js @@ -44,6 +44,18 @@ const Image = TiptapImage.extend({ return [ new Plugin({ props: { + handleDrop: (view, event, slice) => { + const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY }) + const customEvent = new CustomEvent('image-drop', { + bubbles: true, + detail: { + files: event.dataTransfer.files, + position: coordinates.pos, + }, + }) + event.target.dispatchEvent(customEvent) + return true + }, handlePaste: (view, event, slice) => { // only prevent the paste if it contains files if (event.clipboardData.files && event.clipboardData.files.length > 0) { |