EditorComponent.razor

@using System.Text.RegularExpressions;
@using System.Text;

@implements IAsyncDisposable

@inject IStringLocalizer<Resource> _localizer
@inject IJSRuntime _jsRuntime
@inject HttpClient _httpClient

<div class="easymde-wrapper">
  <textarea @ref="_textareaReference" tabindex="2" class="visually-hidden" placeholder="@_localizer["type-here"]"></textarea>
</div>
<InputFile @ref="_inputFileReference" OnChange="@LoadImageFiles" style="display:none;" accept="image/*" />

@code {

  [Parameter] public string Toolbar { get; set; } = default!;

  private ValueTask<IJSObjectReference> _taskModule;
  private ElementReference? _textareaReference;
  private InputFile? _inputFileReference;

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      _taskModule = _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./admin/js/editor.js");
      var module = await _taskModule;
      var element = _inputFileReference?.Element;
      await module.InvokeVoidAsync("loadEditor", Toolbar, _textareaReference, element);
    }
  }

  protected async Task LoadImageFiles(InputFileChangeEventArgs args)
  {
    var module = await _taskModule;
    var element = _inputFileReference?.Element;
    await module.InvokeVoidAsync("writeFrontFile", element);
  }

  public async ValueTask SetValueAsync(string value)
  {
    var module = await _taskModule;
    await module.InvokeVoidAsync("setEditorValue", value);
  }

  public async ValueTask<string?> GetValueAsync()
  {
    var module = await _taskModule;
    var content = await module.InvokeAsync<string>("getEditorValue");
    var imgsMatches = StringHelper.MatchesMarkdownImgBlob(content);

    if (imgsMatches.Count > 0)
    {
      var contentStringBuilder = new StringBuilder(content);
      foreach (Match match in imgsMatches)
      {
        var imageUrl = match.Groups[1].Value;
        var imageBytes = await _httpClient.GetByteArrayAsync(imageUrl);
        var base64String = Convert.ToBase64String(imageBytes);
        contentStringBuilder.Replace(imageUrl, "data:image/png;base64," + base64String);
      }
      content = contentStringBuilder.ToString();
    }
    return content;
  }

  async ValueTask IAsyncDisposable.DisposeAsync()
  {
    var module = await _taskModule;
    await module.DisposeAsync();
  }
}