# Editable Label

EditableLabel is a UI component that displays text which can be clicked to switch into an inline editing mode. In this mode, users can modify the text content interactively. It is ideal for scenarios where information should appear as static text by default but offer an editing interface upon interaction. EditableLabel is part of the Components group and combines display and input behaviors, providing a seamless inline editing experience.

Instantiate an EditableLabel using the Tesserae.UI static helper. You can optionally provide the initial text value. When the label is clicked, it transforms into an input element allowing the user to edit the text. A save callback can be registered with the OnSave method to handle saving the new content.

Below is a sample usage:

using System;
using Tesserae;
using static Tesserae.UI;

public class EditableLabelExample
{
    public static void Main()
    {
        // Create an EditableLabel with initial text.
        var editableLabel = EditableLabel("Click to edit me")
            .OnSave((sender, newValue) =>
            {
                // Here you can add validation or other processing.
                Console.WriteLine("New value: " + newValue);
                // Return true to accept the change; return false to reject.
                return true;
            });

        // Render the component.
        Document.body.appendChild(editableLabel.Render());
    }
}

• OnSave(SaveEditHandler onSave)
  • Registers a callback that is invoked when the user attempts to save an edit.
  • Parameters:
    • onSave: A delegate of type SaveEditHandler (signature: bool(EditableLabel sender, string newValue)). Return true if the new value is accepted, or false to keep the component in editing mode.
• SetText(string text)
  • Updates the text displayed by the label. If the component is in editing mode, it updates the input field instead.
  • Parameters:
    • text: The new text value.
• AsObservable()
  • Returns an observable that notifies subscribers when the text changes.
  • Returns:
    • IObservable representing the text changes.

• Size
  • Type: TextSize
  • Gets or sets the text size for both the label and the input element. The size is applied by modifying the CSS classes.
• Weight
  • Type: TextWeight
  • Gets or sets the font weight for the displayed text. Adjusts CSS classes to change the weight.
• TextAlign
  • Type: TextAlign
  • Gets or sets the text alignment. Updates the class list of the input element.
• IsEditingMode
  • Type: bool
  • Gets or sets the editing mode status. When true, the component displays the input element; when false, it shows the label view.

The following sample demonstrates how to create an EditableLabel, configure its appearance, and register an OnSave callback to process user inputs.

using System;
using Tesserae;
using static Tesserae.UI;

public class EditableLabelExample
{
    public static void Main()
    {
        // Create an EditableLabel with initial text.
        var editableLabel = EditableLabel("Editable label text")
            .Size(TextSize.Large)
            .Weight(TextWeight.Bold)
            .OnSave((sender, newValue) =>
            {
                // Validate new value; for example, ensure it's not empty.
                if (string.IsNullOrWhiteSpace(newValue))
                {
                    Console.WriteLine("Value cannot be empty.");
                    return false; // Reject the change.
                }
                Console.WriteLine("New text saved: " + newValue);
                return true; // Accept the change.
            });

        // Render and attach the component to the document.
        Document.body.appendChild(editableLabel.Render());
    }
}

• TextBlock – For display-only text components.
• EditableArea – A related component for multi-line text editing.
• TextBox – Underlying input component used by EditableLabel.