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

packages/editor-ui/package.json

@@ -31,8 +31,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",

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionModalInput.vue

@@ -7,10 +7,12 @@ import mixins from 'vue-typed-mixins';
 import { EditorView } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 import { history } from '@codemirror/commands';
-import { autocompletion } from '@codemirror/autocomplete';
+// import { autocompletion } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
+import { mapStores } from 'pinia';
 
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import { useNDVStore } from '@/stores/ndv';
 import { n8nLanguageSupport } from './n8nLanguageSupport';
 import { braceHandler } from './braceHandler';
 import { EXPRESSION_EDITOR_THEME } from './theme';
@@ -80,6 +82,8 @@ export default mixins(workflowHelpers).extend({
 						segments: this.displayableSegments,
 					});
 				}, delay);
+
+				this.$nextTick(() => this.editor?.focus());
 			}),
 		];
 
@@ -91,6 +95,8 @@ export default mixins(workflowHelpers).extend({
 			}),
 		});
 
+		this.editor.focus();
+
 		addColor(this.editor, this.resolvableSegments);
 
 		this.$emit('change', { value: this.unresolvedExpression, segments: this.displayableSegments });
@@ -99,6 +105,7 @@ export default mixins(workflowHelpers).extend({
 		this.editor?.destroy();
 	},
 	computed: {
+		...mapStores(useNDVStore),
 		unresolvedExpression(): string {
 			return this.segments.reduce((acc, segment) => {
 				acc += segment.kind === 'resolvable' ? segment.resolvable : segment.plaintext;
@@ -212,7 +219,11 @@ export default mixins(workflowHelpers).extend({
 			const result: { resolved: unknown; error: boolean } = { resolved: undefined, error: false };
 
 			try {
-				result.resolved = this.resolveExpression('=' + resolvable) as unknown;
+				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;
@@ -240,10 +251,26 @@ export default mixins(workflowHelpers).extend({
 		itemSelected({ variable }: IVariableItemSelected) {
 			if (!this.editor) return;
 
+			const OPEN_MARKER = '{{';
+			const CLOSE_MARKER = '}}';
+
+			const { doc, selection } = this.editor.state;
+
+			const before = doc.toString().slice(0, selection.main.head);
+			const after = doc.toString().slice(selection.main.head, doc.length);
+
+			if (before.includes(OPEN_MARKER) && after.includes(CLOSE_MARKER)) {
+				this.editor.dispatch({
+					changes: { from: selection.main.head, insert: variable },
+				});
+
+				return;
+			}
+
 			this.editor.dispatch({
 				changes: {
-					from: this.editor.state.selection.main.head,
-					insert: `{{ ${variable} }}`,
+					from: selection.main.head,
+					insert: [OPEN_MARKER, variable, CLOSE_MARKER].join(' '),
 				},
 			});
 		},

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionModalOutput.vue

@@ -37,7 +37,7 @@ export default Vue.extend({
 	mounted() {
 		const extensions = [
 			EXPRESSION_EDITOR_THEME,
-			EditorView.editable.of(false),
+			EditorState.readOnly.of(true),
 			EditorView.lineWrapping,
 		];
 

packages/editor-ui/src/components/ExpressionEditorModal/theme.ts

@@ -35,6 +35,7 @@ export const EXPRESSION_EDITOR_THEME = [
 			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: '#ffffff',
 		},
 		'&.cm-focused': {
 			borderColor: 'var(--color-secondary)',

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -253,7 +253,7 @@ export default mixins(
 			return !this.readOnly && this.isTriggerNode && (isWebhookBasedNode || isPollingNode || override);
 		},
 		workflow(): Workflow {
-			return this.getCurrentWorkflow();
+			return this.getCurrentWorkflow(true);
 		},
 		parentNodes(): string[] {
 			if (this.activeNode) {

packages/editor-ui/src/components/VariableSelector.vue

@@ -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[] = [
 						{

packages/workflow/src/WorkflowDataProxy.ts

@@ -541,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,