UI: Use local Monaco editor module instead of CDN

[parkhojeong]

Issue

Environments without internet access could not load monaco

Code tab	Details Tab	Trigger Dag params

Repro

See a UI with Monaco, such as the Code tab in Dag details, without internet access.

Chrome: 2 options

• Dev Tools - Network - Set Network offline
• Block url pattern: More Tools - Reuqest Conditions - Add https://cdn.jsdelivr.net
  document: https://developer.chrome.com/docs/devtools/request-conditions

Root Cause

monaco was already present in the dependency tree through @monaco-editor/react, but Airflow did not
import or configure it directly. As a result, the Monaco loader fell back to its default CDN path at runtime.

  airflow-core/src/airflow/ui/node_modules/.pnpm/@monaco-editor+loader@1.5.0/node_modules/@monaco-editor/loader/lib/es/config/index.js:1

  var config = {
    paths: {
      vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs'
    }
  };

Fix

This change wires the existing Monaco package into the UI bundle explicitly and declares it as a direct
dependency because the Airflow UI now imports it directly.

Lazy loading was also applied to Monaco package.

The existing Monaco runtime is loaded from CDN at version 0.52.2, so this PR keeps the bundled dependency aligned with that version. Any Monaco version upgrade should be handled in a separate PR.

Code tab	Details Tab	Trigger Dag params

Test code Fixed(Minor)

The selector for line number elements in the Dag code page test was too broad. This updates it to target the actual Monaco line numbers. In Firefox E2E, .monaco-editor .line-numbers also matches a hidden textAreaCover element before the visible line numbers.
You can use console.log(await this.page.locator(".monaco-editor").evaluate((el) => el.outerHTML)); after await this.waitForCodeReady();

browser monaco dom structure

<div class="monaco-editor ..." ...>
   ...
  <div class="margin-view-overlays">
    <div style="...">
       <div class="current-line" ...></div>
        <div  class="line-numbers active-line-number" ...>1</div>
      </div>
  </div>
</div>

firefox e2e dom structure

<div class="monaco-editor ..." ...>
    <div class="overflow-guard">
      <textarea class="inputarea ..."></textarea>
      <div class="... line-numbers" ...></div>

      <div class="margin">
        <div class="margin-view-overlays">
          <div>
            <div class="current-line"></div>
            <div class="line-numbers active-line-number">1</div>
          </div>
          <div>
            <div class="line-numbers">2</div>
          </div>
        </div>
      </div>
    </div>
  </div>

• closes: Code is loading and never shown #66020, GUI loader.js doesn't load with CSP in place #66589

---

Was generative AI tooling used to co-author this PR?

• Yes (codex gpt-5.5)

[potiuk]

This code is now vendored in? If so -> information about it should be placed in approproate NOTICE File - detailing the verion and licence see Chakra and hue example in there.

[potiuk]

Should be "request changes".

[parkhojeong]

This code is now vendored in? If so -> information about it should be placed in approproate NOTICE File - detailing the verion and licence see Chakra and hue example in there.

@potiuk

Thanks for catching this!

I added it to airflow-core/LICENSE and airflow-core/3rd-party-licenses/LICENSE-monaco-editor.txt. I left NOTICE unchanged because there is no modified Monaco portion or separate required notice. 52cdc39

[parkhojeong]

#66589 is similar to #66020, so I updated the PR description with closes: #66020, #66589.

[choo121600]

@potiuk Could you review this again?