admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 18:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Fix switching between connected SQL/HTML editors (#15297)

Browse Source
This commit is contained in:
Elias Meire
2025-05-13 19:21:46 +02:00
committed by GitHub
parent 102c67628c
commit bb2cfc209c
6 changed files with 109 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/frontend/editor-ui/src/components/CssEditor/CssEditor.vue
View File

@@ -10,18 +10,18 @@ import {
keymap,
lineNumbers,
} from '@codemirror/view';
import { computed, onMounted, ref, toRaw, watch } from 'vue';
import { computed, ref, toRaw } from 'vue';
import { useExpressionEditor } from '@/composables/useExpressionEditor';
import { n8nCompletionSources } from '@/plugins/codemirror/completions/addCompletions';
import { editorKeymap } from '@/plugins/codemirror/keymap';
import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
import { codeEditorTheme } from '../CodeNodeEditor/theme';
import { dropInExpressionEditor, mappingDropCursor } from '@/plugins/codemirror/dragAndDrop';
import {
expressionCloseBrackets,
expressionCloseBracketsConfig,
} from '@/plugins/codemirror/expressionCloseBrackets';
import { editorKeymap } from '@/plugins/codemirror/keymap';
import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
import { codeEditorTheme } from '../CodeNodeEditor/theme';
type Props = {
modelValue: string;
@@ -69,23 +69,13 @@ const extensions = computed(() => [
mappingDropCursor(),
]);
const {
editor: editorRef,
segments,
readEditorValue,
isDirty,
} = useExpressionEditor({
const { editor: editorRef, readEditorValue } = useExpressionEditor({
editorRef: cssEditor,
editorValue,
extensions,
});
watch(segments.display, () => {
emit('update:model-value', readEditorValue());
});
onMounted(() => {
if (isDirty.value) emit('update:model-value', readEditorValue());
onChange: () => {
emit('update:model-value', readEditorValue());
},
});
async function onDrop(value: string, event: MouseEvent) {

30
packages/frontend/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
View File

@@ -20,22 +20,22 @@ import jsParser from 'prettier/plugins/babel';
import * as estree from 'prettier/plugins/estree';
import htmlParser from 'prettier/plugins/html';
import cssParser from 'prettier/plugins/postcss';
import { computed, onBeforeUnmount, onMounted, ref, toRaw, toValue, watch } from 'vue';
import { computed, onBeforeUnmount, onMounted, ref, toRaw, toValue } from 'vue';
import { useExpressionEditor } from '@/composables/useExpressionEditor';
import { htmlEditorEventBus } from '@/event-bus';
import { n8nCompletionSources } from '@/plugins/codemirror/completions/addCompletions';
import { dropInExpressionEditor, mappingDropCursor } from '@/plugins/codemirror/dragAndDrop';
import {
expressionCloseBrackets,
expressionCloseBracketsConfig,
} from '@/plugins/codemirror/expressionCloseBrackets';
import { editorKeymap } from '@/plugins/codemirror/keymap';
import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
import { autoCloseTags, htmlLanguage } from 'codemirror-lang-html-n8n';
import { codeEditorTheme } from '../CodeNodeEditor/theme';
import type { Range, Section } from './types';
import { nonTakenRanges } from './utils';
import { dropInExpressionEditor, mappingDropCursor } from '@/plugins/codemirror/dragAndDrop';
import {
expressionCloseBrackets,
expressionCloseBracketsConfig,
} from '@/plugins/codemirror/expressionCloseBrackets';
type Props = {
modelValue: string;
@@ -55,7 +55,6 @@ const emit = defineEmits<{
}>();
const htmlEditor = ref<HTMLElement>();
const editorValue = ref<string>(props.modelValue);
const extensions = computed(() => [
bracketMatching(),
n8nAutocompletion(),
@@ -82,15 +81,13 @@ const extensions = computed(() => [
highlightActiveLine(),
mappingDropCursor(),
]);
const {
editor: editorRef,
segments,
readEditorValue,
isDirty,
} = useExpressionEditor({
const { editor: editorRef, readEditorValue } = useExpressionEditor({
editorRef: htmlEditor,
editorValue,
editorValue: () => props.modelValue,
extensions,
onChange: () => {
emit('update:model-value', readEditorValue());
},
});
const sections = computed(() => {
@@ -225,16 +222,11 @@ async function formatHtml() {
});
}
watch(segments.display, () => {
emit('update:model-value', readEditorValue());
});
onMounted(() => {
htmlEditorEventBus.on('format-html', formatHtml);
});
onBeforeUnmount(() => {
if (isDirty.value) emit('update:model-value', readEditorValue());
htmlEditorEventBus.off('format-html', formatHtml);
});

19
packages/frontend/editor-ui/src/components/SqlEditor/SqlEditor.vue
View File

@@ -112,27 +112,21 @@ const extensions = computed(() => {
}
return baseExtensions;
});
const editorValue = ref(props.modelValue);
const {
editor,
segments: { all: segments },
readEditorValue,
hasFocus: editorHasFocus,
isDirty,
} = useExpressionEditor({
editorRef: sqlEditor,
editorValue,
editorValue: () => props.modelValue,
extensions,
skipSegments: ['Statement', 'CompositeIdentifier', 'Parens', 'Brackets'],
isReadOnly: props.isReadOnly,
});
watch(
() => props.modelValue,
(newValue) => {
editorValue.value = newValue;
onChange: () => {
emit('update:model-value', readEditorValue());
},
);
});
watch(editorHasFocus, (focus) => {
if (focus) {
@@ -140,10 +134,6 @@ watch(editorHasFocus, (focus) => {
}
});
watch(segments, () => {
emit('update:model-value', readEditorValue());
});
onMounted(() => {
codeNodeEditorEventBus.on('highlightLine', highlightLine);
@@ -153,7 +143,6 @@ onMounted(() => {
});
onBeforeUnmount(() => {
if (isDirty.value) emit('update:model-value', readEditorValue());
codeNodeEditorEventBus.off('highlightLine', highlightLine);
});

22
packages/frontend/editor-ui/src/composables/useExpressionEditor.ts
View File

@@ -38,6 +38,7 @@ import { useRouter } from 'vue-router';
import { useI18n } from '../composables/useI18n';
import { useWorkflowsStore } from '../stores/workflows.store';
import { useAutocompleteTelemetry } from './useAutocompleteTelemetry';
import { ignoreUpdateAnnotation } from '../utils/forceParse';
export const useExpressionEditor = ({
editorRef,
@@ -47,6 +48,7 @@ export const useExpressionEditor = ({
skipSegments = [],
autocompleteTelemetry,
isReadOnly = false,
onChange = () => {},
}: {
editorRef: MaybeRefOrGetter<HTMLElement | undefined>;
editorValue?: MaybeRefOrGetter<string>;
@@ -55,6 +57,7 @@ export const useExpressionEditor = ({
skipSegments?: MaybeRefOrGetter<string[]>;
autocompleteTelemetry?: MaybeRefOrGetter<{ enabled: true; parameterPath: string }>;
isReadOnly?: MaybeRefOrGetter<boolean>;
onChange?: (viewUpdate: ViewUpdate) => void;
}) => {
const ndvStore = useNDVStore();
const workflowsStore = useWorkflowsStore();
@@ -70,7 +73,9 @@ export const useExpressionEditor = ({
const telemetryExtensions = ref<Compartment>(new Compartment());
const autocompleteStatus = ref<'pending' | 'active' | null>(null);
const dragging = ref(false);
const isDirty = ref(false);
const hasChanges = ref(false);
const emitChanges = debounce(onChange, 300);
const updateSegments = (): void => {
const state = editor.value?.state;
@@ -157,13 +162,18 @@ export const useExpressionEditor = ({
const debouncedUpdateSegments = debounce(updateSegments, 200);
function onEditorUpdate(viewUpdate: ViewUpdate) {
isDirty.value = true;
autocompleteStatus.value = completionStatus(viewUpdate.view.state);
updateSelection(viewUpdate);
if (!viewUpdate.docChanged) return;
const shouldIgnoreUpdate = viewUpdate.transactions.some((tr) =>
tr.annotation(ignoreUpdateAnnotation),
);
debouncedUpdateSegments();
if (viewUpdate.docChanged && !shouldIgnoreUpdate) {
hasChanges.value = true;
emitChanges(viewUpdate);
debouncedUpdateSegments();
}
}
function blur() {
@@ -265,6 +275,8 @@ export const useExpressionEditor = ({
onBeforeUnmount(() => {
document.removeEventListener('click', blurOnClickOutside);
debouncedUpdateSegments.flush();
emitChanges.flush();
editor.value?.destroy();
});
@@ -465,6 +477,6 @@ export const useExpressionEditor = ({
select,
selectAll,
focus,
isDirty,
hasChanges,
};
};