Rich Text Editor Component

A powerful WYSIWYG editor component built on top of Tiptap that provides a comprehensive solution for text editing with formatting, image embedding, tables, and more.

  • Extensive text formatting options
  • Image, link, and table insertion
  • Color control and highlighting
  • Text alignment
  • Lists and code blocks
  • Dropdown menus for organized options
  • Export to HTML, Markdown, or JSON
  • Accessibility support

Installation

The RichTextEditor component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the Rich Text Editor in your project.

React TSX
1import { RichTextEditor } from "@/components/modern-ui/rich-text-editor";

React TSX
1<RichTextEditor placeholder="Type something..." />

Examples

Basic Editor

Editor with Custom Extensions

API Reference

RichTextEditor

PropTypeDefaultDescription
initialContentstring""Initial HTML content for the editor
placeholderstring"Type something..."Placeholder text when the editor is empty
onChange(html: string) => void-Callback when content changes
classNamestring-Additional CSS classes for the editor container
customExtensionsExtension[][]Custom Tiptap extensions to add to the editor
valuestring-Controlled value of the editor content (HTML)
onValueChange(value: string) => void-Callback for controlled value changes

Features

The Rich Text Editor includes the following features:

  • Text Formatting: Bold, italic, underline, strikethrough, superscript, subscript organized in a dropdown
  • Paragraph Styles: Headings (H1-H3), paragraphs, ordered and unordered lists, code blocks, blockquotes
  • Text Styling: Font family, font size, text and background colors in dropdown menus
  • Alignment: Left, center, right, justify options in a dropdown
  • Media: Image upload and URL insertion, embeddable content
  • Tables: Insert and edit tables
  • Links: Add, edit, and remove links
  • Drawings: Integration with Excalidraw for creating diagrams
  • Export Options: Export to HTML, Markdown, or JSON

Accessibility

The Rich Text Editor is built with accessibility in mind:

  • Supports keyboard navigation
  • Provides ARIA attributes for screen readers
  • Includes visible focus states
  • Follows WAI-ARIA authoring practices