Mertz-rich-text NPM

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;
}