react-quill-editors/README.md

A fully customizable React rich text editor with no external dependencies. Features a comprehensive toolbar similar to popular Markdown editors with file operations, media insertion, and advanced formatting capabilities.

# React Quill Editors

A fully customizable React rich text editor with no external dependencies. Built from scratch using only React and native browser APIs. Features a comprehensive toolbar similar to popular Markdown editors with file operations, media insertion, and advanced formatting capabilities.

## ✨ Features

- ✅ **No external dependencies** - Built entirely with React and native browser APIs
- ✅ **Markdown editor-style interface** - Comprehensive toolbar with file operations, formatting, and media tools
- ✅ **Fully customizable** - Enable/disable features via props
- ✅ **Modern UI** - Clean, responsive design with professional styling
- ✅ **TypeScript support** - Full TypeScript definitions included
- ✅ **Accessible** - Keyboard navigation and screen reader support
- ✅ **Lightweight** - Minimal bundle size
- ✅ **File operations** - Save, delete, close functionality
- ✅ **Media support** - Insert links, images, videos, and attachments
- ✅ **Advanced formatting** - Headings, code blocks, quotes, horizontal rules
- ✅ **Color controls** - Text and background color options
- ✅ **Font controls** - Size and family selection
- ✅ **Alignment tools** - Left, center, right, justify alignment
- ✅ **List support** - Bullet and numbered lists
- ✅ **Preview mode** - Real-time content preview

## 🚀 Installation

```bash
npm install react-quill-editors
```

## 📖 Quick Start

```jsx
import { RichTextEditor } from 'react-quill-editors';

function App() {
  const [content, setContent] = useState('');

  return (
    <RichTextEditor
      features={{
        // File operations
        save: true,
        delete: true,
        close: true,
        
        // Text formatting
        heading: true,
        bold: true,
        italic: true,
        underline: true,
        strikethrough: true,
        
        // Font controls
        fontSize: true,
        fontFamily: true,
        
        // Colors
        color: true,
        bgColor: true,
        
        // Alignment
        align: true,
        
        // Lists
        lists: true,
        
        // Media
        link: true,
        image: true,
        video: true,
        
        // Special formatting
        code: true,
        quote: true,
        horizontalRule: true,
        
        // Additional features
        attachment: true,
        preview: true,
      }}
      value={content}
      onChange={setContent}
      onSave={() => console.log('Saving...')}
      onDelete={() => console.log('Deleting...')}
      onClose={() => console.log('Closing...')}
      onPreview={() => console.log('Preview...')}
      placeholder="Start typing..."
    />
  );
}
```

## 📚 API Reference

### RichTextEditor Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `features` | `EditorFeatures` | `{}` | Object to enable/disable specific features |
| `value` | `string` | `''` | The HTML content of the editor |
| `onChange` | `(value: string) => void` | - | Callback when content changes |
| `placeholder` | `string` | `'Start typing...'` | Placeholder text when editor is empty |
| `className` | `string` | `''` | Additional CSS class name |
| `style` | `React.CSSProperties` | `{}` | Inline styles for the editor |
| `readOnly` | `boolean` | `false` | Makes the editor read-only |
| `disabled` | `boolean` | `false` | Disables the editor completely |
| `onSave` | `() => void` | - | Callback for save button |
| `onDelete` | `() => void` | - | Callback for delete button |
| `onClose` | `() => void` | - | Callback for close button |
| `onPreview` | `() => void` | - | Callback for preview button |

### EditorFeatures

| Category | Feature | Prop | Description |
|----------|---------|------|-------------|
| **File Operations** | | | |
| | Save | `save: true` | Save button with callback |
| | Delete | `delete: true` | Delete button with callback |
| | Close | `close: true` | Close button with callback |
| **Text Formatting** | | | |
| | Heading | `heading: true` | Insert headings (H1-H6) |
| | Bold | `bold: true` | Toggle bold text |
| | Italic | `italic: true` | Toggle italic text |
| | Underline | `underline: true` | Toggle underlined text |
| | Strikethrough | `strikethrough: true` | Toggle strikethrough text |
| **Font Controls** | | | |
| | Font Size | `fontSize: true` | Change text size (8px-36px) |
| | Font Family | `fontFamily: true` | Change font family |
| **Colors** | | | |
| | Text Color | `color: true` | Change text color |
| | Background Color | `bgColor: true` | Change background color |
| **Alignment** | | | |
| | Alignment | `align: true` | Text alignment (left, center, right, justify) |
| **Lists** | | | |
| | Lists | `lists: true` | Bullet and numbered lists |
| **Media** | | | |
| | Link | `link: true` | Insert links |
| | Image | `image: true` | Insert images |
| | Video | `video: true` | Insert videos |
| **Special Formatting** | | | |
| | Code | `code: true` | Insert code blocks |
| | Quote | `quote: true` | Insert blockquotes |
| | Horizontal Rule | `horizontalRule: true` | Insert horizontal rules |
| **Additional Features** | | | |
| | Attachment | `attachment: true` | File attachment functionality |
| | Preview | `preview: true` | Preview mode with callback |

## 💡 Usage Examples

### Basic Editor

```jsx
import { RichTextEditor } from 'react-quill-editors';

function BasicEditor() {
  const [content, setContent] = useState('');

  return (
    <RichTextEditor
      features={{
        bold: true,
        italic: true,
        underline: true,
      }}
      value={content}
      onChange={setContent}
    />
  );
}
```

### Markdown-Style Editor

```jsx
import { RichTextEditor } from 'react-quill-editors';

function MarkdownStyleEditor() {
  const [content, setContent] = useState('');

  const handleSave = () => {
    console.log('Saving content:', content);
  };

  const handleDelete = () => {
    if (confirm('Are you sure?')) {
      setContent('');
    }
  };

  return (
    <RichTextEditor
      features={{
        // File operations
        save: true,
        delete: true,
        close: true,
        
        // Text formatting
        heading: true,
        bold: true,
        italic: true,
        underline: true,
        strikethrough: true,
        
        // Font controls
        fontSize: true,
        fontFamily: true,
        
        // Colors
        color: true,
        bgColor: true,
        
        // Alignment
        align: true,
        
        // Lists
        lists: true,
        
        // Media
        link: true,
        image: true,
        video: true,
        
        // Special formatting
        code: true,
        quote: true,
        horizontalRule: true,
        
        // Additional features
        attachment: true,
        preview: true,
      }}
      value={content}
      onChange={setContent}
      onSave={handleSave}
      onDelete={handleDelete}
      placeholder="Start typing your content..."
    />
  );
}
```

### Read-Only Editor

```jsx
import { RichTextEditor } from 'react-quill-editors';

function ReadOnlyEditor() {
  const content = '<p><strong>This is read-only content</strong> with <em>various formatting</em>.</p>';

  return (
    <RichTextEditor
      features={{
        bold: true,
        italic: true,
        underline: true,
        fontSize: true,
        fontFamily: true,
        color: true,
        align: true,
      }}
      value={content}
      readOnly={true}
    />
  );
}
```

### Custom Styled Editor

```jsx
import { RichTextEditor } from 'react-quill-editors';

function CustomStyledEditor() {
  const [content, setContent] = useState('');

  return (
    <RichTextEditor
      features={{
        bold: true,
        italic: true,
        color: true,
        align: true,
        lists: true,
      }}
      value={content}
      onChange={setContent}
      className="custom-editor"
      style={{
        border: '2px solid #007bff',
        borderRadius: '8px',
        minHeight: '400px',
        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
      }}
    />
  );
}
```

## 🎨 Available Options

### Font Sizes
- 8px, 10px, 12px, 14px, 18px, 24px, 36px

### Font Families
- Arial, Times New Roman, Courier New, Georgia, Verdana, Helvetica

### Color Palette
The editor includes a comprehensive color palette with 15 predefined colors:
- **Basic**: Black, White
- **Primary**: Red, Green, Blue
- **Secondary**: Yellow, Magenta, Cyan
- **Extended**: Gray, Maroon, Olive, Purple, Teal, Navy

## 🌐 Browser Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 🛠️ Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Clean build directory
npm run clean
```

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 👨‍💻 Author

**Akshay Bhalala**

- GitHub: [@akshaybhalala](https://github.com/akshaybhalala)
- LinkedIn: [Akshay Bhalala](https://linkedin.com/in/akshaybhalala)
- Email: akshay.bhalala@example.com

## 🙏 Acknowledgments

- Built with React and TypeScript
- Uses native browser `document.execCommand()` API
- Inspired by modern Markdown editors and rich text editors
- Special thanks to the React community for inspiration and best practices

## 📦 Keywords

- react
- text-editor
- rich-text
- wysiwyg
- editor
- typescript
- markdown
- content-editor
- html-editor
- formatting
- toolbar
- no-dependencies
- lightweight
- customizable
- accessible
- modern-ui
- file-operations
- media-insertion
- color-picker
- font-controls
- alignment-tools
- list-support
- preview-mode