Add support for binding to MarkupString values

It's quite convenient to be able to bind directly to data containing raw HTML. This is quite convoluted to do today, requiring registering a TypeDescriptionProvider, which in turn returns a custom type descriptor which in turn can provide the missing TypeConverter for the desired type.

This adds support out of the box for binding straight to markup strings.

Follows the implementation and tests from dotnet#10730.

Closes dotnet#47718

Author: kzu

src/Components/Components/src/MarkupString.cs

@@ -1,11 +1,16 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using System.ComponentModel;
+using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
+
 namespace Microsoft.AspNetCore.Components;
 
 /// <summary>
 /// A string value that can be rendered as markup such as HTML.
 /// </summary>
+[TypeConverter(typeof(MarkupStringTypeConverter))]
 public readonly struct MarkupString
 {
     /// <summary>
@@ -32,4 +37,33 @@ public static explicit operator MarkupString(string value)
     /// <inheritdoc />
     public override string ToString()
         => Value ?? string.Empty;
+
+    private class MarkupStringTypeConverter : TypeConverter
+    {
+        public override bool CanConvertFrom(ITypeDescriptorContext? context, Type sourceType)
+            => sourceType == typeof(string) || base.CanConvertFrom(context, sourceType);
+
+        public override object? ConvertFrom(ITypeDescriptorContext? context, CultureInfo? culture, object value)
+        {
+            if (value is string markup)
+            {
+                return (MarkupString)markup;
+            }
+
+            return base.ConvertFrom(context, culture, value);
+        }
+
+        public override bool CanConvertTo(ITypeDescriptorContext? context, [NotNullWhen(true)] Type? destinationType)
+            => destinationType == typeof(string) || base.CanConvertTo(context, destinationType);
+
+        public override object? ConvertTo(ITypeDescriptorContext? context, CultureInfo? culture, object? value, Type destinationType)
+        {
+            if (destinationType == typeof(string) && value is MarkupString markup)
+            {
+                return markup.Value ?? "";
+            }
+
+            return base.ConvertTo(context, culture, value, destinationType);
+        }
+    }
 }

src/Components/Components/test/EventCallbackFactoryBinderExtensionsTest.cs

@@ -556,6 +556,25 @@ public async Task CreateBinder_Guid()
         Assert.Equal(1, component.Count);
     }
 
+    [Fact]
+    public async Task CreateBinder_MarkupString()
+    {
+        // Arrange
+        var value = new MarkupString();
+        var component = new EventCountingComponent();
+        Action<MarkupString> setter = (_) => value = _;
+
+        var binder = EventCallback.Factory.CreateBinder(component, setter, value);
+
+        var expectedValue = new MarkupString("<br/>");
+
+        // Act
+        await binder.InvokeAsync(new ChangeEventArgs() { Value = expectedValue.ToString(), });
+
+        Assert.Equal(expectedValue, value);
+        Assert.Equal(1, component.Count);
+    }
+
     // This uses a type converter
     [Fact]
     public async Task CreateBinder_NullableGuid()

src/Components/test/E2ETest/Tests/BindTest.cs

@@ -716,6 +716,23 @@ public void CanBindTextboxGenericGuid()
         Assert.Equal(newValue, mirrorValue.GetAttribute("value"));
     }
 
+    [Fact]
+    public void CanBindTextboxMarkupString()
+    {
+        var target = Browser.Exists(By.Id("textbox-markup"));
+        var boundValue = Browser.Exists(By.Id("textbox-markup-value"));
+        var mirrorValue = Browser.Exists(By.Id("textbox-markup-mirror"));
+        Assert.Equal("", target.GetAttribute("value"));
+        Assert.Equal("", boundValue.Text);
+        Assert.Equal("", mirrorValue.GetAttribute("value"));
+
+        // Modify target; verify value is updated and that textboxes linked to the same data are updated
+        var newValue = "hello";
+        target.SendKeys(newValue + "\t");
+        Browser.Equal(newValue, () => boundValue.Text);
+        Assert.Equal(newValue, mirrorValue.GetAttribute("value"));
+    }
+
     // For date comparisons, we parse (non-formatted) values to compare them. Client-side and server-side
     // Blazor have different formatting behaviour by default.
     [Fact]

src/Components/test/testassets/BasicTestApp/BindCasesComponent.razor

@@ -123,6 +123,12 @@
     <span id="textbox-generic-guid-value">@textboxGenericGuidValue</span>
     <input id="textbox-generic-guid-mirror" @bind="textboxGenericGuidValue" readonly />
 </p>
+<p>
+    Generic bind (markup):
+    <BindGenericComponent Id="textbox-markup" @bind-Value="textboxGenericMarkupValue" />
+    <span id="textbox-markup-value">@textboxGenericMarkupValue</span>
+    <input id="textbox-markup-mirror" @bind="textboxGenericMarkupValue" readonly />
+</p>
 
 <h2>Date Textboxes (type=text)</h2>
 <p>
@@ -500,6 +506,7 @@
 
     int textboxGenericIntValue = -42;
     Guid textboxGenericGuidValue = Guid.Empty;
+    MarkupString textboxGenericMarkupValue = new MarkupString();
 
     DateTime textboxDateTimeValue = new DateTime(1985, 3, 4);
     DateTime? textboxNullableDateTimeValue = null;