How to use the default languages supported by monaco

[yenienserrano]

Good morning I am trying to integrate @osd/monaco, but I would like to use the xml that is defined by default in Monaco but I can't use it. Is there any way to use the default languages that Monaco supports in what you offer?

OpenSearch Dashboards

Monaco

[ananzh]

Yes. I think there are two steps:
First of all, you can create a new lexer rules file for XML in a similar way to the existing files in packages/osd-monaco/src/xjson/lexer_rules/ for xml. A simple example is:

import { monaco } from '../../monaco';

export const ID = 'xml';

export const lexerRules: monaco.languages.IMonarchLanguage  = {
  tokenizer: {
    root: [
      [/\<\?xml/, 'declaration'],
      [/(\<)(\w+)(\s*)(\w+=)?/, ['tag', 'tag-$2', '', 'attribute-name']],
      [/\>/, 'tag'],
      [/\<\//, 'tag'],
      [/\<\!/, 'comment'],
      [/&\w+;/, 'string.escape'],
      [/[^\>\<]+/, 'text'],
    ],
  },
};

Second, you need to register it in packages/osd-monaco/src/xjson/lexer_rules/index.ts. This file is used to register the lexer rules with Monaco. See the bottom two lines I added for xml.

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import * as xJson from './xjson';
import * as opensearchql from './opensearchql';
import * as painless from './painless';
import * as xml from './xml';

export const registerLexerRules = (m: typeof monaco) => {
  m.languages.register({ id: xJson.ID });
  m.languages.setMonarchTokensProvider(xJson.ID, xJson.lexerRules);
  m.languages.register({ id: painless.ID });
  m.languages.setMonarchTokensProvider(painless.ID, painless.lexerRules);
  m.languages.register({ id: opensearchql.ID });
  m.languages.setMonarchTokensProvider(opensearchql.ID, opensearchql.lexerRules);
  m.languages.register({ id: xml.ID }); // Register the new language ID for XML 
  m.languages.setMonarchTokensProvider(xml.ID, xml.lexerRules); // Register the new language definition for XML 
};

Then you might to re-build the monaco package with yarn build and now you will see

Pls note that:

• The lexer rule file I provided is a simple example with minimal root config. Tokenizer object should define regular expressions and tokens for different elements of the XML syntax.
• You might need to clean the browser cache or use Incognito to see the difference.

@yenienserrano I am very new to this monoca package. Just start to study it due to one PR review. Pls help us contribute with your understanding and usage. Thanks for the questions and pls let me know if this is working.

[yenienserrano]

Hello if this way if it works, I had tried it, but I wanted to know if there was a simpler way, since Monaco had the default languages, but well we do it this way, thank you very much.

[yenienserrano]

What are your plans for the code editor? As far as I can see, Monaco is going to be the only code editor, right? If so, do you plan to add all the languages that monaco has at some point?

[joshuarrrr]

Yeah, @yenienserrano, it should be easier to enable supported languages than custom ones - we're actually in the process of adding JSON (see #3424). Once we complete that, I think we'll have more of a roadmap that we can follow.

As for the code editor, yes, the plan is to consolidate on monaco - but we obviously need to invest more in the basic monaco integration to make it easier to work with and extend.