Add feature : Custom Handlers

README.md

@@ -88,6 +88,27 @@ For more advanced customization, you can define your own toolbar options inside
 </MudHtmlEditor>
 ```
 
+#### Custom Handlers
+As Quill expects a handler created for every class you can add in custom handlers through the CustomHandler parameter where CustomHandler is a Dictionary<string, string>:
+
+```csharp
+// classname is added to the dictionary without the leading ql- as that is inferred during Quill instanciation
+private Dictionary<string, string> _customHandler_ = new()
+{
+    {"classname", "console.log('hello world');"}
+}
+```
+
+```razor
+<MudHtmlEditor CustomHandler="@_customHandler">
+    <span class="ql-formats">
+        <button class="ql-classname" type="button"/>
+    </span>
+</>
+```
+
+This would require a css class for ql-classname to display a nice button with icon or text etc as per the QuillJS documentation.
+
 See the [QuillJS documentation](https://quilljs.com/docs/modules/toolbar/) for more information on customizing the toolbar.
 
 ## Migrating from v1.0 to v2.0

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

@@ -64,6 +64,8 @@ public sealed partial class MudHtmlEditor : IAsyncDisposable
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object?>? UserAttributes { get; set; }
 
+    [Parameter]
+    public IDictionary<string, string>? CustomHandlers { get; set; }
 
     /// <summary>
     /// Clears the content of the editor.
@@ -114,8 +116,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _dotNetRef = DotNetObjectReference.Create(this);
 
             await using var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js");
-            _quill = await module.InvokeAsync<IJSObjectReference>("createQuillInterop", _dotNetRef, _editor, _toolbar, Placeholder);
-
+            _quill = await module.InvokeAsync<IJSObjectReference>("createQuillInterop", _dotNetRef, _editor, _toolbar, Placeholder, CustomHandlers);
             await SetHtml(Html);
 
             StateHasChanged();

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

@@ -16,7 +16,7 @@ try {
     Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
 } catch { }    
 
-export function createQuillInterop(dotNetRef, editorRef, toolbarRef, placeholder) {
+export function createQuillInterop(dotNetRef, editorRef, toolbarRef, placeholder, customHandlers) {
     var quill = new Quill(editorRef, {
         modules: {
             toolbar: {
@@ -27,6 +27,15 @@ export function createQuillInterop(dotNetRef, editorRef, toolbarRef, placeholder
         placeholder: placeholder,
         theme: 'snow'
     });
+
+    // Dynamically add handlers from customHandlers to the toolbar
+    const toolbar = quill.getModule('toolbar');
+    if (customHandlers) {
+        Object.keys(customHandlers).forEach(key => {
+            toolbar.addHandler(key, new Function('value', customHandlers[key]));
+        });
+    }
+
     return new MudQuillInterop(dotNetRef, quill, editorRef, toolbarRef);
 }