From 7d22f32443ce9ae51db79283d6cfae2ebe46f042 Mon Sep 17 00:00:00 2001
From: SP12893678 <36910625+SP12893678@users.noreply.github.com>
Date: Thu, 8 Aug 2024 19:28:46 +0800
Subject: [PATCH] Fix block editor value updates to be realtime (#23115)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hannes Küttner <kuettner.hannes@gmail.com>
---
 .changeset/little-parents-shake.md              |  5 +++++
 .../input-block-editor/input-block-editor.vue   | 17 ++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/little-parents-shake.md

diff --git a/.changeset/little-parents-shake.md b/.changeset/little-parents-shake.md
new file mode 100644
index 0000000000..b37ac27552
--- /dev/null
+++ b/.changeset/little-parents-shake.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Removed update delay in the block editor interface
diff --git a/app/src/interfaces/input-block-editor/input-block-editor.vue b/app/src/interfaces/input-block-editor/input-block-editor.vue
index 8833cdfdea..ff6d2aa846 100644
--- a/app/src/interfaces/input-block-editor/input-block-editor.vue
+++ b/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 {