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 :
Monaco Editor v0.46.0
netstandard2.0
, net5.0
, net6.0
, net7.0
and net8.0
You can see a working sample WebAssembly app here.
dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco
index.html
file. Please note that these script tags must be placed before the script tag for the blazor.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>
_Imports.razor
file, or any other place you may need them.@using BlazorMonaco
@using BlazorMonaco.Editor
@using BlazorMonaco.Languages
StandaloneCodeEditor
component in your razor file.<StandaloneCodeEditor Id="my-editor-instance-id" />
ConstructionOptions
parameter of the instance, and provide a method that returns a StandaloneEditorConstructionOptions
instance.<StandaloneCodeEditor Id="my-editor-instance-id" ConstructionOptions="EditorConstructionOptions" />
@code
block and return a StandaloneEditorConstructionOptions
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" +
"}"
};
}
OnDidKeyUp
or OnDidPaste
) using the editor's event parameters.<StandaloneCodeEditor Id="my-editor-instance-id" OnDidChangeCursorPosition="EditorDidChangeCursorPosition" />
@code
block.private void EditorDidChangeCursorPosition(CursorPositionChangedEvent eventArgs)
{
Console.WriteLine("EditorDidChangeCursorPosition");
}
StandaloneDiffEditor
component in your razor file.<StandaloneDiffEditor Id="my-editor-instance-id" />
StandaloneDiffEditor
class provides two properties named OriginalEditor
and ModifiedEditor
for accessing the inner editor instances. You can use them like any other StandaloneCodeEditor
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" />
monaco-editor-container
css class.Id
value you set for your razor component is also set as the id of its html element.CssClass
property of an editor instance. That value will be added to the class attribute of its html element.<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.
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");
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>
As BlazorMonaco is just a bridge between JavaScript and Blazor, you can use Monaco Editor's documentation.
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.
You can view the history and the changes in the CHANGELOG.md
MIT, see the LICENSE file for detail.