BlazorMonaco

BlazorMonaco provides two primary components for rendering editors:

• <StandaloneCodeEditor />: A standard code editor.
• <StandaloneDiffEditor />: An editor used for comparing two versions of code.

By default, these components render with default options.

<StandaloneCodeEditor />
<!-- or -->
<StandaloneDiffEditor />

When upgrading from version 2.x to 3.x, you must update your HTML configuration, namespaces, and component usage to align with the updated Monaco Editor version and the library's new structure.

<!-- Update script tags in your index.html body -->
<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>

When upgrading from version 1.x to 2.x, note the following breaking changes:

• The BlazorMonaco.Bridge namespace was merged into BlazorMonaco.
• Several options classes were renamed with an Editor prefix:
  • CommentOptions $\rightarrow$ EditorCommentsOptions
  • FindOptions $\rightarrow$ EditorFindOptions
  • HoverOptions $\rightarrow$ EditorHoverOptions
  • LightbulbOptions $\rightarrow$ EditorLightbulbOptions
  • MinimapOptions $\rightarrow$ EditorMinimapOptions
  • ParameterHintOptions $\rightarrow$ EditorParameterHintOptions
  • ScrollbarOptions $\rightarrow$ EditorScrollbarOptions
• EditorLayoutInfo has been restructured.
• Certain options and properties were removed if they were no longer supported by the underlying Monaco Editor.

To use BlazorMonaco in your Blazor project, follow these three steps:

1. Add the NuGet package:

   dotnet add package BlazorMonaco

2. Add required script tags: Add these tags to the end of your html body tag. They must be placed before your Blazor script tag (blazor.webassembly.js, blazor.server.js, or blazor.web.js).

3. Add using directives: Add the following to your _Imports.razor file to access the necessary namespaces:

   @using BlazorMonaco
   @using BlazorMonaco.Editor
   @using BlazorMonaco.Languages

<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>

BlazorMonaco wraps editor instances in a div with specific classes and IDs that you can target with CSS:

1. Global styling: Use .monaco-editor-container to style all editor instances.
2. Class-based styling: Set the CssClass property on the component to add a custom class to the container.
3. Instance-specific styling: Use the Id property to target a specific editor instance via its ID.

Note: You must explicitly set a height for the editor in CSS, otherwise it may default to 0px and be invisible.

<StandaloneCodeEditor Id="my-editor-id" CssClass="my-editor-class" />

/* Target specific instance */
#my-editor-id {
    height: 100px;
}

/* Target all instances with this class */
.my-editor-class {
    height: 100px;
}

/* Target all BlazorMonaco editors */
.monaco-editor-container {
    height: 100px;
}

In version 3.x, all functionality is consolidated into two primary namespaces. Update your _Imports.razor or individual component files with the following directives:

@using BlazorMonaco
@using BlazorMonaco.Editor
@using BlazorMonaco.Language

If you have modified the Monaco Editor JS library and want to use your own version instead of the one bundled with BlazorMonaco, you can override the script loading logic. You must define a custom require path for the vs directory before loading the Monaco scripts.

<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>

Editor is invisible

Most likely, the editor has a height of 0px. BlazorMonaco does not manage the height internally. You must set a height via CSS using the editor's Id or CssClass.

Editor fails to initialize

BlazorMonaco requires an interactive render mode. If you are using Static Server-Side Rendering (Static SSR), the editor will not work. Ensure your page or component uses an interactive mode:

@rendermode InteractiveServer

Editor breaks during navigation

If you are using Blazor's enhanced navigation, it may undo dynamic DOM changes made by Monaco. To prevent this, disable enhanced navigation for the target page:

• For links: Add data-enhance-nav="false" to the <a> tag.
• For programmatic navigation: Use Navigation.NavigateTo("url", true) to force a full reload.

Class, property, and object names have been renamed to better align with the original Monaco Editor JavaScript library. Key renames include:

• MonacoEditor is now StandaloneCodeEditor
• MonacoDiffEditor is now StandaloneDiffEditor

Check the namespace and class definitions for other renamed members. If a feature was not removed by Microsoft in the underlying Monaco Editor update, it will exist under a name similar to its previous version.