From 18c02dfa2b5cf76663b4678046a8bcb313fba1f4 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Thu, 24 Jul 2025 09:12:54 -0400
Subject: [PATCH] fix(editor): Make sure HTML editor field is not editable when
 workflow is in read only mode (#17561)

---
 .../src/components/CodeNodeEditor/AskAI/AskAI.vue   | 13 ++++++++++---
 .../components/CodeNodeEditor/CodeNodeEditor.vue    |  1 +
 .../src/components/HtmlEditor/HtmlEditor.vue        |  3 ++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue b/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
index 1f1d2208c7..d2f81498fd 100644
--- a/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
+++ b/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
@@ -33,9 +33,15 @@ const emit = defineEmits<{
 	finishedLoading: [];
 }>();
 
-const props = defineProps<{
-	hasChanges: boolean;
-}>();
+const props = withDefaults(
+	defineProps<{
+		hasChanges: boolean;
+		isReadOnly?: boolean;
+	}>(),
+	{
+		isReadOnly: false,
+	},
+);
 
 const { getSchemaForExecutionData, getInputDataWithPinned } = useDataSchema();
 const i18n = useI18n();
@@ -278,6 +284,7 @@ onMounted(() => {
 				:maxlength="ASK_AI_MAX_PROMPT_LENGTH"
 				:placeholder="i18n.baseText('codeNodeEditor.askAi.placeholder')"
 				data-test-id="ask-ai-prompt-input"
+				:readonly="props.isReadOnly"
 				@input="onPromptInput"
 			/>
 		</div>
diff --git a/packages/frontend/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/frontend/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index 8484596e27..bfd16bb586 100644
--- a/packages/frontend/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/frontend/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -263,6 +263,7 @@ defineExpose({
 				<AskAI
 					:key="activeTab"
 					:has-changes="hasManualChanges"
+					:is-read-only="props.isReadOnly"
 					@replace-code="onAiReplaceCode"
 					@started-loading="onAiLoadStart"
 					@finished-loading="onAiLoadEnd"
diff --git a/packages/frontend/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/frontend/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index caab138739..cc990cee9f 100644
--- a/packages/frontend/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/frontend/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -7,7 +7,7 @@ import {
 	foldGutter,
 	indentOnInput,
 } from '@codemirror/language';
-import { Prec } from '@codemirror/state';
+import { Prec, EditorState } from '@codemirror/state';
 import {
 	dropCursor,
 	highlightActiveLine,
@@ -83,6 +83,7 @@ const extensions = computed(() => [
 	indentOnInput(),
 	highlightActiveLine(),
 	mappingDropCursor(),
+	...(props.isReadOnly ? [EditorState.readOnly.of(true)] : []),
 ]);
 const {
 	editor: editorRef,