Monaco Editor - Prebuilt YAML support

A prebuilt version of monaco-yaml available straight in the browser.

Usage

You can use it straight out of the box, just load the precompiled monaco-editor.js in your browser.

``
npm install monaco-yaml-prebuilt
`

`html

`

Then two objects will be available in your global window scope, monaco for monaco-editor and monacoYaml for monaco-yaml specific APIs:
`javascript
const yamlModelUri = monaco.Uri.parse('a://b/foo.yaml');

const diagnosticsOptions = {
enableSchemaRequest: true,
hover: true,
completion: true,
validate: true,
format: true,
schemas: [
{
uri: 'http://myserver/foo-schema.json',
fileMatch: ['*'],
schema: {
type: 'object',
properties: {
p1: {
enum: ['v1', 'v2'],
},
p2: {
$ref: 'http://myserver/bar-schema.json',
},
},
},
},
{
uri: 'http://myserver/bar-schema.json',
schema: {
type: 'object',
properties: {
q1: {
enum: ['x1', 'x2'],
},
},
},
},
],
};

// YAML specific API
monacoYaml.configureMonacoYaml(monaco, diagnosticsOptions);

const yaml = 'p1: \np2: \n';

monaco.editor.create(document.getElementById('yaml-editor'), {
automaticLayout: true,
model: monaco.editor.createModel(yaml, 'yaml', yamlModelUri),
});
`

Changing languages support

By default, only yaml and json are supported. If you want to add more, you can edit webpack.config.js and rebuild the package:

`
git clone https://github.com/neuroglia-io/monaco-yaml-prebuilt.git
cd monaco-yaml-prebuilt
... edit webpack.config.js
npm run build
``

See Integrating the ESM version of the Monaco Editor - Option 1: Using the Monaco Editor WebPack Plugin for more info.