Rich Text
CommentPreview
Read-only renderer for HTML/Markdown content with suit symbol coloring.
CommentPreview renders raw HTML or Markdown strings as read-only rich text with suit symbol coloring. Unlike RichTextDisplay which accepts domain RichText values, this component accepts raw string content and uses Plate's markdown deserializer internally.
import { CommentPreview } from '@workspace/rich-text/components/comment-preview';Usage
<CommentPreview content="Play the **ace** of \S" />
// With petit-bridge mode:
<CommentPreview content={htmlFromServer} mode="petit-bridge" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | required | HTML or Markdown content to render |
mode | EditorMode | 'default' | Suit display mode |
className | string | — | Additional CSS class |
Behavior
- Returns
nullwhencontentis empty or whitespace-only - Content is reactive -- re-renders when
contentchanges - Uses Plate's markdown plugin to deserialize, so supports
**bold**,*italic*, lists, and suit shortcodes - Renders in read-only mode with
commentvariant styling
When to Use
| Scenario | Component |
|---|---|
Display domain RichText values (from editor/database) | RichTextDisplay |
| Display raw HTML/Markdown strings (from API, user input) | CommentPreview |