feat(editor): Inline expression editor (#4814)

* WIP

* 🔥 Remove unneeded watch

* ⚡ Further setup

* ⚡ Fix import

* ⚡ Minor tweaks

* 🔥 Remove logging

* 🎨 Add some styling

* 🎨 More styling changes

* 🐛 Fix wrong marking of stale data

* 🎨 Prevent fx on dragging

* 🔥 Remove logging

* ⚡ Refine draggable target offsets

* refactor(editor): Consolidate expression management logic (#4836)

* ⚡ Extract `ExpressionFunctionIcon`

* ⚡ Simplify syntax

* ⚡ Move to mixin

* 🎨 Format

* 📘 Unify types

* ⚡ Dedup double brace handler

* ⚡ Consolidate resolvable highlighter

* 🎨 Format

* ⚡ Consolidate language pack

* ✏️ Add comment

* ⚡ Move completions to plugins

* ⚡ Partially deduplicate themes

* refactor(editor): Apply styling feedback to inline expression editor (#4846)

* 🎨 Adjust styling for expression parameter input

* 🎨 Style outputs differently

* ⚡ Set single line for RLC

* 🎨 Style both openers identically

* 🐛 Prevent defocus on resize

* ⚡ Adjust line height

* 🎨 Adjust border with for expression input

* ⚡ Fix font family for inline output

* ⚡ Set up telemetry

* ⚡ Complete telemetry

* ⚡ Simplify event source

* ⚡ Set monospaced font for inline output

* 🎨 Hide cursor on schema pill drop

* 🧪 Update snapshots

* ⚡ Consolidate editor styles

* ✏️ Add tech debt comments

* ⚡ Improve naming

* ⚡ Improve inside resolvable detection

* ⚡ Improve var naming

* 🔥 Remove outdated comment

* 🚚 Move constant to data

* ✏️ Clarify comments

* 🔥 Remove outdated comments

* 🔥 Remove unneeded try-catch

* 🔥 Remove unneeded method

* 🔥 Remove unneeded check

* 🔥 Remove `openExpression` check

* 🔥 Remove unused timeout

* 🔥 Remove commented out sections

* ⚡ Use Pinia naming convention

* ⚡ Re-evaluate on change of `ndvInputData`

* 🐛 Fix handling of `0` in number-type input

* 🐛 Surface focus and blur for mapping hints

* 🔥 Remove logging

* ✏️ Reword error

* ⚡ Change kebab-case to PascalCase

* ⚡ Refactor state fields for clarity

* ⚡ Support double bracing on selection

* 🎨 More styling

* ⚡ Miscellaneous cleanup

* ⚡ Disregard error on drop

* 🎨 Fix schema pill styling

* 🎨 More `background` to `background-color` fixes

* 🧪 Update snapshots

* 🎨 Replace non-existing var with white

* 🧪 Update snapshot

* 📦 Integrate `codemirror-lang-n8n-expression`

* 🎨 Fix formatting

* 🧪 Re-update test snapshots

* 🧪 Update selectors for inline editor

* 🔥 Remove unused test ID

* 📘 Add type for `currentNodePaneType`

* ⚡ Refactor mixin to util

* ⚡ Use `:global`

* 🔥 Remove comment

* ⚡ Add watch

* ⚡ Change import style

* 👕 Fix lint

* ⚡ Refactor preventing blur on resize

* 🔥 Remove comment

* 🧪 Re-update snapshots

* 🎨 Prettify

* 👕 Fix lint

* 🔥 Remove comment

Co-authored-by: Mutasem <mutdmour@gmail.com>

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

@@ -66,7 +66,7 @@
 						type="mapping"
 						:disabled="hasOnlyListMode"
 						:sticky="true"
-						:stickyOffset="4"
+						:stickyOffset="isValueExpression ? [26, 3] : [3, 3]"
 						@drop="onDrop"
 					>
 						<template #default="{ droppable, activeDrop }">
@@ -78,14 +78,12 @@
 								}"
 								@keydown.stop="onKeyDown"
 							>
-								<n8n-input
-									v-if="isValueExpression || droppable || forceShowExpression"
-									type="text"
-									:size="inputSize"
+								<ExpressionParameterInput
+									v-if="isValueExpression || forceShowExpression"
 									:value="expressionDisplayValue"
-									:title="displayTitle"
-									:disabled="isReadOnly"
-									@keydown.stop
+									isForRecordLocator
+									@valueChanged="onInputChange"
+									@modalOpenerClick="$emit('modalOpenerClick')"
 									ref="input"
 								/>
 								<n8n-input
@@ -120,6 +118,7 @@
 					<parameter-issues
 						v-if="parameterIssues && parameterIssues.length"
 						:issues="parameterIssues"
+						:class="$style['parameter-issues']"
 					/>
 					<div v-else-if="urlValue" :class="$style.openResourceLink">
 						<n8n-link theme="text" @click.stop="openResource(urlValue)">
@@ -147,7 +146,7 @@ import {
 	INodePropertyMode,
 	NodeParameterValue,
 } from 'n8n-workflow';
-
+import ExpressionParameterInput from '@/components/ExpressionParameterInput.vue';
 import DraggableTarget from '@/components/DraggableTarget.vue';
 import ExpressionEdit from '@/components/ExpressionEdit.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
@@ -178,6 +177,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 	components: {
 		DraggableTarget,
 		ExpressionEdit,
+		ExpressionParameterInput,
 		ParameterIssues,
 		ResourceLocatorDropdown,
 	},
@@ -722,9 +722,8 @@ $--mode-selector-width: 92px;
 		align-items: center;
 		width: 100%;
 
-		div:first-child {
-			display: flex;
-			flex-grow: 1;
+		> div {
+			width: 100%;
 		}
 	}
 
@@ -744,7 +743,6 @@ $--mode-selector-width: 92px;
 
 .droppable {
 	--input-border-color: var(--color-secondary-tint-1);
-	--input-background-color: var(--color-secondary-tint-2);
 	--input-border-style: dashed;
 }
 
@@ -789,6 +787,11 @@ $--mode-selector-width: 92px;
 }
 
 .openResourceLink {
+	width: 25px !important;
 	margin-left: var(--spacing-2xs);
 }
+
+.parameter-issues {
+	width: 25px !important;
+}
 </style>