Design System

A showcase of the design system components and patterns

Overview AI Guide Typography Components Layouts Patterns Colors & Animations Advanced Additional App Shell Scheduling Rich Text Editor

Rich Text Editor

Rich Text Editor Component

Rich Text Editor

A rich text editor for creating and editing formatted content

Usage:

<RichTextEditor
  initialContent="<p>Hello World!</p>"
  onChange={handleContentChange}
  placeholder="Start writing..."
  showToolbar
  showBubbleMenu
  height="300px"
/>

<DocumentPreview
  content={htmlContent}
  title="Project Report"
  description="Quarterly project status report"
  author="John Doe"
  date={new Date()}
  onPrint={handlePrint}
  onDownload={handleDownload}
/>

Use Cases

Report Writing

Create detailed reports with rich formatting

The rich text editor is perfect for creating detailed reports with headings, lists, tables, and images. Social workers can document their observations and findings in a structured format.

Case Notes

Document case notes with formatting

Social workers can use the editor to take detailed notes during supervised visits, highlighting important observations and including structured information.

Templates

Create and use report templates

Administrators can create standardized templates for different types of reports, ensuring consistency across the organization.

Document Sharing

Share and print formatted documents

Documents created with the editor can be easily shared with other stakeholders, printed for physical records, or downloaded for offline use.