mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Milorad FIlipović 2024-06-07 15:30:26 +02:00 committed by GitHub
parent ebba7c87cd
commit bb7227d18d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
View file

@ -49,7 +49,7 @@ const ndvStore = useNDVStore();
const root = ref<HTMLElement>(); const root = ref<HTMLElement>();
const extensions = computed(() => [ const extensions = computed(() => [
Prec.highest( Prec.highest(
keymap.of([...tabKeyMap(true), ...enterKeyMap, ...autocompleteKeyMap, ...historyKeyMap]), keymap.of([...tabKeyMap(false), ...enterKeyMap, ...autocompleteKeyMap, ...historyKeyMap]),
), ),
n8nLang(), n8nLang(),
n8nAutocompletion(), n8nAutocompletion(),

31
packages/editor-ui/src/composables/__tests__/useExpressionEditor.test.ts
View file

@ -1,5 +1,5 @@
import * as workflowHelpers from '@/composables/useWorkflowHelpers'; import * as workflowHelpers from '@/composables/useWorkflowHelpers';
import { EditorView } from '@codemirror/view'; import { EditorView, keymap } from '@codemirror/view';
import { createTestingPinia } from '@pinia/testing'; import { createTestingPinia } from '@pinia/testing';
import { waitFor, fireEvent } from '@testing-library/vue'; import { waitFor, fireEvent } from '@testing-library/vue';
import { setActivePinia } from 'pinia'; import { setActivePinia } from 'pinia';
@ -11,6 +11,7 @@ import { useRouter } from 'vue-router';
import { EditorSelection } from '@codemirror/state'; import { EditorSelection } from '@codemirror/state';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import { renderComponent } from '@/__tests__/render'; import { renderComponent } from '@/__tests__/render';
import { tabKeyMap } from '@/plugins/codemirror/keymap';
vi.mock('@/composables/useAutocompleteTelemetry', () => ({ vi.mock('@/composables/useAutocompleteTelemetry', () => ({
useAutocompleteTelemetry: vi.fn(), useAutocompleteTelemetry: vi.fn(),
@ -254,4 +255,32 @@ describe('useExpressionEditor', () => {
expect(expressionEditor.editor.value?.hasFocus).toBe(true); 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);
});
});
}); });

4
packages/editor-ui/src/plugins/codemirror/keymap.ts vendored
View file

@ -7,7 +7,7 @@ import {
import { indentLess, indentMore, insertNewlineAndIndent, redo, undo } from '@codemirror/commands'; import { indentLess, indentMore, insertNewlineAndIndent, redo, undo } from '@codemirror/commands';
import type { EditorView, KeyBinding } from '@codemirror/view'; import type { EditorView, KeyBinding } from '@codemirror/view';
export const tabKeyMap = (singleLine = false): KeyBinding[] => [ export const tabKeyMap = (blurOnTab = false): KeyBinding[] => [
{ {
any(view, event) { any(view, event) {
if ( if (
@ -27,7 +27,7 @@ export const tabKeyMap = (singleLine = false): KeyBinding[] => [
return acceptCompletion(view); return acceptCompletion(view);
} }
if (!singleLine) return indentMore(view); if (!blurOnTab) return indentMore(view);
return false; return false;
}, },
}, },