Using ObjectReferences to Embed a JavaScript Text Editor in Blazor

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

// export makes this function available by importing the file as a module
    export function getQuill(containerId, dotNetRef, options) {
        let quill = new Quill(`#${containerId}`, options);
        let Delta = Quill.import('delta');
        let change = new Delta();
        // add an event listener to 'text-change'
        quill.on('text-change', (delta) => {
            change = change.compose(delta);
            // pass the change delta back to .NET
            dotNetRef.invokeMethodAsync('JsTextChanged', change);
        })
    
        // returns the object to .NET so that you can call functions on that object.
        return quill;
    }

@inject IJSRuntime JsRuntime

        <div id="quill-container"></div>
        
        @code
        {
            [Parameter]
            public string? Theme { get; set; }
        
            [Parameter]
            public string? Placeholder { get; set; }
        
            // allows calling code to listen for text changed
            [Parameter]
            public EventCallback<object> TextChanged { get; set; }
        
            // this is the method called in JavaScript by `dotNetRef.invokeMethodAsync`
            [JSInvokable]
            public async Task JsTextChanged(object delta)
            {
                await TextChanged.InvokeAsync(delta);
            }
        
            // this method works as a "pass-through" to call into a JavaScript function from xona
            public async Task<string> GetText()
            {
                return await _quill!.InvokeAsync<string>("getText");
            }
        
            public async Task Enable(bool enabled)
            {
                await _quill!.InvokeVoidAsync("enable", enabled);
            }
        
            protected override async Task OnAfterRenderAsync(bool firstRender)
            {
                if (firstRender)
                {
                    // gets a reference to the file `jsInterop.js` as a JavaScript module
                    IJSObjectReference module = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./jsInterop.js");
                    Dictionary<string, object?> options = new();
                    if (Theme is not null)
                    {
                        options["theme"] = Theme;
                    }
                    if (Placeholder is not null)
                    {
                        options["placeholder"] = Placeholder;
                    }
                    // calls our JavaScript function and gets a reference to the Quill
                    _quill = await module.InvokeAsync<IJSObjectReference>("getQuill", "quill-container",
                        DotNetReference, options);
                }
            }
        
            private IJSObjectReference? _quill;
            private DotNetObjectReference<Quill> DotNetReference => DotNetObjectReference.Create(this);
        }

@page "/"
          @using System.Text.Json
          
          <PageTitle>Index</PageTitle>
          
          <h1>Quill Editor</h1>
          <button @onclick="ToggleQuill">@(_isEnabled ? "Disable Editor" : "Enable Editor")</button>
          
          @* Here is our Quill component being created in the page *@
          <Quill @ref="_quill"
                 Theme="snow"
                 Placeholder="Write a blog post..."
                 TextChanged="OnTextChanged" />
          
          <h2>Delta Content</h2>
          
          <div style="max-height: 400px; overflow-y: scroll">
              @((MarkupString)_deltaJson)
          </div>
          
          <button @onclick="GetText">Get Text</button>
          @if (!string.IsNullOrWhiteSpace(_textContent))
          {
              <h2>Raw Content</h2>
              <div>@_textContent</div>
          }
          
          @code
          {
              private Quill _quill = default!;
          
              // event handler for text changed
              private async Task OnTextChanged(object delta)
              {
                  // a little editing to make the json look good in html
                  _deltaJson = JsonSerializer.Serialize(delta, _jsonOptions)
                      .Replace(Environment.NewLine, "<br>")
                      .Replace(" ", "  ");
              }
          
              private async Task GetText()
              {
                  // calls to get the current plain text
                  _textContent = await _quill.GetText();
              }
          
              private async Task ToggleQuill()
              {
                  // toggles the editor on/off
                  _isEnabled = !_isEnabled;
                  await _quill.Enable(_isEnabled);
              }
          
              private string _deltaJson = string.Empty;
              private string _textContent = string.Empty;
              private bool _isEnabled = true;
          
              private readonly JsonSerializerOptions _jsonOptions = new()
              {
                  WriteIndented = true
              };
          }