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

feat(editor): New Code editor based on the TypeScript language service (#12285)

Browse Source
This commit is contained in:
Elias Meire
2025-01-08 11:28:56 +01:00
committed by GitHub
parent ac497c8a67
commit 52ae02abaa
58 changed files with 2861 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,14 @@
<script setup lang="ts">
import InlineExpressionEditorOutput from '@/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue';
import { codeNodeEditorEventBus } from '@/event-bus';
import { useExpressionEditor } from '@/composables/useExpressionEditor';
import { codeNodeEditorEventBus } from '@/event-bus';
import { n8nCompletionSources } from '@/plugins/codemirror/completions/addCompletions';
import { dropInExpressionEditor, mappingDropCursor } from '@/plugins/codemirror/dragAndDrop';
import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
import {
autocompleteKeyMap,
enterKeyMap,
historyKeyMap,
tabKeyMap,
} from '@/plugins/codemirror/keymap';
import { editorKeymap } from '@/plugins/codemirror/keymap';
import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
import { ifNotIn } from '@codemirror/autocomplete';
import { history, toggleComment } from '@codemirror/commands';
import { history } from '@codemirror/commands';
import { LanguageSupport, bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
import { Prec, type Line } from '@codemirror/state';
import {
@@ -34,10 +30,9 @@ import {
StandardSQL,
keywordCompletionSource,
} from '@n8n/codemirror-lang-sql';
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';
import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
import { codeEditorTheme } from '../CodeNodeEditor/theme';
const SQL_DIALECTS = {
StandardSQL,
@@ -87,7 +82,7 @@ const extensions = computed(() => {
const baseExtensions = [
sqlWithN8nLanguageSupport(),
expressionInputHandler(),
codeNodeEditorTheme({
codeEditorTheme({
isReadOnly: props.isReadOnly,
maxHeight: props.fullscreen ? '100%' : '40vh',
minHeight: '10vh',
@@ -100,15 +95,7 @@ const extensions = computed(() => {
if (!props.isReadOnly) {
return baseExtensions.concat([
history(),
Prec.highest(
keymap.of([
...tabKeyMap(),
...enterKeyMap,
...historyKeyMap,
...autocompleteKeyMap,
{ key: 'Mod-/', run: toggleComment },
]),
),
Prec.highest(keymap.of(editorKeymap)),
n8nAutocompletion(),
indentOnInput(),
highlightActiveLine(),
@@ -185,10 +172,10 @@ function line(lineNumber: number): Line | null {
}
}
function highlightLine(lineNumber: number | 'final') {
function highlightLine(lineNumber: number | 'last') {
if (!editor.value) return;
if (lineNumber === 'final') {
if (lineNumber === 'last') {
editor.value.dispatch({
selection: { anchor: editor.value.state.doc.length },
});