feat(blazorui): add BitMarkdownEditor component bitfoundation#10230 (bitfoundation#10268)

Author: msynk

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

@@ -0,0 +1,11 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<div @ref="RootElement"
+     @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
+    <textarea @ref="_textAreaRef" class="bit-mde-txa" />
+</div>

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

@@ -0,0 +1,37 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// BitMarkdownEditor is a simple editor like GitHub md editor.
+/// </summary>
+public partial class BitMarkdownEditor : BitComponentBase
+{
+    private ElementReference _textAreaRef = default!;
+
+
+
+    [Inject] private IJSRuntime _js { get; set; } = default!;
+
+
+
+    /// <summary>
+    /// Returns the current value of the editor.
+    /// </summary>
+    public async ValueTask<string> GetValue()
+    {
+        return await _js.BitMarkdownEditorGetValue(_Id);
+    }
+
+
+
+    protected override string RootElementClass => "bit-mde";
+
+    protected override Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _js.BitMarkdownEditorInit(_Id, _textAreaRef);
+        }
+
+        return base.OnAfterRenderAsync(firstRender);
+    }
+}

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

@@ -0,0 +1,12 @@
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
+
+.bit-mde {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.bit-mde-txa {
+    width: 100%;
+    height: 100%;
+    padding: spacing(1);
+}