feat(blazorui): improve BitMarkdownEditor bitfoundation#10271 (bitfoundation#10272)

Author: msynk

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.razor.cs

@@ -6,13 +6,32 @@
 public partial class BitMarkdownEditor : BitComponentBase
 {
     private ElementReference _textAreaRef = default!;
+    private DotNetObjectReference<BitMarkdownEditor>? _dotnetObj = null;
 
 
 
     [Inject] private IJSRuntime _js { get; set; } = default!;
 
 
 
+    /// <summary>
+    /// The default text value of the editor to use at initialization.
+    /// </summary>
+    [Parameter] public string? DefaultValue { get; set; }
+
+    /// <summary>
+    /// Callback for when the editor value changes.
+    /// </summary>
+    [Parameter] public EventCallback<string?> OnChange { get; set; }
+
+    /// <summary>
+    /// The two-way bound text value of the editor.
+    /// </summary>
+    [Parameter, TwoWayBound]
+    public string? Value { get; set; }
+
+
+
     /// <summary>
     /// Returns the current value of the editor.
     /// </summary>
@@ -23,15 +42,46 @@ public async ValueTask<string> GetValue()
 
 
 
+    [JSInvokable("OnChange")]
+    public async Task _OnChange(string? value)
+    {
+        await AssignValue(value);
+        await OnChange.InvokeAsync(value);
+    }
+
+
+
     protected override string RootElementClass => "bit-mde";
 
-    protected override Task OnAfterRenderAsync(bool firstRender)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender is false) return;
+
+        if ((ValueHasBeenSet && ValueChanged.HasDelegate) || OnChange.HasDelegate)
+        {
+            _dotnetObj = DotNetObjectReference.Create(this);
+        }
+
+        await _js.BitMarkdownEditorInit(_Id, _textAreaRef, _dotnetObj, DefaultValue);
+    }
+
+
+
+    protected override async ValueTask DisposeAsync(bool disposing)
     {
-        if (firstRender)
+        if (IsDisposed || disposing is false) return;
+
+        _dotnetObj?.Dispose();
+
+        try
         {
-            _js.BitMarkdownEditorInit(_Id, _textAreaRef);
+            await _js.BitMarkdownEditorDispose(_Id);
         }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
+
 
-        return base.OnAfterRenderAsync(firstRender);
+        await base.DisposeAsync(disposing);
     }
 }

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.scss

@@ -2,6 +2,7 @@
 
 .bit-mde {
     width: 100%;
+    height: 100%;
     box-sizing: border-box;
 }