Tesserae

EditableArea

Description

EditableArea is an inline editing component for multi-line text. It displays formatted text until the user enters edit mode, then swaps to a textarea and supports save or cancel behavior.

Use it when short display text is not enough and the user may need to edit notes, descriptions, or other paragraph-style content in place.

Usage

Create an EditableArea(...), optionally style it with text-formatting helpers, and register OnSave(...) to validate or persist edits.

editable-area-sample.js

using System;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new EditableAreaExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class EditableAreaExample : IComponent
    {
        public HTMLElement Render()
        {
            var editable = EditableArea("Click to edit this paragraph");
            editable.Size = TextSize.Medium;
            editable.OnSave((sender, newValue) =>
                {
                    if (string.IsNullOrWhiteSpace(newValue))
                    {
                        Toast().Warning("Text cannot be empty.");
                        return false;
                    }

                    Toast().Success("Saved.");
                    return true;
                });

            return Stack().Children(editable).Render();
        }
    }
}

Methods

OnSave(SaveEditHandler onSave) registers a callback that can accept or reject the edited value.
SetText(string text) updates the displayed text or the textarea value, depending on edit mode.
AsObservable() returns an IObservable<string> for the current text.
Render() returns the wrapper element that contains the display and edit states.

Properties

Size controls the text size in both display and edit modes.
Weight controls the text weight.
TextAlign controls text alignment.
IsEditingMode gets or sets whether the textarea editing UI is active.

Referenced by

editable-label