canvasManagement/Management.Web/Shared/Components/MonacoTextArea.razor

@* @rendermode @(new InteractiveServerRenderMode(prerender: false)) *@
@implements IDisposable
@using BlazorMonaco
@using BlazorMonaco.Editor

@code {
  [Parameter, EditorRequired]
  public string Value { get; set; } = default!;

  [Parameter, EditorRequired]
  public Action<string> OnChange { get; set; } = default!;


  private string randomId = "monaco-editor-" + BitConverter.ToString(new byte[16].Select(b => (byte)new
      Random().Next(256)).ToArray()).Replace("-", "");


  private StandaloneCodeEditor? _editor = null;

  private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
  {
    return new StandaloneEditorConstructionOptions
      {
        Language = "markdown",
        Theme = "vs-dark",
        TabSize = 2,
        Value = Value,
        Minimap = new EditorMinimapOptions { Enabled = false },
        LineNumbers = "off",
        LineDecorationsWidth = 0,
        WordWrap = "on",
        AutomaticLayout = true,
        FontFamily = "Roboto-mono",
        FontSize = 16,
        Padding = new EditorPaddingOptions()
        {
          Top = 10
        }
      };
  }

  private async Task OnDidChangeModelContent()
  {
    if (_editor == null) return;
    var newValue = await _editor.GetValue();
    OnChange(newValue);
  }

  void IDisposable.Dispose()
  {
    _editor?.Dispose();
    _editor = null;
  }
}


<StandaloneCodeEditor @ref="_editor" Id="@randomId" ConstructionOptions="EditorConstructionOptions"
  OnDidChangeModelContent="OnDidChangeModelContent" />