1 files changed, 17 insertions, 8 deletions
diff --git a/packages/frontend/src/components/MkTextarea.vue b/packages/frontend/src/components/MkTextarea.vue
index 407ac33add..fe4f7b7aaf 100644
--- a/packages/frontend/src/components/MkTextarea.vue
+++ b/packages/frontend/src/components/MkTextarea.vue
@@ -63,10 +63,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'change', _ev: KeyboardEvent): void;
+	(ev: 'change', _ev: InputEvent): void;
 	(ev: 'keydown', _ev: KeyboardEvent): void;
 	(ev: 'enter'): void;
 	(ev: 'update:modelValue', value: string): void;
+	(ev: 'savingStateChange', saved: boolean, invalid: boolean): void;
 }>();
 
 const { modelValue, autofocus } = toRefs(props);
@@ -79,12 +80,16 @@ const inputEl = useTemplateRef('inputEl');
 const preview = ref(false);
 let autocompleteWorker: Autocomplete | null = null;
 
-const focus = () => inputEl.value?.focus();
-const onInput = (ev) => {
+function focus() {
+	inputEl.value?.focus();
+}
+
+function onInput(ev: InputEvent) {
 	changed.value = true;
 	emit('change', ev);
-};
-const onKeydown = (ev: KeyboardEvent) => {
+}
+
+function onKeydown(ev: KeyboardEvent) {
 	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
 
 	emit('keydown', ev);
@@ -102,12 +107,12 @@ const onKeydown = (ev: KeyboardEvent) => {
 		});
 		ev.preventDefault();
 	}
-};
+}
 
-const updated = () => {
+function updated() {
 	changed.value = false;
 	emit('update:modelValue', v.value ?? '');
-};
+}
 
 const debouncedUpdated = debounce(1000, updated);
 
@@ -127,6 +132,10 @@ watch(v, () => {
 	invalid.value = inputEl.value?.validity.badInput ?? true;
 });
 
+watch([changed, invalid], ([newChanged, newInvalid]) => {
+	emit('savingStateChange', newChanged, newInvalid);
+}, { immediate: true });
+
 onMounted(() => {
 	nextTick(() => {
 		if (autofocus.value) {