React MUI RichText Editor

A flexible and extensible rich text editor component for React with Material-UI, based on React Quill.

Features

• 📝 Full-featured WYSIWYG Editor - Based on React Quill with comprehensive formatting options
• 🖼️ Image Upload & Management - Upload, compress, crop, and manage images
• 🎨 Material-UI Integration - Seamless integration with Material-UI components
• ⚙️ Highly Configurable - Extensive configuration options for customization
• 🔌 Extensible - Support for custom toolbar items, formats, modules, and render functions
• 📱 Responsive - Works well on desktop and mobile devices
• 🎯 TypeScript Support - Full TypeScript definitions included

Installation

npm install react-mui-richtext
# or
yarn add react-mui-richtext

Peer Dependencies

npm install react react-dom @mui/material @mui/icons-material

Note: The following dependencies are automatically installed with this package:

• react-quill
• react-easy-crop
• quill-emoji

CSS Import

You need to import the required CSS files in your application:

import 'react-quill/dist/quill.snow.css';
import 'quill-emoji/dist/quill-emoji.css';

Add these imports in your main entry file (e.g., main.tsx, index.tsx, or App.tsx).

Basic Usage

import React, { useState } from 'react';
import { RichTextEditor } from 'react-mui-richtext';
// Don't forget to import CSS files
import 'react-quill/dist/quill.snow.css';
import 'quill-emoji/dist/quill-emoji.css';

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

  return (
    <RichTextEditor
      name="editor"
      value={content}
      onChange={setContent}
      placeholder="Start typing..."
    />
  );
}

Props

Basic Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | required | Field name for the editor | | value | string | required | HTML content value | | onChange | (value: string) => void | required | Callback when content changes | | onBlur | () => void | - | Callback when editor loses focus | | disabled | boolean | false | Disable the editor | | placeholder | string | '' | Placeholder text | | rows | number | 10 | Number of rows (affects height) | | height | string \| number | - | Custom height (overrides rows) | | error | boolean | false | Show error state |

Image Upload Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | allowImageUpload | boolean | true | Enable image upload button | | maxImageSize | number | 2097152 (2MB) | Maximum image size in bytes | | maxImageCount | number | 5 | Maximum number of images | | enableImageCompress | boolean | true | Enable automatic image compression | | maxImageWidth | number | 1920 | Maximum image width in pixels | | maxImageHeight | number | 1080 | Maximum image height in pixels | | imageQuality | number | 0.8 | Image quality (0-1) | | enableImageCrop | boolean | true | Enable image cropping before upload | | cropAspectRatio | number | - | Fixed aspect ratio for cropping (e.g., 210/297 for A4) | | allowOriginalImageUpload | boolean | false | Enable original size image upload button |

Feature Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | allowEmoji | boolean | true | Enable emoji picker |

Extension Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | config | RichTextEditorConfig | {} | Configuration object (see below) | | renderToolbar | (defaultToolbar: ReactNode) => ReactNode | - | Custom toolbar renderer | | renderCropDialog | (props: CropDialogProps) => ReactNode | - | Custom crop dialog renderer |

Configuration Object

The config prop allows you to customize various aspects of the editor:

interface RichTextEditorConfig {
  // Alert function for notifications
  handleAlert?: (message: string, type?: 'success' | 'error' | 'warning' | 'info') => void;
  
  // Custom LoadingButton component
  LoadingButton?: React.ComponentType<LoadingButtonProps>;
  
  // Custom toolbar items
  customToolbarItems?: ToolbarItem[];
  
  // Custom formats
  customFormats?: string[];
  
  // Custom modules
  customModules?: Record<string, any>;
  
  // Custom styles
  customStyles?: RichTextEditorStyles;
}

Example with Configuration

import { RichTextEditor, RichTextEditorConfig } from 'react-mui-richtext';
import { useSnackbar } from 'notistack';
import { LoadingButton } from '@mui/lab';

function MyEditor() {
  const { enqueueSnackbar } = useSnackbar();
  
  const config: RichTextEditorConfig = {
    handleAlert: (message, type = 'info') => {
      enqueueSnackbar(message, { variant: type });
    },
    LoadingButton: LoadingButton,
    customStyles: {
      container: {
        '& .ql-toolbar': {
          backgroundColor: '#f5f5f5',
        },
      },
    },
  };

  return (
    <RichTextEditor
      name="editor"
      value={content}
      onChange={setContent}
      config={config}
    />
  );
}

Advanced Usage

Custom Toolbar

<RichTextEditor
  name="editor"
  value={content}
  onChange={setContent}
  renderToolbar={(defaultToolbar) => (
    <Box>
      {defaultToolbar}
      <Button onClick={handleCustomAction}>Custom Action</Button>
    </Box>
  )}
/>

Custom Crop Dialog

<RichTextEditor
  name="editor"
  value={content}
  onChange={setContent}
  renderCropDialog={(props) => (
    <CustomCropDialog {...props} />
  )}
/>

A4 Aspect Ratio Cropping

<RichTextEditor
  name="editor"
  value={content}
  onChange={setContent}
  enableImageCrop={true}
  cropAspectRatio={210 / 297} // A4 size
/>

Disable Image Upload

<RichTextEditor
  name="editor"
  value={content}
  onChange={setContent}
  allowImageUpload={false}
/>

Styling

The component uses Material-UI's sx prop for styling. You can customize styles through the config.customStyles prop:

const config = {
  customStyles: {
    container: {
      '& .ql-toolbar': {
        backgroundColor: '#fafafa',
        border: '1px solid #e0e0e0',
      },
      '& .ql-editor': {
        minHeight: '300px',
      },
    },
  },
};

Image Compression

The editor automatically compresses images that exceed the size limit or are larger than 500KB. Compression maintains aspect ratio and reduces quality until the image fits within the size limit.

Image Cropping

When enableImageCrop is enabled, users can:

• Drag to move the crop box
• Resize the crop box by dragging corners/edges
• Adjust zoom level
• Rotate the image
• Set fixed aspect ratio (if cropAspectRatio is provided)

TypeScript

Full TypeScript support is included. Import types as needed:

import type {
  RichTextEditorProps,
  RichTextEditorConfig,
  CropDialogProps,
  LoadingButtonProps,
} from 'react-mui-richtext';

License

MIT