From 99f384e2cf6b16d08a8bdc150a2833463b35f14b Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 26 Apr 2024 15:12:06 +0200
Subject: [PATCH] fix(editor): Fix read-only mode in inline expression editor
 (#9232)

---
 .../InlineExpressionEditorInput.vue              |  6 +++---
 .../src/components/ParameterOptions.vue          |  1 +
 .../__tests__/ExpressionParameterInput.test.ts   | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 9356a69a02..1e547c08ac 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -25,14 +25,14 @@ type Props = {
 	modelValue: string;
 	path: string;
 	rows?: number;
-	isReadonly?: boolean;
+	isReadOnly?: boolean;
 	additionalData?: IDataObject;
 	eventBus?: EventBus;
 };
 
 const props = withDefaults(defineProps<Props>(), {
 	rows: 5,
-	isReadonly: false,
+	isReadOnly: false,
 	additionalData: () => ({}),
 	eventBus: () => createEventBus(),
 });
@@ -70,7 +70,7 @@ const {
 	editorRef: root,
 	editorValue,
 	extensions,
-	isReadOnly: props.isReadonly,
+	isReadOnly: props.isReadOnly,
 	autocompleteTelemetry: { enabled: true, parameterPath: props.path },
 	additionalData: props.additionalData,
 });
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
index cb0a38392a..ebb5d74196 100644
--- a/packages/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -203,6 +203,7 @@ export default defineComponent({
 <style lang="scss" module>
 .container {
 	display: flex;
+	min-height: 22px;
 }
 
 .loader {
diff --git a/packages/editor-ui/src/components/__tests__/ExpressionParameterInput.test.ts b/packages/editor-ui/src/components/__tests__/ExpressionParameterInput.test.ts
index 9dcfa00fcf..aaad6c9dc5 100644
--- a/packages/editor-ui/src/components/__tests__/ExpressionParameterInput.test.ts
+++ b/packages/editor-ui/src/components/__tests__/ExpressionParameterInput.test.ts
@@ -47,4 +47,20 @@ describe('ExpressionParameterInput', () => {
 		await userEvent.click(baseElement);
 		expect(emitted('blur')).toHaveLength(1);
 	});
+
+	describe('in read-only mode', () => {
+		test('it should render a read-only expression input', async () => {
+			const { container } = renderComponent({
+				props: {
+					modelValue: '={{$json.foo}}',
+					isReadOnly: true,
+				},
+			});
+
+			const editor = container.querySelector('.cm-content') as HTMLDivElement;
+			expect(editor).toBeInTheDocument();
+			expect(editor.getAttribute('contenteditable')).toEqual('false');
+			expect(editor.getAttribute('aria-readonly')).toEqual('true');
+		});
+	});
 });