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/ParameterInputFull.vue

@@ -24,7 +24,7 @@
 				type="mapping"
 				:disabled="isDropDisabled"
 				:sticky="true"
-				:stickyOffset="3"
+				:stickyOffset="isValueExpression ? [26, 3] : [3, 3]"
 				@drop="onDrop"
 			>
 				<template #default="{ droppable, activeDrop }">
@@ -76,7 +76,12 @@ import DraggableTarget from '@/components/DraggableTarget.vue';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/mixins/showMessage';
 import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
-import { hasExpressionMapping, isResourceLocatorValue, hasOnlyListMode } from '@/utils';
+import {
+	hasExpressionMapping,
+	isResourceLocatorValue,
+	hasOnlyListMode,
+	isValueExpression,
+} from '@/utils';
 import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
 import { INodeParameters, INodeProperties, INodePropertyMode } from 'n8n-workflow';
 import { BaseTextKey } from '@/plugins/i18n';
@@ -152,6 +157,9 @@ export default mixins(showMessage).extend({
 		isDropDisabled(): boolean {
 			return this.parameter.noDataExpression || this.isReadOnly || this.isResourceLocator;
 		},
+		isValueExpression(): boolean {
+			return isValueExpression(this.parameter, this.value);
+		},
 		showExpressionSelector(): boolean {
 			return this.isResourceLocator ? !hasOnlyListMode(this.parameter) : true;
 		},