Add MarkdownViewer extra component (#10111)

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/BitMarkdownViewer.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()">
+    @((MarkupString)(_html ?? ""))
+</div>

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/BitMarkdownViewer.razor.cs

@@ -0,0 +1,56 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// BitMarkdownViewer is a Blazor wrapper around the famous markedjs library.
+/// <see href="https://github.com/markedjs/marked"/>
+/// </summary>
+public partial class BitMarkdownViewer : BitComponentBase
+{
+    private string? _html;
+
+
+
+    [Inject] private IJSRuntime _js { get; set; } = default!;
+
+
+
+    /// <summary>
+    /// The Markdown string value to render as an html element.
+    /// </summary>
+    [Parameter, CallOnSet(nameof(OnMarkdownSet))]
+    public string? Markdown { get; set; }
+
+
+
+    protected override string RootElementClass => "bit-mdv";
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            await _js.BitPdfReaderInit(["_content/Bit.BlazorUI.Extras/marked/marked-15.0.7.js"]);
+
+            await ParseAndRender();
+        }
+    }
+
+
+
+    private async Task OnMarkdownSet()
+    {
+        if (IsRendered is false) return;
+
+        await ParseAndRender();
+    }
+
+    private async Task ParseAndRender()
+    {
+        if (Markdown.HasNoValue()) return;
+
+        _html = await _js.BitMarkdownViewerParse(Markdown!);
+
+        StateHasChanged();
+    }
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/BitMarkdownViewer.scss

@@ -0,0 +1,9 @@
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
+
+.bit-mdv {
+    all: revert;
+
+    * {
+        all: revert;
+    }
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/BitMarkdownViewer.ts

@@ -0,0 +1,42 @@
+namespace BitBlazorUI {
+    export class MarkdownViewer {
+        private static _initPromise?: Promise<unknown>;
+
+        public static async init(scripts: string[]) {
+            if (MarkdownViewer._initPromise) {
+                await MarkdownViewer._initPromise;
+            }
+
+            const allScripts = Array.from(document.scripts).map(s => s.src);
+            const notAppenedScripts = scripts.filter(s => !allScripts.find(as => as.endsWith(s)));
+
+            if (notAppenedScripts.length == 0) return Promise.resolve();
+
+            const promise = new Promise(async (resolve: any, reject: any) => {
+                try {
+                    for (let url of notAppenedScripts) await addScript(url);
+                    resolve();
+                } catch (e: any) {
+                    reject(e);
+                }
+            });
+            MarkdownViewer._initPromise = promise;
+            return promise;
+
+            async function addScript(url: string) {
+                return new Promise((res, rej) => {
+                    const script = document.createElement('script');
+                    script.src = url;
+                    script.onload = res;
+                    script.onerror = rej;
+                    document.body.appendChild(script);
+                })
+            }
+        }
+
+        public static async parse(md: string) {
+            const html = await marked.parse(md, { async: true });
+            return html;
+        }
+    }
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/BitMarkdownViewerJsRuntimeExtensions.cs

@@ -0,0 +1,14 @@
+namespace Bit.BlazorUI;
+
+internal static class BitMarkdownViewerJsRuntimeExtensions
+{
+    public static ValueTask BitMarkdownViewerInit(this IJSRuntime jsRuntime, IEnumerable<string> scripts)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.MarkdownViewer.init", scripts);
+    }
+
+    public static ValueTask<string> BitMarkdownViewerParse(this IJSRuntime jsRuntime, string markdown)
+    {
+        return jsRuntime.Invoke<string>("BitBlazorUI.MarkdownViewer.parse", markdown);
+    }
+}