react-quill

react-quill is a popular and powerful React component that provides a wrapper for the Quill rich text editor. Quill is a modern, open-source rich text editor built for the web, known for its modular architecture, expressive API, and excellent cross-browser compatibility. `react-quill` makes it incredibly easy to integrate this sophisticated editor into React applications, allowing users to create and edit rich text content.

Key Features and Concepts:
* Rich Text Editing: Offers a comprehensive set of tools for formatting text, embedding images, videos, lists, links, and more, similar to traditional word processors.
* Easy Integration: Seamlessly integrates into React components, behaving much like any other form input element, making it straightforward to manage its state.
* Customization: Highly customizable through `modules`, `formats`, and `themes`. Developers can tailor the editor's functionality and appearance to specific application requirements. For instance, the toolbar can be configured to display only specific formatting options.
* Controlled Component: Can be used as a controlled component in React, where the parent component manages the editor's content (its `value`) and updates it via an `onChange` callback.
* Themes: Supports Quill's built-in themes like "snow" (the default, with a visible toolbar) and "bubble" (a floating toolbar that appears on text selection), which dictate the overall styling of the editor.
* Value and onChange: The `value` prop typically expects an HTML string (or Quill's Delta format). The `onChange` prop is a callback function that fires whenever the editor's content changes, receiving the new HTML content (among other parameters).
* Modules: Extend Quill's functionality. The most commonly used module is `toolbar`, which defines the buttons and controls visible in the editor's interface. Other modules can manage image uploads, clipboard behavior, history, etc.
* Formats: Defines the specific formatting options Quill should recognize and allow, often correlating with the buttons configured in the toolbar module.

Installation and Usage:
To use `react-quill`, you typically install it via npm or yarn and then import the `ReactQuill` component along with its associated CSS file. You manage the editor's content using React state, binding the state variable to the `value` prop and updating it via the `onChange` prop, much like a standard controlled input field.

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // Import Quill's CSS for the 'snow' theme

function RichTextEditor() {
  const [value, setValue] = useState('');

  // Configure Quill modules for the toolbar
  // This defines the buttons available in the editor's toolbar
  const modules = {
    toolbar: [
      [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
      [{ 'size': [] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' },
       { 'indent': '-1' }, { 'indent': '+1' }],
      ['link', 'image', 'video'],
      ['clean'] // remove formatting button
    ],
    clipboard: {
      matchVisual: false, // Prevents issues with pasted content styling
    },
  };

  // Configure Quill formats
  // These are the formats that Quill will allow in the editor
  const formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'video'
  ];

  return (
    <div style={{ width: '80%', margin: '20px auto' }}>
      <h2>My Rich Text Editor</h2>
      <ReactQuill 
        theme="snow" // Use the 'snow' theme
        value={value} // Bind the editor's content to the state
        onChange={setValue} // Update state on content change
        modules={modules} // Apply custom toolbar modules
        formats={formats} // Apply allowed formats
        placeholder="Start writing your amazing content here..."
        style={{ height: '300px', marginBottom: '50px' }}
      />
      <div style={{ marginTop: '20px' }}>
        <h3>Current HTML Content:</h3>
        <div style={{ border: '1px solid #ccc', padding: '10px', minHeight: '100px', background: '#f9f9f9' }}>
          {/* Displaying the raw HTML content */}
          <pre>{value}</pre>
          {/* Optionally, dangerouslySetInnerHTML can render the HTML */}
          {/* <div dangerouslySetInnerHTML={{ __html: value }} /> */}
        </div>
      </div>
    </div>
  );
}

export default RichTextEditor;