Rich Text Field

The Rich Text Field component edits formatted text content with markdown or HTML support — a plain-textarea editor today, with the stored markup rendered formatted on every read surface.

Basic Usage

HTML Editor

Field Schema

markdown and html are two field types served by one widget, and each has its own exported metadata type — MarkdownFieldMetadata and HtmlFieldMetadata (@object-ui/types). Both extend BaseFieldMetadata and add a length bound and an inline-editor height; there is no combined "rich text" metadata type.

import type { HtmlFieldMetadata, MarkdownFieldMetadata } from '@object-ui/types';

const releaseNotes: MarkdownFieldMetadata = {
  type: 'markdown',
  name: 'release_notes',
  label: 'Release Notes',
  placeholder: 'Write the notes…',
  max_length: 20000,
  // Inline editor height in text rows (positive integer; default 8). The
  // fullscreen dialog sizes itself and ignores it.
  rows: 12,
};

const emailBody: HtmlFieldMetadata = {
  type: 'html',
  name: 'email_body',
  label: 'Email Body',
  max_length: 50000,
};

rows sizes the inline editor, in text rows — declared on both types (and on @objectstack/spec's FieldSchema for the multiline editor types), matching the textarea field's key of the same name (objectui#6140). The editor is a plain textarea today — there is no formatting toolbar, no preview pane and no pixel height to configure, so neither metadata type declares one: toolbar, preview, minHeight and maxHeight are not metadata keys, and writing them does nothing.

The value being edited, and the className / disabled a host supplies, are not metadata keys — they are runtime widget props. See Field Widget Props.

Supported Formats

Markdown

• Headings: # H1, ## H2, ### H3
• Bold/Italic: **bold**, *italic*
• Lists: Ordered and unordered
• Links: [text](url)
• Images: ![alt](url)
• Code: Inline and blocks
• Tables: Markdown tables

HTML

• Full HTML editing support
• Sanitization for security
• Style preservation
• Embedded media support

Cell Renderer

In tables/grids, rich text is shown as plain text:

import { TextCellRenderer } from '@object-ui/fields';

// Strips formatting, shows plain text only
// Long content is truncated

Use Cases

• Blog Posts: Article content, blog posts
• Documentation: Technical documentation
• Descriptions: Product or feature descriptions
• Comments: Rich formatted comments
• Emails: Email templates, rich email content
• Pages: CMS page content

Features

• Markdown Support: For lightweight formatting
• HTML Support: For advanced formatting
• Formatted read surfaces: Grids, detail pages and the readonly form branch render the stored markup formatted (sanitized for HTML)
• Fullscreen editing: An expand affordance when the form opts in (mobile.fullscreenLongText)

The editing surface itself is a plain textarea with a format indicator — a formatting toolbar, an edit-time preview pane and WYSIWYG editing are not yet implemented (whatever the editor grows into, both the inline and fullscreen surfaces gain it at once, since they share one editor component).

Editor Modes

The rich text field can operate in different modes:

1. Markdown Mode (type: 'markdown')

   • Lightweight markup
   • Easy to write and read
   • Great for documentation

2. HTML Mode (type: 'html')

   • Full HTML editing
   • Advanced formatting
   • Embedded content support