@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()
  {
    var newValue = await _editor.GetValue();
    OnChange(newValue);
  }
}

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