G9BlazorComponent.MonacoEditor
1.0.0.2
dotnet add package G9BlazorComponent.MonacoEditor --version 1.0.0.2
NuGet\Install-Package G9BlazorComponent.MonacoEditor -Version 1.0.0.2
<PackageReference Include="G9BlazorComponent.MonacoEditor" Version="1.0.0.2" />
<PackageVersion Include="G9BlazorComponent.MonacoEditor" Version="1.0.0.2" />
<PackageReference Include="G9BlazorComponent.MonacoEditor" />
paket add G9BlazorComponent.MonacoEditor --version 1.0.0.2
#r "nuget: G9BlazorComponent.MonacoEditor, 1.0.0.2"
#addin nuget:?package=G9BlazorComponent.MonacoEditor&version=1.0.0.2
#tool nuget:?package=G9BlazorComponent.MonacoEditor&version=1.0.0.2
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
andG9DtMonacoDiffOptions
). - 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
, orHC_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:
- Update the
G9Dictionaries/{LibraryName}.LanguageDictionaryConfig.json
file to include the new language. - 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 | Versions 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. |
-
net9.0
- G9AssemblyManagement (>= 1.4.5.25)
- G9LocalizationHandler (>= 1.0.0.11)
- Microsoft.AspNetCore.Components.Web (>= 9.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.0.0.2 | 104 | 6/3/2025 |