RackPeek/Shared.Rcl/Components/MarkdownViewer.razor

@using Markdig

<div class="relative border border-zinc-800 rounded p-4 bg-zinc-900">

    @if (ShowEditButton)
    {
        <div class="absolute top-2 right-2 z-10">
            <button class="text-xs text-blue-400 hover:text-blue-300 transition"
                    @onclick="HandleEdit">
                @(string.IsNullOrWhiteSpace(Value) ? "Add" : "Edit")
            </button>
        </div>
    }

    @if (string.IsNullOrWhiteSpace(Value))
    {
        <div class="text-sm text-zinc-500 italic">
            No notes
        </div>
    }
    else
    {
        <div class="markdown text-sm">
            @((MarkupString)_html)
        </div>
    }

</div>

@code {
    [Parameter] public string? Value { get; set; }
    [Parameter] public bool ShowEditButton { get; set; }
    [Parameter] public EventCallback OnEdit { get; set; }

    private string _html = string.Empty;

    private static readonly MarkdownPipeline Pipeline =
        new MarkdownPipelineBuilder()
            .UseAdvancedExtensions()
            .Build();

    protected override void OnParametersSet()
    {
        _html = Markdown.ToHtml(Value ?? string.Empty, Pipeline);
    }

    private Task HandleEdit()
        => OnEdit.HasDelegate ? OnEdit.InvokeAsync() : Task.CompletedTask;
}