feat(editor): Support pasting an expression into a number parameter (#15722)

packages/frontend/editor-ui/src/components/ParameterInput.test.ts

@@ -224,7 +224,15 @@ describe('ParameterInput.vue', () => {
 		expect(emitted('update')).toContainEqual([expect.objectContaining({ value: 'foo' })]);
 	});
 
-	test('should correctly handle paste events', async () => {
+	describe('paste events', () => {
+		async function paste(input: HTMLInputElement, text: string) {
+			const expression = new DataTransfer();
+			expression.setData('text', text);
+			await userEvent.clear(input);
+			await userEvent.paste(expression);
+		}
+
+		test('should handle pasting into a string parameter', async () => {
 			const { container, emitted } = renderComponent({
 				props: {
 					path: 'tag',
@@ -240,23 +248,41 @@ describe('ParameterInput.vue', () => {
 			expect(input).toBeInTheDocument();
 			await userEvent.click(input);
 
-		async function paste(text: string) {
+			await paste(input, 'foo');
-			const expression = new DataTransfer();
-			expression.setData('text', text);
-			await userEvent.clear(input);
-			await userEvent.paste(expression);
-		}
-
-		await paste('foo');
 			expect(emitted('update')).toContainEqual([expect.objectContaining({ value: 'foo' })]);
 
-		await paste('={{ $json.foo }}');
+			await paste(input, '={{ $json.foo }}');
 			expect(emitted('update')).toContainEqual([
 				expect.objectContaining({ value: '={{ $json.foo }}' }),
 			]);
 
-		await paste('=flDvzj%y1nP');
+			await paste(input, '=flDvzj%y1nP');
-		expect(emitted('update')).toContainEqual([expect.objectContaining({ value: '==flDvzj%y1nP' })]);
+			expect(emitted('update')).toContainEqual([
+				expect.objectContaining({ value: '==flDvzj%y1nP' }),
+			]);
+		});
+
+		test('should handle pasting an expression into a number parameter', async () => {
+			const { container, emitted } = renderComponent({
+				props: {
+					path: 'percentage',
+					parameter: {
+						displayName: 'Percentage',
+						name: 'percentage',
+						type: 'number',
+					},
+					modelValue: 1,
+				},
+			});
+			const input = container.querySelector('input') as HTMLInputElement;
+			expect(input).toBeInTheDocument();
+			await userEvent.click(input);
+
+			await paste(input, '{{ $json.foo }}');
+			expect(emitted('update')).toContainEqual([
+				expect.objectContaining({ value: '={{ $json.foo }}' }),
+			]);
+		});
 	});
 
 	test('should not reset the value of a multi-select with loadOptionsMethod on load', async () => {

packages/frontend/editor-ui/src/components/ParameterInput.vue

@@ -786,6 +786,16 @@ function onPaste(event: ClipboardEvent) {
 	}
 }
 
+function onPasteNumber(event: ClipboardEvent) {
+	const pastedText = event.clipboardData?.getData('text');
+
+	if (shouldConvertToExpression(pastedText)) {
+		event.preventDefault();
+		valueChanged('=' + pastedText);
+		return;
+	}
+}
+
 function onResourceLocatorDrop(data: string) {
 	emit('drop', data);
 }
@@ -1596,7 +1606,7 @@ onUpdated(async () => {
 				@update:model-value="onUpdateTextInput"
 				@focus="setFocus"
 				@blur="onBlur"
-				@keydown.stop
+				@paste="onPasteNumber"
 			/>
 
 			<CredentialsSelect