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>
This commit is contained in:
Iván Ovejero
GitHub
216
packages/editor-ui/src/mixins/expressionManager.ts
Normal file
216
packages/editor-ui/src/mixins/expressionManager.ts
Normal file
@@ -0,0 +1,216 @@
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import { mapStores } from 'pinia';
|
||||
import { syntaxTree } from '@codemirror/language';
|
||||
|
||||
import { workflowHelpers } from '@/mixins/workflowHelpers';
|
||||
import { useNDVStore } from '@/stores/ndv';
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
import type { EditorView } from '@codemirror/view';
|
||||
import type { TargetItem } from '@/Interface';
|
||||
import type { Plaintext, RawSegment, Resolvable, Segment } from '@/types/expressions';
|
||||
|
||||
export const expressionManager = mixins(workflowHelpers).extend({
|
||||
props: {
|
||||
targetItem: {
|
||||
type: Object as PropType<TargetItem | null>,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: null as EditorView | null,
|
||||
errorsInSuccession: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
targetItem() {
|
||||
setTimeout(() => {
|
||||
this.$emit('change', {
|
||||
value: this.unresolvedExpression,
|
||||
segments: this.displayableSegments,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useNDVStore),
|
||||
|
||||
unresolvedExpression(): string {
|
||||
return this.segments.reduce((acc, segment) => {
|
||||
acc += segment.kind === 'resolvable' ? segment.resolvable : segment.plaintext;
|
||||
|
||||
return acc;
|
||||
}, '=');
|
||||
},
|
||||
|
||||
hoveringItem(): TargetItem | undefined {
|
||||
return this.ndvStore.hoveringItem ?? undefined;
|
||||
},
|
||||
|
||||
resolvableSegments(): Resolvable[] {
|
||||
return this.segments.filter((s): s is Resolvable => s.kind === 'resolvable');
|
||||
},
|
||||
|
||||
plaintextSegments(): Plaintext[] {
|
||||
return this.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
|
||||
},
|
||||
|
||||
segments(): Segment[] {
|
||||
if (!this.editor) return [];
|
||||
|
||||
const rawSegments: RawSegment[] = [];
|
||||
|
||||
syntaxTree(this.editor.state)
|
||||
.cursor()
|
||||
.iterate((node) => {
|
||||
if (!this.editor || node.type.name === 'Program') return;
|
||||
|
||||
rawSegments.push({
|
||||
from: node.from,
|
||||
to: node.to,
|
||||
text: this.editor.state.sliceDoc(node.from, node.to),
|
||||
type: node.type.name,
|
||||
});
|
||||
});
|
||||
|
||||
return rawSegments.reduce<Segment[]>((acc, segment) => {
|
||||
const { from, to, text, type } = segment;
|
||||
|
||||
if (type === 'Resolvable') {
|
||||
const { resolved, error, fullError } = this.resolve(text, this.hoveringItem);
|
||||
|
||||
acc.push({ kind: 'resolvable', from, to, resolvable: text, resolved, error, fullError });
|
||||
|
||||
return acc;
|
||||
}
|
||||
|
||||
acc.push({ kind: 'plaintext', from, to, plaintext: text });
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
},
|
||||
|
||||
evaluationDelay() {
|
||||
const DEFAULT_EVALUATION_DELAY = 300; // ms
|
||||
|
||||
const prevErrorsInSuccession = this.errorsInSuccession;
|
||||
|
||||
if (this.resolvableSegments.filter((s) => s.error).length > 0) {
|
||||
this.errorsInSuccession += 1;
|
||||
} else {
|
||||
this.errorsInSuccession = 0;
|
||||
}
|
||||
|
||||
const addsNewError = this.errorsInSuccession > prevErrorsInSuccession;
|
||||
|
||||
let delay = DEFAULT_EVALUATION_DELAY;
|
||||
|
||||
if (addsNewError && this.errorsInSuccession > 1 && this.errorsInSuccession < 5) {
|
||||
delay = DEFAULT_EVALUATION_DELAY * this.errorsInSuccession;
|
||||
} else if (addsNewError && this.errorsInSuccession >= 5) {
|
||||
delay = 0;
|
||||
}
|
||||
|
||||
return delay;
|
||||
},
|
||||
|
||||
/**
|
||||
* Some segments are conditionally displayed, i.e. not displayed when they are
|
||||
* _part_ of the result, but displayed when they are the _entire_ result.
|
||||
*
|
||||
* Example:
|
||||
* - Expression `This is a {{ null }} test` is displayed as `This is a test`.
|
||||
* - Expression `{{ null }}` is displayed as `[Object: null]`.
|
||||
*
|
||||
* Conditionally displayed segments:
|
||||
* - `[Object: null]`
|
||||
* - `[Array: []]`
|
||||
* - `[empty]` (from `''`, not from `undefined`)
|
||||
* - `null` (from `NaN`)
|
||||
*
|
||||
* Exceptionally, for two segments, display differs based on context:
|
||||
* - Date is displayed as
|
||||
* - `Mon Nov 14 2022 17:26:13 GMT+0100 (CST)` when part of the result
|
||||
* - `[Object: "2022-11-14T17:26:13.130Z"]` when the entire result
|
||||
* - Non-empty array is displayed as
|
||||
* - `1,2,3` when part of the result
|
||||
* - `[Array: [1, 2, 3]]` when the entire result
|
||||
*/
|
||||
displayableSegments(): Segment[] {
|
||||
return this.segments
|
||||
.map((s) => {
|
||||
if (this.segments.length <= 1 || s.kind !== 'resolvable') return s;
|
||||
|
||||
if (typeof s.resolved === 'string' && /\[Object: "\d{4}-\d{2}-\d{2}T/.test(s.resolved)) {
|
||||
const utcDateString = s.resolved.replace(/(\[Object: "|\"\])/g, '');
|
||||
s.resolved = new Date(utcDateString).toString();
|
||||
}
|
||||
|
||||
if (typeof s.resolved === 'string' && /\[Array:\s\[.+\]\]/.test(s.resolved)) {
|
||||
s.resolved = s.resolved.replace(/(\[Array: \[|\])/g, '');
|
||||
}
|
||||
|
||||
return s;
|
||||
})
|
||||
.filter((s) => {
|
||||
if (
|
||||
this.segments.length > 1 &&
|
||||
s.kind === 'resolvable' &&
|
||||
typeof s.resolved === 'string' &&
|
||||
(['[Object: null]', '[Array: []]'].includes(s.resolved) ||
|
||||
s.resolved === this.$locale.baseText('expressionModalInput.empty') ||
|
||||
s.resolved === this.$locale.baseText('expressionModalInput.null'))
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isEmptyExpression(resolvable: string) {
|
||||
return /\{\{\s*\}\}/.test(resolvable);
|
||||
},
|
||||
|
||||
resolve(resolvable: string, targetItem?: TargetItem) {
|
||||
const result: { resolved: unknown; error: boolean; fullError: Error | null } = {
|
||||
resolved: undefined,
|
||||
error: false,
|
||||
fullError: null,
|
||||
};
|
||||
|
||||
try {
|
||||
result.resolved = this.resolveExpression('=' + resolvable, undefined, {
|
||||
targetItem: targetItem ?? undefined,
|
||||
inputNodeName: this.ndvStore.ndvInputNodeName,
|
||||
inputRunIndex: this.ndvStore.ndvInputRunIndex,
|
||||
inputBranchIndex: this.ndvStore.ndvInputBranchIndex,
|
||||
});
|
||||
} catch (error) {
|
||||
result.resolved = `[${error.message}]`;
|
||||
result.error = true;
|
||||
result.fullError = error;
|
||||
}
|
||||
|
||||
if (result.resolved === '') {
|
||||
result.resolved = this.$locale.baseText('expressionModalInput.empty');
|
||||
}
|
||||
|
||||
if (result.resolved === undefined && this.isEmptyExpression(resolvable)) {
|
||||
result.resolved = this.$locale.baseText('expressionModalInput.empty');
|
||||
}
|
||||
|
||||
if (result.resolved === undefined) {
|
||||
result.resolved = this.$locale.baseText('expressionModalInput.undefined');
|
||||
result.error = true;
|
||||
}
|
||||
|
||||
if (typeof result.resolved === 'number' && isNaN(result.resolved)) {
|
||||
result.resolved = this.$locale.baseText('expressionModalInput.null');
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user