Custom language Providers

[Astn]

I'm looking forward to trying this out in my project. 👍

In my setup I need to be able to switch languages between the built in providers, and also custom language providers.

How can we do this?

[serdarciplak]

I'll add the required methods in v1.2.0 which will be ready possibly this weekend.

[Astn]

Great!

[MarijnPessers]

That would be awesome. I have been struggling with monaco-yaml this week. Whenever I had the release build and tried to change it in your project it didn't work. Could you see if you can add monaco-yaml out of the box or maybe as a seperate github library? BlazorMonacoYaml

I have posted the steps that I took to be able to build a release of monaco-yaml here: https://github.com/pengx17/monaco-yaml/issues/17 Maybe I am missing something to make it work.

[serdarciplak]

@Astn 1.2.0 is on and now you can play with editor language. You can set the initial language in construction options and change it at runtime using the SetModelLanguage method.

Construction options :

private StandaloneEditorConstructionOptions EditorConstructionOptions(MonacoEditor editor)
    {
        return new StandaloneEditorConstructionOptions
        {
            Language = "javascript",
            Value = "function xyz() {\n" +
                    "   console.log(\"Hello world!\");\n" +
                    "}"
        };
    }

SetModelLanguage :

    var model = await _editor.GetModel();
    await MonacoEditor.SetModelLanguage(model, "javascript");

I think this is all you need, right?

[serdarciplak]

Hi @Monedula1 Are you trying to use Monaco Editor to edit YAML files? If so, Monaco Editor has built in support for YAML. Just set language to "yaml" in editor construction options.

[MarijnPessers]

@serdarciplak yes I am and it does show yaml colors, but there is no yaml syntax checking. If you take a look at the link I sent you, you will see what Monaco-yaml does extra. That is what I am looking for. In the link I put in my original post, I explain how I try to add yaml in the language folder by building the release. However still it doesn’t seem to work in your repository when I add those 2 files and the editor file. I expect the problem might be on the Monaco-yaml side, but I hope you can add it to this project to have yaml syntax checking out of the box.

[Astn]

Awesome @serdarciplak I've gotta get some sleep but I'll try to get this going when I wake. I'm using it in this project: https://github.com/Astn/ekati

[serdarciplak]

@Monedula1 I've never worked on custom language support, but it looks like you're creating a modified version of monaco-editor and using that one instead. BlazorMonaco is packed with an unmodified version of monaco-editor, and currently you cannot change it with your modified version.

I think, if I enable selecting between the packed version and any other monaco-editor version you need, you'll be able to accomplish what you need. Am I right?

[serdarciplak]

@Astn Looks like you've started a pretty big project. Best luck with that. Looking forward to see it completed.

[MarijnPessers]

Hi @serdarciplak I think you looked at the link. I managed to build a release using yaml language syntax support, but I have no idea if it the release is complete. Replacing the files in the supplied bin folder won't work. It could be that your proposed implementation can work. I would love to see it implemented.

[serdarciplak]

@Monedula1 I've added the option to use a custom monaco-editor setup in v1.2.1 Please see the readme.md file for details.

[MarijnPessers]

@Monedula1 I've added the option to use a custom monaco-editor setup in v1.2.1 Please see the readme.md file for details.

Great! I will check this out asap!

[MarijnPessers]

I got my YAML library working! Thank you very much!

A few notes: You might want to change the .md file to reflect that "" (which is part of your configuration) should be already part of the existing code (when I copied the config I stupidly copied it as well to my server side application). I do not yet have it working on server side but I expect it to be working fine there as well. I plan to refactor this into a Razor Page Library which can be used by both Server side and WASM.

A weird thing (I don't think it has to do with your application per se); Since 3.2.0 is officially released (less than 24 hours ago) a new WASM application would not find the "_content" js & css files. I since then downgraded to rc1. It worked there. I upgraded back again to 3.2.0 and it worked great as well. No idea what caused this and why it is gone now. Clearing the application and cleaning cache would not allow the problem to arise again. It might have to do with Firefox.

The thing I had to do to get the YAML working is "Waiting for monaco". I also added this in the thread I linked in a previous post. Unlike the movie "Waiting for Godot" monaco does show up at some point, but the extra part that included the YAML library was depending on the variable "monaco" to exist. It did not. I put the whole kin and coboodle into an async function that kept on waiting for "monaco" to exist (it does after 0.1 - 0.2 seconds) and then the javascript is loaded. My editor works like I wanted it to work.

Thank you again.

PS also in the readme it says: "GetConstructionOptions". The function defined underneath however is named "EditorConstructionOptions".

[serdarciplak]

Hi @Monedula1 I've corrected the things you've noted. I'll update the repo and the nuget package in an hour. Thanks.

About waiting for monaco; scripts are loaded in the order of their appearence in the source file. Changing their order and adding the script that uses monaco after the monaco editor js files may help your problem.

[MarijnPessers]

Thanks for the tip, but I am aware of that. The thing is that I could not load the editor.main.js any later or other scripts would fail. I didn't explore this in detail but I assume that certain JavaScript is in an IIFE and won't initialize the variable monaco until the page (or some part) is done loading. It only takes between 0.1 and 0.2 seconds delay for it to be known and than I can load the yaml part. So worst case scenario I won't see yaml styling errors appear if I have preloaded my yaml for less than 0.2 seconds.

Thanks for the update. It works fine now. .. Now I only need to find out why my custom JavaScript can't be found when I have it in a referenced Razor Class Library haha (totally different topic). Good programmers always put the bar higher bit by bit :)