Monaco Editor for Blazor components

This package is for use in .NET 9 Blazor projects.

Introduction

The Blazor.Monaco package provides a Blazor component which adds the Monaco Editor to your Blazor pages. This is the same engine that powers VS Code. The package handles adding all the required components to your site and the interaction between your C# and JavaScript. By default, Blazor.Monaco loads the Monaco Editor libraries from CloudFlare, but you can specify your own location as well.

Setup

To add to your project, add the package with dotnet.exe:

dotnet add package Blazor.Monaco 

To install, add one line to your program.cs:

builder.Services.AddBlazorMonacoComponents();

If you need to use another version, or a different CDN you can specify this in startup:

builder.Services.AddBlazorMonacoComponents(config =>
{
    //Change this to specify your own CDN. Must be a full URL. 
    config.MonacoLoaderUrl = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs/loader.js";
});

Usage

To add to your page, simply add:

<MonacoEditor 
    ElementId="editor-id" 
    Language="Language.JavaScript" 
    ScriptContent="@MyScript"/>
@code {
    private string MyScript { get; set; } = string.Empty;
}    

If the ScriptContent is null or empty, it will print add example text, relevant to the language.

Component Parameters

• ElementId: The id for the editor component. If not set, a GUID is used.
• ScriptContent: The text that should be displayed.
• Language: Quick way to set the language for the editor. This changes how the contents are displayed.
• EditorOptions: Provide an options object here to specify any option. The Language property above will override the language set in the options. Use private EditorOptions _editorOptions = new(); to initialize a new instance.
• Style: Apply this CSS styling to the editor component.
• Class: Apply this CSS class to the editor component.
• OnEventCallback<bool> OnContentChanged: This is fired the first time when content has changed from initial ScriptContent, and again when changes are manually reverted to original content.
• EventCallback OnSaveRequested: This is fired when the user presses Ctrl+S in the editor window.

If both the Style and Class are undefined, a fallback style of min-height: 10em; is applied. Be sure to provide the proper height for your pages.

Component Interaction

For two-way interaction with the Monaco Editor, such as getting the current contents, you need to apply a reference to the component tag and access its methods:

@page "/YourPage"
@using Blazor.Monaco
@rendermode InteractiveServer
<MonacoEditor @ref="_monacoEditorInstance" />
@code {
    private MonacoEditor _monacoEditorInstance = null!;
}

Editor Methods

@page "/YourPage"
@using Blazor.Monaco
@rendermode InteractiveServer
<MonacoEditor @ref="_editor" />
@code {
    private MonacoEditor _editor = null!;
    private EditorOptions _editorOptions = new();
    private async Task MyAction()
    {
        //Read current contents
        var contents = await _editor.GetEditorContent();
        //Set updated contents
        await _editor.SetEditorContent(contents);
        //update editor's configuration
        await _editor.UpdateEditorConfiguration(_editorOptions);
        //re-initialize the editor in the browser
        await _editor.ReInitializeEditor();
    }
}

Editor Callbacks

@page "/YourPage"
@using Blazor.Monaco
@rendermode InteractiveServer
<MonacoEditor
    OnContentChanged="OnEditorContentChanged"
    OnSaveRequested="OnEditorSaveRequested"
    @ref="_editor" />
@code {
    private MonacoEditor _editor = null!;
    
    private void OnEditorContentChanged(bool hasChanged)
    {
        Console.WriteLine($"OnEditorContentChanged: {hasChanged}");
    }

    private async Task OnEditorSaveRequested()
    {
        Console.WriteLine("OnEditorSaveRequested");
        var contents = await _editor.GetEditorContent(resetChangedOnRead: true);
        // handle saving the contents
    }
}

Notes

If the editor does not display at all, you may be missing interactive rendermode. Either add this with @rendermode InteractiveServer at the top of your page, or in App.razor:

<!DOCTYPE html>
<html lang="en">
.... snip ....
<body>
    <Routes @rendermode="InteractiveServer"/>
    <script src="_framework/blazor.web.js"></script>
</body>

</html>