feat(editor): Overhaul expression editor modal (#4631)

* feat(editor): Integrate CodeMirror into expression editor modal (#4563) * ✨ Initial setup * 👕 Fix lint * ⚡ Extract segments * ⚡ Implement var insertion * 👕 Ignore `.d.cts` * ⚡ Refactor to simplify * ✨ Add brace handler * ✨ Fully replace input and output * feat(editor): Adjust resolved expression to match parameter input hint (#4600) * ✨ Initial adjustments * 🐛 Prevent empty decorations * ⚡ Adjust resolved expression to match param input hint * ✏️ Improve comment * 👕 Remove lint rule * ✏️ Fix typo * ✏️ Fix closing brace * ⚡ Clean up `displayableSegments()` * feat(editor): Apply styling to expression editor modal (#4607) 🎨 Apply styling * feat(core): Improve errors in evaluated expression (#4619) * 🐛 Fix env var access for FE * 🔥 Remove excess closing bracket * 🚧 Set up TODO * ✏️ Update copy * ⚡ Deny env vars access to FE * 👕 Remove unneeded lint exception * 📘 Remove unneeded typing * feat(editor): Dynamically delay evaluation resolution (#4625) * ✏️ Update copy * ⚡ Dynamically delay evaluation resolution * 🔥 Remove unneeded computed property * refactor(editor): Pre-review cleanup (#4627) * 🔥 Remove `ExpressionInput` component * 🔥 Remove Quill * ✏️ Rename i18n key * 🎨 Place border on correct element * 🐛 Handle syntax errors * ⚡ Add sample autocompletions * 🐛 Fix auto-extending behavior * feat(editor): Improve escaping behavior (#4641) * 🎨 Hide hint on small screen * ⚡ Improve escaping * refactor(editor): Apply styling feedback to expression editor modal (#4660) * 🎨 Restyle hint * 🎨 Restyle param input hint * 🔥 Remove `e.g.` * ⚡ Tweak delay * 🎨 Restyle output * 🎨 Tweak theme * ✏️ Tweak copy * refactor(editor): Apply feedback 2022.11.22 (#4697) * 🎨 Change background color * ⚡ Focus on mount * ⚡ Account for preexisting braces on injection * 🐛 Fix `$workflow` showing as not saved * ✏️ Tweak copy * 🐛 Fix readonly focus * ⚡ Focus input on paste * ⚡ Sync inputs with modal * ✏️ Tweak copy * refactor(editor): Apply feedback 2022.11.23 (#4705) * ⚡ Allow newlines * ⚡ Set cursor at end of content * ⚡ Do not defocus on paste on Chrome * ⚡ Fix import * 🧪 Add e2e tests * ⚡ Cleanup * ⚡ Add telemetry * 🔥 Remove log * ⚡ Expose error properties * 🧪 Rename test * ⚡ Move `getCurrentWorkflow()` call * ⏪ Revert highlighting removal per feedback * ⚡ Add i18n keys * 🚚 Move computed property to local state * 🎨 Use CSS vars * ⚡ Update `pnpm-lock.yaml` * ⚡ Apply readonly state * ⚡ Use prop * ⚡ Complete fix
2022-12-01 13:26:22 +01:00
parent 830bda5f55
commit 59771c80ea
33 changed files with 1043 additions and 637 deletions
--- a/packages/editor-ui/src/components/ExpressionEditorModal/theme.ts
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/theme.ts
@@ -0,0 +1,62 @@
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+
+export const SYNTAX_HIGHLIGHTING_CLASSES = {
+	validResolvable: 'cm-valid-resolvable',
+	invalidResolvable: 'cm-invalid-resolvable',
+	brokenResolvable: 'cm-broken-resolvable',
+	plaintext: 'cm-plaintext',
+};
+
+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 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)',
+	},
+});