Expose delta contents

Author: FeniXb3

samples/BlazorServer/Pages/EditorView.razor

@@ -1,15 +1,19 @@
-<MudStack Justify="Justify.FlexEnd" Row="true">
+@using System.Text.Json.Nodes
+<MudStack Justify="Justify.FlexEnd" Row="true">
     <MudButton OnClick="AddParagraph" Size="Size.Small">Add Paragraph</MudButton>
+    <MudButton OnClick="ShowContents" Size="Size.Small">Show Contents</MudButton>
     <MudButton OnClick="OnCancel" Size="Size.Small">Cancel</MudButton>
     <MudButton OnClick="Reset" Size="Size.Small">Reset</MudButton>
     <MudButton Color="Color.Primary" OnClick="SaveChanges" Size="Size.Small" StartIcon="@Icons.Material.Filled.Save" Variant="Variant.Filled">Save Changes</MudButton>
 </MudStack>
 
 <MudHtmlEditor @ref="_editor" @bind-Html="@_html" />
+<MudText>@(deltaContentsString)</MudText>
 
 @code {
     private MudHtmlEditor _editor = default!;
     private string _html = "";
+    private string deltaContentsString = "";
 
     [Parameter]
     public string InitialHtml { get; set; } = "";
@@ -32,11 +36,16 @@
 
     private async Task SaveChanges()
     {
+        deltaContentsString = _editor.Contents?.ToString() ?? string.Empty;
         await OnSave.InvokeAsync(_html);
     }
 
     private async Task AddParagraph()
     {
         await _editor.SetHtml(_editor.Html + Environment.NewLine + "<p>New Paragraph</p>");
     }
+    private void ShowContents()
+    {
+        deltaContentsString = _editor.Contents?.ToString() ?? string.Empty;
+    }
 }

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

@@ -1,3 +1,4 @@
+using System.Text.Json.Nodes;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 
@@ -40,6 +41,18 @@ public sealed partial class MudHtmlEditor : IAsyncDisposable
     [Parameter]
     public EventCallback<string> HtmlChanged { get; set; }
 
+    /// <summary>
+    /// The delta contents from the editor.
+    /// </summary>
+    [Parameter]
+    public JsonObject Contents { get; set; } = new JsonObject();
+
+    /// <summary>
+    /// Raised when the <see cref="Contents"/> property changes.
+    /// </summary>
+    [Parameter]
+    public EventCallback<JsonObject> ContentsChanged { get; set; }
+
     /// <summary>
     /// The plain-text content from the editor.
     /// </summary>
@@ -83,6 +96,7 @@ public async Task SetHtml(string html)
 
         HandleHtmlContentChanged(html);
         HandleTextContentChanged(await GetText());
+        HandleContentsChanged(await GetContents());
     }
 
     /// <summary>
@@ -96,6 +110,17 @@ public async Task<string> GetHtml()
         return "";
     }
 
+    /// <summary>
+    /// Gets the current delta contents of the editor.
+    /// </summary>
+    public async Task<JsonObject> GetContents()
+    {
+        if (_quill is not null)
+            return await _quill.InvokeAsync<JsonObject>("getContents");
+
+        return  new JsonObject();
+    }
+
     /// <summary>
     /// Gets the current plain-text content of the editor.
     /// </summary>
@@ -149,6 +174,15 @@ public async void HandleTextContentChanged(string text)
         await TextChanged.InvokeAsync(text);
     }
 
+    [JSInvokable]
+    public async void HandleContentsChanged(JsonObject contents)
+    {
+        if (JsonObject.Equals(Contents, contents)) return; // nothing changed
+
+        Contents = contents;
+        await ContentsChanged.InvokeAsync(contents);
+    }
+
     async ValueTask IAsyncDisposable.DisposeAsync()
     {
         if (_quill is not null)

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

@@ -58,6 +58,10 @@ export class MudQuillInterop {
         return this.quill.getText();
     };
 
+    getContents = () => {
+        return this.quill.getContents();
+    };
+
     getHtml = () => {
         return this.quill.root.innerHTML;
     };
@@ -75,13 +79,14 @@ export class MudQuillInterop {
     };
 
     /**
-     * 
+     *
      * @param {Delta} delta
      * @param {Delta} oldDelta
      * @param {any} source
      */
     textChangedHandler = (delta, oldDelta, source) => {
         this.dotNetRef.invokeMethodAsync('HandleHtmlContentChanged', this.getHtml());
         this.dotNetRef.invokeMethodAsync('HandleTextContentChanged', this.getText());
+        this.dotNetRef.invokeMethodAsync('HandleContentsChanged', this.getContents());
     };
 }

src/Tizzani.MudBlazor.HtmlEditor/Tizzani.MudBlazor.HtmlEditor.csproj

@@ -5,11 +5,11 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <Title>$(AssemblyName)</Title>
-    <Authors>erinnmclaughlin</Authors>
+    <Authors>erinnmclaughlin, FeniXb3</Authors>
     <RepositoryUrl>https://github.com/erinnmclaughlin/MudBlazor.HtmlEditor</RepositoryUrl>
     <PackageLicenseFile>LICENSE</PackageLicenseFile>
     <PackageReadmeFile>README.md</PackageReadmeFile>
-    <Version>2.3.0</Version>
+    <Version>2.3.1</Version>
     <Description>A customizable HTML editor component for MudBlazor, powered by QuillJS.</Description>
     <Copyright>2024 Erin McLaughlin</Copyright>
     <PackageProjectUrl>https://github.com/erinnmclaughlin/MudBlazor.HtmlEditor</PackageProjectUrl>