Input form control

Rich text

<ut-rich-text>

A rich-text editor with bold, italic, underline, headings, lists, quotes and links, a character counter and strict sanitising of everything pasted in.

Officialv1.0.0 Self-contained
Download .utpkg 21 KBInstall in your workspace

Try it

Live preview

The real control in the same sandboxed frame the app uses. Switch to dark mode or read-only to see how it adapts.

Describe the problem

Value the form receives

{
  "html": "<h2>Leak under the sink</h2><p>Water pools after <strong>every</strong> wash. Started <em>last Tuesday</em>.</p><ul><li>Checked the trap</li><li>Seal looks <u>cracked</u></li></ul><p>Photos: <a href=\"https://example.com/photos\" rel=\"noopener noreferrer\" target=\"_blank\">shared album</a></p>",
  "text": "Leak under the sink\nWater pools after every wash. Started last Tuesday.\n• Checked the trap\n• Seal looks cracked\nPhotos: shared album"
}

Sandboxed frame (opaque origin, its own CSP), talking to this page only through the typed postMessage bridge — exactly as on a form.

About

What it does

A compact editor for the long answers that plain text boxes make hard to read: incident descriptions, change summaries, meeting notes, customer replies. People can use bold, italic and underline, two heading levels, bulleted and numbered lists, quotes and links, and paste from documents, email or web pages without dragging the source's styling along.

Everything that reaches the editor or the stored value is rebuilt from a short allowlist of tags (paragraphs, headings, lists, quotes, links, bold, italic, underline) with every attribute removed; links keep only https, http and mailto addresses and always open in a new tab. Scripts, images, frames, styles and event handlers never get through. The value stores the clean HTML together with a plain-text copy, so workflows, emails and search can use the text directly.

The toolbar is a proper ARIA toolbar with a single Tab stop and arrow-key navigation, every toggle announces whether it is on, and the usual shortcuts work (Ctrl/Cmd+B, I, U, K, Z). A counter shows the length against the limit and warns screen-reader users politely as they approach it.

Good for

  • Incident or fault description with steps and a link to evidence
  • Change request summary with headings and a numbered rollout plan
  • A formatted reply to a customer drafted on an approval step

After installing

  1. Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom.
  2. Drag Rich text onto a form, then set the placeholder, the maximum length, the toolbar (full or basic) and the minimum height in the properties panel.
  3. Anywhere you show the stored HTML outside UserTasks (an email template, another app), sanitise it again on that side; or use the plain-text copy (value.text).

Reference

Value, properties and accessibility

Value

{ html: string, text: string }

Stored as the field's value (type json), validated by the server against the control's schema; the control also reports its own validity while people type.

Read-only views (completed tasks, mobile, emails) show {{value.text}}.

Keyboard and screen readers

Role: textbox, named by the field label.

Tab to the formatting toolbar (Left / Right / Home / End move between buttons, Enter or Space applies one), Tab again to the text. In the text: Ctrl/Cmd+B, I, U for bold, italic, underline; Ctrl/Cmd+K adds a link (Enter applies, Escape cancels); Ctrl/Cmd+Z undoes, Ctrl/Cmd+Shift+Z redoes.

Properties (set in the form designer)
PropertyTypeDefaultWhat it does
Placeholder placeholderstring—Shown in the empty editor, e.g. Describe the problem.
Maximum characters max_lengthnumber 1–1000005000Counted on the plain text. A counter shows the length; longer text is refused.
Toolbar toolbarFull (headings, quote, clear formatting) / Basic (bold, italic, underline, lists, link)full
Minimum height (px) min_heightnumber 60–1200160

Install

Install it in your workspace

Works on UserTasks cloud and any self-hosted instance. The control lands in Extensibility → Form controls, enabled, and appears in the form designer's Custom palette.

In the app

  1. Open Extensibility → Form controls → Browse gallery (it opens Packages → Browse gallery on the Form controls tab) and choose Install on Rich text. Or download form-control-rich-text-1.0.0.utpkg and drag it onto Automations → Packages.
  2. The wizard verifies the checksum, every file hash and the signature, and shows what it adds.
  3. Drag the control onto a form in the designer and set its properties.

With the CLI

shell
curl -fLO https://usertasks.com/gallery/form-control-rich-text-1.0.0.utpkg
usertasks packages inspect form-control-rich-text-1.0.0.utpkg
usertasks packages install form-control-rich-text-1.0.0.utpkg

Verify the download

File SHA-256
f6664264629f17995013d9e5898495d456ec4dd2216efb4833a413808707731c
Package checksum (what is signed)
sha256:4faffeaef0ed477a6735a2abfc74bd81675117ec56251d3303d2ce2a98283c4b
<ut-rich-text> module SHA-256
18118557b71bb3bffa79b85bedcef2d0d1e95cf9be0810b8cae30d93e43f2cdf
Signer
UserTasks Gallery · 49:f3:04:90:47:02:4d:07:28:61:3d:dc:bb:aa:db:11

More form controls

All controls