Blazaco 
A Blazor Component utilizing the Monaco editor by Microsoft, inspired by BlazorBits. Built and tested for Blazor version 3.0.100-preview5-011568.
I built this after writing my own ShareX (image / code / link) API in Blazor, just seeing what all it's capable of, and was looking for a way to style the code page. Found the BlazorBits but noticed it wasn't on Nuget anymore and was outdated, so decided to build an updated version. Any feedback would greatly be appreciated.
Blazaco dependencies
- Visual Studio 16.1.0 Preview 3
- .NET Core 3.0.100-preview5-011568
Demo
Installation
- Add the NuGet package to your Blazor Client project
dotnet add package Blazaco
// or
Install-Package Blazaco
Usage
- Add the following to your root
_ViewImports.cshtmlfile, or any file you want to use the Monaco Editor
@using Blazaco
@using Blazaco.Editor
@using Blazaco.Editor.Options // Only needed if you want to change defaults- Add the
MonacoEditorComponent anywhere in your file
<MonacoEditor ref="_editor" Model="@_editorModel" Width="500" Height="500" />
// or
<MonacoEditor ref="_editor" Model="@_editorModel" FullScreen="true" />Note: You can have a set Width / Height (Defaults to 800 / 600) or have a Fullscreen mode
- Add your
MonacoEditorandEditorModelfields to your@functions
private EditorModel _editorModel { get; set; }
private MonacoEditor _editor;- Configure Blazaco settings in your
OnInitorOnInitAsync
_editorModel = new EditorModel(); // Uses defaults
// or
var options = new EditorOptions()
{
Value = "// Your Code Here!",
Language = "csharp",
Theme = "vs-dark"
};
_editorModel = new EditorModel(options);
// or
var options = new EditorOptions()
{
Value = "// Your Code Here!",
Language = "csharp",
Theme = "vs-dark",
Minimap = new MinimapOptions()
{
Enabled = false
}
};
_editorModel = new EditorModel(options);
// or
_editorModel = new EditorModel(new EditorOptions()
{
Value = "// Your Code Here!",
Language = "csharp",
Theme = "vs-dark",
Minimap = new MinimapOptions()
{
Enabled = false
}
});Note: You can configure the Constructor Options based on these options
- Add the
monaco-editorfolder and link the Javascript and CSS files in yourindex.htmlfile
<head>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="monaco-editor/min/vs/editor/editor.main.css">
</head>
<body>
<app></app>
...
<script>var require = { paths: { 'vs': 'monaco-editor/min/vs' } };</script>
<script src="monaco-editor/min/vs/loader.js"></script>
<script src="monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="monaco-editor/min/vs/editor/editor.main.js"></script>
<script type="blazor-boot">
</script>
...
</body>Interop
Currently I've only created a handful of Methods for Interop, as that's all I really need for my purposes. Current plans are to expand the Interop to allow more integration of the Monaco Editor API and make it more fleshed out.
InitializeEditor- Internal Method to Initialize the Monaco Editor with default or set settings
GetValue- Gets the Value from the Monaco Editor
SetValue- Sets the Value for the Monaco Editor to display
SetTheme- Sets the Theme for the Monaco Editor
Change log
- History and changes can be located in the CHANGELOG.md
Copyright
Copyright (c) 2019 Kyle Undefined under the MIT License.