From cc050f075949c2018029504a3f5c4f8309a63b82 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 22 Feb 2024 12:42:17 +0100
Subject: [PATCH 01/25] Overhaul autocomplete styling

---
 .../design-system/src/css/_primitives.scss    |  5 ++
 packages/design-system/src/css/_tokens.scss   |  2 +-
 .../src/styles/plugins/_codemirror.scss       | 72 +++++++++++++------
 3 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss
index 77e3a4e30ca4f..73e5b98ec3554 100644
--- a/packages/design-system/src/css/_primitives.scss
+++ b/packages/design-system/src/css/_primitives.scss
@@ -350,6 +350,11 @@
 		var(--prim-color-alt-e-l),
 		0.4
 	);
+	--prim-color-alt-e-tint-100: hsl(
+		var(--prim-color-alt-e-h),
+		var(--prim-color-alt-e-s),
+		calc(var(--prim-color-alt-e-l) + 10%)
+	);
 	--prim-color-alt-e-tint-250: hsl(
 		var(--prim-color-alt-e-h),
 		var(--prim-color-alt-e-s),
diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
index 3c20089511182..fa3c51fc9202b 100644
--- a/packages/design-system/src/css/_tokens.scss
+++ b/packages/design-system/src/css/_tokens.scss
@@ -136,7 +136,7 @@
 	--color-code-gutterBackground: var(--prim-gray-0);
 	--color-code-gutterForeground: var(--prim-gray-320);
 	--color-code-tags-comment: var(--prim-gray-420);
-	--color-autocomplete-selected-background: var(--prim-color-alt-e);
+	--color-autocomplete-selected-background: var(--prim-color-alt-e-tint-100);
 	--color-autocomplete-selected-font: var(--prim-gray-0);
 
 	// Variables
diff --git a/packages/editor-ui/src/styles/plugins/_codemirror.scss b/packages/editor-ui/src/styles/plugins/_codemirror.scss
index fd6105a228e74..270cbfcefec0f 100644
--- a/packages/editor-ui/src/styles/plugins/_codemirror.scss
+++ b/packages/editor-ui/src/styles/plugins/_codemirror.scss
@@ -8,35 +8,59 @@
 	content: 'n8n supports all JavaScript functions, including those not listed.';
 }
 
-// Custom autocomplete item type icons
-// 1. Native and n8n extension functions:
-.cm-completionIcon-extension-function,
-.cm-completionIcon-native-function {
-	&::after {
-		content: 'ƒ';
-	}
-}
-
-.cm-tooltip-autocomplete {
+.ͼ2 .cm-tooltip-autocomplete {
 	background-color: var(--color-background-xlight) !important;
+	box-shadow: var(--box-shadow-light);
+	border: none;
 
 	.cm-tooltip {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
-	li .cm-completionLabel {
-		color: var(--color-success);
-	}
-}
+	> ul[role='listbox'] {
+		font-family: var(--font-family-monospace);
+		max-height: min(280px, 50vh);
+		width: min(320px, 50vw);
+		min-width: auto;
+		max-width: none;
+		border: var(--border-base);
+		border-radius: var(--border-radius-base);
 
-.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] {
-	background-color: var(--color-autocomplete-selected-background);
-}
+		li[role='option'] {
+			color: var(--color-success);
+			display: flex;
+			justify-content: space-between;
+			padding: var(--spacing-5xs) var(--spacing-2xs);
+			scroll-margin-top: 40px;
+		}
+
+		li .cm-completionLabel {
+			line-height: var(--font-line-height-xloose);
+		}
+
+		li[aria-selected] {
+			background-color: var(--color-autocomplete-selected-background);
+			color: var(--color-autocomplete-selected-font);
+		}
 
-.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel {
-	color: var(--color-autocomplete-selected-font) !important;
-	font-weight: 600;
+		> completion-section {
+			font-family: var(--font-family);
+			font-weight: var(--font-weight-bold);
+			padding: var(--spacing-4xs) var(--spacing-2xs);
+			color: var(--color-text-base);
+			opacity: 1;
+			background-color: var(--color-background-base);
+			border-bottom: var(--border-base);
+			line-height: var(--font-line-height-loose);
+			position: sticky;
+			top: 0;
+		}
+
+		li:has(+ completion-section) {
+			border-bottom: var(--border-base);
+		}
+	}
 }
 
 .autocomplete-info-container {
@@ -45,8 +69,12 @@
 	padding: var(--spacing-4xs) 0;
 }
 
-.cm-completionInfo {
-	background-color: var(--color-background-xlight) !important;
+.ͼ2 .cm-completionInfo {
+	background-color: var(--color-background-xlight);
+	border: var(--border-base);
+	margin-left: var(--spacing-5xs);
+	border-radius: var(--border-radius-base);
+	line-height: var(--font-line-height-loose);
 
 	.autocomplete-info-header {
 		color: var(--color-text-dark);

From 26aab04e900aac628c066e2b218882d987060701 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 22 Feb 2024 12:43:02 +0100
Subject: [PATCH 02/25] Reuse keymap and autocompletion options across editors

---
 .../CodeNodeEditor/baseExtensions.ts          | 61 +++------------
 .../ExpressionEditorModalInput.vue            | 25 +++---
 .../src/components/HtmlEditor/HtmlEditor.vue  | 20 ++---
 .../InlineExpressionEditorInput.vue           | 36 ++++-----
 .../src/components/JsEditor/JsEditor.vue      | 16 ++--
 .../src/components/JsonEditor/JsonEditor.vue  | 20 ++---
 .../src/components/SqlEditor/SqlEditor.vue    | 18 +++--
 .../src/plugins/codemirror/keymap.ts          | 77 +++++++++++++++++++
 .../src/plugins/codemirror/n8nLang.ts         |  3 +
 9 files changed, 166 insertions(+), 110 deletions(-)
 create mode 100644 packages/editor-ui/src/plugins/codemirror/keymap.ts

diff --git a/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts b/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
index bed55df677de9..d2543dc3f5964 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
@@ -6,24 +6,19 @@ import {
 	highlightSpecialChars,
 	keymap,
 	lineNumbers,
-	type KeyBinding,
 } from '@codemirror/view';
 import { bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
-import { acceptCompletion, selectedCompletion } from '@codemirror/autocomplete';
-import {
-	history,
-	indentLess,
-	indentMore,
-	insertNewlineAndIndent,
-	toggleComment,
-	redo,
-	deleteCharBackward,
-	undo,
-} from '@codemirror/commands';
+import { history, toggleComment, redo, deleteCharBackward, undo } from '@codemirror/commands';
 import { lintGutter } from '@codemirror/lint';
 import { type Extension, Prec } from '@codemirror/state';
 
 import { codeInputHandler } from '@/plugins/codemirror/inputHandlers/code.inputHandler';
+import {
+	autocompleteKeyMap,
+	enterKeyMap,
+	historyKeyMap,
+	tabKeyMap,
+} from '@/plugins/codemirror/keymap';
 
 export const readOnlyEditorExtensions: readonly Extension[] = [
 	lineNumbers(),
@@ -31,42 +26,6 @@ export const readOnlyEditorExtensions: readonly Extension[] = [
 	highlightSpecialChars(),
 ];
 
-export const tabKeyMap: KeyBinding[] = [
-	{
-		any(editor, event) {
-			if (event.key === 'Tab' || (event.key === 'Escape' && selectedCompletion(editor.state))) {
-				event.stopPropagation();
-			}
-
-			return false;
-		},
-	},
-	{
-		key: 'Tab',
-		run: (editor) => {
-			if (selectedCompletion(editor.state)) {
-				return acceptCompletion(editor);
-			}
-
-			return indentMore(editor);
-		},
-	},
-	{ key: 'Shift-Tab', run: indentLess },
-];
-
-export const enterKeyMap: KeyBinding[] = [
-	{
-		key: 'Enter',
-		run: (editor) => {
-			if (selectedCompletion(editor.state)) {
-				return acceptCompletion(editor);
-			}
-
-			return insertNewlineAndIndent(editor);
-		},
-	},
-];
-
 export const writableEditorExtensions: readonly Extension[] = [
 	history(),
 	lintGutter(),
@@ -79,11 +38,11 @@ export const writableEditorExtensions: readonly Extension[] = [
 	highlightActiveLineGutter(),
 	Prec.highest(
 		keymap.of([
-			...tabKeyMap,
+			...tabKeyMap(),
 			...enterKeyMap,
+			...autocompleteKeyMap,
+			...historyKeyMap,
 			{ key: 'Mod-/', run: toggleComment },
-			{ key: 'Mod-z', run: undo },
-			{ key: 'Mod-Shift-z', run: redo },
 			{ key: 'Backspace', run: deleteCharBackward, shift: deleteCharBackward },
 		]),
 	),
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index a08d3d964a799..1bc9db1bfced1 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -6,18 +6,24 @@
 import { defineComponent } from 'vue';
 import { EditorView, keymap } from '@codemirror/view';
 import { EditorState, Prec } from '@codemirror/state';
-import { history, redo, undo } from '@codemirror/commands';
+import { history } from '@codemirror/commands';
 
 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 { n8nAutocompletion, n8nLang } from '@/plugins/codemirror/n8nLang';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { inputTheme } from './theme';
 import { forceParse } from '@/utils/forceParse';
-import { acceptCompletion, autocompletion } from '@codemirror/autocomplete';
+import { completionStatus } from '@codemirror/autocomplete';
 
 import type { IVariableItemSelected } from '@/Interface';
+import {
+	autocompleteKeyMap,
+	enterKeyMap,
+	historyKeyMap,
+	tabKeyMap,
+} from '@/plugins/codemirror/keymap';
 
 export default defineComponent({
 	name: 'ExpressionEditorModalInput',
@@ -44,13 +50,15 @@ export default defineComponent({
 	mounted() {
 		const extensions = [
 			inputTheme(),
-			autocompletion(),
 			Prec.highest(
 				keymap.of([
-					{ key: 'Tab', run: acceptCompletion },
+					...tabKeyMap(),
+					...historyKeyMap,
+					...enterKeyMap,
+					...autocompleteKeyMap,
 					{
-						any: (_: EditorView, event: KeyboardEvent) => {
-							if (event.key === 'Escape') {
+						any: (view, event) => {
+							if (event.key === 'Escape' && completionStatus(view.state) === null) {
 								event.stopPropagation();
 								this.$emit('close');
 							}
@@ -58,11 +66,10 @@ export default defineComponent({
 							return false;
 						},
 					},
-					{ key: 'Mod-z', run: undo },
-					{ key: 'Mod-Shift-z', run: redo },
 				]),
 			),
 			n8nLang(),
+			n8nAutocompletion(),
 			history(),
 			expressionInputHandler(),
 			EditorView.lineWrapping,
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index 01d4ea5a5cb90..d1a53c9114c17 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -6,8 +6,7 @@
 </template>
 
 <script lang="ts">
-import { autocompletion } from '@codemirror/autocomplete';
-import { history, redo, undo } from '@codemirror/commands';
+import { history } from '@codemirror/commands';
 import {
 	LanguageSupport,
 	bracketMatching,
@@ -39,11 +38,17 @@ import { expressionManager } from '@/mixins/expressionManager';
 import { n8nCompletionSources } from '@/plugins/codemirror/completions/addCompletions';
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
-import { enterKeyMap, tabKeyMap } from '../CodeNodeEditor/baseExtensions';
 import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
 import type { Range, Section } from './types';
 import { nonTakenRanges } from './utils';
 import { isEqual } from 'lodash-es';
+import {
+	autocompleteKeyMap,
+	enterKeyMap,
+	historyKeyMap,
+	tabKeyMap,
+} from '@/plugins/codemirror/keymap';
+import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
 
 export default defineComponent({
 	name: 'HtmlEditor',
@@ -105,17 +110,12 @@ export default defineComponent({
 
 			return [
 				bracketMatching(),
-				autocompletion(),
+				n8nAutocompletion(),
 				this.disableExpressionCompletions ? html() : htmlWithCompletions(),
 				autoCloseTags,
 				expressionInputHandler(),
 				Prec.highest(
-					keymap.of([
-						...tabKeyMap,
-						...enterKeyMap,
-						{ key: 'Mod-z', run: undo },
-						{ key: 'Mod-Shift-z', run: redo },
-					]),
+					keymap.of([...tabKeyMap(), ...enterKeyMap, ...historyKeyMap, ...autocompleteKeyMap]),
 				),
 				indentOnInput(),
 				codeNodeEditorTheme({
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 63190abb0b696..8cd412208d31e 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -3,7 +3,12 @@
 </template>
 
 <script lang="ts">
-import { acceptCompletion, autocompletion, completionStatus } from '@codemirror/autocomplete';
+import {
+	acceptCompletion,
+	autocompletion,
+	completionStatus,
+	moveCompletionSelection,
+} from '@codemirror/autocomplete';
 import { history, redo, undo } from '@codemirror/commands';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
@@ -13,11 +18,17 @@ import { defineComponent } from 'vue';
 import { completionManager } from '@/mixins/completionManager';
 import { expressionManager } from '@/mixins/expressionManager';
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
-import { n8nLang } from '@/plugins/codemirror/n8nLang';
+import { n8nAutocompletion, n8nLang } from '@/plugins/codemirror/n8nLang';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { isEqual } from 'lodash-es';
 import type { IDataObject } from 'n8n-workflow';
 import { inputTheme } from './theme';
+import {
+	autocompleteKeyMap,
+	enterKeyMap,
+	historyKeyMap,
+	tabKeyMap,
+} from '../../plugins/codemirror/keymap';
 
 const editableConf = new Compartment();
 
@@ -81,25 +92,12 @@ export default defineComponent({
 	},
 	mounted() {
 		const extensions = [
-			n8nLang(),
-			inputTheme({ rows: this.rows }),
 			Prec.highest(
-				keymap.of([
-					{ key: 'Tab', run: acceptCompletion },
-					{
-						any(view: EditorView, event: KeyboardEvent) {
-							if (event.key === 'Escape' && completionStatus(view.state) !== null) {
-								event.stopPropagation();
-							}
-
-							return false;
-						},
-					},
-					{ key: 'Mod-z', run: undo },
-					{ key: 'Mod-Shift-z', run: redo },
-				]),
+				keymap.of([...tabKeyMap(true), ...enterKeyMap, ...autocompleteKeyMap, ...historyKeyMap]),
 			),
-			autocompletion(),
+			n8nLang(),
+			n8nAutocompletion(),
+			inputTheme({ rows: this.rows }),
 			history(),
 			expressionInputHandler(),
 			EditorView.lineWrapping,
diff --git a/packages/editor-ui/src/components/JsEditor/JsEditor.vue b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
index cb9c60c85b980..c638ced10effc 100644
--- a/packages/editor-ui/src/components/JsEditor/JsEditor.vue
+++ b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
@@ -24,8 +24,14 @@ import {
 } from '@codemirror/view';
 import { defineComponent } from 'vue';
 
-import { enterKeyMap, tabKeyMap } from '../CodeNodeEditor/baseExtensions';
 import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
+import {
+	autocompleteKeyMap,
+	enterKeyMap,
+	historyKeyMap,
+	tabKeyMap,
+} from '@/plugins/codemirror/keymap';
+import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
 
 export default defineComponent({
 	name: 'JsEditor',
@@ -77,15 +83,15 @@ export default defineComponent({
 					history(),
 					Prec.highest(
 						keymap.of([
-							...tabKeyMap,
+							...tabKeyMap(),
 							...enterKeyMap,
-							{ key: 'Mod-z', run: undo },
-							{ key: 'Mod-Shift-z', run: redo },
+							...historyKeyMap,
+							...autocompleteKeyMap,
 							{ key: 'Mod-/', run: toggleComment },
 						]),
 					),
 					lintGutter(),
-					autocompletion(),
+					n8nAutocompletion(),
 					indentOnInput(),
 					highlightActiveLine(),
 					highlightActiveLineGutter(),
diff --git a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
index 82ab0bfe99970..e641d3162d637 100644
--- a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
+++ b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
@@ -6,8 +6,7 @@
 </template>
 
 <script lang="ts">
-import { autocompletion } from '@codemirror/autocomplete';
-import { history, redo, undo } from '@codemirror/commands';
+import { history } from '@codemirror/commands';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
 import { linter as createLinter, lintGutter } from '@codemirror/lint';
@@ -24,8 +23,14 @@ import {
 } from '@codemirror/view';
 import { defineComponent } from 'vue';
 
-import { enterKeyMap, tabKeyMap } from '../CodeNodeEditor/baseExtensions';
 import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
+import {
+	autocompleteKeyMap,
+	enterKeyMap,
+	historyKeyMap,
+	tabKeyMap,
+} from '@/plugins/codemirror/keymap';
+import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
 
 export default defineComponent({
 	name: 'JsonEditor',
@@ -76,16 +81,11 @@ export default defineComponent({
 				extensions.push(
 					history(),
 					Prec.highest(
-						keymap.of([
-							...tabKeyMap,
-							...enterKeyMap,
-							{ key: 'Mod-z', run: undo },
-							{ key: 'Mod-Shift-z', run: redo },
-						]),
+						keymap.of([...tabKeyMap(), ...enterKeyMap, ...historyKeyMap, ...autocompleteKeyMap]),
 					),
 					createLinter(jsonParseLinter()),
 					lintGutter(),
-					autocompletion(),
+					n8nAutocompletion(),
 					indentOnInput(),
 					highlightActiveLine(),
 					highlightActiveLineGutter(),
diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
index 087f853747c68..bb4821502f793 100644
--- a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
+++ b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -21,7 +21,7 @@ import { n8nCompletionSources } from '@/plugins/codemirror/completions/addComple
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { autocompletion, ifNotIn } from '@codemirror/autocomplete';
-import { history, redo, toggleComment, undo } from '@codemirror/commands';
+import { history, toggleComment } from '@codemirror/commands';
 import { LanguageSupport, bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
 import { type Extension, type Line, Prec } from '@codemirror/state';
 import { EditorState } from '@codemirror/state';
@@ -47,9 +47,15 @@ import {
 	keywordCompletionSource,
 } from '@n8n/codemirror-lang-sql';
 import { defineComponent } from 'vue';
-import { enterKeyMap, tabKeyMap } from '../CodeNodeEditor/baseExtensions';
 import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
 import { isEqual } from 'lodash-es';
+import {
+	autocompleteKeyMap,
+	enterKeyMap,
+	historyKeyMap,
+	tabKeyMap,
+} from '@/plugins/codemirror/keymap';
+import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
 
 const SQL_DIALECTS = {
 	StandardSQL,
@@ -157,14 +163,14 @@ export default defineComponent({
 					history(),
 					Prec.highest(
 						keymap.of([
-							...tabKeyMap,
+							...tabKeyMap(),
 							...enterKeyMap,
-							{ key: 'Mod-z', run: undo },
-							{ key: 'Mod-Shift-z', run: redo },
+							...historyKeyMap,
+							...autocompleteKeyMap,
 							{ key: 'Mod-/', run: toggleComment },
 						]),
 					),
-					autocompletion(),
+					n8nAutocompletion(),
 					indentOnInput(),
 					highlightActiveLine(),
 					highlightActiveLineGutter(),
diff --git a/packages/editor-ui/src/plugins/codemirror/keymap.ts b/packages/editor-ui/src/plugins/codemirror/keymap.ts
new file mode 100644
index 0000000000000..5d9dd82ff5dfb
--- /dev/null
+++ b/packages/editor-ui/src/plugins/codemirror/keymap.ts
@@ -0,0 +1,77 @@
+import {
+	acceptCompletion,
+	completionStatus,
+	moveCompletionSelection,
+	selectedCompletion,
+} from '@codemirror/autocomplete';
+import { indentLess, indentMore, insertNewlineAndIndent, redo, undo } from '@codemirror/commands';
+import type { EditorView, KeyBinding } from '@codemirror/view';
+
+export const tabKeyMap = (singleLine = false): KeyBinding[] => [
+	{
+		any(view, event) {
+			if (
+				event.key === 'Tab' ||
+				(event.key === 'Escape' && completionStatus(view.state) !== null)
+			) {
+				event.stopPropagation();
+			}
+
+			return false;
+		},
+	},
+	{
+		key: 'Tab',
+		run: (view) => {
+			if (selectedCompletion(view.state)) {
+				return acceptCompletion(view);
+			}
+
+			if (!singleLine) return indentMore(view);
+			return false;
+		},
+	},
+	{ key: 'Shift-Tab', run: indentLess },
+];
+
+export const enterKeyMap: KeyBinding[] = [
+	{
+		key: 'Enter',
+		run: (view) => {
+			if (selectedCompletion(view.state)) {
+				return acceptCompletion(view);
+			}
+
+			return insertNewlineAndIndent(view);
+		},
+	},
+];
+
+const SELECTED_AUTOCOMPLETE_OPTION_SELECTOR = '.cm-tooltip-autocomplete li[aria-selected]';
+const onAutocompleteNavigate = (dir: 'up' | 'down') => (view: EditorView) => {
+	console.log('hi');
+	if (completionStatus(view.state) !== null) {
+		moveCompletionSelection(dir === 'down')(view);
+		document
+			.querySelector(SELECTED_AUTOCOMPLETE_OPTION_SELECTOR)
+			?.scrollIntoView({ block: 'nearest' });
+		return true;
+	}
+	return false;
+};
+
+export const autocompleteKeyMap: KeyBinding[] = [
+	{
+		key: 'ArrowDown',
+		run: onAutocompleteNavigate('down'),
+	},
+	{
+		key: 'ArrowUp',
+		run: onAutocompleteNavigate('up'),
+	},
+];
+
+export const historyKeyMap: KeyBinding[] = [
+	{ key: 'Mod-z', run: undo },
+	{ key: 'Mod-Shift-z', run: redo },
+];
diff --git a/packages/editor-ui/src/plugins/codemirror/n8nLang.ts b/packages/editor-ui/src/plugins/codemirror/n8nLang.ts
index 33cc5493d2004..0e00cc7cb45f7 100644
--- a/packages/editor-ui/src/plugins/codemirror/n8nLang.ts
+++ b/packages/editor-ui/src/plugins/codemirror/n8nLang.ts
@@ -4,6 +4,7 @@ import { parseMixed } from '@lezer/common';
 import { javascriptLanguage } from '@codemirror/lang-javascript';
 
 import { n8nCompletionSources } from './completions/addCompletions';
+import { autocompletion } from '@codemirror/autocomplete';
 
 const n8nParserWithNestedJsParser = n8nParser.configure({
 	wrap: parseMixed((node) => {
@@ -23,3 +24,5 @@ export function n8nLang() {
 		...n8nCompletionSources().map((source) => n8nLanguage.data.of(source)),
 	]);
 }
+
+export const n8nAutocompletion = () => autocompletion({ icons: false, closeOnBlur: false });

From b228f7aadb1cd2f11feaad68528cd32f5dbd8ae6 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 22 Feb 2024 12:47:19 +0100
Subject: [PATCH 03/25] Add .keys and .values extension, remove invalid native

---
 .../src/Extensions/ObjectExtensions.ts        | 27 +++++++++++++++++++
 .../src/NativeMethods/Object.Methods.ts       | 23 +---------------
 .../ObjectExtensions.test.ts                  |  8 ++++++
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/packages/workflow/src/Extensions/ObjectExtensions.ts b/packages/workflow/src/Extensions/ObjectExtensions.ts
index 61d23d3363ecb..3e4bce7f4dcce 100644
--- a/packages/workflow/src/Extensions/ObjectExtensions.ts
+++ b/packages/workflow/src/Extensions/ObjectExtensions.ts
@@ -9,6 +9,14 @@ function isNotEmpty(value: object): boolean {
 	return !isEmpty(value);
 }
 
+function keys(value: object): string[] {
+	return Object.keys(value);
+}
+
+function values(value: object): unknown[] {
+	return Object.values(value);
+}
+
 function hasField(value: object, extraArgs: string[]): boolean {
 	const [name] = extraArgs;
 	return name in value;
@@ -146,6 +154,23 @@ keepFieldsContaining.doc = {
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/objects/#object-keepFieldsContaining',
 };
 
+keys.doc = {
+	name: 'keys',
+	description: "Returns an array of a given object's own enumerable string-keyed property names.",
+	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/objects/#object-keys',
+	returnType: 'Array',
+};
+
+values.doc = {
+	doc: {
+		name: 'values',
+		description:
+			"Returns an array of a given object's own enumerable string-keyed property values.",
+		docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/objects/#object-values',
+		returnType: 'Array',
+	},
+};
+
 export const objectExtensions: ExtensionMap = {
 	typeName: 'Object',
 	functions: {
@@ -157,5 +182,7 @@ export const objectExtensions: ExtensionMap = {
 		keepFieldsContaining,
 		compact,
 		urlEncode,
+		keys,
+		values,
 	},
 };
diff --git a/packages/workflow/src/NativeMethods/Object.Methods.ts b/packages/workflow/src/NativeMethods/Object.Methods.ts
index 41739de8b159f..e1cc8a204d2bc 100644
--- a/packages/workflow/src/NativeMethods/Object.Methods.ts
+++ b/packages/workflow/src/NativeMethods/Object.Methods.ts
@@ -2,26 +2,5 @@ import type { NativeDoc } from '@/Extensions/Extensions';
 
 export const objectMethods: NativeDoc = {
 	typeName: 'Object',
-	functions: {
-		keys: {
-			doc: {
-				name: 'keys',
-				description:
-					"Returns an array of a given object's own enumerable string-keyed property names.",
-				docURL:
-					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys',
-				returnType: 'Array',
-			},
-		},
-		values: {
-			doc: {
-				name: 'values',
-				description:
-					"Returns an array of a given object's own enumerable string-keyed property values.",
-				docURL:
-					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values',
-				returnType: 'Array',
-			},
-		},
-	},
+	functions: {},
 };
diff --git a/packages/workflow/test/ExpressionExtensions/ObjectExtensions.test.ts b/packages/workflow/test/ExpressionExtensions/ObjectExtensions.test.ts
index 78c2689783af7..38556f08789ac 100644
--- a/packages/workflow/test/ExpressionExtensions/ObjectExtensions.test.ts
+++ b/packages/workflow/test/ExpressionExtensions/ObjectExtensions.test.ts
@@ -81,5 +81,13 @@ describe('Data Transformation Functions', () => {
 		test('.urlEncode should work on an object', () => {
 			expect(evaluate('={{ ({ test1: 1, test2: "2" }).urlEncode() }}')).toEqual('test1=1&test2=2');
 		});
+
+		test('.keys should work on an object', () => {
+			expect(evaluate('={{ ({ test1: 1, test2: "2" }).keys() }}')).toEqual(['test1', 'test2']);
+		});
+
+		test('.values should work on an object', () => {
+			expect(evaluate('={{ ({ test1: 1, test2: "2" }).values() }}')).toEqual([1, '2']);
+		});
 	});
 });

From 2884503deb071aa932b8c39ac257269f3ead78f7 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 22 Feb 2024 12:47:42 +0100
Subject: [PATCH 04/25] Add sections to autocomplete dropdown

---
 .../codemirror/completions/constants.ts       | 121 ++++++++++++++++++
 .../completions/datatype.completions.ts       | 121 +++++++++++++++---
 .../completions/dollar.completions.ts         |  40 ++----
 .../plugins/codemirror/completions/utils.ts   |  32 ++++-
 packages/editor-ui/src/plugins/i18n/index.ts  |   5 +-
 .../src/plugins/i18n/locales/en.json          |   7 +
 6 files changed, 275 insertions(+), 51 deletions(-)
 create mode 100644 packages/editor-ui/src/plugins/codemirror/completions/constants.ts

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
new file mode 100644
index 0000000000000..fef96f5b61b70
--- /dev/null
+++ b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
@@ -0,0 +1,121 @@
+import type { Completion, CompletionSection } from '@codemirror/autocomplete';
+import { i18n } from '@/plugins/i18n';
+
+export const RECOMMENDED_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.recommended'),
+	rank: 0,
+};
+
+export const INPUT_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.input'),
+	rank: 1,
+};
+
+export const PREVIOUS_NODES_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.prevNodes'),
+	rank: 2,
+};
+
+export const METADATA_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.metadata'),
+	rank: 3,
+};
+
+export const FIELDS_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.fields'),
+	rank: 4,
+};
+
+export const METHODS_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.methods'),
+	rank: 5,
+};
+
+export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
+	{
+		label: '$json',
+		section: INPUT_SECTION,
+		info: i18n.rootVars.$json,
+	},
+	{
+		label: '$binary',
+		section: INPUT_SECTION,
+		info: i18n.rootVars.$binary,
+	},
+	{
+		label: '$input',
+		section: INPUT_SECTION,
+		info: i18n.rootVars.$input,
+	},
+	{
+		label: '$execution',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$execution,
+	},
+	{
+		label: '$itemIndex',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$itemIndex,
+	},
+	{
+		label: '$parameter',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$parameter,
+	},
+	{
+		label: '$prevNode',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$prevNode,
+	},
+	{
+		label: '$runIndex',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$runIndex,
+	},
+	{
+		label: '$vars',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$vars,
+	},
+	{
+		label: '$workflow',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$workflow,
+	},
+
+	{
+		label: '$now',
+		section: FIELDS_SECTION,
+		info: i18n.rootVars.$now,
+	},
+	{
+		label: '$today',
+		section: FIELDS_SECTION,
+		info: i18n.rootVars.$today,
+	},
+	{
+		label: '$if()',
+		section: METHODS_SECTION,
+		info: i18n.rootVars.$if,
+	},
+	{
+		label: '$ifEmpty()',
+		section: METHODS_SECTION,
+		info: i18n.rootVars.$ifEmpty,
+	},
+	{
+		label: '$jmespath()',
+		section: METHODS_SECTION,
+		info: i18n.rootVars.$jmespath,
+	},
+	{
+		label: '$max()',
+		section: METHODS_SECTION,
+		info: i18n.rootVars.$max,
+	},
+	{
+		label: '$min()',
+		section: METHODS_SECTION,
+		info: i18n.rootVars.$min,
+	},
+];
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index d7e22f56cfde8..652328c9ec562 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -1,5 +1,5 @@
 import type { IDataObject, DocMetadata, NativeDoc } from 'n8n-workflow';
-import { Expression, ExpressionExtensions, NativeMethods } from 'n8n-workflow';
+import { Expression, ExpressionExtensions, NativeMethods, validateFieldType } from 'n8n-workflow';
 import { DateTime } from 'luxon';
 import { i18n } from '@/plugins/i18n';
 import { resolveParameter } from '@/composables/useWorkflowHelpers';
@@ -14,6 +14,7 @@ import {
 	isPseudoParam,
 	stripExcessParens,
 	isCredentialsModalOpen,
+	applyCompletion,
 } from './utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { AutocompleteOptionType, ExtensionTypeName, FnToDoc, Resolved } from './types';
@@ -23,6 +24,8 @@ import { luxonInstanceDocs } from './nativesAutocompleteDocs/luxon.instance.docs
 import { luxonStaticDocs } from './nativesAutocompleteDocs/luxon.static.docs';
 import { useEnvironmentsStore } from '@/stores/environments.ee.store';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
+import { FIELDS_SECTION, METHODS_SECTION, RECOMMENDED_SECTION } from './constants';
+import { VALID_EMAIL_REGEX } from '@/constants';
 
 /**
  * Resolution-based completions offered according to datatype.
@@ -87,23 +90,23 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
 	};
 }
 
-function datatypeOptions(resolved: Resolved, toResolve: string) {
+function datatypeOptions(resolved: Resolved, toResolve: string): Completion[] {
 	if (resolved === null) return [];
 
 	if (typeof resolved === 'number') {
-		return [...natives('number'), ...extensions('number')];
+		return numberOptions(resolved);
 	}
 
 	if (typeof resolved === 'string') {
-		return [...natives('string'), ...extensions('string')];
+		return stringOptions(resolved);
 	}
 
-	if (['$now', '$today'].includes(toResolve)) {
-		return [...luxonInstanceOptions(), ...extensions('date')];
+	if (resolved instanceof DateTime) {
+		return luxonOptions();
 	}
 
 	if (resolved instanceof Date) {
-		return [...natives('date'), ...extensions('date')];
+		return dateOptions();
 	}
 
 	if (Array.isArray(resolved)) {
@@ -167,9 +170,13 @@ const createCompletionOption = (
 	optionType: AutocompleteOptionType,
 	docInfo: { doc?: DocMetadata | undefined },
 ): Completion => {
+	const isFunction = isFunctionOption(optionType);
+	const label = isFunction ? name + '()' : name;
 	const option: Completion = {
-		label: isFunctionOption(optionType) ? name + '()' : name,
+		label,
 		type: optionType,
+		section: isFunction ? METHODS_SECTION : FIELDS_SECTION,
+		apply: applyCompletion,
 	};
 
 	option.info = () => {
@@ -302,21 +309,18 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 			const option: Completion = {
 				label: isFunction ? key + '()' : key,
 				type: isFunction ? 'function' : 'keyword',
+				section: isFunction ? METHODS_SECTION : FIELDS_SECTION,
+				apply: applyCompletion,
 			};
 
 			const infoKey = [name, key].join('.');
-			option.info = createCompletionOption(
-				'Object',
-				key,
-				isFunction ? 'native-function' : 'keyword',
-				{
-					doc: {
-						name: key,
-						returnType: typeof resolved[key],
-						description: i18n.proxyVars[infoKey],
-					},
+			option.info = createCompletionOption('', key, isFunction ? 'native-function' : 'keyword', {
+				doc: {
+					name: key,
+					returnType: typeof resolved[key],
+					description: i18n.proxyVars[infoKey],
 				},
-			).info;
+			}).info;
 
 			return option;
 		});
@@ -324,7 +328,7 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 	const skipObjectExtensions =
 		resolved.isProxy ||
 		resolved.json ||
-		/json('])?$/.test(toResolve) ||
+		/json('])$/.test(toResolve) ||
 		toResolve === '$execution' ||
 		toResolve.endsWith('params') ||
 		toResolve === 'Math';
@@ -334,6 +338,83 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 	return [...localKeys, ...natives('object'), ...extensions('object')];
 };
 
+const withRecommendedSection = (options: Completion[], recommended: string[]): Completion[] => {
+	const recommendedSet = new Set(recommended);
+	return options
+		.filter((option) => recommendedSet.has(option.label))
+		.map((option): Completion => ({ ...option, section: RECOMMENDED_SECTION }))
+		.concat(options);
+};
+
+const isUrl = (url: string): boolean => {
+	try {
+		new URL(url);
+		return true;
+	} catch (error) {
+		return false;
+	}
+};
+
+const stringOptions = (resolved: string): Completion[] => {
+	const options = [...natives('string'), ...extensions('string')].sort((a, b) =>
+		a.label.localeCompare(b.label),
+	);
+
+	const baseRecommended = ['includes()', 'startsWith()', 'replaceAll()', 'length'];
+
+	if (validateFieldType('string', resolved, 'number').valid) {
+		return withRecommendedSection(options, ['toInt()', 'toFloat()', ...baseRecommended]);
+	}
+
+	if (validateFieldType('string', resolved, 'dateTime').valid) {
+		return withRecommendedSection(options, ['toDate()', ...baseRecommended]);
+	}
+
+	if (validateFieldType('string', resolved, 'object').valid) {
+		return withRecommendedSection(options, ['toObject()', ...baseRecommended]);
+	}
+
+	if (validateFieldType('string', resolved, 'boolean').valid) {
+		return withRecommendedSection(options, ['toBoolean()', ...baseRecommended]);
+	}
+
+	if (VALID_EMAIL_REGEX.test(resolved) || isUrl(resolved)) {
+		return withRecommendedSection(options, ['extractDomain()', ...baseRecommended]);
+	}
+
+	if (resolved.split(/\s/).find((token) => VALID_EMAIL_REGEX.test(token))) {
+		return withRecommendedSection(options, ['extractEmail()', ...baseRecommended]);
+	}
+
+	return withRecommendedSection(options, baseRecommended);
+};
+
+const numberOptions = (resolved: number): Completion[] => {
+	const options = [...natives('number'), ...extensions('number')].sort((a, b) =>
+		a.label.localeCompare(b.label),
+	);
+
+	if (validateFieldType('number', resolved, 'boolean').valid) {
+		return withRecommendedSection(options, ['toBoolean()']);
+	}
+
+	if (!Number.isInteger(resolved)) {
+		return withRecommendedSection(options, ['round()']);
+	}
+
+	return options;
+};
+
+const dateOptions = (): Completion[] => {
+	return [...natives('date'), ...extensions('date')].sort((a, b) => a.label.localeCompare(b.label));
+};
+
+const luxonOptions = (): Completion[] => {
+	return [...luxonInstanceOptions(), ...extensions('date')].sort((a, b) =>
+		a.label.localeCompare(b.label),
+	);
+};
+
 function ensureKeyCanBeResolved(obj: IDataObject, key: string) {
 	try {
 		obj[key];
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/dollar.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/dollar.completions.ts
index 0eedd1cf7baac..527ea45001620 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/dollar.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/dollar.completions.ts
@@ -3,15 +3,16 @@ import {
 	autocompletableNodeNames,
 	receivesNoBinaryData,
 	longestCommonPrefix,
-	setRank,
 	prefixMatch,
 	stripExcessParens,
 	hasActiveNode,
 	isCredentialsModalOpen,
+	applyCompletion,
 } from './utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { escapeMappingString } from '@/utils/mappingUtils';
+import { PREVIOUS_NODES_SECTION, ROOT_DOLLAR_COMPLETIONS } from './constants';
 
 /**
  * Completions offered at the dollar position: `$|`
@@ -45,10 +46,8 @@ export function dollarCompletions(context: CompletionContext): CompletionResult
 	};
 }
 
-export function dollarOptions() {
-	const rank = setRank(['$json', '$input']);
+export function dollarOptions(): Completion[] {
 	const SKIP = new Set();
-	const DOLLAR_FUNCTIONS = ['$jmespath', '$ifEmpty'];
 
 	if (isCredentialsModalOpen()) {
 		return useExternalSecretsStore().isEnterpriseExternalSecretsEnabled
@@ -71,29 +70,14 @@ export function dollarOptions() {
 
 	if (receivesNoBinaryData()) SKIP.add('$binary');
 
-	const keys = Object.keys(i18n.rootVars).sort((a, b) => a.localeCompare(b));
+	const previousNodesCompletions = autocompletableNodeNames().map((nodeName) => ({
+		label: `$('${escapeMappingString(nodeName)}')`,
+		type: 'keyword',
+		info: i18n.baseText('codeNodeEditor.completer.$()', { interpolate: { nodeName } }),
+		section: PREVIOUS_NODES_SECTION,
+	}));
 
-	return rank(keys)
-		.filter((key) => !SKIP.has(key))
-		.map((key) => {
-			const isFunction = DOLLAR_FUNCTIONS.includes(key);
-
-			const option: Completion = {
-				label: isFunction ? key + '()' : key,
-				type: isFunction ? 'function' : 'keyword',
-			};
-
-			const info = i18n.rootVars[key];
-
-			if (info) option.info = info;
-
-			return option;
-		})
-		.concat(
-			autocompletableNodeNames().map((nodeName) => ({
-				label: `$('${escapeMappingString(nodeName)}')`,
-				type: 'keyword',
-				info: i18n.baseText('codeNodeEditor.completer.$()', { interpolate: { nodeName } }),
-			})),
-		);
+	return ROOT_DOLLAR_COMPLETIONS.filter(({ label }) => !SKIP.has(label))
+		.concat(previousNodesCompletions)
+		.map((completion) => ({ ...completion, apply: applyCompletion }));
 }
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
index ec68d1ff35132..84f54e6529e86 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
@@ -4,7 +4,14 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { resolveParameter } from '@/composables/useWorkflowHelpers';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useUIStore } from '@/stores/ui.store';
-import type { Completion, CompletionContext } from '@codemirror/autocomplete';
+import {
+	insertCompletionText,
+	type Completion,
+	type CompletionContext,
+	pickedCompletion,
+} from '@codemirror/autocomplete';
+import type { EditorView } from '@codemirror/view';
+import type { TransactionSpec } from '@codemirror/state';
 
 // String literal expression is everything enclosed in single, double or tick quotes following a dot
 const stringLiteralRegex = /^"[^"]+"|^'[^']+'|^`[^`]+`\./;
@@ -157,3 +164,26 @@ export const stripExcessParens = (context: CompletionContext) => (option: Comple
 
 	return option;
 };
+
+/**
+ * When a function completion is selected, set the cursor correctly
+ * e.g. `$max()` -> `$max(<cursor>)`
+ */
+export const applyCompletion = (
+	view: EditorView,
+	completion: Completion,
+	from: number,
+	to: number,
+): void => {
+	const tx: TransactionSpec = {
+		...insertCompletionText(view.state, completion.label, from, to),
+		annotations: pickedCompletion.of(completion),
+	};
+
+	if (completion.label.endsWith('()')) {
+		const cursorPosition = from + completion.label.length - 1;
+		tx.selection = { anchor: cursorPosition, head: cursorPosition };
+	}
+
+	view.dispatch(tx);
+};
diff --git a/packages/editor-ui/src/plugins/i18n/index.ts b/packages/editor-ui/src/plugins/i18n/index.ts
index d0768ad745b3d..18942a50a8c0b 100644
--- a/packages/editor-ui/src/plugins/i18n/index.ts
+++ b/packages/editor-ui/src/plugins/i18n/index.ts
@@ -357,7 +357,7 @@ export class I18nClass {
 		});
 	}
 
-	rootVars: Record<string, string | undefined> = {
+	rootVars = {
 		$binary: this.baseText('codeNodeEditor.completer.binary'),
 		$execution: this.baseText('codeNodeEditor.completer.$execution'),
 		$ifEmpty: this.baseText('codeNodeEditor.completer.$ifEmpty'),
@@ -375,7 +375,8 @@ export class I18nClass {
 		$today: this.baseText('codeNodeEditor.completer.$today'),
 		$vars: this.baseText('codeNodeEditor.completer.$vars'),
 		$workflow: this.baseText('codeNodeEditor.completer.$workflow'),
-	};
+		DateTime: this.baseText('codeNodeEditor.completer.dateTime'),
+	} as const satisfies Record<string, string | undefined>;
 
 	proxyVars: Record<string, string | undefined> = {
 		'$input.all': this.baseText('codeNodeEditor.completer.$input.all'),
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 5d2d4b003f7fe..613256b06345a 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -205,6 +205,7 @@
 	"codeNodeEditor.completer.$workflow.active": "Whether the workflow is active or not (boolean)",
 	"codeNodeEditor.completer.$workflow.id": "The ID of the workflow",
 	"codeNodeEditor.completer.$workflow.name": "The name of the workflow",
+	"codeNodeEditor.completer.dateTime": "Luxon DateTime. Use this object to parse, format and manipulate dates and times",
 	"codeNodeEditor.completer.binary": "The item's binary (file) data",
 	"codeNodeEditor.completer.globalObject.assign": "Copy of the object containing all enumerable own properties",
 	"codeNodeEditor.completer.globalObject.entries": "The object's keys and values",
@@ -314,6 +315,12 @@
 	"codeNodeEditor.completer.selector.itemMatching": "@:_reusableBaseText.codeNodeEditor.completer.itemMatching",
 	"codeNodeEditor.completer.selector.last": "@:_reusableBaseText.codeNodeEditor.completer.last",
 	"codeNodeEditor.completer.selector.params": "The parameters of the node",
+	"codeNodeEditor.completer.section.input": "Input",
+	"codeNodeEditor.completer.section.prevNodes": "Previous nodes",
+	"codeNodeEditor.completer.section.metadata": "Metadata",
+	"codeNodeEditor.completer.section.fields": "Fields",
+	"codeNodeEditor.completer.section.methods": "Methods",
+	"codeNodeEditor.completer.section.recommended": "Suggested",
 	"codeNodeEditor.linter.allItems.firstOrLastCalledWithArg": "expects no argument.",
 	"codeNodeEditor.linter.allItems.emptyReturn": "Code doesn't return items properly. Please return an array of objects, one for each item you would like to output.",
 	"codeNodeEditor.linter.allItems.itemCall": "`item` is a property to access, not a method to call. Did you mean `.item` without brackets?",

From a73a2ae9505b5fbbe266ee3dabcbaa00716cb661 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 22 Feb 2024 14:46:01 +0100
Subject: [PATCH 05/25] Add test coverage for sections and recommended
 completions

---
 .../completions/__tests__/completions.test.ts | 233 ++++++++++++------
 .../codemirror/completions/constants.ts       |   2 +
 .../completions/datatype.completions.ts       |  43 ++--
 .../src/plugins/codemirror/keymap.ts          |   1 -
 4 files changed, 175 insertions(+), 104 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
index c7e5f3af36244..15aeb96d9048a 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
@@ -22,6 +22,14 @@ import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
 import { setupServer } from '@/__tests__/server';
+import {
+	FIELDS_SECTION,
+	INPUT_SECTION,
+	METADATA_SECTION,
+	METHODS_SECTION,
+	RECOMMENDED_SECTION,
+	STRING_RECOMMENDED_OPTIONS,
+} from '../constants';
 
 let externalSecretsStore: ReturnType<typeof useExternalSecretsStore>;
 let uiStore: ReturnType<typeof useUIStore>;
@@ -63,7 +71,18 @@ describe('No completions', () => {
 
 describe('Top-level completions', () => {
 	test('should return dollar completions for blank position: {{ | }}', () => {
-		expect(completions('{{ | }}')).toHaveLength(dollarOptions().length);
+		const result = completions('{{ | }}');
+		expect(result).toHaveLength(dollarOptions().length);
+
+		expect(result?.[0]).toEqual(
+			expect.objectContaining({ label: '$json', section: INPUT_SECTION }),
+		);
+		expect(result?.[4]).toEqual(
+			expect.objectContaining({ label: '$parameter', section: METADATA_SECTION }),
+		);
+		expect(result?.[12]).toEqual(
+			expect.objectContaining({ label: '$ifEmpty()', section: METHODS_SECTION }),
+		);
 	});
 
 	test('should return DateTime completion for: {{ D| }}', () => {
@@ -107,18 +126,16 @@ describe('Top-level completions', () => {
 });
 
 describe('Luxon method completions', () => {
-	const resolveParameterSpy = vi.spyOn(workflowHelpers, 'resolveParameter');
-
 	test('should return class completions for: {{ DateTime.| }}', () => {
 		// @ts-expect-error Spied function is mistyped
-		resolveParameterSpy.mockReturnValueOnce(DateTime);
+		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime);
 
 		expect(completions('{{ DateTime.| }}')).toHaveLength(luxonStaticOptions().length);
 	});
 
 	test('should return instance completions for: {{ $now.| }}', () => {
 		// @ts-expect-error Spied function is mistyped
-		resolveParameterSpy.mockReturnValueOnce(DateTime.now());
+		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 
 		expect(completions('{{ $now.| }}')).toHaveLength(
 			luxonInstanceOptions().length + extensions('date').length,
@@ -127,7 +144,7 @@ describe('Luxon method completions', () => {
 
 	test('should return instance completions for: {{ $today.| }}', () => {
 		// @ts-expect-error Spied function is mistyped
-		resolveParameterSpy.mockReturnValueOnce(DateTime.now());
+		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 
 		expect(completions('{{ $today.| }}')).toHaveLength(
 			luxonInstanceOptions().length + extensions('date').length,
@@ -136,30 +153,33 @@ describe('Luxon method completions', () => {
 });
 
 describe('Resolution-based completions', () => {
-	const resolveParameterSpy = vi.spyOn(workflowHelpers, 'resolveParameter');
-
 	describe('literals', () => {
 		test('should return completions for string literal: {{ "abc".| }}', () => {
 			// @ts-expect-error Spied function is mistyped
-			resolveParameterSpy.mockReturnValueOnce('abc');
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce('abc');
 
 			expect(completions('{{ "abc".| }}')).toHaveLength(
-				natives('string').length + extensions('string').length,
+				natives('string').length + extensions('string').length + STRING_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
 		test('should properly handle string that contain dollar signs', () => {
 			// @ts-expect-error Spied function is mistyped
-			resolveParameterSpy.mockReturnValueOnce('"You \'owe\' me 200$"');
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce("You 'owe' me 200$ ");
+
+			const result = completions('{{ "You \'owe\' me 200$".| }}');
 
-			expect(completions('{{ "You \'owe\' me 200$".| }}')).toHaveLength(
-				natives('string').length + extensions('string').length,
+			expect(result).toHaveLength(
+				natives('string').length +
+					extensions('string').length +
+					STRING_RECOMMENDED_OPTIONS.length +
+					1,
 			);
 		});
 
 		test('should return completions for number literal: {{ (123).| }}', () => {
 			// @ts-expect-error Spied function is mistyped
-			resolveParameterSpy.mockReturnValueOnce(123);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(123);
 
 			expect(completions('{{ (123).| }}')).toHaveLength(
 				natives('number').length + extensions('number').length,
@@ -168,7 +188,7 @@ describe('Resolution-based completions', () => {
 
 		test('should return completions for array literal: {{ [1, 2, 3].| }}', () => {
 			// @ts-expect-error Spied function is mistyped
-			resolveParameterSpy.mockReturnValueOnce([1, 2, 3]);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce([1, 2, 3]);
 
 			expect(completions('{{ [1, 2, 3].| }}')).toHaveLength(
 				natives('array').length + extensions('array').length,
@@ -177,7 +197,7 @@ describe('Resolution-based completions', () => {
 
 		test('should return completions for Object methods: {{ Object.values({ abc: 123 }).| }}', () => {
 			// @ts-expect-error Spied function is mistyped
-			resolveParameterSpy.mockReturnValueOnce([123]);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce([123]);
 
 			const found = completions('{{ Object.values({ abc: 123 }).| }}');
 
@@ -189,10 +209,10 @@ describe('Resolution-based completions', () => {
 		test('should return completions for object literal', () => {
 			const object = { a: 1 };
 
-			resolveParameterSpy.mockReturnValueOnce(object);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(object);
 
 			expect(completions('{{ ({ a: 1 }).| }}')).toHaveLength(
-				Object.keys(object).length + natives('object').length + extensions('object').length,
+				Object.keys(object).length + extensions('object').length,
 			);
 		});
 	});
@@ -200,20 +220,19 @@ describe('Resolution-based completions', () => {
 	describe('indexed access completions', () => {
 		test('should return string completions for indexed access that resolves to string literal: {{ "abc"[0].| }}', () => {
 			// @ts-expect-error Spied function is mistyped
-			resolveParameterSpy.mockReturnValueOnce('a');
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce('a');
 
 			expect(completions('{{ "abc"[0].| }}')).toHaveLength(
-				natives('string').length + extensions('string').length,
+				natives('string').length + extensions('string').length + STRING_RECOMMENDED_OPTIONS.length,
 			);
 		});
 	});
 
 	describe('complex expression completions', () => {
-		const resolveParameterSpy = vi.spyOn(workflowHelpers, 'resolveParameter');
 		const { $input } = mockProxy;
 
 		test('should return completions when $input is used as a function parameter', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json.num);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.num);
 			const found = completions('{{ Math.abs($input.item.json.num1).| }}');
 			if (!found) throw new Error('Expected to find completions');
 			expect(found).toHaveLength(extensions('number').length + natives('number').length);
@@ -228,58 +247,60 @@ describe('Resolution-based completions', () => {
 		});
 
 		test('should return completions for complex expression: {{ $now.diff($now.diff($now.|)) }}', () => {
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 			expect(completions('{{ $now.diff($now.diff($now.|)) }}')).toHaveLength(
-				natives('date').length + extensions('object').length,
+				luxonInstanceOptions().length + extensions('date').length,
 			);
 		});
 
 		test('should return completions for complex expression: {{ $execution.resumeUrl.includes($json.) }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce($input.item.json);
 			const { $json } = mockProxy;
 			const found = completions('{{ $execution.resumeUrl.includes($json.|) }}');
 
 			if (!found) throw new Error('Expected to find completions');
-			expect(found).toHaveLength(Object.keys($json).length + natives('object').length);
+			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
 		});
 
 		test('should return completions for operation expression: {{ $now.day + $json. }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce($input.item.json);
 			const { $json } = mockProxy;
 			const found = completions('{{ $now.day + $json.| }}');
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(Object.keys($json).length + natives('object').length);
+			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
 		});
 
 		test('should return completions for operation expression: {{ Math.abs($now.day) >= 10 ? $now : Math.abs($json.). }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json);
 			const { $json } = mockProxy;
 			const found = completions('{{ Math.abs($now.day) >= 10 ? $now : Math.abs($json.|) }}');
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(Object.keys($json).length + natives('object').length);
+			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
 		});
 	});
 
 	describe('bracket-aware completions', () => {
-		const resolveParameterSpy = vi.spyOn(workflowHelpers, 'resolveParameter');
 		const { $input } = mockProxy;
 
 		test('should return bracket-aware completions for: {{ $input.item.json.str.|() }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json.str);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.str);
 
 			const found = completions('{{ $input.item.json.str.|() }}');
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(extensions('string').length + natives('string').length);
+			expect(found).toHaveLength(
+				extensions('string').length + natives('string').length + STRING_RECOMMENDED_OPTIONS.length,
+			);
 			expect(found.map((c) => c.label).every((l) => !l.endsWith('()')));
 		});
 
 		test('should return bracket-aware completions for: {{ $input.item.json.num.|() }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json.num);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.num);
 
 			const found = completions('{{ $input.item.json.num.|() }}');
 
@@ -290,7 +311,7 @@ describe('Resolution-based completions', () => {
 		});
 
 		test('should return bracket-aware completions for: {{ $input.item.json.arr.| }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json.arr);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.arr);
 
 			const found = completions('{{ $input.item.json.arr.|() }}');
 
@@ -302,14 +323,13 @@ describe('Resolution-based completions', () => {
 	});
 
 	describe('secrets', () => {
-		const resolveParameterSpy = vi.spyOn(workflowHelpers, 'resolveParameter');
-		const { $input, $ } = mockProxy;
+		const { $input } = mockProxy;
 
 		test('should return completions for: {{ $secrets.| }}', () => {
 			const provider = 'infisical';
 			const secrets = ['SECRET'];
 
-			resolveParameterSpy.mockReturnValue($input);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input);
 
 			uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].open = true;
 			settingsStore.settings.enterprise[EnterpriseEditionFeature.ExternalSecrets] = true;
@@ -324,6 +344,8 @@ describe('Resolution-based completions', () => {
 					info: expect.any(Function),
 					label: provider,
 					type: 'keyword',
+					apply: expect.any(Function),
+					section: FIELDS_SECTION,
 				},
 			]);
 		});
@@ -332,7 +354,7 @@ describe('Resolution-based completions', () => {
 			const provider = 'infisical';
 			const secrets = ['SECRET1', 'SECRET2'];
 
-			resolveParameterSpy.mockReturnValue($input);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input);
 
 			uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].open = true;
 			settingsStore.settings.enterprise[EnterpriseEditionFeature.ExternalSecrets] = true;
@@ -347,130 +369,125 @@ describe('Resolution-based completions', () => {
 					info: expect.any(Function),
 					label: secrets[0],
 					type: 'keyword',
+					apply: expect.any(Function),
+					section: FIELDS_SECTION,
 				},
 				{
 					info: expect.any(Function),
 					label: secrets[1],
 					type: 'keyword',
+					apply: expect.any(Function),
+					section: FIELDS_SECTION,
 				},
 			]);
 		});
 	});
 
 	describe('references', () => {
-		const resolveParameterSpy = vi.spyOn(workflowHelpers, 'resolveParameter');
 		const { $input, $ } = mockProxy;
 
 		test('should return completions for: {{ $input.| }}', () => {
-			resolveParameterSpy.mockReturnValue($input);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input);
 
-			expect(completions('{{ $input.| }}')).toHaveLength(
-				Reflect.ownKeys($input).length + natives('object').length,
-			);
+			expect(completions('{{ $input.| }}')).toHaveLength(Reflect.ownKeys($input).length);
 		});
 
 		test('should return completions for: {{ "hello"+input.| }}', () => {
-			resolveParameterSpy.mockReturnValue($input);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input);
 
-			expect(completions('{{ "hello"+$input.| }}')).toHaveLength(
-				Reflect.ownKeys($input).length + natives('object').length,
-			);
+			expect(completions('{{ "hello"+$input.| }}')).toHaveLength(Reflect.ownKeys($input).length);
 		});
 
 		test("should return completions for: {{ $('nodeName').| }}", () => {
-			resolveParameterSpy.mockReturnValue($('Rename'));
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($('Rename'));
 
 			expect(completions('{{ $("Rename").| }}')).toHaveLength(
-				Reflect.ownKeys($('Rename')).length + natives('object').length - ['pairedItem'].length,
+				Reflect.ownKeys($('Rename')).length - ['pairedItem'].length,
 			);
 		});
 
 		test('should return completions for: {{ $input.item.| }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item);
 
 			const found = completions('{{ $input.item.| }}');
 
 			if (!found) throw new Error('Expected to find completion');
 
-			expect(found).toHaveLength(3);
+			expect(found).toHaveLength(1);
 			expect(found[0].label).toBe('json');
 		});
 
 		test('should return completions for: {{ $input.first().| }}', () => {
-			resolveParameterSpy.mockReturnValue($input.first());
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.first());
 
 			const found = completions('{{ $input.first().| }}');
 
 			if (!found) throw new Error('Expected to find completion');
 
-			expect(found).toHaveLength(3);
+			expect(found).toHaveLength(1);
 			expect(found[0].label).toBe('json');
 		});
 
 		test('should return completions for: {{ $input.last().| }}', () => {
-			resolveParameterSpy.mockReturnValue($input.last());
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.last());
 
 			const found = completions('{{ $input.last().| }}');
 
 			if (!found) throw new Error('Expected to find completion');
 
-			expect(found).toHaveLength(3);
+			expect(found).toHaveLength(1);
 			expect(found[0].label).toBe('json');
 		});
 
 		test('should return no completions for: {{ $input.all().| }}', () => {
 			// @ts-expect-error
-			resolveParameterSpy.mockReturnValue([$input.item]);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue([$input.item]);
 
 			expect(completions('{{ $input.all().| }}')).toBeNull();
 		});
 
 		test("should return completions for: '{{ $input.item.| }}'", () => {
-			resolveParameterSpy.mockReturnValue($input.item.json);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json);
 
 			expect(completions('{{ $input.item.| }}')).toHaveLength(
-				Object.keys($input.item.json).length +
-					(extensions('object').length + natives('object').length),
+				Object.keys($input.item.json).length + extensions('object').length,
 			);
 		});
 
 		test("should return completions for: '{{ $input.first().| }}'", () => {
-			resolveParameterSpy.mockReturnValue($input.first().json);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.first().json);
 
 			expect(completions('{{ $input.first().| }}')).toHaveLength(
-				Object.keys($input.first().json).length +
-					(extensions('object').length + natives('object').length),
+				Object.keys($input.first().json).length + extensions('object').length,
 			);
 		});
 
 		test("should return completions for: '{{ $input.last().| }}'", () => {
-			resolveParameterSpy.mockReturnValue($input.last().json);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.last().json);
 
 			expect(completions('{{ $input.last().| }}')).toHaveLength(
-				Object.keys($input.last().json).length +
-					(extensions('object').length + natives('object').length),
+				Object.keys($input.last().json).length + extensions('object').length,
 			);
 		});
 
 		test("should return completions for: '{{ $input.all()[0].| }}'", () => {
-			resolveParameterSpy.mockReturnValue($input.all()[0].json);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.all()[0].json);
 
 			expect(completions('{{ $input.all()[0].| }}')).toHaveLength(
-				Object.keys($input.all()[0].json).length +
-					(extensions('object').length + natives('object').length),
+				Object.keys($input.all()[0].json).length + extensions('object').length,
 			);
 		});
 
 		test('should return completions for: {{ $input.item.json.str.| }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json.str);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.str);
 
 			expect(completions('{{ $input.item.json.str.| }}')).toHaveLength(
-				extensions('string').length + natives('string').length,
+				extensions('string').length + natives('string').length + STRING_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
 		test('should return completions for: {{ $input.item.json.num.| }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json.num);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.num);
 
 			expect(completions('{{ $input.item.json.num.| }}')).toHaveLength(
 				extensions('number').length + natives('number').length,
@@ -478,7 +495,7 @@ describe('Resolution-based completions', () => {
 		});
 
 		test('should return completions for: {{ $input.item.json.arr.| }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json.arr);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.arr);
 
 			expect(completions('{{ $input.item.json.arr.| }}')).toHaveLength(
 				extensions('array').length + natives('array').length,
@@ -486,22 +503,20 @@ describe('Resolution-based completions', () => {
 		});
 
 		test('should return completions for: {{ $input.item.json.obj.| }}', () => {
-			resolveParameterSpy.mockReturnValue($input.item.json.obj);
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.obj);
 
 			expect(completions('{{ $input.item.json.obj.| }}')).toHaveLength(
-				Object.keys($input.item.json.obj).length +
-					(extensions('object').length + natives('object').length),
+				Object.keys($input.item.json.obj).length + extensions('object').length,
 			);
 		});
 	});
 
 	describe('bracket access', () => {
-		const resolveParameterSpy = vi.spyOn(workflowHelpers, 'resolveParameter');
 		const { $input } = mockProxy;
 
 		['{{ $input.item.json[| }}', '{{ $json[| }}'].forEach((expression) => {
 			test(`should return completions for: ${expression}`, () => {
-				resolveParameterSpy.mockReturnValue($input.item.json);
+				vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json);
 
 				const found = completions(expression);
 
@@ -514,7 +529,7 @@ describe('Resolution-based completions', () => {
 
 		["{{ $input.item.json['obj'][| }}", "{{ $json['obj'][| }}"].forEach((expression) => {
 			test(`should return completions for: ${expression}`, () => {
-				resolveParameterSpy.mockReturnValue($input.item.json.obj);
+				vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.obj);
 
 				const found = completions(expression);
 
@@ -525,6 +540,68 @@ describe('Resolution-based completions', () => {
 			});
 		});
 	});
+
+	describe('recommended completions', () => {
+		test('should recommended toDate() for {{ "1-Feb-2024".| }}', () => {
+			// @ts-expect-error Spied function is mistyped
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce('1-Feb-2024');
+
+			expect(completions('{{ "1-Feb-2024".| }}')?.[0]).toEqual(
+				expect.objectContaining({ label: 'toDate()', section: RECOMMENDED_SECTION }),
+			);
+		});
+
+		test('should recommended toInt(),toFloat() for: {{ "5.3".| }}', () => {
+			// @ts-expect-error Spied function is mistyped
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce('5.3');
+			const options = completions('{{ "5.3".| }}');
+			expect(options?.[0]).toEqual(
+				expect.objectContaining({ label: 'toInt()', section: RECOMMENDED_SECTION }),
+			);
+			expect(options?.[1]).toEqual(
+				expect.objectContaining({ label: 'toFloat()', section: RECOMMENDED_SECTION }),
+			);
+		});
+
+		test('should recommended extractEmail() for: {{ "string with test@n8n.io in it".| }}', () => {
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(
+				// @ts-expect-error Spied function is mistyped
+				'string with test@n8n.io in it',
+			);
+			const options = completions('{{ "string with test@n8n.io in it".| }}');
+			expect(options?.[0]).toEqual(
+				expect.objectContaining({ label: 'extractEmail()', section: RECOMMENDED_SECTION }),
+			);
+		});
+
+		test('should recommended extractDomain() for: {{ "test@n8n.io".| }}', () => {
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(
+				// @ts-expect-error Spied function is mistyped
+				'test@n8n.io',
+			);
+			const options = completions('{{ "test@n8n.io".| }}');
+			expect(options?.[0]).toEqual(
+				expect.objectContaining({ label: 'extractDomain()', section: RECOMMENDED_SECTION }),
+			);
+		});
+
+		test('should recommended round(),floor(),ceil() for: {{ (5.46).| }}', () => {
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(
+				// @ts-expect-error Spied function is mistyped
+				5.46,
+			);
+			const options = completions('{{ (5.46).| }}');
+			expect(options?.[0]).toEqual(
+				expect.objectContaining({ label: 'round()', section: RECOMMENDED_SECTION }),
+			);
+			expect(options?.[1]).toEqual(
+				expect.objectContaining({ label: 'floor()', section: RECOMMENDED_SECTION }),
+			);
+			expect(options?.[2]).toEqual(
+				expect.objectContaining({ label: 'ceil()', section: RECOMMENDED_SECTION }),
+			);
+		});
+	});
 });
 
 export function completions(docWithCursor: string) {
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
index fef96f5b61b70..fe8a3e90cc745 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
@@ -119,3 +119,5 @@ export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
 		info: i18n.rootVars.$min,
 	},
 ];
+
+export const STRING_RECOMMENDED_OPTIONS = ['includes()', 'startsWith()', 'replaceAll()', 'length'];
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index 652328c9ec562..7f3646fb62319 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -24,7 +24,12 @@ import { luxonInstanceDocs } from './nativesAutocompleteDocs/luxon.instance.docs
 import { luxonStaticDocs } from './nativesAutocompleteDocs/luxon.static.docs';
 import { useEnvironmentsStore } from '@/stores/environments.ee.store';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
-import { FIELDS_SECTION, METHODS_SECTION, RECOMMENDED_SECTION } from './constants';
+import {
+	FIELDS_SECTION,
+	METHODS_SECTION,
+	RECOMMENDED_SECTION,
+	STRING_RECOMMENDED_OPTIONS,
+} from './constants';
 import { VALID_EMAIL_REGEX } from '@/constants';
 
 /**
@@ -339,10 +344,12 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 };
 
 const withRecommendedSection = (options: Completion[], recommended: string[]): Completion[] => {
-	const recommendedSet = new Set(recommended);
-	return options
-		.filter((option) => recommendedSet.has(option.label))
-		.map((option): Completion => ({ ...option, section: RECOMMENDED_SECTION }))
+	return recommended
+		.map((reco) => {
+			const option = options.find((op) => op.label === reco) as Completion;
+			option.section = RECOMMENDED_SECTION;
+			return option;
+		})
 		.concat(options);
 };
 
@@ -360,33 +367,23 @@ const stringOptions = (resolved: string): Completion[] => {
 		a.label.localeCompare(b.label),
 	);
 
-	const baseRecommended = ['includes()', 'startsWith()', 'replaceAll()', 'length'];
-
 	if (validateFieldType('string', resolved, 'number').valid) {
-		return withRecommendedSection(options, ['toInt()', 'toFloat()', ...baseRecommended]);
+		return withRecommendedSection(options, ['toInt()', 'toFloat()', ...STRING_RECOMMENDED_OPTIONS]);
 	}
 
 	if (validateFieldType('string', resolved, 'dateTime').valid) {
-		return withRecommendedSection(options, ['toDate()', ...baseRecommended]);
-	}
-
-	if (validateFieldType('string', resolved, 'object').valid) {
-		return withRecommendedSection(options, ['toObject()', ...baseRecommended]);
-	}
-
-	if (validateFieldType('string', resolved, 'boolean').valid) {
-		return withRecommendedSection(options, ['toBoolean()', ...baseRecommended]);
+		return withRecommendedSection(options, ['toDate()', ...STRING_RECOMMENDED_OPTIONS]);
 	}
 
 	if (VALID_EMAIL_REGEX.test(resolved) || isUrl(resolved)) {
-		return withRecommendedSection(options, ['extractDomain()', ...baseRecommended]);
+		return withRecommendedSection(options, ['extractDomain()', ...STRING_RECOMMENDED_OPTIONS]);
 	}
 
 	if (resolved.split(/\s/).find((token) => VALID_EMAIL_REGEX.test(token))) {
-		return withRecommendedSection(options, ['extractEmail()', ...baseRecommended]);
+		return withRecommendedSection(options, ['extractEmail()', ...STRING_RECOMMENDED_OPTIONS]);
 	}
 
-	return withRecommendedSection(options, baseRecommended);
+	return withRecommendedSection(options, STRING_RECOMMENDED_OPTIONS);
 };
 
 const numberOptions = (resolved: number): Completion[] => {
@@ -394,12 +391,8 @@ const numberOptions = (resolved: number): Completion[] => {
 		a.label.localeCompare(b.label),
 	);
 
-	if (validateFieldType('number', resolved, 'boolean').valid) {
-		return withRecommendedSection(options, ['toBoolean()']);
-	}
-
 	if (!Number.isInteger(resolved)) {
-		return withRecommendedSection(options, ['round()']);
+		return withRecommendedSection(options, ['round()', 'floor()', 'ceil()']);
 	}
 
 	return options;
diff --git a/packages/editor-ui/src/plugins/codemirror/keymap.ts b/packages/editor-ui/src/plugins/codemirror/keymap.ts
index 5d9dd82ff5dfb..f1d9316491584 100644
--- a/packages/editor-ui/src/plugins/codemirror/keymap.ts
+++ b/packages/editor-ui/src/plugins/codemirror/keymap.ts
@@ -49,7 +49,6 @@ export const enterKeyMap: KeyBinding[] = [
 
 const SELECTED_AUTOCOMPLETE_OPTION_SELECTOR = '.cm-tooltip-autocomplete li[aria-selected]';
 const onAutocompleteNavigate = (dir: 'up' | 'down') => (view: EditorView) => {
-	console.log('hi');
 	if (completionStatus(view.state) !== null) {
 		moveCompletionSelection(dir === 'down')(view);
 		document

From 34575a5d8572606e09c8d0b4df0448548ef96c34 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 22 Feb 2024 15:25:01 +0100
Subject: [PATCH 06/25] Add recommended completions for arrays,objects and
 dates

---
 .../completions/__tests__/completions.test.ts | 59 ++++++++----
 .../codemirror/completions/constants.ts       |  3 +
 .../completions/datatype.completions.ts       | 90 +++++++++++--------
 .../plugins/codemirror/completions/utils.ts   |  4 +
 .../src/Extensions/ObjectExtensions.ts        | 11 +--
 5 files changed, 107 insertions(+), 60 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
index 15aeb96d9048a..408ec14f2fb1c 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
@@ -23,10 +23,13 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
 import { setupServer } from '@/__tests__/server';
 import {
+	ARRAY_RECOMMENDED_OPTIONS,
 	FIELDS_SECTION,
 	INPUT_SECTION,
+	LUXON_RECOMMENDED_OPTIONS,
 	METADATA_SECTION,
 	METHODS_SECTION,
+	OBJECT_RECOMMENDED_OPTIONS,
 	RECOMMENDED_SECTION,
 	STRING_RECOMMENDED_OPTIONS,
 } from '../constants';
@@ -138,7 +141,7 @@ describe('Luxon method completions', () => {
 		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 
 		expect(completions('{{ $now.| }}')).toHaveLength(
-			luxonInstanceOptions().length + extensions('date').length,
+			luxonInstanceOptions().length + extensions('date').length + LUXON_RECOMMENDED_OPTIONS.length,
 		);
 	});
 
@@ -147,7 +150,7 @@ describe('Luxon method completions', () => {
 		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 
 		expect(completions('{{ $today.| }}')).toHaveLength(
-			luxonInstanceOptions().length + extensions('date').length,
+			luxonInstanceOptions().length + extensions('date').length + +LUXON_RECOMMENDED_OPTIONS.length,
 		);
 	});
 });
@@ -191,7 +194,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce([1, 2, 3]);
 
 			expect(completions('{{ [1, 2, 3].| }}')).toHaveLength(
-				natives('array').length + extensions('array').length,
+				natives('array').length + extensions('array').length + ARRAY_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
@@ -203,7 +206,9 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completion');
 
-			expect(found).toHaveLength(natives('array').length + extensions('array').length);
+			expect(found).toHaveLength(
+				natives('array').length + extensions('array').length + ARRAY_RECOMMENDED_OPTIONS.length,
+			);
 		});
 
 		test('should return completions for object literal', () => {
@@ -212,7 +217,9 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(object);
 
 			expect(completions('{{ ({ a: 1 }).| }}')).toHaveLength(
-				Object.keys(object).length + extensions('object').length,
+				Object.keys(object).length +
+					extensions('object').length +
+					OBJECT_RECOMMENDED_OPTIONS.length,
 			);
 		});
 	});
@@ -249,7 +256,9 @@ describe('Resolution-based completions', () => {
 		test('should return completions for complex expression: {{ $now.diff($now.diff($now.|)) }}', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 			expect(completions('{{ $now.diff($now.diff($now.|)) }}')).toHaveLength(
-				luxonInstanceOptions().length + extensions('date').length,
+				luxonInstanceOptions().length +
+					extensions('date').length +
+					LUXON_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
@@ -259,7 +268,9 @@ describe('Resolution-based completions', () => {
 			const found = completions('{{ $execution.resumeUrl.includes($json.|) }}');
 
 			if (!found) throw new Error('Expected to find completions');
-			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
+			expect(found).toHaveLength(
+				Object.keys($json).length + extensions('object').length + OBJECT_RECOMMENDED_OPTIONS.length,
+			);
 		});
 
 		test('should return completions for operation expression: {{ $now.day + $json. }}', () => {
@@ -269,7 +280,9 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
+			expect(found).toHaveLength(
+				Object.keys($json).length + extensions('object').length + OBJECT_RECOMMENDED_OPTIONS.length,
+			);
 		});
 
 		test('should return completions for operation expression: {{ Math.abs($now.day) >= 10 ? $now : Math.abs($json.). }}', () => {
@@ -279,7 +292,9 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
+			expect(found).toHaveLength(
+				Object.keys($json).length + extensions('object').length + OBJECT_RECOMMENDED_OPTIONS.length,
+			);
 		});
 	});
 
@@ -317,7 +332,9 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(extensions('array').length + natives('array').length);
+			expect(found).toHaveLength(
+				extensions('array').length + natives('array').length + ARRAY_RECOMMENDED_OPTIONS.length,
+			);
 			expect(found.map((c) => c.label).every((l) => !l.endsWith('()')));
 		});
 	});
@@ -450,7 +467,9 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json);
 
 			expect(completions('{{ $input.item.| }}')).toHaveLength(
-				Object.keys($input.item.json).length + extensions('object').length,
+				Object.keys($input.item.json).length +
+					extensions('object').length +
+					OBJECT_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
@@ -458,7 +477,9 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.first().json);
 
 			expect(completions('{{ $input.first().| }}')).toHaveLength(
-				Object.keys($input.first().json).length + extensions('object').length,
+				Object.keys($input.first().json).length +
+					extensions('object').length +
+					OBJECT_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
@@ -466,7 +487,9 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.last().json);
 
 			expect(completions('{{ $input.last().| }}')).toHaveLength(
-				Object.keys($input.last().json).length + extensions('object').length,
+				Object.keys($input.last().json).length +
+					extensions('object').length +
+					OBJECT_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
@@ -474,7 +497,9 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.all()[0].json);
 
 			expect(completions('{{ $input.all()[0].| }}')).toHaveLength(
-				Object.keys($input.all()[0].json).length + extensions('object').length,
+				Object.keys($input.all()[0].json).length +
+					extensions('object').length +
+					OBJECT_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
@@ -498,7 +523,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.arr);
 
 			expect(completions('{{ $input.item.json.arr.| }}')).toHaveLength(
-				extensions('array').length + natives('array').length,
+				extensions('array').length + natives('array').length + ARRAY_RECOMMENDED_OPTIONS.length,
 			);
 		});
 
@@ -506,7 +531,9 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.obj);
 
 			expect(completions('{{ $input.item.json.obj.| }}')).toHaveLength(
-				Object.keys($input.item.json.obj).length + extensions('object').length,
+				Object.keys($input.item.json.obj).length +
+					extensions('object').length +
+					OBJECT_RECOMMENDED_OPTIONS.length,
 			);
 		});
 	});
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
index fe8a3e90cc745..d2cce78e47f2a 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
@@ -121,3 +121,6 @@ export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
 ];
 
 export const STRING_RECOMMENDED_OPTIONS = ['includes()', 'startsWith()', 'replaceAll()', 'length'];
+export const LUXON_RECOMMENDED_OPTIONS = ['format()', 'minus()', 'plus()', 'diff()'];
+export const ARRAY_RECOMMENDED_OPTIONS = ['length', 'last()', 'includes()', 'map()', 'filter()'];
+export const OBJECT_RECOMMENDED_OPTIONS = ['keys()', 'values()', 'isEmpty()'];
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index 7f3646fb62319..3192ecef98c92 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -15,6 +15,7 @@ import {
 	stripExcessParens,
 	isCredentialsModalOpen,
 	applyCompletion,
+	sortCompletionsAlpha,
 } from './utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { AutocompleteOptionType, ExtensionTypeName, FnToDoc, Resolved } from './types';
@@ -25,8 +26,11 @@ import { luxonStaticDocs } from './nativesAutocompleteDocs/luxon.static.docs';
 import { useEnvironmentsStore } from '@/stores/environments.ee.store';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import {
+	ARRAY_RECOMMENDED_OPTIONS,
 	FIELDS_SECTION,
+	LUXON_RECOMMENDED_OPTIONS,
 	METHODS_SECTION,
+	OBJECT_RECOMMENDED_OPTIONS,
 	RECOMMENDED_SECTION,
 	STRING_RECOMMENDED_OPTIONS,
 } from './constants';
@@ -115,16 +119,7 @@ function datatypeOptions(resolved: Resolved, toResolve: string): Completion[] {
 	}
 
 	if (Array.isArray(resolved)) {
-		if (/all\(.*?\)/.test(toResolve)) return [];
-
-		const arrayMethods = [...natives('array'), ...extensions('array')];
-
-		if (resolved.length > 0 && resolved.some((i) => typeof i !== 'number')) {
-			const NUMBER_ONLY_ARRAY_EXTENSIONS = new Set(['max()', 'min()', 'sum()', 'average()']);
-
-			return arrayMethods.filter((m) => !NUMBER_ONLY_ARRAY_EXTENSIONS.has(m.label));
-		}
-		return arrayMethods;
+		return arrayOptions(toResolve, resolved);
 	}
 
 	if (typeof resolved === 'object') {
@@ -314,7 +309,7 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 			const option: Completion = {
 				label: isFunction ? key + '()' : key,
 				type: isFunction ? 'function' : 'keyword',
-				section: isFunction ? METHODS_SECTION : FIELDS_SECTION,
+				section: isFunction ? METHODS_SECTION : { ...FIELDS_SECTION, rank: -1 },
 				apply: applyCompletion,
 			};
 
@@ -338,17 +333,21 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 		toResolve.endsWith('params') ||
 		toResolve === 'Math';
 
-	if (skipObjectExtensions) return [...localKeys, ...natives('object')];
+	if (skipObjectExtensions) {
+		return sortCompletionsAlpha([...localKeys, ...natives('object')]);
+	}
 
-	return [...localKeys, ...natives('object'), ...extensions('object')];
+	return withRecommendedSection(
+		sortCompletionsAlpha([...localKeys, ...natives('object'), ...extensions('object')]),
+		OBJECT_RECOMMENDED_OPTIONS,
+	);
 };
 
 const withRecommendedSection = (options: Completion[], recommended: string[]): Completion[] => {
 	return recommended
 		.map((reco) => {
 			const option = options.find((op) => op.label === reco) as Completion;
-			option.section = RECOMMENDED_SECTION;
-			return option;
+			return { ...option, section: RECOMMENDED_SECTION } as Completion;
 		})
 		.concat(options);
 };
@@ -363,9 +362,7 @@ const isUrl = (url: string): boolean => {
 };
 
 const stringOptions = (resolved: string): Completion[] => {
-	const options = [...natives('string'), ...extensions('string')].sort((a, b) =>
-		a.label.localeCompare(b.label),
-	);
+	const options = sortCompletionsAlpha([...natives('string'), ...extensions('string')]);
 
 	if (validateFieldType('string', resolved, 'number').valid) {
 		return withRecommendedSection(options, ['toInt()', 'toFloat()', ...STRING_RECOMMENDED_OPTIONS]);
@@ -387,9 +384,7 @@ const stringOptions = (resolved: string): Completion[] => {
 };
 
 const numberOptions = (resolved: number): Completion[] => {
-	const options = [...natives('number'), ...extensions('number')].sort((a, b) =>
-		a.label.localeCompare(b.label),
-	);
+	const options = sortCompletionsAlpha([...natives('number'), ...extensions('number')]);
 
 	if (!Number.isInteger(resolved)) {
 		return withRecommendedSection(options, ['round()', 'floor()', 'ceil()']);
@@ -399,15 +394,32 @@ const numberOptions = (resolved: number): Completion[] => {
 };
 
 const dateOptions = (): Completion[] => {
-	return [...natives('date'), ...extensions('date')].sort((a, b) => a.label.localeCompare(b.label));
+	return sortCompletionsAlpha([...natives('date'), ...extensions('date')]);
 };
 
 const luxonOptions = (): Completion[] => {
-	return [...luxonInstanceOptions(), ...extensions('date')].sort((a, b) =>
-		a.label.localeCompare(b.label),
+	return withRecommendedSection(
+		sortCompletionsAlpha([...luxonInstanceOptions(), ...extensions('date')]),
+		LUXON_RECOMMENDED_OPTIONS,
 	);
 };
 
+const arrayOptions = (toResolve: string, resolved: unknown[]): Completion[] => {
+	if (/all\(.*?\)/.test(toResolve)) return [];
+
+	const options = withRecommendedSection(
+		sortCompletionsAlpha([...natives('array'), ...extensions('array')]),
+		ARRAY_RECOMMENDED_OPTIONS,
+	);
+
+	if (resolved.length > 0 && resolved.some((i) => typeof i !== 'number')) {
+		const NUMBER_ONLY_ARRAY_EXTENSIONS = new Set(['max()', 'min()', 'sum()', 'average()']);
+
+		return options.filter((m) => !NUMBER_ONLY_ARRAY_EXTENSIONS.has(m.label));
+	}
+	return options;
+};
+
 function ensureKeyCanBeResolved(obj: IDataObject, key: string) {
 	try {
 		obj[key];
@@ -503,17 +515,18 @@ export const luxonInstanceOptions = () => {
 export const luxonStaticOptions = () => {
 	const SKIP = new Set(['prototype', 'name', 'length', 'invalid']);
 
-	return Object.keys(Object.getOwnPropertyDescriptors(DateTime))
-		.filter((key) => !SKIP.has(key) && !key.includes('_'))
-		.sort((a, b) => a.localeCompare(b))
-		.map((key) => {
-			return createLuxonAutocompleteOption(
-				key,
-				'native-function',
-				luxonStaticDocs,
-				i18n.luxonStatic,
-			);
-		});
+	return sortCompletionsAlpha(
+		Object.keys(Object.getOwnPropertyDescriptors(DateTime))
+			.filter((key) => !SKIP.has(key) && !key.includes('_'))
+			.map((key) => {
+				return createLuxonAutocompleteOption(
+					key,
+					'native-function',
+					luxonStaticDocs,
+					i18n.luxonStatic,
+				);
+			}),
+	);
 };
 
 const createLuxonAutocompleteOption = (
@@ -522,9 +535,12 @@ const createLuxonAutocompleteOption = (
 	docDefinition: NativeDoc,
 	translations: Record<string, string | undefined>,
 ): Completion => {
+	const isFunction = isFunctionOption(type);
+	const label = isFunction ? name + '()' : name;
 	const option: Completion = {
-		label: isFunctionOption(type) ? name + '()' : name,
+		label,
 		type,
+		section: isFunction ? METHODS_SECTION : FIELDS_SECTION,
 	};
 
 	let doc: DocMetadata | undefined;
@@ -581,7 +597,7 @@ const regexes = {
 	objectLiteral: /\(\{.*\}\)\.([^{\s])*/, // ({}).
 
 	mathGlobal: /Math\.([^{\s])*/, // Math.
-	datetimeGlobal: /DateTime\.[^.}]*/, // DateTime.
+	datetimeGlobal: /DateTime\.(\w+\(.*\)\.[^{\s]*)?/, // DateTime.
 	objectGlobal: /Object\.(\w+\(.*\)\.[^{\s]*)?/, // Object. or Object.method(arg).
 };
 
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
index 84f54e6529e86..208a4f4ce0bc5 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
@@ -187,3 +187,7 @@ export const applyCompletion = (
 
 	view.dispatch(tx);
 };
+
+export const sortCompletionsAlpha = (completions: Completion[]): Completion[] => {
+	return completions.sort((a, b) => a.label.localeCompare(b.label));
+};
diff --git a/packages/workflow/src/Extensions/ObjectExtensions.ts b/packages/workflow/src/Extensions/ObjectExtensions.ts
index 3e4bce7f4dcce..f0b45bf4d5c2f 100644
--- a/packages/workflow/src/Extensions/ObjectExtensions.ts
+++ b/packages/workflow/src/Extensions/ObjectExtensions.ts
@@ -162,13 +162,10 @@ keys.doc = {
 };
 
 values.doc = {
-	doc: {
-		name: 'values',
-		description:
-			"Returns an array of a given object's own enumerable string-keyed property values.",
-		docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/objects/#object-values',
-		returnType: 'Array',
-	},
+	name: 'values',
+	description: "Returns an array of a given object's own enumerable string-keyed property values.",
+	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/objects/#object-values',
+	returnType: 'Array',
 };
 
 export const objectExtensions: ExtensionMap = {

From 4f859ca700ff1dd7ef4d8a1da80ed548cccf7b21 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 22 Feb 2024 16:14:56 +0100
Subject: [PATCH 07/25] Enable closeOnBlur

---
 packages/editor-ui/src/plugins/codemirror/n8nLang.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/n8nLang.ts b/packages/editor-ui/src/plugins/codemirror/n8nLang.ts
index 0e00cc7cb45f7..8bce81bb703de 100644
--- a/packages/editor-ui/src/plugins/codemirror/n8nLang.ts
+++ b/packages/editor-ui/src/plugins/codemirror/n8nLang.ts
@@ -25,4 +25,4 @@ export function n8nLang() {
 	]);
 }
 
-export const n8nAutocompletion = () => autocompletion({ icons: false, closeOnBlur: false });
+export const n8nAutocompletion = () => autocompletion({ icons: false });

From a4009ed7864ea352222d91d925e13f634c8a0435 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 22 Feb 2024 17:43:18 +0100
Subject: [PATCH 08/25] Remove unused imports

---
 .../src/components/CodeNodeEditor/baseExtensions.ts       | 2 +-
 .../InlineExpressionEditorInput.vue                       | 8 +-------
 packages/editor-ui/src/components/JsEditor/JsEditor.vue   | 3 +--
 packages/editor-ui/src/components/SqlEditor/SqlEditor.vue | 2 +-
 4 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts b/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
index d2543dc3f5964..a9b00a0b82052 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
@@ -8,7 +8,7 @@ import {
 	lineNumbers,
 } from '@codemirror/view';
 import { bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
-import { history, toggleComment, redo, deleteCharBackward, undo } from '@codemirror/commands';
+import { history, toggleComment, deleteCharBackward } from '@codemirror/commands';
 import { lintGutter } from '@codemirror/lint';
 import { type Extension, Prec } from '@codemirror/state';
 
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 8cd412208d31e..d4af5404f312f 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -3,13 +3,7 @@
 </template>
 
 <script lang="ts">
-import {
-	acceptCompletion,
-	autocompletion,
-	completionStatus,
-	moveCompletionSelection,
-} from '@codemirror/autocomplete';
-import { history, redo, undo } from '@codemirror/commands';
+import { history } from '@codemirror/commands';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import type { PropType } from 'vue';
diff --git a/packages/editor-ui/src/components/JsEditor/JsEditor.vue b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
index c638ced10effc..4ae28dc67b9db 100644
--- a/packages/editor-ui/src/components/JsEditor/JsEditor.vue
+++ b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
@@ -6,8 +6,7 @@
 </template>
 
 <script lang="ts">
-import { autocompletion } from '@codemirror/autocomplete';
-import { history, redo, toggleComment, undo } from '@codemirror/commands';
+import { history, toggleComment } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
 import { foldGutter, indentOnInput } from '@codemirror/language';
 import { lintGutter } from '@codemirror/lint';
diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
index bb4821502f793..9e041f0f9b184 100644
--- a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
+++ b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -20,7 +20,7 @@ import { expressionManager } from '@/mixins/expressionManager';
 import { n8nCompletionSources } from '@/plugins/codemirror/completions/addCompletions';
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
-import { autocompletion, ifNotIn } from '@codemirror/autocomplete';
+import { ifNotIn } from '@codemirror/autocomplete';
 import { history, toggleComment } from '@codemirror/commands';
 import { LanguageSupport, bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
 import { type Extension, type Line, Prec } from '@codemirror/state';

From e0d7474fe04ab225fb5cfa9833ee07179fe48f1b Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 23 Feb 2024 11:59:00 +0100
Subject: [PATCH 09/25] Add label for isExecuted

---
 packages/editor-ui/src/plugins/i18n/index.ts        | 1 +
 packages/editor-ui/src/plugins/i18n/locales/en.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/editor-ui/src/plugins/i18n/index.ts b/packages/editor-ui/src/plugins/i18n/index.ts
index 18942a50a8c0b..85d357045c5fd 100644
--- a/packages/editor-ui/src/plugins/i18n/index.ts
+++ b/packages/editor-ui/src/plugins/i18n/index.ts
@@ -391,6 +391,7 @@ export class I18nClass {
 		'$().itemMatching': this.baseText('codeNodeEditor.completer.selector.itemMatching'),
 		'$().last': this.baseText('codeNodeEditor.completer.selector.last'),
 		'$().params': this.baseText('codeNodeEditor.completer.selector.params'),
+		'$().isExecuted': this.baseText('codeNodeEditor.completer.selector.isExecuted'),
 
 		'$prevNode.name': this.baseText('codeNodeEditor.completer.$prevNode.name'),
 		'$prevNode.outputIndex': this.baseText('codeNodeEditor.completer.$prevNode.outputIndex'),
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 74abfedc75022..47baa17ab1a83 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -315,6 +315,7 @@
 	"codeNodeEditor.completer.selector.itemMatching": "@:_reusableBaseText.codeNodeEditor.completer.itemMatching",
 	"codeNodeEditor.completer.selector.last": "@:_reusableBaseText.codeNodeEditor.completer.last",
 	"codeNodeEditor.completer.selector.params": "The parameters of the node",
+	"codeNodeEditor.completer.selector.isExecuted": "Whether the node has executed",
 	"codeNodeEditor.completer.section.input": "Input",
 	"codeNodeEditor.completer.section.prevNodes": "Previous nodes",
 	"codeNodeEditor.completer.section.metadata": "Metadata",

From 8c9463aa1bb300b95ebb2ce27c321bd393ac4e9c Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 23 Feb 2024 11:59:24 +0100
Subject: [PATCH 10/25] Replace regex based parsing with codemirror javascript
 parser

---
 .../completions/__tests__/completions.test.ts |  8 ++++
 .../plugins/codemirror/completions/utils.ts   | 48 +++++++------------
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
index 408ec14f2fb1c..97bd7a58a33f3 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
@@ -423,6 +423,14 @@ describe('Resolution-based completions', () => {
 			);
 		});
 
+		test("should return completions for: {{ $('(Complex) \"No\\'de\" name').| }}", () => {
+			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($('Rename'));
+
+			expect(completions("{{ $('(Complex) \"No\\'de\" name').| }}")).toHaveLength(
+				Reflect.ownKeys($('Rename')).length - ['pairedItem'].length,
+			);
+		});
+
 		test('should return completions for: {{ $input.item.| }}', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item);
 
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
index 208a4f4ce0bc5..b185d76287716 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
@@ -12,20 +12,27 @@ import {
 } from '@codemirror/autocomplete';
 import type { EditorView } from '@codemirror/view';
 import type { TransactionSpec } from '@codemirror/state';
+import type { SyntaxNode } from '@lezer/common';
+import { javascriptLanguage } from '@codemirror/lang-javascript';
 
-// String literal expression is everything enclosed in single, double or tick quotes following a dot
-const stringLiteralRegex = /^"[^"]+"|^'[^']+'|^`[^`]+`\./;
-// JavaScript operands
-const operandsRegex = /[+\-*/><<==>**!=?]/;
 /**
  * Split user input into base (to resolve) and tail (to filter).
  */
 export function splitBaseTail(userInput: string): [string, string] {
-	const processedInput = extractSubExpression(userInput);
-	const parts = processedInput.split('.');
-	const tail = parts.pop() ?? '';
-
-	return [parts.join('.'), tail];
+	const read = (node: SyntaxNode | null) => (node ? userInput.slice(node.from, node.to) : '');
+	const lastNode = javascriptLanguage.parser.parse(userInput).resolveInner(userInput.length, -1);
+
+	switch (lastNode.type.name) {
+		case '.':
+			return [read(lastNode.parent).slice(0, -1), ''];
+		case 'MemberExpression':
+			return [read(lastNode.parent), read(lastNode)];
+		case 'PropertyName':
+			const tail = read(lastNode);
+			return [read(lastNode.parent).slice(0, -(tail.length + 1)), tail];
+		default:
+			return ['', ''];
+	}
 }
 
 export function longestCommonPrefix(...strings: string[]) {
@@ -44,29 +51,6 @@ export function longestCommonPrefix(...strings: string[]) {
 	}, '');
 }
 
-// Process user input if expressions are used as part of complex expression
-// i.e. as a function parameter or an operation expression
-// this function will extract expression that is currently typed so autocomplete
-// suggestions can be matched based on it.
-function extractSubExpression(userInput: string): string {
-	const dollarSignIndex = userInput.indexOf('$');
-	if (dollarSignIndex === -1) {
-		return userInput;
-	} else if (!stringLiteralRegex.test(userInput)) {
-		// If there is a dollar sign in the input and input is not a string literal,
-		// extract part of following the last $
-		const expressionParts = userInput.split('$');
-		userInput = `$${expressionParts[expressionParts.length - 1]}`;
-		// If input is part of a complex operation expression and extract last operand
-		const operationPart = userInput.split(operandsRegex).pop()?.trim() || '';
-		const lastOperand = operationPart.split(' ').pop();
-		if (lastOperand) {
-			userInput = lastOperand;
-		}
-	}
-	return userInput;
-}
-
 export const prefixMatch = (first: string, second: string) =>
 	first.startsWith(second) && first !== second;
 

From 9ac02f00de15e581f7382960a967a7d73b25145b Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 26 Feb 2024 15:51:40 +0100
Subject: [PATCH 11/25] Add sections to Strings and Dates

---
 .../luxon.instance.docs.ts                    | 70 +++++++++++++++++++
 .../workflow/src/Extensions/DateExtensions.ts | 10 +++
 .../workflow/src/Extensions/Extensions.ts     |  1 +
 .../src/Extensions/StringExtensions.ts        | 25 ++++++-
 .../src/NativeMethods/String.methods.ts       | 19 +++++
 5 files changed, 124 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/nativesAutocompleteDocs/luxon.instance.docs.ts b/packages/editor-ui/src/plugins/codemirror/completions/nativesAutocompleteDocs/luxon.instance.docs.ts
index cf53778b1480a..d2960fd3edc05 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/nativesAutocompleteDocs/luxon.instance.docs.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/nativesAutocompleteDocs/luxon.instance.docs.ts
@@ -8,6 +8,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		day: {
 			doc: {
 				name: 'day',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeday',
 				returnType: 'number',
 			},
@@ -15,6 +16,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		daysInMonth: {
 			doc: {
 				name: 'daysInMonth',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimedaysinmonth',
 				returnType: 'number',
 			},
@@ -22,6 +24,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		daysInYear: {
 			doc: {
 				name: 'daysInYear',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimedaysinyear',
 				returnType: 'number',
 			},
@@ -29,6 +32,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		hour: {
 			doc: {
 				name: 'hour',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimehour',
 				returnType: 'number',
 			},
@@ -36,6 +40,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		locale: {
 			doc: {
 				name: 'locale',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimelocale',
 				returnType: 'string',
 			},
@@ -43,6 +48,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		millisecond: {
 			doc: {
 				name: 'millisecond',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimemillisecond',
 				returnType: 'number',
 			},
@@ -50,6 +56,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		minute: {
 			doc: {
 				name: 'minute',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeminute',
 				returnType: 'number',
 			},
@@ -57,6 +64,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		month: {
 			doc: {
 				name: 'month',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimemonth',
 				returnType: 'number',
 			},
@@ -64,6 +72,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		monthLong: {
 			doc: {
 				name: 'monthLong',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimemonthlong',
 				returnType: 'string',
 			},
@@ -71,6 +80,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		monthShort: {
 			doc: {
 				name: 'monthShort',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimemonthshort',
 				returnType: 'string',
 			},
@@ -78,6 +88,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		numberingSystem: {
 			doc: {
 				name: 'numberingSystem',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimenumberingsystem',
 				returnType: 'string',
 			},
@@ -85,6 +96,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		offset: {
 			doc: {
 				name: 'offset',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeoffset',
 				returnType: 'number',
 			},
@@ -92,6 +104,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		offsetNameLong: {
 			doc: {
 				name: 'offsetNameLong',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeoffsetnamelong',
 				returnType: 'string',
 			},
@@ -99,6 +112,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		offsetNameShort: {
 			doc: {
 				name: 'offsetNameShort',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeoffsetnameshort',
 				returnType: 'string',
 			},
@@ -106,6 +120,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		ordinal: {
 			doc: {
 				name: 'ordinal',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeordinal',
 				returnType: 'string',
 			},
@@ -113,6 +128,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		outputCalendar: {
 			doc: {
 				name: 'outputCalendar',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeoutputcalendar',
 				returnType: 'string',
 			},
@@ -120,6 +136,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		quarter: {
 			doc: {
 				name: 'quarter',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimequarter',
 				returnType: 'number',
 			},
@@ -127,6 +144,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		second: {
 			doc: {
 				name: 'second',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimesecond',
 				returnType: 'number',
 			},
@@ -134,6 +152,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		weekday: {
 			doc: {
 				name: 'weekday',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeweekday',
 				returnType: 'number',
 			},
@@ -141,6 +160,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		weekdayLong: {
 			doc: {
 				name: 'weekdayLong',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeweekdaylong',
 				returnType: 'string',
 			},
@@ -148,6 +168,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		weekdayShort: {
 			doc: {
 				name: 'weekdayShort',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeweekdayshort',
 				returnType: 'string',
 			},
@@ -155,6 +176,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		weekNumber: {
 			doc: {
 				name: 'weekNumber',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeweeknumber',
 				returnType: 'number',
 			},
@@ -162,6 +184,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		weeksInWeekYear: {
 			doc: {
 				name: 'weeksInWeekYear',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeweeksinweekyear',
 				returnType: 'number',
 			},
@@ -169,6 +192,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		weekYear: {
 			doc: {
 				name: 'weekYear',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeweekyear',
 				returnType: 'number',
 			},
@@ -176,6 +200,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		year: {
 			doc: {
 				name: 'year',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeyear',
 				returnType: 'number',
 			},
@@ -183,6 +208,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		zone: {
 			doc: {
 				name: 'zone',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimezone',
 				returnType: 'Zone',
 			},
@@ -190,6 +216,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		zoneName: {
 			doc: {
 				name: 'zoneName',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimezonename',
 				returnType: 'string',
 			},
@@ -197,6 +224,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		isInDST: {
 			doc: {
 				name: 'isInDST',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeisindst',
 				returnType: 'boolean',
 			},
@@ -204,6 +232,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		isInLeapYear: {
 			doc: {
 				name: 'isInLeapYear',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeisinleapyear',
 				returnType: 'boolean',
 			},
@@ -211,6 +240,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		isOffsetFixed: {
 			doc: {
 				name: 'isOffsetFixed',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeisoffsetfixed',
 				returnType: 'boolean',
 			},
@@ -218,6 +248,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		isValid: {
 			doc: {
 				name: 'isValid',
+				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeisvalid',
 				returnType: 'boolean',
 			},
@@ -227,6 +258,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		diff: {
 			doc: {
 				name: 'diff',
+				section: 'compare',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimediff',
 				returnType: 'Duration',
 				args: [
@@ -239,6 +271,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		diffNow: {
 			doc: {
 				name: 'diffNow',
+				section: 'compare',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimediffnow',
 				returnType: 'Duration',
 				args: [
@@ -250,6 +283,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		endOf: {
 			doc: {
 				name: 'endOf',
+				section: 'edit',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeendof',
 				returnType: 'DateTime',
 				args: [{ name: 'unit', type: 'string' }],
@@ -258,6 +292,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		equals: {
 			doc: {
 				name: 'equals',
+				section: 'compare',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeequals',
 				returnType: 'boolean',
 				args: [{ name: 'other', type: 'DateTime' }],
@@ -266,6 +301,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		hasSame: {
 			doc: {
 				name: 'hasSame',
+				section: 'compare',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimehassame',
 				returnType: 'boolean',
 				args: [
@@ -277,6 +313,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		minus: {
 			doc: {
 				name: 'minus',
+				section: 'edit',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeminus',
 				returnType: 'DateTime',
 				args: [{ name: 'duration', type: 'Duration|object|number' }],
@@ -285,6 +322,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		plus: {
 			doc: {
 				name: 'plus',
+				section: 'edit',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeplus',
 				returnType: 'DateTime',
 				args: [{ name: 'duration', type: 'Duration|object|number' }],
@@ -293,6 +331,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		reconfigure: {
 			doc: {
 				name: 'reconfigure',
+				section: 'other',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimereconfigure',
 				returnType: 'DateTime',
 				args: [{ name: 'properties', type: 'object' }],
@@ -301,6 +340,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		resolvedLocaleOptions: {
 			doc: {
 				name: 'resolvedLocaleOptions',
+				section: 'other',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeresolvedlocaleoptions',
 				returnType: 'object',
 				args: [{ name: 'opts', type: 'object' }],
@@ -309,6 +349,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		set: {
 			doc: {
 				name: 'set',
+				section: 'edit',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeset',
 				returnType: 'DateTime',
 				args: [{ name: 'values', type: 'object' }],
@@ -317,6 +358,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		setLocale: {
 			doc: {
 				name: 'setLocale',
+				section: 'edit',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimesetlocale',
 				returnType: 'DateTime',
 				args: [{ name: 'locale', type: 'any' }],
@@ -325,6 +367,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		setZone: {
 			doc: {
 				name: 'setZone',
+				section: 'edit',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimesetzone',
 				returnType: 'DateTime',
 				args: [
@@ -336,6 +379,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		startOf: {
 			doc: {
 				name: 'startOf',
+				section: 'edit',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimestartof',
 				returnType: 'DateTime',
 				args: [{ name: 'unit', type: 'string' }],
@@ -344,6 +388,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toBSON: {
 			doc: {
 				name: 'toBSON',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetobson',
 				returnType: 'Date',
 			},
@@ -351,6 +396,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toFormat: {
 			doc: {
 				name: 'toFormat',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetime',
 				returnType: 'string',
 				args: [
@@ -362,6 +408,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toHTTP: {
 			doc: {
 				name: 'toHTTP',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetohttp',
 				returnType: 'string',
 			},
@@ -369,6 +416,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toISO: {
 			doc: {
 				name: 'toISO',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoiso',
 				returnType: 'string',
 				args: [{ name: 'opts', type: 'object' }],
@@ -377,6 +425,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toISODate: {
 			doc: {
 				name: 'toISODate',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoisodate',
 				returnType: 'string',
 				args: [{ name: 'opts', type: 'object' }],
@@ -385,6 +434,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toISOTime: {
 			doc: {
 				name: 'toISOTime',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoisotime',
 				returnType: 'string',
 				args: [{ name: 'opts', type: 'object' }],
@@ -393,6 +443,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toISOWeekDate: {
 			doc: {
 				name: 'toISOWeekDate',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoisoweekdate',
 				returnType: 'string',
 			},
@@ -400,6 +451,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toJSDate: {
 			doc: {
 				name: 'toJSDate',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetojsdate',
 				returnType: 'Date',
 			},
@@ -407,6 +459,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toJSON: {
 			doc: {
 				name: 'toJSON',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetojson',
 				returnType: 'string',
 			},
@@ -414,6 +467,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toLocal: {
 			doc: {
 				name: 'toLocal',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetolocal',
 				returnType: 'DateTime',
 			},
@@ -421,6 +475,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toLocaleParts: {
 			doc: {
 				name: 'toLocaleParts',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetolocaleparts',
 				returnType: 'string',
 				args: [
@@ -432,6 +487,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toLocaleString: {
 			doc: {
 				name: 'toLocaleString',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetolocalestring',
 				returnType: 'string',
 				args: [
@@ -443,6 +499,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toMillis: {
 			doc: {
 				name: 'toMillis',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetomillis',
 				returnType: 'number',
 			},
@@ -450,6 +507,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toObject: {
 			doc: {
 				name: 'toObject',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoobject',
 				returnType: 'object',
 				args: [{ name: 'opts', type: 'any' }],
@@ -458,6 +516,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toRelative: {
 			doc: {
 				name: 'toRelative',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetorelative',
 				returnType: 'string',
 				args: [{ name: 'options', type: 'object' }],
@@ -466,6 +525,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toRelativeCalendar: {
 			doc: {
 				name: 'toRelativeCalendar',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetorelativecalendar',
 				returnType: 'string',
 				args: [{ name: 'options', type: 'object' }],
@@ -474,6 +534,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toRFC2822: {
 			doc: {
 				name: 'toRFC2822',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetorfc2822',
 				returnType: 'string',
 			},
@@ -481,6 +542,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toSeconds: {
 			doc: {
 				name: 'toSeconds',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoseconds',
 				returnType: 'number',
 			},
@@ -488,6 +550,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toSQL: {
 			doc: {
 				name: 'toSQL',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetosql',
 				returnType: 'string',
 				args: [{ name: 'options', type: 'object' }],
@@ -496,6 +559,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toSQLDate: {
 			doc: {
 				name: 'toSQLDate',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetosqldate',
 				returnType: 'string',
 			},
@@ -503,6 +567,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toSQLTime: {
 			doc: {
 				name: 'toSQLTime',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetosqltime',
 				returnType: 'string',
 			},
@@ -510,6 +575,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toString: {
 			doc: {
 				name: 'toString',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetostring',
 				returnType: 'string',
 			},
@@ -517,6 +583,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toUnixInteger: {
 			doc: {
 				name: 'toUnixInteger',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetounixinteger',
 				returnType: 'number',
 			},
@@ -524,6 +591,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		toUTC: {
 			doc: {
 				name: 'toUTC',
+				section: 'edit',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoutc',
 				returnType: 'DateTime',
 				args: [
@@ -535,6 +603,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		until: {
 			doc: {
 				name: 'until',
+				section: 'compare',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeuntil',
 				returnType: 'Interval',
 				args: [{ name: 'other', type: 'DateTime' }],
@@ -543,6 +612,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		valueOf: {
 			doc: {
 				name: 'valueOf',
+				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimevalueof',
 				returnType: 'number',
 			},
diff --git a/packages/workflow/src/Extensions/DateExtensions.ts b/packages/workflow/src/Extensions/DateExtensions.ts
index 69d1799aaaa4a..a110e0a51b78a 100644
--- a/packages/workflow/src/Extensions/DateExtensions.ts
+++ b/packages/workflow/src/Extensions/DateExtensions.ts
@@ -220,6 +220,7 @@ endOfMonth.doc = {
 	name: 'endOfMonth',
 	returnType: 'Date',
 	description: 'Transforms a date to the last possible moment that lies within the month.',
+	section: 'edit',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-endOfMonth',
 };
 
@@ -227,6 +228,7 @@ isDst.doc = {
 	name: 'isDst',
 	returnType: 'boolean',
 	description: 'Checks if a Date is within Daylight Savings Time.',
+	section: 'query',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-isDst',
 };
 
@@ -234,12 +236,14 @@ isWeekend.doc = {
 	name: 'isWeekend',
 	returnType: 'boolean',
 	description: 'Checks if the Date falls on a Saturday or Sunday.',
+	section: 'query',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-isWeekend',
 };
 
 beginningOf.doc = {
 	name: 'beginningOf',
 	description: 'Transform a Date to the start of the given time period. Default unit is `week`.',
+	section: 'edit',
 	returnType: 'Date',
 	args: [{ name: 'unit?', type: 'DurationUnit' }],
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-beginningOf',
@@ -248,6 +252,7 @@ beginningOf.doc = {
 extract.doc = {
 	name: 'extract',
 	description: 'Extracts the part defined in `datePart` from a Date. Default unit is `week`.',
+	section: 'query',
 	returnType: 'number',
 	args: [{ name: 'datePart?', type: 'DurationUnit' }],
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-extract',
@@ -257,6 +262,7 @@ format.doc = {
 	name: 'format',
 	description: 'Formats a Date in the given structure.',
 	returnType: 'string',
+	section: 'format',
 	args: [{ name: 'fmt', type: 'TimeFormat' }],
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-format',
 };
@@ -264,6 +270,7 @@ format.doc = {
 isBetween.doc = {
 	name: 'isBetween',
 	description: 'Checks if a Date is between two given dates.',
+	section: 'query',
 	returnType: 'boolean',
 	args: [
 		{ name: 'date1', type: 'Date|string' },
@@ -275,6 +282,7 @@ isBetween.doc = {
 isInLast.doc = {
 	name: 'isInLast',
 	description: 'Checks if a Date is within a given time period. Default unit is `minute`.',
+	section: 'query',
 	returnType: 'boolean',
 	args: [
 		{ name: 'n', type: 'number' },
@@ -286,6 +294,7 @@ isInLast.doc = {
 minus.doc = {
 	name: 'minus',
 	description: 'Subtracts a given time period from a Date. Default unit is `milliseconds`.',
+	section: 'edit',
 	returnType: 'Date',
 	args: [
 		{ name: 'n', type: 'number' },
@@ -297,6 +306,7 @@ minus.doc = {
 plus.doc = {
 	name: 'plus',
 	description: 'Adds a given time period to a Date. Default unit is `milliseconds`.',
+	section: 'edit',
 	returnType: 'Date',
 	args: [
 		{ name: 'n', type: 'number' },
diff --git a/packages/workflow/src/Extensions/Extensions.ts b/packages/workflow/src/Extensions/Extensions.ts
index a5ec7575c86de..f4f6035282f5b 100644
--- a/packages/workflow/src/Extensions/Extensions.ts
+++ b/packages/workflow/src/Extensions/Extensions.ts
@@ -14,6 +14,7 @@ export type DocMetadata = {
 	name: string;
 	returnType: string;
 	description?: string;
+	section?: string;
 	aliases?: string[];
 	args?: Array<{ name: string; type?: string }>;
 	docURL?: string;
diff --git a/packages/workflow/src/Extensions/StringExtensions.ts b/packages/workflow/src/Extensions/StringExtensions.ts
index 6a01279637bd2..7d8a38d34e240 100644
--- a/packages/workflow/src/Extensions/StringExtensions.ts
+++ b/packages/workflow/src/Extensions/StringExtensions.ts
@@ -362,6 +362,7 @@ function extractUrl(value: string) {
 removeMarkdown.doc = {
 	name: 'removeMarkdown',
 	description: 'Removes Markdown formatting from a string.',
+	section: 'edit',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-removeMarkdown',
@@ -370,6 +371,7 @@ removeMarkdown.doc = {
 removeTags.doc = {
 	name: 'removeTags',
 	description: 'Removes tags, such as HTML or XML, from a string.',
+	section: 'edit',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-removeTags',
@@ -378,6 +380,7 @@ removeTags.doc = {
 toDate.doc = {
 	name: 'toDate',
 	description: 'Converts a string to a date.',
+	section: 'cast',
 	returnType: 'Date',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-toDate',
 };
@@ -385,6 +388,7 @@ toDate.doc = {
 toFloat.doc = {
 	name: 'toFloat',
 	description: 'Converts a string to a decimal number.',
+	section: 'cast',
 	returnType: 'number',
 	aliases: ['toDecimalNumber'],
 	docURL:
@@ -394,6 +398,7 @@ toFloat.doc = {
 toInt.doc = {
 	name: 'toInt',
 	description: 'Converts a string to an integer.',
+	section: 'cast',
 	returnType: 'number',
 	args: [{ name: 'radix?', type: 'number' }],
 	aliases: ['toWholeNumber'],
@@ -403,6 +408,7 @@ toInt.doc = {
 toSentenceCase.doc = {
 	name: 'toSentenceCase',
 	description: 'Formats a string to sentence case. Example: "This is a sentence".',
+	section: 'case',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-toSentenceCase',
@@ -411,6 +417,7 @@ toSentenceCase.doc = {
 toSnakeCase.doc = {
 	name: 'toSnakeCase',
 	description: 'Formats a string to snake case. Example: "this_is_snake_case".',
+	section: 'case',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-toSnakeCase',
@@ -420,6 +427,7 @@ toTitleCase.doc = {
 	name: 'toTitleCase',
 	description:
 		'Formats a string to title case. Example: "This Is a Title". Will not change already uppercase letters to prevent losing information from acronyms and trademarks such as iPhone or FAANG.',
+	section: 'case',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-toTitleCase',
@@ -428,6 +436,7 @@ toTitleCase.doc = {
 urlEncode.doc = {
 	name: 'urlEncode',
 	description: 'Encodes a string to be used/included in a URL.',
+	section: 'edit',
 	args: [{ name: 'entireString?', type: 'boolean' }],
 	returnType: 'string',
 	docURL:
@@ -438,6 +447,7 @@ urlDecode.doc = {
 	name: 'urlDecode',
 	description:
 		'Decodes a URL-encoded string. It decodes any percent-encoded characters in the input string, and replaces them with their original characters.',
+	section: 'edit',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-urlDecode',
@@ -446,6 +456,7 @@ urlDecode.doc = {
 replaceSpecialChars.doc = {
 	name: 'replaceSpecialChars',
 	description: 'Replaces non-ASCII characters in a string with an ASCII representation.',
+	section: 'edit',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-replaceSpecialChars',
@@ -453,6 +464,7 @@ replaceSpecialChars.doc = {
 
 length.doc = {
 	name: 'length',
+	section: 'query',
 	description: 'Returns the character count of a string.',
 	returnType: 'number',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings',
@@ -461,6 +473,7 @@ length.doc = {
 isDomain.doc = {
 	name: 'isDomain',
 	description: 'Checks if a string is a domain.',
+	section: 'validation',
 	returnType: 'boolean',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-isDomain',
 };
@@ -468,13 +481,15 @@ isDomain.doc = {
 isEmail.doc = {
 	name: 'isEmail',
 	description: 'Checks if a string is an email.',
+	section: 'validation',
 	returnType: 'boolean',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-isEmail',
 };
 
 isNumeric.doc = {
-	name: 'isEmail',
+	name: 'isNumeric',
 	description: 'Checks if a string only contains digits.',
+	section: 'validation',
 	returnType: 'boolean',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-isNumeric',
@@ -483,6 +498,7 @@ isNumeric.doc = {
 isUrl.doc = {
 	name: 'isUrl',
 	description: 'Checks if a string is a valid URL.',
+	section: 'validation',
 	returnType: 'boolean',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-isUrl',
 };
@@ -490,6 +506,7 @@ isUrl.doc = {
 isEmpty.doc = {
 	name: 'isEmpty',
 	description: 'Checks if a string is empty.',
+	section: 'validation',
 	returnType: 'boolean',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-isEmpty',
 };
@@ -497,6 +514,7 @@ isEmpty.doc = {
 isNotEmpty.doc = {
 	name: 'isNotEmpty',
 	description: 'Checks if a string has content.',
+	section: 'validation',
 	returnType: 'boolean',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-isNotEmpty',
@@ -505,6 +523,7 @@ isNotEmpty.doc = {
 extractEmail.doc = {
 	name: 'extractEmail',
 	description: 'Extracts an email from a string. Returns undefined if none is found.',
+	section: 'edit',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-extractEmail',
@@ -514,6 +533,7 @@ extractDomain.doc = {
 	name: 'extractDomain',
 	description:
 		'Extracts a domain from a string containing a valid URL. Returns undefined if none is found.',
+	section: 'edit',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-extractDomain',
@@ -522,6 +542,7 @@ extractDomain.doc = {
 extractUrl.doc = {
 	name: 'extractUrl',
 	description: 'Extracts a URL from a string. Returns undefined if none is found.',
+	section: 'edit',
 	returnType: 'string',
 	docURL:
 		'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-extractUrl',
@@ -530,6 +551,7 @@ extractUrl.doc = {
 hash.doc = {
 	name: 'hash',
 	description: 'Returns a string hashed with the given algorithm. Default algorithm is `md5`.',
+	section: 'edit',
 	returnType: 'string',
 	args: [{ name: 'algo?', type: 'Algorithm' }],
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-hash',
@@ -538,6 +560,7 @@ hash.doc = {
 quote.doc = {
 	name: 'quote',
 	description: 'Returns a string wrapped in the quotation marks. Default quotation is `"`.',
+	section: 'edit',
 	returnType: 'string',
 	args: [{ name: 'mark?', type: 'string' }],
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-quote',
diff --git a/packages/workflow/src/NativeMethods/String.methods.ts b/packages/workflow/src/NativeMethods/String.methods.ts
index 39fde491b3af2..7689707f520ad 100644
--- a/packages/workflow/src/NativeMethods/String.methods.ts
+++ b/packages/workflow/src/NativeMethods/String.methods.ts
@@ -7,6 +7,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'length',
 				description: 'Returns the number of characters in the string.',
+				section: 'query',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length',
 				returnType: 'number',
@@ -18,6 +19,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'concat',
 				description: 'Concatenates the string arguments to the calling string.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat',
 				returnType: 'string',
@@ -27,6 +29,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'endsWith',
 				description: 'Checks if a string ends with `searchString`.',
+				section: 'query',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith',
 				returnType: 'boolean',
@@ -37,6 +40,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'indexOf',
 				description: 'Returns the index of the first occurrence of `searchString`.',
+				section: 'query',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf',
 				returnType: 'number',
@@ -50,6 +54,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'lastIndexOf',
 				description: 'Returns the index of the last occurrence of `searchString`.',
+				section: 'query',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf',
 				returnType: 'number',
@@ -63,6 +68,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'match',
 				description: 'Retrieves the result of matching a string against a regular expression.',
+				section: 'query',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match',
 				returnType: 'Array',
@@ -73,6 +79,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'includes',
 				description: 'Checks if `searchString` may be found within the calling string.',
+				section: 'query',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes',
 				returnType: 'boolean',
@@ -87,6 +94,7 @@ export const stringMethods: NativeDoc = {
 				name: 'replace',
 				description:
 					'Returns a string with matches of a `pattern` replaced by a `replacement`. If `pattern` is a string, only the first occurrence will be replaced.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace',
 				returnType: 'string',
@@ -100,6 +108,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'replaceAll',
 				description: 'Returns a string with matches of a `pattern` replaced by a `replacement`.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll',
 				returnType: 'string',
@@ -113,6 +122,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'search',
 				description: 'Returns a string that matches `pattern` within the given string.',
+				section: 'query',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/search',
 				returnType: 'string',
@@ -124,6 +134,7 @@ export const stringMethods: NativeDoc = {
 				name: 'slice',
 				description:
 					'Returns a section of a string. `indexEnd` defaults to the length of the string if not given.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice',
 				returnType: 'string',
@@ -138,6 +149,7 @@ export const stringMethods: NativeDoc = {
 				name: 'split',
 				description:
 					'Returns the substrings that result from dividing the given string with `separator`.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split',
 				returnType: 'Array',
@@ -151,6 +163,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'startsWith',
 				description: 'Checks if the string begins with `searchString`.',
+				section: 'query',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith',
 				returnType: 'boolean',
@@ -165,6 +178,7 @@ export const stringMethods: NativeDoc = {
 				name: 'substring',
 				description:
 					'Returns the part of the string from the start index up to and excluding the end index, or to the end of the string if no end index is supplied.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring',
 				returnType: 'string',
@@ -178,6 +192,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'toLowerCase',
 				description: 'Formats a string to lowercase. Example: "this is lowercase”.',
+				section: 'case',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase',
 				returnType: 'string',
@@ -187,6 +202,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'toUpperCase',
 				description: 'Formats a string to lowercase. Example: "THIS IS UPPERCASE”.',
+				section: 'case',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase',
 				returnType: 'string',
@@ -196,6 +212,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'trim',
 				description: 'Removes whitespace from both ends of a string and returns a new string.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim',
 				returnType: 'string',
@@ -205,6 +222,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'trimEnd',
 				description: 'Removes whitespace from the end of a string and returns a new string.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd',
 				returnType: 'string',
@@ -214,6 +232,7 @@ export const stringMethods: NativeDoc = {
 			doc: {
 				name: 'trimStart',
 				description: 'Removes whitespace from the beginning of a string and returns a new string.',
+				section: 'edit',
 				docURL:
 					'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart',
 				returnType: 'string',

From 8553c243a8405687b5727b78ef8ed77af1493fe6 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 26 Feb 2024 15:52:45 +0100
Subject: [PATCH 12/25] Fix sticky header styling in Chrome

---
 packages/editor-ui/src/styles/plugins/_codemirror.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/styles/plugins/_codemirror.scss b/packages/editor-ui/src/styles/plugins/_codemirror.scss
index 270cbfcefec0f..1ef34c83347ce 100644
--- a/packages/editor-ui/src/styles/plugins/_codemirror.scss
+++ b/packages/editor-ui/src/styles/plugins/_codemirror.scss
@@ -32,7 +32,8 @@
 			display: flex;
 			justify-content: space-between;
 			padding: var(--spacing-5xs) var(--spacing-2xs);
-			scroll-margin-top: 40px;
+			scroll-padding: 40px;
+			scroll-margin: 40px;
 		}
 
 		li .cm-completionLabel {

From a124929a3dbc1d227683fab669175a5354d38472 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 26 Feb 2024 15:53:15 +0100
Subject: [PATCH 13/25] Avoid highligher error breaking editor

---
 .../codemirror/resolvableHighlighter.ts       | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts b/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts
index 254f2fa2dea55..52f9bc69a1def 100644
--- a/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts
+++ b/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts
@@ -52,29 +52,31 @@ const coloringStateField = StateField.define<DecorationSet>({
 		return Decoration.none;
 	},
 	update(colorings, transaction) {
-		colorings = colorings.map(transaction.changes); // recalculate positions for new doc
+		try {
+			colorings = colorings.map(transaction.changes); // recalculate positions for new doc
 
-		for (const txEffect of transaction.effects) {
-			if (txEffect.is(coloringStateEffects.removeColorEffect)) {
-				colorings = colorings.update({
-					filter: (from, to) => txEffect.value.from !== from && txEffect.value.to !== to,
-				});
-			}
+			for (const txEffect of transaction.effects) {
+				if (txEffect.is(coloringStateEffects.removeColorEffect)) {
+					colorings = colorings.update({
+						filter: (from, to) => txEffect.value.from !== from && txEffect.value.to !== to,
+					});
+				}
 
-			if (txEffect.is(coloringStateEffects.addColorEffect)) {
-				colorings = colorings.update({
-					filter: (from, to) => txEffect.value.from !== from && txEffect.value.to !== to,
-				});
+				if (txEffect.is(coloringStateEffects.addColorEffect)) {
+					colorings = colorings.update({
+						filter: (from, to) => txEffect.value.from !== from && txEffect.value.to !== to,
+					});
 
-				const decoration = txEffect.value.error ? marks.invalid : marks.valid;
+					const decoration = txEffect.value.error ? marks.invalid : marks.valid;
 
-				if (txEffect.value.from === 0 && txEffect.value.to === 0) continue;
+					if (txEffect.value.from === 0 && txEffect.value.to === 0) continue;
 
-				colorings = colorings.update({
-					add: [decoration.range(txEffect.value.from, txEffect.value.to)],
-				});
+					colorings = colorings.update({
+						add: [decoration.range(txEffect.value.from, txEffect.value.to)],
+					});
+				}
 			}
-		}
+		} catch (error) {}
 
 		return colorings;
 	},

From 6a217451a21165a6c5c179d2ac79091f57edb603 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 26 Feb 2024 15:53:56 +0100
Subject: [PATCH 14/25] Improve autocomplete sections

---
 .../completions/__tests__/completions.test.ts |   3 +-
 .../codemirror/completions/constants.ts       | 151 +++++++++++----
 .../completions/datatype.completions.ts       | 182 +++++++++++++-----
 .../completions/dollar.completions.ts         |   2 +-
 .../plugins/codemirror/completions/utils.ts   |  53 +++--
 .../src/plugins/i18n/locales/en.json          |  13 +-
 6 files changed, 293 insertions(+), 111 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
index 97bd7a58a33f3..1d9867a0e1d9c 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
@@ -25,7 +25,6 @@ import { setupServer } from '@/__tests__/server';
 import {
 	ARRAY_RECOMMENDED_OPTIONS,
 	FIELDS_SECTION,
-	INPUT_SECTION,
 	LUXON_RECOMMENDED_OPTIONS,
 	METADATA_SECTION,
 	METHODS_SECTION,
@@ -78,7 +77,7 @@ describe('Top-level completions', () => {
 		expect(result).toHaveLength(dollarOptions().length);
 
 		expect(result?.[0]).toEqual(
-			expect.objectContaining({ label: '$json', section: INPUT_SECTION }),
+			expect.objectContaining({ label: '$json', section: RECOMMENDED_SECTION }),
 		);
 		expect(result?.[4]).toEqual(
 			expect.objectContaining({ label: '$parameter', section: METADATA_SECTION }),
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
index d2cce78e47f2a..53849fc5d4d00 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
@@ -6,9 +6,9 @@ export const RECOMMENDED_SECTION: CompletionSection = {
 	rank: 0,
 };
 
-export const INPUT_SECTION: CompletionSection = {
-	name: i18n.baseText('codeNodeEditor.completer.section.input'),
-	rank: 1,
+export const RECOMMENDED_METHODS_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.recommendedMethods'),
+	rank: 0,
 };
 
 export const PREVIOUS_NODES_SECTION: CompletionSection = {
@@ -16,36 +16,56 @@ export const PREVIOUS_NODES_SECTION: CompletionSection = {
 	rank: 2,
 };
 
-export const METADATA_SECTION: CompletionSection = {
-	name: i18n.baseText('codeNodeEditor.completer.section.metadata'),
-	rank: 3,
-};
-
 export const FIELDS_SECTION: CompletionSection = {
 	name: i18n.baseText('codeNodeEditor.completer.section.fields'),
-	rank: 4,
+	rank: 3,
 };
 
 export const METHODS_SECTION: CompletionSection = {
 	name: i18n.baseText('codeNodeEditor.completer.section.methods'),
+	rank: 4,
+};
+
+export const METADATA_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.metadata'),
 	rank: 5,
 };
 
+export const OTHER_METHODS_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.otherMethods'),
+	rank: 100,
+};
+
+export const OTHER_SECTION: CompletionSection = {
+	name: i18n.baseText('codeNodeEditor.completer.section.other'),
+	rank: 101,
+};
+
 export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
 	{
 		label: '$json',
-		section: INPUT_SECTION,
+		section: RECOMMENDED_SECTION,
 		info: i18n.rootVars.$json,
 	},
 	{
 		label: '$binary',
-		section: INPUT_SECTION,
+		section: RECOMMENDED_SECTION,
 		info: i18n.rootVars.$binary,
 	},
 	{
-		label: '$input',
-		section: INPUT_SECTION,
-		info: i18n.rootVars.$input,
+		label: '$now',
+		section: RECOMMENDED_SECTION,
+		info: i18n.rootVars.$now,
+	},
+	{
+		label: '$if()',
+		section: RECOMMENDED_SECTION,
+		info: i18n.rootVars.$if,
+	},
+	{
+		label: '$ifEmpty()',
+		section: RECOMMENDED_SECTION,
+		info: i18n.rootVars.$ifEmpty,
 	},
 	{
 		label: '$execution',
@@ -57,6 +77,11 @@ export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
 		section: METADATA_SECTION,
 		info: i18n.rootVars.$itemIndex,
 	},
+	{
+		label: '$input',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$input,
+	},
 	{
 		label: '$parameter',
 		section: METADATA_SECTION,
@@ -72,6 +97,11 @@ export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
 		section: METADATA_SECTION,
 		info: i18n.rootVars.$runIndex,
 	},
+	{
+		label: '$today',
+		section: METADATA_SECTION,
+		info: i18n.rootVars.$today,
+	},
 	{
 		label: '$vars',
 		section: METADATA_SECTION,
@@ -82,27 +112,6 @@ export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
 		section: METADATA_SECTION,
 		info: i18n.rootVars.$workflow,
 	},
-
-	{
-		label: '$now',
-		section: FIELDS_SECTION,
-		info: i18n.rootVars.$now,
-	},
-	{
-		label: '$today',
-		section: FIELDS_SECTION,
-		info: i18n.rootVars.$today,
-	},
-	{
-		label: '$if()',
-		section: METHODS_SECTION,
-		info: i18n.rootVars.$if,
-	},
-	{
-		label: '$ifEmpty()',
-		section: METHODS_SECTION,
-		info: i18n.rootVars.$ifEmpty,
-	},
 	{
 		label: '$jmespath()',
 		section: METHODS_SECTION,
@@ -120,7 +129,77 @@ export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
 	},
 ];
 
-export const STRING_RECOMMENDED_OPTIONS = ['includes()', 'startsWith()', 'replaceAll()', 'length'];
+export const STRING_RECOMMENDED_OPTIONS = [
+	'includes()',
+	'split()',
+	'startsWith()',
+	'replaceAll()',
+	'length',
+];
+export const STRING_EDIT_OPTIONS = [
+	'concat()',
+	'replace()',
+	'replaceAll()',
+	'replaceSpecialChars()',
+	'slice()',
+	'split()',
+	'substring()',
+	'trim()',
+	'trimEnd()',
+	'trimStart()',
+	'hash()',
+	'removeMarkdown()',
+	'removeTags()',
+	'urlDecode()',
+	'urlEncode()',
+	'quote()',
+	'extractEmail()',
+	'extractDomain()',
+	'extractUrl()',
+];
+
 export const LUXON_RECOMMENDED_OPTIONS = ['format()', 'minus()', 'plus()', 'diff()'];
 export const ARRAY_RECOMMENDED_OPTIONS = ['length', 'last()', 'includes()', 'map()', 'filter()'];
 export const OBJECT_RECOMMENDED_OPTIONS = ['keys()', 'values()', 'isEmpty()'];
+
+export const LUXON_SECTIONS: Record<string, CompletionSection> = {
+	edit: {
+		name: i18n.baseText('codeNodeEditor.completer.section.edit'),
+		rank: 1,
+	},
+	compare: {
+		name: i18n.baseText('codeNodeEditor.completer.section.compare'),
+		rank: 2,
+	},
+	format: {
+		name: i18n.baseText('codeNodeEditor.completer.section.format'),
+		rank: 3,
+	},
+	query: {
+		name: i18n.baseText('codeNodeEditor.completer.section.component'),
+		rank: 4,
+	},
+};
+
+export const STRING_SECTIONS: Record<string, CompletionSection> = {
+	edit: {
+		name: i18n.baseText('codeNodeEditor.completer.section.edit'),
+		rank: 1,
+	},
+	query: {
+		name: i18n.baseText('codeNodeEditor.completer.section.query'),
+		rank: 2,
+	},
+	validation: {
+		name: i18n.baseText('codeNodeEditor.completer.section.validation'),
+		rank: 3,
+	},
+	case: {
+		name: i18n.baseText('codeNodeEditor.completer.section.case'),
+		rank: 4,
+	},
+	cast: {
+		name: i18n.baseText('codeNodeEditor.completer.section.cast'),
+		rank: 5,
+	},
+};
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index 3192ecef98c92..c5ec0f880b1f7 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -17,7 +17,12 @@ import {
 	applyCompletion,
 	sortCompletionsAlpha,
 } from './utils';
-import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import type {
+	Completion,
+	CompletionContext,
+	CompletionResult,
+	CompletionSection,
+} from '@codemirror/autocomplete';
 import type { AutocompleteOptionType, ExtensionTypeName, FnToDoc, Resolved } from './types';
 import { sanitizeHtml } from '@/utils/htmlUtils';
 import { isFunctionOption } from './typeGuards';
@@ -29,12 +34,18 @@ import {
 	ARRAY_RECOMMENDED_OPTIONS,
 	FIELDS_SECTION,
 	LUXON_RECOMMENDED_OPTIONS,
+	LUXON_SECTIONS,
 	METHODS_SECTION,
 	OBJECT_RECOMMENDED_OPTIONS,
+	OTHER_METHODS_SECTION,
+	OTHER_SECTION,
+	RECOMMENDED_METHODS_SECTION,
 	RECOMMENDED_SECTION,
 	STRING_RECOMMENDED_OPTIONS,
+	STRING_SECTIONS,
 } from './constants';
 import { VALID_EMAIL_REGEX } from '@/constants';
+import { uniqBy } from 'lodash-es';
 
 /**
  * Resolution-based completions offered according to datatype.
@@ -119,7 +130,7 @@ function datatypeOptions(resolved: Resolved, toResolve: string): Completion[] {
 	}
 
 	if (Array.isArray(resolved)) {
-		return arrayOptions(toResolve, resolved);
+		return arrayOptions(resolved);
 	}
 
 	if (typeof resolved === 'object') {
@@ -175,8 +186,8 @@ const createCompletionOption = (
 	const option: Completion = {
 		label,
 		type: optionType,
-		section: isFunction ? METHODS_SECTION : FIELDS_SECTION,
-		apply: applyCompletion,
+		section: docInfo.doc?.section,
+		apply: applyCompletion((docInfo.doc?.args?.length ?? 0) > 0),
 	};
 
 	option.info = () => {
@@ -284,7 +295,7 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 
 	if (isSplitInBatchesAbsent()) SKIP.add('context');
 
-	const name = toResolve.startsWith('$(') ? '$()' : toResolve;
+	const name = /^\$\(.*\)$/.test(toResolve) ? '$()' : toResolve;
 
 	if (['$input', '$()'].includes(name) && hasNoParams(toResolve)) SKIP.add('params');
 
@@ -303,21 +314,23 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 		.filter((key) => !SKIP.has(key) && isAllowedInDotNotation(key) && !isPseudoParam(key))
 		.map((key) => {
 			ensureKeyCanBeResolved(resolved, key);
+			const resolvedProp = resolved[key];
 
-			const isFunction = typeof resolved[key] === 'function';
+			const isFunction = typeof resolvedProp === 'function';
+			const hasArgs = isFunction && resolvedProp.length > 0 && name !== '$()';
 
 			const option: Completion = {
 				label: isFunction ? key + '()' : key,
 				type: isFunction ? 'function' : 'keyword',
-				section: isFunction ? METHODS_SECTION : { ...FIELDS_SECTION, rank: -1 },
-				apply: applyCompletion,
+				section: getObjectPropertySection({ name, key, isFunction }),
+				apply: applyCompletion(hasArgs),
 			};
 
 			const infoKey = [name, key].join('.');
 			option.info = createCompletionOption('', key, isFunction ? 'native-function' : 'keyword', {
 				doc: {
 					name: key,
-					returnType: typeof resolved[key],
+					returnType: typeof resolvedProp,
 					description: i18n.proxyVars[infoKey],
 				},
 			}).info;
@@ -337,19 +350,77 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 		return sortCompletionsAlpha([...localKeys, ...natives('object')]);
 	}
 
-	return withRecommendedSection(
-		sortCompletionsAlpha([...localKeys, ...natives('object'), ...extensions('object')]),
-		OBJECT_RECOMMENDED_OPTIONS,
-	);
+	return applySections({
+		options: sortCompletionsAlpha([...localKeys, ...natives('object'), ...extensions('object')]),
+		recommended: OBJECT_RECOMMENDED_OPTIONS,
+		recommendedSection: RECOMMENDED_METHODS_SECTION,
+		methodsSection: OTHER_METHODS_SECTION,
+		fieldsSection: { ...FIELDS_SECTION, rank: -1 },
+		excludeRecommended: true,
+	});
 };
 
-const withRecommendedSection = (options: Completion[], recommended: string[]): Completion[] => {
+const getObjectPropertySection = ({
+	name,
+	key,
+	isFunction,
+}: {
+	name: string;
+	key: string;
+	isFunction: boolean;
+}): CompletionSection => {
+	if (name === '$input' || name === '$()') {
+		if (key === 'item') return RECOMMENDED_SECTION;
+		return OTHER_SECTION;
+	}
+
+	return isFunction ? METHODS_SECTION : { ...FIELDS_SECTION, rank: 0 };
+};
+
+const applySections = ({
+	options,
+	sections,
+	recommended = [],
+	excludeRecommended = false,
+	methodsSection = METHODS_SECTION,
+	fieldsSection = FIELDS_SECTION,
+	recommendedSection = RECOMMENDED_SECTION,
+}: {
+	options: Completion[];
+	recommended?: string[];
+	recommendedSection?: CompletionSection;
+	methodsSection?: CompletionSection;
+	fieldsSection?: CompletionSection;
+	sections?: Record<string, CompletionSection>;
+	excludeRecommended?: boolean;
+}) => {
+	const recommendedSet = new Set(recommended);
+	const optionByLabel = options.reduce(
+		(acc, option) => {
+			acc[option.label] = option;
+			return acc;
+		},
+		{} as Record<string, Completion>,
+	);
 	return recommended
-		.map((reco) => {
-			const option = options.find((op) => op.label === reco) as Completion;
-			return { ...option, section: RECOMMENDED_SECTION } as Completion;
-		})
-		.concat(options);
+		.map(
+			(reco): Completion => ({
+				...optionByLabel[reco],
+				section: recommendedSection,
+			}),
+		)
+		.concat(
+			options
+				.filter((option) => !excludeRecommended || !recommendedSet.has(option.label))
+				.map((option) => {
+					if (sections) {
+						option.section = sections[option.section as string] ?? OTHER_SECTION;
+					} else {
+						option.section = option.label.endsWith('()') ? methodsSection : fieldsSection;
+					}
+					return option;
+				}),
+		);
 };
 
 const isUrl = (url: string): boolean => {
@@ -365,52 +436,75 @@ const stringOptions = (resolved: string): Completion[] => {
 	const options = sortCompletionsAlpha([...natives('string'), ...extensions('string')]);
 
 	if (validateFieldType('string', resolved, 'number').valid) {
-		return withRecommendedSection(options, ['toInt()', 'toFloat()', ...STRING_RECOMMENDED_OPTIONS]);
+		return applySections({
+			options,
+			recommended: ['toInt()', 'toFloat()'],
+			sections: STRING_SECTIONS,
+		});
 	}
 
 	if (validateFieldType('string', resolved, 'dateTime').valid) {
-		return withRecommendedSection(options, ['toDate()', ...STRING_RECOMMENDED_OPTIONS]);
+		return applySections({
+			options,
+			recommended: ['toDate()'],
+			sections: STRING_SECTIONS,
+		});
 	}
 
 	if (VALID_EMAIL_REGEX.test(resolved) || isUrl(resolved)) {
-		return withRecommendedSection(options, ['extractDomain()', ...STRING_RECOMMENDED_OPTIONS]);
+		return applySections({
+			options,
+			recommended: ['extractDomain()'],
+			sections: STRING_SECTIONS,
+		});
 	}
 
 	if (resolved.split(/\s/).find((token) => VALID_EMAIL_REGEX.test(token))) {
-		return withRecommendedSection(options, ['extractEmail()', ...STRING_RECOMMENDED_OPTIONS]);
+		return applySections({
+			options,
+			recommended: ['extractEmail()'],
+			sections: STRING_SECTIONS,
+		});
 	}
 
-	return withRecommendedSection(options, STRING_RECOMMENDED_OPTIONS);
+	return applySections({
+		options,
+		recommended: STRING_RECOMMENDED_OPTIONS,
+		sections: STRING_SECTIONS,
+	});
 };
 
 const numberOptions = (resolved: number): Completion[] => {
 	const options = sortCompletionsAlpha([...natives('number'), ...extensions('number')]);
 
 	if (!Number.isInteger(resolved)) {
-		return withRecommendedSection(options, ['round()', 'floor()', 'ceil()']);
+		return applySections({ options, recommended: ['round()', 'floor()', 'ceil()'] });
 	}
 
-	return options;
+	return applySections({ options });
 };
 
 const dateOptions = (): Completion[] => {
-	return sortCompletionsAlpha([...natives('date'), ...extensions('date')]);
+	return applySections({
+		options: sortCompletionsAlpha([...natives('date'), ...extensions('date')]),
+	});
 };
 
 const luxonOptions = (): Completion[] => {
-	return withRecommendedSection(
-		sortCompletionsAlpha([...luxonInstanceOptions(), ...extensions('date')]),
-		LUXON_RECOMMENDED_OPTIONS,
-	);
+	return applySections({
+		options: sortCompletionsAlpha(
+			uniqBy([...extensions('date'), ...luxonInstanceOptions()], (option) => option.label),
+		),
+		recommended: LUXON_RECOMMENDED_OPTIONS,
+		sections: LUXON_SECTIONS,
+	});
 };
 
-const arrayOptions = (toResolve: string, resolved: unknown[]): Completion[] => {
-	if (/all\(.*?\)/.test(toResolve)) return [];
-
-	const options = withRecommendedSection(
-		sortCompletionsAlpha([...natives('array'), ...extensions('array')]),
-		ARRAY_RECOMMENDED_OPTIONS,
-	);
+const arrayOptions = (resolved: unknown[]): Completion[] => {
+	const options = applySections({
+		options: sortCompletionsAlpha([...natives('array'), ...extensions('array')]),
+		recommended: ARRAY_RECOMMENDED_OPTIONS,
+	});
 
 	if (resolved.length > 0 && resolved.some((i) => typeof i !== 'number')) {
 		const NUMBER_ONLY_ARRAY_EXTENSIONS = new Set(['max()', 'min()', 'sum()', 'average()']);
@@ -537,11 +631,6 @@ const createLuxonAutocompleteOption = (
 ): Completion => {
 	const isFunction = isFunctionOption(type);
 	const label = isFunction ? name + '()' : name;
-	const option: Completion = {
-		label,
-		type,
-		section: isFunction ? METHODS_SECTION : FIELDS_SECTION,
-	};
 
 	let doc: DocMetadata | undefined;
 	if (docDefinition.properties && docDefinition.properties.hasOwnProperty(name)) {
@@ -559,6 +648,13 @@ const createLuxonAutocompleteOption = (
 			docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetime',
 		};
 	}
+
+	const option: Completion = {
+		label,
+		type,
+		section: doc?.section,
+		apply: applyCompletion((doc?.args?.length ?? 0) > 0),
+	};
 	option.info = createCompletionOption('DateTime', name, type, {
 		// Add translated description
 		doc: { ...doc, description: translations[name] } as DocMetadata,
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/dollar.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/dollar.completions.ts
index 527ea45001620..fce8da0a262e2 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/dollar.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/dollar.completions.ts
@@ -79,5 +79,5 @@ export function dollarOptions(): Completion[] {
 
 	return ROOT_DOLLAR_COMPLETIONS.filter(({ label }) => !SKIP.has(label))
 		.concat(previousNodesCompletions)
-		.map((completion) => ({ ...completion, apply: applyCompletion }));
+		.map((completion) => ({ ...completion, apply: applyCompletion() }));
 }
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
index b185d76287716..5b597bc240d13 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
@@ -1,7 +1,6 @@
-import { NODE_TYPES_EXCLUDED_FROM_AUTOCOMPLETION } from '@/components/CodeNodeEditor/constants';
 import { CREDENTIAL_EDIT_MODAL_KEY, SPLIT_IN_BATCHES_NODE_TYPE } from '@/constants';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { resolveParameter } from '@/composables/useWorkflowHelpers';
+import { resolveParameter, useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useUIStore } from '@/stores/ui.store';
 import {
@@ -14,6 +13,7 @@ import type { EditorView } from '@codemirror/view';
 import type { TransactionSpec } from '@codemirror/state';
 import type { SyntaxNode } from '@lezer/common';
 import { javascriptLanguage } from '@codemirror/lang-javascript';
+import { useRouter } from 'vue-router';
 
 /**
  * Split user input into base (to resolve) and tail (to filter).
@@ -124,15 +124,15 @@ export const isSplitInBatchesAbsent = () =>
 	!useWorkflowsStore().workflow.nodes.some((node) => node.type === SPLIT_IN_BATCHES_NODE_TYPE);
 
 export function autocompletableNodeNames() {
-	return useWorkflowsStore()
-		.allNodes.filter((node) => {
-			const activeNodeName = useNDVStore().activeNode?.name;
-
-			return (
-				!NODE_TYPES_EXCLUDED_FROM_AUTOCOMPLETION.includes(node.type) && node.name !== activeNodeName
-			);
-		})
-		.map((node) => node.name);
+	const activeNodeName = useNDVStore().activeNode?.name;
+
+	if (!activeNodeName) return [];
+
+	return useWorkflowHelpers(useRouter())
+		.getCurrentWorkflow()
+		.getParentNodesByDepth(activeNodeName)
+		.map((node) => node.name)
+		.filter((name) => name !== activeNodeName);
 }
 
 /**
@@ -153,24 +153,21 @@ export const stripExcessParens = (context: CompletionContext) => (option: Comple
  * When a function completion is selected, set the cursor correctly
  * e.g. `$max()` -> `$max(<cursor>)`
  */
-export const applyCompletion = (
-	view: EditorView,
-	completion: Completion,
-	from: number,
-	to: number,
-): void => {
-	const tx: TransactionSpec = {
-		...insertCompletionText(view.state, completion.label, from, to),
-		annotations: pickedCompletion.of(completion),
-	};
-
-	if (completion.label.endsWith('()')) {
-		const cursorPosition = from + completion.label.length - 1;
-		tx.selection = { anchor: cursorPosition, head: cursorPosition };
-	}
+export const applyCompletion =
+	(hasArgs = true) =>
+	(view: EditorView, completion: Completion, from: number, to: number): void => {
+		const tx: TransactionSpec = {
+			...insertCompletionText(view.state, completion.label, from, to),
+			annotations: pickedCompletion.of(completion),
+		};
+
+		if (completion.label.endsWith('()') && hasArgs) {
+			const cursorPosition = from + completion.label.length - 1;
+			tx.selection = { anchor: cursorPosition, head: cursorPosition };
+		}
 
-	view.dispatch(tx);
-};
+		view.dispatch(tx);
+	};
 
 export const sortCompletionsAlpha = (completions: Completion[]): Completion[] => {
 	return completions.sort((a, b) => a.label.localeCompare(b.label));
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 47baa17ab1a83..cd28c97136112 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -317,11 +317,22 @@
 	"codeNodeEditor.completer.selector.params": "The parameters of the node",
 	"codeNodeEditor.completer.selector.isExecuted": "Whether the node has executed",
 	"codeNodeEditor.completer.section.input": "Input",
-	"codeNodeEditor.completer.section.prevNodes": "Previous nodes",
+	"codeNodeEditor.completer.section.prevNodes": "Earlier nodes",
 	"codeNodeEditor.completer.section.metadata": "Metadata",
 	"codeNodeEditor.completer.section.fields": "Fields",
 	"codeNodeEditor.completer.section.methods": "Methods",
+	"codeNodeEditor.completer.section.otherMethods": "Other methods",
 	"codeNodeEditor.completer.section.recommended": "Suggested",
+	"codeNodeEditor.completer.section.recommendedMethods": "Suggested methods",
+	"codeNodeEditor.completer.section.other": "Other",
+	"codeNodeEditor.completer.section.edit": "Edit",
+	"codeNodeEditor.completer.section.query": "Query",
+	"codeNodeEditor.completer.section.format": "Format",
+	"codeNodeEditor.completer.section.component": "Component",
+	"codeNodeEditor.completer.section.case": "Case",
+	"codeNodeEditor.completer.section.cast": "Cast",
+	"codeNodeEditor.completer.section.compare": "Compare",
+	"codeNodeEditor.completer.section.validation": "Validation",
 	"codeNodeEditor.linter.allItems.firstOrLastCalledWithArg": "expects no argument.",
 	"codeNodeEditor.linter.allItems.emptyReturn": "Code doesn't return items properly. Please return an array of objects, one for each item you would like to output.",
 	"codeNodeEditor.linter.allItems.itemCall": "`item` is a property to access, not a method to call. Did you mean `.item` without brackets?",

From 2675c46e69550dfc147a5d87148ebd6d41737e04 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 26 Feb 2024 17:33:53 +0100
Subject: [PATCH 15/25] Fix completion tests

---
 .../completions/__tests__/completions.test.ts | 78 +++++++------------
 .../codemirror/completions/constants.ts       | 70 +++++++++--------
 .../completions/datatype.completions.ts       |  3 +-
 3 files changed, 66 insertions(+), 85 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
index 1d9867a0e1d9c..3e02732450838 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
@@ -23,15 +23,15 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
 import { setupServer } from '@/__tests__/server';
 import {
+	ARRAY_NUMBER_ONLY_METHODS,
 	ARRAY_RECOMMENDED_OPTIONS,
-	FIELDS_SECTION,
 	LUXON_RECOMMENDED_OPTIONS,
 	METADATA_SECTION,
 	METHODS_SECTION,
-	OBJECT_RECOMMENDED_OPTIONS,
 	RECOMMENDED_SECTION,
 	STRING_RECOMMENDED_OPTIONS,
 } from '../constants';
+import { uniqBy } from 'lodash-es';
 
 let externalSecretsStore: ReturnType<typeof useExternalSecretsStore>;
 let uiStore: ReturnType<typeof useUIStore>;
@@ -80,10 +80,10 @@ describe('Top-level completions', () => {
 			expect.objectContaining({ label: '$json', section: RECOMMENDED_SECTION }),
 		);
 		expect(result?.[4]).toEqual(
-			expect.objectContaining({ label: '$parameter', section: METADATA_SECTION }),
+			expect.objectContaining({ label: '$execution', section: METADATA_SECTION }),
 		);
-		expect(result?.[12]).toEqual(
-			expect.objectContaining({ label: '$ifEmpty()', section: METHODS_SECTION }),
+		expect(result?.[14]).toEqual(
+			expect.objectContaining({ label: '$max()', section: METHODS_SECTION }),
 		);
 	});
 
@@ -119,9 +119,7 @@ describe('Top-level completions', () => {
 	});
 
 	test('should return node selector completions for: {{ $(| }}', () => {
-		const initialState = { workflows: { workflow: { nodes: mockNodes } } };
-
-		setActivePinia(createTestingPinia({ initialState }));
+		vi.spyOn(utils, 'autocompletableNodeNames').mockReturnValue(mockNodes.map((node) => node.name));
 
 		expect(completions('{{ $(| }}')).toHaveLength(mockNodes.length);
 	});
@@ -140,7 +138,8 @@ describe('Luxon method completions', () => {
 		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 
 		expect(completions('{{ $now.| }}')).toHaveLength(
-			luxonInstanceOptions().length + extensions('date').length + LUXON_RECOMMENDED_OPTIONS.length,
+			uniqBy(luxonInstanceOptions().concat(extensions('date')), (option) => option.label).length +
+				LUXON_RECOMMENDED_OPTIONS.length,
 		);
 	});
 
@@ -149,7 +148,8 @@ describe('Luxon method completions', () => {
 		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 
 		expect(completions('{{ $today.| }}')).toHaveLength(
-			luxonInstanceOptions().length + extensions('date').length + +LUXON_RECOMMENDED_OPTIONS.length,
+			uniqBy(luxonInstanceOptions().concat(extensions('date')), (option) => option.label).length +
+				LUXON_RECOMMENDED_OPTIONS.length,
 		);
 	});
 });
@@ -171,12 +171,7 @@ describe('Resolution-based completions', () => {
 
 			const result = completions('{{ "You \'owe\' me 200$".| }}');
 
-			expect(result).toHaveLength(
-				natives('string').length +
-					extensions('string').length +
-					STRING_RECOMMENDED_OPTIONS.length +
-					1,
-			);
+			expect(result).toHaveLength(natives('string').length + extensions('string').length + 1);
 		});
 
 		test('should return completions for number literal: {{ (123).| }}', () => {
@@ -216,9 +211,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(object);
 
 			expect(completions('{{ ({ a: 1 }).| }}')).toHaveLength(
-				Object.keys(object).length +
-					extensions('object').length +
-					OBJECT_RECOMMENDED_OPTIONS.length,
+				Object.keys(object).length + extensions('object').length,
 			);
 		});
 	});
@@ -255,8 +248,7 @@ describe('Resolution-based completions', () => {
 		test('should return completions for complex expression: {{ $now.diff($now.diff($now.|)) }}', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(DateTime.now());
 			expect(completions('{{ $now.diff($now.diff($now.|)) }}')).toHaveLength(
-				luxonInstanceOptions().length +
-					extensions('date').length +
+				uniqBy(luxonInstanceOptions().concat(extensions('date')), (option) => option.label).length +
 					LUXON_RECOMMENDED_OPTIONS.length,
 			);
 		});
@@ -267,9 +259,7 @@ describe('Resolution-based completions', () => {
 			const found = completions('{{ $execution.resumeUrl.includes($json.|) }}');
 
 			if (!found) throw new Error('Expected to find completions');
-			expect(found).toHaveLength(
-				Object.keys($json).length + extensions('object').length + OBJECT_RECOMMENDED_OPTIONS.length,
-			);
+			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
 		});
 
 		test('should return completions for operation expression: {{ $now.day + $json. }}', () => {
@@ -279,9 +269,7 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(
-				Object.keys($json).length + extensions('object').length + OBJECT_RECOMMENDED_OPTIONS.length,
-			);
+			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
 		});
 
 		test('should return completions for operation expression: {{ Math.abs($now.day) >= 10 ? $now : Math.abs($json.). }}', () => {
@@ -291,9 +279,7 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(
-				Object.keys($json).length + extensions('object').length + OBJECT_RECOMMENDED_OPTIONS.length,
-			);
+			expect(found).toHaveLength(Object.keys($json).length + extensions('object').length);
 		});
 	});
 
@@ -361,7 +347,6 @@ describe('Resolution-based completions', () => {
 					label: provider,
 					type: 'keyword',
 					apply: expect.any(Function),
-					section: FIELDS_SECTION,
 				},
 			]);
 		});
@@ -386,14 +371,12 @@ describe('Resolution-based completions', () => {
 					label: secrets[0],
 					type: 'keyword',
 					apply: expect.any(Function),
-					section: FIELDS_SECTION,
 				},
 				{
 					info: expect.any(Function),
 					label: secrets[1],
 					type: 'keyword',
 					apply: expect.any(Function),
-					section: FIELDS_SECTION,
 				},
 			]);
 		});
@@ -463,20 +446,23 @@ describe('Resolution-based completions', () => {
 			expect(found[0].label).toBe('json');
 		});
 
-		test('should return no completions for: {{ $input.all().| }}', () => {
+		test('should return completions for: {{ $input.all().| }}', () => {
 			// @ts-expect-error
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue([$input.item]);
 
-			expect(completions('{{ $input.all().| }}')).toBeNull();
+			expect(completions('{{ $input.all().| }}')).toHaveLength(
+				extensions('array').length +
+					natives('array').length +
+					ARRAY_RECOMMENDED_OPTIONS.length -
+					ARRAY_NUMBER_ONLY_METHODS.length,
+			);
 		});
 
 		test("should return completions for: '{{ $input.item.| }}'", () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json);
 
 			expect(completions('{{ $input.item.| }}')).toHaveLength(
-				Object.keys($input.item.json).length +
-					extensions('object').length +
-					OBJECT_RECOMMENDED_OPTIONS.length,
+				Object.keys($input.item.json).length + extensions('object').length,
 			);
 		});
 
@@ -484,9 +470,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.first().json);
 
 			expect(completions('{{ $input.first().| }}')).toHaveLength(
-				Object.keys($input.first().json).length +
-					extensions('object').length +
-					OBJECT_RECOMMENDED_OPTIONS.length,
+				Object.keys($input.first().json).length + extensions('object').length,
 			);
 		});
 
@@ -494,9 +478,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.last().json);
 
 			expect(completions('{{ $input.last().| }}')).toHaveLength(
-				Object.keys($input.last().json).length +
-					extensions('object').length +
-					OBJECT_RECOMMENDED_OPTIONS.length,
+				Object.keys($input.last().json).length + extensions('object').length,
 			);
 		});
 
@@ -504,9 +486,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.all()[0].json);
 
 			expect(completions('{{ $input.all()[0].| }}')).toHaveLength(
-				Object.keys($input.all()[0].json).length +
-					extensions('object').length +
-					OBJECT_RECOMMENDED_OPTIONS.length,
+				Object.keys($input.all()[0].json).length + extensions('object').length,
 			);
 		});
 
@@ -538,9 +518,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.obj);
 
 			expect(completions('{{ $input.item.json.obj.| }}')).toHaveLength(
-				Object.keys($input.item.json.obj).length +
-					extensions('object').length +
-					OBJECT_RECOMMENDED_OPTIONS.length,
+				Object.keys($input.item.json.obj).length + extensions('object').length,
 			);
 		});
 	});
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
index 53849fc5d4d00..3450b7e5aa5c1 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
@@ -1,45 +1,46 @@
 import type { Completion, CompletionSection } from '@codemirror/autocomplete';
 import { i18n } from '@/plugins/i18n';
+import { withSectionHeader } from './utils';
 
-export const RECOMMENDED_SECTION: CompletionSection = {
+export const RECOMMENDED_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.recommended'),
 	rank: 0,
-};
+});
 
-export const RECOMMENDED_METHODS_SECTION: CompletionSection = {
+export const RECOMMENDED_METHODS_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.recommendedMethods'),
 	rank: 0,
-};
+});
 
-export const PREVIOUS_NODES_SECTION: CompletionSection = {
+export const PREVIOUS_NODES_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.prevNodes'),
 	rank: 2,
-};
+});
 
-export const FIELDS_SECTION: CompletionSection = {
+export const FIELDS_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.fields'),
 	rank: 3,
-};
+});
 
-export const METHODS_SECTION: CompletionSection = {
+export const METHODS_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.methods'),
 	rank: 4,
-};
+});
 
-export const METADATA_SECTION: CompletionSection = {
+export const METADATA_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.metadata'),
 	rank: 5,
-};
+});
 
-export const OTHER_METHODS_SECTION: CompletionSection = {
+export const OTHER_METHODS_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.otherMethods'),
 	rank: 100,
-};
+});
 
-export const OTHER_SECTION: CompletionSection = {
+export const OTHER_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.other'),
 	rank: 101,
-};
+});
 
 export const ROOT_DOLLAR_COMPLETIONS: Completion[] = [
 	{
@@ -160,46 +161,47 @@ export const STRING_EDIT_OPTIONS = [
 
 export const LUXON_RECOMMENDED_OPTIONS = ['format()', 'minus()', 'plus()', 'diff()'];
 export const ARRAY_RECOMMENDED_OPTIONS = ['length', 'last()', 'includes()', 'map()', 'filter()'];
+export const ARRAY_NUMBER_ONLY_METHODS = ['max()', 'min()', 'sum()', 'average()'];
 export const OBJECT_RECOMMENDED_OPTIONS = ['keys()', 'values()', 'isEmpty()'];
 
 export const LUXON_SECTIONS: Record<string, CompletionSection> = {
-	edit: {
+	edit: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.edit'),
 		rank: 1,
-	},
-	compare: {
+	}),
+	compare: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.compare'),
 		rank: 2,
-	},
-	format: {
+	}),
+	format: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.format'),
 		rank: 3,
-	},
-	query: {
+	}),
+	query: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.component'),
 		rank: 4,
-	},
+	}),
 };
 
 export const STRING_SECTIONS: Record<string, CompletionSection> = {
-	edit: {
+	edit: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.edit'),
 		rank: 1,
-	},
-	query: {
+	}),
+	query: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.query'),
 		rank: 2,
-	},
-	validation: {
+	}),
+	validation: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.validation'),
 		rank: 3,
-	},
-	case: {
+	}),
+	case: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.case'),
 		rank: 4,
-	},
-	cast: {
+	}),
+	cast: withSectionHeader({
 		name: i18n.baseText('codeNodeEditor.completer.section.cast'),
 		rank: 5,
-	},
+	}),
 };
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index c5ec0f880b1f7..81ff5a84ccd16 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -31,6 +31,7 @@ import { luxonStaticDocs } from './nativesAutocompleteDocs/luxon.static.docs';
 import { useEnvironmentsStore } from '@/stores/environments.ee.store';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import {
+	ARRAY_NUMBER_ONLY_METHODS,
 	ARRAY_RECOMMENDED_OPTIONS,
 	FIELDS_SECTION,
 	LUXON_RECOMMENDED_OPTIONS,
@@ -507,7 +508,7 @@ const arrayOptions = (resolved: unknown[]): Completion[] => {
 	});
 
 	if (resolved.length > 0 && resolved.some((i) => typeof i !== 'number')) {
-		const NUMBER_ONLY_ARRAY_EXTENSIONS = new Set(['max()', 'min()', 'sum()', 'average()']);
+		const NUMBER_ONLY_ARRAY_EXTENSIONS = new Set(ARRAY_NUMBER_ONLY_METHODS);
 
 		return options.filter((m) => !NUMBER_ONLY_ARRAY_EXTENSIONS.has(m.label));
 	}

From a400f2745526e88ce9277ccf7aa28679795855a8 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 26 Feb 2024 17:34:08 +0100
Subject: [PATCH 16/25] Tweak autocomplete styling

---
 .../plugins/codemirror/completions/utils.ts   | 17 +++++++++
 .../src/styles/plugins/_codemirror.scss       | 38 +++++++++++--------
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
index 5b597bc240d13..76e8c36dce65a 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
@@ -8,6 +8,7 @@ import {
 	type Completion,
 	type CompletionContext,
 	pickedCompletion,
+	type CompletionSection,
 } from '@codemirror/autocomplete';
 import type { EditorView } from '@codemirror/view';
 import type { TransactionSpec } from '@codemirror/state';
@@ -172,3 +173,19 @@ export const applyCompletion =
 export const sortCompletionsAlpha = (completions: Completion[]): Completion[] => {
 	return completions.sort((a, b) => a.label.localeCompare(b.label));
 };
+
+export const renderSectionHeader = (section: CompletionSection): HTMLElement => {
+	const container = document.createElement('li');
+	container.classList.add('cm-section-header');
+	const inner = document.createElement('div');
+	inner.classList.add('cm-section-title');
+	inner.textContent = section.name;
+	container.appendChild(inner);
+
+	return container;
+};
+
+export const withSectionHeader = (section: CompletionSection): CompletionSection => {
+	section.header = renderSectionHeader;
+	return section;
+};
diff --git a/packages/editor-ui/src/styles/plugins/_codemirror.scss b/packages/editor-ui/src/styles/plugins/_codemirror.scss
index 1ef34c83347ce..b7fddc6c58cd5 100644
--- a/packages/editor-ui/src/styles/plugins/_codemirror.scss
+++ b/packages/editor-ui/src/styles/plugins/_codemirror.scss
@@ -20,16 +20,17 @@
 
 	> ul[role='listbox'] {
 		font-family: var(--font-family-monospace);
-		max-height: min(280px, 50vh);
-		width: min(320px, 50vw);
+		max-height: min(220px, 50vh);
+		width: min(260px, 50vw);
 		min-width: auto;
 		max-width: none;
 		border: var(--border-base);
 		border-radius: var(--border-radius-base);
 
 		li[role='option'] {
-			color: var(--color-success);
+			color: var(--color-text-base);
 			display: flex;
+			font-size: var(--font-size-2xs);
 			justify-content: space-between;
 			padding: var(--spacing-5xs) var(--spacing-2xs);
 			scroll-padding: 40px;
@@ -41,25 +42,30 @@
 		}
 
 		li[aria-selected] {
-			background-color: var(--color-autocomplete-selected-background);
-			color: var(--color-autocomplete-selected-font);
+			background-color: var(--color-background-base);
+			color: var(--color-text-dark);
 		}
 
-		> completion-section {
-			font-family: var(--font-family);
-			font-weight: var(--font-weight-bold);
-			padding: var(--spacing-4xs) var(--spacing-2xs);
-			color: var(--color-text-base);
-			opacity: 1;
-			background-color: var(--color-background-base);
-			border-bottom: var(--border-base);
-			line-height: var(--font-line-height-loose);
+		> .cm-section-header {
+			padding: var(--spacing-4xs) var(--spacing-4xs);
+			padding-bottom: 0;
+			border-bottom: var(--spacing-4xs) solid var(--color-background-xlight);
+			background-color: var(--color-background-xlight);
 			position: sticky;
 			top: 0;
 		}
 
-		li:has(+ completion-section) {
-			border-bottom: var(--border-base);
+		.cm-section-title {
+			font-family: var(--font-family);
+			font-weight: var(--font-weight-bold);
+			font-size: var(--font-size-3xs);
+			padding: var(--spacing-5xs) var(--spacing-4xs);
+
+			border-radius: var(--border-radius-base);
+			display: inline-flex;
+			text-transform: uppercase;
+			background-color: var(--color-success-tint-1);
+			color: var(--color-success);
 		}
 	}
 }

From dc3113f80f0026e8893c66ab316472e1488a78fa Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 27 Feb 2024 17:09:02 +0100
Subject: [PATCH 17/25] Fix review feedback

---
 .../editor-ui/src/mixins/completionManager.ts |   4 +
 .../editor-ui/src/mixins/expressionManager.ts |  20 +-
 .../completions/__tests__/completions.test.ts |  12 +-
 .../codemirror/completions/constants.ts       |  17 +-
 .../completions/datatype.completions.ts       | 179 ++++++++++++------
 .../luxon.instance.docs.ts                    |  30 +++
 .../plugins/codemirror/completions/types.ts   |   8 +-
 .../plugins/codemirror/completions/utils.ts   |   2 +-
 .../src/plugins/i18n/locales/en.json          |   1 +
 packages/editor-ui/src/utils/expressions.ts   |   5 +-
 .../workflow/src/Extensions/DateExtensions.ts |   4 +
 .../workflow/src/Extensions/Extensions.ts     |   7 +-
 .../src/Extensions/StringExtensions.ts        |  12 +-
 13 files changed, 209 insertions(+), 92 deletions(-)

diff --git a/packages/editor-ui/src/mixins/completionManager.ts b/packages/editor-ui/src/mixins/completionManager.ts
index e24a9f101bfe2..0cdee7eb069ff 100644
--- a/packages/editor-ui/src/mixins/completionManager.ts
+++ b/packages/editor-ui/src/mixins/completionManager.ts
@@ -3,6 +3,9 @@ import { ExpressionExtensions } from 'n8n-workflow';
 import type { EditorView, ViewUpdate } from '@codemirror/view';
 
 import { expressionManager } from './expressionManager';
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useRootStore } from '@/stores/n8nRoot.store';
 
 export const completionManager = defineComponent({
 	mixins: [expressionManager],
@@ -12,6 +15,7 @@ export const completionManager = defineComponent({
 		};
 	},
 	computed: {
+		...mapStores(useNDVStore, useRootStore),
 		expressionExtensionsCategories() {
 			return ExpressionExtensions.reduce<Record<string, string | undefined>>((acc, cur) => {
 				for (const fnName of Object.keys(cur.functions)) {
diff --git a/packages/editor-ui/src/mixins/expressionManager.ts b/packages/editor-ui/src/mixins/expressionManager.ts
index e6137864b8f72..efe110dae13a9 100644
--- a/packages/editor-ui/src/mixins/expressionManager.ts
+++ b/packages/editor-ui/src/mixins/expressionManager.ts
@@ -16,6 +16,7 @@ import type { Html, Plaintext, RawSegment, Resolvable, Segment } from '@/types/e
 import type { EditorView } from '@codemirror/view';
 import { isEqual } from 'lodash-es';
 import { getExpressionErrorMessage, getResolvableState } from '@/utils/expressions';
+import type { EditorState } from '@codemirror/state';
 
 export const expressionManager = defineComponent({
 	props: {
@@ -27,10 +28,10 @@ export const expressionManager = defineComponent({
 			default: () => ({}),
 		},
 	},
-	data() {
+	data(): { editor: EditorView; skipSegments: string[]; editorState: EditorState | undefined } {
 		return {
 			editor: {} as EditorView,
-			skipSegments: [] as string[],
+			skipSegments: [],
 			editorState: undefined,
 		};
 	},
@@ -70,15 +71,12 @@ export const expressionManager = defineComponent({
 		},
 
 		segments(): Segment[] {
-			if (!this.editorState || !this.editorState) return [];
+			const state = this.editorState as EditorState;
+			if (!state) return [];
 
 			const rawSegments: RawSegment[] = [];
 
-			const fullTree = ensureSyntaxTree(
-				this.editorState,
-				this.editorState.doc.length,
-				EXPRESSION_EDITOR_PARSER_TIMEOUT,
-			);
+			const fullTree = ensureSyntaxTree(state, state.doc.length, EXPRESSION_EDITOR_PARSER_TIMEOUT);
 
 			if (fullTree === null) {
 				throw new Error(`Failed to parse expression: ${this.editorValue}`);
@@ -87,7 +85,7 @@ export const expressionManager = defineComponent({
 			const skipSegments = ['Program', 'Script', 'Document', ...this.skipSegments];
 
 			fullTree.cursor().iterate((node) => {
-				const text = this.editorState.sliceDoc(node.from, node.to);
+				const text = state.sliceDoc(node.from, node.to);
 
 				if (skipSegments.includes(node.type.name)) return;
 
@@ -109,7 +107,7 @@ export const expressionManager = defineComponent({
 
 				if (token === 'Resolvable') {
 					const { resolved, fullError } = this.resolve(text, this.hoveringItem);
-
+					const hasFocus = this.editor.hasFocus;
 					acc.push({
 						kind: 'resolvable',
 						from,
@@ -119,7 +117,7 @@ export const expressionManager = defineComponent({
 						// For some reason, expressions that resolve to a number 0 are breaking preview in the SQL editor
 						// This fixes that but as as TODO we should figure out why this is happening
 						resolved: String(resolved),
-						state: getResolvableState(fullError),
+						state: getResolvableState(fullError, hasFocus),
 						error: fullError,
 					});
 
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
index 3e02732450838..070005622c9c6 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
@@ -179,7 +179,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce(123);
 
 			expect(completions('{{ (123).| }}')).toHaveLength(
-				natives('number').length + extensions('number').length,
+				natives('number').length + extensions('number').length + ['isEven()', 'isOdd()'].length,
 			);
 		});
 
@@ -234,7 +234,9 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.num);
 			const found = completions('{{ Math.abs($input.item.json.num1).| }}');
 			if (!found) throw new Error('Expected to find completions');
-			expect(found).toHaveLength(extensions('number').length + natives('number').length);
+			expect(found).toHaveLength(
+				extensions('number').length + natives('number').length + ['isEven()', 'isOdd()'].length,
+			);
 		});
 
 		test('should return completions when node reference is used as a function parameter', () => {
@@ -306,7 +308,9 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(extensions('number').length + natives('number').length);
+			expect(found).toHaveLength(
+				extensions('number').length + natives('number').length + ['isEven()', 'isOdd()'].length,
+			);
 			expect(found.map((c) => c.label).every((l) => !l.endsWith('()')));
 		});
 
@@ -502,7 +506,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.num);
 
 			expect(completions('{{ $input.item.json.num.| }}')).toHaveLength(
-				extensions('number').length + natives('number').length,
+				extensions('number').length + natives('number').length + ['isEven()', 'isOdd()'].length,
 			);
 		});
 
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
index 3450b7e5aa5c1..6e41ea8fe648b 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
@@ -2,6 +2,11 @@ import type { Completion, CompletionSection } from '@codemirror/autocomplete';
 import { i18n } from '@/plugins/i18n';
 import { withSectionHeader } from './utils';
 
+export const FIELDS_SECTION: CompletionSection = withSectionHeader({
+	name: i18n.baseText('codeNodeEditor.completer.section.fields'),
+	rank: -1,
+});
+
 export const RECOMMENDED_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.recommended'),
 	rank: 0,
@@ -14,22 +19,22 @@ export const RECOMMENDED_METHODS_SECTION: CompletionSection = withSectionHeader(
 
 export const PREVIOUS_NODES_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.prevNodes'),
-	rank: 2,
+	rank: 1,
 });
 
-export const FIELDS_SECTION: CompletionSection = withSectionHeader({
-	name: i18n.baseText('codeNodeEditor.completer.section.fields'),
-	rank: 3,
+export const PROPERTIES_SECTION: CompletionSection = withSectionHeader({
+	name: i18n.baseText('codeNodeEditor.completer.section.properties'),
+	rank: 2,
 });
 
 export const METHODS_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.methods'),
-	rank: 4,
+	rank: 3,
 });
 
 export const METADATA_SECTION: CompletionSection = withSectionHeader({
 	name: i18n.baseText('codeNodeEditor.completer.section.metadata'),
-	rank: 5,
+	rank: 4,
 });
 
 export const OTHER_METHODS_SECTION: CompletionSection = withSectionHeader({
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index 81ff5a84ccd16..56c8726b4f6ed 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -23,7 +23,13 @@ import type {
 	CompletionResult,
 	CompletionSection,
 } from '@codemirror/autocomplete';
-import type { AutocompleteOptionType, ExtensionTypeName, FnToDoc, Resolved } from './types';
+import type {
+	AutocompleteInput,
+	AutocompleteOptionType,
+	ExtensionTypeName,
+	FnToDoc,
+	Resolved,
+} from './types';
 import { sanitizeHtml } from '@/utils/htmlUtils';
 import { isFunctionOption } from './typeGuards';
 import { luxonInstanceDocs } from './nativesAutocompleteDocs/luxon.instance.docs';
@@ -40,6 +46,7 @@ import {
 	OBJECT_RECOMMENDED_OPTIONS,
 	OTHER_METHODS_SECTION,
 	OTHER_SECTION,
+	PROPERTIES_SECTION,
 	RECOMMENDED_METHODS_SECTION,
 	RECOMMENDED_SECTION,
 	STRING_RECOMMENDED_OPTIONS,
@@ -87,7 +94,7 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
 		if (resolved === null) return null;
 
 		try {
-			options = datatypeOptions(resolved, base).map(stripExcessParens(context));
+			options = datatypeOptions({ resolved, base, tail }).map(stripExcessParens(context));
 		} catch {
 			return null;
 		}
@@ -111,19 +118,21 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
 	};
 }
 
-function datatypeOptions(resolved: Resolved, toResolve: string): Completion[] {
+function datatypeOptions(input: AutocompleteInput): Completion[] {
+	const { resolved } = input;
+
 	if (resolved === null) return [];
 
 	if (typeof resolved === 'number') {
-		return numberOptions(resolved);
+		return numberOptions(input as AutocompleteInput<number>);
 	}
 
 	if (typeof resolved === 'string') {
-		return stringOptions(resolved);
+		return stringOptions(input as AutocompleteInput<string>);
 	}
 
 	if (resolved instanceof DateTime) {
-		return luxonOptions();
+		return luxonOptions(input as AutocompleteInput<DateTime>);
 	}
 
 	if (resolved instanceof Date) {
@@ -131,28 +140,28 @@ function datatypeOptions(resolved: Resolved, toResolve: string): Completion[] {
 	}
 
 	if (Array.isArray(resolved)) {
-		return arrayOptions(resolved);
+		return arrayOptions(input as AutocompleteInput<unknown[]>);
 	}
 
 	if (typeof resolved === 'object') {
-		return objectOptions(toResolve, resolved);
+		return objectOptions(input as AutocompleteInput<IDataObject>);
 	}
 
 	return [];
 }
 
-export const natives = (typeName: ExtensionTypeName): Completion[] => {
+export const natives = (typeName: ExtensionTypeName, includeHidden = false): Completion[] => {
 	const natives: NativeDoc = NativeMethods.find((ee) => ee.typeName.toLowerCase() === typeName);
 
 	if (!natives) return [];
 
 	const nativeProps = natives.properties ? toOptions(natives.properties, typeName, 'keyword') : [];
-	const nativeMethods = toOptions(natives.functions, typeName, 'native-function');
+	const nativeMethods = toOptions(natives.functions, typeName, 'native-function', includeHidden);
 
 	return [...nativeProps, ...nativeMethods];
 };
 
-export const extensions = (typeName: ExtensionTypeName) => {
+export const extensions = (typeName: ExtensionTypeName, includeHidden = false) => {
 	const extensions = ExpressionExtensions.find((ee) => ee.typeName.toLowerCase() === typeName);
 
 	if (!extensions) return [];
@@ -161,18 +170,20 @@ export const extensions = (typeName: ExtensionTypeName) => {
 		return { ...acc, [fnName]: { doc: fn.doc } };
 	}, {});
 
-	return toOptions(fnToDoc, typeName, 'extension-function');
+	return toOptions(fnToDoc, typeName, 'extension-function', includeHidden);
 };
 
 export const toOptions = (
 	fnToDoc: FnToDoc,
 	typeName: ExtensionTypeName,
 	optionType: AutocompleteOptionType = 'native-function',
+	includeHidden = false,
 ) => {
 	return Object.entries(fnToDoc)
 		.sort((a, b) => a[0].localeCompare(b[0]))
-		.map(([fnName, fn]) => {
-			return createCompletionOption(typeName, fnName, optionType, fn);
+		.filter(([, docInfo]) => !docInfo.doc?.hidden || includeHidden)
+		.map(([fnName, docInfo]) => {
+			return createCompletionOption(typeName, fnName, optionType, docInfo);
 		});
 };
 
@@ -290,15 +301,17 @@ const createPropHeader = (typeName: string, property: { doc?: DocMetadata | unde
 	return header;
 };
 
-const objectOptions = (toResolve: string, resolved: IDataObject) => {
+const objectOptions = (input: AutocompleteInput<IDataObject>): Completion[] => {
+	const { base, tail, resolved } = input;
+	const includeHidden = tail.length > 0;
 	const rank = setRank(['item', 'all', 'first', 'last']);
 	const SKIP = new Set(['__ob__', 'pairedItem']);
 
 	if (isSplitInBatchesAbsent()) SKIP.add('context');
 
-	const name = /^\$\(.*\)$/.test(toResolve) ? '$()' : toResolve;
+	const name = /^\$\(.*\)$/.test(base) ? '$()' : base;
 
-	if (['$input', '$()'].includes(name) && hasNoParams(toResolve)) SKIP.add('params');
+	if (['$input', '$()'].includes(name) && hasNoParams(base)) SKIP.add('params');
 
 	let rawKeys = Object.keys(resolved);
 
@@ -306,7 +319,7 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 		rawKeys = Reflect.ownKeys(resolved) as string[];
 	}
 
-	if (toResolve === 'Math') {
+	if (base === 'Math') {
 		const descriptors = Object.getOwnPropertyDescriptors(Math);
 		rawKeys = Object.keys(descriptors).sort((a, b) => a.localeCompare(b));
 	}
@@ -342,21 +355,25 @@ const objectOptions = (toResolve: string, resolved: IDataObject) => {
 	const skipObjectExtensions =
 		resolved.isProxy ||
 		resolved.json ||
-		/json('])$/.test(toResolve) ||
-		toResolve === '$execution' ||
-		toResolve.endsWith('params') ||
-		toResolve === 'Math';
+		/json('])$/.test(base) ||
+		base === '$execution' ||
+		base.endsWith('params') ||
+		base === 'Math';
 
 	if (skipObjectExtensions) {
-		return sortCompletionsAlpha([...localKeys, ...natives('object')]);
+		return sortCompletionsAlpha([...localKeys, ...natives('object', includeHidden)]);
 	}
 
 	return applySections({
-		options: sortCompletionsAlpha([...localKeys, ...natives('object'), ...extensions('object')]),
+		options: sortCompletionsAlpha([
+			...localKeys,
+			...natives('object', includeHidden),
+			...extensions('object', includeHidden),
+		]),
 		recommended: OBJECT_RECOMMENDED_OPTIONS,
 		recommendedSection: RECOMMENDED_METHODS_SECTION,
 		methodsSection: OTHER_METHODS_SECTION,
-		fieldsSection: { ...FIELDS_SECTION, rank: -1 },
+		propSection: FIELDS_SECTION,
 		excludeRecommended: true,
 	});
 };
@@ -375,7 +392,7 @@ const getObjectPropertySection = ({
 		return OTHER_SECTION;
 	}
 
-	return isFunction ? METHODS_SECTION : { ...FIELDS_SECTION, rank: 0 };
+	return isFunction ? METHODS_SECTION : FIELDS_SECTION;
 };
 
 const applySections = ({
@@ -384,14 +401,14 @@ const applySections = ({
 	recommended = [],
 	excludeRecommended = false,
 	methodsSection = METHODS_SECTION,
-	fieldsSection = FIELDS_SECTION,
+	propSection = PROPERTIES_SECTION,
 	recommendedSection = RECOMMENDED_SECTION,
 }: {
 	options: Completion[];
 	recommended?: string[];
 	recommendedSection?: CompletionSection;
 	methodsSection?: CompletionSection;
-	fieldsSection?: CompletionSection;
+	propSection?: CompletionSection;
 	sections?: Record<string, CompletionSection>;
 	excludeRecommended?: boolean;
 }) => {
@@ -417,7 +434,7 @@ const applySections = ({
 					if (sections) {
 						option.section = sections[option.section as string] ?? OTHER_SECTION;
 					} else {
-						option.section = option.label.endsWith('()') ? methodsSection : fieldsSection;
+						option.section = option.label.endsWith('()') ? methodsSection : propSection;
 					}
 					return option;
 				}),
@@ -433,8 +450,13 @@ const isUrl = (url: string): boolean => {
 	}
 };
 
-const stringOptions = (resolved: string): Completion[] => {
-	const options = sortCompletionsAlpha([...natives('string'), ...extensions('string')]);
+const stringOptions = (input: AutocompleteInput<string>): Completion[] => {
+	const { resolved, tail } = input;
+	const includeHidden = tail.length > 0;
+	const options = sortCompletionsAlpha([
+		...natives('string', includeHidden),
+		...extensions('string', includeHidden),
+	]);
 
 	if (validateFieldType('string', resolved, 'number').valid) {
 		return applySections({
@@ -455,7 +477,7 @@ const stringOptions = (resolved: string): Completion[] => {
 	if (VALID_EMAIL_REGEX.test(resolved) || isUrl(resolved)) {
 		return applySections({
 			options,
-			recommended: ['extractDomain()'],
+			recommended: ['extractDomain()', 'isEmail()', ...STRING_RECOMMENDED_OPTIONS],
 			sections: STRING_SECTIONS,
 		});
 	}
@@ -463,7 +485,7 @@ const stringOptions = (resolved: string): Completion[] => {
 	if (resolved.split(/\s/).find((token) => VALID_EMAIL_REGEX.test(token))) {
 		return applySections({
 			options,
-			recommended: ['extractEmail()'],
+			recommended: ['extractEmail()', ...STRING_RECOMMENDED_OPTIONS],
 			sections: STRING_SECTIONS,
 		});
 	}
@@ -475,35 +497,57 @@ const stringOptions = (resolved: string): Completion[] => {
 	});
 };
 
-const numberOptions = (resolved: number): Completion[] => {
-	const options = sortCompletionsAlpha([...natives('number'), ...extensions('number')]);
+const numberOptions = (input: AutocompleteInput<number>): Completion[] => {
+	const { resolved, tail } = input;
+	const includeHidden = tail.length > 0;
+	const options = sortCompletionsAlpha([
+		...natives('number', includeHidden),
+		...extensions('number', includeHidden),
+	]);
+	const ONLY_INTEGER = ['isEven()', 'isOdd()'];
 
-	if (!Number.isInteger(resolved)) {
-		return applySections({ options, recommended: ['round()', 'floor()', 'ceil()'] });
+	if (Number.isInteger(resolved)) {
+		return applySections({
+			options,
+			recommended: ONLY_INTEGER,
+		});
+	} else {
+		const exclude = new Set(ONLY_INTEGER);
+		return applySections({
+			options: options.filter((option) => !exclude.has(option.label)),
+			recommended: ['round()', 'floor()', 'ceil()', 'toFixed()'],
+		});
 	}
-
-	return applySections({ options });
 };
 
 const dateOptions = (): Completion[] => {
 	return applySections({
-		options: sortCompletionsAlpha([...natives('date'), ...extensions('date')]),
+		options: sortCompletionsAlpha([...natives('date'), ...extensions('date', true)]),
 	});
 };
 
-const luxonOptions = (): Completion[] => {
+const luxonOptions = (input: AutocompleteInput<DateTime>): Completion[] => {
+	const includeHidden = input.tail.length > 0;
 	return applySections({
 		options: sortCompletionsAlpha(
-			uniqBy([...extensions('date'), ...luxonInstanceOptions()], (option) => option.label),
+			uniqBy(
+				[...extensions('date', includeHidden), ...luxonInstanceOptions(includeHidden)],
+				(option) => option.label,
+			),
 		),
 		recommended: LUXON_RECOMMENDED_OPTIONS,
 		sections: LUXON_SECTIONS,
 	});
 };
 
-const arrayOptions = (resolved: unknown[]): Completion[] => {
+const arrayOptions = (input: AutocompleteInput<unknown[]>): Completion[] => {
+	const { resolved, tail } = input;
+	const includeHidden = tail.length > 0;
 	const options = applySections({
-		options: sortCompletionsAlpha([...natives('array'), ...extensions('array')]),
+		options: sortCompletionsAlpha([
+			...natives('array', includeHidden),
+			...extensions('array', includeHidden),
+		]),
 		recommended: ARRAY_RECOMMENDED_OPTIONS,
 	});
 
@@ -591,7 +635,7 @@ export const secretProvidersOptions = () => {
 /**
  * Methods and fields defined on a Luxon `DateTime` class instance.
  */
-export const luxonInstanceOptions = () => {
+export const luxonInstanceOptions = (includeHidden = false) => {
 	const SKIP = new Set(['constructor', 'get', 'invalidExplanation', 'invalidReason']);
 
 	return Object.entries(Object.getOwnPropertyDescriptors(DateTime.prototype))
@@ -600,8 +644,15 @@ export const luxonInstanceOptions = () => {
 		.map(([key, descriptor]) => {
 			const isFunction = typeof descriptor.value === 'function';
 			const optionType = isFunction ? 'native-function' : 'keyword';
-			return createLuxonAutocompleteOption(key, optionType, luxonInstanceDocs, i18n.luxonInstance);
-		});
+			return createLuxonAutocompleteOption(
+				key,
+				optionType,
+				luxonInstanceDocs,
+				i18n.luxonInstance,
+				includeHidden,
+			) as Completion;
+		})
+		.filter(Boolean);
 };
 
 /**
@@ -619,8 +670,9 @@ export const luxonStaticOptions = () => {
 					'native-function',
 					luxonStaticDocs,
 					i18n.luxonStatic,
-				);
-			}),
+				) as Completion;
+			})
+			.filter(Boolean),
 	);
 };
 
@@ -629,7 +681,8 @@ const createLuxonAutocompleteOption = (
 	type: AutocompleteOptionType,
 	docDefinition: NativeDoc,
 	translations: Record<string, string | undefined>,
-): Completion => {
+	includeHidden = false,
+): Completion | null => {
 	const isFunction = isFunctionOption(type);
 	const label = isFunction ? name + '()' : name;
 
@@ -650,6 +703,10 @@ const createLuxonAutocompleteOption = (
 		};
 	}
 
+	if (doc?.hidden && !includeHidden) {
+		return null;
+	}
+
 	const option: Completion = {
 		label,
 		type,
@@ -682,20 +739,20 @@ export const objectGlobalOptions = () => {
 };
 
 const regexes = {
-	generalRef: /\$[^$'"]+\.([^{\s])*/, // $input. or $json. or similar ones
-	selectorRef: /\$\(['"][\S\s]+['"]\)\.([^{\s])*/, // $('nodeName').
+	generalRef: /\$[^$'"]+\.(.*)/, // $input. or $json. or similar ones
+	selectorRef: /\$\(['"][\S\s]+['"]\)\.(.*)/, // $('nodeName').
 
-	numberLiteral: /\((\d+)\.?(\d*)\)\.([^{\s])*/, // (123). or (123.4).
+	numberLiteral: /\((\d+)\.?(\d*)\)\.(.*)/, // (123). or (123.4).
 	singleQuoteStringLiteral: /('.+')\.([^'{\s])*/, // 'abc'.
 	doubleQuoteStringLiteral: /(".+")\.([^"{\s])*/, // "abc".
-	dateLiteral: /\(?new Date\(\(?.*?\)\)?\.([^{\s])*/, // new Date(). or (new Date()).
-	arrayLiteral: /(\[.+\])\.([^{\s])*/, // [1, 2, 3].
-	indexedAccess: /([^{\s]+\[.+\])\.([^{\s])*/, // 'abc'[0]. or 'abc'.split('')[0] or similar ones
-	objectLiteral: /\(\{.*\}\)\.([^{\s])*/, // ({}).
-
-	mathGlobal: /Math\.([^{\s])*/, // Math.
-	datetimeGlobal: /DateTime\.(\w+\(.*\)\.[^{\s]*)?/, // DateTime.
-	objectGlobal: /Object\.(\w+\(.*\)\.[^{\s]*)?/, // Object. or Object.method(arg).
+	dateLiteral: /\(?new Date\(\(?.*?\)\)?\.(.*)/, // new Date(). or (new Date()).
+	arrayLiteral: /(\[.*\])\.(.*)/, // [1, 2, 3].
+	indexedAccess: /([^"{\s]+\[.+\])\.(.*)/, // 'abc'[0]. or 'abc'.split('')[0] or similar ones
+	objectLiteral: /\(\{.*\}\)\.(.*)/, // ({}).
+
+	mathGlobal: /Math\.(.*)/, // Math.
+	datetimeGlobal: /DateTime\.(.*)/, // DateTime.
+	objectGlobal: /Object\.(.*)/, // Object. or Object.method(arg).
 };
 
 const DATATYPE_REGEX = new RegExp(
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/nativesAutocompleteDocs/luxon.instance.docs.ts b/packages/editor-ui/src/plugins/codemirror/completions/nativesAutocompleteDocs/luxon.instance.docs.ts
index d2960fd3edc05..021ebabb70c97 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/nativesAutocompleteDocs/luxon.instance.docs.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/nativesAutocompleteDocs/luxon.instance.docs.ts
@@ -17,6 +17,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'daysInMonth',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimedaysinmonth',
 				returnType: 'number',
 			},
@@ -24,6 +25,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		daysInYear: {
 			doc: {
 				name: 'daysInYear',
+				hidden: true,
 				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimedaysinyear',
 				returnType: 'number',
@@ -89,6 +91,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'numberingSystem',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimenumberingsystem',
 				returnType: 'string',
 			},
@@ -97,6 +100,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'offset',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeoffset',
 				returnType: 'number',
 			},
@@ -105,6 +109,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'offsetNameLong',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeoffsetnamelong',
 				returnType: 'string',
 			},
@@ -113,6 +118,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'offsetNameShort',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeoffsetnameshort',
 				returnType: 'string',
 			},
@@ -121,6 +127,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'ordinal',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeordinal',
 				returnType: 'string',
 			},
@@ -129,6 +136,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'outputCalendar',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeoutputcalendar',
 				returnType: 'string',
 			},
@@ -185,6 +193,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'weeksInWeekYear',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeweeksinweekyear',
 				returnType: 'number',
 			},
@@ -241,6 +250,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'isOffsetFixed',
 				section: 'query',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeisoffsetfixed',
 				returnType: 'boolean',
 			},
@@ -248,6 +258,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 		isValid: {
 			doc: {
 				name: 'isValid',
+				hidden: true,
 				section: 'query',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeisvalid',
 				returnType: 'boolean',
@@ -332,6 +343,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'reconfigure',
 				section: 'other',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimereconfigure',
 				returnType: 'DateTime',
 				args: [{ name: 'properties', type: 'object' }],
@@ -341,6 +353,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'resolvedLocaleOptions',
 				section: 'other',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimeresolvedlocaleoptions',
 				returnType: 'object',
 				args: [{ name: 'opts', type: 'object' }],
@@ -389,6 +402,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toBSON',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetobson',
 				returnType: 'Date',
 			},
@@ -397,6 +411,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toFormat',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetime',
 				returnType: 'string',
 				args: [
@@ -409,6 +424,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toHTTP',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetohttp',
 				returnType: 'string',
 			},
@@ -426,6 +442,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toISODate',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoisodate',
 				returnType: 'string',
 				args: [{ name: 'opts', type: 'object' }],
@@ -435,6 +452,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toISOTime',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoisotime',
 				returnType: 'string',
 				args: [{ name: 'opts', type: 'object' }],
@@ -444,6 +462,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toISOWeekDate',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoisoweekdate',
 				returnType: 'string',
 			},
@@ -452,6 +471,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toJSDate',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetojsdate',
 				returnType: 'Date',
 			},
@@ -460,6 +480,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toJSON',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetojson',
 				returnType: 'string',
 			},
@@ -476,6 +497,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toLocaleParts',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetolocaleparts',
 				returnType: 'string',
 				args: [
@@ -508,6 +530,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toObject',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetoobject',
 				returnType: 'object',
 				args: [{ name: 'opts', type: 'any' }],
@@ -526,6 +549,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toRelativeCalendar',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetorelativecalendar',
 				returnType: 'string',
 				args: [{ name: 'options', type: 'object' }],
@@ -535,6 +559,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toRFC2822',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetorfc2822',
 				returnType: 'string',
 			},
@@ -553,6 +578,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 				section: 'format',
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetosql',
 				returnType: 'string',
+				hidden: true,
 				args: [{ name: 'options', type: 'object' }],
 			},
 		},
@@ -560,6 +586,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toSQLDate',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetosqldate',
 				returnType: 'string',
 			},
@@ -568,6 +595,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toSQLTime',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetosqltime',
 				returnType: 'string',
 			},
@@ -584,6 +612,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'toUnixInteger',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimetounixinteger',
 				returnType: 'number',
 			},
@@ -613,6 +642,7 @@ export const luxonInstanceDocs: Required<NativeDoc> = {
 			doc: {
 				name: 'valueOf',
 				section: 'format',
+				hidden: true,
 				docURL: 'https://moment.github.io/luxon/api-docs/index.html#datetimevalueof',
 				returnType: 'number',
 			},
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/types.ts b/packages/editor-ui/src/plugins/codemirror/completions/types.ts
index 2a3749a1b17ff..e8ace1567814d 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/types.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/types.ts
@@ -1,7 +1,6 @@
-import type { resolveParameter } from '@/composables/useWorkflowHelpers';
 import type { DocMetadata } from 'n8n-workflow';
 
-export type Resolved = ReturnType<typeof resolveParameter>;
+export type Resolved = unknown;
 
 export type ExtensionTypeName = 'number' | 'string' | 'date' | 'array' | 'object';
 
@@ -10,3 +9,8 @@ export type FnToDoc = { [fnName: string]: { doc?: DocMetadata } };
 export type FunctionOptionType = 'native-function' | 'extension-function';
 export type KeywordOptionType = 'keyword';
 export type AutocompleteOptionType = FunctionOptionType | KeywordOptionType;
+export type AutocompleteInput<R = Resolved> = {
+	resolved: R;
+	base: string;
+	tail: string;
+};
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
index 76e8c36dce65a..e9102ab67e0ae 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
@@ -129,7 +129,7 @@ export function autocompletableNodeNames() {
 
 	if (!activeNodeName) return [];
 
-	return useWorkflowHelpers(useRouter())
+	return useWorkflowHelpers({ router: useRouter() })
 		.getCurrentWorkflow()
 		.getParentNodesByDepth(activeNodeName)
 		.map((node) => node.name)
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 9100f45de5855..68d6fccad2f59 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -320,6 +320,7 @@
 	"codeNodeEditor.completer.section.prevNodes": "Earlier nodes",
 	"codeNodeEditor.completer.section.metadata": "Metadata",
 	"codeNodeEditor.completer.section.fields": "Fields",
+	"codeNodeEditor.completer.section.properties": "Properties",
 	"codeNodeEditor.completer.section.methods": "Methods",
 	"codeNodeEditor.completer.section.otherMethods": "Other methods",
 	"codeNodeEditor.completer.section.recommended": "Suggested",
diff --git a/packages/editor-ui/src/utils/expressions.ts b/packages/editor-ui/src/utils/expressions.ts
index ac3dfccf50ff5..3ab57df1318dc 100644
--- a/packages/editor-ui/src/utils/expressions.ts
+++ b/packages/editor-ui/src/utils/expressions.ts
@@ -51,13 +51,14 @@ export const isAnyPairedItemError = (error: unknown): error is ExpressionError =
 	return error instanceof ExpressionError && error.context.functionality === 'pairedItem';
 };
 
-export const getResolvableState = (error: unknown): ResolvableState => {
+export const getResolvableState = (error: unknown, hasFocus = false): ResolvableState => {
 	if (!error) return 'valid';
 
 	if (
 		isNoExecDataExpressionError(error) ||
 		isNoNodeExecDataExpressionError(error) ||
-		isPairedItemIntermediateNodesError(error)
+		isPairedItemIntermediateNodesError(error) ||
+		hasFocus
 	) {
 		return 'pending';
 	}
diff --git a/packages/workflow/src/Extensions/DateExtensions.ts b/packages/workflow/src/Extensions/DateExtensions.ts
index a110e0a51b78a..9def636155f0a 100644
--- a/packages/workflow/src/Extensions/DateExtensions.ts
+++ b/packages/workflow/src/Extensions/DateExtensions.ts
@@ -219,6 +219,7 @@ function plus(
 endOfMonth.doc = {
 	name: 'endOfMonth',
 	returnType: 'Date',
+	hidden: true,
 	description: 'Transforms a date to the last possible moment that lies within the month.',
 	section: 'edit',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-endOfMonth',
@@ -227,6 +228,7 @@ endOfMonth.doc = {
 isDst.doc = {
 	name: 'isDst',
 	returnType: 'boolean',
+	hidden: true,
 	description: 'Checks if a Date is within Daylight Savings Time.',
 	section: 'query',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-isDst',
@@ -235,6 +237,7 @@ isDst.doc = {
 isWeekend.doc = {
 	name: 'isWeekend',
 	returnType: 'boolean',
+	hidden: true,
 	description: 'Checks if the Date falls on a Saturday or Sunday.',
 	section: 'query',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-isWeekend',
@@ -244,6 +247,7 @@ beginningOf.doc = {
 	name: 'beginningOf',
 	description: 'Transform a Date to the start of the given time period. Default unit is `week`.',
 	section: 'edit',
+	hidden: true,
 	returnType: 'Date',
 	args: [{ name: 'unit?', type: 'DurationUnit' }],
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/dates/#date-beginningOf',
diff --git a/packages/workflow/src/Extensions/Extensions.ts b/packages/workflow/src/Extensions/Extensions.ts
index f4f6035282f5b..2fef4620ff5ac 100644
--- a/packages/workflow/src/Extensions/Extensions.ts
+++ b/packages/workflow/src/Extensions/Extensions.ts
@@ -1,9 +1,11 @@
 export interface ExtensionMap {
 	typeName: string;
-	// eslint-disable-next-line @typescript-eslint/ban-types
-	functions: Record<string, Function & { doc?: DocMetadata }>;
+	functions: Record<string, Extension>;
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type Extension = Function & { doc?: DocMetadata };
+
 export type NativeDoc = {
 	typeName: string;
 	properties?: Record<string, { doc?: DocMetadata }>;
@@ -15,6 +17,7 @@ export type DocMetadata = {
 	returnType: string;
 	description?: string;
 	section?: string;
+	hidden?: boolean;
 	aliases?: string[];
 	args?: Array<{ name: string; type?: string }>;
 	docURL?: string;
diff --git a/packages/workflow/src/Extensions/StringExtensions.ts b/packages/workflow/src/Extensions/StringExtensions.ts
index 7d8a38d34e240..97e9ade5537d4 100644
--- a/packages/workflow/src/Extensions/StringExtensions.ts
+++ b/packages/workflow/src/Extensions/StringExtensions.ts
@@ -2,7 +2,7 @@ import SHA from 'jssha';
 import MD5 from 'md5';
 import { encode } from 'js-base64';
 import { titleCase } from 'title-case';
-import type { ExtensionMap } from './Extensions';
+import type { Extension, ExtensionMap } from './Extensions';
 import { transliterate } from 'transliteration';
 import { ExpressionExtensionError } from '../errors/expression-extension.error';
 
@@ -465,6 +465,7 @@ replaceSpecialChars.doc = {
 length.doc = {
 	name: 'length',
 	section: 'query',
+	hidden: true,
 	description: 'Returns the character count of a string.',
 	returnType: 'number',
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings',
@@ -566,6 +567,11 @@ quote.doc = {
 	docURL: 'https://docs.n8n.io/code/builtin/data-transformation-functions/strings/#string-quote',
 };
 
+const toDecimalNumber: Extension = toFloat.bind({});
+toDecimalNumber.doc = { ...toFloat.doc, hidden: true };
+const toWholeNumber: Extension = toInt.bind({});
+toWholeNumber.doc = { ...toInt.doc, hidden: true };
+
 export const stringExtensions: ExtensionMap = {
 	typeName: 'String',
 	functions: {
@@ -573,10 +579,10 @@ export const stringExtensions: ExtensionMap = {
 		removeMarkdown,
 		removeTags,
 		toDate,
-		toDecimalNumber: toFloat,
+		toDecimalNumber,
 		toFloat,
 		toInt,
-		toWholeNumber: toInt,
+		toWholeNumber,
 		toSentenceCase,
 		toSnakeCase,
 		toTitleCase,

From 2193c50115f507878daf52b9ac0deb4c560afdfb Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 28 Feb 2024 11:38:59 +0100
Subject: [PATCH 18/25] Fix review feedback

---
 .../ExpressionEditorModalInput.vue            |  6 ++-
 .../src/components/HtmlEditor/HtmlEditor.vue  |  7 ++-
 .../InlineExpressionEditorInput.vue           |  9 +++-
 .../editor-ui/src/mixins/expressionManager.ts | 14 +++--
 .../completions/__tests__/completions.test.ts | 43 +++++----------
 .../codemirror/completions/constants.ts       |  3 +-
 .../completions/datatype.completions.ts       | 52 +++++++------------
 .../src/plugins/i18n/locales/en.json          |  2 +-
 packages/editor-ui/src/utils/expressions.ts   |  4 +-
 9 files changed, 63 insertions(+), 77 deletions(-)

diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index 1bc9db1bfced1..74eaa2a39ff1b 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -78,7 +78,11 @@ export default defineComponent({
 			EditorView.contentAttributes.of({ 'data-gramm': 'false' }), // disable grammarly
 			EditorView.domEventHandlers({ scroll: forceParse }),
 			EditorView.updateListener.of((viewUpdate) => {
-				if (!this.editor || !viewUpdate.docChanged) return;
+				if (!this.editor) return;
+
+				this.completionStatus = completionStatus(viewUpdate.view.state);
+
+				if (!viewUpdate.docChanged) return;
 
 				this.editorState = this.editor.state;
 
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index d1a53c9114c17..59f66dabd09ac 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -49,6 +49,7 @@ import {
 	tabKeyMap,
 } from '@/plugins/codemirror/keymap';
 import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
+import { completionStatus } from '@codemirror/autocomplete';
 
 export default defineComponent({
 	name: 'HtmlEditor',
@@ -135,7 +136,11 @@ export default defineComponent({
 				EditorView.editable.of(!this.isReadOnly),
 				EditorState.readOnly.of(this.isReadOnly),
 				EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
-					if (!this.editor || !viewUpdate.docChanged) return;
+					if (!this.editor) return;
+
+					this.completionStatus = completionStatus(viewUpdate.view.state);
+
+					if (!viewUpdate.docChanged) return;
 
 					// Force segments value update by keeping track of editor state
 					this.editorState = this.editor.state;
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index d4af5404f312f..70ad317ff9b9c 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -22,7 +22,8 @@ import {
 	enterKeyMap,
 	historyKeyMap,
 	tabKeyMap,
-} from '../../plugins/codemirror/keymap';
+} from '@/plugins/codemirror/keymap';
+import { completionStatus } from '@codemirror/autocomplete';
 
 const editableConf = new Compartment();
 
@@ -103,7 +104,11 @@ export default defineComponent({
 				},
 			}),
 			EditorView.updateListener.of((viewUpdate) => {
-				if (!this.editor || !viewUpdate.docChanged) return;
+				if (!this.editor) return;
+
+				this.completionStatus = completionStatus(viewUpdate.view.state);
+
+				if (!viewUpdate.docChanged) return;
 
 				// Force segments value update by keeping track of editor state
 				this.editorState = this.editor.state;
diff --git a/packages/editor-ui/src/mixins/expressionManager.ts b/packages/editor-ui/src/mixins/expressionManager.ts
index efe110dae13a9..125e10ee7d49c 100644
--- a/packages/editor-ui/src/mixins/expressionManager.ts
+++ b/packages/editor-ui/src/mixins/expressionManager.ts
@@ -17,6 +17,7 @@ import type { EditorView } from '@codemirror/view';
 import { isEqual } from 'lodash-es';
 import { getExpressionErrorMessage, getResolvableState } from '@/utils/expressions';
 import type { EditorState } from '@codemirror/state';
+import { completionStatus } from '@codemirror/autocomplete';
 
 export const expressionManager = defineComponent({
 	props: {
@@ -28,10 +29,16 @@ export const expressionManager = defineComponent({
 			default: () => ({}),
 		},
 	},
-	data(): { editor: EditorView; skipSegments: string[]; editorState: EditorState | undefined } {
+	data(): {
+		editor: EditorView;
+		skipSegments: string[];
+		editorState: EditorState | undefined;
+		completionStatus: 'active' | 'pending' | null;
+	} {
 		return {
 			editor: {} as EditorView,
 			skipSegments: [],
+			completionStatus: null,
 			editorState: undefined,
 		};
 	},
@@ -106,8 +113,7 @@ export const expressionManager = defineComponent({
 				const { from, to, text, token } = segment;
 
 				if (token === 'Resolvable') {
-					const { resolved, fullError } = this.resolve(text, this.hoveringItem);
-					const hasFocus = this.editor.hasFocus;
+					const { resolved, error, fullError } = this.resolve(text, this.hoveringItem);
 					acc.push({
 						kind: 'resolvable',
 						from,
@@ -117,7 +123,7 @@ export const expressionManager = defineComponent({
 						// For some reason, expressions that resolve to a number 0 are breaking preview in the SQL editor
 						// This fixes that but as as TODO we should figure out why this is happening
 						resolved: String(resolved),
-						state: getResolvableState(fullError, hasFocus),
+						state: getResolvableState(fullError ?? error, this.completionStatus !== null),
 						error: fullError,
 					});
 
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
index 070005622c9c6..c9dba434b8d71 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing';
-import { createPinia, setActivePinia } from 'pinia';
+import { setActivePinia } from 'pinia';
 import { DateTime } from 'luxon';
 
 import * as workflowHelpers from '@/composables/useWorkflowHelpers';
@@ -21,30 +21,22 @@ import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
-import { setupServer } from '@/__tests__/server';
 import {
 	ARRAY_NUMBER_ONLY_METHODS,
-	ARRAY_RECOMMENDED_OPTIONS,
 	LUXON_RECOMMENDED_OPTIONS,
 	METADATA_SECTION,
 	METHODS_SECTION,
 	RECOMMENDED_SECTION,
 	STRING_RECOMMENDED_OPTIONS,
 } from '../constants';
-import { uniqBy } from 'lodash-es';
+import { set, uniqBy } from 'lodash-es';
 
 let externalSecretsStore: ReturnType<typeof useExternalSecretsStore>;
 let uiStore: ReturnType<typeof useUIStore>;
 let settingsStore: ReturnType<typeof useSettingsStore>;
 
-let server: ReturnType<typeof setupServer>;
-
-beforeAll(() => {
-	server = setupServer();
-});
-
 beforeEach(async () => {
-	setActivePinia(createPinia());
+	setActivePinia(createTestingPinia());
 
 	externalSecretsStore = useExternalSecretsStore();
 	uiStore = useUIStore();
@@ -53,12 +45,6 @@ beforeEach(async () => {
 	vi.spyOn(utils, 'receivesNoBinaryData').mockReturnValue(true); // hide $binary
 	vi.spyOn(utils, 'isSplitInBatchesAbsent').mockReturnValue(false); // show context
 	vi.spyOn(utils, 'hasActiveNode').mockReturnValue(true);
-
-	await settingsStore.getSettings();
-});
-
-afterAll(() => {
-	server.shutdown();
 });
 
 describe('No completions', () => {
@@ -188,7 +174,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce([1, 2, 3]);
 
 			expect(completions('{{ [1, 2, 3].| }}')).toHaveLength(
-				natives('array').length + extensions('array').length + ARRAY_RECOMMENDED_OPTIONS.length,
+				natives('array').length + extensions('array').length,
 			);
 		});
 
@@ -200,9 +186,7 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completion');
 
-			expect(found).toHaveLength(
-				natives('array').length + extensions('array').length + ARRAY_RECOMMENDED_OPTIONS.length,
-			);
+			expect(found).toHaveLength(natives('array').length + extensions('array').length);
 		});
 
 		test('should return completions for object literal', () => {
@@ -321,9 +305,7 @@ describe('Resolution-based completions', () => {
 
 			if (!found) throw new Error('Expected to find completions');
 
-			expect(found).toHaveLength(
-				extensions('array').length + natives('array').length + ARRAY_RECOMMENDED_OPTIONS.length,
-			);
+			expect(found).toHaveLength(extensions('array').length + natives('array').length);
 			expect(found.map((c) => c.label).every((l) => !l.endsWith('()')));
 		});
 	});
@@ -331,6 +313,8 @@ describe('Resolution-based completions', () => {
 	describe('secrets', () => {
 		const { $input } = mockProxy;
 
+		beforeEach(() => {});
+
 		test('should return completions for: {{ $secrets.| }}', () => {
 			const provider = 'infisical';
 			const secrets = ['SECRET'];
@@ -338,7 +322,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input);
 
 			uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].open = true;
-			settingsStore.settings.enterprise[EnterpriseEditionFeature.ExternalSecrets] = true;
+			set(settingsStore.settings, ['enterprise', EnterpriseEditionFeature.ExternalSecrets], true);
 			externalSecretsStore.state.secrets = {
 				[provider]: secrets,
 			};
@@ -362,7 +346,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input);
 
 			uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].open = true;
-			settingsStore.settings.enterprise[EnterpriseEditionFeature.ExternalSecrets] = true;
+			set(settingsStore.settings, ['enterprise', EnterpriseEditionFeature.ExternalSecrets], true);
 			externalSecretsStore.state.secrets = {
 				[provider]: secrets,
 			};
@@ -455,10 +439,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue([$input.item]);
 
 			expect(completions('{{ $input.all().| }}')).toHaveLength(
-				extensions('array').length +
-					natives('array').length +
-					ARRAY_RECOMMENDED_OPTIONS.length -
-					ARRAY_NUMBER_ONLY_METHODS.length,
+				extensions('array').length + natives('array').length - ARRAY_NUMBER_ONLY_METHODS.length,
 			);
 		});
 
@@ -514,7 +495,7 @@ describe('Resolution-based completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input.item.json.arr);
 
 			expect(completions('{{ $input.item.json.arr.| }}')).toHaveLength(
-				extensions('array').length + natives('array').length + ARRAY_RECOMMENDED_OPTIONS.length,
+				extensions('array').length + natives('array').length,
 			);
 		});
 
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
index 6e41ea8fe648b..8dd8f8096c0a8 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
@@ -164,7 +164,8 @@ export const STRING_EDIT_OPTIONS = [
 	'extractUrl()',
 ];
 
-export const LUXON_RECOMMENDED_OPTIONS = ['format()', 'minus()', 'plus()', 'diff()'];
+export const DATE_RECOMMENDED_OPTIONS = ['format()', 'minus()', 'plus()', 'extract()'];
+export const LUXON_RECOMMENDED_OPTIONS = ['format()', 'minus()', 'plus()', 'diff()', 'extract()'];
 export const ARRAY_RECOMMENDED_OPTIONS = ['length', 'last()', 'includes()', 'map()', 'filter()'];
 export const ARRAY_NUMBER_ONLY_METHODS = ['max()', 'min()', 'sum()', 'average()'];
 export const OBJECT_RECOMMENDED_OPTIONS = ['keys()', 'values()', 'isEmpty()'];
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index 56c8726b4f6ed..fedd178a71b7d 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -39,6 +39,7 @@ import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import {
 	ARRAY_NUMBER_ONLY_METHODS,
 	ARRAY_RECOMMENDED_OPTIONS,
+	DATE_RECOMMENDED_OPTIONS,
 	FIELDS_SECTION,
 	LUXON_RECOMMENDED_OPTIONS,
 	LUXON_SECTIONS,
@@ -132,7 +133,7 @@ function datatypeOptions(input: AutocompleteInput): Completion[] {
 	}
 
 	if (resolved instanceof DateTime) {
-		return luxonOptions(input as AutocompleteInput<DateTime>);
+		return luxonOptions();
 	}
 
 	if (resolved instanceof Date) {
@@ -150,13 +151,13 @@ function datatypeOptions(input: AutocompleteInput): Completion[] {
 	return [];
 }
 
-export const natives = (typeName: ExtensionTypeName, includeHidden = false): Completion[] => {
+export const natives = (typeName: ExtensionTypeName): Completion[] => {
 	const natives: NativeDoc = NativeMethods.find((ee) => ee.typeName.toLowerCase() === typeName);
 
 	if (!natives) return [];
 
 	const nativeProps = natives.properties ? toOptions(natives.properties, typeName, 'keyword') : [];
-	const nativeMethods = toOptions(natives.functions, typeName, 'native-function', includeHidden);
+	const nativeMethods = toOptions(natives.functions, typeName, 'native-function');
 
 	return [...nativeProps, ...nativeMethods];
 };
@@ -302,8 +303,7 @@ const createPropHeader = (typeName: string, property: { doc?: DocMetadata | unde
 };
 
 const objectOptions = (input: AutocompleteInput<IDataObject>): Completion[] => {
-	const { base, tail, resolved } = input;
-	const includeHidden = tail.length > 0;
+	const { base, resolved } = input;
 	const rank = setRank(['item', 'all', 'first', 'last']);
 	const SKIP = new Set(['__ob__', 'pairedItem']);
 
@@ -361,15 +361,11 @@ const objectOptions = (input: AutocompleteInput<IDataObject>): Completion[] => {
 		base === 'Math';
 
 	if (skipObjectExtensions) {
-		return sortCompletionsAlpha([...localKeys, ...natives('object', includeHidden)]);
+		return sortCompletionsAlpha([...localKeys, ...natives('object')]);
 	}
 
 	return applySections({
-		options: sortCompletionsAlpha([
-			...localKeys,
-			...natives('object', includeHidden),
-			...extensions('object', includeHidden),
-		]),
+		options: sortCompletionsAlpha([...localKeys, ...natives('object'), ...extensions('object')]),
 		recommended: OBJECT_RECOMMENDED_OPTIONS,
 		recommendedSection: RECOMMENDED_METHODS_SECTION,
 		methodsSection: OTHER_METHODS_SECTION,
@@ -452,11 +448,7 @@ const isUrl = (url: string): boolean => {
 
 const stringOptions = (input: AutocompleteInput<string>): Completion[] => {
 	const { resolved, tail } = input;
-	const includeHidden = tail.length > 0;
-	const options = sortCompletionsAlpha([
-		...natives('string', includeHidden),
-		...extensions('string', includeHidden),
-	]);
+	const options = sortCompletionsAlpha([...natives('string'), ...extensions('string')]);
 
 	if (validateFieldType('string', resolved, 'number').valid) {
 		return applySections({
@@ -498,12 +490,8 @@ const stringOptions = (input: AutocompleteInput<string>): Completion[] => {
 };
 
 const numberOptions = (input: AutocompleteInput<number>): Completion[] => {
-	const { resolved, tail } = input;
-	const includeHidden = tail.length > 0;
-	const options = sortCompletionsAlpha([
-		...natives('number', includeHidden),
-		...extensions('number', includeHidden),
-	]);
+	const { resolved } = input;
+	const options = sortCompletionsAlpha([...natives('number'), ...extensions('number')]);
 	const ONLY_INTEGER = ['isEven()', 'isOdd()'];
 
 	if (Number.isInteger(resolved)) {
@@ -523,17 +511,14 @@ const numberOptions = (input: AutocompleteInput<number>): Completion[] => {
 const dateOptions = (): Completion[] => {
 	return applySections({
 		options: sortCompletionsAlpha([...natives('date'), ...extensions('date', true)]),
+		recommended: DATE_RECOMMENDED_OPTIONS,
 	});
 };
 
-const luxonOptions = (input: AutocompleteInput<DateTime>): Completion[] => {
-	const includeHidden = input.tail.length > 0;
+const luxonOptions = (): Completion[] => {
 	return applySections({
 		options: sortCompletionsAlpha(
-			uniqBy(
-				[...extensions('date', includeHidden), ...luxonInstanceOptions(includeHidden)],
-				(option) => option.label,
-			),
+			uniqBy([...extensions('date'), ...luxonInstanceOptions()], (option) => option.label),
 		),
 		recommended: LUXON_RECOMMENDED_OPTIONS,
 		sections: LUXON_SECTIONS,
@@ -541,14 +526,13 @@ const luxonOptions = (input: AutocompleteInput<DateTime>): Completion[] => {
 };
 
 const arrayOptions = (input: AutocompleteInput<unknown[]>): Completion[] => {
-	const { resolved, tail } = input;
-	const includeHidden = tail.length > 0;
+	const { resolved } = input;
 	const options = applySections({
-		options: sortCompletionsAlpha([
-			...natives('array', includeHidden),
-			...extensions('array', includeHidden),
-		]),
+		options: sortCompletionsAlpha([...natives('array'), ...extensions('array')]),
 		recommended: ARRAY_RECOMMENDED_OPTIONS,
+		methodsSection: OTHER_SECTION,
+		propSection: OTHER_SECTION,
+		excludeRecommended: true,
 	});
 
 	if (resolved.length > 0 && resolved.some((i) => typeof i !== 'number')) {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 68d6fccad2f59..44261364ac922 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -333,7 +333,7 @@
 	"codeNodeEditor.completer.section.case": "Case",
 	"codeNodeEditor.completer.section.cast": "Cast",
 	"codeNodeEditor.completer.section.compare": "Compare",
-	"codeNodeEditor.completer.section.validation": "Validation",
+	"codeNodeEditor.completer.section.validation": "Validate",
 	"codeNodeEditor.linter.allItems.firstOrLastCalledWithArg": "expects no argument.",
 	"codeNodeEditor.linter.allItems.emptyReturn": "Code doesn't return items properly. Please return an array of objects, one for each item you would like to output.",
 	"codeNodeEditor.linter.allItems.itemCall": "`item` is a property to access, not a method to call. Did you mean `.item` without brackets?",
diff --git a/packages/editor-ui/src/utils/expressions.ts b/packages/editor-ui/src/utils/expressions.ts
index 3ab57df1318dc..569abd721fc73 100644
--- a/packages/editor-ui/src/utils/expressions.ts
+++ b/packages/editor-ui/src/utils/expressions.ts
@@ -51,14 +51,14 @@ export const isAnyPairedItemError = (error: unknown): error is ExpressionError =
 	return error instanceof ExpressionError && error.context.functionality === 'pairedItem';
 };
 
-export const getResolvableState = (error: unknown, hasFocus = false): ResolvableState => {
+export const getResolvableState = (error: unknown, ignoreError = false): ResolvableState => {
 	if (!error) return 'valid';
 
 	if (
 		isNoExecDataExpressionError(error) ||
 		isNoNodeExecDataExpressionError(error) ||
 		isPairedItemIntermediateNodesError(error) ||
-		hasFocus
+		ignoreError
 	) {
 		return 'pending';
 	}

From 6e997d402077d4dd477810064b47ca333e9be6c4 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 28 Feb 2024 12:25:06 +0100
Subject: [PATCH 19/25] Remove unused import

---
 packages/editor-ui/src/mixins/expressionManager.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/mixins/expressionManager.ts b/packages/editor-ui/src/mixins/expressionManager.ts
index 125e10ee7d49c..883f100ce80a0 100644
--- a/packages/editor-ui/src/mixins/expressionManager.ts
+++ b/packages/editor-ui/src/mixins/expressionManager.ts
@@ -17,7 +17,6 @@ import type { EditorView } from '@codemirror/view';
 import { isEqual } from 'lodash-es';
 import { getExpressionErrorMessage, getResolvableState } from '@/utils/expressions';
 import type { EditorState } from '@codemirror/state';
-import { completionStatus } from '@codemirror/autocomplete';
 
 export const expressionManager = defineComponent({
 	props: {

From 85a0c2d88908e7d6a99025a3ee8f931d8327796a Mon Sep 17 00:00:00 2001
From: Giulio Andreini <andreini@netseven.it>
Date: Mon, 4 Mar 2024 10:15:56 +0100
Subject: [PATCH 20/25] Autocomplete groups styling.

---
 .../src/styles/plugins/_codemirror.scss       | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/styles/plugins/_codemirror.scss b/packages/editor-ui/src/styles/plugins/_codemirror.scss
index b7fddc6c58cd5..bd40e5faa26de 100644
--- a/packages/editor-ui/src/styles/plugins/_codemirror.scss
+++ b/packages/editor-ui/src/styles/plugins/_codemirror.scss
@@ -43,29 +43,28 @@
 
 		li[aria-selected] {
 			background-color: var(--color-background-base);
-			color: var(--color-text-dark);
+			color: var(--color-secondary);
 		}
 
 		> .cm-section-header {
-			padding: var(--spacing-4xs) var(--spacing-4xs);
-			padding-bottom: 0;
-			border-bottom: var(--spacing-4xs) solid var(--color-background-xlight);
+			padding: var(--spacing-4xs) var(--spacing-3xs);
+			border-bottom: 1px solid var(--color-foreground-light);
 			background-color: var(--color-background-xlight);
 			position: sticky;
 			top: 0;
 		}
 
+		> .cm-section-header:not(:first-child) {
+			margin-top: var(--spacing-2xs);
+		}
+
 		.cm-section-title {
+			color: var(--color-text-dark);
 			font-family: var(--font-family);
 			font-weight: var(--font-weight-bold);
 			font-size: var(--font-size-3xs);
-			padding: var(--spacing-5xs) var(--spacing-4xs);
-
-			border-radius: var(--border-radius-base);
-			display: inline-flex;
 			text-transform: uppercase;
-			background-color: var(--color-success-tint-1);
-			color: var(--color-success);
+			padding: var(--spacing-5xs) var(--spacing-4xs);
 		}
 	}
 }
@@ -84,14 +83,15 @@
 	line-height: var(--font-line-height-loose);
 
 	.autocomplete-info-header {
-		color: var(--color-text-dark);
+		color: var(--color-text-base);
+		font-size: var(--font-size-2xs);
+		font-family: var(--font-family-monospace);
 		line-height: var(--font-line-height-compact);
 		margin-bottom: var(--spacing-2xs);
 	}
 
 	.autocomplete-info-name {
-		color: var(--color-success);
-		font-weight: var(--font-weight-bold);
+		color: var(--color-secondary);
 	}
 
 	.autocomplete-info-description {

From 4c850fa6e6687d8d77ff67b54be984f2a19d7b08 Mon Sep 17 00:00:00 2001
From: Giulio Andreini <andreini@netseven.it>
Date: Mon, 4 Mar 2024 14:56:12 +0100
Subject: [PATCH 21/25] Improved autocomplete sections style for dark mode.

---
 packages/design-system/src/css/_tokens.dark.scss       | 4 +++-
 packages/design-system/src/css/_tokens.scss            | 8 +++++---
 packages/editor-ui/src/styles/plugins/_codemirror.scss | 6 +++---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index 918fc8a18dffa..53104dd036479 100644
--- a/packages/design-system/src/css/_tokens.dark.scss
+++ b/packages/design-system/src/css/_tokens.dark.scss
@@ -69,7 +69,7 @@
 	--color-sticky-background-7: var(--prim-gray-740);
 	--color-sticky-border-7: var(--prim-gray-670);
 
-	// Expressions
+	// Expressions and autocomplete
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
 	--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);
 	--color-invalid-resolvable-foreground: var(--prim-color-alt-c-tint-250);
@@ -78,6 +78,8 @@
 	--color-pending-resolvable-background: var(--prim-gray-70-alpha-01);
 	--color-expression-editor-background: var(--prim-gray-800);
 	--color-expression-syntax-example: var(--prim-gray-670);
+	--color-autocomplete-item-selected: var(--prim-color-secondary-tint-200);
+	--color-autocomplete-section-header-border: var(--prim-gray-540);
 
 	// Code
 	--color-code-tags-string: var(--prim-color-alt-f-tint-150);
diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
index 10b1820430864..f1f532da3d1e8 100644
--- a/packages/design-system/src/css/_tokens.scss
+++ b/packages/design-system/src/css/_tokens.scss
@@ -102,7 +102,7 @@
 	--color-sticky-background-7: var(--prim-gray-10);
 	--color-sticky-border-7: var(--prim-gray-120);
 
-	// Expressions
+	// Expressions and autocomplete
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a);
 	--color-valid-resolvable-background: var(--prim-color-alt-a-tint-500);
 	--color-invalid-resolvable-foreground: var(--prim-color-alt-c);
@@ -111,6 +111,10 @@
 	--color-pending-resolvable-background: var(--prim-gray-40);
 	--color-expression-editor-background: var(--prim-gray-0);
 	--color-expression-syntax-example: var(--prim-gray-40);
+	--color-autocomplete-item-selected: var(--color-secondary);
+	--color-autocomplete-section-header-border: var(--color-foreground-light);
+	--color-autocomplete-selected-background: var(--prim-color-alt-e-tint-100);
+	--color-autocomplete-selected-font: var(--prim-gray-0);
 
 	// Code
 	--color-code-tags-string: var(--prim-color-alt-f);
@@ -138,8 +142,6 @@
 	--color-code-gutterBackground: var(--prim-gray-0);
 	--color-code-gutterForeground: var(--prim-gray-320);
 	--color-code-tags-comment: var(--prim-gray-420);
-	--color-autocomplete-selected-background: var(--prim-color-alt-e-tint-100);
-	--color-autocomplete-selected-font: var(--prim-gray-0);
 
 	// Variables
 	--color-variables-usage-font: var(--color-success);
diff --git a/packages/editor-ui/src/styles/plugins/_codemirror.scss b/packages/editor-ui/src/styles/plugins/_codemirror.scss
index bd40e5faa26de..08998296ad6d7 100644
--- a/packages/editor-ui/src/styles/plugins/_codemirror.scss
+++ b/packages/editor-ui/src/styles/plugins/_codemirror.scss
@@ -43,12 +43,12 @@
 
 		li[aria-selected] {
 			background-color: var(--color-background-base);
-			color: var(--color-secondary);
+			color: var(--color-autocomplete-item-selected);
 		}
 
 		> .cm-section-header {
 			padding: var(--spacing-4xs) var(--spacing-3xs);
-			border-bottom: 1px solid var(--color-foreground-light);
+			border-bottom: 1px solid var(--color-autocomplete-section-header-border);
 			background-color: var(--color-background-xlight);
 			position: sticky;
 			top: 0;
@@ -91,7 +91,7 @@
 	}
 
 	.autocomplete-info-name {
-		color: var(--color-secondary);
+		color: var(--color-autocomplete-item-selected);
 	}
 
 	.autocomplete-info-description {

From 54c2cbdadb3b125f5f5bddfb569edef9a796327e Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 5 Mar 2024 12:33:34 +0100
Subject: [PATCH 22/25] Remove unused constant

---
 .../codemirror/completions/constants.ts       | 23 +------------------
 .../completions/datatype.completions.ts       |  5 ++--
 .../plugins/codemirror/completions/utils.ts   | 10 +++++++-
 3 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
index 8dd8f8096c0a8..1142f83b9d714 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/constants.ts
@@ -142,33 +142,12 @@ export const STRING_RECOMMENDED_OPTIONS = [
 	'replaceAll()',
 	'length',
 ];
-export const STRING_EDIT_OPTIONS = [
-	'concat()',
-	'replace()',
-	'replaceAll()',
-	'replaceSpecialChars()',
-	'slice()',
-	'split()',
-	'substring()',
-	'trim()',
-	'trimEnd()',
-	'trimStart()',
-	'hash()',
-	'removeMarkdown()',
-	'removeTags()',
-	'urlDecode()',
-	'urlEncode()',
-	'quote()',
-	'extractEmail()',
-	'extractDomain()',
-	'extractUrl()',
-];
 
 export const DATE_RECOMMENDED_OPTIONS = ['format()', 'minus()', 'plus()', 'extract()'];
 export const LUXON_RECOMMENDED_OPTIONS = ['format()', 'minus()', 'plus()', 'diff()', 'extract()'];
+export const OBJECT_RECOMMENDED_OPTIONS = ['keys()', 'values()', 'isEmpty()'];
 export const ARRAY_RECOMMENDED_OPTIONS = ['length', 'last()', 'includes()', 'map()', 'filter()'];
 export const ARRAY_NUMBER_ONLY_METHODS = ['max()', 'min()', 'sum()', 'average()'];
-export const OBJECT_RECOMMENDED_OPTIONS = ['keys()', 'values()', 'isEmpty()'];
 
 export const LUXON_SECTIONS: Record<string, CompletionSection> = {
 	edit: withSectionHeader({
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
index fedd178a71b7d..338278904923f 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -16,6 +16,7 @@ import {
 	isCredentialsModalOpen,
 	applyCompletion,
 	sortCompletionsAlpha,
+	hasRequiredArgs,
 } from './utils';
 import type {
 	Completion,
@@ -200,7 +201,7 @@ const createCompletionOption = (
 		label,
 		type: optionType,
 		section: docInfo.doc?.section,
-		apply: applyCompletion((docInfo.doc?.args?.length ?? 0) > 0),
+		apply: applyCompletion(hasRequiredArgs(docInfo?.doc)),
 	};
 
 	option.info = () => {
@@ -695,7 +696,7 @@ const createLuxonAutocompleteOption = (
 		label,
 		type,
 		section: doc?.section,
-		apply: applyCompletion((doc?.args?.length ?? 0) > 0),
+		apply: applyCompletion(hasRequiredArgs(doc)),
 	};
 	option.info = createCompletionOption('DateTime', name, type, {
 		// Add translated description
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
index e9102ab67e0ae..d7c012d265dff 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
@@ -15,6 +15,7 @@ import type { TransactionSpec } from '@codemirror/state';
 import type { SyntaxNode } from '@lezer/common';
 import { javascriptLanguage } from '@codemirror/lang-javascript';
 import { useRouter } from 'vue-router';
+import type { DocMetadata } from 'n8n-workflow';
 
 /**
  * Split user input into base (to resolve) and tail (to filter).
@@ -152,7 +153,8 @@ export const stripExcessParens = (context: CompletionContext) => (option: Comple
 
 /**
  * When a function completion is selected, set the cursor correctly
- * e.g. `$max()` -> `$max(<cursor>)`
+ * @example `.includes()` -> `.includes(<cursor>)`
+ *  @example `$max()` -> `$max()<cursor>`
  */
 export const applyCompletion =
 	(hasArgs = true) =>
@@ -170,6 +172,12 @@ export const applyCompletion =
 		view.dispatch(tx);
 	};
 
+export const hasRequiredArgs = (doc?: DocMetadata): boolean => {
+	if (!doc) return false;
+	const requiredArgs = doc?.args?.filter((arg) => !arg.name.endsWith('?')) ?? [];
+	return requiredArgs.length > 0;
+};
+
 export const sortCompletionsAlpha = (completions: Completion[]): Completion[] => {
 	return completions.sort((a, b) => a.label.localeCompare(b.label));
 };

From 0d4061be74b8c2a02f9f910de45bb1e38df0bf72 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 5 Mar 2024 12:44:55 +0100
Subject: [PATCH 23/25] Remove unused CSS variables

---
 packages/design-system/src/css/_primitives.scss | 5 -----
 packages/design-system/src/css/_tokens.scss     | 2 --
 2 files changed, 7 deletions(-)

diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss
index 73e5b98ec3554..77e3a4e30ca4f 100644
--- a/packages/design-system/src/css/_primitives.scss
+++ b/packages/design-system/src/css/_primitives.scss
@@ -350,11 +350,6 @@
 		var(--prim-color-alt-e-l),
 		0.4
 	);
-	--prim-color-alt-e-tint-100: hsl(
-		var(--prim-color-alt-e-h),
-		var(--prim-color-alt-e-s),
-		calc(var(--prim-color-alt-e-l) + 10%)
-	);
 	--prim-color-alt-e-tint-250: hsl(
 		var(--prim-color-alt-e-h),
 		var(--prim-color-alt-e-s),
diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
index f1f532da3d1e8..0487053fe19b4 100644
--- a/packages/design-system/src/css/_tokens.scss
+++ b/packages/design-system/src/css/_tokens.scss
@@ -113,8 +113,6 @@
 	--color-expression-syntax-example: var(--prim-gray-40);
 	--color-autocomplete-item-selected: var(--color-secondary);
 	--color-autocomplete-section-header-border: var(--color-foreground-light);
-	--color-autocomplete-selected-background: var(--prim-color-alt-e-tint-100);
-	--color-autocomplete-selected-font: var(--prim-gray-0);
 
 	// Code
 	--color-code-tags-string: var(--prim-color-alt-f);

From eeae05e49149329aa42c9054a673e2ed88542be4 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 6 Mar 2024 11:33:09 +0100
Subject: [PATCH 24/25] Capture error in Sentry

---
 packages/editor-ui/src/Interface.ts                           | 4 ++++
 .../editor-ui/src/plugins/codemirror/resolvableHighlighter.ts | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 870e4d3dfcf8f..58d1b8d914c75 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -107,6 +107,10 @@ declare global {
 		};
 		// eslint-disable-next-line @typescript-eslint/naming-convention
 		Cypress: unknown;
+
+		Sentry?: {
+			captureException: (error: Error, metadata?: unknown) => void;
+		};
 	}
 }
 
diff --git a/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts b/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts
index 531c8572b0772..4ad38305bcb00 100644
--- a/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts
+++ b/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts
@@ -87,7 +87,9 @@ const coloringStateField = StateField.define<DecorationSet>({
 					});
 				}
 			}
-		} catch (error) {}
+		} catch (error) {
+			window?.Sentry?.captureException(error);
+		}
 
 		return colorings;
 	},

From 5be8205dbf0fbd95d7cca63ed4bfd3bc6eca3ddc Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 6 Mar 2024 11:58:22 +0100
Subject: [PATCH 25/25] Fix e2e tests

---
 cypress/e2e/13-pinning.cy.ts                                  | 4 +++-
 packages/editor-ui/src/components/CodeNodeEditor/completer.ts | 1 +
 packages/editor-ui/src/styles/plugins/_codemirror.scss        | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/13-pinning.cy.ts b/cypress/e2e/13-pinning.cy.ts
index 1643363a5f3c9..e0b3ef3f2342a 100644
--- a/cypress/e2e/13-pinning.cy.ts
+++ b/cypress/e2e/13-pinning.cy.ts
@@ -195,5 +195,7 @@ function setExpressionOnStringValueInSet(expression: string) {
 	ndv.getters
 		.inlineExpressionEditorInput()
 		.clear()
-		.type(expression, { parseSpecialCharSequences: false });
+		.type(expression, { parseSpecialCharSequences: false })
+		// hide autocomplete
+		.type('{esc}');
 }
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completer.ts b/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
index 9d64f92a49921..6cb2866a7565b 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
@@ -37,6 +37,7 @@ export const completerExtension = defineComponent({
 			}
 
 			return autocompletion({
+				icons: false,
 				compareCompletions: (a: Completion, b: Completion) => {
 					if (/\.json$|id$|id['"]\]$/.test(a.label)) return 0;
 
diff --git a/packages/editor-ui/src/styles/plugins/_codemirror.scss b/packages/editor-ui/src/styles/plugins/_codemirror.scss
index 08998296ad6d7..cb9ad0ca9568a 100644
--- a/packages/editor-ui/src/styles/plugins/_codemirror.scss
+++ b/packages/editor-ui/src/styles/plugins/_codemirror.scss
@@ -22,7 +22,7 @@
 		font-family: var(--font-family-monospace);
 		max-height: min(220px, 50vh);
 		width: min(260px, 50vw);
-		min-width: auto;
+		min-width: 100%;
 		max-width: none;
 		border: var(--border-base);
 		border-radius: var(--border-radius-base);