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>
2025-12-19 02:51:14 +00:00 · 2022-12-14 14:43:02 +01:00
parent f73267ffa5
commit a1259898c0
36 changed files with 1285 additions and 593 deletions
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
@@ -0,0 +1,90 @@
+<template>
+	<div ref="root" class="ph-no-capture"></div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+
+import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
+import { outputTheme } from './theme';
+
+import type { Plaintext, Resolved, Segment } from '@/types/expressions';
+
+export default Vue.extend({
+	name: 'ExpressionEditorModalOutput',
+	props: {
+		segments: {
+			type: Array as PropType<Segment[]>,
+		},
+	},
+	watch: {
+		segments() {
+			if (!this.editor) return;
+
+			this.editor.dispatch({
+				changes: { from: 0, to: this.editor.state.doc.length, insert: this.resolvedExpression },
+			});
+
+			highlighter.addColor(this.editor, this.resolvedSegments);
+			highlighter.removeColor(this.editor, this.plaintextSegments);
+		},
+	},
+	data() {
+		return {
+			editor: null as EditorView | null,
+		};
+	},
+	mounted() {
+		const extensions = [outputTheme(), EditorState.readOnly.of(true), EditorView.lineWrapping];
+
+		this.editor = new EditorView({
+			parent: this.$refs.root as HTMLDivElement,
+			state: EditorState.create({
+				doc: this.resolvedExpression,
+				extensions,
+			}),
+		});
+	},
+	destroyed() {
+		this.editor?.destroy();
+	},
+	computed: {
+		resolvedExpression(): string {
+			return this.segments.reduce((acc, segment) => {
+				acc += segment.kind === 'resolvable' ? segment.resolved : segment.plaintext;
+				return acc;
+			}, '');
+		},
+		plaintextSegments(): Plaintext[] {
+			return this.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
+		},
+		resolvedSegments(): Resolved[] {
+			let cursor = 0;
+
+			return this.segments
+				.map((segment) => {
+					segment.from = cursor;
+
+					cursor +=
+						segment.kind === 'plaintext'
+							? segment.plaintext.length
+							: (segment.resolved as any).toString().length;
+
+					segment.to = cursor;
+
+					return segment;
+				})
+				.filter((segment): segment is Resolved => segment.kind === 'resolvable');
+		},
+	},
+	methods: {
+		getValue() {
+			return '=' + this.resolvedExpression;
+		},
+	},
+});
+</script>
+
+<style lang="scss"></style>