From ea6a4fd5a60a4efbd1f9513b714d461e86714f36 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 28 Mar 2024 11:39:08 +0100
Subject: [PATCH 1/7] Increase expression input height in filter and assignment
 component

---
 .../src/components/AssignmentCollection/Assignment.vue          | 2 --
 .../editor-ui/src/components/FilterConditions/Condition.vue     | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue b/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue
index c1ee16976b52e..f18b5d5c81142 100644
--- a/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue
+++ b/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue
@@ -169,7 +169,6 @@ const onBlur = (): void => {
 						display-options
 						hide-label
 						hide-hint
-						:rows="3"
 						:is-read-only="isReadOnly"
 						:parameter="nameParameter"
 						:value="assignment.name"
@@ -196,7 +195,6 @@ const onBlur = (): void => {
 							hide-label
 							hide-issues
 							hide-hint
-							:rows="3"
 							is-assignment
 							:is-read-only="isReadOnly"
 							:options-position="breakpoint === 'default' ? 'top' : 'bottom'"
diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index 18eb28b03415e..e3b1be0e1878e 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -156,7 +156,6 @@ const onBlur = (): void => {
 					hide-label
 					hide-hint
 					hide-issues
-					:rows="3"
 					:is-read-only="readOnly"
 					:parameter="leftParameter"
 					:value="condition.leftValue"
@@ -181,7 +180,6 @@ const onBlur = (): void => {
 					hide-label
 					hide-hint
 					hide-issues
-					:rows="3"
 					:is-read-only="readOnly"
 					:options-position="breakpoint === 'default' ? 'top' : 'bottom'"
 					:parameter="rightParameter"

From 596b56c78579e6f88165cbeb9802a467bcbe4f3d Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 28 Mar 2024 11:39:34 +0100
Subject: [PATCH 2/7] Add error message to parseJson extension method

---
 packages/workflow/src/Extensions/StringExtensions.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/workflow/src/Extensions/StringExtensions.ts b/packages/workflow/src/Extensions/StringExtensions.ts
index 88728fc400cbb..15b0f32f2774d 100644
--- a/packages/workflow/src/Extensions/StringExtensions.ts
+++ b/packages/workflow/src/Extensions/StringExtensions.ts
@@ -382,7 +382,10 @@ function parseJson(value: string): unknown {
 	try {
 		return JSON.parse(value);
 	} catch (error) {
-		return undefined;
+		if (value.includes("'")) {
+			throw new ExpressionExtensionError("Parsing failed. Check you're using double quotes");
+		}
+		throw new ExpressionExtensionError('Parsing failed');
 	}
 }
 

From 0587ca2f9c9f5b960220faf959a14f52b7d075cc Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 28 Mar 2024 11:40:09 +0100
Subject: [PATCH 3/7] Make [empty] color lighter in expression output dropdown

---
 .../InlineExpressionEditorOutput.vue          | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
index 65102dabbe198..19279c5e29f73 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
@@ -45,21 +45,24 @@ const resolvedExpression = computed(() => {
 });
 
 const plaintextSegments = computed<Plaintext[]>(() => {
-	if (props.segments.length === 0) {
-		return [
-			{
-				from: 0,
-				to: resolvedExpression.value.length - 1,
-				plaintext: resolvedExpression.value,
-				kind: 'plaintext',
-			},
-		];
-	}
-
 	return props.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
 });
 
 const resolvedSegments = computed<Resolved[]>(() => {
+	if (props.segments.length === 0) {
+		const emptyExpression = resolvedExpression.value;
+		const emptySegment: Resolved = {
+			from: 0,
+			to: emptyExpression.length,
+			kind: 'resolvable',
+			error: null,
+			resolvable: '',
+			resolved: emptyExpression,
+			state: 'pending',
+		};
+		return [emptySegment];
+	}
+
 	let cursor = 0;
 
 	return props.segments
@@ -69,8 +72,8 @@ const resolvedSegments = computed<Resolved[]>(() => {
 				segment.kind === 'plaintext'
 					? segment.plaintext.length
 					: segment.resolved
-						? (segment.resolved as string | number | boolean).toString().length
-						: 0;
+					  ? (segment.resolved as string | number | boolean).toString().length
+					  : 0;
 			segment.to = cursor;
 			return segment;
 		})

From 014785764b86da9dd29c80bec43544cb232e3dda Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 28 Mar 2024 11:40:33 +0100
Subject: [PATCH 4/7] Remove rounded corners in fixed fields with the popunder
 on

---
 packages/editor-ui/src/components/ParameterInputFull.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index ceda6d05d75e7..20c7a81d5d729 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,6 +1,6 @@
 <template>
 	<n8n-input-label
-		:class="$style.wrapper"
+		:class="[$style.wrapper, { [$style.tipVisible]: showDragnDropTip }]"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
 		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
 		:show-tooltip="focused"
@@ -357,6 +357,11 @@ export default defineComponent({
 	}
 }
 
+.tipVisible {
+	--input-border-bottom-left-radius: 0;
+	--input-border-bottom-right-radius: 0;
+}
+
 .tip {
 	position: absolute;
 	z-index: 2;

From 27cad19c9ef52e5c124072ad7644e0c9b94a16b5 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 28 Mar 2024 11:41:08 +0100
Subject: [PATCH 5/7] Fix: Opened the NDV and the expression was scrolled to
 halfway down

---
 packages/editor-ui/src/composables/useExpressionEditor.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/composables/useExpressionEditor.ts b/packages/editor-ui/src/composables/useExpressionEditor.ts
index 029a18689aab4..bab6047834114 100644
--- a/packages/editor-ui/src/composables/useExpressionEditor.ts
+++ b/packages/editor-ui/src/composables/useExpressionEditor.ts
@@ -185,7 +185,7 @@ export const useExpressionEditor = ({
 		if (editor.value) {
 			editor.value.destroy();
 		}
-		editor.value = new EditorView({ parent, state });
+		editor.value = new EditorView({ parent, state, scrollTo: EditorView.scrollIntoView(0) });
 		debouncedUpdateSegments();
 	});
 
@@ -385,7 +385,10 @@ export const useExpressionEditor = ({
 	function setCursorPosition(pos: number | 'lastExpression' | 'end'): void {
 		if (pos === 'lastExpression') {
 			const END_OF_EXPRESSION = ' }}';
-			pos = Math.max(readEditorValue().lastIndexOf(END_OF_EXPRESSION), 0);
+			pos = Math.max(
+				readEditorValue().lastIndexOf(END_OF_EXPRESSION),
+				editor.value?.state.doc.length ?? 0,
+			);
 		} else if (pos === 'end') {
 			pos = editor.value?.state.doc.length ?? 0;
 		}

From 66fdd425c21c30c10f0a53fb4de96d6f71ec4339 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 28 Mar 2024 11:58:50 +0100
Subject: [PATCH 6/7] Add/fix tests

---
 packages/editor-ui/src/__tests__/setup.ts       |  7 +++++++
 .../ExpressionEditorModalInput.test.ts          | 15 ---------------
 .../src/components/__tests__/HtmlEditor.test.ts | 17 -----------------
 .../__tests__/useAutocompleteTelemetry.test.ts  | 17 -----------------
 .../__tests__/useExpressionEditor.test.ts       | 17 -----------------
 .../src/composables/useExpressionEditor.ts      |  6 ++----
 .../StringExtensions.test.ts                    |  8 +++++++-
 7 files changed, 16 insertions(+), 71 deletions(-)

diff --git a/packages/editor-ui/src/__tests__/setup.ts b/packages/editor-ui/src/__tests__/setup.ts
index 9316e30a30c96..4c75c226e6d37 100644
--- a/packages/editor-ui/src/__tests__/setup.ts
+++ b/packages/editor-ui/src/__tests__/setup.ts
@@ -12,3 +12,10 @@ window.ResizeObserver =
 	}));
 
 Element.prototype.scrollIntoView = vi.fn();
+
+Range.prototype.getBoundingClientRect = vi.fn();
+Range.prototype.getClientRects = vi.fn(() => ({
+	item: vi.fn(),
+	length: 0,
+	[Symbol.iterator]: vi.fn(),
+}));
diff --git a/packages/editor-ui/src/components/__tests__/ExpressionEditorModalInput.test.ts b/packages/editor-ui/src/components/__tests__/ExpressionEditorModalInput.test.ts
index c285f62c9d143..0aa1e7d0fe66a 100644
--- a/packages/editor-ui/src/components/__tests__/ExpressionEditorModalInput.test.ts
+++ b/packages/editor-ui/src/components/__tests__/ExpressionEditorModalInput.test.ts
@@ -6,8 +6,6 @@ import { setActivePinia } from 'pinia';
 import { waitFor } from '@testing-library/vue';
 
 describe('ExpressionParameterInput', () => {
-	const originalRangeGetBoundingClientRect = Range.prototype.getBoundingClientRect;
-	const originalRangeGetClientRects = Range.prototype.getClientRects;
 	const renderComponent = createComponentRenderer(ExpressionEditorModalInput);
 	let pinia: TestingPinia;
 
@@ -16,19 +14,6 @@ describe('ExpressionParameterInput', () => {
 		setActivePinia(pinia);
 	});
 
-	beforeAll(() => {
-		Range.prototype.getBoundingClientRect = vi.fn();
-		Range.prototype.getClientRects = () => ({
-			item: vi.fn(),
-			length: 0,
-			[Symbol.iterator]: vi.fn(),
-		});
-	});
-
-	afterAll(() => {
-		Range.prototype.getBoundingClientRect = originalRangeGetBoundingClientRect;
-		Range.prototype.getClientRects = originalRangeGetClientRects;
-	});
 	test.each([
 		['not be editable', 'readonly', true, ''],
 		['be editable', 'not readonly', false, 'test'],
diff --git a/packages/editor-ui/src/components/__tests__/HtmlEditor.test.ts b/packages/editor-ui/src/components/__tests__/HtmlEditor.test.ts
index f7eadcbc630e7..7d5f80d4289ed 100644
--- a/packages/editor-ui/src/components/__tests__/HtmlEditor.test.ts
+++ b/packages/editor-ui/src/components/__tests__/HtmlEditor.test.ts
@@ -17,9 +17,6 @@ const DEFAULT_SETUP = {
 };
 
 describe('HtmlEditor.vue', () => {
-	const originalRangeGetBoundingClientRect = Range.prototype.getBoundingClientRect;
-	const originalRangeGetClientRects = Range.prototype.getClientRects;
-
 	const pinia = createTestingPinia({
 		initialState: {
 			[STORES.SETTINGS]: {
@@ -29,20 +26,6 @@ describe('HtmlEditor.vue', () => {
 	});
 	setActivePinia(pinia);
 
-	beforeAll(() => {
-		Range.prototype.getBoundingClientRect = vi.fn();
-		Range.prototype.getClientRects = () => ({
-			item: vi.fn(),
-			length: 0,
-			[Symbol.iterator]: vi.fn(),
-		});
-	});
-
-	afterAll(() => {
-		Range.prototype.getBoundingClientRect = originalRangeGetBoundingClientRect;
-		Range.prototype.getClientRects = originalRangeGetClientRects;
-	});
-
 	afterAll(() => {
 		vi.clearAllMocks();
 	});
diff --git a/packages/editor-ui/src/composables/__tests__/useAutocompleteTelemetry.test.ts b/packages/editor-ui/src/composables/__tests__/useAutocompleteTelemetry.test.ts
index 54c105d124213..13df44088d3a1 100644
--- a/packages/editor-ui/src/composables/__tests__/useAutocompleteTelemetry.test.ts
+++ b/packages/editor-ui/src/composables/__tests__/useAutocompleteTelemetry.test.ts
@@ -28,9 +28,6 @@ vi.mock('@/stores/n8nRoot.store', () => ({
 }));
 
 describe('useAutocompleteTelemetry', () => {
-	const originalRangeGetBoundingClientRect = Range.prototype.getBoundingClientRect;
-	const originalRangeGetClientRects = Range.prototype.getClientRects;
-
 	beforeEach(() => {
 		setActivePinia(createTestingPinia());
 	});
@@ -39,20 +36,6 @@ describe('useAutocompleteTelemetry', () => {
 		vi.clearAllMocks();
 	});
 
-	beforeAll(() => {
-		Range.prototype.getBoundingClientRect = vi.fn();
-		Range.prototype.getClientRects = () => ({
-			item: vi.fn(),
-			length: 0,
-			[Symbol.iterator]: vi.fn(),
-		});
-	});
-
-	afterAll(() => {
-		Range.prototype.getBoundingClientRect = originalRangeGetBoundingClientRect;
-		Range.prototype.getClientRects = originalRangeGetClientRects;
-	});
-
 	const getEditor = (defaultDoc = '') => {
 		const extensionCompartment = new Compartment();
 		const state = EditorState.create({
diff --git a/packages/editor-ui/src/composables/__tests__/useExpressionEditor.test.ts b/packages/editor-ui/src/composables/__tests__/useExpressionEditor.test.ts
index dac86b8ca81ac..916b80952559e 100644
--- a/packages/editor-ui/src/composables/__tests__/useExpressionEditor.test.ts
+++ b/packages/editor-ui/src/composables/__tests__/useExpressionEditor.test.ts
@@ -21,9 +21,6 @@ vi.mock('@/stores/ndv.store', () => ({
 }));
 
 describe('useExpressionEditor', () => {
-	const originalRangeGetBoundingClientRect = Range.prototype.getBoundingClientRect;
-	const originalRangeGetClientRects = Range.prototype.getClientRects;
-
 	const mockResolveExpression = () => {
 		const mock = vi.fn();
 		vi.spyOn(workflowHelpers, 'useWorkflowHelpers').mockReturnValueOnce({
@@ -42,20 +39,6 @@ describe('useExpressionEditor', () => {
 		vi.clearAllMocks();
 	});
 
-	beforeAll(() => {
-		Range.prototype.getBoundingClientRect = vi.fn();
-		Range.prototype.getClientRects = () => ({
-			item: vi.fn(),
-			length: 0,
-			[Symbol.iterator]: vi.fn(),
-		});
-	});
-
-	afterAll(() => {
-		Range.prototype.getBoundingClientRect = originalRangeGetBoundingClientRect;
-		Range.prototype.getClientRects = originalRangeGetClientRects;
-	});
-
 	test('should create an editor', async () => {
 		const root = ref<HTMLElement>();
 		const { editor } = useExpressionEditor({
diff --git a/packages/editor-ui/src/composables/useExpressionEditor.ts b/packages/editor-ui/src/composables/useExpressionEditor.ts
index bab6047834114..a4a423f5129ce 100644
--- a/packages/editor-ui/src/composables/useExpressionEditor.ts
+++ b/packages/editor-ui/src/composables/useExpressionEditor.ts
@@ -385,10 +385,8 @@ export const useExpressionEditor = ({
 	function setCursorPosition(pos: number | 'lastExpression' | 'end'): void {
 		if (pos === 'lastExpression') {
 			const END_OF_EXPRESSION = ' }}';
-			pos = Math.max(
-				readEditorValue().lastIndexOf(END_OF_EXPRESSION),
-				editor.value?.state.doc.length ?? 0,
-			);
+			const endOfLastExpression = readEditorValue().lastIndexOf(END_OF_EXPRESSION);
+			pos = endOfLastExpression !== -1 ? endOfLastExpression : editor.value?.state.doc.length ?? 0;
 		} else if (pos === 'end') {
 			pos = editor.value?.state.doc.length ?? 0;
 		}
diff --git a/packages/workflow/test/ExpressionExtensions/StringExtensions.test.ts b/packages/workflow/test/ExpressionExtensions/StringExtensions.test.ts
index cdff80759e634..7f437953c06ed 100644
--- a/packages/workflow/test/ExpressionExtensions/StringExtensions.test.ts
+++ b/packages/workflow/test/ExpressionExtensions/StringExtensions.test.ts
@@ -270,7 +270,13 @@ describe('Data Transformation Functions', () => {
 				test1: 1,
 				test2: '2',
 			});
-			expect(evaluate('={{ "hi".parseJson() }}')).toBeUndefined();
+		});
+
+		test('.parseJson should throw on invalid JSON', () => {
+			expect(() => evaluate("={{ \"{'test1':1,'test2':'2'}\".parseJson() }}")).toThrowError(
+				"Parsing failed. Check you're using double quotes",
+			);
+			expect(() => evaluate('={{ "No JSON here".parseJson() }}')).toThrowError('Parsing failed');
 		});
 
 		test('.toBoolean should work on a string', () => {

From 12054bd99b76bf2a5617e3c73af0273bb8811ea5 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 28 Mar 2024 12:35:17 +0100
Subject: [PATCH 7/7] Format with upgraded prettier

---
 .../InlineExpressionEditor/InlineExpressionEditorOutput.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
index 19279c5e29f73..4c2bda319505a 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
@@ -72,8 +72,8 @@ const resolvedSegments = computed<Resolved[]>(() => {
 				segment.kind === 'plaintext'
 					? segment.plaintext.length
 					: segment.resolved
-					  ? (segment.resolved as string | number | boolean).toString().length
-					  : 0;
+						? (segment.resolved as string | number | boolean).toString().length
+						: 0;
 			segment.to = cursor;
 			return segment;
 		})