feat(editor): Completions for extensions in expression editor (#5130)

* 🔥 Remove test extensions

* 🚧 Add test description

* 📘 Expand types

* ⚡ Export extensions

* ⚡ Export collection

* ⚡ Mark all proxies

* ✏️ Rename for clarity

* ⚡ Export from barrel

* ✨ Create datatype completions

* ⚡ Mount datatype completions

* 🧪 Adjust tests

* ⚡ Add `path` prop

* 🔥 Remove `()` from completion labels

* ⚡ Filter out completions for pseudo-proxies

* 🐛 Fix method error

* ⚡ Add metrics

* ✏️ Improve naming

* ✨ Start completion on empty resolvable

* ✨ Implement completion previews

* ⚡ Break out completion manager

* ⚡ Implement in expression editor modal

* ✏️ Improve naming

* ⚡ Filter out irrelevant completions

* ✨ Add preview hint

* ✏️ Improve comments

* 🎨 Style preview hint

* ⚡ Expand `hasNoParams`

* ⚡ Add spacing for readability

* ⚡ Add error codes

* ✏️ Add comment

* 🐛 Fix Esc behavior

* ⚡ Parse Unicode

* ⚡ Throw on invalid `DateTime`

* ⚡ Fix second root completion detection

* ⚡ Switch message at completable prefix position

* 🐛 Fix function names for non-dev build

* 🐛 Fix `json` handling

* 🔥 Comment out previews

* ♻️ Apply feedback

* 🔥 Remove extensions

* 🚚 Rename extensions

* ⚡ Adjust some implementations

* 🔥 Remove dummy extensions

* 🐛 Fix object regex

* ♻️ Apply feedback

* ✏️ Fix typos

* ✏️ Add `fn is not a function` message

* 🔥 Remove check

* ✨ Add `isNotEmpty` for objects

* 🚚 Rename `global` to `alpha`

* 🔥 Remove `encrypt`

* ⚡ Restore `is not a function` error

* ⚡ Support `week` on `extract()`

* 🧪 Fix tests

* ⚡ Add validation to some string extensions

* ⚡ Validate number arrays in some extensions

* 🧪 Fix tests

* ✏️ Improve error message

* ⏪ Revert extensions framework changes

* 🧹 Previews cleanup

* ⚡ Condense blank completions

* ⚡ Refactor dollar completions

* ⚡ Refactor non-dollar completions

* ⚡ Refactor Luxon completions

* ⚡ Refactor datatype completions

* ⚡ Use `DATETIMEUNIT_MAP`

* ✏️ Update test description

* ⏪ Revert "Use `DATETIMEUNIT_MAP`"

This reverts commit 472a77df5cd789905d162f3c3db02ac767b89b4e.

* 🧪 Add tests

* ♻️ Restore generic extensions

* 🔥 Remove logs

* 🧪 Expand tests

* ✨ Add `Math` completions

* ✏️ List breaking change

* ⚡ Add doc tooltips

* 🐛 Fix node selector regex

* 🐛 Fix `context` resolution

* 🐛 Allow dollar completions in args

* ⚡ Make numeric array methods context-dependent

* 📝 Adjust docs

* 🐛 Fix selector ref

* ⚡ Surface error for valid URL

* 🐛 Disallow whitespace in `isEmail` check

* 🧪 Fix test for `isUrl`

* ⚡ Add comma validator in `toFloat`

* ⚡ Add validation to `$jmespath()`

* ⏪ Revert valid URL error

* ⚡ Adjust `$jmespath()` validation

* 🧪 Adjust `isUrl` test

* ⚡ Remove `{}` and `[]` from compact

* ✏️ Update docs

* 🚚 Rename `stripTags` to `removeTags`

* ⚡ Do not inject whitespace inside resolvable

* ⚡ Make completions aware of `()`

* ✏️ Add note

* ⚡ Update sorting

* ⚡ Hide active node name from node selector

* 🔥 Remove `length()` and its aliases

* ⚡ Validate non-zero for `chunk`

* ✏️ Reword all error messages

* 🐛 Fix `$now` and `$today`

* ⚡ Simplify with `stripExcessParens`

* ⚡ Fold luxon into datatype

* 🧪 Clean up tests

* 🔥 Remove tests for removed methods

* 👕 Fix type

* ⬆️ Upgrade lang pack

* ⏪ Undo change to `vitest` command

* 🔥 Remove unused method

* ⚡ Separate `return` line

* ✏️ Improve description

* 🧪 Expand tests for initial-only completions

* 🧪 Add bracket-aware completions

* ⚡ Make check for `all()` stricter

* ✏️ Adjust explanatory comments

* 🔥 Remove unneded copy

* 🔥 Remove outdated comment

* ⚡ Make naming consistent

* ✏️ Update comments

* ⚡ Improve URL scheme check

* ✏️ Add comment

* 🚚 Move extension

* ✏️ Update `BREAKING-CHANGES.md`

* ✏️ Update upcoming version

* ✏️ Fix grammar

* ✏️ Shorten message

* 🐛 Fix `Esc` behavior

* 🐛 Fix `isNumeric`

* ✨ Support native methods

* 🧪 Skip Pinia tests

* ✏️ Shorten description

* 🔥 Remove outdated comment

* 🧪 Unskip Pinia tests

* ✏️ Add comments

* 🧪 Expand tests to natives

* ✏️ Add clarifying comments

* ⚡ Use `setTimeout` to make telemetry non-blocking

* 🐛 Account for no active node in cred modal

* ✨ Resolve without workflow

* 🔥 Remove `Esc` handling on NDV

* ⚡ Use `isDateTime`

* 🚚 Move `unique` to next phase

This array extension takes optional args.

* ⚡ Merge export

* 🧪 Fix tests

* ⏪ Restore check

* ✏️ Make breaking change description more accurate

* 🧪 Fix e2e tests

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;