fix(editor): Fix read-only mode in inline expression editor (#9232)

Author: elsmr

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,
 });

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 {

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');
+		});
+	});
 });