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/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,149 @@
+// 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 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(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 async ValueTask<StreamReader> GetTextAsync(int maxLength = 32_000, CancellationToken cancellationToken = default)
+        {
+            try
+            {
+                var streamRef = await JSRuntime.InvokeAsync<IJSStreamReference>(InputLargeTextAreaInterop.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)
+                {
+                    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">Don't disable the textarea while settings the new textarea value from the stream.</param>
+        /// <param name="cancellationToken">The <see cref="System.Threading.CancellationToken"/> used to relay cancellation of the request.</param>
+        public async ValueTask SetTextAsync(StreamWriter streamWriter, bool leaveTextAreaEnabled = false, CancellationToken cancellationToken = default)
+        {
+            if (streamWriter.Encoding is not UTF8Encoding)
+            {
+                throw new FormatException($"Expected {typeof(UTF8Encoding)}, got ${streamWriter.Encoding}");
+            }
+
+            try
+            {
+                if (!leaveTextAreaEnabled)
+                {
+                    await JSRuntime.InvokeVoidAsync(InputLargeTextAreaInterop.EnableTextArea, cancellationToken, _inputLargeTextAreaElement, /* disabled: */ true);
+                }
+
+                // 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)
+                {
+                    if (!stream.CanSeek)
+                    {
+                        throw new NotSupportedException("Unable to read from the beginning of the stream.");
+                    }
+                    stream.Seek(0, SeekOrigin.Begin);
+                }
+
+                using var streamRef = new DotNetStreamReference(stream);
+                await JSRuntime.InvokeVoidAsync(InputLargeTextAreaInterop.SetText, cancellationToken, _inputLargeTextAreaElement, streamRef);
+            }
+            finally
+            {
+                if (!leaveTextAreaEnabled)
+                {
+                    await JSRuntime.InvokeVoidAsync(InputLargeTextAreaInterop.EnableTextArea, cancellationToken, _inputLargeTextAreaElement, /* disabled: */ false);
+                }
+            }
+        }
+
+        void IDisposable.Dispose()
+        {
+            _jsCallbacksRelay?.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/Forms/InputLargeTextArea/InputLargeTextAreaInterop.cs

@@ -0,0 +1,18 @@
+// 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";
+
+        public const string EnableTextArea = JsFunctionsPrefix + "enableTextArea";
+    }
+}

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,20 @@ 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(int maxLength = 32000, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken)) -> System.Threading.Tasks.ValueTask<System.IO.StreamReader!>
+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(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 +74,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