npm package: @hahaotnmc/react-rich-editor
Description: A powerful rich text editor for React applications
Author: hahaotnmc
Latest version: 1.0.1

# React Rich Editor

A powerful and customizable rich text editor for React applications.

## Features

- 🎨 Rich text formatting (bold, italic, underline, etc.)
- 📝 Multiple text styles and fonts
- 🎯 Text alignment and indentation
- 📋 Lists (bullet, numbered, check)
- 🔗 Links and media embedding
- 📊 Tables support
- 🎨 Color picker and background colors
- 😊 Emoji picker
- 📱 Responsive design
- ⚡ Lightweight and fast
- 🔧 Highly customizable

## Installation

```bash
npm install react-rich-editor
# or
yarn add react-rich-editor
```

## Basic Usage

```jsx
import React, { useState } from "react";
import ReactRichEditor from "react-rich-editor";

function App() {
  const [content, setContent] = useState("");

  return (
    <div>
      <h1>My Rich Editor</h1>
      <ReactRichEditor
        value={content}
        onChange={setContent}
        placeholder="Start typing..."
      />
    </div>
  );
}
```

## Advanced Usage

```jsx
import React, { useRef } from "react";
import ReactRichEditor from "react-rich-editor";

function AdvancedEditor() {
  const editorRef = useRef();

  const handleReady = (editor) => {
    console.log("Editor is ready!", editor);
  };

  const handleSave = () => {
    const content = editorRef.current.getValue();
    console.log("Content:", content);
  };

  return (
    <div>
      <ReactRichEditor
        ref={editorRef}
        value="<p>Initial content</p>"
        onChange={(value) => console.log("Content changed:", value)}
        placeholder="Enter your content here..."
        readOnly={false}
        className="my-editor"
        style={{ minHeight: "300px" }}
        options={{
          theme: "snow",
          modules: ["toolbar", "history"],
          toolbar: [
            ["bold", "italic", "underline"],
            ["link", "image"],
            ["list", "bullet"],
          ],
        }}
        onReady={handleReady}
      />
      <button onClick={handleSave}>Save Content</button>
    </div>
  );
}
```

## Props

| Prop          | Type                      | Default                     | Description                     |
| ------------- | ------------------------- | --------------------------- | ------------------------------- |
| `value`       | `string`                  | `''`                        | The content of the editor       |
| `onChange`    | `(value: string) => void` | -                           | Callback when content changes   |
| `placeholder` | `string`                  | `'Enter your text here...'` | Placeholder text                |
| `readOnly`    | `boolean`                 | `false`                     | Whether the editor is read-only |
| `className`   | `string`                  | `''`                        | Additional CSS class            |
| `style`       | `React.CSSProperties`     | `{}`                        | Inline styles                   |
| `options`     | `EditorOptions`           | `{}`                        | Editor configuration options    |
| `onReady`     | `(editor: any) => void`   | -                           | Callback when editor is ready   |

## Editor Options

```typescript
interface EditorOptions {
  placeholder?: string;
  readOnly?: boolean;
  theme?: string;
  modules?: string[];
  formats?: string[];
  toolbar?: string[] | boolean;
  height?: string | number;
  width?: string | number;
  minHeight?: string | number;
  maxHeight?: string | number;
  autoFocus?: boolean;
  spellCheck?: boolean;
  tabIndex?: number;
  ariaLabel?: string;
}
```

## Methods

The editor ref provides the following methods:

- `getValue()` - Get the current content
- `setValue(value: string)` - Set the content
- `focus()` - Focus the editor
- `blur()` - Blur the editor
- `destroy()` - Destroy the editor instance

## Styling

The editor comes with default styles, but you can customize them:

```css
.react-rich-editor {
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 200px;
}

.react-rich-editor .toolbar {
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}
```

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

# Lint code
npm run lint
```

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.