Skip to content
This repository has been archived by the owner on Jan 13, 2023. It is now read-only.
/ Blazaco Public archive

A Blazor Component utilizing the Monaco editor by Microsoft

License

Notifications You must be signed in to change notification settings

Kyle-Undefined/Blazaco

Repository files navigation

Blazaco (Dead) Maintainer

This project is dead, lost interest and life got in the way. However, there's a fantastic maintained version over at serdarciplak/BlazorMonaco

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.cshtml file, 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 MonacoEditor Component 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 MonacoEditor and EditorModel fields to your @functions
private EditorModel _editorModel { get; set; }
private MonacoEditor _editor;
  • Configure Blazaco settings in your OnInit or OnInitAsync
_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-editor folder and link the Javascript and CSS files in your index.html file
<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

Copyright

Copyright (c) 2019 Kyle Undefined under the MIT License.