fix(HTTP Request Node): Handle special characters in pagination expressions + improve hint text (#8576)

Co-authored-by: Michael Kret <michael.k@radency.com>

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue

@@ -3,22 +3,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import { mapStores } from 'pinia';
-import { EditorView, keymap } from '@codemirror/view';
-import { Compartment, EditorState, Prec } from '@codemirror/state';
-import { history, redo, undo } from '@codemirror/commands';
 import { acceptCompletion, autocompletion, completionStatus } from '@codemirror/autocomplete';
+import { history, redo, undo } from '@codemirror/commands';
+import { Compartment, EditorState, Prec } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 
-import { useNDVStore } from '@/stores/ndv.store';
-import { expressionManager } from '@/mixins/expressionManager';
-import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
-import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
-import { inputTheme } from './theme';
-import { n8nLang } from '@/plugins/codemirror/n8nLang';
 import { completionManager } from '@/mixins/completionManager';
+import { expressionManager } from '@/mixins/expressionManager';
+import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
+import { n8nLang } from '@/plugins/codemirror/n8nLang';
+import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
+import { isEqual } from 'lodash-es';
 import type { IDataObject } from 'n8n-workflow';
+import { inputTheme } from './theme';
 
 const editableConf = new Compartment();
 
@@ -68,26 +67,18 @@ export default defineComponent({
 				},
 			});
 		},
-		ndvInputData() {
-			this.editor?.dispatch({
-				changes: {
-					from: 0,
-					to: this.editor.state.doc.length,
-					insert: this.modelValue,
-				},
-			});
+		displayableSegments(segments, newSegments) {
+			if (isEqual(segments, newSegments)) return;
 
-			setTimeout(() => {
-				this.editor?.contentDOM.blur();
+			highlighter.removeColor(this.editor, this.plaintextSegments);
+			highlighter.addColor(this.editor, this.resolvableSegments);
+
+			this.$emit('change', {
+				value: this.unresolvedExpression,
+				segments: this.displayableSegments,
 			});
 		},
 	},
-	computed: {
-		...mapStores(useNDVStore),
-		ndvInputData(): object {
-			return this.ndvStore.ndvInputData;
-		},
-	},
 	mounted() {
 		const extensions = [
 			n8nLang(),
@@ -125,19 +116,11 @@ export default defineComponent({
 				// 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);
-
 				setTimeout(() => {
 					try {
 						this.trackCompletion(viewUpdate, this.path);
 					} catch {}
 				});
-
-				this.$emit('change', {
-					value: this.unresolvedExpression,
-					segments: this.displayableSegments,
-				});
 			}),
 		];
 
@@ -148,14 +131,10 @@ export default defineComponent({
 				extensions,
 			}),
 		});
+
 		this.editorState = this.editor.state;
 
 		highlighter.addColor(this.editor, this.resolvableSegments);
-
-		this.$emit('change', {
-			value: this.unresolvedExpression,
-			segments: this.displayableSegments,
-		});
 	},
 	beforeUnmount() {
 		this.editor?.destroy();

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

@@ -727,7 +727,8 @@ export default defineComponent({
 			this.$emit('removeNode', this.data.name);
 		},
 
-		toggleDisableNode() {
+		toggleDisableNode(event: MouseEvent) {
+			(event.currentTarget as HTMLButtonElement).blur();
 			this.$telemetry.track('User clicked node hover button', {
 				node_type: this.data.type,
 				button_name: 'disable',