From 7be3e0e4ec20ef4156299d06e2ac879afecef30c Mon Sep 17 00:00:00 2001
From: Nick Bailey <Nick.Bailey@activate-group.com>
Date: Mon, 14 Oct 2024 16:31:01 +0100
Subject: [PATCH 1/3] Added CustomHandlers

---
 README.md                                        | 16 ++++++++++++++++
 .../MudHtmlEditor.razor.cs                       |  5 +++--
 .../MudHtmlEditor.razor.js                       | 11 ++++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f790d96..513f71d 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,22 @@ 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">
+</>
+```
+
 See the [QuillJS documentation](https://quilljs.com/docs/modules/toolbar/) for more information on customizing the toolbar.
 
 ## Migrating from v1.0 to v2.0
diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs
index 58aadcc..d003db9 100644
--- a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs
+++ b/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();
diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js
index 974d5b6..a102c8e 100644
--- a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js
+++ b/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);
 }
 

From 65b6ed73ae959f33fb099206c4fe6179bbbe1b48 Mon Sep 17 00:00:00 2001
From: Nick Bailey <Nick.Bailey@activate-group.com>
Date: Mon, 14 Oct 2024 16:33:57 +0100
Subject: [PATCH 2/3] Improved readme

---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index 513f71d..facf880 100644
--- a/README.md
+++ b/README.md
@@ -101,9 +101,14 @@ private Dictionary<string, string> _customHandler_ = new()
 
 ```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

From c6fa75f68f1f64f5c0cb704a3a55534cd5b83168 Mon Sep 17 00:00:00 2001
From: Nick Bailey <Nick.Bailey@activate-group.com>
Date: Mon, 14 Oct 2024 16:55:55 +0100
Subject: [PATCH 3/3] Created MudHtmlPicker to allow for easy addition of a
 custom picker to the toolbar.

---
 README.md                                     | 25 ++++++++
 samples/BlazorWasm/Pages/EditorView.razor     | 16 ++++-
 .../MudHtmlPicker.razor                       |  6 ++
 .../MudHtmlPicker.razor.cs                    | 61 +++++++++++++++++++
 .../StringExtensions.cs                       | 15 +++++
 5 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 src/Tizzani.MudBlazor.HtmlEditor/MudHtmlPicker.razor
 create mode 100644 src/Tizzani.MudBlazor.HtmlEditor/MudHtmlPicker.razor.cs
 create mode 100644 src/Tizzani.MudBlazor.HtmlEditor/StringExtensions.cs

diff --git a/README.md b/README.md
index facf880..4a8805f 100644
--- a/README.md
+++ b/README.md
@@ -114,3 +114,28 @@ See the [QuillJS documentation](https://quilljs.com/docs/modules/toolbar/) for m
 ## Migrating from v1.0 to v2.0
 * Remove the `services.AddMudBlazorHtmlEditor();` call from your `Startup.cs` or `Program.cs` file.
 * Remove the `<script src="_content/Tizzani.MudBlazor.HtmlEditor/HtmlEditor.js">` tag from the document body. The required JS is now included by default.
+
+### Easy Custom Picker (originally designed for inserting tags)
+Requires `<MudHtmlEditor>` to have valid CustomHandlers property and Dictionary<string, string> for Options property of `<MudHtmlPicker>`:
+
+```csharp
+private Dictionary<string, string> _customHandlers = new() {
+    {"custom", "const e=this.quill.getSelection(); this.quill.insertText(e.index, value);"}
+};
+
+private Dictionary<string, string> _options = new()
+{
+    { "{{ Tag1 }}", "Tag 1" },
+    { "{{ Tag2 }}", "Tag 2" },
+    { "{{ Tag3 }}", "Tag 3" }
+};
+```
+
+```razor
+<MudHtmlEditor @ref="_editor" @bind-Html="@_html" CustomHandlers="@_customHandlers">
+    <MudHtmlToolbarOptions />
+    <MudHtmlPicker Name="custom" Placeholder="Insert Tag ..." Options="_options" />
+</MudHtmlEditor>
+```
+
+Name must be a value existing as the key in the _customHandlers dictionary.
\ No newline at end of file
diff --git a/samples/BlazorWasm/Pages/EditorView.razor b/samples/BlazorWasm/Pages/EditorView.razor
index b39375d..50a5b21 100644
--- a/samples/BlazorWasm/Pages/EditorView.razor
+++ b/samples/BlazorWasm/Pages/EditorView.razor
@@ -4,7 +4,10 @@
     <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" />
+<MudHtmlEditor @ref="_editor" @bind-Html="@_html" CustomHandlers="@_customHandlers">
+    <MudHtmlToolbarOptions />
+    <MudHtmlPicker Name="custom" Placeholder="Insert Tag ..." Options="_options" />
+</MudHtmlEditor>
 
 @code {
     private MudHtmlEditor _editor = default!;
@@ -19,6 +22,17 @@
     [Parameter]
     public EventCallback<string> OnSave { get; set; }
 
+    private Dictionary<string, string> _customHandlers = new() {
+        {"custom", "const e=this.quill.getSelection(); this.quill.insertText(e.index, value);"}
+    };
+
+    private Dictionary<string, string> _options = new()
+    {
+        { "{{ Tag1 }}", "Tag 1" },
+        { "{{ Tag2 }}", "Tag 2" },
+        { "{{ Tag3 }}", "Tag 3" }
+    };
+
     protected override void OnParametersSet()
     {
         _html = InitialHtml;
diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlPicker.razor b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlPicker.razor
new file mode 100644
index 0000000..6c24c3d
--- /dev/null
+++ b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlPicker.razor
@@ -0,0 +1,6 @@
+<select class="ql-@Name">
+    @foreach (var opt in Options)
+    {
+        <option value="@opt.Key">@opt.Value</option>
+    }
+</select>
\ No newline at end of file
diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlPicker.razor.cs b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlPicker.razor.cs
new file mode 100644
index 0000000..c7aefc9
--- /dev/null
+++ b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlPicker.razor.cs
@@ -0,0 +1,61 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Tizzani.MudBlazor.HtmlEditor
+{
+    public partial class MudHtmlPicker
+    {
+        [Inject]
+        private IJSRuntime JS { get; set; } = default!;
+
+        [Parameter]
+        public string Name { get; set; } = default!;
+
+        [Parameter]
+        public Dictionary<string, string> Options { get; set; } = default!;
+
+        [Parameter]
+        public string Placeholder { get; set; } = "No placeholder set";
+
+        private string GeneratedScript => $@"
+            // Define a custom format
+            const {Name.FirstCharToUpper()}Format = Quill.import('blots/inline');
+            CustomFormat.blotName = '{Name}';
+            CustomFormat.tagName = 'SPAN';
+            Quill.register({Name.FirstCharToUpper()}Format, true);
+        ";
+
+        protected async override Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                var listof = Options.ToList();
+
+                var generatedCss = GenerateCss();
+                await JS.InvokeVoidAsync("eval", $"document.head.insertAdjacentHTML('beforeend', `<style>{generatedCss}</style>`);");
+                await JS.InvokeVoidAsync("eval", GeneratedScript);
+            }
+        }
+
+        private string GenerateCss()
+        {
+            string generatedCss = $@"
+                .ql-picker.ql-{Name} .ql-picker-label:before {{
+                    content: '{Placeholder}';
+                    width: 150px;
+                }}
+                ";
+
+            foreach (var key in Options.Keys)
+            {
+                generatedCss += $@"
+                .ql-picker.ql-{Name} .ql-picker-item[data-value='{key}']:before {{
+                    content: '{Options[key]}';
+                }}
+            ";
+            }
+
+            return generatedCss;
+        }
+    }
+}
diff --git a/src/Tizzani.MudBlazor.HtmlEditor/StringExtensions.cs b/src/Tizzani.MudBlazor.HtmlEditor/StringExtensions.cs
new file mode 100644
index 0000000..8f73e12
--- /dev/null
+++ b/src/Tizzani.MudBlazor.HtmlEditor/StringExtensions.cs
@@ -0,0 +1,15 @@
+namespace Tizzani.MudBlazor.HtmlEditor
+{
+    public static class StringExtensions
+    {
+        public static string FirstCharToUpper(this string input)
+        {
+            switch (input)
+            {
+                case null: throw new ArgumentNullException(nameof(input));
+                case "": throw new ArgumentException($"{nameof(input)} cannot be empty", nameof(input));
+                default: return input[0].ToString().ToUpper() + input.Substring(1);
+            }
+        }
+    }
+}