From 4f2d7b3ce20274995b42f83eec8a80888fd3f672 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Oct 2023 18:03:59 +0200
Subject: [PATCH] feat(editor): add uploading an image on save

---
 src/components/input/editor/TipTap.vue | 47 +++++++++++++++++++-------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue
index 6d39ca4f7..234a7759d 100644
--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@@ -79,7 +79,7 @@ const tiptapRegex = new RegExp(`${TIPTAP_TEXT_VALUE_PREFIX}`, 's')
 </script>
 
 <script setup lang="ts">
-import {ref, watch, onBeforeUnmount, nextTick} from 'vue'
+import {ref, watch, onBeforeUnmount, nextTick, onMounted} from 'vue'
 import {marked} from 'marked'
 import {refDebounced} from '@vueuse/core'
 
@@ -281,6 +281,19 @@ onBeforeUnmount(() => editor.value?.destroy())
 
 const uploadInputRef = ref<HTMLInputElement | null>(null)
 
+function uploadAndInsertFiles(files: File[] | FileList) {
+	uploadCallback(files).then(urls => {
+		urls?.forEach(url => {
+			editor.value
+				?.chain()
+				.focus()
+				.setImage({src: url})
+				.run()
+		})
+		onImageAdded()
+	})
+}
+
 function addImage() {
 
 	if (typeof uploadCallback !== 'undefined') {
@@ -289,18 +302,9 @@ function addImage() {
 		if (!files || files.length === 0) {
 			return
 		}
-
-		uploadCallback(files).then(urls => {
-			urls.forEach(url => {
-				editor.value
-					?.chain()
-					.focus()
-					.setImage({src: url})
-					.run()
-			})
-			onImageAdded()
-		})
-
+		
+		uploadAndInsertFiles(files)
+		
 		return
 	}
 
@@ -341,6 +345,23 @@ function setLink() {
 		.setLink({href: url, target: '_blank'})
 		.run()
 }
+
+onMounted(() => {
+	document.addEventListener('paste', handleImagePaste)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('paste', handleImagePaste)
+})
+
+function handleImagePaste(event) {
+	event.preventDefault()
+	event?.clipboardData?.items?.forEach(i => {
+		if (i.kind === 'file' && i.type.startsWith('image/')) {
+			uploadAndInsertFiles([i.getAsFile()])
+		}
+	})
+}
 </script>
 
 <style lang="scss">