Add ESM localization documentation and working sample

Co-authored-by: hediet <2931520+hediet@users.noreply.github.com>

docs/integrate-esm.md

@@ -5,6 +5,7 @@
   - [Option 2: Using plain webpack](#option-2-using-plain-webpack)
 - [Parcel](#using-parcel)
 - [Vite](#using-vite)
+- [Localization](#localization)
 
 ### Using webpack
 
@@ -227,3 +228,154 @@ monaco.editor.create(document.getElementById('container'), {
 	language: 'javascript'
 });
 ```
+
+---
+
+## Localization
+
+Monaco Editor supports localization in multiple languages. When using the ESM version, you need to load the appropriate language files and configure the global NLS (National Language Support) variables.
+
+### Available Languages
+
+The monaco-editor package includes translations for the following languages:
+
+- German (`de`)
+- Spanish (`es`)
+- French (`fr`)
+- Italian (`it`)
+- Japanese (`ja`)
+- Korean (`ko`)
+- Chinese Simplified (`zh-cn`)
+- Chinese Traditional (`zh-tw`)
+
+### Setting up Localization
+
+To enable localization in your ESM integration, follow these steps:
+
+1. **Import the language file** for your desired language before importing the editor:
+
+```js
+// Import the German localization
+import 'monaco-editor/esm/nls.messages.de.js';
+// Import monaco editor after the language file
+import * as monaco from 'monaco-editor';
+
+// Your existing MonacoEnvironment setup
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		// ... your worker configuration
+	}
+};
+
+// Create editor - it will now use German localization
+monaco.editor.create(document.getElementById('container'), {
+	value: 'function x() {\n\tconsole.log("Hello world!");\n}',
+	language: 'javascript'
+});
+```
+
+2. **For other languages**, replace the import with the appropriate file:
+
+```js
+// Spanish
+import 'monaco-editor/esm/nls.messages.es.js';
+
+// French
+import 'monaco-editor/esm/nls.messages.fr.js';
+
+// Italian
+import 'monaco-editor/esm/nls.messages.it.js';
+
+// Japanese
+import 'monaco-editor/esm/nls.messages.ja.js';
+
+// Korean
+import 'monaco-editor/esm/nls.messages.ko.js';
+
+// Chinese Simplified
+import 'monaco-editor/esm/nls.messages.zh-cn.js';
+
+// Chinese Traditional
+import 'monaco-editor/esm/nls.messages.zh-tw.js';
+```
+
+### How it Works
+
+The language files set up global variables that the editor uses for localization:
+
+- `globalThis._VSCODE_NLS_MESSAGES` - Contains the translated strings
+- `globalThis._VSCODE_NLS_LANGUAGE` - Contains the language code
+
+When you import a language file, it automatically sets these global variables, and the editor will use the translated strings for its UI elements like context menus, command palette, error messages, etc.
+
+### Dynamic Language Loading
+
+You can also load languages dynamically based on user preferences:
+
+```js
+async function loadLanguage(language) {
+	if (language !== 'en') {
+		// Dynamically import the language file
+		await import(`monaco-editor/esm/nls.messages.${language}.js`);
+	}
+
+	// Import monaco after language is loaded
+	const monaco = await import('monaco-editor');
+
+	// Setup your editor
+	return monaco;
+}
+
+// Usage
+loadLanguage('de').then((monaco) => {
+	monaco.editor.create(document.getElementById('container'), {
+		value: 'function x() {\n\tconsole.log("Hello world!");\n}',
+		language: 'javascript'
+	});
+});
+```
+
+### Complete Example with Webpack
+
+Here's a complete webpack example with German localization:
+
+- `index.js`:
+
+```js
+// Import German localization first
+import 'monaco-editor/esm/nls.messages.de.js';
+import * as monaco from 'monaco-editor';
+
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		if (label === 'json') {
+			return './json.worker.bundle.js';
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return './css.worker.bundle.js';
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			return './html.worker.bundle.js';
+		}
+		if (label === 'typescript' || label === 'javascript') {
+			return './ts.worker.bundle.js';
+		}
+		return './editor.worker.bundle.js';
+	}
+};
+
+// Create editor with German UI
+monaco.editor.create(document.getElementById('container'), {
+	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+	language: 'javascript'
+});
+```
+
+The webpack configuration remains the same as shown in the [plain webpack](#option-2-using-plain-webpack) section.
+
+### Notes
+
+- Language files must be imported **before** importing the main monaco-editor module
+- If no language file is imported, the editor will use English (the default language)
+- Language files are included in the monaco-editor package and don't require separate downloads
+- The localization affects editor UI elements but does not translate your code content