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>
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/theme.ts
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/theme.ts
@@ -1,62 +1,47 @@
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
-import { tags } from '@lezer/highlight';
+import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';

-export const SYNTAX_HIGHLIGHTING_CLASSES = {
-	validResolvable: 'cm-valid-resolvable',
-	invalidResolvable: 'cm-invalid-resolvable',
-	brokenResolvable: 'cm-broken-resolvable',
-	plaintext: 'cm-plaintext',
+const commonThemeProps = {
+	'&': {
+		borderWidth: 'var(--border-width-base)',
+		borderStyle: 'var(--input-border-style, var(--border-style-base))',
+		borderColor: 'var(--input-border-color, var(--border-color-base))',
+		borderRadius: 'var(--input-border-radius, var(--border-radius-base))',
+		backgroundColor: 'var(--color-expression-editor-background)',
+	},
+	'&.cm-focused': {
+		borderColor: 'var(--color-secondary)',
+		outline: '0 !important',
+	},
+	'.cm-content': {
+		fontFamily: 'var(--font-family-monospace)',
+		height: '220px',
+		padding: 'var(--spacing-xs)',
+		color: 'var(--input-font-color, var(--color-text-dark))',
+	},
+	'.cm-line': {
+		padding: '0',
+	},
 };

-export const EXPRESSION_EDITOR_THEME = [
-	EditorView.theme({
-		'&': {
-			borderWidth: 'var(--border-width-base)',
-			borderStyle: 'var(--input-border-style, var(--border-style-base))',
-			borderColor: 'var(--input-border-color, var(--border-color-base))',
-			borderRadius: 'var(--input-border-radius, var(--border-radius-base))',
-			backgroundColor: 'var(--color-expression-editor-background)',
-		},
-		'&.cm-focused': {
-			borderColor: 'var(--color-secondary)',
-			outline: 'unset !important',
-		},
-		'.cm-content': {
-			fontFamily: "Menlo, Consolas, 'DejaVu Sans Mono', monospace !important",
-			height: '220px',
-			padding: 'var(--spacing-xs)',
-			color: 'var(--input-font-color, var(--color-text-dark))',
-		},
-		'.cm-line': {
-			padding: '0',
-		},
-	}),
-	syntaxHighlighting(
-		HighlightStyle.define([
-			{
-				tag: tags.content,
-				class: SYNTAX_HIGHLIGHTING_CLASSES.plaintext,
-			},
-			{
-				tag: tags.className,
-				class: SYNTAX_HIGHLIGHTING_CLASSES.brokenResolvable,
-			},
-			/**
-			 * Resolvables are dynamically styled with
-			 * `cm-valid-resolvable` and `cm-invalid-resolvable`
-			 */
-		]),
-	),
-];
+export const inputTheme = () => {
+	const theme = EditorView.theme(commonThemeProps);

-export const DYNAMICALLY_STYLED_RESOLVABLES_THEME = EditorView.theme({
-	['.' + SYNTAX_HIGHLIGHTING_CLASSES.validResolvable]: {
-		color: 'var(--color-valid-resolvable-foreground)',
-		backgroundColor: 'var(--color-valid-resolvable-background)',
-	},
-	['.' + SYNTAX_HIGHLIGHTING_CLASSES.invalidResolvable]: {
-		color: 'var(--color-invalid-resolvable-foreground)',
-		backgroundColor: 'var(--color-invalid-resolvable-background)',
-	},
-});
+	return [theme, highlighter.resolvableStyle];
+};
+
+export const outputTheme = () => {
+	const theme = EditorView.theme({
+		...commonThemeProps,
+		'.cm-valid-resolvable': {
+			padding: '0 2px',
+			borderRadius: '2px',
+		},
+		'.cm-invalid-resolvable': {
+			padding: '0 2px',
+			borderRadius: '2px',
+		},
+	});
+
+	return [theme, highlighter.resolvableStyle];
+};