Fix block editor value updates to be realtime (#23115)

Co-authored-by: Hannes Küttner <kuettner.hannes@gmail.com>

.changeset/little-parents-shake.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Removed update delay in the block editor interface

app/src/interfaces/input-block-editor/input-block-editor.vue

@@ -6,10 +6,13 @@ import EditorJS from '@editorjs/editorjs';
 import { cloneDeep, isEqual } from 'lodash';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useBus } from './bus';
 import getTools from './tools';
 import { useFileHandler } from './use-file-handler';
-import { useBus } from './bus';
-import { useRouter } from 'vue-router';
+
+// https://github.com/codex-team/editor.js/blob/057bf17a6fc2d5e05c662107918d7c3e943d077c/src/components/events/RedactorDomChanged.ts#L4
+const RedactorDomChanged = 'redactor dom changed';
 
 const props = withDefaults(
 	defineProps<{
@@ -78,7 +81,6 @@ onMounted(async () => {
 	});
 
 	await editorjsRef.value.isReady;
-	editorjsIsReady.value = true;
 
 	const sanitizedValue = sanitizeValue(props.value);
 
@@ -89,11 +91,16 @@ onMounted(async () => {
 	if (props.autofocus) {
 		editorjsRef.value.focus();
 	}
+
+	editorjsRef.value.on(RedactorDomChanged, () => {
+		emitValue(editorjsRef.value!);
+	});
+
+	editorjsIsReady.value = true;
 });
 
 onUnmounted(() => {
 	editorjsRef.value?.destroy();
-
 	bus.reset();
 });
 
@@ -124,7 +131,7 @@ watch(
 	},
 );
 
-async function emitValue(context: EditorJS.API) {
+async function emitValue(context: EditorJS.API | EditorJS) {
 	if (props.disabled || !context || !context.saver) return;
 
 	try {