feat: get text from quill (#16)

Author: dandeto

src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs

@@ -28,6 +28,12 @@ public sealed partial class MudHtmlEditor : IAsyncDisposable
     [Parameter]
     public EventCallback<string> HtmlChanged { get; set; }
 
+    [Parameter]
+    public string Text { get; set; } = "";
+
+    [Parameter]
+    public EventCallback<string> TextChanged { get; set; }
+
     [Parameter]
     public bool Resizable { get; set; } = true;
 
@@ -44,10 +50,22 @@ public async Task SetHtml(string html)
         if (_quill is not null)
             await _quill.InvokeVoidAsync("setHtml", html);
 
-        if (HtmlChanged.HasDelegate)
-            await HtmlChanged.InvokeAsync(html);
+        HandleHtmlContentChanged(html);
+        HandleTextContentChanged(await GetText());
+    }
 
-        Html = html;
+    public async Task<string> GetHtml()
+    {
+        if (_quill is not null)
+            return await _quill.InvokeAsync<string>("getHtml");
+        return "";
+    }
+
+    public async Task<string> GetText()
+    {
+        if (_quill is not null)
+            return await _quill.InvokeAsync<string>("getText");
+        return "";
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -74,6 +92,15 @@ public async void HandleHtmlContentChanged(string html)
         await HtmlChanged.InvokeAsync(html);
     }
 
+    [JSInvokable]
+    public async void HandleTextContentChanged(string text)
+    {
+        if (Text == text) return; // nothing changed
+
+        Text = text;
+        await TextChanged.InvokeAsync(text);
+    }
+
     async ValueTask IAsyncDisposable.DisposeAsync()
     {
         if (_quill is not null)

src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js

@@ -45,6 +45,10 @@ export class MudQuillInterop {
         this.toolbarRef = toolbarRef;
     }
 
+    getText = () => {
+        return this.quill.getText();
+    };
+
     getHtml = () => {
         return this.quill.root.innerHTML;
     };
@@ -69,5 +73,6 @@ export class MudQuillInterop {
      */
     textChangedHandler = (delta, oldDelta, source) => {
         this.dotNetRef.invokeMethodAsync('HandleHtmlContentChanged', this.getHtml());
+        this.dotNetRef.invokeMethodAsync('HandleTextContentChanged', this.getText());
     };
 }