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

Fix focus behavior in SQL editor

Browse source
This commit is contained in:
Elias Meire 2024-11-08 11:35:59 +01:00
parent 57467d0285
commit 1a990a70fa
No known key found for this signature in database
1 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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>