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 {