monaco-editor and monaco-yaml together

[eftikharEmad]

does any one have any Idea how to add monaco-yaml to diff-editor
https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-hello-diff-world

[gautamits]

I could not even integrate monaco-yaml with monaco, rest aside diff-editor. Have you ?

[eftikharEmad]

I could not even integrate monaco-yaml with monaco, rest aside diff-editor. Have you ?

no, my target is to add validation on monaco diff-editor , I was able to use js-yaml to add the required functionality.
check the demo http://nodeca.github.io/js-yaml/
check this line https://github.com/nodeca/js-yaml/blob/master/support/demo_template/demo.js#L65

you can get use of

    modifiedModel.onDidChangeContent(function(e) {
      clearTimeout(timer);
      timer = setTimeout(parse, 1000);
    });
  // where parse is a function that read the diff-editor modified value and show error message if the content is not valid

[gautamits]

I could not even integrate monaco-yaml with monaco, rest aside diff-editor. Have you ?

no, my target is to add validation on monaco diff-editor , I was able to use js-yaml to add the required functionality.
check the demo http://nodeca.github.io/js-yaml/
check this line https://github.com/nodeca/js-yaml/blob/master/support/demo_template/demo.js#L65

you can get use of

    modifiedModel.onDidChangeContent(function(e) {
      clearTimeout(timer);
      timer = setTimeout(parse, 1000);
    });
  // where parse is a function that read the diff-editor modified value and show error message if the content is not valid

Your implementation is impressive, I have done something similar for now in my application where I added a textarea on top of editor showing any parsing errors. so it takes minimal height. But @pengx17 has made a demo of inline validation using yaml-language-server. https://gautamits.github.io/json-schema/ . I am still finding it hard to integrate inline validation with all webpack bundling stuff.

[eftikharEmad]

@gautamits yah I did the same when I could not add this feature. will keep it as enhancement for later on

[gautamits]

@gautamits yah I did the same when I could not add this feature. will keep it as enhancement for later on

Sure @eftikharEmad . Please let me know if you make any progress.

[MarijnPessers]

I got monaco-yaml working in monaco-editor. The thing I don't know how to get done is export it all so that it works in a release.
These are the steps I did:

Used information from these pages
Found information on these pages

https://stackoverflow.com/questions/50606676/how-do-i-add-a-new-language-syntax-to-monaco-editor
https://github.com/Microsoft/monaco-languages
https://github.com/Microsoft/monaco-editor/blob/master/metadata.js#L68-L70

Open the destination folder in VS Code
Clone the monaco editor

$ git clone https://github.com/Microsoft/monaco-editor
Go to the folder
$ cd monaco-editor
Install
~/monaco-editor$ npm install .
add your own language. In this case monaco-yaml
~/monaco-editor$ npm install monaco-yaml

Open ~/metadata.js in the root and add the references to the monaco-yaml project
Be sure to check if the references to your files are correct. Use existing configuration for comparison.

,
{
	name: 'monaco-yaml',
	contrib: 'vs/language/yaml/monaco.contribution',
	modulePrefix: 'vs/language/yaml',
	paths: {
		src: '/monaco-yaml/dev',
		'npm/dev': 'node_modules/monaco-yaml/dev',
		'npm/min': 'node_modules/monaco-yaml/min',
		esm: 'node_modules/monaco-yaml/esm',
	}
}

Run it
~/monaco-editor$ npm run simpleserver

It works. Now this next part Is where I tried to get this to work in a release but I failed. If anyone can help me that would be nice :)

Register it in the exports in ~/monaco-editor/ci/webpackcongfig.cs
Add the this entry:
"yaml.worker": 'monaco-yeaml/esm/yaml.worker',

Next ~/monaco-editor$ npm run release will give us 3 errors (one at a time and I tried to fix them.
The error are all in the format: Non-relative import for unknown module: monaco-editor/esm/vs/editor/editor.worker in <path>\monaco-editor\node_modules\monaco-yaml\esm\yaml.worker.js or an other file.
Fix this:

File: monaco-editor\node_modules\monaco-yaml\esm\yaml.worker.js
Replace
import * as worker from 'monaco-editor/esm/vs/editor/editor.worker';
with
import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker';

File: monaco-editor\node_modules\monaco-yaml\esm\languageservice\parser\yamlParser04.js
and file monaco-editor\node_modules\monaco-yaml\esm\languageservice\parser\yamlParser07.js
Replace
import { Schema, Type } from 'js-yaml';
with
import { Schema, Type } from '../../../../js-yaml';

Build the release again
~/monaco-editor$ npm run release

In the folder ~/monaco-editor/release/min/vs/language the language (yaml in this case) is created.
The Editor file is also different. But I can't seem to get yaml working in this release. I tried to add it to https://github.com/serdarciplak/BlazorMonaco project but to no avail. Maybe because prettier is missing?

[gautamits]

Hi @Monedula1 , just to add

Your comment is very well written and easier to follow along. I repeated the steps you have mentioned and also published a release in which yaml language worker was loading, but somehow couldnt get it to validate syntax. Please let me know if you have made any progress regarding this or you need any help.

[MarijnPessers]

@gautamits Thank you. And yes I would love for a monaco expert to help me find out what I missed. I think there is something missing in the build release that makes it not do syntax coloring yet.

[gautamits]

Hi @Monedula1 , Can you please upload the custom release you built ?

[MarijnPessers]

@gautamits
I build the release and you can find it here: https://github.com/Monedula1/monaco-yaml-release

[gautamits]

@Monedula1 thanks for hosting. I tried your release and it throws this error on console though Unexpected usage at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule. Same thing happened with my release as well which i created following your steps. I went through some github issues as well but no help.

[MarijnPessers]

@gautamits thanks for looking at it. I am a C# developer mostly so I don't know what I am still missing in my guide. The validation works if you edit yaml in the the testpage form monaco-editor.

I found this thread: uiwjs/react-monacoeditor#1
Which states:

HTML5 does not allow pages loaded on file:// to create web workers. Please load the editor with a web server on http:// or https:// schemes.

Some yaml reference is not correct yet... I don't have much time to pursue this right now. I will definitely asap.

[gautamits]

Sure. Thanks.

[MarijnPessers]

GOT IT WORKING!
This has given me headackes, but I finally found some time and I found what else is wrong.
I do not know if this will solve it for everyone but it did in my BlazorMonaco (1.2.1) from Nuget.

After including the min and min-maps folder from the release build (as described above) into the project the error I got was that monaco was not known. While loading the yaml library the javascript responsible for that piece needed the variable monaco to exist. After the page was done loading it did exist, but not at the moment it is put in the editor.main.js file. So I put the method into an async function that waits till monaco is known and then loads the yaml functionality.
It works.

This is the code:

async function loadYamlWhenMonacoKnown() {
  console.log("Waiting on monaco...");
  var monacoDefined = false;
  while (!monacoDefined) {
    try {
      monaco;
      monacoDefined = true;
      console.log("monaco loaded!");
    } catch (e) {
      //wait 0.1 second
      console.log("waiting...");
    }
    await wait(100);
  }
<code snippet of the yaml loading part>
  !function(e){...
  define("vs/ed...
</code>
}

loadYamlWhenMonacoKnown();

@gautamits does this work for you as well?

[remcohaszing]

It appears Monaco doesn’t support hover effects in readonly mode. By default the original code of the diff editor is readonly.

I.e., try the following code in the playground:

monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
  validate: true,
  schemas: [{
    uri: 'http://myserver/schema.json',
    fileMatch: ['a://*.json'],
    schema: {
      type: 'object',
      properties: {
        p1: {
          enum: ['v1', 'v2']
        },
        p2: {
          enum: ['x1', 'x2']
        }
      }
    }
  }]
});

const original = monaco.editor.createModel(`{
  "p1": "v3"
}
`, 'json', monaco.Uri.parse('a://foo.json'));
const modified = monaco.editor.createModel(`{
  "p2": false
}
`, 'json', monaco.Uri.parse('a://bar.json'));

const diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
  originalEditable: false,
});
diffEditor.setModel({
  original,
  modified,
});

You’ll notice the original (left sie) doesn’t support hover tooltips, but the modified version (right side) does.

If you set originalEditable: true, then the original also supports hover actions and completion.

monaco-yaml can’t control this.