Package Exports

mertz-rich-text
mertz-rich-text/dist/index.esm.js
mertz-rich-text/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mertz-rich-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.