fix(editor): Fix JsonEditor with expressions (#12739)

n8n-io · Jan 21, 2025 · 56c93ca · 56c93ca
1 parent 9e2a01a
commit 56c93ca
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/packages/editor-ui/src/components/JsonEditor.test.ts b/packages/editor-ui/src/components/JsonEditor.test.ts
@@ -1,6 +1,8 @@
 import { createTestingPinia } from '@pinia/testing';
 import JsonEditor from '@/components/JsonEditor/JsonEditor.vue';
 import { renderComponent } from '@/__tests__/render';
+import { waitFor } from '@testing-library/vue';
+import { userEvent } from '@testing-library/user-event';
 
 describe('JsonEditor', () => {
 	const renderEditor = (jsonString: string) =>
@@ -13,18 +15,29 @@ describe('JsonEditor', () => {
 
 	it('renders simple json', async () => {
 		const modelValue = '{ "testing": [true, 5] }';
-		const result = renderEditor(modelValue);
-		expect(result.container.querySelector('.cm-content')?.textContent).toEqual(modelValue);
+		const { getByRole } = renderEditor(modelValue);
+		expect(getByRole('textbox').textContent).toEqual(modelValue);
 	});
 
 	it('renders multiline json', async () => {
 		const modelValue = '{\n\t"testing": [true, 5]\n}';
-		const result = renderEditor(modelValue);
-		const gutter = result.container.querySelector('.cm-gutters');
+		const { getByRole, container } = renderEditor(modelValue);
+		const gutter = container.querySelector('.cm-gutters');
 		expect(gutter?.querySelectorAll('.cm-lineNumbers .cm-gutterElement').length).toEqual(4);
 
-		const content = result.container.querySelector('.cm-content');
-		const lines = [...content!.querySelectorAll('.cm-line').values()].map((l) => l.textContent);
+		const content = getByRole('textbox');
+		const lines = [...content.querySelectorAll('.cm-line').values()].map((l) => l.textContent);
 		expect(lines).toEqual(['{', '\t"testing": [true, 5]', '}']);
 	});
+
+	it('emits update:model-value events', async () => {
+		const modelValue = '{ "test": 1 }';
+
+		const { emitted, getByRole } = renderEditor(modelValue);
+
+		const textbox = await waitFor(() => getByRole('textbox'));
+		await userEvent.type(textbox, 'test');
+
+		await waitFor(() => expect(emitted('update:modelValue')).toContainEqual(['test{ "test": 1 }']));
+	});
 });
diff --git a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
@@ -36,7 +36,6 @@ const emit = defineEmits<{
 const jsonEditorRef = ref<HTMLDivElement>();
 const editor = ref<EditorView | null>(null);
 const editorState = ref<EditorState | null>(null);
-const isDirty = ref(false);
 
 const extensions = computed(() => {
 	const extensionsToApply: Extension[] = [
@@ -66,7 +65,6 @@ const extensions = computed(() => {
 			bracketMatching(),
 			mappingDropCursor(),
 			EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
-				isDirty.value = true;
 				if (!viewUpdate.docChanged || !editor.value) return;
 				emit('update:modelValue', editor.value?.state.doc.toString());
 			}),
@@ -81,7 +79,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
 	if (!editor.value) return;
-	if (isDirty.value) emit('update:modelValue', editor.value.state.doc.toString());
 	editor.value.destroy();
 });