fix: bubble changes from the editor immediately and move the delay to callers

This gives the callers more control over when to save data and show/hide additional controls based on the input text

src/components/input/editor.vue

@@ -4,7 +4,7 @@
 
 		<vue-easymde
 			:configs="config"
-			@change="() => bubble()"
+			@change="() => bubbleNow()"
 			@update:modelValue="handleInput"
 			class="content"
 			v-if="isEditActive"
@@ -35,7 +35,7 @@
 				</BaseButton>
 				<BaseButton
 					v-else-if="isEditActive"
-					@click="toggleEdit"
+					@click="bubbleSaveClick"
 					class="done-edit">
 					{{ $t('misc.save') }}
 				</BaseButton>
@@ -56,7 +56,7 @@
 			</ul>
 			<x-button
 				v-else-if="isEditActive"
-				@click="toggleEdit"
+				@click="bubbleSaveClick"
 				variant="secondary"
 				:shadow="false"
 				v-cy="'saveEditor'">
@@ -134,10 +134,9 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'save'])
 
 const text = ref('')
-const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const isEditActive = ref(false)
 const isPreviewActive = ref(true)
 
@@ -175,7 +174,7 @@ watch(
 		if (oldVal === '' && text.value === modelValue.value) {
 			return
 		}
-		bubble()
+		bubbleNow()
 	},
 )
 
@@ -208,17 +207,11 @@ function handleInput(val: string) {
 	}
 
 	text.value = val
-	bubble(1000)
+	bubbleNow()
 }
 
-function bubble(timeout = 5000) {
-	if (changeTimeout.value !== null) {
-		clearTimeout(changeTimeout.value)
-	}
-
-	changeTimeout.value = setTimeout(() => {
+function bubbleNow() {
 	emit('update:modelValue', text.value)
-	}, timeout)
 }
 
 function replaceAt(str: string, index: number, replacement: string) {
@@ -291,20 +284,22 @@ function handleCheckboxClick(e: Event) {
 	console.debug({index, projectPrefix, checked, text: text.value})
 
 	text.value = replaceAt(text.value, index, `${projectPrefix} ${checked ? '[x]' : '[ ]'} `)
-	bubble()
+	bubbleNow()
+	emit('save', text.value)
 	renderPreview()
 }
 
 function toggleEdit() {
-	if (isEditActive.value) {
-		isPreviewActive.value = true
-		isEditActive.value = false
-		renderPreview()
-		bubble(0) // save instantly
-	} else {
 	isPreviewActive.value = false
 	isEditActive.value = true
 }
+
+function bubbleSaveClick() {
+	isPreviewActive.value = true
+	isEditActive.value = false
+	renderPreview()
+	bubbleNow()
+	emit('save', text.value)
 }
 </script>
 

src/components/tasks/partials/comments.vue

@@ -74,9 +74,13 @@
 						@update:model-value="
 							() => {
 								toggleEdit(c)
-								editComment()
+								editCommentWithDelay()
 							}
 						"
+						@save="() => {
+							toggleEdit(c)
+							editComment()
+						}"
 						:bottom-actions="actions[c.id]"
 						:show-save="true"
 					/>
@@ -279,11 +283,27 @@ function toggleDelete(commentId: ITaskComment['id']) {
 	commentToDelete.id = commentId
 }
 
+const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+
+async function editCommentWithDelay() {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+
+	changeTimeout.value = setTimeout(async () => {
+		await editComment()
+	}, 5000)
+}
+
 async function editComment() {
 	if (commentEdit.comment === '') {
 		return
 	}
 	
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+
 	saving.value = commentEdit.id
 
 	commentEdit.taskId = props.taskId

src/components/tasks/partials/description.vue

@@ -25,7 +25,8 @@
 			:show-save="true"
 			edit-shortcut="e"
 			v-model="task.description"
-			@update:model-value="save"
+			@update:model-value="saveWithDelay"
+			@save="save"
 		/>
 	</div>
 </template>
@@ -40,7 +41,6 @@ import type {ITask} from '@/modelTypes/ITask'
 import {useTaskStore} from '@/stores/tasks'
 import TaskModel from '@/models/task'
 
-
 const props = defineProps({
 	modelValue: {
 		type: Object as PropType<ITask>,
@@ -74,7 +74,23 @@ watch(
 	{immediate: true},
 )
 
+const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+
+async function saveWithDelay() {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+
+	changeTimeout.value = setTimeout(async () => {
+		await save()
+	}, 5000)
+}
+
 async function save() {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+
 	saving.value = true
 
 	try {