How to translate the editor UI to a different language?

[atilara]

Describe the solution you'd like I want to use the editor localized in a language not officially supported in the translation files, in this case, brazillian portuguese.

Describe alternatives you've considered VS Code already has a portuguese translation, as you can find here. Already tried to use it with a library called monaco-editor-nls, but it didn't work when I tried like this:

'use client';
import Box from '@mui/material/Box';
import { loader } from '@monaco-editor/react';
import { useEffect } from 'react';
import pt_BR from '@/vscode-language-pack-pt-BR/translations/main.i18n.json';
import { setLocaleData } from 'monaco-editor-nls';

export default function Poc() {
  useEffect(() => {
    setLocaleData(pt_BR.contents);
    loader.init().then((monaco) => {
      monaco.editor.create(
        document.getElementById('monaco-editor') as HTMLElement,
        {
          value: '// another comment',
        }
      );
    });
  }, []);

  return (
    <Box
      display="flex"
      flexDirection={'column'}
      alignItems="center"
      justifyContent="center"
    >
      <div
        id="monaco-editor"
        style={{
          width: '70%',
          height: '500px',
        }}
      />
    </Box>
  );
}

Do you have any ideas of what I can do?

[suren-atoyan]

Hi @atilara

Please check this

[atilara]

Hey, thanks for answering. Already did. It works fine for the supported languages, the thing is: there is not a portuguese translation present on the files. That is why I ask if it's possible to add translation for a unsupported language.

[suren-atoyan]

Ah, sorry I misunderstood. To be able to use packages like monaco-editor-nls and @/vscode-language-pack-pt-BR, first you need to import monaco as an npm package and not from the CDN. Please check this section of the documentation.

[atilara]

Hey, thanks for answering again. I still didn't get it right. Tried the following implementation:

'use client';
import Box from '@mui/material/Box';
import { useEffect } from 'react';
import { setLocaleData } from 'monaco-editor-nls';
// import pt_BR from 'monaco-editor-nls/locale/pt-br.json';
import pt_BR from '@/vscode-language-pack-pt-BR/translations/main.i18n.json';

export default function Poc() {
  useEffect(() => {
    setLocaleData(pt_BR.contents);
    const monaco = require('monaco-editor/esm/vs/editor/editor.api');
    monaco.editor.create(
      document.getElementById('monaco-editor') as HTMLElement,
      {
        value: 'function x() {\n\tconsole.log("Hello world!");\n}',
        language: 'javascript',
        theme: 'vs-dark',
      }
    );
  }, []);

  return (
    <Box
      display="flex"
      flexDirection={'column'}
      alignItems="center"
      justifyContent="center"
    >
      <div
        id="monaco-editor"
        style={{
          width: '70%',
          height: '500px',
        }}
      />
    </Box>
  );
}

The monaco-editor-nls recommends importing monaco after running the setLocaleData(). Already tried importing from monaco-editor, using: const monaco = require('monaco-editor') and it doesn't work, the translation is not applied. Importing from monaco-editor/esm/vs/editor/editor.api doesn't return any errors but keyboard shortcuts like f1 and ctrl + f doens't work so I can't even see if the translation is applied or not.

Do you have any idea of what I can do? Maybe with a different library or implementation form? Is there any way to access i18n running on monaco-editor and apply the translation?