-
-
-
-
-
-
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/braceHandler.ts b/packages/editor-ui/src/plugins/codemirror/doubleBraceHandler.ts
similarity index 59%
rename from packages/editor-ui/src/components/ExpressionEditorModal/braceHandler.ts
rename to packages/editor-ui/src/plugins/codemirror/doubleBraceHandler.ts
index 6cf2bd0cac..fba5a9ee08 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/braceHandler.ts
+++ b/packages/editor-ui/src/plugins/codemirror/doubleBraceHandler.ts
@@ -2,7 +2,7 @@ import { closeBrackets, insertBracket } from '@codemirror/autocomplete';
import { codePointAt, codePointSize, Extension } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
-const braceInputHandler = EditorView.inputHandler.of((view, from, to, insert) => {
+const inputHandler = EditorView.inputHandler.of((view, from, to, insert) => {
if (view.composing || view.state.readOnly) return false;
const selection = view.state.selection.main;
@@ -22,10 +22,15 @@ const braceInputHandler = EditorView.inputHandler.of((view, from, to, insert) =>
view.dispatch(transaction);
- // customization to rearrange spacing and cursor for expression
+ /**
+ * Customizations to inject whitespace and braces
+ * for resolvable setup and completion
+ */
const cursor = view.state.selection.main.head;
+ // inject whitespace and second brace on completion: {| } -> {{ | }}
+
const isSecondBraceForNewExpression =
view.state.sliceDoc(cursor - 2, cursor) === '{{' &&
view.state.sliceDoc(cursor, cursor + 1) === '}';
@@ -39,6 +44,8 @@ const braceInputHandler = EditorView.inputHandler.of((view, from, to, insert) =>
return true;
}
+ // inject whitespace on setup: empty -> {| }
+
const isFirstBraceForNewExpression =
view.state.sliceDoc(cursor - 1, cursor) === '{' &&
view.state.sliceDoc(cursor, cursor + 1) === '}';
@@ -49,9 +56,27 @@ const braceInputHandler = EditorView.inputHandler.of((view, from, to, insert) =>
return true;
}
+ // when selected, surround with whitespaces on completion: {{abc}} -> {{ abc }}
+
+ const doc = view.state.doc.toString();
+ const openMarkerIndex = doc.lastIndexOf('{', cursor);
+ const closeMarkerIndex = doc.indexOf('}}', cursor);
+
+ if (openMarkerIndex !== -1 && closeMarkerIndex !== -1) {
+ view.dispatch(
+ { changes: { from: openMarkerIndex + 1, insert: ' ' } },
+ { changes: { from: closeMarkerIndex, insert: ' ' } },
+ );
+
+ return true;
+ }
+
return true;
});
const [_, bracketState] = closeBrackets() as readonly Extension[];
-export const braceHandler = () => [braceInputHandler, bracketState];
+/**
+ * CodeMirror plugin to handle double braces `{{ }}` for resolvables in n8n expressions.
+ */
+export const doubleBraceHandler = () => [inputHandler, bracketState];
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguageSupport.ts b/packages/editor-ui/src/plugins/codemirror/n8nLanguageSupport.ts
similarity index 87%
rename from packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguageSupport.ts
rename to packages/editor-ui/src/plugins/codemirror/n8nLanguageSupport.ts
index 8a3178aaae..c4eb1a75f0 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguageSupport.ts
+++ b/packages/editor-ui/src/plugins/codemirror/n8nLanguageSupport.ts
@@ -1,7 +1,7 @@
+import { parserWithMetaData as n8nParser } from 'codemirror-lang-n8n-expression';
import { LanguageSupport, LRLanguage } from '@codemirror/language';
import { parseMixed } from '@lezer/common';
import { parser as jsParser } from '@lezer/javascript';
-import { parserWithMetaData as n8nParser } from './n8nLanguagePack';
const parserWithNestedJsParser = n8nParser.configure({
wrap: parseMixed((node) => {
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/resolvable.completions.ts b/packages/editor-ui/src/plugins/codemirror/resolvable.completions.ts
similarity index 100%
rename from packages/editor-ui/src/components/ExpressionEditorModal/resolvable.completions.ts
rename to packages/editor-ui/src/plugins/codemirror/resolvable.completions.ts
diff --git a/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts b/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts
new file mode 100644
index 0000000000..489d637453
--- /dev/null
+++ b/packages/editor-ui/src/plugins/codemirror/resolvableHighlighter.ts
@@ -0,0 +1,131 @@
+import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
+import { StateField, StateEffect } from '@codemirror/state';
+import { tags } from '@lezer/highlight';
+import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
+
+import type { ColoringStateEffect, Plaintext, Resolvable, Resolved } from '@/types/expressions';
+
+const cssClasses = {
+ validResolvable: 'cm-valid-resolvable',
+ invalidResolvable: 'cm-invalid-resolvable',
+ brokenResolvable: 'cm-broken-resolvable',
+ plaintext: 'cm-plaintext',
+};
+
+const resolvablesTheme = EditorView.theme({
+ ['.' + cssClasses.validResolvable]: {
+ color: 'var(--color-valid-resolvable-foreground)',
+ backgroundColor: 'var(--color-valid-resolvable-background)',
+ },
+ ['.' + cssClasses.invalidResolvable]: {
+ color: 'var(--color-invalid-resolvable-foreground)',
+ backgroundColor: 'var(--color-invalid-resolvable-background)',
+ },
+});
+
+const marks = {
+ valid: Decoration.mark({ class: cssClasses.validResolvable }),
+ invalid: Decoration.mark({ class: cssClasses.invalidResolvable }),
+};
+
+const coloringStateEffects = {
+ addColorEffect: StateEffect.define
({
+ map: ({ from, to, kind, error }, change) => ({
+ from: change.mapPos(from),
+ to: change.mapPos(to),
+ kind,
+ error,
+ }),
+ }),
+ removeColorEffect: StateEffect.define({
+ map: ({ from, to }, change) => ({
+ from: change.mapPos(from),
+ to: change.mapPos(to),
+ }),
+ }),
+};
+
+const coloringStateField = StateField.define({
+ provide: (stateField) => EditorView.decorations.from(stateField),
+ create() {
+ return Decoration.none;
+ },
+ update(colorings, transaction) {
+ colorings = colorings.map(transaction.changes); // recalculate positions for new doc
+
+ for (const txEffect of transaction.effects) {
+ if (txEffect.is(coloringStateEffects.removeColorEffect)) {
+ colorings = colorings.update({
+ filter: (from, to) => txEffect.value.from !== from && txEffect.value.to !== to,
+ });
+ }
+
+ if (txEffect.is(coloringStateEffects.addColorEffect)) {
+ colorings = colorings.update({
+ filter: (from, to) => txEffect.value.from !== from && txEffect.value.to !== to,
+ });
+
+ const decoration = txEffect.value.error ? marks.invalid : marks.valid;
+
+ if (txEffect.value.from === 0 && txEffect.value.to === 0) continue;
+
+ colorings = colorings.update({
+ add: [decoration.range(txEffect.value.from, txEffect.value.to)],
+ });
+ }
+ }
+
+ return colorings;
+ },
+});
+
+function addColor(view: EditorView, segments: Array) {
+ const effects: Array> = segments.map(({ from, to, kind, error }) =>
+ coloringStateEffects.addColorEffect.of({ from, to, kind, error }),
+ );
+
+ if (effects.length === 0) return;
+
+ if (!view.state.field(coloringStateField, false)) {
+ effects.push(StateEffect.appendConfig.of([coloringStateField, resolvablesTheme]));
+ }
+
+ view.dispatch({ effects });
+}
+
+function removeColor(view: EditorView, segments: Plaintext[]) {
+ const effects: Array> = segments.map(({ from, to }) =>
+ coloringStateEffects.removeColorEffect.of({ from, to }),
+ );
+
+ if (effects.length === 0) return;
+
+ if (!view.state.field(coloringStateField, false)) {
+ effects.push(StateEffect.appendConfig.of([coloringStateField, resolvablesTheme]));
+ }
+
+ view.dispatch({ effects });
+}
+
+const resolvableStyle = syntaxHighlighting(
+ HighlightStyle.define([
+ {
+ tag: tags.content,
+ class: cssClasses.plaintext,
+ },
+ {
+ tag: tags.className,
+ class: cssClasses.brokenResolvable,
+ },
+ /**
+ * CSS classes for valid and invalid resolvables
+ * dynamically applied based on state fields
+ */
+ ]),
+);
+
+export const highlighter = {
+ addColor,
+ removeColor,
+ resolvableStyle,
+};
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index b850975f19..98a7aac391 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -859,6 +859,10 @@
"openWorkflow.workflowImportError": "Could not import workflow",
"openWorkflow.workflowNotFoundError": "Could not find workflow",
"parameterInput.expressionResult": "e.g. {result}",
+ "parameterInput.anythingInside": "Anything inside",
+ "parameterInput.isJavaScript": "is JavaScript.",
+ "parameterInput.learnMore": "Learn more",
+ "parameterInput.resultForItem": "Result for Item",
"parameterInput.emptyString": "[empty]",
"parameterInput.customApiCall": "Custom API Call",
"parameterInput.error": "ERROR",
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/types.ts b/packages/editor-ui/src/types/expressions.ts
similarity index 89%
rename from packages/editor-ui/src/components/ExpressionEditorModal/types.ts
rename to packages/editor-ui/src/types/expressions.ts
index 6abbb0857b..00efc61e34 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/types.ts
+++ b/packages/editor-ui/src/types/expressions.ts
@@ -18,7 +18,7 @@ export type Resolved = Resolvable;
export namespace ColoringStateEffect {
export type Value = {
- kind: 'plaintext' | 'resolvable';
- error: boolean;
+ kind?: 'plaintext' | 'resolvable';
+ error?: boolean;
} & Range;
}
diff --git a/packages/editor-ui/src/utils/telemetryUtils.ts b/packages/editor-ui/src/utils/telemetryUtils.ts
new file mode 100644
index 0000000000..9c0faaf4db
--- /dev/null
+++ b/packages/editor-ui/src/utils/telemetryUtils.ts
@@ -0,0 +1,80 @@
+import { hasExpressionMapping } from '@/utils';
+
+import type { Resolvable, Segment } from '@/types/expressions';
+
+export function createExpressionTelemetryPayload(
+ segments: Segment[],
+ value: string,
+ workflowId: string,
+ sessionId: string,
+ activeNodeType: string,
+ eventSource = 'ndv',
+) {
+ const resolvables = segments.filter((s): s is Resolvable => s.kind === 'resolvable');
+ const erroringResolvables = resolvables.filter((r) => r.error);
+
+ return {
+ empty_expression: value === '=' || value === '={{}}' || !value,
+ workflow_id: workflowId,
+ source: eventSource,
+ session_id: sessionId,
+ is_transforming_data: resolvables.some((r) => isTransformingData(r.resolvable)),
+ has_parameter: value.includes('$parameter'),
+ has_mapping: hasExpressionMapping(value),
+ node_type: activeNodeType,
+ handlebar_count: resolvables.length,
+ handlebar_error_count: erroringResolvables.length,
+ short_errors: erroringResolvables.map((r) => r.resolved ?? null),
+ full_errors: erroringResolvables.map((erroringResolvable) => {
+ if (!erroringResolvable.fullError) return null;
+
+ return {
+ ...exposeErrorProperties(erroringResolvable.fullError),
+ stack: erroringResolvable.fullError.stack,
+ };
+ }),
+ };
+}
+
+/**
+ * Whether the resolvable is transforming data from another node,
+ * i.e. operating on `$input()`, `$json`, `$()` or `$node[]`.
+ *
+ * ```
+ * $input.all().
+ * $input.first().
+ * $input.last().
+ *
+ * $json['field'].
+ * $json["field"].
+ * $json.field'.
+ *
+ * $('nodeName').all().
+ * $('nodeName').first().
+ * $('nodeName').last().
+ *
+ * $("nodeName").all().
+ * $("nodeName").first().
+ * $("nodeName").last().
+ *
+ * $node['nodeName'].all().
+ * $node['nodeName'].first().
+ * $node['nodeName'].last().
+ *
+ * $node["nodeName"].all().
+ * $node["nodeName"].first().
+ * $node["nodeName"].last().
+ * ```
+ */
+function isTransformingData(resolvable: string) {
+ const regex =
+ /(\$input\.\w+\(\)\.|\$json(\[('|")|\.)\w+('|")]?\.|\$\(('|")\w+('|")\)\.\w+\(\)\.|\$node\[('|")\w+('|")\]\.\w+\(\)\.)/;
+
+ return regex.test(resolvable);
+}
+
+function exposeErrorProperties(error: Error) {
+ return Object.getOwnPropertyNames(error).reduce>((acc, key) => {
+ return (acc[key] = error[key as keyof Error]), acc;
+ }, {});
+}
diff --git a/packages/workflow/src/Expression.ts b/packages/workflow/src/Expression.ts
index ee049e98af..e9fd930c9e 100644
--- a/packages/workflow/src/Expression.ts
+++ b/packages/workflow/src/Expression.ts
@@ -255,7 +255,7 @@ export class Expression {
const returnValue = this.renderExpression(parameterValue, data);
if (typeof returnValue === 'function') {
if (returnValue.name === '$') throw new Error('invalid syntax');
- throw new Error('Expression resolved to a function. Please add "()"');
+ throw new Error(`${returnValue.name} is a function. Please add ()`);
} else if (typeof returnValue === 'string') {
return returnValue;
} else if (returnValue !== null && typeof returnValue === 'object') {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f933ab9054..c032feebc1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -503,6 +503,7 @@ importers:
'@vitejs/plugin-vue2': ^1.1.2
axios: ^0.21.1
c8: ^7.12.0
+ codemirror-lang-n8n-expression: ^0.1.0
dateformat: ^3.0.3
esprima-next: 5.8.4
fast-json-stable-stringify: ^2.1.0
@@ -563,6 +564,7 @@ importers:
'@fortawesome/free-solid-svg-icons': 5.15.4
'@fortawesome/vue-fontawesome': 2.0.8_tc4irwwlc7tvswdic4b5cxexom
axios: 0.21.4
+ codemirror-lang-n8n-expression: 0.1.0_zyklskjzaprvz25ee7sq7godcq
dateformat: 3.0.3
esprima-next: 5.8.4
fast-json-stable-stringify: 2.1.0
@@ -8884,6 +8886,19 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /codemirror-lang-n8n-expression/0.1.0_zyklskjzaprvz25ee7sq7godcq:
+ resolution: {integrity: sha512-20ss5p0koTu5bfivr1sBHYs7cpjWT2JhVB5gn7TX9WWPt+v/9p9tEcYSOyL/sm+OFuWh698Cgnmrba4efQnMCQ==}
+ dependencies:
+ '@codemirror/autocomplete': 6.3.0_wo7q3lvweq5evsu423o7qzum5i
+ '@codemirror/language': 6.2.1
+ '@lezer/highlight': 1.1.1
+ '@lezer/lr': 1.2.3
+ transitivePeerDependencies:
+ - '@codemirror/state'
+ - '@codemirror/view'
+ - '@lezer/common'
+ dev: false
+
/codepage/1.15.0:
resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
engines: {node: '>=0.8'}