refactor(editor): Replace monaco-editor/prismjs with CodeMirror (#5983)

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
Co-authored-by: Milorad FIlipović <milorad@n8n.io>
Co-authored-by: Alex Grozav <alex@grozav.com>

packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue

@@ -1,11 +1,11 @@
 <template>
 	<div
-		:class="$style['code-node-editor-container']"
+		:class="['code-node-editor', $style['code-node-editor-container']]"
 		@mouseover="onMouseOver"
 		@mouseout="onMouseOut"
 		ref="codeNodeEditorContainer"
 	>
-		<div ref="codeNodeEditor" class="ph-no-capture"></div>
+		<div ref="codeNodeEditor" class="code-node-editor-input ph-no-capture"></div>
 		<n8n-button
 			v-if="isCloud && (isEditorHovered || isEditorFocused)"
 			size="small"
@@ -19,40 +19,60 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
 
+import type { Extension } from '@codemirror/state';
 import { Compartment, EditorState } from '@codemirror/state';
 import type { ViewUpdate } from '@codemirror/view';
 import { EditorView } from '@codemirror/view';
 import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
 
-import { baseExtensions } from './baseExtensions';
+import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
 import { linterExtension } from './linter';
 import { completerExtension } from './completer';
-import { CODE_NODE_EDITOR_THEME } from './theme';
+import { codeNodeEditorTheme } from './theme';
 import { workflowHelpers } from '@/mixins/workflowHelpers'; // for json field completions
 import { ASK_AI_MODAL_KEY, CODE_NODE_TYPE } from '@/constants';
 import { codeNodeEditorEventBus } from '@/event-bus';
-import { ALL_ITEMS_PLACEHOLDER, EACH_ITEM_PLACEHOLDER } from './constants';
-import { mapStores } from 'pinia';
+import {
+	ALL_ITEMS_PLACEHOLDER,
+	CODE_LANGUAGES,
+	CODE_MODES,
+	EACH_ITEM_PLACEHOLDER,
+} from './constants';
 import { useRootStore } from '@/stores/n8nRootStore';
 import Modal from '../Modal.vue';
 import { useSettingsStore } from '@/stores/settings';
+import type { CodeLanguage, CodeMode } from './types';
+
+const placeholders: Partial<Record<CodeLanguage, Record<CodeMode, string>>> = {
+	javaScript: {
+		runOnceForAllItems: ALL_ITEMS_PLACEHOLDER,
+		runOnceForEachItem: EACH_ITEM_PLACEHOLDER,
+	},
+};
 
 export default mixins(linterExtension, completerExtension, workflowHelpers).extend({
 	name: 'code-node-editor',
 	components: { Modal },
 	props: {
 		mode: {
-			type: String,
-			validator: (value: string): boolean =>
-				['runOnceForAllItems', 'runOnceForEachItem'].includes(value),
+			type: String as PropType<CodeMode>,
+			validator: (value: CodeMode): boolean => CODE_MODES.includes(value),
+		},
+		language: {
+			type: String as PropType<CodeLanguage>,
+			default: 'javaScript' as CodeLanguage,
+			validator: (value: CodeLanguage): boolean => CODE_LANGUAGES.includes(value),
 		},
 		isReadOnly: {
 			type: Boolean,
 			default: false,
 		},
-		jsCode: {
+		value: {
 			type: String,
 		},
 	},
@@ -65,9 +85,12 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 		};
 	},
 	watch: {
-		mode() {
+		mode(newMode, previousMode: CodeMode) {
 			this.reloadLinter();
-			this.refreshPlaceholder();
+
+			if (this.content.trim() === placeholders[this.language]?.[previousMode]) {
+				this.refreshPlaceholder();
+			}
 		},
 	},
 	computed: {
@@ -81,16 +104,7 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 			return this.editor.state.doc.toString();
 		},
 		placeholder(): string {
-			return {
-				runOnceForAllItems: ALL_ITEMS_PLACEHOLDER,
-				runOnceForEachItem: EACH_ITEM_PLACEHOLDER,
-			}[this.mode];
-		},
-		previousPlaceholder(): string {
-			return {
-				runOnceForAllItems: EACH_ITEM_PLACEHOLDER,
-				runOnceForEachItem: ALL_ITEMS_PLACEHOLDER,
-			}[this.mode];
+			return placeholders[this.language]?.[this.mode] ?? '';
 		},
 	},
 	methods: {
@@ -114,25 +128,26 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 		reloadLinter() {
 			if (!this.editor) return;
 
-			this.editor.dispatch({
-				effects: this.linterCompartment.reconfigure(this.linterExtension()),
-			});
+			const linter = this.createLinter(this.language);
+			if (linter) {
+				this.editor.dispatch({
+					effects: this.linterCompartment.reconfigure(linter),
+				});
+			}
 		},
 		refreshPlaceholder() {
 			if (!this.editor) return;
 
-			if (!this.content.trim() || this.content.trim() === this.previousPlaceholder) {
-				this.editor.dispatch({
-					changes: { from: 0, to: this.content.length, insert: this.placeholder },
-				});
-			}
+			this.editor.dispatch({
+				changes: { from: 0, to: this.content.length, insert: this.placeholder },
+			});
 		},
 		highlightLine(line: number | 'final') {
 			if (!this.editor) return;
 
 			if (line === 'final') {
 				this.editor.dispatch({
-					selection: { anchor: this.content.trim().length },
+					selection: { anchor: this.content.length },
 				});
 				return;
 			}
@@ -175,45 +190,62 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 		},
 	},
 	destroyed() {
-		codeNodeEditorEventBus.off('error-line-number', this.highlightLine);
+		if (!this.isReadOnly) codeNodeEditorEventBus.off('error-line-number', this.highlightLine);
 	},
 	mounted() {
-		codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
-
-		const stateBasedExtensions = [
-			this.linterCompartment.of(this.linterExtension()),
-			EditorState.readOnly.of(this.isReadOnly),
-			EditorView.domEventHandlers({
-				focus: () => {
-					this.isEditorFocused = true;
-				},
-				blur: () => {
-					this.isEditorFocused = false;
-				},
-			}),
-			EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
-				if (!viewUpdate.docChanged) return;
-
-				this.trackCompletion(viewUpdate);
-
-				this.$emit('valueChanged', this.content);
-			}),
-		];
+		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
 
 		// empty on first load, default param value
-		if (this.jsCode === '') {
+		if (!this.value) {
 			this.$emit('valueChanged', this.placeholder);
 		}
 
+		const { isReadOnly, language } = this;
+		const extensions: Extension[] = [
+			...readOnlyEditorExtensions,
+			EditorState.readOnly.of(isReadOnly),
+			EditorView.editable.of(!isReadOnly),
+			codeNodeEditorTheme({ isReadOnly }),
+		];
+
+		if (!isReadOnly) {
+			const linter = this.createLinter(language);
+			if (linter) {
+				extensions.push(this.linterCompartment.of(linter));
+			}
+
+			extensions.push(
+				...writableEditorExtensions,
+				EditorView.domEventHandlers({
+					focus: () => {
+						this.isEditorFocused = true;
+					},
+					blur: () => {
+						this.isEditorFocused = false;
+					},
+				}),
+				EditorView.updateListener.of((viewUpdate) => {
+					if (!viewUpdate.docChanged) return;
+
+					this.trackCompletion(viewUpdate);
+
+					this.$emit('valueChanged', this.editor?.state.doc.toString());
+				}),
+			);
+		}
+
+		switch (language) {
+			case 'json':
+				extensions.push(json());
+				break;
+			case 'javaScript':
+				extensions.push(javascript(), this.autocompletionExtension());
+				break;
+		}
+
 		const state = EditorState.create({
-			doc: this.jsCode === '' ? this.placeholder : this.jsCode,
-			extensions: [
-				...baseExtensions,
-				...stateBasedExtensions,
-				CODE_NODE_EDITOR_THEME,
-				javascript(),
-				this.autocompletionExtension(),
-			],
+			doc: this.value || this.placeholder,
+			extensions,
 		});
 
 		this.editor = new EditorView({
@@ -227,6 +259,10 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 <style lang="scss" module>
 .code-node-editor-container {
 	position: relative;
+
+	& > div {
+		height: 100%;
+	}
 }
 
 .ask-ai-button {