fix(editor): Indent on tabs in expression fields (#9659)

n8n-io · Jun 7, 2024 · bb7227d · bb7227d
1 parent ebba7c8
commit bb7227d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -49,7 +49,7 @@ const ndvStore = useNDVStore();
 const root = ref<HTMLElement>();
 const extensions = computed(() => [
 	Prec.highest(
-		keymap.of([...tabKeyMap(true), ...enterKeyMap, ...autocompleteKeyMap, ...historyKeyMap]),
+		keymap.of([...tabKeyMap(false), ...enterKeyMap, ...autocompleteKeyMap, ...historyKeyMap]),
 	),
 	n8nLang(),
 	n8nAutocompletion(),

diff --git a/packages/editor-ui/src/composables/__tests__/useExpressionEditor.test.ts b/packages/editor-ui/src/composables/__tests__/useExpressionEditor.test.ts
@@ -1,5 +1,5 @@
 import * as workflowHelpers from '@/composables/useWorkflowHelpers';
-import { EditorView } from '@codemirror/view';
+import { EditorView, keymap } from '@codemirror/view';
 import { createTestingPinia } from '@pinia/testing';
 import { waitFor, fireEvent } from '@testing-library/vue';
 import { setActivePinia } from 'pinia';
@@ -11,6 +11,7 @@ import { useRouter } from 'vue-router';
 import { EditorSelection } from '@codemirror/state';
 import userEvent from '@testing-library/user-event';
 import { renderComponent } from '@/__tests__/render';
+import { tabKeyMap } from '@/plugins/codemirror/keymap';
 
 vi.mock('@/composables/useAutocompleteTelemetry', () => ({
 	useAutocompleteTelemetry: vi.fn(),
@@ -254,4 +255,32 @@ describe('useExpressionEditor', () => {
 			expect(expressionEditor.editor.value?.hasFocus).toBe(true);
 		});
 	});
+
+	describe('keymap', () => {
+		const TEST_EDITOR_VALUE = '{{ { "foo": "bar" } }}';
+
+		test('should indent on tab if blurOnTab is false', async () => {
+			const { renderResult, expressionEditor } = await renderExpressionEditor({
+				editorValue: TEST_EDITOR_VALUE,
+				extensions: [keymap.of([...tabKeyMap(false)])],
+			});
+			const root = renderResult.getByTestId('editor-root');
+			const input = root.querySelector('.cm-line') as HTMLDivElement;
+
+			await userEvent.type(input, '{tab}');
+			expect(expressionEditor.editor.value?.state.doc.toString()).toEqual(`  ${TEST_EDITOR_VALUE}`);
+		});
+
+		test('should NOT indent on tab if blurOnTab is true', async () => {
+			const { renderResult, expressionEditor } = await renderExpressionEditor({
+				editorValue: TEST_EDITOR_VALUE,
+				extensions: [keymap.of([...tabKeyMap(true)])],
+			});
+			const root = renderResult.getByTestId('editor-root');
+			const input = root.querySelector('.cm-line') as HTMLDivElement;
+
+			await userEvent.type(input, '{tab}');
+			expect(expressionEditor.editor.value?.state.doc.toString()).toEqual(TEST_EDITOR_VALUE);
+		});
+	});
 });
diff --git a/packages/editor-ui/src/plugins/codemirror/keymap.ts b/packages/editor-ui/src/plugins/codemirror/keymap.ts
@@ -7,7 +7,7 @@ import {
 import { indentLess, indentMore, insertNewlineAndIndent, redo, undo } from '@codemirror/commands';
 import type { EditorView, KeyBinding } from '@codemirror/view';
 
-export const tabKeyMap = (singleLine = false): KeyBinding[] => [
+export const tabKeyMap = (blurOnTab = false): KeyBinding[] => [
 	{
 		any(view, event) {
 			if (
@@ -27,7 +27,7 @@ export const tabKeyMap = (singleLine = false): KeyBinding[] => [
 				return acceptCompletion(view);
 			}
 
-			if (!singleLine) return indentMore(view);
+			if (!blurOnTab) return indentMore(view);
 			return false;
 		},
 	},