mertz-rich-text/README.md

A flexible rich text editor and viewer for React applications

# 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

```bash
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:

```jsx
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:

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

### Styling

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

```css
.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:

```bash
npm install
npm run build
```

## License

MIT

## Contributing

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