diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
index 221be4b48f..f20979b8e1 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
@@ -9,7 +9,6 @@
}"
aria-checked="true"
>
-
{{ label }}
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index 78aaa19923..4ff7d63e91 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -10,7 +10,7 @@
:active="modelValue === option.value"
:size="size"
:disabled="disabled || option.disabled"
- @click="() => onClick(option)"
+ @click.prevent.stop="onClick(option)"
/>
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index c47d945c2c..8e665d53ef 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,21 +1,15 @@
-
-
-
-
-
+
+
+
+
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index 4c7303b99c..12292ebcc9 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -69,6 +69,8 @@ export default defineComponent({
EditorView.updateListener.of((viewUpdate) => {
if (!this.editor || !viewUpdate.docChanged) return;
+ this.editorState = this.editor.state;
+
highlighter.removeColor(this.editor, this.plaintextSegments);
highlighter.addColor(this.editor, this.resolvableSegments);
@@ -94,6 +96,7 @@ export default defineComponent({
}),
});
+ this.editorState = this.editor.state;
this.editor.focus();
highlighter.addColor(this.editor, this.resolvableSegments);
diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index 02b15c28a6..8567f95123 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -22,7 +22,7 @@
:path="path"
@focus="onFocus"
@blur="onBlur"
- @update="onChange"
+ @change="onChange"
ref="inlineInput"
/>
{
if (!viewUpdate.docChanged) return;
+ this.editorState = this.editor.state;
+
this.getHighlighter()?.removeColor(this.editor, this.htmlSegments);
this.getHighlighter()?.addColor(this.editor, this.resolvableSegments);
@@ -270,6 +272,7 @@ export default defineComponent({
const state = EditorState.create({ doc, extensions: this.extensions });
this.editor = new EditorView({ parent: this.root(), state });
+ this.editorState = this.editor.state;
this.getHighlighter()?.addColor(this.editor, this.resolvableSegments);
},
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 8987354c31..762b7b305f 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -114,6 +114,9 @@ export default defineComponent({
EditorView.updateListener.of((viewUpdate) => {
if (!this.editor || !viewUpdate.docChanged) return;
+ // Force segments value update by keeping track of editor state
+ this.editorState = this.editor.state;
+
highlighter.removeColor(this.editor, this.plaintextSegments);
highlighter.addColor(this.editor, this.resolvableSegments);
@@ -137,10 +140,11 @@ export default defineComponent({
extensions,
}),
});
+ this.editorState = this.editor.state;
highlighter.addColor(this.editor, this.resolvableSegments);
- this.$emit('update', {
+ this.$emit('change', {
value: this.unresolvedExpression,
segments: this.displayableSegments,
});
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 1b84edc4fa..2b58cd2378 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -133,14 +133,14 @@
,
},
showOptions: {
@@ -88,10 +88,10 @@ export default defineComponent({
},
computed: {
isDefault(): boolean {
- return this.parameter.default === this.modelValue;
+ return this.parameter.default === this.value;
},
isValueExpression(): boolean {
- return isValueExpression(this.parameter, this.modelValue);
+ return isValueExpression(this.parameter, this.value);
},
isHtmlEditor(): boolean {
return this.getArgument('editor') === 'htmlEditor';
@@ -153,8 +153,8 @@ export default defineComponent({
if (
this.hasRemoteMethod ||
(this.parameter.type === 'resourceLocator' &&
- isResourceLocatorValue(this.modelValue) &&
- this.modelValue.mode === 'list')
+ isResourceLocatorValue(this.value) &&
+ this.value.mode === 'list')
) {
return [
{
@@ -173,6 +173,7 @@ export default defineComponent({
this.$emit('menu-expanded', visible);
},
onViewSelected(selected: string) {
+ console.log('onViewSelected', selected);
if (selected === 'expression') {
this.$emit(
'update:modelValue',
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index fd1d773804..5c2971db02 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -146,11 +146,10 @@
>
-
+
+
+ {{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
+
{
if (!viewUpdate.docChanged || !this.editor) return;
+ this.editorState = this.editor.state;
+
highlighter.removeColor(this.editor as EditorView, this.plaintextSegments);
highlighter.addColor(this.editor as EditorView, this.resolvableSegments);
@@ -182,6 +185,7 @@ export default defineComponent({
const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
this.editor = new EditorView({ parent: this.$refs.sqlEditor as HTMLDivElement, state });
+ this.editorState = this.editor.state;
highlighter.addColor(this.editor as EditorView, this.resolvableSegments);
},
methods: {
diff --git a/packages/editor-ui/src/mixins/expressionManager.ts b/packages/editor-ui/src/mixins/expressionManager.ts
index f0cf517e50..adf6d0fd63 100644
--- a/packages/editor-ui/src/mixins/expressionManager.ts
+++ b/packages/editor-ui/src/mixins/expressionManager.ts
@@ -24,6 +24,7 @@ export const expressionManager = defineComponent({
return {
editor: {} as EditorView,
skipSegments: [] as string[],
+ editorState: undefined,
};
},
watch: {
@@ -72,24 +73,24 @@ export const expressionManager = defineComponent({
},
segments(): Segment[] {
- if (!this.editor?.state) return [];
+ if (!this.editorState || !this.editorState) return [];
const rawSegments: RawSegment[] = [];
const fullTree = ensureSyntaxTree(
- this.editor.state,
- this.editor.state.doc.length,
+ this.editorState,
+ this.editorState.doc.length,
EXPRESSION_EDITOR_PARSER_TIMEOUT,
);
if (fullTree === null) {
- throw new Error(`Failed to parse expression: ${this.editor.state.doc.toString()}`);
+ throw new Error(`Failed to parse expression: ${this.editorValue}`);
}
const skipSegments = ['Program', 'Script', 'Document', ...this.skipSegments];
fullTree.cursor().iterate((node) => {
- const text = this.editor.state.sliceDoc(node.from, node.to);
+ const text = this.editorState.sliceDoc(node.from, node.to);
if (skipSegments.includes(node.type.name)) return;
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 3479980e9f..baedfaefc9 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -630,14 +630,6 @@ export default defineComponent({
NODE_CREATOR_OPEN_SOURCES,
};
},
- beforeUnmount() {
- this.resetWorkspace();
- // Make sure the event listeners get removed again else we
- // could add up with them registered multiple times
- document.removeEventListener('keydown', this.keyDown);
- document.removeEventListener('keyup', this.keyUp);
- this.unregisterCustomAction('showNodeCreator');
- },
methods: {
showTriggerMissingToltip(isVisible: boolean) {
this.showTriggerMissingTooltip = isVisible;
@@ -3961,6 +3953,12 @@ export default defineComponent({
nodeViewEventBus.off('saveWorkflow', this.saveCurrentWorkflowExternal);
},
beforeUnmount() {
+ // Make sure the event listeners get removed again else we
+ // could add up with them registered multiple times
+ document.removeEventListener('keydown', this.keyDown);
+ document.removeEventListener('keyup', this.keyUp);
+ this.unregisterCustomAction('showNodeCreator');
+
this.resetWorkspace();
this.instance.unbind();
this.instance.destroy();
diff --git a/packages/editor-ui/vite.config.ts b/packages/editor-ui/vite.config.ts
index 2f5b8db082..9ec24c11f5 100644
--- a/packages/editor-ui/vite.config.ts
+++ b/packages/editor-ui/vite.config.ts
@@ -89,8 +89,8 @@ export default mergeConfig(
defineConfig({
define: {
// This causes test to fail but is required for actually running it
- ...(NODE_ENV !== 'test' ? { global: 'globalThis' } : {}),
- ...(NODE_ENV === 'development' ? { process: { env: {} } } : {}),
+ // ...(NODE_ENV !== 'test' ? { 'global': 'globalThis' } : {}),
+ ...(NODE_ENV === 'development' ? { 'process.env': {} } : {}),
BASE_PATH: `'${publicPath}'`,
},
plugins,