monaco-editor/samples/browser-esm-localized/index.js
copilot-swe-agent[bot] 4dc457ffe4 Add ESM localization documentation and working sample
Co-authored-by: hediet <2931520+hediet@users.noreply.github.com>
2025-09-11 15:57:07 +00:00

74 lines
2.5 KiB
JavaScript

// 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 }
});
}