From 9b20dc1899f8ea24b93efc54deadcab548f88820 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Oct 2023 18:40:30 +0200
Subject: [PATCH] feat(editor): properly bubble changes when they are made

---
 src/components/input/editor.vue        | 38 -------------------
 src/components/input/editor/TipTap.vue | 51 ++++++++++++++++++++++----
 src/components/input/editor/types.ts   |  5 +++
 3 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index e4fe87a0c..c2a01b91a 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -25,44 +25,6 @@
 			</template>
 		</p>
 
-		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
-			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<BaseButton
-					v-if="showEditButton"
-					@click="toggleEdit"
-					v-shortcut="editShortcut">
-					{{ $t('input.editor.edit') }}
-				</BaseButton>
-				<BaseButton
-					v-else-if="isEditActive"
-					@click="bubbleSaveClick"
-					class="done-edit">
-					{{ $t('misc.save') }}
-				</BaseButton>
-			</li>
-			<li v-for="(action, k) in bottomActions" :key="k">
-				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
-			</li>
-		</ul>
-		<template v-else-if="isEditEnabled && showSave">
-			<ul v-if="showEditButton" class="actions d-print-none">
-				<li>
-					<BaseButton
-						@click="toggleEdit"
-						v-shortcut="editShortcut">
-						{{ $t('input.editor.edit') }}
-					</BaseButton>
-				</li>
-			</ul>
-			<x-button
-				v-else-if="isEditActive"
-				@click="bubbleSaveClick"
-				variant="secondary"
-				:shadow="false"
-				v-cy="'saveEditor'">
-				{{ $t('misc.save') }}
-			</x-button>
-		</template>
 	</div>
 </template>
 
diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue
index 234a7759d..1bcbda36a 100644
--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@@ -70,6 +70,29 @@
 			ref="uploadInputRef"
 			@change="addImage"
 		/>
+
+		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
+			<li v-if="isEditEnabled && showSave">
+				<BaseButton
+					@click="bubbleSave"
+					class="done-edit">
+					{{ $t('misc.save') }}
+				</BaseButton>
+			</li>
+			<li v-for="(action, k) in bottomActions" :key="k">
+				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
+			</li>
+		</ul>
+		<x-button
+			v-else-if="isEditEnabled && showSave"
+			class="mt-4"
+			@click="bubbleSave"
+			variant="secondary"
+			:shadow="false"
+			v-cy="'saveEditor'"
+		>
+			{{ $t('misc.save') }}
+		</x-button>
 	</div>
 </template>
 
@@ -109,13 +132,14 @@ import suggestionSetup from './suggestion'
 // load all highlight.js languages
 import {lowlight} from 'lowlight'
 
-import type {UploadCallback} from './types'
+import type {BottomAction, UploadCallback} from './types'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import AttachmentModel from '@/models/attachment'
 import AttachmentService from '@/services/attachment'
 import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
+import XButton from '@/components/input/button.vue'
 
 const {t} = useI18n()
 
@@ -140,15 +164,22 @@ const CustomTableCell = TableCell.extend({
 	},
 })
 
+
 const {
 	modelValue,
 	uploadCallback,
+	isEditEnabled = true,
+	bottomActions = [],
+	showSave = false,
 } = defineProps<{
 	modelValue: string,
 	uploadCallback?: UploadCallback,
+	isEditEnabled?: boolean,
+	bottomActions?: BottomAction[],
+	showSave?: boolean,
 }>()
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue', 'save'])
 
 const inputHTML = ref('')
 watch(
@@ -172,7 +203,7 @@ watch(
 )
 
 function onImageAdded() {
-	bubbleChanges()
+	bubbleSave()
 	loadImages()
 }
 
@@ -211,11 +242,15 @@ function loadImages() {
 
 const debouncedInputHTML = refDebounced(inputHTML, 1000)
 
-watch(debouncedInputHTML, () => bubbleChanges())
+watch(debouncedInputHTML, () => bubbleNow())
 
-function bubbleChanges() {
+function bubbleNow() {
 	emit('update:modelValue', TIPTAP_TEXT_VALUE_PREFIX + inputHTML.value)
-	emit('change', TIPTAP_TEXT_VALUE_PREFIX + inputHTML.value) // FIXME: remove this
+}
+
+function bubbleSave() {
+	bubbleNow()
+	emit('save', TIPTAP_TEXT_VALUE_PREFIX + inputHTML.value)
 }
 
 const editor = useEditor({
@@ -302,9 +337,9 @@ function addImage() {
 		if (!files || files.length === 0) {
 			return
 		}
-		
+
 		uploadAndInsertFiles(files)
-		
+
 		return
 	}
 
diff --git a/src/components/input/editor/types.ts b/src/components/input/editor/types.ts
index 93429b72c..d9435897b 100644
--- a/src/components/input/editor/types.ts
+++ b/src/components/input/editor/types.ts
@@ -1 +1,6 @@
 export type UploadCallback = (files: File[] | FileList) => Promise<string[]>
+
+export interface BottomAction {
+    title: string
+    action: Function
+}