Add ESM localization documentation and working sample

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

samples/browser-esm-localized/index.js

@@ -0,0 +1,74 @@
+// Import German localization before importing Monaco Editor
+import '../../out/monaco-editor/esm/nls.messages.de.js';
+import * as monaco from '../../out/monaco-editor/esm/vs/editor/editor.api.js';
+
+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';
+	}
+};
+
+// Language selector functionality
+const languageSelector = document.getElementById('language-selector');
+const reloadButton = document.getElementById('reload-button');
+const editorContainer = document.getElementById('container');
+
+// Function to reload the page with a different language
+function loadLanguage(language) {
+	// Store the selected language in localStorage
+	localStorage.setItem('monaco-language', language);
+	// Reload the page to apply the new language
+	window.location.reload();
+}
+
+// Check if a different language was selected
+const selectedLanguage = localStorage.getItem('monaco-language') || 'de';
+languageSelector.value = selectedLanguage;
+
+// If the current import doesn't match the selected language, we need to reload
+const currentLanguage = 'de'; // This matches our import above
+
+if (selectedLanguage !== currentLanguage) {
+	// For demonstration purposes, we'll show a message to reload manually
+	// In a real application, you would dynamically import the language
+	document.body.innerHTML = `
+		<h2>Monaco Editor ESM Localization Sample</h2>
+		<p>Please reload the page to apply the ${selectedLanguage} language setting.</p>
+		<button onclick="window.location.reload()">Reload Page</button>
+	`;
+} else {
+	// Create the editor with German localization
+	languageSelector.addEventListener('change', (e) => {
+		loadLanguage(e.target.value);
+	});
+
+	reloadButton.addEventListener('click', () => {
+		loadLanguage(languageSelector.value);
+	});
+
+	monaco.editor.create(editorContainer, {
+		value: [
+			'function x() {',
+			'\t// This editor uses German localization',
+			'\t// Try right-clicking to see the German context menu',
+			'\t// Or press F1 to see the German command palette',
+			'\tconsole.log("Hallo Welt!");',
+			'}'
+		].join('\n'),
+		language: 'javascript',
+		theme: 'vs-dark',
+		minimap: { enabled: false }
+	});
+}