From 99c55241156095a81f1a01bddfd7a6897abac894 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 13 Mar 2024 16:59:57 +0100
Subject: [PATCH] fix(editor): don't allow image upload when it's not possible
 to do it

---
 .../components/input/editor/EditorToolbar.vue |  8 ++---
 .../src/components/input/editor/TipTap.vue    | 29 ++++++++++++++-----
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue
index c31bcfe35..9018f79dd 100644
--- a/frontend/src/components/input/editor/EditorToolbar.vue
+++ b/frontend/src/components/input/editor/EditorToolbar.vue
@@ -139,7 +139,7 @@
 			<BaseButton
 				v-tooltip="$t('input.editor.image')" 
 				class="editor-toolbar__button" 
-				@click="openImagePicker"
+				@click="e => emit('imageUploadClicked', e)"
 			>
 				<span class="icon">
 					<icon icon="fa-image" />
@@ -347,16 +347,14 @@ const {
 	editor: Editor,
 }>()
 
+const emit = defineEmits(['imageUploadClicked'])
+
 const tableMode = ref(false)
 
 function toggleTableMode() {
 	tableMode.value = !tableMode.value
 }
 
-function openImagePicker() {
-	document.getElementById('tiptap__image-upload').click()
-}
-
 function setLink(event) {
 	setLinkInEditor(event.target.getBoundingClientRect(), editor)
 }
diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index 1cc3c165d..0213546f6 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -6,7 +6,7 @@
 		<EditorToolbar
 			v-if="editor && isEditing"
 			:editor="editor"
-			:upload-callback="uploadCallback"
+			@imageUploadClicked="triggerImageInput"
 		/>
 		<BubbleMenu
 			v-if="editor && isEditing"
@@ -489,6 +489,15 @@ function uploadAndInsertFiles(files: File[] | FileList) {
 	})
 }
 
+function triggerImageInput(event) {
+	if (typeof uploadCallback !== 'undefined') {
+		uploadInputRef.value?.click()
+		return
+	}
+
+	addImage(event)
+}
+
 async function addImage(event) {
 
 	if (typeof uploadCallback !== 'undefined') {
@@ -522,16 +531,20 @@ onMounted(async () => {
 
 	await nextTick()
 
-	const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
-	input?.addEventListener('paste', handleImagePaste)
+	if (typeof uploadCallback !== 'undefined') {
+		const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
+		input?.addEventListener('paste', handleImagePaste)
+	}
 
 	setModeAndValue(modelValue)
 })
 
 onBeforeUnmount(() => {
 	nextTick(() => {
-		const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
-		input?.removeEventListener('paste', handleImagePaste)
+		if (typeof uploadCallback !== 'undefined') {
+			const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
+			input?.removeEventListener('paste', handleImagePaste)
+		}
 	})
 	if (editShortcut !== '') {
 		document.removeEventListener('keydown', setFocusToEditor)
@@ -558,10 +571,10 @@ function handleImagePaste(event) {
 
 // See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
 function setFocusToEditor(event) {
-	if(event.target.shadowRoot) {
+	if (event.target.shadowRoot) {
 		return
 	}
-	
+
 	const hotkeyString = eventToHotkeyString(event)
 	if (!hotkeyString) return
 	if (hotkeyString !== editShortcut ||
@@ -600,7 +613,7 @@ watch(
 	() => isEditing.value,
 	async editing => {
 		await nextTick()
-		
+
 		let checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]')
 		if (typeof checkboxes === 'undefined' || checkboxes.length === 0) {
 			// For some reason, this works when we check a second time.