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>
2023-04-25 14:57:21 +00:00
parent 88724bb056
commit ca4e0df90b
25 changed files with 240 additions and 691 deletions
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/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 {
--- a/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
@@ -18,21 +18,26 @@ import {
 	deleteCharBackward,
 } from '@codemirror/commands';
 import { lintGutter } from '@codemirror/lint';
+import type { Extension } from '@codemirror/state';

 import { codeInputHandler } from '@/plugins/codemirror/inputHandlers/code.inputHandler';

-export const baseExtensions = [
+export const readOnlyEditorExtensions: readonly Extension[] = [
 	lineNumbers(),
-	highlightActiveLineGutter(),
+	EditorView.lineWrapping,
 	highlightSpecialChars(),
+];
+
+export const writableEditorExtensions: readonly Extension[] = [
 	history(),
-	foldGutter(),
 	lintGutter(),
+	foldGutter(),
 	codeInputHandler(),
 	dropCursor(),
 	indentOnInput(),
 	bracketMatching(),
 	highlightActiveLine(),
+	highlightActiveLineGutter(),
 	keymap.of([
 		{ key: 'Enter', run: insertNewlineAndIndent },
 		{ key: 'Tab', run: acceptCompletion },
@@ -42,5 +47,4 @@ export const baseExtensions = [
 		{ key: 'Backspace', run: deleteCharBackward, shift: deleteCharBackward },
 		indentWithTab,
 	]),
-	EditorView.lineWrapping,
 ];
--- a/packages/editor-ui/src/components/CodeNodeEditor/constants.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/constants.ts
@@ -51,3 +51,6 @@ $input.item.json.myNewField = 1;

 return $input.item;
 `.trim();
+
+export const CODE_LANGUAGES = ['javaScript', 'json'] as const;
+export const CODE_MODES = ['runOnceForAllItems', 'runOnceForEachItem'] as const;
--- a/packages/editor-ui/src/components/CodeNodeEditor/linter.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/linter.ts
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import type { Diagnostic } from '@codemirror/lint';
 import { linter as createLinter } from '@codemirror/lint';
+import { jsonParseLinter } from '@codemirror/lang-json';
 import * as esprima from 'esprima-next';

 import {
@@ -12,12 +13,18 @@ import { walk } from './utils';

 import type { EditorView } from '@codemirror/view';
 import type { Node } from 'estree';
-import type { CodeNodeEditorMixin, RangeNode } from './types';
+import type { CodeLanguage, CodeNodeEditorMixin, RangeNode } from './types';

 export const linterExtension = (Vue as CodeNodeEditorMixin).extend({
 	methods: {
-		linterExtension() {
-			return createLinter(this.lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });
+		createLinter(language: CodeLanguage) {
+			switch (language) {
+				case 'javaScript':
+					return createLinter(this.lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });
+				case 'json':
+					return createLinter(jsonParseLinter());
+			}
+			return undefined;
 		},

 		lintSource(editorView: EditorView): Diagnostic[] {
--- a/packages/editor-ui/src/components/CodeNodeEditor/theme.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/theme.ts
@@ -29,7 +29,11 @@ const BASE_STYLING = {

 const cssStyleDeclaration = getComputedStyle(document.documentElement);

-export const CODE_NODE_EDITOR_THEME = [
+interface ThemeSettings {
+	isReadOnly?: boolean;
+}
+
+export const codeNodeEditorTheme = ({ isReadOnly }: ThemeSettings) => [
 	EditorView.theme({
 		'&': {
 			'font-size': BASE_STYLING.fontSize,
@@ -37,6 +41,7 @@ export const CODE_NODE_EDITOR_THEME = [
 			borderRadius: cssStyleDeclaration.getPropertyValue('--border-radius-base'),
 			backgroundColor: 'var(--color-code-background)',
 			color: 'var(--color-code-foreground)',
+			height: '100%',
 		},
 		'.cm-content': {
 			fontFamily: BASE_STYLING.fontFamily,
@@ -48,6 +53,9 @@ export const CODE_NODE_EDITOR_THEME = [
 		'&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
 			backgroundColor: 'var(--color-code-selection)',
 		},
+		'&.cm-editor': {
+			...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
+		},
 		'&.cm-editor.cm-focused': {
 			outline: 'none',
 			borderColor: 'var(--color-secondary)',
@@ -59,7 +67,9 @@ export const CODE_NODE_EDITOR_THEME = [
 			backgroundColor: 'var(--color-code-lineHighlight)',
 		},
 		'.cm-gutters': {
-			backgroundColor: 'var(--color-code-gutterBackground)',
+			backgroundColor: isReadOnly
+				? 'var(--color-code-background-readonly)'
+				: 'var(--color-code-gutterBackground)',
 			color: 'var(--color-code-gutterForeground)',
 			borderRadius: 'var(--border-radius-base)',
 		},
@@ -69,7 +79,8 @@ export const CODE_NODE_EDITOR_THEME = [
 		},
 		'.cm-scroller': {
 			overflow: 'auto',
-			maxHeight: BASE_STYLING.maxHeight,
+			maxHeight: '100%',
+			...(isReadOnly ? {} : { minHeight: '10em' }),
 		},
 		'.cm-diagnosticAction': {
 			backgroundColor: BASE_STYLING.diagnosticButton.backgroundColor,
--- a/packages/editor-ui/src/components/CodeNodeEditor/types.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/types.ts
@@ -2,6 +2,7 @@ import type { EditorView } from '@codemirror/view';
 import type { I18nClass } from '@/plugins/i18n';
 import type { Workflow } from 'n8n-workflow';
 import type { Node } from 'estree';
+import type { CODE_LANGUAGES, CODE_MODES } from './constants';

 export type CodeNodeEditorMixin = Vue.VueConstructor<
 	Vue & {
@@ -13,3 +14,6 @@ export type CodeNodeEditorMixin = Vue.VueConstructor<
 >;

 export type RangeNode = Node & { range: [number, number] };
+
+export type CodeLanguage = (typeof CODE_LANGUAGES)[number];
+export type CodeMode = (typeof CODE_MODES)[number];