Rich Text Editor
A two-variant editor built on TipTap. General for everyday form authoring; Enterprise for long-form and specialized content.
Overview
About
<RichTextEditor> is a two-variant WYSIWYG editor built on
TipTap.
The General variant is tuned for everyday form authoring — bold,
italic, lists, links, and images. The Enterprise variant adds
alignment, blockquote, horizontal rules, code blocks with syntax highlighting,
tables, find-and-replace, mentions, and slash commands.
See docs/UI_COMPONENTS.md for the full component reference.
Variants
General vs Enterprise (shared binding)
Both editors bind to the same field, so the content stays in sync.
Binding
Two-way binding with HTML / JSON / Markdown preview
Edit on the left; see the rendered outputs on the right.
<p>Hello <strong>world</strong>. Try <em>formatting</em> and switching tabs.</p>States
States and validation
Height
Min, min+max, and default grow
MinHeight sets the floor; MaxHeight caps growth and makes overflow scroll.
Images
Image upload (mock)
Drag, paste, or click the image button. Mock handler embeds as base64.
In production, wire OnImageUpload to an IFileUploadService
that persists the file and returns a stable URL. The editor inserts a placeholder
first and swaps the final URL in once the upload resolves — so failures
don't corrupt the document.
Forms
EditForm integration
Binds like any other field and participates in DataAnnotations validation.
Events
Lifecycle event log
Focus the editor, type, blur. The last 10 events appear on the right.
Event log
No events yet.
Guidance
Do / Don't
Do: sanitize on save
Always sanitize editor HTML server-side before persisting. The editor emits well-formed TipTap output, but a malicious client can POST anything to your save endpoint.
Use a library like HtmlSanitizer (C#) with an allow-list of
tags, attributes, and URL schemes that match your content model.
Don't: pick the wrong variant
Use General for forms, comments, descriptions, and other short-form authoring. It keeps the toolbar compact and the cognitive load low.
Use Enterprise for articles, knowledge base pages, and documents where structure (headings, code, tables, quotes) matters. Don't enable features you won't render downstream.
Mentions
Mentions (Enterprise)
Type @ to trigger the mention popup. Select a name with arrow keys + Enter, or click.
Slash commands
Slash commands (Enterprise)
Type / on a new line to open the command palette. Filter by typing, select with arrows + Enter.
Math
Math (opt-in)
Set MathEnabled="true" to enable: Sigma toolbar button,
$...$ / $$...$$ shortcuts, and slash commands
/math-inline / /math-block (when wired via
OnSlashQuery). Click any math node to edit in place.