mertz-rich-text

A flexible, accessible and customizable rich text editor and viewer component for React applications. Features a live preview mode, responsive design, and comprehensive text formatting options.

Features

• 📝 Rich text editing with common formatting options (bold, italic, underline)
• 🔤 Headings support (H1, H2)
• 🔗 Link insertion
• 🖼️ Image insertion with captions and alt text
• 👁️ Live preview mode
• 📱 Mobile-friendly and responsive design
• ♿ Fully accessible with ARIA attributes
• ↩️ Undo/redo functionality
• 🎨 Customizable styling
• 📖 Read-only mode support

Installation

npm install mertz-rich-text
# or
yarn add mertz-rich-text
# or
pnpm add mertz-rich-text
# or
bun add mertz-rich-text

Usage

Basic example:

import { RichTextEditor } from 'mertz-rich-text';

function MyEditor() {
  const handleChange = (newContent) => {
    console.log('Content updated:', newContent);
  };

  return (
    <RichTextEditor
      initialContent="<p>Start typing here...</p>"
      onChange={handleChange}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialContent | string | "" | Initial HTML content for the editor | | readOnly | boolean | false | When true, displays content in read-only mode | | onChange | function | - | Callback function that receives the updated HTML content | | className | string | "" | Additional CSS class for the container | | showToolbar | boolean | true | Controls visibility of the formatting toolbar | | showPreview | boolean | true | Controls visibility of the live preview pane |

Read-only Mode

Use the read-only mode to display formatted content without editing capabilities:

<RichTextEditor
  initialContent={myContent}
  readOnly={true}
  showToolbar={false}
/>

Styling

The component comes with default styling but can be customized using CSS variables:

.rich-text-container {
  --primary-color: #024a43;
  --secondary-color: #db783e;
  --background-color: #f5f5f5;
  --text-color: #142d25;
  --body-background-color: #fbf5f0;
}

Browser Support

• Chrome
• Firefox
• Safari
• Edge
• Mobile browsers with touch support

Development

To build the package locally:

npm install
npm run build

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.