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, receiveDotNetDataStream } from './StreamingInterop';
 import { RootComponentsFunctions } from './Rendering/JSRootComponents';
 import { attachWebRendererInterop } from './Rendering/WebRendererInteropMethods';
+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;
@@ -76,6 +78,7 @@ export const Blazor: IBlazor = {
     Virtualize,
     PageTitle,
     InputFile,
+    InputLargeTextArea,
     getJSDataStreamChunk: getNextChunk,
     receiveDotNetDataStream: receiveDotNetDataStream,
     attachWebRendererInterop,

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

@@ -0,0 +1,32 @@
+import { DotNet } from '@microsoft/dotnet-js-interop';
+
+export const InputLargeTextArea = {
+  init,
+  getText,
+  setText,
+  enableTextArea,
+};
+
+function init(callbackWrapper: any, elem: HTMLTextAreaElement): void {
+  elem.addEventListener('change', function(): void {
+    callbackWrapper.invokeMethodAsync('NotifyChange', elem.value.length);
+  });
+}
+
+function getText(elem: HTMLTextAreaElement): Uint8Array {
+  const textValue = elem.value;
+  const utf8Encoder = new TextEncoder();
+  const encodedTextValue = utf8Encoder.encode(textValue);
+  return encodedTextValue;
+}
+
+async function setText(elem: HTMLTextAreaElement, streamRef: DotNet.IDotNetStreamReference): Promise<void> {
+  const bytes = await streamRef.arrayBuffer();
+  const utf8Decoder = new TextDecoder();
+  const newTextValue = utf8Decoder.decode(bytes);
+  elem.value = newTextValue;
+}
+
+function enableTextArea(elem: HTMLTextAreaElement, disabled: boolean): void {
+  elem.disabled = disabled;
+}

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

@@ -0,0 +1,153 @@
+// 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 System.IO;
+using System.Text;
+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 and without validations.
+    /// </summary>
+    public class InputLargeTextArea : ComponentBase, IDisposable
+    {
+        private const string JsFunctionsPrefix = "Blazor._internal.InputLargeTextArea.";
+        private ElementReference _inputLargeTextAreaElement;
+        private IDisposable? _dotNetReference;
+
+        [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)
+            {
+                _dotNetReference = DotNetObjectReference.Create(this);
+                await JSRuntime.InvokeVoidAsync(JsFunctionsPrefix + "init", _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();
+        }
+
+        /// <summary>
+        /// Invoked from the client when the textarea's onchange event occurs.
+        /// </summary>
+        /// <param name="length">The updated length of the textarea.</param>
+        [JSInvokable]
+        public Task NotifyChange(int length)
+            => OnChange.InvokeAsync(new InputLargeTextAreaChangeEventArgs(this, length));
+
+        /// <summary>
+        /// Retrieves the textarea value asyncronously.
+        /// </summary>
+        /// <param name="maxLength">The maximum length of content to fetch from the textarea.</param>
+        /// <param name="cancellationToken">The <see cref="System.Threading.CancellationToken"/> used to relay cancellation of the request.</param>
+        /// <returns>A <see cref="System.IO.TextReader"/> which facilitates reading of the textarea value.</returns>
+        public virtual async ValueTask<StreamReader> GetTextAsync(int maxLength = 32_000, CancellationToken cancellationToken = default)
+        {
+            try
+            {
+                var streamRef = await JSRuntime.InvokeAsync<IJSStreamReference>(JsFunctionsPrefix + "getText", cancellationToken, _inputLargeTextAreaElement);
+                var stream = await streamRef.OpenReadStreamAsync(maxLength, cancellationToken);
+                var streamReader = new StreamReader(stream);
+                return streamReader;
+            }
+            catch (JSException jsException)
+            {
+                // Special casing support for empty textareas. Due to security considerations
+                // 0 length streams/textareas aren't permitted from JS->.NET Streaming Interop.
+                if (jsException.InnerException is ArgumentOutOfRangeException outOfRangeException &&
+                    outOfRangeException.ActualValue is not null &&
+                    outOfRangeException.ActualValue is int actualLength &&
+                    actualLength == 0)
+                {
+                    return StreamReader.Null;
+                }
+
+                throw;
+            }
+        }
+
+        /// <summary>
+        /// Sets the textarea value asyncronously.
+        /// </summary>
+        /// <param name="streamWriter">A <see cref="System.IO.StreamWriter"/> used to set the value of the textarea.</param>
+        /// <param name="leaveTextAreaEnabled"><see langword="false" /> to disable the textarea while setting new content from the stream, otherwise <see langword="true" /> to allow it to be editable. Defaults to <see langword="false" />.</param>
+        /// <param name="cancellationToken">The <see cref="System.Threading.CancellationToken"/> used to relay cancellation of the request.</param>
+        public virtual async ValueTask SetTextAsync(StreamWriter streamWriter, bool leaveTextAreaEnabled = false, CancellationToken cancellationToken = default)
+        {
+            if (streamWriter.Encoding.CodePage != Encoding.UTF8.CodePage)
+            {
+                throw new FormatException($"The encoding '{streamWriter.Encoding}' is not supported. SetTextAsync only allows UTF-8 encoded data.");
+            }
+
+            // Ensure we're reading from the beginning of the stream,
+            // the StreamWriter.BaseStream.Position will be at the end by default
+            var stream = streamWriter.BaseStream;
+            if (stream.Position != 0)
+            {
+                stream.Position = 0;
+            }
+
+            try
+            {
+                if (!leaveTextAreaEnabled)
+                {
+                    await JSRuntime.InvokeVoidAsync(JsFunctionsPrefix + "enableTextArea", cancellationToken, _inputLargeTextAreaElement, /* disabled: */ true);
+                }
+
+                using var streamRef = new DotNetStreamReference(stream);
+                await JSRuntime.InvokeVoidAsync(JsFunctionsPrefix + "setText", cancellationToken, _inputLargeTextAreaElement, streamRef);
+            }
+            finally
+            {
+                if (!leaveTextAreaEnabled)
+                {
+                    await JSRuntime.InvokeVoidAsync(JsFunctionsPrefix + "enableTextArea", cancellationToken, _inputLargeTextAreaElement, /* disabled: */ false);
+                }
+            }
+        }
+
+        void IDisposable.Dispose()
+        {
+            _dotNetReference?.Dispose();
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+// 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="Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.OnChange"/> event being raised.
+    /// </summary>
+    public sealed class InputLargeTextAreaChangeEventArgs : EventArgs
+    {
+        /// <summary>
+        /// Constructs a new <see cref="InputLargeTextAreaChangeEventArgs"/> instance.
+        /// </summary>
+        /// <param name="sender">The textarea element for which the event was raised.</param>
+        /// <param name="length">The length of the textarea value.</param>
+        public InputLargeTextAreaChangeEventArgs(InputLargeTextArea sender, int length)
+        {
+            Sender = sender;
+            Length = length;
+        }
+
+        /// <summary>
+        /// The textarea element for which the event was raised.
+        /// </summary>
+        public InputLargeTextArea Sender { get; }
+
+        /// <summary>
+        /// Gets the length of the textarea value.
+        /// </summary>
+        public int Length { get; }
+    }
+}

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

@@ -12,6 +12,21 @@ 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
+virtual Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.GetTextAsync(int maxLength = 32000, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken)) -> System.Threading.Tasks.ValueTask<System.IO.StreamReader!>
+Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.NotifyChange(int length) -> System.Threading.Tasks.Task!
+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
+virtual Microsoft.AspNetCore.Components.Forms.InputLargeTextArea.SetTextAsync(System.IO.StreamWriter! streamWriter, bool leaveTextAreaEnabled = false, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken)) -> System.Threading.Tasks.ValueTask
+Microsoft.AspNetCore.Components.Forms.InputLargeTextAreaChangeEventArgs
+Microsoft.AspNetCore.Components.Forms.InputLargeTextAreaChangeEventArgs.InputLargeTextAreaChangeEventArgs(Microsoft.AspNetCore.Components.Forms.InputLargeTextArea! sender, int length) -> void
+Microsoft.AspNetCore.Components.Forms.InputLargeTextAreaChangeEventArgs.Length.get -> int
+Microsoft.AspNetCore.Components.Forms.InputLargeTextAreaChangeEventArgs.Sender.get -> Microsoft.AspNetCore.Components.Forms.InputLargeTextArea!
 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 +75,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.RenderTree.WebRenderer.Dispose(bool disposing) -> void
 override Microsoft.AspNetCore.Components.Routing.FocusOnNavigate.OnAfterRenderAsync(bool firstRender) -> System.Threading.Tasks.Task!
 override Microsoft.AspNetCore.Components.Routing.FocusOnNavigate.OnParametersSet() -> void