[Sample App] Add Markdown support for WASM via Markdig ToHtml Fixes #151

Works pretty well, seems to be a timing issue with layout and the image in the Rive sample I think? Slowing down in the debugger causes it not to occur, so hard to understand.

common/CommunityToolkit.Labs.Shared/Renderers/Markdown/MarkdownTextBlock.cs

@@ -16,11 +16,79 @@
     #endif
 #endif
 
+#if __WASM__
+using Markdig;
+using Uno.Foundation.Interop;
+#endif
+
 namespace CommunityToolkit.Labs.Shared.Renderers;
 
 /// <summary>
 /// Provide an abstraction around the Toolkit MarkdownTextBlock for both UWP and WinUI 3 in the same namespace (until 8.0) as well as a polyfill for WebAssembly/WASM.
 /// </summary>
+#if __WASM__
+public partial class MarkdownTextBlock : Control
+{
+    public string Text
+    {
+        get { return (string)GetValue(TextProperty); }
+        set { SetValue(TextProperty, value); }
+    }
+
+    public static readonly DependencyProperty TextProperty =
+        DependencyProperty.Register(nameof(Text), typeof(string), typeof(MarkdownTextBlock), new PropertyMetadata(null, MarkdownTextChanged));
+
+    private static void MarkdownTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is MarkdownTextBlock mtb && mtb.IsLoaded)
+        {
+            mtb.UpdateText(e.NewValue as string ?? string.Empty);
+        }
+    }
+
+    public MarkdownTextBlock()
+    {
+        Loaded += this.MarkdownTextBlock_Loaded;
+    }
+
+    private void MarkdownTextBlock_Loaded(object sender, RoutedEventArgs e)
+    {
+        this.RegisterHtmlEventHandler("resize", HtmlElementResized);
+
+        UpdateText(Text);
+    }
+
+    #nullable enable
+    private void HtmlElementResized(object? sender, EventArgs e)
+    {
+        this.UpdateLayout();
+    }
+
+    private void UpdateText(string markdown)
+    {
+        // TODO: Check color hasn't changed since last time.
+        var color = (Foreground as SolidColorBrush)?.Color;
+        if (color != null)
+        {
+            this.SetCssStyle(("color", $"#{color!.ToString()!.Substring(3)}"), ("font-family", "Segoe UI"));
+        }
+        else
+        {
+            this.SetCssStyle("fontFamily", "Segoe UI");
+        }        
+
+        this.SetHtmlContent(Markdown.ToHtml(markdown));
+    }
+
+    protected override Size MeasureOverride(Size availableSize)
+    {
+        var size = this.MeasureHtmlView(availableSize, true);
+
+        return size;
+    }
+}
+#else
 public partial class MarkdownTextBlock : ToolkitMTB
 {
 }
+#endif

common/Labs.Head.Wasm.props

@@ -36,6 +36,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Markdig" Version="0.30.4" />
     <PackageReference Include="Microsoft.Windows.Compatibility" Version="5.0.0" />
     <PackageReference Include="Microsoft.Extensions.Logging" Version="5.0.0" />
     <PackageReference Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.0.1" />

labs/RivePlayer/samples/RivePlayer.Samples/RivePlayer.md

@@ -11,15 +11,9 @@ labs-discussion: 309
 labs-issue: 0
 ---
 
-<!-- To know about all the available Markdown syntax, Check out https://docs.microsoft.com/contribute/markdown-reference -->
-<!-- Ensure you remove all comments before submission, to ensure that there are no formatting issues when displaying this page.  -->
-<!-- It is recommended to check how the Documentation will look in the sample app, before Merging a PR -->
-<!-- **Note:** All links to other docs.microsoft.com pages should be relative without locale, i.e. for the one above would be /contribute/markdown-reference -->
-<!-- Included images should be optimized for size and not include any Intellectual Property references. -->
-
 # RivePlayer
 
-![Rive hero image](https://rive-app.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fff44ed5f-1eea-4154-81ef-84547e61c3fd%2Frive_notion.png?table=block&id=f198cab2-c0bc-4ce8-970c-42220379bcf3&spaceId=9c949665-9ad9-445f-b9c4-5ee204f8b60c&width=2000&userId=&cache=v2)
+![Rive hero image](https://rive-app.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fff44ed5f-1eea-4154-81ef-84547e61c3fd%2Frive_notion.png?table=block&id=f198cab2-c0bc-4ce8-970c-42220379bcf3&spaceId=9c949665-9ad9-445f-b9c4-5ee204f8b60c&width=512&userId=&cache=v2)
 
 A high-level runtime for the [Windows Community Toolkit](https://docs.microsoft.com/windows/communitytoolkit/) to use [Rive](https://rive.app) in Universal Windows Platform (UWP) applications.