Rich Text
RichCommentField
Pre-composed rich editor with label, description, and built-in toolbar.
RichCommentField is a convenience component that wraps RichEditor with a label, optional description, and a pre-configured toolbar (bold, italic, lists, suit symbols). Use it for comment-style inputs where you don't need a custom toolbar layout.
import { RichCommentField, useRichEditorRef } from '@workspace/rich-text/components/rich-comment-field';
import type { RichEditorHandle } from '@workspace/rich-text/types';Usage
const ref = useRichEditorRef();
<RichCommentField
labels={{ label: 'Comment', description: 'Optional helper text', placeholder: 'Write...' }}
defaultValue={richText}
ref={ref}
/>Reading content
const value = ref.current.getValue();Props
| Prop | Type | Default | Description |
|---|---|---|---|
labels | RichCommentFieldLabels | required | Label, description, and placeholder text |
defaultValue | RichText | [] | Initial content (only read on mount) |
mode | EditorMode | 'default' | Suit display mode |
lists | boolean | true | Enable list buttons in the toolbar |
className | string | — | Additional CSS class on the wrapper |
ref | Ref<RichEditorHandle> | — | Imperative handle (same as RichEditor) |
RichCommentFieldLabels
type RichCommentFieldLabels = {
label: string;
description?: string;
placeholder?: string;
};Built-in Toolbar
The toolbar includes (in order): Bold, Italic, Ordered List, Bulleted List (when lists is enabled), and all four suit symbol buttons.