From 96ec7b17bcdefaf2e7b1e0f6c920d859762c469f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 9 Mar 2025 12:52:16 +0100
Subject: [PATCH] fix(editor): upload image via toolbar button

Resolves https://community.vikunja.io/t/unable-to-add-task-attachments/3329
---
 .../src/components/input/editor/TipTap.vue     | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index 6bfdb3186..32c4c5f0c 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -301,6 +301,10 @@ const internalMode = ref<Mode>('preview')
 const isEditing = computed(() => internalMode.value === 'edit' && props.isEditEnabled)
 const contentHasChanged = ref<boolean>(false)
 
+// TipTap crashes when inserting an image into an empty editor.
+// To work around this, we're inserting an element first, then insert the image, then remove the element.
+const UPLOAD_PLACEHOLDER_ELEMENT = '<p>UPLOAD_PLACEHOLDER</p>'
+
 let lastSavedState = ''
 
 watch(
@@ -542,18 +546,30 @@ onBeforeUnmount(() => editor.value?.destroy())
 const uploadInputRef = ref<HTMLInputElement | null>(null)
 
 function uploadAndInsertFiles(files: File[] | FileList) {
-	if (typeof props.uploadCallback !== 'undefined') {
+	if (typeof props.uploadCallback === 'undefined') {
 		throw new Error('Can\'t add files here')
 	}
 
 	props.uploadCallback(files).then(urls => {
 		urls?.forEach(url => {
+			if (editor.value?.isEmpty) {
+				editor.value
+					?.chain()
+					.focus()
+					.insertContent(UPLOAD_PLACEHOLDER_ELEMENT)
+					.run()
+			}
 			editor.value
 				?.chain()
 				.focus()
 				.setImage({src: url})
 				.run()
 		})
+		
+		const html = editor.value?.getHTML().replace(UPLOAD_PLACEHOLDER_ELEMENT, '') ?? ''
+		
+		editor.value?.commands.setContent(html, false)
+		
 		bubbleSave()
 	})
 }