feat(editor): Completions for extensions in expression editor

packages/cli/BREAKING-CHANGES.md

@@ -2,6 +2,16 @@
 
 This list shows all the versions which include breaking changes and how to upgrade.
 
+## 0.214.0
+
+### What changed?
+
+In expressions, `DateTime.fromHTTP()`, `DateTime.fromISO()` and `DateTime.fromJSDate()` require an argument. Before, they all resolved `null` when called without an argument; now, they throw an error when called without an argument.
+
+### When is action necessary?
+
+If you are relying on the above behavior, review your workflow to ensure you are passing in the required argument.
+
 ## 0.202.0
 
 ### What changed?

packages/editor-ui/package.json

@@ -46,7 +46,7 @@
     "@jsplumb/util": "^5.13.2",
     "axios": "^0.21.1",
     "codemirror-lang-html-n8n": "^1.0.0",
-    "codemirror-lang-n8n-expression": "^0.1.0",
+    "codemirror-lang-n8n-expression": "^0.2.0",
     "dateformat": "^3.0.3",
     "esprima-next": "5.8.4",
     "fast-json-stable-stringify": "^2.1.0",

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

@@ -46,6 +46,7 @@
 							<ExpressionEditorModalInput
 								:value="value"
 								:isReadOnly="isReadOnly"
+								:path="path"
 								@change="valueChanged"
 								@close="closeDialog"
 								ref="inputFieldExpression"

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue

@@ -1,30 +1,34 @@
 <template>
-	<div ref="root" class="ph-no-capture" @keydown.stop @keydown.esc="onClose"></div>
+	<div ref="root" class="ph-no-capture" @keydown.stop></div>
 </template>
 
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import { EditorState, Prec } from '@codemirror/state';
 import { history } from '@codemirror/commands';
 
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { expressionManager } from '@/mixins/expressionManager';
+import { completionManager } from '@/mixins/completionManager';
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
 import { n8nLang } from '@/plugins/codemirror/n8nLang';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { inputTheme } from './theme';
-
-import type { IVariableItemSelected } from '@/Interface';
 import { forceParse } from '@/utils/forceParse';
 import { autocompletion } from '@codemirror/autocomplete';
 
-export default mixins(expressionManager, workflowHelpers).extend({
+import type { IVariableItemSelected } from '@/Interface';
+
+export default mixins(expressionManager, completionManager, workflowHelpers).extend({
 	name: 'ExpressionEditorModalInput',
 	props: {
 		value: {
 			type: String,
 		},
+		path: {
+			type: String,
+		},
 		isReadOnly: {
 			type: Boolean,
 		},
@@ -38,6 +42,20 @@ export default mixins(expressionManager, workflowHelpers).extend({
 		const extensions = [
 			inputTheme(),
 			autocompletion(),
+			Prec.highest(
+				keymap.of([
+					{
+						any: (_: EditorView, event: KeyboardEvent) => {
+							if (event.key === 'Escape') {
+								event.stopPropagation();
+								this.$emit('close');
+							}
+
+							return false;
+						},
+					},
+				]),
+			),
 			n8nLang(),
 			history(),
 			expressionInputHandler(),
@@ -50,14 +68,17 @@ export default mixins(expressionManager, workflowHelpers).extend({
 				highlighter.removeColor(this.editor, this.plaintextSegments);
 				highlighter.addColor(this.editor, this.resolvableSegments);
 
-				setTimeout(() => this.editor?.focus()); // prevent blur on paste
-
 				setTimeout(() => {
-					this.$emit('change', {
-						value: this.unresolvedExpression,
-						segments: this.displayableSegments,
-					});
-				}, this.evaluationDelay);
+					this.editor?.focus(); // prevent blur on paste
+					try {
+						this.trackCompletion(viewUpdate, this.path);
+					} catch {}
+				});
+
+				this.$emit('change', {
+					value: this.unresolvedExpression,
+					segments: this.displayableSegments,
+				});
 			}),
 		];
 
@@ -86,9 +107,6 @@ export default mixins(expressionManager, workflowHelpers).extend({
 		this.editor?.destroy();
 	},
 	methods: {
-		onClose() {
-			this.$emit('close');
-		},
 		itemSelected({ variable }: IVariableItemSelected) {
 			if (!this.editor || this.isReadOnly) return;
 

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

@@ -15,6 +15,7 @@
 				:isReadOnly="isReadOnly"
 				:targetItem="hoveringItem"
 				:isSingleLine="isForRecordLocator"
+				:path="path"
 				@focus="onFocus"
 				@blur="onBlur"
 				@change="onChange"
@@ -93,6 +94,9 @@ export default Vue.extend({
 		};
 	},
 	props: {
+		path: {
+			type: String,
+		},
 		value: {
 			type: String,
 		},

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue

@@ -5,20 +5,21 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import { mapStores } from 'pinia';
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import { EditorState, Prec } from '@codemirror/state';
 import { history } from '@codemirror/commands';
+import { autocompletion, completionStatus } from '@codemirror/autocomplete';
 
 import { useNDVStore } from '@/stores/ndv';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { expressionManager } from '@/mixins/expressionManager';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
 import { inputTheme } from './theme';
-import { autocompletion, ifIn } from '@codemirror/autocomplete';
 import { n8nLang } from '@/plugins/codemirror/n8nLang';
+import { completionManager } from '@/mixins/completionManager';
 
-export default mixins(expressionManager, workflowHelpers).extend({
+export default mixins(completionManager, expressionManager, workflowHelpers).extend({
 	name: 'InlineExpressionEditorInput',
 	props: {
 		value: {
@@ -32,11 +33,9 @@ export default mixins(expressionManager, workflowHelpers).extend({
 			type: Boolean,
 			default: false,
 		},
-	},
-	data() {
-		return {
-			cursorPosition: 0,
-		};
+		path: {
+			type: String,
+		},
 	},
 	watch: {
 		value(newValue) {
@@ -77,6 +76,19 @@ export default mixins(expressionManager, workflowHelpers).extend({
 	mounted() {
 		const extensions = [
 			inputTheme({ isSingleLine: this.isSingleLine }),
+			Prec.highest(
+				keymap.of([
+					{
+						any(view: EditorView, event: KeyboardEvent) {
+							if (event.key === 'Escape' && completionStatus(view.state) !== null) {
+								event.stopPropagation();
+							}
+
+							return false;
+						},
+					},
+				]),
+			),
 			autocompletion(),
 			n8nLang(),
 			history(),
@@ -94,14 +106,16 @@ export default mixins(expressionManager, workflowHelpers).extend({
 				highlighter.removeColor(this.editor, this.plaintextSegments);
 				highlighter.addColor(this.editor, this.resolvableSegments);
 
-				this.cursorPosition = viewUpdate.view.state.selection.ranges[0].from;
-
 				setTimeout(() => {
-					this.$emit('change', {
-						value: this.unresolvedExpression,
-						segments: this.displayableSegments,
-					});
-				}, this.evaluationDelay);
+					try {
+						this.trackCompletion(viewUpdate, this.path);
+					} catch {}
+				});
+
+				this.$emit('change', {
+					value: this.unresolvedExpression,
+					segments: this.displayableSegments,
+				});
 			}),
 		];
 

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

@@ -38,6 +38,7 @@
 				:value="expressionDisplayValue"
 				:title="displayTitle"
 				:isReadOnly="isReadOnly"
+				:path="path"
 				@valueChanged="expressionUpdated"
 				@modalOpenerClick="openExpressionEditorModal"
 				@focus="setFocus"

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

@@ -81,6 +81,7 @@
 								<ExpressionParameterInput
 									v-if="isValueExpression || forceShowExpression"
 									:value="expressionDisplayValue"
+									:path="path"
 									isForRecordLocator
 									@valueChanged="onInputChange"
 									@modalOpenerClick="$emit('modalOpenerClick')"

packages/editor-ui/src/mixins/completionManager.ts

@@ -0,0 +1,76 @@
+import mixins from 'vue-typed-mixins';
+import { ExpressionExtensions } from 'n8n-workflow';
+import { EditorView, ViewUpdate } from '@codemirror/view';
+
+import { expressionManager } from './expressionManager';
+
+export const completionManager = mixins(expressionManager).extend({
+	data() {
+		return {
+			editor: {} as EditorView,
+		};
+	},
+	computed: {
+		expressionExtensionsCategories() {
+			return ExpressionExtensions.reduce<Record<string, string | undefined>>((acc, cur) => {
+				for (const fnName of Object.keys(cur.functions)) {
+					acc[fnName] = cur.typeName;
+				}
+
+				return acc;
+			}, {});
+		},
+	},
+	methods: {
+		trackCompletion(viewUpdate: ViewUpdate, parameterPath: string) {
+			const completionTx = viewUpdate.transactions.find((tx) => tx.isUserEvent('input.complete'));
+
+			if (!completionTx) return;
+
+			let completion = '';
+			let completionBase = '';
+
+			viewUpdate.changes.iterChanges((_: number, __: number, fromB: number, toB: number) => {
+				completion = this.editor.state.doc.slice(fromB, toB).toString();
+
+				const index = this.findCompletionBaseStartIndex(fromB);
+
+				completionBase = this.editor.state.doc
+					.slice(index, fromB - 1)
+					.toString()
+					.trim();
+			});
+
+			const category = this.expressionExtensionsCategories[completion];
+
+			const payload = {
+				instance_id: this.rootStore.instanceId,
+				node_type: this.ndvStore.activeNode?.type,
+				field_name: parameterPath,
+				field_type: 'expression',
+				context: completionBase,
+				inserted_text: completion,
+				category: category ?? 'n/a', // only applicable if expression extension completion
+			};
+
+			this.$telemetry.track('User autocompleted code', payload);
+		},
+
+		findCompletionBaseStartIndex(fromIndex: number) {
+			const INDICATORS = [
+				' $', // proxy
+				'{ ', // primitive
+			];
+
+			const doc = this.editor.state.doc.toString();
+
+			for (let index = fromIndex; index > 0; index--) {
+				if (INDICATORS.some((indicator) => indicator === doc[index] + doc[index + 1])) {
+					return index + 1;
+				}
+			}
+
+			return -1;
+		},
+	},
+});