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

@@ -43,7 +43,7 @@
 							</div>
 						</div>
 						<div class="expression-editor ph-no-capture">
-							<expression-modal-input
+							<ExpressionEditorModalInput
 								:value="value"
 								:isReadOnly="isReadOnly"
 								@change="valueChanged"
@@ -58,7 +58,7 @@
 							{{ $locale.baseText('expressionEdit.resultOfItem1') }}
 						</div>
 						<div class="ph-no-capture">
-							<expression-modal-output
+							<ExpressionEditorModalOutput
 								:segments="segments"
 								ref="expressionResult"
 								data-test-id="expression-modal-output"
@@ -72,8 +72,8 @@
 </template>
 
 <script lang="ts">
-import ExpressionModalInput from '@/components/ExpressionEditorModal/ExpressionModalInput.vue';
-import ExpressionModalOutput from '@/components/ExpressionEditorModal/ExpressionModalOutput.vue';
+import ExpressionEditorModalInput from '@/components/ExpressionEditorModal/ExpressionEditorModalInput.vue';
+import ExpressionEditorModalOutput from '@/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue';
 import VariableSelector from '@/components/VariableSelector.vue';
 
 import { IVariableItemSelected } from '@/Interface';
@@ -84,20 +84,20 @@ import { genericHelpers } from '@/mixins/genericHelpers';
 import { EXPRESSIONS_DOCS_URL } from '@/constants';
 
 import mixins from 'vue-typed-mixins';
-import { hasExpressionMapping } from '@/utils';
 import { debounceHelper } from '@/mixins/debounce';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
+import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
 
-import type { Resolvable, Segment } from './ExpressionEditorModal/types';
+import type { Segment } from '@/types/expressions';
 
 export default mixins(externalHooks, genericHelpers, debounceHelper).extend({
 	name: 'ExpressionEdit',
 	props: ['dialogVisible', 'parameter', 'path', 'value', 'eventSource'],
 	components: {
-		ExpressionModalInput,
-		ExpressionModalOutput,
+		ExpressionEditorModalInput,
+		ExpressionEditorModalOutput,
 		VariableSelector,
 	},
 	data() {
@@ -225,36 +225,13 @@ export default mixins(externalHooks, genericHelpers, debounceHelper).extend({
 			});
 
 			if (!newValue) {
-				const resolvables = this.segments.filter((s): s is Resolvable => s.kind === 'resolvable');
-				const errorResolvables = resolvables.filter((r) => r.error);
-
-				const exposeErrorProperties = (error: Error) => {
-					return Object.getOwnPropertyNames(error).reduce<Record<string, unknown>>((acc, key) => {
-						// @ts-ignore
-						return (acc[key] = error[key]), acc;
-					}, {});
-				};
-
-				const telemetryPayload = {
-					empty_expression: this.value === '=' || this.value === '={{}}' || !this.value,
-					workflow_id: this.workflowsStore.workflowId,
-					source: this.eventSource,
-					session_id: this.ndvStore.sessionId,
-					has_parameter: this.value.includes('$parameter'),
-					has_mapping: hasExpressionMapping(this.value),
-					node_type: this.ndvStore.activeNode?.type ?? '',
-					handlebar_count: resolvables.length,
-					handlebar_error_count: errorResolvables.length,
-					full_errors: errorResolvables.map((errorResolvable) => {
-						return errorResolvable.fullError
-							? {
-									...exposeErrorProperties(errorResolvable.fullError),
-									stack: errorResolvable.fullError.stack,
-							  }
-							: null;
-					}),
-					short_errors: errorResolvables.map((r) => r.resolved ?? null),
-				};
+				const telemetryPayload = createExpressionTelemetryPayload(
+					this.segments,
+					this.value,
+					this.workflowsStore.workflowId,
+					this.ndvStore.sessionId,
+					this.ndvStore.activeNode?.type ?? '',
+				);
 
 				this.$telemetry.track('User closed Expression Editor', telemetryPayload);
 				this.$externalHooks().run('expressionEdit.closeDialog', telemetryPayload);