Ported Markdown Preview to DevToys 2.0

src/Directory.Packages.props

@@ -16,6 +16,8 @@
     <PackageVersion Include="GirCore.Adw-1" Version="$(GirCore)" />
     <PackageVersion Include="GirCore.Gtk-4.0" Version="$(GirCore)" />
     <PackageVersion Include="GirCore.WebKit-6.0" Version="$(GirCore)" />
+    <PackageVersion Include="Markdig" Version="0.33.0" />
+    <PackageVersion Include="Markdown.ColorCode" Version="2.1.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(DotNetVersion)" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebView" Version="$(DotNetVersion)" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebView.Wpf" Version="7.0.86" />

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIWebView.cs

@@ -0,0 +1,76 @@
+using OneOf;
+
+namespace DevToys.Api;
+
+/// <summary>
+/// A component that represents a web view.
+/// </summary>
+public interface IUIWebView : IUITitledElement
+{
+    /// <summary>
+    /// The HTML content to display, or URI to the page to display.
+    /// </summary>
+    OneOf<string, Uri>? Source { get; }
+
+    /// <summary>
+    /// Raised when <see cref="Source"/> is changed.
+    /// </summary>
+    event EventHandler? SourceChanged;
+}
+
+[DebuggerDisplay($"Id = {{{nameof(Id)}}}, Source = {{{nameof(Source)}}}")]
+internal sealed class UIWebView : UITitledElement, IUIWebView
+{
+    private OneOf<string, Uri>? _source = default;
+
+    internal UIWebView(string? id)
+        : base(id)
+    {
+    }
+
+    public OneOf<string, Uri>? Source
+    {
+        get => _source;
+        internal set => SetPropertyValue(ref _source, value, SourceChanged);
+    }
+
+    public event EventHandler? SourceChanged;
+}
+
+public static partial class GUI
+{
+    /// <summary>
+    /// A component that displays a web page.
+    /// </summary>
+    public static IUIWebView WebView()
+    {
+        return WebView(id: null);
+    }
+
+    /// <summary>
+    /// A component that displays a web page.
+    /// </summary>
+    /// <param name="id">An optional unique identifier for this UI element.</param>
+    public static IUIWebView WebView(string? id)
+    {
+        return new UIWebView(id);
+    }
+
+    /// <summary>
+    /// Sets the <see cref="IUIWebView.Source"/> from an HTML document.
+    /// </summary>
+    public static IUIWebView RenderHTML(this IUIWebView element, string html)
+    {
+        ((UIWebView)element).Source = html;
+        return element;
+    }
+
+    /// <summary>
+    /// Sets the <see cref="IUIWebView.Source"/> from a <see cref="Uri"/>.
+    /// </summary>
+    public static IUIWebView NavigateToUri(this IUIWebView element, Uri uri)
+    {
+        ((UIWebView)element).Source = uri;
+        return element;
+    }
+}

src/app/dev/DevToys.Blazor/Components/UIElements/UIElementPresenter.razor

@@ -94,6 +94,10 @@
             <UIImageViewerPresenter UIImageViewer="@imageViewer" />
             break;
 
+        case IUIWebView webView:
+            <UIWebViewPresenter UIWebView="@webView" />
+            break;
+
         default:
             throw new NotSupportedException($"Gui Tool component of type '{UIElement.GetType().FullName}' isn't supported.");
     }

src/app/dev/DevToys.Blazor/Components/UIElements/UIWebViewPresenter.razor

@@ -0,0 +1,40 @@
+@namespace DevToys.Blazor.Components.UIElements
+@using DevToys.Api;
+@inherits JSStyledComponentBase
+
+<CascadingValue Name="ParentIsEnabled" Value="@IsActuallyEnabled">
+
+    <Grid id="@UIWebView.Id"
+          Class="ui-web-view"
+          IsVisible="@UIWebView.IsVisible"
+          IsEnabled="@UIWebView.IsEnabled"
+          HorizontalAlignment="@UIWebView.HorizontalAlignment"
+          VerticalAlignment="@UIWebView.VerticalAlignment"
+          RowSpacing="6"
+          Rows="@(new List<UIGridLength>
+            {
+                UIGridLength.Auto,
+                new UIGridLength(1, UIGridUnitType.Fraction)
+            })"
+          ColumnSpacing="6"
+          Columns="@(new List<UIGridLength>
+            {
+                new UIGridLength(1, UIGridUnitType.Fraction)
+            })">
+        <GridCell Row="0" Column="0" Class="ui-web-view-title">
+            <TextBlock id="@(UIWebView.Id + "-title")"
+                       Text="@UIWebView.Title"
+                       NoWrap="true"
+                       CanTrim="true" />
+        </GridCell>
+        <GridCell Row="1" Column="0">
+            <Container>
+                <iframe @ref="@_iframeElement"
+                        id="@(UIWebView.Id + "-iframe")"
+                        sandbox="allow-scripts allow-same-origin"
+                        class="ui-web-view-frame" />
+            </Container>
+        </GridCell>
+    </Grid>
+
+</CascadingValue>

src/app/dev/DevToys.Blazor/Components/UIElements/UIWebViewPresenter.razor.cs

@@ -0,0 +1,56 @@
+namespace DevToys.Blazor.Components.UIElements;
+
+public partial class UIWebViewPresenter : JSStyledComponentBase
+{
+    protected override string? JavaScriptFile => "./_content/DevToys.Blazor/Components/UIElements/UIWebViewPresenter.razor.js";
+
+    [Parameter]
+    public IUIWebView UIWebView { get; set; } = default!;
+
+    private ElementReference _iframeElement;
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        UIWebView.SourceChanged += UIWebView_SourceChanged;
+    }
+
+    public override async ValueTask DisposeAsync()
+    {
+        UIWebView.SourceChanged -= UIWebView_SourceChanged;
+        await base.DisposeAsync();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            await UpdateWebViewContentAsync();
+        }
+    }
+
+    private void UIWebView_SourceChanged(object? sender, EventArgs e)
+    {
+        UpdateWebViewContentAsync().Forget();
+    }
+
+    private async Task UpdateWebViewContentAsync()
+    {
+        using (await Semaphore.WaitAsync(CancellationToken.None))
+        {
+            if (UIWebView.Source.HasValue)
+            {
+                if (UIWebView.Source.Value.TryPickT0(out string html, out Uri uri))
+                {
+                    await (await JSModule).InvokeVoidWithErrorHandlingAsync("webViewNavigateToHtml", _iframeElement, html);
+                }
+                else
+                {
+                    await (await JSModule).InvokeVoidWithErrorHandlingAsync("webViewNavigateToUri", _iframeElement, uri.ToString());
+                }
+            }
+        }
+    }
+}

src/app/dev/DevToys.Blazor/Components/UIElements/UIWebViewPresenter.razor.scss

@@ -0,0 +1,33 @@
+@use "../../Assets/sass/devtoys" as *;
+
+.ui-web-view {
+    &-title {
+        height: 20px !important;
+        margin-top: 14px;
+    }
+
+    &-frame {
+        @include flex($direction: row, $align: center, $justify: between, $gap: 12px);
+        @include typography-body;
+        color: var(--card-foreground);
+        border: var(--card-border-thickness);
+        border-color: var(--card-border);
+        border-radius: var(--control-corner-radius);
+        background-clip: padding-box;
+        background-color: var(--card-background-color);
+        min-height: 72px;
+        width: 100%;
+        height: 100%;
+        pointer-events: all;
+    }
+}
+
+// Compact mode
+div[data-compactmode] {
+    .ui-web-view {
+        &-title {
+            height: 20px !important;
+            margin-top: 7px;
+        }
+    }
+}

src/app/dev/DevToys.Blazor/Components/UIElements/UIWebViewPresenter.razor.ts

@@ -0,0 +1,8 @@
+export function webViewNavigateToUri(iframe: HTMLIFrameElement, uri: string): void {
+    iframe.src = uri;
+}
+
+export function webViewNavigateToHtml(iframe: HTMLIFrameElement, html: string): void {
+    const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+    iframeDocument.body.innerHTML = html;
+}