The Monaco Editor (Visual Studio Code) as UI Control for WinUI 3.0
Notice: As part of a project restructuring, the NuGet name of the library was changed from winui.monaco-editor
to WinUI.Monaco
.
dotnet add package WinUI.Monaco
The library version is composed as follows:
1.1.${{ env.MONACO_VERSION }}.${{ github.run_number }}
(example: 1.1.44.13
)
This Monaco control uses handlers to provide certain actions that have nothing directly to do with the actual Monaco editor:
This handler can be used to open the WebView2 DevTools.
MonacoWebViewDevToolsHandler handler = this.MonacoEditor.GetHandler<MonacoWebViewDevToolsHandler>();
handler.OpenDebugWebViewDeveloperTools();
With this handler you can pass a file extension and get back the code language supported by the Monaco Editor, which can then be set in the Monaco Editor.
MonacoFileRecognitionHandler handler = this.MonacoEditor.GetHandler<MonacoFileRecognitionHandler>();
string fileCodeLanguage = handler.RecognizeLanguageByFileType(Path.GetExtension(file.Path));
await this.MonacoEditor.SetLanguageAsync(fileCodeLanguage);
The monaco project is stored in the C#-Project Monaco under the folder monaco-editor
.
To update the monaco version follow these steps (Only do this if it is really necessary. The project is always automatically updated to the latest release version of the monaco project via a GitHub workflow):
index.html
from the folder monaco-editor
. The index.html
is required for the projectmonaco-editor