apache · parkhojeong · May 10, 2026 · May 10, 2026 · May 10, 2026 · May 10, 2026
diff --git a/airflow-core/3rd-party-licenses/LICENSE-monaco-editor.txt b/airflow-core/3rd-party-licenses/LICENSE-monaco-editor.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 - present Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/airflow-core/LICENSE b/airflow-core/LICENSE
@@ -236,6 +236,7 @@ The text of each license is also included at 3rd-party-licenses/LICENSE-[project
     (MIT License) normalize.css v3.0.2 (http://necolas.github.io/normalize.css/)
     (MIT License) ElasticMock v1.3.2 (https://github.com/vrcmarcos/elasticmock)
     (MIT License) MomentJS v2.24.0 (http://momentjs.com/)
+    (MIT License) Monaco Editor v0.52.2 (https://github.com/microsoft/monaco-editor)
     (MIT License) eonasdan-bootstrap-datetimepicker v4.17.49 (https://github.com/eonasdan/bootstrap-datetimepicker/)
 
 ========================================================================

diff --git a/airflow-core/NOTICE b/airflow-core/NOTICE
@@ -20,3 +20,11 @@ This product contains a modified portion of 'Chakra UI' developed by Segun Adeba
 (https://github.com/chakra-ui/chakra-ui).
 
 * Copyright 2019, Segun Adebayo
+
+
+Monaco Editor:
+-----
+This product contains 'Monaco Editor' developed by Microsoft Corporation.
+(https://github.com/microsoft/monaco-editor).
+
+* Copyright (c) 2016 - present Microsoft Corporation
@@ -50,6 +50,7 @@
     "i18next": "^25.8.16",
     "i18next-browser-languagedetector": "^8.2.1",
     "i18next-http-backend": "^3.0.5",
+    "monaco-editor": "^0.52.2",
     "next-themes": "^0.4.6",
     "react": "^19.2.5",
     "react-chartjs-2": "^5.3.1",

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import Editor, { type EditorProps } from "@monaco-editor/react";
 import { useRef } from "react";
 
+import Editor, { type EditorProps } from "src/components/MonacoEditor";
 import { useMonacoTheme } from "src/context/colorMode";
 
 type JsonEditorProps = {

@@ -0,0 +1,71 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { loader } from "@monaco-editor/react";
+
+type MonacoEnvironment = {
+  readonly getWorker: (_moduleId: string, label: string) => Worker;
+};
+
+let configurationPromise: Promise<void> | undefined;
+
+const loadMonacoModules = async () => {
+  const monacoApi = import("monaco-editor/esm/vs/editor/editor.api");
+
+  const workerConstructors = Promise.all([
+    import("monaco-editor/esm/vs/editor/editor.worker?worker").then((module) => module.default),
+    import("monaco-editor/esm/vs/language/json/json.worker?worker").then((module) => module.default),
+  ]);
+
+  const languageContributions = Promise.all([
+    import("monaco-editor/esm/vs/basic-languages/python/python.contribution"),
+    import("monaco-editor/esm/vs/language/json/monaco.contribution"),
+  ]);
+
+  const [monaco, [editorWorker, jsonWorker]] = await Promise.all([
+    monacoApi,
+    workerConstructors,
+    languageContributions,
+  ]);
+
+  return { editorWorker, jsonWorker, monaco };
+};
+
+export const configureMonaco = () => {
+  if (configurationPromise !== undefined) {
+    return configurationPromise;
+  }
+
+  configurationPromise = loadMonacoModules()
+    .then(({ editorWorker, jsonWorker, monaco }) => {
+      Reflect.set(globalThis, "MonacoEnvironment", {
+        getWorker: (_moduleId: string, label: string) =>
+          label === "json" ? new jsonWorker() : new editorWorker(),
+      } satisfies MonacoEnvironment);
+
+      loader.config({ monaco });
+    })
+    .catch((error: unknown) => {
+      configurationPromise = undefined;
+      // eslint-disable-next-line no-console
+      console.error("Failed to configure Monaco editor", error);
+      throw error;
+    });
+
+  return configurationPromise;
+};
@@ -0,0 +1,51 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import EditorComponent, {
+  DiffEditor as DiffEditorComponent,
+  type DiffEditorProps,
+  type EditorProps,
+} from "@monaco-editor/react";
+
+import { useMonacoReady } from "./useMonacoReady";
+
+export const MonacoEditor = (props: EditorProps) => {
+  const isMonacoReady = useMonacoReady();
+
+  if (!isMonacoReady) {
+    return null;
+  }
+
+  return <EditorComponent {...props} />;
+};
+
+export const MonacoDiffEditor = (props: DiffEditorProps) => {
+  const isMonacoReady = useMonacoReady();
+
+  if (!isMonacoReady) {
+    return null;
+  }
+
+  return <DiffEditorComponent {...props} />;
+};
+
+export const DiffEditor = MonacoDiffEditor;
+
+export default MonacoEditor;
+
+export type { DiffEditorProps, EditorProps, Monaco, OnMount } from "@monaco-editor/react";
@@ -0,0 +1,43 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useEffect, useState } from "react";
+
+import { configureMonaco } from "./configureMonaco";
+
+export const useMonacoReady = () => {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    void configureMonaco()
+      .then(() => {
+        if (isMounted) {
+          setIsReady(true);
+        }
+      })
+      .catch(() => undefined);
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return isReady;
+};
@@ -17,9 +17,9 @@
  * under the License.
  */
 import { Flex, type FlexProps } from "@chakra-ui/react";
-import Editor, { type OnMount } from "@monaco-editor/react";
 import { useCallback, useState } from "react";
 
+import Editor, { type OnMount } from "src/components/MonacoEditor";
 import { ClipboardRoot, ClipboardIconButton } from "src/components/ui";
 import { useMonacoTheme } from "src/context/colorMode";
 

@@ -17,7 +17,6 @@
  * under the License.
  */
 import { Box, Button, Heading, HStack, Link, VStack } from "@chakra-ui/react";
-import Editor, { type EditorProps } from "@monaco-editor/react";
 import { useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
@@ -33,6 +32,7 @@ import type { ApiError } from "openapi/requests/core/ApiError";
 import type { DAGSourceResponse } from "openapi/requests/types.gen";
 import { DagVersionSelect } from "src/components/DagVersionSelect";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import Editor, { type EditorProps } from "src/components/MonacoEditor";
 import Time from "src/components/Time";
 import { ClipboardRoot, ClipboardButton, Tooltip } from "src/components/ui";
 import { ProgressBar } from "src/components/ui";

@@ -17,8 +17,8 @@
  * under the License.
  */
 import { Box } from "@chakra-ui/react";
-import { DiffEditor, type DiffEditorProps } from "@monaco-editor/react";
 
+import { DiffEditor, type DiffEditorProps } from "src/components/MonacoEditor";
 import { useMonacoTheme } from "src/context/colorMode";
 
 type CodeDiffViewerProps = {

@@ -29,7 +29,7 @@ export class DagCodePage extends BasePage {
   public constructor(page: Page) {
     super(page);
     this.editorContainer = page.locator('[role="code"]');
-    this.lineNumbers = page.locator(".monaco-editor .line-numbers");
+    this.lineNumbers = page.locator(".monaco-editor .margin-view-overlays .line-numbers");
     this.editorScrollable = page.locator(".monaco-scrollable-element");
     this.syntaxTokens = page.locator(".monaco-editor .view-line span span");
     this.viewLines = page.locator(".monaco-editor .view-line");