From ce569549b1b26490dfaca6192deee204ce42e685 Mon Sep 17 00:00:00 2001
From: pierrejeambrun <pierrejbrun@gmail.com>
Date: Tue, 13 Oct 2026 11:12:52 +0200
Subject: [PATCH] Highlight YAML Dag source in the Code tab

The AIP-85 YAML importer (#74586) stores its Dag source with language
"yaml", but the Code tab's Monaco setup only registers the Python,
TypeScript, Java and Go grammars, so YAML Dags rendered as plain text.
Register Monaco's YAML grammar the same way as the others.
---
 .../src/components/MonacoEditor/configureMonaco.test.ts   | 1 +
 .../ui/src/components/MonacoEditor/configureMonaco.ts     | 8 ++++++++
 airflow-core/src/airflow/ui/src/vite-env.d.ts             | 7 +++++++
 3 files changed, 16 insertions(+)

diff --git a/airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.test.ts b/airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.test.ts
index 4cadda7974986..a9816858ae04f 100644
--- a/airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.test.ts
+++ b/airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.test.ts
@@ -27,6 +27,7 @@ const grammars = [
   { id: "java", load: () => import("monaco-editor/languages/definitions/java/java") },
   { id: "python", load: () => import("monaco-editor/languages/definitions/python/python") },
   { id: "typescript", load: () => import("monaco-editor/languages/definitions/typescript/typescript") },
+  { id: "yaml", load: () => import("monaco-editor/languages/definitions/yaml/yaml") },
 ] as const;
 
 describe("Monaco Dag-code grammars", () => {
diff --git a/airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.ts b/airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.ts
index ee574c0ca0ab2..bfc28915c6902 100644
--- a/airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.ts
+++ b/airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.ts
@@ -69,6 +69,7 @@ const loadMonacoModules = async () => {
   const typescriptGrammar = import("monaco-editor/languages/definitions/typescript/typescript");
   const javaGrammar = import("monaco-editor/languages/definitions/java/java");
   const goGrammar = import("monaco-editor/languages/definitions/go/go");
+  const yamlGrammar = import("monaco-editor/languages/definitions/yaml/yaml");
 
   const [
     monaco,
@@ -77,6 +78,7 @@ const loadMonacoModules = async () => {
     { conf: typescriptConf, language: typescriptLanguage },
     { conf: javaConf, language: javaLanguage },
     { conf: goConf, language: goLanguage },
+    { conf: yamlConf, language: yamlLanguage },
   ] = await Promise.all([
     monacoApi,
     workerUrls,
@@ -84,6 +86,7 @@ const loadMonacoModules = async () => {
     typescriptGrammar,
     javaGrammar,
     goGrammar,
+    yamlGrammar,
     jsonContribution,
   ]);
 
@@ -99,6 +102,8 @@ const loadMonacoModules = async () => {
     pythonLanguage,
     typescriptConf,
     typescriptLanguage,
+    yamlConf,
+    yamlLanguage,
   };
 };
 
@@ -129,6 +134,8 @@ export const configureMonaco = () => {
         pythonLanguage,
         typescriptConf,
         typescriptLanguage,
+        yamlConf,
+        yamlLanguage,
       }) => {
         Reflect.set(globalThis, "MonacoEnvironment", {
           getWorker: (_moduleId: string, label: string) =>
@@ -147,6 +154,7 @@ export const configureMonaco = () => {
           { conf: typescriptConf, id: "typescript", language: typescriptLanguage },
           { conf: javaConf, id: "java", language: javaLanguage },
           { conf: goConf, id: "go", language: goLanguage },
+          { conf: yamlConf, id: "yaml", language: yamlLanguage },
         ] as const;
 
         for (const grammar of grammars) {
diff --git a/airflow-core/src/airflow/ui/src/vite-env.d.ts b/airflow-core/src/airflow/ui/src/vite-env.d.ts
index cc1756f032a62..5b70be41e1c64 100644
--- a/airflow-core/src/airflow/ui/src/vite-env.d.ts
+++ b/airflow-core/src/airflow/ui/src/vite-env.d.ts
@@ -56,3 +56,10 @@ declare module "monaco-editor/languages/definitions/go/go" {
   export const language: import("monaco-editor").languages.IMonarchLanguage;
   /* eslint-enable @typescript-eslint/consistent-type-imports */
 }
+
+declare module "monaco-editor/languages/definitions/yaml/yaml" {
+  /* eslint-disable @typescript-eslint/consistent-type-imports */
+  export const conf: import("monaco-editor").languages.LanguageConfiguration;
+  export const language: import("monaco-editor").languages.IMonarchLanguage;
+  /* eslint-enable @typescript-eslint/consistent-type-imports */
+}