admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +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

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);
});