G9BlazorComponent.MonacoEditor 1.0.0.4

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher. 
dotnet add package G9BlazorComponent.MonacoEditor --version 1.0.0.4
                    


                    

                
NuGet\Install-Package G9BlazorComponent.MonacoEditor -Version 1.0.0.4
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="G9BlazorComponent.MonacoEditor" Version="1.0.0.4" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="G9BlazorComponent.MonacoEditor" Version="1.0.0.4" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="G9BlazorComponent.MonacoEditor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add G9BlazorComponent.MonacoEditor --version 1.0.0.4
                    


                    

                
#r "nuget: G9BlazorComponent.MonacoEditor, 1.0.0.4"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#addin nuget:?package=G9BlazorComponent.MonacoEditor&version=1.0.0.4
                    


                            Install G9BlazorComponent.MonacoEditor as a Cake Addin
                        

                    

                
#tool nuget:?package=G9BlazorComponent.MonacoEditor&version=1.0.0.4
                    


                            Install G9BlazorComponent.MonacoEditor as a Cake Tool

G9BlazorComponent.MonacoEditor

A powerful Blazor component library that integrates the Monaco Editor into your Blazor applications, providing both a standard code editor and a diff editor for side-by-side code comparison. This library is designed to offer a seamless and customizable editing experience with full support for JavaScript interop, event handling, and configuration options.

Features

  • Monaco Editor Integration: Embed the Monaco Editor in your Blazor application with ease, supporting syntax highlighting, IntelliSense, and more for various programming languages.
  • Diff Editor Support: Compare two code files side-by-side with the G9BlazorComponentMonacoDiffEditor, ideal for version control and code review workflows.
  • Customizable Options: Configure editor themes, height, language, and more through strongly-typed options (G9DtMonacoOptions and G9DtMonacoDiffOptions).
  • Event Handling: Handle a wide range of editor events such as mouse interactions, keyboard events, content changes, and more via JavaScript interop.
  • Multilingual Support: Supports multiple languages including English, Chinese, Spanish, Hindi, Arabic, and more, with customizable dictionaries for additional languages.
  • Asynchronous Operations: Leverage async methods for setting and retrieving editor content, ensuring smooth performance for large codebases.
  • Interactive Server Rendering: Built for Blazor Server with InteractiveServer render mode for responsive, server-side interactions.

Installation

Install the package via NuGet Package Manager or the .NET CLI:

dotnet add package G9BlazorComponent.MonacoEditor

Prerequisites

  • .NET 9.0 or later
  • Blazor Server or Blazor WebAssembly project
  • A modern web browser compatible with the Monaco Editor

Usage

Important Note: Editor Initialization

The G9BlazorComponentMonacoEditor and G9BlazorComponentMonacoDiffEditor components rely on JavaScript interop and require initialization after rendering. Always check the IsInitialized property before interacting with the editor to ensure it is fully loaded. For example:

if (_refMonacoEditor is { IsInitialized: true })
{
    await _refMonacoEditor.SetValueAsync("Your code here");
}

This ensures that the editor is ready to accept operations like setting values or retrieving content.

Example: Basic Monaco Editor

Below is an example of how to use the G9BlazorComponentMonacoEditor in a Blazor page:

@page "/"
@using G9BlazorComponent.MonacoEditor.DataTypes
@using G9BlazorComponent.MonacoEditor.Enums
@rendermode InteractiveServer

<PageTitle>Monaco Editor</PageTitle>

<h1>Monaco Editor</h1>
<G9BlazorComponentMonacoEditor Options="@monacoOptions" @ref="@_refMonacoEditor" />
<button @onclick="SetMonacoEditDefaultValue">Set Default Value</button>
<button @onclick="@(async () => { if (_refMonacoEditor is { IsInitialized: true }) _monacoEditorValue = await _refMonacoEditor.GetValueAsync(); })">Get Value</button>
<p>@_monacoEditorValue</p>

@code {
    private G9BlazorComponentMonacoEditor? _refMonacoEditor;
    private string _monacoEditorValue = string.Empty;

    private readonly G9DtMonacoDataTypes.G9DtMonacoOptions monacoOptions = new()
    {
        Theme = G9EMonacoEnums.G9EMonacoTheme.VS_Dark,
        Height = "400px",
        Language = G9EMonacoEnums.G9EMonacoLanguage.HTML
    };

    private readonly string sampleCode = @"
<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>";

    private async Task SetMonacoEditDefaultValue()
    {
        if (_refMonacoEditor is { IsInitialized: true })
        {
            await _refMonacoEditor.SetValueAsync(sampleCode);
        }
    }
}

Example: Monaco Diff Editor

The G9BlazorComponentMonacoDiffEditor allows you to compare two code snippets side-by-side. Here's an example:

@page "/"
@using G9BlazorComponent.MonacoEditor.DataTypes
@using G9BlazorComponent.MonacoEditor.Enums
@rendermode InteractiveServer

<h1>Monaco Diff Editor</h1>
<G9BlazorComponentMonacoDiffEditor Options="@monacoDiffOptions" @ref="@_refMonacoDiffEditor" />
<button @onclick="SetMonacoDiffEditDefaultValue">Set Default Values</button>

@code {
    private G9BlazorComponentMonacoDiffEditor? _refMonacoDiffEditor;

    private readonly G9DtMonacoDataTypes.G9DtMonacoDiffOptions monacoDiffOptions = new()
    {
        Theme = G9EMonacoEnums.G9EMonacoTheme.VS_Dark,
        Height = "400px"
    };

    private readonly string originalCode = @"
function hello() {
    console.log('Hello, World!');
}";
    private readonly string modifiedCode = @"
function hello() {
    console.log('Hello, Universe!');
}";

    private async Task SetMonacoDiffEditDefaultValue()
    {
        if (_refMonacoDiffEditor is { IsInitialized: true })
        {
            await _refMonacoDiffEditor.SetDiffEditorValues(originalCode, modifiedCode);
        }
    }
}

Configuration Options

The G9DtMonacoOptions and G9DtMonacoDiffOptions classes provide extensive customization:

  • Theme: Choose from VS_Dark, VS_Light, or HC_Black (e.g., G9EMonacoTheme.VS_Dark).
  • Height: Set the editor height (e.g., "400px").
  • Language: Specify the programming language (e.g., G9EMonacoLanguage.HTML, G9EMonacoLanguage.JavaScript).
  • Events: Attach event handlers for interactions like OnMouseDown, OnKeyUp, OnDidChangeModelContent, etc.

Event Handling

The components support a wide range of events. To handle events, configure the MonacoEditorEvent or MonacoDiffEditorEvent properties in the options:

monacoOptions.MonacoEditorEvent = new G9DtMonacoDataTypes.G9DtMonacoEditorEvents
{
    OnDidChangeModelContent = async (editor, eventData) =>
    {
        Console.WriteLine("Model content changed!");
    },
    OnMouseDown = async (editor, eventData) =>
    {
        Console.WriteLine($"Mouse down at position: {eventData.Position}");
    }
};

Multilingual Support

The library supports multiple languages for UI elements and error messages. To add a new language:

  1. Update the G9Dictionaries/{LibraryName}.LanguageDictionaryConfig.json file to include the new language.
  2. Add translations to the G9Dictionaries/{LibraryName}.LanguageDictionary.json file.

Supported languages include en, zh, es, hi, ar, fr, pt, ru, de, ja, and more.

JavaScript Interop

The components use JavaScript interop to interact with the Monaco Editor. Ensure the JavaScript file (G9BlazorComponentMonacoEditor.js) is correctly included in your project under the _content/G9BlazorComponent.MonacoEditor directory.

Methods

Key methods for interacting with the editors include:

  • SetValueAsync(string): Set the content of the standard editor.
  • GetValueAsync(): Retrieve the content of the standard editor.
  • SetDiffEditorValues(string, string): Set the original and modified content for the diff editor.
  • GetDiffEditorValuesAsync(): Retrieve the original and modified content from the diff editor.
  • ChangeEditorLanguage(G9EMonacoLanguage): Change the editor's language dynamically.
  • FocusAsync(): Focus the editor programmatically.

For a full list of methods, refer to the G9IBlazorComponentMonacoEditor and G9IBlazorComponentMonacoDiffEditor interfaces.

Limitations

  • The components must be used after rendering, as they rely on JavaScript initialization. Always check IsInitialized before calling methods.
  • File I/O operations (e.g., OpenFileByEditor, OpenFileByDiffEditor) are limited to server-side file access and require proper permissions.

Contributing

Contributions are welcome! Please submit issues or pull requests to the GitHub repository. Ensure that any changes are thoroughly tested and documented.

License

This project is licensed under the MIT License.

Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on G9BlazorComponent.MonacoEditor:

Package Downloads
G9BlazorComponent.FileManagementSystem

Package Description

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0.4 67 6/12/2025
1.0.0.2 115 6/3/2025