Tesserae - Annotated Text Editor

AnnotatedTextEditor

Description

Annotated text editor

AnnotatedTextEditor is a multi-line editable text field that highlights NLP entities in place, like the OmniBox token rendering. A debounced async lambda (default 500ms) is called after the user stops typing and returns the entities found in the text.

Try editing the text below — entities are re-detected after you pause typing.

API reference

class

AnnotatedTextEditor

public class AnnotatedTextEditor : IComponent, IHasBackgroundColor, ITabIndex

A multi-line text editor that supports inline annotations / highlights over user-entered prose.

Constructors

Constructor

AnnotatedTextEditor

public AnnotatedTextEditor(Func<string, Task<Entity[]>> annotator, string initialText = null, int debounceMs = 500, string placeholder = null)

Initializes a new instance of this class.

Properties

Property

AnnotatedTextEditor.Text

public string Text { get ; set ; }

Gets or sets the text shown in the component.

Property

AnnotatedTextEditor.Entities

public Entity[] Entities

Gets or sets the entities.

Property

AnnotatedTextEditor.Placeholder

public string Placeholder { get ; set ; }

Gets or sets the placeholder text shown when the component is empty.

Property

AnnotatedTextEditor.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Property

AnnotatedTextEditor.TabIndex

public int TabIndex { set ; }

Sets the keyboard tab order of the component.

Property

AnnotatedTextEditor.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets a value indicating whether the component is interactive (enabled).

Property

AnnotatedTextEditor.IsReadOnly

public bool IsReadOnly { get ; set ; }

Returns a value indicating whether the component is read only.

Methods

Method

AnnotatedTextEditor.SetText

public AnnotatedTextEditor SetText(string text)

Sets the text of the component.

Method

AnnotatedTextEditor.SetPlaceholder

public AnnotatedTextEditor SetPlaceholder(string placeholder)

Sets the placeholder of the component.

Method

AnnotatedTextEditor.Disabled

public AnnotatedTextEditor Disabled(bool value = true)

Disables the component.

Method

AnnotatedTextEditor.ReadOnly

public AnnotatedTextEditor ReadOnly(bool value = true)

Configures the read only on the component.

Method

AnnotatedTextEditor.OnTextChanged

public AnnotatedTextEditor OnTextChanged(TextChangedHandler handler)

Registers a callback invoked when the text changed event fires.

Method

AnnotatedTextEditor.OnAnnotationsChanged

public AnnotatedTextEditor OnAnnotationsChanged(AnnotationsChangedHandler handler)

Registers a callback invoked when the annotations changed event fires.

Method

AnnotatedTextEditor.OnEntityClick

public AnnotatedTextEditor OnEntityClick(EntityClickHandler handler)

Registers a callback invoked when the entity click event fires.

Method

AnnotatedTextEditor.Height

public AnnotatedTextEditor Height(UnitSize unitSize)

Gets or sets the CSS height of the component.

Method

AnnotatedTextEditor.H

public AnnotatedTextEditor H(int px)

Shortcut for setting the height in pixels.

Method

AnnotatedTextEditor.MinHeight

public AnnotatedTextEditor MinHeight(UnitSize unitSize)

Gets or sets the CSS min-height of the component.

Method

AnnotatedTextEditor.Focus

public AnnotatedTextEditor Focus()

Moves keyboard focus to the component.

Method

AnnotatedTextEditor.Render

public HTMLElement Render()

Renders the component's root HTML element.

Method

AnnotatedTextEditor.TriggerAnnotate

public void TriggerAnnotate()

Configures the trigger annotate on the component.

Events

Event

AnnotatedTextEditor.AnnotationsChanged

public event AnnotationsChangedHandler AnnotationsChanged

Raised when annotations changed occurs.

Event

AnnotatedTextEditor.TextChanged

public event TextChangedHandler TextChanged

Raised when text changed occurs.

Event

AnnotatedTextEditor.EntityClicked

public event EntityClickHandler EntityClicked

Raised when entity clicked occurs.

Samples

Multi-line, editable, with entity highlighting

annotated-text-editor-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        // (canonical-form, label, background, color, border)
        private static readonly (string Phrase, string Label, string Background, string Color, string Border)[] _vocabulary = new[]
        {
            ("Curiosity GmbH",     "ORG",     "var(--tss-colors-purple-100)", "var(--tss-colors-purple-900)", "var(--tss-colors-purple-500)"),
            ("Curiosity",          "ORG",     "var(--tss-colors-purple-100)", "var(--tss-colors-purple-900)", "var(--tss-colors-purple-500)"),
            ("Anthropic",          "ORG",     "var(--tss-colors-purple-100)", "var(--tss-colors-purple-900)", "var(--tss-colors-purple-500)"),
            ("OpenAI",             "ORG",     "var(--tss-colors-purple-100)", "var(--tss-colors-purple-900)", "var(--tss-colors-purple-500)"),
            ("Microsoft",          "ORG",     "var(--tss-colors-purple-100)", "var(--tss-colors-purple-900)", "var(--tss-colors-purple-500)"),
            ("Tesserae",           "PRODUCT", "var(--tss-colors-blue-100)",   "var(--tss-colors-blue-900)",   "var(--tss-colors-blue-500)"),
            ("Claude",             "PRODUCT", "var(--tss-colors-blue-100)",   "var(--tss-colors-blue-900)",   "var(--tss-colors-blue-500)"),
            ("GPT-4",              "PRODUCT", "var(--tss-colors-blue-100)",   "var(--tss-colors-blue-900)",   "var(--tss-colors-blue-500)"),
            ("Berlin",             "GPE",     "var(--tss-colors-green-100)",  "var(--tss-colors-green-900)",  "var(--tss-colors-green-500)"),
            ("San Francisco",      "GPE",     "var(--tss-colors-green-100)",  "var(--tss-colors-green-900)",  "var(--tss-colors-green-500)"),
            ("Germany",            "GPE",     "var(--tss-colors-green-100)",  "var(--tss-colors-green-900)",  "var(--tss-colors-green-500)"),
            ("Europe",             "GPE",     "var(--tss-colors-green-100)",  "var(--tss-colors-green-900)",  "var(--tss-colors-green-500)"),
            ("Alice",              "PERSON",  "var(--tss-colors-orange-100)", "var(--tss-colors-orange-900)", "var(--tss-colors-orange-500)"),
            ("Bob",                "PERSON",  "var(--tss-colors-orange-100)", "var(--tss-colors-orange-900)", "var(--tss-colors-orange-500)"),
            ("Jules",              "PERSON",  "var(--tss-colors-orange-100)", "var(--tss-colors-orange-900)", "var(--tss-colors-orange-500)"),
            ("2024",               "DATE",    "var(--tss-colors-magenta-100)",   "var(--tss-colors-magenta-900)",   "var(--tss-colors-magenta-500)"),
            ("2025",               "DATE",    "var(--tss-colors-magenta-100)",   "var(--tss-colors-magenta-900)",   "var(--tss-colors-magenta-500)"),
            ("2026",               "DATE",    "var(--tss-colors-magenta-100)",   "var(--tss-colors-magenta-900)",   "var(--tss-colors-magenta-500)"),
            ("January",            "DATE",    "var(--tss-colors-magenta-100)",   "var(--tss-colors-magenta-900)",   "var(--tss-colors-magenta-500)"),
            ("$1.5 billion",       "MONEY",   "var(--tss-colors-yellow-100)", "var(--tss-colors-yellow-900)", "var(--tss-colors-yellow-500)"),
            ("$200",               "MONEY",   "var(--tss-colors-yellow-100)", "var(--tss-colors-yellow-900)", "var(--tss-colors-yellow-500)")
        };

        private const string SampleText =
@"Curiosity GmbH, based in Berlin, Germany, is the company behind Tesserae.
In January 2026, Alice and Bob met in San Francisco to discuss a $1.5 billion partnership between Anthropic and OpenAI.
Claude and GPT-4 are large language models. Jules built a demo using Tesserae for Microsoft in 2025.";

        private static void Main()
        {
            var entityCountLabel = TextBlock("0 entities").Small().Foreground(Theme.Secondary.Foreground);

            var editor = AnnotatedTextEditor(
                annotator:   AnnotateAsync,
                initialText: SampleText,
                debounceMs:  500,
                placeholder: "Type some text and entities will be highlighted automatically...")
                .MinHeight(160.px())
                .OnAnnotationsChanged((s, entities) =>
                {
                    entityCountLabel.Text = entities.Length == 1 ? "1 entity" : $"{entities.Length} entities";
                })
                .OnEntityClick((s, entity, e) =>
                {
                    Toast().Information($"Clicked entity: \"{s.Text.Substring(entity.Start, entity.Length)}\" ({entity.Label})");
                });

            var component = VStack().WS().Children(
                entityCountLabel.MB(8),
                editor.WS()
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }

        private static async Task<AnnotatedTextEditor.Entity[]> AnnotateAsync(string text)
        {
            await Task.Delay(150);

            if (string.IsNullOrEmpty(text)) return new AnnotatedTextEditor.Entity[0];

            var found = new List<AnnotatedTextEditor.Entity>();

            foreach (var v in _vocabulary.OrderByDescending(v => v.Phrase.Length))
            {
                int idx = 0;
                while (idx < text.Length)
                {
                    int found_idx = text.IndexOf(v.Phrase, idx, StringComparison.OrdinalIgnoreCase);
                    if (found_idx < 0) break;

                    int end = found_idx + v.Phrase.Length;
                    bool overlaps = found.Any(e => found_idx < e.End && end > e.Start);
                    if (!overlaps)
                    {
                        found.Add(new AnnotatedTextEditor.Entity(found_idx, v.Phrase.Length, v.Label, v.Background, v.Color, v.Border));
                    }
                    idx = end;
                }
            }

            return found.OrderBy(e => e.Start).ToArray();
        }
    }
}

Read-only with clickable entities

Text cannot be edited, but entities still react to clicks.

annotated-text-editor-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static readonly (string Phrase, string Label, string Background, string Color, string Border)[] _vocabulary = new[]
        {
            ("Curiosity GmbH",     "ORG",     "var(--tss-colors-purple-100)", "var(--tss-colors-purple-900)", "var(--tss-colors-purple-500)"),
            ("Tesserae",           "PRODUCT", "var(--tss-colors-blue-100)",   "var(--tss-colors-blue-900)",   "var(--tss-colors-blue-500)"),
            ("Berlin",             "GPE",     "var(--tss-colors-green-100)",  "var(--tss-colors-green-900)",  "var(--tss-colors-green-500)"),
            ("Alice",              "PERSON",  "var(--tss-colors-orange-100)", "var(--tss-colors-orange-900)", "var(--tss-colors-orange-500)"),
            ("Bob",                "PERSON",  "var(--tss-colors-orange-100)", "var(--tss-colors-orange-900)", "var(--tss-colors-orange-500)"),
            ("2025",               "DATE",    "var(--tss-colors-magenta-100)", "var(--tss-colors-magenta-900)", "var(--tss-colors-magenta-500)")
        };

        private static void Main()
        {
            var readOnlyEditor = AnnotatedTextEditor(
                annotator:   AnnotateAsync,
                initialText: "In 2025, Alice and Bob visited Berlin to demo Tesserae for Curiosity GmbH.",
                debounceMs:  500)
                .MinHeight(60.px())
                .ReadOnly()
                .OnEntityClick((s, entity, e) =>
                {
                    Toast().Success($"{entity.Label}: {s.Text.Substring(entity.Start, entity.Length)}");
                });

            document.body.style.overflow = "hidden";
            MountCenteredToBody(readOnlyEditor);
        }

        private static async Task<AnnotatedTextEditor.Entity[]> AnnotateAsync(string text)
        {
            await Task.Delay(150);

            if (string.IsNullOrEmpty(text)) return new AnnotatedTextEditor.Entity[0];

            var found = new List<AnnotatedTextEditor.Entity>();

            foreach (var v in _vocabulary.OrderByDescending(v => v.Phrase.Length))
            {
                int idx = 0;
                while (idx < text.Length)
                {
                    int found_idx = text.IndexOf(v.Phrase, idx, StringComparison.OrdinalIgnoreCase);
                    if (found_idx < 0) break;

                    int end = found_idx + v.Phrase.Length;
                    bool overlaps = found.Any(e => found_idx < e.End && end > e.Start);
                    if (!overlaps)
                    {
                        found.Add(new AnnotatedTextEditor.Entity(found_idx, v.Phrase.Length, v.Label, v.Background, v.Color, v.Border));
                    }
                    idx = end;
                }
            }

            return found.OrderBy(e => e.Start).ToArray();
        }
    }
}

Referenced by

MarkdownBlock

AnnotatedTextEditor

Description

API reference

Constructors

AnnotatedTextEditor

Properties

AnnotatedTextEditor.Text

AnnotatedTextEditor.Entities

AnnotatedTextEditor.Placeholder

AnnotatedTextEditor.Background

AnnotatedTextEditor.TabIndex

AnnotatedTextEditor.IsEnabled

AnnotatedTextEditor.IsReadOnly

Methods

AnnotatedTextEditor.SetText

AnnotatedTextEditor.SetPlaceholder

AnnotatedTextEditor.Disabled

AnnotatedTextEditor.ReadOnly

AnnotatedTextEditor.OnTextChanged

AnnotatedTextEditor.OnAnnotationsChanged

AnnotatedTextEditor.OnEntityClick

AnnotatedTextEditor.Height

AnnotatedTextEditor.H

AnnotatedTextEditor.MinHeight

AnnotatedTextEditor.Focus

AnnotatedTextEditor.Render

AnnotatedTextEditor.TriggerAnnotate

Events

AnnotatedTextEditor.AnnotationsChanged

AnnotatedTextEditor.TextChanged

AnnotatedTextEditor.EntityClicked

Samples

Multi-line, editable, with entity highlighting

Read-only with clickable entities

See also

Referenced by