fix(editor): Make sure HTML editor field is not editable when workflow is in read only mode (#17561)

packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue

@@ -33,9 +33,15 @@ const emit = defineEmits<{
 	finishedLoading: [];
 }>();
 
-const props = defineProps<{
+const props = withDefaults(
-	hasChanges: boolean;
+	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>

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"

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,