[WIP] Document how to enable localization with ESM

[Copilot]

• Explore repository structure and understand current state
• Examine existing AMD localization sample
• Identify existing ESM samples
• Discover built ESM NLS message files
• Understand how NLS messages work in ESM context
• Document ESM localization in docs/integrate-esm.md
• Create ESM localization sample
• Test the documentation and sample
• Verify the sample works correctly by testing in browser

Fixes #4997

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[SuperManito]

@hediet Please export the root type instead of use import * as monaco from 'monaco-editor'.

Because cannot use typeof import('monaco-editor') directly. This will cause the localized nls language pack to not be loaded first. Now the type of monaco cache variable instance can only be represented by any. Maybe there are some problems with my understanding, but after some attempts, I really can't effectively solve the any type problem in TS.

let monaco: any | null = null
let loadingPromise: Promise<any> | null = null

export async function loadMonaco(): Promise<any> {
  if (monaco) {
    return monaco
  }
  if (loadingPromise) {
    return loadingPromise
  }
  loadingPromise = (async () => {
    try {
      // Project Locale Logic
      const projectLocale = localStorage.getItem('locale') || 'en_US'
      const normalizedLocale = projectLocale.toLowerCase().replace('_', '-')

      switch (normalizedLocale) {
        case 'zh-cn':
        case 'zh-hans':
        case 'zh':
          await import('monaco-editor/esm/nls.messages.zh-cn.js')
          break
        case 'zh-tw':
        case 'zh-hant':
          await import('monaco-editor/esm/nls.messages.zh-tw.js')
          break
        case 'ja':
          await import('monaco-editor/esm/nls.messages.ja.js')
          break
        case 'de':
          await import('monaco-editor/esm/nls.messages.de.js')
          break
        case 'es':
          await import('monaco-editor/esm/nls.messages.es.js')
          break
        case 'fr':
          await import('monaco-editor/esm/nls.messages.fr.js')
          break
        case 'it':
          await import('monaco-editor/esm/nls.messages.it.js')
          break
        case 'ru':
          await import('monaco-editor/esm/nls.messages.ru.js')
          break
      }
      monaco = await import('monaco-editor')
      return monaco
    }
    catch {}
    finally {
      loadingPromise = null
    }
  })()
  return loadingPromise
}

export function getMonaco(): any | null {
  return monaco
}

export function clearMonacoCache(): void {
  monaco = null
  loadingPromise = null
}

I also think the current nls language loading design is not very user-friendly. It causes a noticeable delay when loading a component for the first time. It now needs to be used in conjunction with the Loading component. Why can't we add nls configuration to EditorOptions?

video-convert-1757725858359.webm