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/InlineExpressionEditor/theme.ts
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
@@ -0,0 +1,68 @@
+import { EditorView } from '@codemirror/view';
+import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
+
+const commonThemeProps = {
+	'&.cm-focused': {
+		outline: '0 !important',
+	},
+	'.cm-content': {
+		fontFamily: 'var(--font-family-monospace)',
+		color: 'var(--input-font-color, var(--color-text-dark))',
+	},
+	'.cm-line': {
+		padding: '0',
+	},
+};
+
+export const inputTheme = ({ isSingleLine } = { isSingleLine: false }) => {
+	const theme = EditorView.theme({
+		...commonThemeProps,
+		'&': {
+			maxHeight: isSingleLine ? '30px' : '112px',
+			minHeight: '30px',
+			width: '100%',
+			fontSize: 'var(--font-size-2xs)',
+			padding: '0 0 0 var(--spacing-2xs)',
+			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))',
+			borderTopLeftRadius: '0',
+			borderBottomLeftRadius: '0',
+			backgroundColor: 'white',
+		},
+		'.cm-scroller': {
+			lineHeight: '1.68',
+		},
+	});
+
+	return [theme, highlighter.resolvableStyle];
+};
+
+export const outputTheme = () => {
+	const theme = EditorView.theme({
+		...commonThemeProps,
+		'&': {
+			maxHeight: '95px',
+			width: '100%',
+			fontSize: 'var(--font-size-2xs)',
+			padding: '0',
+			borderTopLeftRadius: '0',
+			borderBottomLeftRadius: '0',
+			backgroundColor: 'white',
+		},
+		'.cm-scroller': {
+			lineHeight: '1.6',
+		},
+		'.cm-valid-resolvable': {
+			padding: '0 2px',
+			borderRadius: '2px',
+		},
+		'.cm-invalid-resolvable': {
+			padding: '0 2px',
+			borderRadius: '2px',
+		},
+	});
+
+	return [theme, highlighter.resolvableStyle];
+};