BlazorMonaco 3.2.0
dotnet add package BlazorMonaco --version 3.2.0
NuGet\Install-Package BlazorMonaco -Version 3.2.0
<PackageReference Include="BlazorMonaco" Version="3.2.0" />
paket add BlazorMonaco --version 3.2.0
#r "nuget: BlazorMonaco, 3.2.0"
// Install BlazorMonaco as a Cake Addin #addin nuget:?package=BlazorMonaco&version=3.2.0 // Install BlazorMonaco as a Cake Tool #tool nuget:?package=BlazorMonaco&version=3.2.0
<p align="center"><img src="https://raw.githubusercontent.com/serdarciplak/BlazorMonaco/master/BlazorMonaco/icon.png" width="150" height="150" /></p>
<p align="center"> <a href="https://www.nuget.org/packages/BlazorMonaco/"><img src="https://buildstats.info/nuget/BlazorMonaco" /></a> </p>
<h1 align="center">BlazorMonaco</h1>
Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
Some less-frequently used Monaco Editor features are currently missing, but a good amount of the basic feature set is supported. The package is updated regularly to cover more features and use cases. Any contributions, comments or suggestions are greatly welcome. Please feel free to contact me at twitter/serdarciplak or via GitHub.
Current version of BlazorMonaco :
- Uses
Monaco Editor v0.46.0
- Supports
netstandard2.0
,net5.0
,net6.0
,net7.0
andnet8.0
Demo
You can see a working sample WebAssembly app here.
Get Started
- Add the NuGet package to your Blazor project.
dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco
- Add the below script tags to your
index.html
file. Please note that these script tags must be placed before the script tag for theblazor.webassembly.js
file.
<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
- Everything resides in three namespaces. You can add the following using directives to your root
_Imports.razor
file, or any other place you may need them.
@using BlazorMonaco
@using BlazorMonaco.Editor
@using BlazorMonaco.Languages
Code Editor
Adding an editor instance
- To add a new editor instance, you just need to add a
StandaloneCodeEditor
component in your razor file.
<StandaloneCodeEditor Id="my-editor-instance-id" />
Providing custom options
- To customize your editor instance's initial options, set the
ConstructionOptions
parameter of the instance, and provide a method that returns aStandaloneEditorConstructionOptions
instance.
<StandaloneCodeEditor Id="my-editor-instance-id" ConstructionOptions="EditorConstructionOptions" />
- Then, add that method to your razor file's
@code
block and return aStandaloneEditorConstructionOptions
instance with the values you need.
private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
{
return new StandaloneEditorConstructionOptions
{
AutomaticLayout = true,
Language = "javascript",
Value = "function xyz() {\n" +
" console.log(\"Hello world!\");\n" +
"}"
};
}
Editor events
- You can subscribe to editor events (e.g.
OnDidKeyUp
orOnDidPaste
) using the editor's event parameters.
<StandaloneCodeEditor Id="my-editor-instance-id" OnDidChangeCursorPosition="EditorDidChangeCursorPosition" />
- Then, add your event listener method to your razor file's
@code
block.
private void EditorDidChangeCursorPosition(CursorPositionChangedEvent eventArgs)
{
Console.WriteLine("EditorDidChangeCursorPosition");
}
Diff Editor
Adding a diff editor instance
- To add a new diff editor instance, you just need to add a
StandaloneDiffEditor
component in your razor file.
<StandaloneDiffEditor Id="my-editor-instance-id" />
Access to inner editor instances and events
StandaloneDiffEditor
class provides two properties namedOriginalEditor
andModifiedEditor
for accessing the inner editor instances. You can use them like any otherStandaloneCodeEditor
instances.You can register to inner editors' events using the helper event parameters of the main
StandaloneDiffEditor
instance.
<StandaloneDiffEditor Id="my-editor-instance-id" OnKeyUpOriginal="OnKeyUpOriginal" OnKeyUpModified="OnKeyUpModified" />
Notes
Css styling
- There are 3 css selectors you can use to add/edit css styles for your editors.
- The main html element of all editor instances contains the
monaco-editor-container
css class. - The
Id
value you set for your razor component is also set as the id of its html element. - You can provide a string in the
CssClass
property of an editor instance. That value will be added to the class attribute of its html element.
- The main html element of all editor instances contains the
<StandaloneCodeEditor Id="my-editor-id" CssClass="my-editor-class" />
.monaco-editor-container { /* for all editor instances */
height: 100px;
}
/* or */
#my-editor-id { /* for a specific editor instance */
height: 100px;
}
/* or */
.my-editor-class { /* for a specific editor instance */
height: 100px;
}
⚠️
Note :
As an html element cannot set its height disregarding where it's placed in, BlazorMonaco cannot manage editor instance heights. So, if you don't do that yourself, editor instances may have a height of0px
and be invisible. Please don't forget to set your editor instance heights as you need.
Global Methods
Monaco Editor JavaScript library defines some methods in the global scope. As C# does not allow global methods, BlazorMonaco groups those methods in two static classes named BlazorMonaco.Editor.Global
and BlazorMonaco.Language.Global
. If you need to use a Monaco Editor method in the global scope, check where in the JavaScript library that method is, and search for it in the corresponding Global class. They're defined as static methods.
For example, you can use the SetTheme
method as below.
await BlazorMonaco.Editor.Global.SetTheme(jsRuntime, "my-custom-theme");
Using a custom Monaco Editor setup
- If you've made changes to Monaco Editor, and need to use this edited version instead of the unmodified version packed with BlazorMonaco, just change the paths to monaco editor resources in your
index.html
file.
<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script>var require = { paths: { vs: 'my-path/monaco-editor/min/vs' } };</script>
<script src="my-path/monaco-editor/min/vs/loader.js"></script>
<script src="my-path/monaco-editor/min/vs/editor/editor.main.js"></script>
Documentation
As BlazorMonaco is just a bridge between JavaScript and Blazor, you can use Monaco Editor's documentation.
Migration Guide
After a major version update (like from v2.x.x
to v3.x.x
), you may need to make some changes in your integration. Please see the MIGRATE.md for details.
Change Log
You can view the history and the changes in the CHANGELOG.md
License
MIT, see the LICENSE file for detail.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 is compatible. net5.0-windows was computed. net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
.NET Core | netcoreapp2.0 was computed. netcoreapp2.1 was computed. netcoreapp2.2 was computed. netcoreapp3.0 was computed. netcoreapp3.1 was computed. |
.NET Standard | netstandard2.0 is compatible. netstandard2.1 was computed. |
.NET Framework | net461 was computed. net462 was computed. net463 was computed. net47 was computed. net471 was computed. net472 was computed. net48 was computed. net481 was computed. |
MonoAndroid | monoandroid was computed. |
MonoMac | monomac was computed. |
MonoTouch | monotouch was computed. |
Tizen | tizen40 was computed. tizen60 was computed. |
Xamarin.iOS | xamarinios was computed. |
Xamarin.Mac | xamarinmac was computed. |
Xamarin.TVOS | xamarintvos was computed. |
Xamarin.WatchOS | xamarinwatchos was computed. |
-
.NETStandard 2.0
- Microsoft.AspNetCore.Components (>= 3.1.10)
- Microsoft.AspNetCore.Components.Web (>= 3.1.10)
-
net5.0
- Microsoft.AspNetCore.Components (>= 5.0.0)
- Microsoft.AspNetCore.Components.Web (>= 5.0.0)
-
net6.0
- Microsoft.AspNetCore.Components (>= 6.0.25)
- Microsoft.AspNetCore.Components.Web (>= 6.0.25)
-
net7.0
- Microsoft.AspNetCore.Components (>= 7.0.14)
- Microsoft.AspNetCore.Components.Web (>= 7.0.14)
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.0)
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages (11)
Showing the top 5 NuGet packages that depend on BlazorMonaco:
Package | Downloads |
---|---|
PanoramicData.Blazor
Blazor components |
|
Elsa.Studio.Shared
Elsa Studio shared services and components. |
|
Strem.Flows.Default
Package Description |
|
BlazorMonacoYaml
Monaco Yaml editor for Blazor is a Yaml style configuration setup for Blazor Monaco, with which you can easily setup YAML Editors and YAML Diffing Editors. |
|
TableViewer.MudBlazor
Package Description |
GitHub repositories (12)
Showing the top 5 popular GitHub repositories that depend on BlazorMonaco:
Repository | Stars |
---|---|
json-everything/json-everything
System.Text.Json-based support for all of your JSON needs.
|
|
DragoQCC/HardHatC2
A C# Command & Control framework
|
|
revenz/FileFlows
FileFlows is a file processing application that can execute actions against a file in a tree flow structure.
|
|
flyingpie/windows-terminal-quake
Enable Quake-style dropdown for (almost) any application.
|
|
CervantesSec/cervantes
Cervantes is an open-source, collaborative platform designed specifically for pentesters and red teams. It serves as a comprehensive management tool, streamlining the organization of projects, clients, vulnerabilities, and reports in a single, centralized location.
|
Version | Downloads | Last updated |
---|---|---|
3.2.0 | 273,038 | 2/25/2024 |
3.1.0 | 185,178 | 8/27/2023 |
3.0.0 | 198,161 | 1/23/2023 |
2.1.0 | 352,117 | 4/12/2021 |
2.0.0 | 8,062 | 2/21/2021 |
1.6.1 | 4,648 | 2/6/2021 |
1.6.0 | 6,567 | 12/6/2020 |
1.5.0 | 9,142 | 11/1/2020 |
1.4.0 | 5,985 | 7/19/2020 |
1.3.1 | 8,446 | 6/15/2020 |
1.3.0 | 1,373 | 6/7/2020 |
1.2.2 | 1,723 | 5/22/2020 |
1.2.1 | 383 | 5/5/2020 |
1.2.0 | 366 | 5/2/2020 |
1.1.0 | 348 | 4/26/2020 |
1.0.3 | 334 | 4/24/2020 |
1.0.2 | 1,272 | 4/23/2020 |
1.0.1 | 1,738 | 4/23/2020 |
See the change log for release notes:
https://github.com/serdarciplak/BlazorMonaco/blob/master/CHANGELOG.md