Merge pull request #97 from gismofx/main

Allow initial loading of quill "delta" content via component parameter.

Author: ADefWebserver

src/Blazored.TextEditor/Blazored.TextEditor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFrameworks>netstandard2.0;net9.0</TargetFrameworks>
+    <TargetFrameworks>net8.0</TargetFrameworks>
     <RazorLangVersion>3.0</RazorLangVersion>
     <RootNamespace>Blazored.TextEditor</RootNamespace>
 

src/Blazored.TextEditor/BlazoredTextEditor.razor

@@ -1,4 +1,6 @@
-@inject IJSRuntime JSRuntime
+@using System.ComponentModel
+@using System.Text.Json
+@inject IJSRuntime JSRuntime
 
 @if (!BottomToolbar)
 {
@@ -44,6 +46,13 @@
     public bool ReadOnly { get; set; }
         = false;
 
+    /// <summary>
+    /// Pass in initial quill 'delta' content to be rendered.
+    /// Not required. Can be empty or null.
+    /// </summary>
+    //[Parameter]
+    //public string InitialContent { get; set; } = string.Empty;
+
     [Parameter]
     public string Placeholder { get; set; }
         = "Compose an epic...";
@@ -94,8 +103,17 @@
     [Parameter]
     public bool Syntax { get; set; }
 
+    [Parameter]
+    public string Content { get; set; }
+
+    [Parameter]
+    public EventCallback<string> ContentChanged { get; set; }
+
     private ElementReference QuillElement;
     private ElementReference ToolBar;
+    private DotNetObjectReference<BlazoredTextEditor> _ObjectReference;
+
+    private bool IsRendered = false;
 
     protected override async Task
         OnAfterRenderAsync(bool firstRender)
@@ -111,9 +129,42 @@
                 Theme,
                 Formats,
                 DebugLevel,
-                Syntax
+                Syntax,
+                _ObjectReference
+
             );
+
+            await LoadContent();
         }
+        if (!IsRendered)
+        {
+            await LoadContent();
+        }
+    }
+
+    private string previousContent = string.Empty;
+
+    private async Task LoadContent()
+    {
+        if (!string.IsNullOrWhiteSpace(Content))
+            await LoadContent(Content);
+        previousContent = Content;
+        IsRendered = true;
+    }
+
+    protected override void OnParametersSet()
+    {
+        if (Content !=previousContent)
+        {
+            IsRendered = false;
+        }
+
+    }
+
+
+    protected override void OnInitialized()
+    {
+        _ObjectReference = DotNetObjectReference.Create(this);
     }
 
     public async Task<string> GetText()
@@ -222,4 +273,30 @@
                 JSRuntime, QuillElement, mode, cancellationToken);
     }
 
+    private async Task GetQuill()
+    {
+        if (IsRendered)
+        {
+            Content = await GetContent();
+            await ContentChanged.InvokeAsync(Content);
+        }
+
+    }
+
+
+    [JSInvokable("DeltaChanged")]
+    [EditorBrowsable(EditorBrowsableState.Never)]
+    public async Task OnChange(JsonElement delta)
+    {
+        if (DebugLevel.Equals("info"))
+        {
+            Console.WriteLine($"Quill Editor Element: {EditorId} Invoked Change in Blazor");
+            Console.WriteLine("    Contents:" + delta.ToString());
+        }
+        await ContentChanged.InvokeAsync(delta.ToString());
+    }
+
+
+
+
 }

src/Blazored.TextEditor/Interop.cs

@@ -16,12 +16,13 @@ internal static ValueTask<object> CreateQuill(
             string theme,
             string[] formats,
             string debugLevel,
-            bool syntax)
+            bool syntax,
+            DotNetObjectReference<BlazoredTextEditor> reference)
         {
             return jsRuntime.InvokeAsync<object>(
                 "QuillFunctions.createQuill",
                 quillElement, toolbar, readOnly,
-                placeholder, theme, formats, debugLevel, syntax);
+                placeholder, theme, formats, debugLevel, syntax, reference);
         }
 
         internal static ValueTask<string> GetText(

src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js

@@ -1,8 +1,13 @@
 (function () {
+
+
     window.QuillFunctions = {        
+
+        dotNetRefs: new Map(),
+
         createQuill: function (
             quillElement, toolBar, readOnly,
-            placeholder, theme, formats, debugLevel, syntax) {  
+            placeholder, theme, formats, debugLevel, syntax, dotNetObjectRef) {  
 
             Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
 
@@ -23,6 +28,19 @@
             }
 
             quillElement.__quill = new Quill(quillElement, options);
+
+            QuillFunctions.dotNetRefs.set(quillElement.id, dotNetObjectRef);
+
+            //On Blur - we update the object in dotnet
+            quillElement.__quill.editor.scroll.domNode.addEventListener('blur',
+                () => {
+                    if (quillElement.__quill.options.debug === "info") {
+                        console.log('info: Quill Editor blur event for ' + quillElement.id);
+                    }
+                    QuillFunctions.dotNetRefs.get(quillElement.id).invokeMethodAsync('DeltaChanged', QuillFunctions.getQuillContent(quillElement));
+                }
+            );
+
         },
         getQuillContent: function(quillElement) {
             return JSON.stringify(quillElement.__quill.getContents());