Rich story editor

Author structured editorial body content while keeping formatting separate from metadata and publication.

On this page

Purpose and placement

Author structured editorial body content while keeping formatting separate from metadata and publication.

Anatomy

Anatomy
Part	Behavior
Editable surface	Lexical editor labeled Story body.
Toolbar	Formatting and insertion controls.
Hidden form value	Serializes the body for the containing editor form.

Configuration and contract

Configuration and contract
Input or decision	Implementation
StoryBodyEditor	name, initialHtml and optional placeholder.
Node model	Heading, quote, lists, links and custom image content.
Errors	Source onError throws; recovery and boundaries must be reviewed by the host.

States and feedback

Loaded structured body in both themes.
Active formatting, inserted media and embeds are source-defined features awaiting behavioral coverage.

Usage rules

Use real headings and lists rather than visual approximations.
Keep source, disclosure and correction information in their appropriate editor fields.
Validate content serialization and sanitization before rendering user-authored HTML publicly.

Accessibility and verification

Check toolbar names, keyboard operation, editable labeling, selection behavior and image alternatives. Static crops show appearance, not complete assistive-technology support.

Source references

Source references
File	Responsibility
components/admin/story-body-editor.tsx	Audited Townwell implementation; use this file when extending this interface.
components/editor-toolbar-button.tsx	Audited Townwell implementation; use this file when extending this interface.
components/admin/story-editor-form.tsx	Audited Townwell implementation; use this file when extending this interface.

Examples from the app

Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.