### Install ReactQuillNew with npm or yarn

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

Install the react-quill-new package using npm or yarn. Ensure you have React and ReactDOM installed. You may also need a style loader for Quill's CSS.

```bash
npm install react-quill-new --save
# or if using yarn
yarn add react-quill-new
```

--------------------------------

### React-Quill v3 ES6 Import Example

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This code snippet shows how to import ReactQuill and the core Quill namespace using ES6 syntax, which is standard for React-Quill v3 and beyond.

```jsx
// ES6
import ReactQuill, { Quill } from 'react-quill-new';
```

--------------------------------

### Creating an Unprivileged Editor Instance in React-Quill

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This example shows how to create an unprivileged editor proxy using the `makeUnprivilegedEditor` method provided by React-Quill. It takes the actual Quill instance obtained from `getEditor` and returns a restricted version, suitable for use when you need to interact with the editor's content without the risk of de-syncing the component.

```javascript
const editor = this.reactQuillRef.getEditor();
const unprivilegedEditor = this.reactQuillRef.makeUnprivilegedEditor(editor);
// You may now use the unprivilegedEditor proxy methods
unprivilegedEditor.getText();
```

--------------------------------

### React-Quill Editor Component with Text Insertion

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This React component demonstrates how to get a reference to the ReactQuill component and its underlying Quill instance. It includes a method to insert text at the current cursor position using the Quill instance. This example utilizes React's ref system and lifecycle methods to attach the Quill instance.

```jsx
class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.quillRef = null; // Quill instance
    this.reactQuillRef = null; // ReactQuill component
  }

  componentDidMount() {
    this.attachQuillRefs();
  }

  componentDidUpdate() {
    this.attachQuillRefs();
  }

  attachQuillRefs = () => {
    if (typeof this.reactQuillRef.getEditor !== 'function') return;
    this.quillRef = this.reactQuillRef.getEditor();
  };

  insertText = () => {
    var range = this.quillRef.getSelection();
    let position = range ? range.index : 0;
    this.quillRef.insertText(position, 'Hello, World! ');
  };

  render() {
    return (
      <div>
        <ReactQuill
          ref={(el) => {
            this.reactQuillRef = el;
          }}
          theme={'snow'}
        />
        <button onClick={this.insertText}>Insert Text</button>
      </div>
    );
  }
}
```

--------------------------------

### Configure React-Quill with Custom Toolbar

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This example shows how to configure ReactQuill with a custom toolbar. It defines the available modules and formats for the toolbar, allowing users to apply various text styles like bold, italics, headers, lists, and links. The toolbar configuration is passed via the 'modules' and 'formats' props.

```jsx
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
    }
  }

  modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  }

  formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]

  render() {
    return (
      <div className="text-editor">
        <ReactQuill theme="snow"
                    modules={this.modules}
                    formats={this.formats}>
        </ReactQuill>
      </div>
    );
  }
}

export default MyComponent;
```

--------------------------------

### React Read-Only Editor with ReactQuill

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

Demonstrates how to toggle between editable and read-only states for a ReactQuill editor. This example uses React hooks (`useState`) to manage the read-only state and allows users to switch between editing and viewing formatted content.

```jsx
import React, { useState } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

function ReadOnlyEditor() {
  const [value, setValue] = useState('<h1>Welcome</h1><p>This is <strong>read-only</strong> content.</p>');
  const [readOnly, setReadOnly] = useState(false);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={readOnly}
          onChange={(e) => setReadOnly(e.target.checked)}
        />
        Read Only Mode
      </label>
      <ReactQuill
        value={value}
        onChange={setValue}
        readOnly={readOnly}
        theme="snow"
      />
    </div>
  );
}

export default ReadOnlyEditor;
```

--------------------------------

### Using Quill Delta Objects in React

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

This example demonstrates how to manage and manipulate editor content using Quill's Delta objects in a React application. It shows how to initialize the editor with Delta, capture changes as Delta objects, and access HTML, text, and length. It requires 'react-quill-new' and its CSS.

```jsx
import React, { useState } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

function DeltaEditor() {
  const [delta, setDelta] = useState({
    ops: [
      { insert: 'Hello ' },
      { insert: 'World', attributes: { bold: true } },
      { insert: '!\n' }
    ]
  });

  const handleChange = (content, delta, source, editor) => {
    // Get full document Delta (not the change Delta)
    const fullDelta = editor.getContents();
    setDelta(fullDelta);

    console.log('HTML:', editor.getHTML());
    console.log('Text:', editor.getText());
    console.log('Length:', editor.getLength());
  };

  return (
    <div>
      <ReactQuill
        value={delta}
        onChange={handleChange}
        theme="snow"
      />
      <pre>{JSON.stringify(delta, null, 2)}</pre>
    </div>
  );
}

export default DeltaEditor;
```

--------------------------------

### React-Quill Custom Formats with Parchment

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This example demonstrates how to register and use custom text formats in React-Quill using Parchment. It involves importing Quill, defining a custom Blot, registering it, and then specifying the custom format in the editor's props. Dependencies include React and React-Quill.

```js
import ReactQuill, { Quill } from 'react-quill-new'; // ES6
```

```jsx
/*
 * Example Parchment format from
 * https://quilljs.com/guides/cloning-medium-with-parchment/
 * See the video example in the guide for a complex format
 */
let Inline = Quill.import('blots/inline');
class BoldBlot extends Inline {}
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';
Quill.register('formats/bold', BoldBlot);

const formats = ['bold']; // add custom format name + any built-in formats you need

/*
 * Editor component with default and custom formats
 */
class MyComponent extends React.Component {
  constructor(props) {
    this.formats = formats;
    this.state = { text: '' };
  }

  handleChange(value) {
    this.setState({ text: value });
  }

  render() {
    return (
      <ReactQuill
        value={this.state.text}
        onChange={this.handleChange}
        formats={this.formats}
      />
    );
  }
}

```

--------------------------------

### npm Build and Test Commands

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

These are standard npm scripts for building the project and running its test suite. 'npm build' compiles the libraries, types, and bundles, while 'npm test' executes the automated tests. These commands are essential for development and CI/CD pipelines.

```sh
npm build  # or watch
```

```sh
npm test
```

--------------------------------

### Available npm Package Scripts

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This table lists various npm scripts available for the React-Quill project, detailing their purpose. Scripts include building, watching for changes, testing, cleaning build artifacts, and serving a demo application. These scripts streamline common development tasks.

```markdown
| Script          | Description                                 |
| --------------- | ------------------------------------------- |
| `npm run build` | Builds lib and browser bundle               |
| `npm run watch` | Rebuilds on source code changes             |
| `npm run test`  | Runs unit tests and coverage                |
| `npm run clean` | Cleans build artifacts                      |
| `npm run demo`  | Serves a simple ReactQuill test application |
```

--------------------------------

### Basic ReactQuillNew Usage with webpack/create-react-app

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

Demonstrates a basic implementation of ReactQuillNew in a React component using the 'snow' theme. It utilizes React's useState hook for managing the editor's content.

```jsx
import React, { useState } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

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

  return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}
```

--------------------------------

### ReactQuill with HTML Custom Toolbar and Event Handlers

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

Illustrates integrating ReactQuill with an external HTML toolbar. It defines custom buttons and event handlers, such as inserting a star character, demonstrating advanced customization and interaction with the Quill editor's API.

```jsx
import React from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

const CustomButton = () => <span className="octicon octicon-star" />;

function insertStar() {
  const cursorPosition = this.quill.getSelection().index;
  this.quill.insertText(cursorPosition, '★');
  this.quill.setSelection(cursorPosition + 1);
}

const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue={""} onChange={(e) => e.persist()}>
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option selected></option>
    </select>
    <button className="ql-insertStar">
      <CustomButton />
    </button>
  </div>
);

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorHtml: '' };
  }

  handleChange = (html) => {
    this.setState({ editorHtml: html });
  };

  render() {
    return (
      <div className="text-editor">
        <CustomToolbar />
        <ReactQuill
          value={this.state.editorHtml}
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          modules={{
            toolbar: {
              container: '#toolbar',
              handlers: {
                insertStar: insertStar,
              },
            },
          }}
          formats={['header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image', 'color']}
        />
      </div>
    );
  }
}

export default Editor;
```

--------------------------------

### Basic ReactQuill Component Integration in React

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

Demonstrates a basic controlled ReactQuill component integrated with React state management. It uses the 'snow' theme and handles text changes via a useState hook. Essential for simple rich-text editing functionalities.

```jsx
import React, { useState } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

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

  return (
    <ReactQuill
      theme="snow"
      value={value}
      onChange={setValue}
      placeholder="Start typing..."
    />
  );
}

export default MyEditor;
```

--------------------------------

### ReactQuill with Custom Toolbar Configuration

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

Shows how to configure a ReactQuill editor with a custom toolbar, specifying available formatting options and modules. This allows fine-grained control over the editing experience. It utilizes a class component for state management.

```jsx
import React, { Component } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

class EditorWithToolbar extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  };

  formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ];

  handleChange = (value) => {
    this.setState({ text: value });
  };

  render() {
    return (
      <div className="editor-container">
        <ReactQuill
          theme="snow"
          value={this.state.text}
          onChange={this.handleChange}
          modules={this.modules}
          formats={this.formats}
        />
      </div>
    );
  }
}

export default EditorWithToolbar;
```

--------------------------------

### React Editor Event Handling with ReactQuill

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

Implements comprehensive event handlers for ReactQuill, including onChange, onFocus, onBlur, and selection tracking. It logs editor events and updates component state based on user interactions, demonstrating how to manage editor state within a React component.

```jsx
import React, { Component } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

class EventHandlerEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      selection: null,
      focused: false
    };
  }

  handleChange = (content, delta, source, editor) => {
    console.log('Content changed:', content);
    console.log('Change delta:', delta);
    console.log('Source:', source);
    console.log('Editor length:', editor.getLength());
    this.setState({ text: content });
  };

  handleChangeSelection = (range, source, editor) => {
    console.log('Selection changed:', range);
    this.setState({ selection: range });
  };

  handleFocus = (range, source, editor) => {
    console.log('Editor focused:', range);
    this.setState({ focused: true });
  };

  handleBlur = (previousRange, source, editor) => {
    console.log('Editor blurred:', previousRange);
    this.setState({ focused: false });
  };

  render() {
    return (
      <div>
        <ReactQuill
          value={this.state.text}
          onChange={this.handleChange}
          onChangeSelection={this.handleChangeSelection}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          theme="snow"
        />
        <div>
          <p>Focused: {this.state.focused ? 'Yes' : 'No'}</p>
          <p>Selection: {JSON.stringify(this.state.selection)}</p>
        </div>
      </div>
    );
  }
}

export default EventHandlerEditor;
```

--------------------------------

### Imperative Editor Control with Refs in React

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

This code snippet illustrates how to gain imperative control over the React-Quill editor instance using React refs. It shows how to attach a ref to the editor, access the Quill instance, and call methods like `insertText`, `focus`, and `blur`. This requires 'react-quill-new' and its CSS.

```jsx
import React, { Component, createRef } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

class RefEditor extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
    this.quillRef = null;
    this.reactQuillRef = createRef();
  }

  componentDidMount() {
    this.attachQuillRefs();
  }

  componentDidUpdate() {
    this.attachQuillRefs();
  }

  attachQuillRefs = () => {
    if (typeof this.reactQuillRef.current?.getEditor !== 'function') return;
    this.quillRef = this.reactQuillRef.current.getEditor();
  };

  insertText = () => {
    if (!this.quillRef) return;
    const range = this.quillRef.getSelection();
    const position = range ? range.index : 0;
    this.quillRef.insertText(position, 'Hello, World! ');
  };

  focus = () => {
    if (this.reactQuillRef.current) {
      this.reactQuillRef.current.focus();
    }
  };

  blur = () => {
    if (this.reactQuillRef.current) {
      this.reactQuillRef.current.blur();
    }
  };

  render() {
    return (
      <div>
        <ReactQuill
          ref={this.reactQuillRef}
          value={this.state.text}
          onChange={(value) => this.setState({ text: value })}
          theme="snow"
        />
        <button onClick={this.insertText}>Insert Text</button>
        <button onClick={this.focus}>Focus</button>
        <button onClick={this.blur}>Blur</button>
      </div>
    );
  }
}

export default RefEditor;
```

--------------------------------

### React-Quill Custom HTML Toolbar with JSX

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This snippet shows how to create a custom toolbar for React-Quill using JSX. It includes defining custom buttons, event handlers, and integrating them with the Quill toolbar module. Dependencies include React and React-Quill. It handles inserting text and applying basic formatting.

```jsx
/*
 * Custom "star" icon for the toolbar using an Octicon
 * https://octicons.github.io
 */
const CustomButton = () => <span className="octicon octicon-star" />;

/*
 * Event handler to be attached using Quill toolbar module
 * http://quilljs.com/docs/modules/toolbar/
 */
function insertStar() {
  const cursorPosition = this.quill.getSelection().index;
  this.quill.insertText(cursorPosition, '★');
  this.quill.setSelection(cursorPosition + 1);
}

/*
 * Custom toolbar component including insertStar button and dropdowns
 */
const CustomToolbar = () => (
  <div id="toolbar">
    <select
      className="ql-header"
      defaultValue={''}
      onChange={(e) => e.persist()}
    >
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-insertStar">
      <CustomButton />
    </button>
  </div>
);

/*
 * Editor component with custom toolbar and content containers
 */
class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorHtml: '' };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(html) {
    this.setState({ editorHtml: html });
  }

  render() {
    return (
      <div className="text-editor">
        <CustomToolbar />
        <ReactQuill
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          modules={Editor.modules}
        />
      </div>
    );
  }
}

/*
 * Quill modules to attach to editor
 * See http://quilljs.com/docs/modules/ for complete options
 */
Editor.modules = {
  toolbar: {
    container: '#toolbar',
    handlers: {
      insertStar: insertStar,
    },
  },
};

/*
 * Quill editor formats
 * See http://quilljs.com/docs/formats/
 */
Editor.formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
  'color',
];

/*
 * PropType validation
 */
Editor.propTypes = {
  placeholder: React.PropTypes.string,
};

/*
 * Render component on page
 */
ReactDOM.render(
  <Editor placeholder={'Write something or insert a star ★'} />,
  document.querySelector('.app')
);

```

--------------------------------

### Apply Snow Theme to React-Quill

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This snippet demonstrates how to apply the 'snow' theme to the ReactQuill component using the theme prop. It also shows how to import the corresponding CSS stylesheet for the theme to be properly rendered. Ensure the stylesheet is imported correctly for the theme to be visible.

```jsx
<ReactQuill theme="snow" .../>
```

```javascript
import 'react-quill-new/dist/quill.snow.css';
```

--------------------------------

### Webpack Configuration for ES Modules in React-Quill v3

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This webpack configuration demonstrates how to use babel-loader to transpile React-Quill v3, which uses native ES modules. It ensures compatibility by excluding node_modules, except for 'react-quill-new', from the default transpilation.

```javascript
module.exports = {
  entry: {
    // your entry points
  },
  module: {
    rules: [
      // ... other loaders
      {
        test: /\.(js|jsx|ts|tsx|cjs)$/,
        exclude: /node_modules\/(?!(react-quill-new)\/).*/,
        loader: 'babel-loader',
        options: {
          plugins: [
            /* your plugins */
          ],
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
      },
      // ... other loaders
    ],
  },
};
```

--------------------------------

### React Custom Code Editor with Whitespace Preservation using ReactQuill

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

Creates a code editor experience by enabling `preserveWhitespace={true}` in ReactQuill. This ensures that spaces and newlines are maintained, making it suitable for displaying or editing code snippets or preformatted text.

```jsx
import React, { useState } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

function CodeEditor() {
  const [code, setCode] = useState('function hello() {
  return "world";
}');

  return (
    <ReactQuill
      value={code}
      onChange={setCode}
      preserveWhitespace={true}
      theme="snow"
      modules={{
        toolbar: [
          ['bold', 'italic'],
          ['code-block']
        ]
      }}
    />
  );
}

export default CodeEditor;
```

--------------------------------

### Register Custom Formats with Parchment in React

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

This snippet shows how to extend Quill's formatting capabilities by registering custom format blots using the Parchment library. It defines a custom 'bold' blot and integrates it into a React component, allowing the new format to be used within the editor. Dependencies include 'react-quill-new' and its CSS.

```jsx
import React from 'react';
import ReactQuill, { Quill } from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

let Inline = Quill.import('blots/inline');

class BoldBlot extends Inline {
  static blotName = 'bold';
  static tagName = 'strong';
}

Quill.register('formats/bold', BoldBlot);

class CustomFormatEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
    this.formats = ['bold', 'italic', 'underline'];
  }

  handleChange = (value) => {
    this.setState({ text: value });
  };

  render() {
    return (
      <ReactQuill
        value={this.state.text}
        onChange={this.handleChange}
        formats={this.formats}
        theme="snow"
      />
    );
  }
}

export default CustomFormatEditor;
```

--------------------------------

### React-Quill Custom Editing Area

Source: https://github.com/vaguelyserious/react-quill/blob/master/README.md

This snippet illustrates how to provide a custom HTML element as the editing area for React-Quill, instead of letting it create a default div. It's important to note that `<textarea>` elements are not supported by Quill. This customization is useful for integrating Quill into specific DOM structures. Dependencies include React and React-Quill.

```jsx
class MyComponent extends React.Component {

  render() {
    return (
      <ReactQuill>
        <div className="my-editing-area"/>
      </ReactQuill>
    );
  }

});

```

--------------------------------

### React Uncontrolled Editor with Default Value using ReactQuill

Source: https://context7.com/vaguelyserious/react-quill/llms.txt

Shows an uncontrolled ReactQuill component where state is managed internally by Quill using `defaultValue`. This is useful when React doesn't need to synchronize with the editor's content, potentially improving performance for large amounts of text.

```jsx
import React from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

function UncontrolledEditor() {
  const handleChange = (content, delta, source, editor) => {
    console.log('Content changed:', editor.getText());
  };

  return (
    <ReactQuill
      defaultValue="<p>This is the initial content</p>"
      onChange={handleChange}
      theme="snow"
    />
  );
}

export default UncontrolledEditor;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.