src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/BitMarkdownViewer.scss (1)

6-8: Consider if a more targeted reset approach is needed.

Using all: revert on all child elements is a heavy-handed approach. This might cause inconsistencies if specific elements within the Markdown content need custom styling. Consider whether a more targeted reset for specific elements might be more appropriate.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MarkdownViewer/BitMarkdownViewerDemo.razor.scss (1)

1-7: Consider moving responsive image styling to the component itself.

The responsive image styling is appropriate for ensuring images scale properly, but this behavior might be desirable for all implementations of the MarkdownViewer, not just the demo. Consider moving this style to the component's base SCSS file so all implementers benefit from responsive images by default.

// In BitMarkdownViewer.scss
.bit-mdv {
    all: revert;

    * {
        all: revert;
    }
+    
+    img {
+        max-width: 100%;
+    }
}

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/BitMarkdownViewer.ts (2)

2-41: Consider refactoring to use standalone functions instead of a static class.

The MarkdownViewer class contains only static methods, which is flagged by static analysis. Consider using standalone functions within the namespace for a more functional approach.

namespace BitBlazorUI {
-    export class MarkdownViewer {
-        private static _initPromise?: Promise<unknown>;
+    let _initPromise?: Promise<unknown>;

-        public static async init(scripts: string[]) {
+    export async function init(scripts: string[]) {
-            if (MarkdownViewer._initPromise) {
-                await MarkdownViewer._initPromise;
+            if (_initPromise) {
+                await _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;
+            _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) {
+    export async function parse(md: string) {
            const html = await marked.parse(md, { async: true });
            return html;
        }
-    }
}

🧰 Tools

🪛 Biome (1.9.4)

[error] 2-41: Avoid classes that contain only static members.

Prefer using simple functions instead of classes with only static members.

(lint/complexity/noStaticOnlyClass)

---

[error] 15-22: Promise executor functions should not be async.

(lint/suspicious/noAsyncPromiseExecutor)

---

11-12: Correct typo in variable name notAppenedScripts.

There's a typo in the variable name notAppenedScripts. It should be notAppendedScripts.

-            const notAppenedScripts = scripts.filter(s => !allScripts.find(as => as.endsWith(s)));
+            const notAppendedScripts = scripts.filter(s => !allScripts.find(as => as.endsWith(s)));

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/BitMarkdownViewerJsRuntimeExtensions.cs (2)

3-4: Consider changing the access modifier to match component usage patterns.

The class is marked internal but contains public methods. If this is intended to be used only within the library, consider making the methods internal as well for consistency.

-internal static class BitMarkdownViewerJsRuntimeExtensions
+internal static class BitMarkdownViewerJsRuntimeExtensions
{
-    public static ValueTask BitMarkdownViewerInit(this IJSRuntime jsRuntime, IEnumerable<string> scripts)
+    internal 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)
+    internal static ValueTask<string> BitMarkdownViewerParse(this IJSRuntime jsRuntime, string markdown)
    {
        return jsRuntime.Invoke<string>("BitBlazorUI.MarkdownViewer.parse", markdown);
    }
}

---

1-14: Add missing using directives and parameter documentation.

The file is missing using directives for System.Threading.Tasks and Microsoft.JSInterop. Also consider adding XML documentation for the methods and parameters.

namespace Bit.BlazorUI;
+
+using System.Threading.Tasks;
+using Microsoft.JSInterop;

internal static class BitMarkdownViewerJsRuntimeExtensions
{
+    /// <summary>
+    /// Initializes the Markdown viewer by loading required scripts.
+    /// </summary>
+    /// <param name="jsRuntime">The JS runtime instance.</param>
+    /// <param name="scripts">The list of script URLs to load.</param>
+    /// <returns>A ValueTask representing the asynchronous operation.</returns>
    public static ValueTask BitMarkdownViewerInit(this IJSRuntime jsRuntime, IEnumerable<string> scripts)
    {
        return jsRuntime.InvokeVoid("BitBlazorUI.MarkdownViewer.init", scripts);
    }

+    /// <summary>
+    /// Parses Markdown content into HTML.
+    /// </summary>
+    /// <param name="jsRuntime">The JS runtime instance.</param>
+    /// <param name="markdown">The Markdown content to parse.</param>
+    /// <returns>A ValueTask containing the HTML string result.</returns>
    public static ValueTask<string> BitMarkdownViewerParse(this IJSRuntime jsRuntime, string markdown)
    {
        return jsRuntime.Invoke<string>("BitBlazorUI.MarkdownViewer.parse", markdown);
    }
}

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MarkdownViewer/BitMarkdownViewerDemo.razor (2)

5-5: Fix inconsistent casing in description.

The description uses lowercase "markdownviewer" which is inconsistent with the component name "MarkdownViewer" used elsewhere.

-            Description="markdownviewer component of the bit BlazorUI components" />
+            Description="MarkdownViewer component of the bit BlazorUI components" />

---

17-21: Consider adding responsive image styling by default.

In the advanced example, you're wrapping the BitMarkdownViewer in a div without any purpose. Consider adding the responsive image styles directly to the component parameters.

-    <DemoSection Title="Advanced" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
-        <div>
-            <BitMarkdownViewer Markdown="@advancedMarkdown" Class="advanced" />
-        </div>
+    <DemoSection Title="Advanced" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+        <BitMarkdownViewer Markdown="@advancedMarkdown" Class="advanced" />
     </DemoSection>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MarkdownViewer/BitMarkdownViewerDemo.razor.cs (3)

5-14: Consider adding more component parameters.

The demo page only shows one parameter "Markdown" for the BitMarkdownViewer component. If there are other parameters like "Class" that can be used, consider adding them to the componentParameters list.

    private readonly List<ComponentParameter> componentParameters =
    [
         new()
         {
            Name = "Markdown",
            Type = "string?",
            DefaultValue = "null",
            Description = "The Markdown string value to render as an html element.",
         },
+        new()
+        {
+            Name = "Class",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Additional CSS class to apply to the component."
+        }
    ];

---

93-106: Inconsistent string interpolation in example code.

The example code uses string interpolation with raw strings which would require many escape characters in real C# code. Consider simplifying to improve readability.

For example2RazorCode, you might want to use a verbatim string without escaping double quotes:

-    private readonly string example1RazorCode = @"
-<BitMarkdownViewer Markdown=""@(""# Marked in the browser\n\nRendered by **marked**."")"" />";
+    private readonly string example1RazorCode = @"
+<BitMarkdownViewer Markdown=""@(""# Marked in the browser\n\nRendered by **marked**."")"" />";

This is a minor issue, but could be confusing to developers looking at the demo.

---

25-26: Simplify Markdown string with verbatim strings.

The Markdown string has many escape sequences for double quotes. Consider using C#'s verbatim string literals with alternate quote delimiter to simplify this.

In C# 11+ you can use raw string literals with triple quotes to avoid escaping:

-[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/bitfoundation/bitplatform.svg)](http://isitmaintained.com/project/bitfoundation/bitplatform ""Average time to resolve an issue"")
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/bitfoundation/bitplatform.svg)](http://isitmaintained.com/project/bitfoundation/bitplatform ""Percentage of issues still open"")
+[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/bitfoundation/bitplatform.svg)](http://isitmaintained.com/project/bitfoundation/bitplatform """Average time to resolve an issue""")
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/bitfoundation/bitplatform.svg)](http://isitmaintained.com/project/bitfoundation/bitplatform """Percentage of issues still open""")

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownViewer/marked.d.ts (1)

609-609: Avoid confusing 'void' in union types
Static analysis highlights that using void within a union type can be misleading. Replace it with undefined or rework the type to be more descriptive (e.g., null | Promise<void>).

- declare type MaybePromise = void | Promise<void>;
+ declare type MaybePromise = undefined | Promise<void>;

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro