nextjs-rich-text-editor/README.md

A modern, feature-rich rich text editor for React/Next.js apps with images, tables, and more.

# Custom Rich Text Editor

A modern, feature-rich text editor component for React/Next.js applications.

## Features

- ✅ **Rich Text Formatting**: Bold, italic, underline, headings  
- ✅ **Custom Colors**: Text and background colors with a custom color picker  
- ✅ **Lists**: Ordered and unordered lists  
- ✅ **Tables**: Modern, responsive tables with hover effects  
- ✅ **Images**: Upload, resize, and style images  
- ✅ **Responsive Design**: Works on all screen sizes  
- ✅ **Customizable Dimensions**: Set custom width and height  
- ✅ **Modern UI**: Beautiful, professional interface  

## Installation

```bash
npm install nextjs-rich-text-editor

## Usage

import { useState } from "react"
import CustomEditor from "nextjs-rich-text-editor"

function App() {
  const [editorData, setEditorData] = useState("")

  return (
    <CustomEditor 
      value={editorData} 
      onChange={setEditorData}
      width="100%"        // Optional: default "100%"
      height="500px"      // Optional: default "500px"
      className="my-4"    // Optional: additional CSS classes
    />
  )
}

## Props

| Prop        | Type     | Default   | Description                   |
| ----------- | -------- | --------- | ----------------------------- |
| `value`     | string   | `""`      | Editor content (HTML)         |
| `onChange`  | function | —         | Callback when content changes |
| `width`     | string   | `"100%"`  | Editor width (CSS value)      |
| `height`    | string   | `"500px"` | Editor height (CSS value)     |
| `className` | string   | `""`      | Additional CSS classes        |

## Examples

### Basic Usage
<CustomEditor value={content} onChange={setContent} />

### Custom Dimensions
<CustomEditor 
  value={content} 
  onChange={setContent}
  width="800px"
  height="300px"
/>

### With Custom Styling
<CustomEditor 
  value={content} 
  onChange={setContent}
  className="shadow-xl border-2 border-blue-200"
/>