✨ make IsEditorEnabled bindable (#36)

Closes: #34

src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Examples/IsEditorEnabledRichTextEditorExample.razor

@@ -0,0 +1,47 @@
+<div>
+    <h3>
+        <code class="hljs">IsEditorEnabled</code> example
+    </h3>
+    <CodeSnippet Code="@Code">
+        <Component>
+            <CodeSnippet Code="@_content"
+                         CodeFormat="CodeFormat.Html"
+                         Summary="Show HTML">
+                <Component>
+                    <RichTextEditor @bind-Content="@_content"
+                                    @bind-IsEditorEnabled="@_isEditorEnabled" />
+
+                    <div class="container items-center border-2 border-dashed border-stone-500 p-4 mt-2">
+                        @((MarkupString)_isEditorEnabledContent)
+                    </div>
+
+                    <button class="cursor-pointer w-full flex justify-center items-center hover:bg-zinc-200 border-2 border-dashed border-stone-500 p-4 mt-2 gap-4"
+                            @onclick="@ToggleEditorState">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                             height="24"
+                             viewBox="0 0 24 24"
+                             width="24">
+                            <path d="M0 0h24v24H0z"
+                                  fill="none" />
+                            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+                        </svg>
+
+                        Toggle editor state
+                    </button>
+                </Component>
+            </CodeSnippet>
+        </Component>
+    </CodeSnippet>
+</div>
+
+@code {
+    private const string Code =
+@"<RichTextEditor @bind-Content=""@_content""
+                @bind-IsEditorEnabled=""@_isEditorEnabled"" />";
+    private string _content = "<b>Am I enabled? \ud83d\udd12</b>";
+
+    private bool _isEditorEnabled;
+    private string _isEditorEnabledContent => $"<p>Am I enabled? <strong>{_isEditorEnabled}</strong></p>";
+
+    private void ToggleEditorState() => _isEditorEnabled = !_isEditorEnabled;
+}

src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Pages/RichTextEditorExamplesPageContent.razor

@@ -24,6 +24,8 @@
                 <ToolbarPositionExample />
 
                 <IsTouchedEventCallbackExample />
+
+                <IsEditorEnabledRichTextEditorExample />
             </div>
 
             <a href="other"

src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor.cs

@@ -51,6 +51,23 @@ public string? Text
     [Parameter]
     public EventCallback<Range?> SelectionChanged { get; set; }
 
+    [Parameter]
+    public bool IsEditorEnabled { get; set; } = true;
+
+    [Parameter]
+    public EventCallback<bool> IsEditorEnabledChanged { get; set; }
+
+    /// <summary>
+    /// <para>
+    /// Indicates whether the component has been touched, more specifically if the editor content has changed.
+    /// </para>
+    /// </summary>
+    [Parameter]
+    public bool IsTouched { get; set; }
+
+    [Parameter]
+    public EventCallback<bool> IsTouchedChanged { get; set; }
+
     /// <summary>
     /// <para>
     /// Applies to <see cref="ContentChanged"/>, <see cref="TextChanged"/>, and <see cref="SelectionChanged"/>.
@@ -65,17 +82,6 @@ public string? Text
     [Parameter]
     public int DebounceIntervalInMilliseconds { get; set; } = 500;
 
-    /// <summary>
-    /// <para>
-    /// Indicates whether the component has been touched, more specifically if the editor content has changed.
-    /// </para>
-    /// </summary>
-    [Parameter]
-    public bool IsTouched { get; set; }
-
-    [Parameter]
-    public EventCallback<bool> IsTouchedChanged { get; set; }
-
     /// <summary>
     /// <para>
     /// Uses <see cref="Spillgebees.Blazor.RichTextEditor.Components.Toolbar.ToolbarOptions.BasicToolbarOptions"/> by default.
@@ -107,9 +113,6 @@ public string? Text
     [Parameter]
     public RenderFragment? ToolbarContent { get; set; }
 
-    [Parameter]
-    public bool IsEditorEnabled { get; set; } = true;
-
     [Parameter]
     public string Placeholder { get; set; } = "Compose an epic...";
 
@@ -125,6 +128,7 @@ public string? Text
     protected string? InternalContent;
     protected string? InternalText;
     protected Range? InternalSelection;
+    protected bool InternalIsEditorEnabled;
 
     protected string InternalContainerClass => new CssBuilder("rich-text-editor-container")
         .AddClass(ContainerClass)
@@ -263,7 +267,13 @@ protected override async Task OnParametersSetAsync()
             || InternalSelection is null)
         {
             InternalSelection = Selection;
-            await SetSelectionAsync(Selection);
+            await SetSelectionAsync(InternalSelection);
+        }
+
+        if (IsEditorEnabled != InternalIsEditorEnabled)
+        {
+            InternalIsEditorEnabled = IsEditorEnabled;
+            await SetIsEditorEnabledAsync(InternalIsEditorEnabled);
         }
     }
 
@@ -304,12 +314,12 @@ protected async Task SetContentAsync(string content)
     protected async Task SetSelectionAsync(Range? range)
         => await RichTextEditorJs.SetSelectionAsync(JsRuntime, Logger.Value, QuillReference, range);
 
-    protected async Task InsertImageAsync(string imageSource)
-        => await RichTextEditorJs.InsertImageAsync(JsRuntime, Logger.Value, QuillReference, imageSource);
-
     protected async Task SetIsEditorEnabledAsync(bool isEditorEnabled)
         => await RichTextEditorJs.SetIsEditorEnabledAsync(JsRuntime, Logger.Value, QuillReference, isEditorEnabled);
 
+    protected async Task InsertImageAsync(string imageSource)
+        => await RichTextEditorJs.InsertImageAsync(JsRuntime, Logger.Value, QuillReference, imageSource);
+
     protected virtual Task OnContentChangedAction(TextChangeEvent args)
     {
         if (args.Source is EventSource.User)