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
This commit is contained in:
Iván Ovejero 2022-12-01 13:26:22 +01:00 committed by GitHub
parent 830bda5f55
commit 59771c80ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 1043 additions and 637 deletions

View file

@ -0,0 +1,65 @@
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
const WorkflowPage = new WorkflowPageClass();
describe('Expression editor modal', () => {
before(() => {
cy.task('db:reset');
cy.skipSetup();
});
beforeEach(() => {
WorkflowPage.actions.visit();
WorkflowPage.actions.addInitialNodeToCanvas('Manual Trigger');
WorkflowPage.actions.addNodeToCanvas('Hacker News');
WorkflowPage.actions.openNodeNdv('Hacker News');
WorkflowPage.actions.openExpressionEditor();
});
it('should resolve primitive resolvables', () => {
WorkflowPage.getters.expressionModalInput().type('{{');
WorkflowPage.getters.expressionModalInput().type('1 + 2');
WorkflowPage.getters.expressionModalOutput().contains(/^3$/);
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{');
WorkflowPage.getters.expressionModalInput().type('"ab" + "cd"');
WorkflowPage.getters.expressionModalOutput().contains(/^abcd$/);
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{');
WorkflowPage.getters.expressionModalInput().type('true && false');
WorkflowPage.getters.expressionModalOutput().contains(/^false$/);
});
it('should resolve object resolvables', () => {
WorkflowPage.getters.expressionModalInput().type('{{');
WorkflowPage.getters.expressionModalInput().type('{{} a: 1');
WorkflowPage.getters.expressionModalOutput().contains(/^\[Object: \{"a":1\}\]$/);
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{');
WorkflowPage.getters.expressionModalInput().type('{{} a: 1 }.a{del}{del}');
WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
});
it('should resolve array resolvables', () => {
WorkflowPage.getters.expressionModalInput().type('{{');
WorkflowPage.getters.expressionModalInput().type('[1, 2, 3]');
WorkflowPage.getters.expressionModalOutput().contains(/^\[Array: \[1,2,3\]\]$/);
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{');
WorkflowPage.getters.expressionModalInput().type('[1, 2, 3][0]');
WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
});
it('should resolve $parameter[]', () => {
WorkflowPage.getters.expressionModalInput().type('{{');
WorkflowPage.getters.expressionModalInput().type('$parameter["operation"]');
WorkflowPage.getters.expressionModalOutput().contains(/^get$/);
});
});

View file

@ -27,6 +27,8 @@ export class WorkflowPage extends BasePage {
firstStepButton: () => cy.getByTestId('canvas-add-button'),
isWorkflowSaved: () => this.getters.saveButton().should('match', 'span'), // In Element UI, disabled button turn into spans 🤷‍♂️
isWorkflowActivated: () => this.getters.activatorSwitch().should('have.class', 'is-checked'),
expressionModalInput: () => cy.getByTestId('expression-modal-input'),
expressionModalOutput: () => cy.getByTestId('expression-modal-output'),
};
actions = {
visit: () => {
@ -47,6 +49,9 @@ export class WorkflowPage extends BasePage {
openNodeNdv: (nodeTypeName: string) => {
this.getters.canvasNodeByName(nodeTypeName).dblclick();
},
openExpressionEditor: () => {
cy.get('input[value="expression"]').parent('label').click();
},
typeIntoParameterInput: (parameterName: string, content: string) => {
this.getters.ndvParameterInput(parameterName).type(content);
},

View file

@ -6,7 +6,6 @@ FROM n8nio/base:${NODE_VERSION} as builder
COPY turbo.json package.json .npmrc pnpm-lock.yaml pnpm-workspace.yaml tsconfig.json ./
COPY scripts ./scripts
COPY packages ./packages
COPY patches ./patches
RUN corepack enable && corepack prepare --activate
RUN chown -R node:node .

View file

@ -57,10 +57,6 @@
"typescript": "^4.8.4"
},
"pnpm": {
"patchedDependencies": {
"quill@2.0.0-dev.4": "patches/quill@2.0.0-dev.4.patch",
"element-ui@2.15.12": "patches/element-ui@2.15.12.patch"
},
"onlyBuiltDependencies": [
"sqlite3",
"vue-demi"

View file

@ -391,6 +391,13 @@
--color-code-tags-variable: #c82829;
--color-code-tags-definition: #4271ae;
--color-expression-editor-background: #fff;
--color-valid-resolvable-foreground: #29a568;
--color-valid-resolvable-background: #e1f3d8;
--color-invalid-resolvable-foreground: #f45959;
--color-invalid-resolvable-background: #fef0f0;
--color-expression-syntax-example: #f0f0f0;
// Generated Color Shades from 50 to 950
// Not yet used in design system
@each $color in ('neutral', 'success', 'warning', 'danger') {

View file

@ -10,6 +10,8 @@ module.exports = {
extraFileExtensions: ['.vue'],
},
ignorePatterns: ['*.d.cts'],
rules: {
// TODO: Remove these
'id-denylist': 'off',

View file

@ -32,8 +32,8 @@
"@codemirror/lang-javascript": "^6.0.2",
"@codemirror/language": "^6.2.1",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.1.1",
"@codemirror/view": "^6.2.1",
"@codemirror/state": "^6.1.4",
"@codemirror/view": "^6.5.1",
"@fontsource/open-sans": "^4.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
@ -61,8 +61,6 @@
"normalize-wheel": "^1.0.1",
"pinia": "^2.0.22",
"prismjs": "^1.17.1",
"quill": "2.0.0-dev.4",
"quill-autoformat": "^0.1.1",
"timeago.js": "^4.0.2",
"uuid": "^8.3.2",
"v-click-outside": "^3.1.2",
@ -92,7 +90,6 @@
"@types/lodash.get": "^4.4.6",
"@types/lodash.set": "^4.3.6",
"@types/luxon": "^2.0.9",
"@types/quill": "^2.0.1",
"@types/uuid": "^8.3.2",
"@vitejs/plugin-legacy": "^1.8.2",
"@vitejs/plugin-vue2": "^1.1.2",

View file

@ -19,19 +19,43 @@
<el-col :span="16" class="right-side">
<div class="expression-editor-wrapper">
<div class="editor-description">
<div>
{{ $locale.baseText('expressionEdit.expression') }}
</div>
<div class="hint">
<span>
{{ $locale.baseText('expressionEdit.anythingInside') }}
</span>
<div class="expression-syntax-example" v-text="`{{ }}`"></div>
<span>
{{ $locale.baseText('expressionEdit.isJavaScript') }}
</span>
<n8n-link size="medium" :to="expressionsDocsUrl">
{{ $locale.baseText('expressionEdit.learnMore') }}
</n8n-link>
</div>
</div>
<div class="expression-editor ph-no-capture">
<expression-input :parameter="parameter" ref="inputFieldExpression" rows="8" :value="value" :path="path" @change="valueChanged" @keydown.stop="noOp"></expression-input>
<expression-modal-input
:value="value"
:isReadOnly="isReadOnly"
@change="valueChanged"
ref="inputFieldExpression"
data-test-id="expression-modal-input"
/>
</div>
</div>
<div class="expression-result-wrapper">
<div class="editor-description">
{{ $locale.baseText('expressionEdit.result') }}
{{ $locale.baseText('expressionEdit.resultOfItem1') }}
</div>
<div class="ph-no-capture">
<expression-input :parameter="parameter" resolvedValue="true" ref="expressionResult" rows="8" :value="displayValue" :path="path"></expression-input>
<expression-modal-output
:segments="segments"
ref="expressionResult"
data-test-id="expression-modal-output"
/>
</div>
</div>
@ -43,7 +67,8 @@
</template>
<script lang="ts">
import ExpressionInput from '@/components/ExpressionInput.vue';
import ExpressionModalInput from '@/components/ExpressionEditorModal/ExpressionModalInput.vue';
import ExpressionModalOutput from '@/components/ExpressionEditorModal/ExpressionModalOutput.vue';
import VariableSelector from '@/components/VariableSelector.vue';
import { IVariableItemSelected } from '@/Interface';
@ -51,6 +76,8 @@ import { IVariableItemSelected } from '@/Interface';
import { externalHooks } from '@/mixins/externalHooks';
import { genericHelpers } from '@/mixins/genericHelpers';
import { EXPRESSIONS_DOCS_URL } from '@/constants';
import mixins from 'vue-typed-mixins';
import { hasExpressionMapping } from '@/utils';
import { debounceHelper } from '@/mixins/debounce';
@ -58,6 +85,8 @@ import { mapStores } from 'pinia';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNDVStore } from '@/stores/ndv';
import type { Resolvable, Segment } from './ExpressionEditorModal/types';
export default mixins(
externalHooks,
genericHelpers,
@ -70,15 +99,19 @@ export default mixins(
'path',
'value',
'eventSource',
'isReadOnly',
],
components: {
ExpressionInput,
ExpressionModalInput,
ExpressionModalOutput,
VariableSelector,
},
data () {
return {
displayValue: '',
latestValue: '',
segments: [] as Segment[],
expressionsDocsUrl: EXPRESSIONS_DOCS_URL,
};
},
computed: {
@ -88,8 +121,9 @@ export default mixins(
),
},
methods: {
valueChanged (value: string, forceUpdate = false) {
valueChanged ({ value, segments }: { value: string, segments: Segment[] }, forceUpdate = false) {
this.latestValue = value;
this.segments = segments;
if (forceUpdate === true) {
this.updateDisplayValue();
@ -180,6 +214,16 @@ export default mixins(
this.$externalHooks().run('expressionEdit.dialogVisibleChanged', { dialogVisible: newValue, parameter: this.parameter, value: this.value, resolvedExpressionValue });
if (!newValue) {
const resolvables = this.segments.filter((s): s is Resolvable => s.kind === 'resolvable');
const errorResolvables = resolvables.filter(r => r.error);
const exposeErrorProperties = (error: Error) => {
return Object.getOwnPropertyNames(error).reduce<Record<string, unknown>>((acc, key) => {
// @ts-ignore
return acc[key] = error[key], acc;
}, {});
};
const telemetryPayload = {
empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value,
workflow_id: this.workflowsStore.workflowId,
@ -187,7 +231,17 @@ export default mixins(
session_id: this.ndvStore.sessionId,
has_parameter: this.value.includes('$parameter'),
has_mapping: hasExpressionMapping(this.value),
node_type: this.ndvStore.activeNode?.type ?? '',
handlebar_count: resolvables.length,
handlebar_error_count: errorResolvables.length,
full_errors: errorResolvables.map(errorResolvable => {
return errorResolvable.fullError
? { ...exposeErrorProperties(errorResolvable.fullError), stack: errorResolvable.fullError.stack }
: null;
}),
short_errors: errorResolvables.map(r => r.resolved ?? null),
};
this.$telemetry.track('User closed Expression Editor', telemetryPayload);
this.$externalHooks().run('expressionEdit.closeDialog', telemetryPayload);
}
@ -200,7 +254,32 @@ export default mixins(
.editor-description {
line-height: 1.5;
font-weight: bold;
padding: 0 0 0.5em 0.2em;;
padding: 0 0 0.5em 0.2em;
display: flex;
justify-content: space-between;
.hint {
color: var(--color-text-base);
font-weight: normal;
display: flex;
@media (max-width: $breakpoint-xs) {
display: none;
}
span {
margin-right: var(--spacing-4xs);
}
.expression-syntax-example {
display: inline-block;
margin-top: 3px;
height: 16px;
line-height: 1;
background-color: var(--color-expression-syntax-example);
color: var(--color-text-dark);
margin-right: var(--spacing-4xs);
}
}
}
.expression-result-wrapper,

View file

@ -0,0 +1,281 @@
<template>
<div ref="root" class="ph-no-capture" />
</template>
<script lang="ts">
import mixins from 'vue-typed-mixins';
import { mapStores } from 'pinia';
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { history } from '@codemirror/commands';
import { syntaxTree } from '@codemirror/language';
import { workflowHelpers } from '@/mixins/workflowHelpers';
import { useNDVStore } from '@/stores/ndv';
import { n8nLanguageSupport } from './n8nLanguageSupport';
import { braceHandler } from './braceHandler';
import { EXPRESSION_EDITOR_THEME } from './theme';
import { addColor, removeColor } from './colorDecorations';
import type { IVariableItemSelected } from '@/Interface';
import type { RawSegment, Segment, Resolvable, Plaintext } from './types';
const EVALUATION_DELAY = 300; // ms
export default mixins(workflowHelpers).extend({
name: 'expression-modal-input',
props: {
value: {
type: String,
},
isReadOnly: {
type: Boolean,
},
},
data() {
return {
editor: null as EditorView | null,
errorsInSuccession: 0,
};
},
mounted() {
const extensions = [
EXPRESSION_EDITOR_THEME,
n8nLanguageSupport(),
history(),
braceHandler(),
EditorView.lineWrapping,
EditorState.readOnly.of(this.isReadOnly),
EditorView.updateListener.of((viewUpdate) => {
if (!this.editor || !viewUpdate.docChanged) return;
removeColor(this.editor, this.plaintextSegments);
addColor(this.editor, this.resolvableSegments);
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 = EVALUATION_DELAY;
if (addsNewError && this.errorsInSuccession > 1 && this.errorsInSuccession < 5) {
delay = EVALUATION_DELAY * this.errorsInSuccession;
} else if (addsNewError && this.errorsInSuccession >= 5) {
delay = 0;
}
setTimeout(() => this.editor?.focus()); // prevent blur on paste
setTimeout(() => {
this.$emit('change', {
value: this.unresolvedExpression,
segments: this.displayableSegments,
});
}, delay);
}),
];
this.editor = new EditorView({
parent: this.$refs.root as HTMLDivElement,
state: EditorState.create({
doc: this.value.startsWith('=') ? this.value.slice(1) : this.value,
extensions,
}),
});
this.editor.focus();
addColor(this.editor, this.resolvableSegments);
this.editor.dispatch({
selection: { anchor: this.editor.state.doc.length },
});
this.$emit('change', { value: this.unresolvedExpression, segments: this.displayableSegments });
},
destroyed() {
this.editor?.destroy();
},
computed: {
...mapStores(useNDVStore),
unresolvedExpression(): string {
return this.segments.reduce((acc, segment) => {
acc += segment.kind === 'resolvable' ? segment.resolvable : segment.plaintext;
return acc;
}, '=');
},
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');
},
/**
* Some segments are conditionally displayed, i.e. not displayed when part of the
* expression result but displayed when 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`)
*
* For these two segments, display differs based on context:
* - Date 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 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;
});
},
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);
acc.push({ kind: 'resolvable', from, to, resolvable: text, resolved, error, fullError });
return acc;
}
// broken resolvable included in plaintext
acc.push({ kind: 'plaintext', from, to, plaintext: text });
return acc;
}, []);
},
},
methods: {
isEmptyExpression(resolvable: string) {
return /\{\{\s*\}\}/.test(resolvable);
},
resolve(resolvable: string) {
const result: { resolved: unknown; error: boolean; fullError: Error | null } = {
resolved: undefined,
error: false,
fullError: null,
};
try {
result.resolved = this.resolveExpression('=' + resolvable, 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;
},
itemSelected({ variable }: IVariableItemSelected) {
if (!this.editor || this.isReadOnly) return;
const OPEN_MARKER = '{{';
const CLOSE_MARKER = '}}';
const { doc, selection } = this.editor.state;
const { head } = selection.main;
const beforeBraced = doc.toString().slice(0, head).includes(OPEN_MARKER);
const afterBraced = doc.toString().slice(head, doc.length).includes(CLOSE_MARKER);
this.editor.dispatch({
changes: {
from: head,
insert:
beforeBraced && afterBraced
? variable
: [OPEN_MARKER, variable, CLOSE_MARKER].join(' '),
},
});
},
},
});
</script>
<style lang="scss"></style>

View file

@ -0,0 +1,94 @@
<template>
<div ref="root" class="ph-no-capture" />
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { EXPRESSION_EDITOR_THEME } from './theme';
import { addColor, removeColor } from './colorDecorations';
import type { Plaintext, Resolved, Segment } from './types';
export default Vue.extend({
name: 'expression-modal-output',
props: {
segments: {
type: Array as PropType<Segment[]>,
},
},
watch: {
segments() {
if (!this.editor) return;
this.editor.dispatch({
changes: { from: 0, to: this.editor.state.doc.length, insert: this.resolvedExpression },
});
addColor(this.editor, this.resolvedSegments);
removeColor(this.editor, this.plaintextSegments);
},
},
data() {
return {
editor: null as EditorView | null,
};
},
mounted() {
const extensions = [
EXPRESSION_EDITOR_THEME,
EditorState.readOnly.of(true),
EditorView.lineWrapping,
];
this.editor = new EditorView({
parent: this.$refs.root as HTMLDivElement,
state: EditorState.create({
doc: this.resolvedExpression,
extensions,
}),
});
},
destroyed() {
this.editor?.destroy();
},
computed: {
resolvedExpression(): string {
return this.segments.reduce((acc, segment) => {
acc += segment.kind === 'resolvable' ? segment.resolved : segment.plaintext;
return acc;
}, '');
},
plaintextSegments(): Plaintext[] {
return this.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
},
resolvedSegments(): Resolved[] {
let cursor = 0;
return this.segments
.map((segment) => {
segment.from = cursor;
cursor +=
segment.kind === 'plaintext'
? segment.plaintext.length
: (segment.resolved as any).toString().length;
segment.to = cursor;
return segment;
})
.filter((segment): segment is Resolved => segment.kind === 'resolvable');
},
},
methods: {
getValue() {
return '=' + this.resolvedExpression;
},
},
});
</script>
<style lang="scss"></style>

View file

@ -0,0 +1,57 @@
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) => {
if (view.composing || view.state.readOnly) return false;
const selection = view.state.selection.main;
if (
insert.length > 2 ||
(insert.length === 2 && codePointSize(codePointAt(insert, 0)) === 1) ||
from !== selection.from ||
to !== selection.to
) {
return false;
}
const transaction = insertBracket(view.state, insert);
if (!transaction) return false;
view.dispatch(transaction);
// customization to rearrange spacing and cursor for expression
const cursor = view.state.selection.main.head;
const isSecondBraceForNewExpression =
view.state.sliceDoc(cursor - 2, cursor) === '{{' &&
view.state.sliceDoc(cursor, cursor + 1) === '}';
if (isSecondBraceForNewExpression) {
view.dispatch({
changes: { from: cursor, to: cursor + 2, insert: ' }' },
selection: { anchor: cursor + 1 },
});
return true;
}
const isFirstBraceForNewExpression =
view.state.sliceDoc(cursor - 1, cursor) === '{' &&
view.state.sliceDoc(cursor, cursor + 1) === '}';
if (isFirstBraceForNewExpression) {
view.dispatch({ changes: { from: cursor, insert: ' ' } });
return true;
}
return true;
});
const [_, bracketState] = closeBrackets() as readonly Extension[];
export const braceHandler = () => [braceInputHandler, bracketState];

View file

@ -0,0 +1,94 @@
import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
import { StateField, StateEffect } from '@codemirror/state';
import { DYNAMICALLY_STYLED_RESOLVABLES_THEME, SYNTAX_HIGHLIGHTING_CLASSES } from './theme';
import type { ColoringStateEffect, Plaintext, Resolvable, Resolved } from './types';
const stateEffects = {
addColor: StateEffect.define<ColoringStateEffect.Value>({
map: ({ from, to, kind, error }, change) => ({
from: change.mapPos(from),
to: change.mapPos(to),
kind,
error,
}),
}),
removeColor: StateEffect.define<{ from: number; to: number }>({
map: ({ from, to }, change) => ({
from: change.mapPos(from),
to: change.mapPos(to),
}),
}),
};
const marks = {
valid: Decoration.mark({ class: SYNTAX_HIGHLIGHTING_CLASSES.validResolvable }),
invalid: Decoration.mark({ class: SYNTAX_HIGHLIGHTING_CLASSES.invalidResolvable }),
};
const coloringField = StateField.define<DecorationSet>({
provide: (stateField) => EditorView.decorations.from(stateField),
create() {
return Decoration.none;
},
update(colorings, transaction) {
colorings = colorings.map(transaction.changes);
for (const txEffect of transaction.effects) {
if (txEffect.is(stateEffects.removeColor)) {
colorings = colorings.update({
filter: (from, to) => txEffect.value.from !== from && txEffect.value.to !== to,
});
}
if (txEffect.is(stateEffects.addColor)) {
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;
},
});
export function addColor(view: EditorView, segments: Array<Resolvable | Resolved>) {
const effects: Array<StateEffect<unknown>> = segments.map(({ from, to, kind, error }) =>
stateEffects.addColor.of({ from, to, kind, error }),
);
if (effects.length === 0) return;
if (!view.state.field(coloringField, false)) {
effects.push(
StateEffect.appendConfig.of([coloringField, DYNAMICALLY_STYLED_RESOLVABLES_THEME]),
);
}
view.dispatch({ effects });
}
export function removeColor(view: EditorView, segments: Plaintext[]) {
const effects: Array<StateEffect<unknown>> = segments.map(({ from, to }) =>
stateEffects.removeColor.of({ from, to }),
);
if (effects.length === 0) return;
if (!view.state.field(coloringField, false)) {
effects.push(
StateEffect.appendConfig.of([coloringField, DYNAMICALLY_STYLED_RESOLVABLES_THEME]),
);
}
view.dispatch({ effects });
}

View file

@ -0,0 +1,57 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var autocomplete = require('@codemirror/autocomplete');
var lr = require('@lezer/lr');
var language = require('@codemirror/language');
var highlight = require('@lezer/highlight');
// This file was generated by lezer-generator. You probably shouldn't edit it.
const parser = lr.LRParser.deserialize({
version: 14,
states: "nQQOPOOOOOO'#Cc'#CcOOOO'#Ca'#CaQQOPOOOOOO-E6_-E6_",
stateData: "]~OQPORPOSPO~O",
goto: "cWPPPPPXP_QRORSRTQOR",
nodeNames: "⚠ Program Plaintext Resolvable BrokenResolvable",
maxTerm: 7,
skippedNodes: [0],
repeatNodeCount: 1,
tokenData: "4f~RRO#o[#o#p{#p~[~aRQ~O#o[#o#pj#p~[~mRO#o[#p~[~~v~{OQ~~!OSO#o[#o#p![#p~[~~v~!a!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r4W#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~&URS~O#q&P#q#r&_#r~&P~&dOS~~&i!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r*X#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~*^RS~O#q*g#q#r0s#r~*g~*j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~-j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r0g#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~0jRO#q*g#q#r0s#r~*g~0x}R~X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~3xRO#q*g#q#r4R#r~*g~4WOR~~4]RS~O#q*g#q#r4R#r~*g",
tokenizers: [0],
topRules: {"Program":[0,1]},
tokenPrec: 0
});
const parserWithMetaData = parser.configure({
props: [
language.foldNodeProp.add({
Application: language.foldInside,
}),
highlight.styleTags({
OpenMarker: highlight.tags.brace,
CloseMarker: highlight.tags.brace,
Plaintext: highlight.tags.content,
Resolvable: highlight.tags.string,
BrokenResolvable: highlight.tags.className,
}),
],
});
const n8nExpressionLanguage = language.LRLanguage.define({
parser: parserWithMetaData,
languageData: {
commentTokens: { line: ";" },
},
});
const completions = n8nExpressionLanguage.data.of({
autocomplete: autocomplete.completeFromList([
{ label: "abcdefg", type: "keyword" },
]),
});
function n8nExpression() {
return new language.LanguageSupport(n8nExpressionLanguage, [completions]);
}
exports.n8nExpression = n8nExpression;
exports.n8nExpressionLanguage = n8nExpressionLanguage;
exports.parserWithMetaData = parserWithMetaData;

View file

@ -0,0 +1,5 @@
import { LRLanguage, LanguageSupport } from "@codemirror/language";
declare const parserWithMetaData: import("@lezer/lr").LRParser;
declare const n8nExpressionLanguage: LRLanguage;
declare function n8nExpression(): LanguageSupport;
export { parserWithMetaData, n8nExpressionLanguage, n8nExpression };

View file

@ -0,0 +1,5 @@
import { LRLanguage, LanguageSupport } from "@codemirror/language";
declare const parserWithMetaData: import("@lezer/lr").LRParser;
declare const n8nExpressionLanguage: LRLanguage;
declare function n8nExpression(): LanguageSupport;
export { parserWithMetaData, n8nExpressionLanguage, n8nExpression };

View file

@ -0,0 +1,51 @@
import { completeFromList } from '@codemirror/autocomplete';
import { LRParser } from '@lezer/lr';
import { foldNodeProp, foldInside, LRLanguage, LanguageSupport } from '@codemirror/language';
import { styleTags, tags } from '@lezer/highlight';
// This file was generated by lezer-generator. You probably shouldn't edit it.
const parser = LRParser.deserialize({
version: 14,
states: "nQQOPOOOOOO'#Cc'#CcOOOO'#Ca'#CaQQOPOOOOOO-E6_-E6_",
stateData: "]~OQPORPOSPO~O",
goto: "cWPPPPPXP_QRORSRTQOR",
nodeNames: "⚠ Program Plaintext Resolvable BrokenResolvable",
maxTerm: 7,
skippedNodes: [0],
repeatNodeCount: 1,
tokenData: "4f~RRO#o[#o#p{#p~[~aRQ~O#o[#o#pj#p~[~mRO#o[#p~[~~v~{OQ~~!OSO#o[#o#p![#p~[~~v~!a!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r4W#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~&URS~O#q&P#q#r&_#r~&P~&dOS~~&i!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r*X#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~*^RS~O#q*g#q#r0s#r~*g~*j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~-j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r0g#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~0jRO#q*g#q#r0s#r~*g~0x}R~X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~3xRO#q*g#q#r4R#r~*g~4WOR~~4]RS~O#q*g#q#r4R#r~*g",
tokenizers: [0],
topRules: {"Program":[0,1]},
tokenPrec: 0
});
const parserWithMetaData = parser.configure({
props: [
foldNodeProp.add({
Application: foldInside,
}),
styleTags({
OpenMarker: tags.brace,
CloseMarker: tags.brace,
Plaintext: tags.content,
Resolvable: tags.string,
BrokenResolvable: tags.className,
}),
],
});
const n8nExpressionLanguage = LRLanguage.define({
parser: parserWithMetaData,
languageData: {
commentTokens: { line: ";" },
},
});
const completions = n8nExpressionLanguage.data.of({
autocomplete: completeFromList([
{ label: "abcdefg", type: "keyword" },
]),
});
function n8nExpression() {
return new LanguageSupport(n8nExpressionLanguage, [completions]);
}
export { n8nExpression, n8nExpressionLanguage, parserWithMetaData };

View file

@ -0,0 +1,20 @@
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) => {
if (node.type.isTop) return null;
return node.name === 'Resolvable'
? { parser: jsParser, overlay: (node) => node.type.name === 'Resolvable' }
: null;
}),
});
const n8nLanguage = LRLanguage.define({ parser: parserWithNestedJsParser });
export function n8nLanguageSupport() {
return new LanguageSupport(n8nLanguage);
}

View file

@ -0,0 +1,33 @@
import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import { syntaxTree } from '@codemirror/language';
/**
* Completions available inside the resolvable segment `{{ ... }}` of an n8n expression.
*
* Currently unused.
*/
export function resolvableCompletions(context: CompletionContext): CompletionResult | null {
const nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
if (nodeBefore.name !== 'Resolvable') return null;
const pattern = /(?<quotedString>('|")\w*('|"))\./;
const preCursor = context.matchBefore(pattern);
if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
const match = preCursor.text.match(pattern);
if (!match?.groups?.quotedString) return null;
const { quotedString } = match.groups;
return {
from: preCursor.from,
options: [
{ label: `${quotedString}.replace()`, info: 'Replace part of a string with another' },
{ label: `${quotedString}.slice()`, info: 'Copy part of a string' },
],
};
}

View file

@ -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)',
},
});

View file

@ -0,0 +1,24 @@
type Range = { from: number; to: number };
export type RawSegment = { text: string; type: string } & Range;
export type Segment = Plaintext | Resolvable;
export type Plaintext = { kind: 'plaintext'; plaintext: string } & Range;
export type Resolvable = {
kind: 'resolvable';
resolvable: string;
resolved: unknown;
error: boolean;
fullError: Error | null;
} & Range;
export type Resolved = Resolvable;
export namespace ColoringStateEffect {
export type Value = {
kind: 'plaintext' | 'resolvable';
error: boolean;
} & Range;
}

View file

@ -1,373 +0,0 @@
<template>
<div>
<div ref="expression-editor" :style="editorStyle" class="ignore-key-press" @keydown.stop></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import 'quill/dist/quill.core.css';
// @ts-ignore
import Quill from 'quill';
import DeltaOperation from 'quill-delta';
// @ts-ignore
import AutoFormat from 'quill-autoformat';
import {
NodeParameterValue,
Workflow,
} from 'n8n-workflow';
import {
IVariableItemSelected,
} from '@/Interface';
import { genericHelpers } from '@/mixins/genericHelpers';
import { workflowHelpers } from '@/mixins/workflowHelpers';
import mixins from 'vue-typed-mixins';
export default mixins(
genericHelpers,
workflowHelpers,
)
.extend({
name: 'ExpressionInput',
props: [
'rows',
'value',
'parameter',
'path',
'resolvedValue',
],
data () {
return {
editor: null as null | Quill,
};
},
computed: {
editorStyle () {
let rows = 1;
if (this.rows) {
rows = parseInt(this.rows, 10);
}
return {
'height': Math.max((rows * 26 + 10), 40) + 'px',
};
},
workflow (): Workflow {
return this.getCurrentWorkflow();
},
},
watch: {
value () {
if (this.resolvedValue) {
// When resolved value gets displayed update the input automatically
this.initValue();
}
},
},
mounted () {
const that = this;
// tslint:disable-next-line
const Inline = Quill.import('blots/inline');
class VariableField extends Inline {
static create (value: string) {
const node = super.create(value);
node.setAttribute('data-value', value);
node.setAttribute('class', 'variable');
return node;
}
static formats (domNode: HTMLElement) {
// For the not resolved one the value can be read directly from the dom
let variableName = domNode.innerHTML.trim();
if (that.resolvedValue) {
// For the resolve done it has to get the one from creation.
// It will not update on change but because the init runs on every change it does not really matter
variableName = domNode.getAttribute('data-value') as string;
}
const newClasses = that.getPlaceholderClasses(variableName);
if (domNode.getAttribute('class') !== newClasses) {
// Only update when it changed else we get an endless loop!
domNode.setAttribute('class', newClasses);
}
return true;
}
}
// @ts-ignore
VariableField.blotName = 'variable';
// @ts-ignore
VariableField.className = 'variable';
// @ts-ignore
VariableField.tagName = 'span';
AutoFormat.DEFAULTS = {
expression: {
trigger: /\B[\w\s]/,
find: /\{\{[^\s,;:!?}]+\}\}/i,
format: 'variable',
},
};
Quill.register({
'modules/autoformat': AutoFormat,
'formats/variable': VariableField,
});
this.editor = new Quill(this.$refs['expression-editor'] as Element, {
readOnly: !!this.resolvedValue || this.isReadOnly,
modules: {
autoformat: {},
keyboard: {
bindings: {
'list autofill': null,
},
},
},
});
this.editor.root.addEventListener('blur', (event: Event) => {
this.$emit('blur', event);
});
this.initValue();
if (!this.resolvedValue) {
// Only call update when not resolved value gets displayed
this.setFocus();
this.editor.on('text-change', () => this.update());
}
},
methods: {
// ------------------------------- EDITOR -------------------------------
customizeVariable (variableName: string) {
const returnData = {
classes: [] as string[],
message: variableName as string,
};
let value;
try {
value = this.resolveExpression(`=${variableName}`);
if (value !== undefined) {
returnData.classes.push('valid');
} else {
returnData.classes.push('invalid');
}
} catch (e) {
returnData.classes.push('invalid');
}
return returnData;
},
// Resolves the given variable. If it is not valid it will return
// an error-string.
resolveParameterString (variableName: string) {
let returnValue;
try {
returnValue = this.resolveExpression(`=${variableName}`);
} catch (error) {
return `[invalid (${error.message})]`;
}
if (returnValue === undefined) {
return '[not found]';
}
return returnValue;
},
getPlaceholderClasses (variableName: string) {
const customizeData = this.customizeVariable(variableName);
return 'variable ' + customizeData.classes.join(' ');
},
getValue () {
if (!this.editor) {
return '';
}
const content = this.editor.getContents();
if (!content || !content.ops) {
return '';
}
let returnValue = '';
// Convert the editor operations into a string
content.ops.forEach((item: DeltaOperation) => {
if (!item.insert) {
return;
}
returnValue += item.insert;
});
// For some unknown reason does the Quill always return a "\n"
// at the end. Remove it here manually
return '=' + returnValue.replace(/\s+$/g, '');
},
setFocus () {
// TODO: There is a bug that when opening ExpressionEditor and typing directly it shows the first letter and
// then adds the second letter in from of the first on
this.editor!.focus();
},
itemSelected (eventData: IVariableItemSelected) {
// We can only get the selection if editor is in focus so make
// sure it is
this.editor!.focus();
const selection = this.editor!.getSelection();
let addIndex = null;
if (selection) {
addIndex = selection.index;
}
if (addIndex) {
// If we have a location to add variable to add it there
this.editor!.insertText(addIndex, `{{${eventData.variable}}}`, 'variable', true);
this.update();
} else {
// If no position got found add it to end
let newValue = this.getValue();
if (newValue === '=' || newValue === '=0') {
newValue = `{{${eventData.variable}}}\n`;
} else {
newValue += ` {{${eventData.variable}}}\n`;
}
this.$emit('change', newValue, true);
if (!this.resolvedValue) {
Vue.nextTick(() => {
this.initValue();
});
}
}
},
initValue () {
if (!this.value) {
return;
}
let currentValue = this.value;
if (currentValue.charAt(0) === '=') {
currentValue = currentValue.slice(1);
}
// Convert the expression string into a Quill Operations
const editorOperations: DeltaOperation[] = [];
currentValue.replace(/\{\{(.*?)\}\}/ig, '*%%#_@^$1*%%#_@').split('*%%#_@').forEach((value: string) => {
if (value && value.charAt(0) === '^') {
// Is variable
let displayValue = `{{${value.slice(1)}}}` as string | number | boolean | null | undefined;
if (this.resolvedValue) {
displayValue = [null, undefined].includes(displayValue as null | undefined) ? '' : displayValue;
displayValue = this.resolveParameterString((displayValue as string).toString()) as NodeParameterValue;
}
displayValue = [null, undefined].includes(displayValue as null | undefined) ? '' : displayValue;
editorOperations.push({
attributes: {
variable: `{{${value.slice(1)}}}`,
},
insert: (displayValue as string).toString(),
});
} else {
// Is text
editorOperations.push({
insert: value,
});
}
});
// @ts-ignore
this.editor!.setContents(editorOperations);
},
update () {
this.$emit('input', this.getValue());
this.$emit('change', this.getValue());
},
},
});
</script>
<style lang="scss">
.variable-wrapper {
text-decoration: none;
}
.variable-value {
font-weight: bold;
color: var(--color-text-dark);
background-color: var(--color-text-base);
padding: 3px;
border-radius: 3px;
}
.variable-delete {
position: relative;
left: -3px;
top: -8px;
display: none;
color: var(--color-text-xlight);
font-weight: bold;
padding: 2px 4px;
}
.variable-wrapper:hover .variable-delete {
display: inline;
background-color: var(--color-danger);
border-radius: 5px;
}
.variable {
font-weight: bold;
color: #000;
background-color: var(--color-text-base);
padding: 3px;
border-radius: 3px;
margin: 0 2px;
&:first-child {
margin-left: 0;
}
&.invalid {
background-color: var(--color-danger);
}
&.valid {
background-color: var(--color-success);
}
}
.ql-editor {
padding: 0.5em 1em;
}
.ql-disabled .ql-editor {
border-width: 1px;
border: 1px solid $custom-expression-text;
color: $custom-expression-text;
background-color: $custom-expression-background;
cursor: not-allowed;
}
.ql-disabled .ql-editor .variable {
color: #303030;
}
</style>

View file

@ -6,6 +6,7 @@
:parameter="parameter"
:path="path"
:eventSource="eventSource || 'ndv'"
:isReadOnly="isReadOnly"
@closeDialog="closeExpressionEditDialog"
@valueChanged="expressionUpdated"
></expression-edit>

View file

@ -157,25 +157,16 @@ export default mixins(
computedValue = this.$locale.baseText('parameterInput.emptyString');
}
} catch (error) {
computedValue = `[${this.$locale.baseText('parameterInput.error')}}: ${error.message}]`;
computedValue = `[${this.$locale.baseText('parameterInput.error')}: ${error.message}]`;
}
return typeof computedValue === 'string' ? computedValue : JSON.stringify(computedValue);
},
expressionOutput(): string | null {
if (this.isValueExpression && this.expressionValueComputed) {
const inputData = this.ndvStore.ndvInputData;
if (!inputData || (inputData && inputData.length <= 1)) {
return this.expressionValueComputed;
}
return this.$locale.baseText(`parameterInput.expressionResult`, {
interpolate: {
result: this.expressionValueComputed,
},
});
}
return null;
},
},

View file

@ -537,13 +537,15 @@ export default mixins(
if (parentNode.length) {
// If the node has an input node add the input data
const activeInputParentNode = parentNode.find(node => node === this.ndvStore.ndvInputNodeName)!;
// Check from which output to read the data.
// Depends on how the nodes are connected.
// (example "IF" node. If node is connected to "true" or to "false" output)
const nodeConnection = this.workflow.getNodeConnectionIndexes(activeNode.name, parentNode[0], 'main');
const nodeConnection = this.workflow.getNodeConnectionIndexes(activeNode.name, activeInputParentNode, 'main');
const outputIndex = nodeConnection === undefined ? 0: nodeConnection.sourceIndex;
tempOutputData = this.getNodeRunDataOutput(parentNode[0], runData, filterText, itemIndex, 0, 'main', outputIndex, true) as IVariableSelectorOption[];
tempOutputData = this.getNodeRunDataOutput(activeInputParentNode, runData, filterText, itemIndex, 0, 'main', outputIndex, true) as IVariableSelectorOption[];
const pinDataOptions: IVariableSelectorOption[] = [
{

View file

@ -53,6 +53,20 @@ export default mixins(externalHooks).extend({
'extendAll',
'item',
],
mounted() {
if (this.extended) return;
const shouldAutoExtend = [
this.$locale.baseText('variableSelectorItem.currentNode'),
this.$locale.baseText('variableSelectorItem.inputData'),
this.$locale.baseText('variableSelectorItem.binary'),
this.$locale.baseText('variableSelectorItem.json'),
].includes(this.item.name) && this.item.key === undefined;
if (shouldAutoExtend) {
this.extended = true;
}
},
computed: {
itemAddOperations () {
const returnOptions = [

View file

@ -69,7 +69,7 @@ export const COMMUNITY_NODES_NPM_INSTALLATION_URL = 'https://docs.npmjs.com/down
export const COMMUNITY_NODES_RISKS_DOCS_URL = `https://docs.n8n.io/integrations/community-nodes/risks/`;
export const COMMUNITY_NODES_BLOCKLIST_DOCS_URL = `https://docs.n8n.io/integrations/community-nodes/blocklist/`;
export const CUSTOM_NODES_DOCS_URL = `https://docs.n8n.io/integrations/creating-nodes/code/create-n8n-nodes-module/`;
export const EXPRESSIONS_DOCS_URL = 'https://docs.n8n.io/code-examples/expressions/';
// node types
export const BAMBOO_HR_NODE_TYPE = 'n8n-nodes-base.bambooHr';

View file

@ -845,6 +845,7 @@ export const workflowHelpers = mixins(
this.uiStore.stateIsDirty = false;
this.$externalHooks().run('workflow.afterUpdate', { workflowData });
this.getCurrentWorkflow(true); // refresh cache
return true;
} catch (e) {
this.uiStore.removeActiveAction('workflowSaving');

View file

@ -479,10 +479,16 @@
"executionSidebar.searchPlaceholder": "Search executions...",
"executionView.onPaste.title": "Cannot paste here",
"executionView.onPaste.message": "This view is read-only. Switch to <i>Workflow</i> tab to be able to edit the current workflow",
"expressionEdit.anythingInside": "Anything inside",
"expressionEdit.isJavaScript": "is JavaScript.",
"expressionEdit.learnMore": "Learn more",
"expressionEdit.editExpression": "Edit Expression",
"expressionEdit.expression": "Expression",
"expressionEdit.result": "Result",
"expressionEdit.resultOfItem1": "Result of item 1",
"expressionEdit.variableSelector": "Variable Selector",
"expressionModalInput.empty": "[empty]",
"expressionModalInput.undefined": "[undefined]",
"expressionModalInput.null": "null",
"fakeDoor.credentialEdit.sharing.name": "Sharing",
"fakeDoor.credentialEdit.sharing.actionBox.title": "Sharing is only available on <a href=\"https://n8n.io/cloud/\" target=\"_blank\">n8n Cloud</a> right now",
"fakeDoor.credentialEdit.sharing.actionBox.description": "Were working on bringing it to this edition of n8n, as a paid feature. If youd like to be the first to hear when its ready, join the list.",
@ -1227,7 +1233,11 @@
"variableSelector.outputData": "Output Data",
"variableSelector.parameters": "Parameters",
"variableSelector.variableFilter": "Variable filter...",
"variableSelectorItem.binary": "Binary",
"variableSelectorItem.currentNode": "Current Node",
"variableSelectorItem.empty": "--- EMPTY ---",
"variableSelectorItem.inputData": "Input Data",
"variableSelectorItem.json": "JSON",
"variableSelectorItem.selectItem": "Select Item",
"versionCard.breakingChanges": "Breaking changes",
"versionCard.released": "Released",

View file

@ -63,10 +63,6 @@
// "no-default-export": true,
"no-duplicate-variable": true,
"no-inferrable-types": true,
"no-namespace": [
true,
"allow-declarations"
],
"no-reference": true,
"no-string-throw": true,
"no-unused-expression": true,

View file

@ -277,7 +277,16 @@ export class Expression {
throw error;
}
}
if (
error instanceof Error &&
typeof error.message === 'string' &&
error.name === 'SyntaxError'
) {
throw new Error(error.message);
}
}
return null;
}

View file

@ -289,15 +289,12 @@ export class WorkflowDataProxy {
if (!that.runExecutionData.resultData.runData.hasOwnProperty(nodeName)) {
if (that.workflow.getNode(nodeName)) {
throw new ExpressionError(
`The node "${nodeName}" hasn't been executed yet, so you can't reference its output data`,
{
throw new ExpressionError(`no data, execute "${nodeName}" node first`, {
runIndex: that.runIndex,
itemIndex: that.itemIndex,
},
);
});
}
throw new ExpressionError(`No node called "${nodeName}" in this workflow`, {
throw new ExpressionError(`"${nodeName}" node doesn't exist`, {
runIndex: that.runIndex,
itemIndex: that.itemIndex,
});
@ -335,13 +332,10 @@ export class WorkflowDataProxy {
);
if (nodeConnection === undefined) {
throw new ExpressionError(
`The node "${that.activeNodeName}" is not connected with node "${nodeName}" so no data can get returned from it.`,
{
throw new ExpressionError(`connect ${that.activeNodeName} to ${nodeName}`, {
runIndex: that.runIndex,
itemIndex: that.itemIndex,
},
);
});
}
outputIndex = nodeConnection.sourceIndex;
}
@ -383,16 +377,16 @@ export class WorkflowDataProxy {
const that = this;
const node = this.workflow.nodes[nodeName];
if (!node) {
return undefined;
}
return new Proxy(
{ binary: undefined, data: undefined, json: undefined },
{
get(target, name, receiver) {
name = name.toString();
if (!node) {
throw new ExpressionError(`"${nodeName}" node doesn't exist`);
}
if (['binary', 'data', 'json'].includes(name)) {
const executionData = that.getNodeExecutionData(nodeName, shortSyntax, undefined);
if (executionData.length <= that.itemIndex) {
@ -463,8 +457,11 @@ export class WorkflowDataProxy {
{},
{
get(target, name, receiver) {
if (process.env.N8N_BLOCK_ENV_ACCESS_IN_NODE === 'true') {
throw new ExpressionError('Environment variable access got disabled', {
if (
typeof process === 'undefined' || // env vars are inaccessible to frontend
process.env.N8N_BLOCK_ENV_ACCESS_IN_NODE === 'true'
) {
throw new ExpressionError('access to env vars denied', {
causeDetailed:
'If you need access please contact the administrator to remove the environment variable N8N_BLOCK_ENV_ACCESS_IN_NODE',
runIndex: that.runIndex,
@ -544,7 +541,7 @@ export class WorkflowDataProxy {
const value = that.workflow[name as keyof typeof target];
if (value === undefined && name === 'id') {
throw new ExpressionError('Workflow is not saved', {
throw new ExpressionError('save workflow to view', {
description: `Please save the workflow first to use $workflow`,
runIndex: that.runIndex,
itemIndex: that.itemIndex,
@ -906,7 +903,7 @@ export class WorkflowDataProxy {
const referencedNode = that.workflow.getNode(nodeName);
if (referencedNode === null) {
throw createExpressionError(`No node called ${nodeName}`);
throw createExpressionError(`"${nodeName}" node doesn't exist`);
}
return new Proxy(

File diff suppressed because one or more lines are too long

View file

@ -10,14 +10,6 @@ overrides:
fork-ts-checker-webpack-plugin: ^6.0.4
globby: ^11.1.0
patchedDependencies:
quill@2.0.0-dev.4:
hash: wzpqp2wkmsfkgdbvlakyt3wndy
path: patches/quill@2.0.0-dev.4.patch
element-ui@2.15.12:
hash: aaa3sc7bmwb4jwg35ga5npx4he
path: patches/element-ui@2.15.12.patch
importers:
.:
@ -487,8 +479,8 @@ importers:
'@codemirror/lang-javascript': ^6.0.2
'@codemirror/language': ^6.2.1
'@codemirror/lint': ^6.0.0
'@codemirror/state': ^6.1.1
'@codemirror/view': ^6.2.1
'@codemirror/state': ^6.1.4
'@codemirror/view': ^6.5.1
'@fontsource/open-sans': ^4.5.0
'@fortawesome/fontawesome-svg-core': ^1.2.35
'@fortawesome/free-regular-svg-icons': ^6.1.1
@ -505,7 +497,6 @@ importers:
'@types/lodash.get': ^4.4.6
'@types/lodash.set': ^4.3.6
'@types/luxon': ^2.0.9
'@types/quill': ^2.0.1
'@types/uuid': ^8.3.2
'@vitejs/plugin-legacy': ^1.8.2
'@vitejs/plugin-vue2': ^1.1.2
@ -533,8 +524,6 @@ importers:
normalize-wheel: ^1.0.1
pinia: ^2.0.22
prismjs: ^1.17.1
quill: 2.0.0-dev.4
quill-autoformat: ^0.1.1
sass: ^1.55.0
sass-loader: ^10.1.1
string-template-parser: ^1.2.6
@ -560,13 +549,13 @@ importers:
vue2-touch-events: ^3.2.1
xss: ^1.0.10
dependencies:
'@codemirror/autocomplete': 6.3.0_2jvnbzbiudbravcwrws2kgi36q
'@codemirror/autocomplete': 6.3.0_wo7q3lvweq5evsu423o7qzum5i
'@codemirror/commands': 6.1.2
'@codemirror/lang-javascript': 6.1.0
'@codemirror/language': 6.2.1
'@codemirror/lint': 6.0.0
'@codemirror/state': 6.1.2
'@codemirror/view': 6.3.1
'@codemirror/state': 6.1.4
'@codemirror/view': 6.5.1
'@fontsource/open-sans': 4.5.12
'@fortawesome/fontawesome-svg-core': 1.2.36
'@fortawesome/free-regular-svg-icons': 6.2.0
@ -594,8 +583,6 @@ importers:
normalize-wheel: 1.0.1
pinia: 2.0.23_xjcbg5znturqejtkpd33hx726m
prismjs: 1.29.0
quill: 2.0.0-dev.4_wzpqp2wkmsfkgdbvlakyt3wndy
quill-autoformat: 0.1.2
timeago.js: 4.0.2
uuid: 8.3.2
v-click-outside: 3.2.0
@ -624,7 +611,6 @@ importers:
'@types/lodash.get': 4.4.7
'@types/lodash.set': 4.3.7
'@types/luxon': 2.4.0
'@types/quill': 2.0.9
'@types/uuid': 8.3.4
'@vitejs/plugin-legacy': 1.8.2_vite@2.9.5
'@vitejs/plugin-vue2': 1.1.2_vite@2.9.5+vue@2.7.13
@ -2627,7 +2613,7 @@ packages:
minimist: 1.2.7
dev: true
/@codemirror/autocomplete/6.3.0_2jvnbzbiudbravcwrws2kgi36q:
/@codemirror/autocomplete/6.3.0_wo7q3lvweq5evsu423o7qzum5i:
resolution: {integrity: sha512-4jEvh3AjJZTDKazd10J6ZsCIqaYxDMCeua5ouQxY8hlFIml+nr7le0SgBhT3SIytFBmdzPK3AUhXGuW3T79nVg==}
peerDependencies:
'@codemirror/language': ^6.0.0
@ -2636,8 +2622,8 @@ packages:
'@lezer/common': ^1.0.0
dependencies:
'@codemirror/language': 6.2.1
'@codemirror/state': 6.1.2
'@codemirror/view': 6.3.1
'@codemirror/state': 6.1.4
'@codemirror/view': 6.5.1
'@lezer/common': 1.0.1
dev: false
@ -2645,19 +2631,19 @@ packages:
resolution: {integrity: sha512-sO3jdX1s0pam6lIdeSJLMN3DQ6mPEbM4yLvyKkdqtmd/UDwhXA5+AwFJ89rRXm6vTeOXBsE5cAmlos/t7MJdgg==}
dependencies:
'@codemirror/language': 6.2.1
'@codemirror/state': 6.1.2
'@codemirror/view': 6.3.1
'@codemirror/state': 6.1.4
'@codemirror/view': 6.5.1
'@lezer/common': 1.0.1
dev: false
/@codemirror/lang-javascript/6.1.0:
resolution: {integrity: sha512-wAWEY1Wdis2cKDy9A5q/rUmzLHFbZgoupJBcGaeMMsDPi68Rm90NsmzAEODE5kW8mYdRKFhQ157WJghOZ3yYdg==}
dependencies:
'@codemirror/autocomplete': 6.3.0_2jvnbzbiudbravcwrws2kgi36q
'@codemirror/autocomplete': 6.3.0_wo7q3lvweq5evsu423o7qzum5i
'@codemirror/language': 6.2.1
'@codemirror/lint': 6.0.0
'@codemirror/state': 6.1.2
'@codemirror/view': 6.3.1
'@codemirror/state': 6.1.4
'@codemirror/view': 6.5.1
'@lezer/common': 1.0.1
'@lezer/javascript': 1.0.2
dev: false
@ -2665,8 +2651,8 @@ packages:
/@codemirror/language/6.2.1:
resolution: {integrity: sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==}
dependencies:
'@codemirror/state': 6.1.2
'@codemirror/view': 6.3.1
'@codemirror/state': 6.1.4
'@codemirror/view': 6.5.1
'@lezer/common': 1.0.1
'@lezer/highlight': 1.1.1
'@lezer/lr': 1.2.3
@ -2676,19 +2662,19 @@ packages:
/@codemirror/lint/6.0.0:
resolution: {integrity: sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==}
dependencies:
'@codemirror/state': 6.1.2
'@codemirror/view': 6.3.1
'@codemirror/state': 6.1.4
'@codemirror/view': 6.5.1
crelt: 1.0.5
dev: false
/@codemirror/state/6.1.2:
resolution: {integrity: sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA==}
/@codemirror/state/6.1.4:
resolution: {integrity: sha512-g+3OJuRylV5qsXuuhrc6Cvs1NQluNioepYMM2fhnpYkNk7NgX+j0AFuevKSVKzTDmDyt9+Puju+zPdHNECzCNQ==}
dev: false
/@codemirror/view/6.3.1:
resolution: {integrity: sha512-NKPBphoV9W2Q6tKXk+ge4q5EhMOOC0rpwdGS80/slNSfsVqkN4gwXIEqSprXJFlf9aUKZU7WhPvqRBMNH+hJkQ==}
/@codemirror/view/6.5.1:
resolution: {integrity: sha512-xBKP8N3AXOs06VcKvIuvIQoUlGs7Hb78ftJWahLaRX909jKPMgGxR5XjvrawzTTZMSTU3DzdjDNPwG6fPM/ypQ==}
dependencies:
'@codemirror/state': 6.1.2
'@codemirror/state': 6.1.4
style-mod: 4.0.0
w3c-keyname: 2.2.6
dev: false
@ -5981,13 +5967,6 @@ packages:
/@types/qs/6.9.7:
resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
/@types/quill/2.0.9:
resolution: {integrity: sha512-/n40Ypp+jF3GDLqB/5z1P+Odq1K98txXbBgRDkG6Z90LGC1AwQPtZWNeOdDg0yUlgBSUASmpeDn3eBPUuPXtuw==}
dependencies:
parchment: 1.1.4
quill-delta: 4.2.2
dev: true
/@types/range-parser/1.2.4:
resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
@ -8877,6 +8856,7 @@ packages:
/clone/2.1.2:
resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
engines: {node: '>=0.8'}
dev: true
/cloneable-readable/1.1.3:
resolution: {integrity: sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==}
@ -9942,37 +9922,6 @@ packages:
type-detect: 4.0.8
dev: true
/deep-equal/1.1.1:
resolution: {integrity: sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==}
dependencies:
is-arguments: 1.1.1
is-date-object: 1.0.5
is-regex: 1.1.4
object-is: 1.1.5
object-keys: 1.1.1
regexp.prototype.flags: 1.4.3
dev: false
/deep-equal/2.0.5:
resolution: {integrity: sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==}
dependencies:
call-bind: 1.0.2
es-get-iterator: 1.1.2
get-intrinsic: 1.1.3
is-arguments: 1.1.1
is-date-object: 1.0.5
is-regex: 1.1.4
isarray: 2.0.5
object-is: 1.1.5
object-keys: 1.1.1
object.assign: 4.1.4
regexp.prototype.flags: 1.4.3
side-channel: 1.0.4
which-boxed-primitive: 1.0.2
which-collection: 1.0.1
which-typed-array: 1.1.8
dev: false
/deep-is/0.1.4:
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
@ -10594,6 +10543,7 @@ packages:
is-set: 2.0.2
is-string: 1.0.7
isarray: 2.0.5
dev: true
/es-module-lexer/0.9.3:
resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
@ -11258,10 +11208,6 @@ packages:
resolution: {integrity: sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==}
dev: true
/eventemitter3/4.0.7:
resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
dev: false
/events/1.1.1:
resolution: {integrity: sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==}
engines: {node: '>=0.4.x'}
@ -11544,6 +11490,7 @@ packages:
/fast-diff/1.2.0:
resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
dev: true
/fast-glob/3.2.12:
resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
@ -13416,6 +13363,7 @@ packages:
/is-map/2.0.2:
resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
dev: true
/is-nan/1.3.2:
resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
@ -13521,6 +13469,7 @@ packages:
/is-set/2.0.2:
resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
dev: true
/is-shared-array-buffer/1.0.2:
resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
@ -13582,22 +13531,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/is-weakmap/2.0.1:
resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
dev: false
/is-weakref/1.0.2:
resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
dependencies:
call-bind: 1.0.2
/is-weakset/2.0.2:
resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
dependencies:
call-bind: 1.0.2
get-intrinsic: 1.1.3
dev: false
/is-whitespace-character/1.0.4:
resolution: {integrity: sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==}
dev: true
@ -13638,6 +13576,7 @@ packages:
/isarray/2.0.5:
resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
dev: true
/isbot/3.6.1:
resolution: {integrity: sha512-e1RmjWns87x60QyiHberWWMJGutL3+Ad0nZ8cz735iDEDDS6ApPfKSFo4EMj0PmMZ0m0ntpWIM0ADdqDFvUJPQ==}
@ -15024,6 +14963,7 @@ packages:
/lodash.clonedeep/4.5.0:
resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
dev: false
/lodash.debounce/4.0.8:
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
@ -16316,14 +16256,6 @@ packages:
/object-inspect/1.12.2:
resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
/object-is/1.1.5:
resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
engines: {node: '>= 0.4'}
dependencies:
call-bind: 1.0.2
define-properties: 1.1.4
dev: false
/object-keys/1.1.1:
resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
engines: {node: '>= 0.4'}
@ -16689,14 +16621,6 @@ packages:
dot-case: 3.0.4
tslib: 2.4.0
/parchment/1.1.4:
resolution: {integrity: sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==}
dev: true
/parchment/2.0.0-dev.2:
resolution: {integrity: sha512-4fgRny4pPISoML08Zp7poi52Dff3E2G1ORTi2D/acJ/RiROdDAMDB6VcQNfBcmehrX5Wixp6dxh6JjLyE5yUNQ==}
dev: false
/parent-module/1.0.1:
resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
engines: {node: '>=6'}
@ -17868,41 +17792,6 @@ packages:
/queue-microtask/1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
/quill-autoformat/0.1.2:
resolution: {integrity: sha512-kRe2rTSmcBDg/oCxhzbjmXXOpQUl0Gak6ZCQshxek/RLvdR8o715qC0WcBRUozqaYbR6PJ+0Z/piINqlYStxWw==}
engines: {node: '>=10.15.3', yarn: '>=1.15.2'}
dependencies:
quill: 2.0.0-dev.4_wzpqp2wkmsfkgdbvlakyt3wndy
dev: false
/quill-delta/4.2.1:
resolution: {integrity: sha512-Y2nksOj6Q+4hizre8n0dml76vLNGK4/y86EoI1d7rv6EL1bx7DPDYRmqQMPu1UqFQO/uQuVHQ3fOmm4ZSzWrfA==}
dependencies:
deep-equal: 1.1.1
extend: 3.0.2
fast-diff: 1.2.0
dev: false
/quill-delta/4.2.2:
resolution: {integrity: sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==}
dependencies:
fast-diff: 1.2.0
lodash.clonedeep: 4.5.0
lodash.isequal: 4.5.0
dev: true
/quill/2.0.0-dev.4_wzpqp2wkmsfkgdbvlakyt3wndy:
resolution: {integrity: sha512-9WmMVCEIhf3lDdhzl+i+GBDeDl0BFi65waC4Im8Y4HudEJ9kEEb1lciAz9A8pcDmLMjiMbvz84lNt/U5OBS8Vg==}
dependencies:
clone: 2.1.2
deep-equal: 2.0.5
eventemitter3: 4.0.7
extend: 3.0.2
parchment: 2.0.0-dev.2
quill-delta: 4.2.1
dev: false
patched: true
/quoted-printable/1.0.1:
resolution: {integrity: sha512-cihC68OcGiQOjGiXuo5Jk6XHANTHl1K4JLk/xlEJRTIXfy19Sg6XzB95XonYgr+1rB88bCpr7WZE7D7AlZow4g==}
hasBin: true
@ -22096,15 +21985,6 @@ packages:
is-string: 1.0.7
is-symbol: 1.0.4
/which-collection/1.0.1:
resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
dependencies:
is-map: 2.0.2
is-set: 2.0.2
is-weakmap: 2.0.1
is-weakset: 2.0.2
dev: false
/which-module/1.0.0:
resolution: {integrity: sha512-F6+WgncZi/mJDrammbTuHe1q0R5hOXv/mBaiNA2TCNT/LTHusX0V+CJnj9XT8ki5ln2UZyyddDgHfCzyrOH7MQ==}
dev: true