Blazor InputLargeTextArea

src/Components/Web.JS/src/GlobalExports.ts

@@ -12,6 +12,7 @@ import { Platform, Pointer, System_String, System_Array, System_Object, System_B
 import { getNextChunk } from './StreamingInterop';
 import { RootComponentsFunctions, enableJSRootComponents, JSComponentInfoByInitializer, JSComponentInitializerCallback } from './Rendering/JSRootComponents';
 import { DotNet } from '@microsoft/dotnet-js-interop';
+import { InputLargeTextArea } from './InputLargeTextArea';
 
 interface IBlazor {
   navigateTo: (uri: string, options: NavigationOptions) => void;
@@ -31,6 +32,7 @@ interface IBlazor {
     PageTitle: typeof PageTitle,
     forceCloseConnection?: () => Promise<void>;
     InputFile?: typeof InputFile,
+    InputLargeTextArea?: typeof InputLargeTextArea,
     invokeJSFromDotNet?: (callInfo: Pointer, arg0: any, arg1: any, arg2: any) => any;
     endInvokeDotNetFromJS?: (callId: System_String, success: System_Boolean, resultJsonOrErrorMessage: System_String) => void;
     receiveByteArray?: (id: System_Int, data: System_Array<System_Byte>) => void;
@@ -75,6 +77,7 @@ export const Blazor: IBlazor = {
     Virtualize,
     PageTitle,
     InputFile,
+    InputLargeTextArea,
     getJSDataStreamChunk: getNextChunk,
     enableJSRootComponents,
   },

src/Components/Web.JS/src/InputLargeTextArea.ts

@@ -0,0 +1,19 @@
+export const InputLargeTextArea = {
+  init,
+  getText,
+  setText,
+};
+
+function init(callbackWrapper: any, elem: HTMLTextAreaElement): void {
+  elem.addEventListener('change', function(): void {
+    callbackWrapper.invokeMethodAsync('NotifyChange', elem.value.length);
+  });
+}
+
+function getText(elem: HTMLTextAreaElement): string {
+  return elem.value;
+}
+
+function setText(elem: HTMLTextAreaElement, newValue: string): void {
+  elem.value = newValue;
+}

src/Components/Web/src/Forms/InputLargeTextArea/IInputLargeTextAreaJsCallbacks.cs

@@ -0,0 +1,12 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.Threading.Tasks;
+
+namespace Microsoft.AspNetCore.Components.Forms
+{
+    internal interface IInputLargeTextAreaJsCallbacks
+    {
+        Task NotifyChange(int length);
+    }
+}

src/Components/Web/src/Forms/InputLargeTextArea/InputLargeTextArea.cs

@@ -0,0 +1,89 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.Diagnostics.CodeAnalysis;
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.JSInterop;
+
+namespace Microsoft.AspNetCore.Components.Forms
+{
+    /// <summary>
+    /// A multiline input component for editing large <see cref="string"/> values, supports async
+    /// content access without binding nor validations.
+    /// </summary>
+    public class InputLargeTextArea : ComponentBase, IInputLargeTextAreaJsCallbacks, IDisposable
+    {
+        private ElementReference _inputLargeTextAreaElement;
+
+        private InputLargeTextAreaJsCallbacksRelay? _jsCallbacksRelay;
+
+        [Inject]
+        private IJSRuntime JSRuntime { get; set; } = default!;
+
+        /// <summary>
+        /// Gets or sets the event callback that will be invoked when the textarea content changes.
+        /// </summary>
+        [Parameter]
+        public EventCallback<InputLargeTextAreaChangeEventArgs> OnChange { get; set; }
+
+        /// <summary>
+        /// Gets or sets a collection of additional attributes that will be applied to the input element.
+        /// </summary>
+        [Parameter(CaptureUnmatchedValues = true)]
+        public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+        /// <summary>
+        /// Gets or sets the associated <see cref="ElementReference"/>.
+        /// <para>
+        /// May be <see langword="null"/> if accessed before the component is rendered.
+        /// </para>
+        /// </summary>
+        [DisallowNull]
+        public ElementReference? Element
+        {
+            get => _inputLargeTextAreaElement;
+            protected set => _inputLargeTextAreaElement = value!.Value;
+        }
+
+        /// <inheritdoc/>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                _jsCallbacksRelay = new InputLargeTextAreaJsCallbacksRelay(this);
+                await JSRuntime.InvokeVoidAsync(InputLargeTextAreaInterop.Init, _jsCallbacksRelay.DotNetReference, _inputLargeTextAreaElement);
+            }
+        }
+
+        /// <inheritdoc/>
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            builder.OpenElement(0, "textarea");
+            builder.AddMultipleAttributes(1, AdditionalAttributes);
+            builder.AddElementReferenceCapture(2, elementReference => _inputLargeTextAreaElement = elementReference);
+            builder.CloseElement();
+        }
+
+        Task IInputLargeTextAreaJsCallbacks.NotifyChange(int length)
+            => OnChange.InvokeAsync(new InputLargeTextAreaChangeEventArgs(length));
+
+        /// <summary>
+        /// Retrieves the textarea value asyncronously.
+        /// </summary>
+        /// <returns>The string value of the textarea.</returns>
+        public ValueTask<string> GetTextAsync()
+            => JSRuntime.InvokeAsync<string>(InputLargeTextAreaInterop.GetText, _inputLargeTextAreaElement);
+
+        /// <summary>
+        /// Sets the textarea value asyncronously.
+        /// </summary>
+        /// <param name="newValue">The new content to set for the textarea.</param>
+        public ValueTask SetTextAsync(string newValue)
+            => JSRuntime.InvokeVoidAsync(InputLargeTextAreaInterop.SetText, _inputLargeTextAreaElement, newValue);
+
+        void IDisposable.Dispose()
+        {
+            _jsCallbacksRelay?.Dispose();
+        }
+    }
+}

src/Components/Web/src/Forms/InputLargeTextArea/InputLargeTextAreaChangeEventArgs.cs

@@ -0,0 +1,28 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System;
+using System.Collections.Generic;
+
+namespace Microsoft.AspNetCore.Components.Forms
+{
+    /// <summary>
+    /// Supplies information about an <see cref="InputLargeTextArea.OnChange"/> event being raised.
+    /// </summary>
+    public sealed class InputLargeTextAreaChangeEventArgs : EventArgs
+    {
+        /// <summary>
+        /// Constructs a new <see cref="InputLargeTextAreaChangeEventArgs"/> instance.
+        /// </summary>
+        /// <param name="length">The length of the textarea value.</param>
+        public InputLargeTextAreaChangeEventArgs(int length)
+        {
+            Length = length;
+        }
+
+        /// <summary>
+        /// Gets the length of the textarea value.
+        /// </summary>
+        public int Length { get; }
+    }
+}

src/Components/Web/src/Forms/InputLargeTextArea/InputLargeTextAreaInterop.cs

@@ -0,0 +1,16 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+namespace Microsoft.AspNetCore.Components.Forms
+{
+    internal static class InputLargeTextAreaInterop
+    {
+        private const string JsFunctionsPrefix = "Blazor._internal.InputLargeTextArea.";
+
+        public const string Init = JsFunctionsPrefix + "init";
+
+        public const string GetText = JsFunctionsPrefix + "getText";
+
+        public const string SetText = JsFunctionsPrefix + "setText";
+    }
+}

src/Components/Web/src/Forms/InputLargeTextArea/InputLargeTextAreaJsCallbacksRelay.cs

@@ -0,0 +1,34 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace Microsoft.AspNetCore.Components.Forms
+{
+    internal class InputLargeTextAreaJsCallbacksRelay : IDisposable
+    {
+        private readonly IInputLargeTextAreaJsCallbacks _callbacks;
+
+        public IDisposable DotNetReference { get; }
+
+        [DynamicDependency(nameof(NotifyChange))]
+        public InputLargeTextAreaJsCallbacksRelay(IInputLargeTextAreaJsCallbacks callbacks)
+        {
+            _callbacks = callbacks;
+
+            DotNetReference = DotNetObjectReference.Create(this);
+        }
+
+        [JSInvokable]
+        public Task NotifyChange(int length)
+            => _callbacks.NotifyChange(length);
+
+        public void Dispose()
+        {
+            DotNetReference.Dispose();
+        }
+    }
+}

src/Components/Web/src/PublicAPI.Unshipped.txt

@@ -12,6 +12,19 @@ Microsoft.AspNetCore.Components.Forms.InputDateType.Month = 2 -> Microsoft.AspNe
 Microsoft.AspNetCore.Components.Forms.InputDateType.Time = 3 -> Microsoft.AspNetCore.Components.Forms.InputDateType
 Microsoft.AspNetCore.Components.Forms.InputFile.Element.get -> Microsoft.AspNetCore.Components.ElementReference?
 Microsoft.AspNetCore.Components.Forms.InputFile.Element.set -> void
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.AdditionalAttributes.get -> System.Collections.Generic.IDictionary<string!, object!>?
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.AdditionalAttributes.set -> void
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.Element.get -> Microsoft.AspNetCore.Components.ElementReference?
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.Element.set -> void
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.GetTextAsync() -> System.Threading.Tasks.ValueTask<string!>
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.InputLargeTextArea() -> void
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.OnChange.get -> Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Forms.InputLargeTextAreaChangeEventArgs!>
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.OnChange.set -> void
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.SetTextAsync(string! newValue) -> System.Threading.Tasks.ValueTask
+Microsoft.AspNetCore.Components.Forms.InputLargeTextAreaChangeEventArgs
+Microsoft.AspNetCore.Components.Forms.InputLargeTextAreaChangeEventArgs.InputLargeTextAreaChangeEventArgs(int length) -> void
+Microsoft.AspNetCore.Components.Forms.InputLargeTextAreaChangeEventArgs.Length.get -> int
 Microsoft.AspNetCore.Components.Forms.InputNumber<TValue>.Element.get -> Microsoft.AspNetCore.Components.ElementReference?
 Microsoft.AspNetCore.Components.Forms.InputNumber<TValue>.Element.set -> void
 Microsoft.AspNetCore.Components.Forms.InputSelect<TValue>.Element.get -> Microsoft.AspNetCore.Components.ElementReference?
@@ -60,6 +73,8 @@ Microsoft.AspNetCore.Components.Web.PageTitle.ChildContent.set -> void
 Microsoft.AspNetCore.Components.Web.PageTitle.PageTitle() -> void
 override Microsoft.AspNetCore.Components.Forms.InputDate<TValue>.OnParametersSet() -> void
 abstract Microsoft.AspNetCore.Components.RenderTree.WebRenderer.AttachRootComponentToBrowser(int componentId, string! domElementSelector) -> void
+override Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder! builder) -> void
+override Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.OnAfterRenderAsync(bool firstRender) -> System.Threading.Tasks.Task!
 override Microsoft.AspNetCore.Components.Routing.FocusOnNavigate.OnAfterRenderAsync(bool firstRender) -> System.Threading.Tasks.Task!
 override Microsoft.AspNetCore.Components.Routing.FocusOnNavigate.OnParametersSet() -> void
 override Microsoft.AspNetCore.Components.Web.ErrorBoundary.BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder! builder) -> void