mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-14 00:24:07 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(editor): Fix hiding SQL query output when trying to select (#11649)

Browse source
This commit is contained in:
Elias Meire 2024-11-11 18:14:53 +01:00 committed by GitHub
parent 4c41575098
commit 4dbf2f4256
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/editor-ui/src/components/SQLEditor.test.ts
View file

@ -25,6 +25,7 @@ async function focusEditor(container: Element) {
await waitFor(() => expect(container.querySelector('.cm-line')).toBeInTheDocument());
await userEvent.click(container.querySelector('.cm-line') as Element);
}
const nodes = [
{
id: '1',
@ -172,4 +173,23 @@ describe('SqlEditor.vue', () => {
getByTestId(EXPRESSION_OUTPUT_TEST_ID).getElementsByClassName('cm-line').length,
);
});
it('should keep rendered output visible when clicking', async () => {
const { getByTestId, queryByTestId, container, baseElement } = renderComponent(SqlEditor, {
...DEFAULT_SETUP,
props: {
...DEFAULT_SETUP.props,
modelValue: 'SELECT * FROM users',
},
});
// Does not hide output when clicking inside the output
await focusEditor(container);
await userEvent.click(getByTestId(EXPRESSION_OUTPUT_TEST_ID));
await waitFor(() => expect(queryByTestId(EXPRESSION_OUTPUT_TEST_ID)).toBeInTheDocument());
// Does hide output when clicking outside the container
await userEvent.click(baseElement);
await waitFor(() => expect(queryByTestId(EXPRESSION_OUTPUT_TEST_ID)).not.toBeInTheDocument());
});
});

31
packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
View file

@ -37,6 +37,7 @@ import {
import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
import { dropInExpressionEditor, mappingDropCursor } from '@/plugins/codemirror/dragAndDrop';
import { onClickOutside } from '@vueuse/core';
const SQL_DIALECTS = {
StandardSQL,
@ -68,7 +69,10 @@ const emit = defineEmits<{
'update:model-value': [value: string];
}>();
const sqlEditor = ref<HTMLElement>();
const container = ref<HTMLDivElement>();
const sqlEditor = ref<HTMLDivElement>();
const isFocused = ref(false);
const extensions = computed(() => {
const dialect = SQL_DIALECTS[props.dialect] ?? SQL_DIALECTS.StandardSQL;
function sqlWithN8nLanguageSupport() {
@ -122,7 +126,7 @@ const {
editor,
segments: { all: segments },
readEditorValue,
hasFocus,
hasFocus: editorHasFocus,
} = useExpressionEditor({
editorRef: sqlEditor,
editorValue,
@ -138,6 +142,12 @@ watch(
},
);
watch(editorHasFocus, (focus) => {
if (focus) {
isFocused.value = true;
}
});
watch(segments, () => {
emit('update:model-value', readEditorValue());
});
@ -154,6 +164,19 @@ onBeforeUnmount(() => {
codeNodeEditorEventBus.off('highlightLine', highlightLine);
});
onClickOutside(container, (event) => onBlur(event));
function onBlur(event: FocusEvent | KeyboardEvent) {
if (
event?.target instanceof Element &&
Array.from(event.target.classList).some((_class) => _class.includes('resizer'))
) {
return; // prevent blur on resizing
}
isFocused.value = false;
}
function line(lineNumber: number): Line | null {
try {
return editor.value?.state.doc.line(lineNumber) ?? null;
@ -189,7 +212,7 @@ async function onDrop(value: string, event: MouseEvent) {
</script>
<template>
<div :class="$style.sqlEditor">
<div ref="container" :class="$style.sqlEditor" @keydown.tab="onBlur">
<DraggableTarget type="mapping" :disabled="isReadOnly" @drop="onDrop">
<template #default="{ activeDrop, droppable }">
<div
@ -207,7 +230,7 @@ async function onDrop(value: string, event: MouseEvent) {
v-if="!fullscreen"
:segments="segments"
:is-read-only="isReadOnly"
:visible="hasFocus"
:visible="isFocused"
/>
</div>
</template>