Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
Not the complete set but most of the Monaco Editor functionality is currently supported. The package will be updated regularly to cover all the features and use cases soon. Any contributions, comments or suggestions are greatly welcome. Please feel free to contact me at @serdarciplak or via GitHub.
Current version of BlazorMonaco :
- Works with Monaco Editor v0.22.3
- Built and tested for netstandard2.0 and net5.0
You may see a working example here
- Add the NuGet package to your Blazor client project.
dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco
- Add the following using directives to your root
_Imports.razorfile, or any other .razor file where you want to add a Monaco Editor.
@using BlazorMonaco- Add the below Javascript and CSS links to your
index.htmlfile. Note: These script tags should come before the script tag for theblazor.webassembly.jsfile.
<head>
<link href="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css" rel="stylesheet" />
</head>
<body>
...
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script>require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
<script src="_content/BlazorMonaco/jsInterop.js"></script>
...
</body>- Add a
MonacoEditorcomponent in your .razor file and configure it as you need.
<MonacoEditor Id="any-id-string" />- If you provide a method that returns an
StandaloneEditorConstructionOptionsinstance to theConstructionOptionsparameter, it will be called at creation and the return value will be used as the initial editor options.
<MonacoEditor Id="any-id-string" ConstructionOptions="EditorConstructionOptions" />- In your razor file's
@codeblock, add the method you provided. Return the initial options and customize the editor instance as you need. You can see all available options at Monaco Editor's documentation.
private StandaloneEditorConstructionOptions EditorConstructionOptions(MonacoEditor editor)
{
return new StandaloneEditorConstructionOptions
{
AutomaticLayout = true,
Language = "javascript",
Value = "function xyz() {\n" +
" console.log(\"Hello world!\");\n" +
"}"
};
}- You can add listeners to editor events like OnDidKeyUp or OnDidPaste for any custom job to be done when that event occurs.
<MonacoEditor Id="any-id-string" OnDidChangeCursorPosition="EditorDidChangeCursorPosition" />- Add your event listener method in your razor file's
@codeblock.
private void EditorDidChangeCursorPosition(CursorPositionChangedEvent eventArgs)
{
Console.WriteLine("EditorDidChangeCursorPosition");
}- Add a
MonacoDiffEditorcomponent in your .razor file and configure it as you need.
<MonacoDiffEditor Id="any-id-string" />MonacoDiffEditorclass has two properties namedOriginalEditorandModifiedEditorto access the inner editors. They're regular code editors. So, you can use them like any otherMonacoEditorinstance.
- You can register to inner editor events via the helper EventCallback parameters of the MonacoDiffEditor.
<MonacoDiffEditor Id="any-id-string" OnKeyUpOriginal="OnKeyUpOriginal" OnKeyUpModified="OnKeyUpModified" />- And add the callback methods to your razor file's
@codeblock.
private void OnKeyUpOriginal(KeyboardEvent keyboardEvent)
{
Console.WriteLine("OnKeyUpOriginal : " + keyboardEvent.Code);
}
private void OnKeyUpModified(KeyboardEvent keyboardEvent)
{
Console.WriteLine("OnKeyUpModified : " + keyboardEvent.Code);
}- You can add, edit and remove decorations to the editor via DeltaDecorations and ResetDeltaDecorations method.
private async Task EditorOnDidInit(MonacoEditorBase editor)
{
var newDecorations = new ModelDeltaDecoration[]
{
new ModelDeltaDecoration
{
Range = new BlazorMonaco.Range(3,1,3,1),
Options = new ModelDecorationOptions
{
IsWholeLine = true,
ClassName = "decorationContentClass",
GlyphMarginClassName = "decorationGlyphMarginClass"
}
}
};
decorationIds = await _editor.DeltaDecorations(null, newDecorations);
// You can now use 'decorationIds' to change or remove the decorations
}- When you provide a css class name in the
CssClassproperty of the Monaco Editor instance, it will be added to the corresponding html div tag. So you can customize how anything looks in your css files.
<MonacoEditor Id="any-id-string" CssClass="my-editor-class" />- You can define custom themes using the
DefineThemestatic method. Just make sure that you don't callDefineThemebefore any editor instance is initialized. BlazorMonaco needs anIJSRuntimeinstance to call JavaScript methods and it gets one when the first instance is initialized.
await MonacoEditorBase.DefineTheme("my-custom-theme", new StandaloneThemeData
{
Base = "vs-dark",
Inherit = true,
Rules = new List<TokenThemeRule>
{
new TokenThemeRule { Background = "363636", Foreground = "E0E0E0" },
new TokenThemeRule { Token = "keyword", Foreground = "59ADFF" },
new TokenThemeRule { Token = "operator.sql", Foreground = "59ADFF" },
new TokenThemeRule { Token = "number", Foreground = "66CC66" },
new TokenThemeRule { Token = "string.sql", Foreground = "E65C5C" },
new TokenThemeRule { Token = "comment", Foreground = "7A7A7A" }
},
Colors = new Dictionary<string, string>
{
["editor.background"] = "#363636",
["editorCursor.foreground"] = "#E0E0E0",
["editorLineNumber.foreground"] = "#7A7A7A"
}
});- After defining your custom theme, you can call
SetThemeat any time with your custom theme name to set it active.
await MonacoEditorBase.SetTheme("my-custom-theme");- If you've made changes to Monaco Editor, like adding a custom language, 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.htmlfile.
<head>
<link href="my-path/monaco-editor/min/vs/editor/editor.main.css" rel="stylesheet" />
</head>
<body>
...
<script src="my-path/monaco-editor/min/vs/loader.js"></script>
<script>require.config({ paths: { 'vs': 'my-path/monaco-editor/min/vs' } });</script>
<script src="my-path/monaco-editor/min/vs/editor/editor.main.js"></script>
...
</body>As BlazorMonaco is just a bridge between Javascript and Blazor, you can use Monaco Editor's documentation.
History and changes can be located in the CHANGELOG.md
MIT, see the LICENSE file for detail.