diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue index c6ed0e1e44..6b33cce6f3 100644 --- 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(); 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 index 35ceb88bde..958946d2ad 100644 --- 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 index f1d9316491..46e8e284d8 100644 --- 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; }, },