feat(editor): add uploading an image on save

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') {
@@ -290,16 +303,7 @@ function addImage() {
 			return
 		}
 		
-		uploadCallback(files).then(urls => {
+		uploadAndInsertFiles(files)
-			urls.forEach(url => {
-				editor.value
-					?.chain()
-					.focus()
-					.setImage({src: url})
-					.run()
-			})
-			onImageAdded()
-		})
 		
 		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">