React Quill

https://github.com/zenoamaro/react-quill
Admin
A Quill component for React.
Tokens:30,007
Snippets:225
Trust Score:9.3
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### makeUnprivilegedEditor() usage example

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

JSX example showing how to create an unprivileged editor and use its read-only methods.

```jsx
const unprivileged = quillRef.current.makeUnprivilegedEditor(quillRef.current.getEditor());
console.log(unprivileged.getText(), unprivileged.getLength(), unprivileged.getHTML());
const delta = unprivileged.getContents();
const bounds = unprivileged.getBounds(0, 5);
```

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

### focus() usage example with button

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

JSX example showing how to call focus() via a ref when a button is clicked. The editor must be mounted before calling focus().

```jsx
function EditorWithButton() {
  const quillRef = React.useRef();
  return (
    <div>
      <ReactQuill ref={quillRef} />
      <button onClick={() => quillRef.current.focus()}>Focus editor</button>
    </div>
  );
}
```

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

### Install react-quill with npm

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

Install react-quill with npm. Requires react and react-dom, and a way to load styles such as style-loader.

```sh
npm install react-quill --save
```

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

### blur() usage example

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

JSX example showing how to call blur() on the editor via a ref. After blur, selection events report null.

```jsx
function handleBlur() {
  quillRef.current.blur();
  // The editor loses focus; subsequent selection events report null.
}
```

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

### Wiring all ReactQuill callbacks

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

Example wiring all callbacks: onChange, onChangeSelection, onFocus, onBlur, and onKeyDown. Shows how to access the HTML value, delta, source, and editor contents.

```jsx
<ReactQuill
  onChange={(value, delta, source, editor) => {
    console.log('html:', value, 'delta:', delta, 'source:', source);
    console.log('full doc:', editor.getContents().ops);
  }}
  onChangeSelection={(range, source, editor) =>
    console.log(range ? `${range.index}+${range.length}` : 'unfocused')}
  onFocus={(range, source) => console.log('focused', range)}
  onBlur={(prevRange, source) => console.log('blurred from', prevRange)}
  onKeyDown={(event) => { if (event.key === 'Enter') doThing(); }}
/>
```

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

### getEditor() usage - reading contents

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

JSX example showing how to use getEditor() to read text and contents from the editor.

```jsx
const quill = quillRef.current.getEditor();
const text = quill.getText(0, 10);
const delta = quill.getContents();
```

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

### Load snow theme stylesheet from CDN

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

Load the snow theme stylesheet from a CDN for the browser bundle setup.

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css"
/>
```

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

### getEditor() usage - guarding before mount

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

JSX example showing how to safely call getEditor() only after the editor is mounted by checking the instance field.

```jsx
function readLength() {
  const editor = quillRef.current?.editor; // instance field, undefined until mounted
  return editor ? quillRef.current.getEditor().getLength() : 0;
}
```

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

### Import Quill and register a custom format

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill.md

Shows how to import the Quill class from react-quill and register a custom format. The example defines a BoldBlot by extending the inline blot and registers it under 'formats/bold'.

```jsx
import ReactQuill, { Quill } from 'react-quill'; // ES6
// or, CommonJS:
// const ReactQuill = require('react-quill');
// const { Quill } = ReactQuill;

const Inline = Quill.import('blots/inline');
class BoldBlot extends Inline {}
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';
Quill.register('formats/bold', BoldBlot);
```

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

### ReactQuill constructor signature

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill.md

Constructor signature for the ReactQuill component. It selects the starting editor value: if controlled ('value' in props), this.value = props.value; otherwise this.value = props.defaultValue; falsy results fall back to the empty string.

```ts
constructor(props: ReactQuillProps)
```

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

### Build the library with npm build

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

Builds the library, types, and bundles. The comment indicates that the watch mode is an alternative.

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

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

### Import ReactQuill

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill.md

Shows how to import the ReactQuill component using different module systems.

```APIDOC
## Import ReactQuill

### Description
Import the ReactQuill component for use in your application.

### Import Paths
- **ES6 / TypeScript**: `import ReactQuill from 'react-quill';`
- **CommonJS**: `const ReactQuill = require('react-quill');`
- **Browser bundle (UMD global)**: `const ReactQuill = globalThis.ReactQuill;` (after including `react-quill.js` script)

### Example
```jsx
import ReactQuill from 'react-quill';
```
```

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

### Run the automated test suite with npm test

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

Runs the automated test suite for the project.

```sh
npm test
```

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

### ReactQuill Instance Methods

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

Methods available on a ReactQuill component instance via a ref.

```APIDOC
## focus()

### Description
Focuses the editor.

### Method
focus

### Parameters
None

### Response
No return value.
```

```APIDOC
## blur()

### Description
Removes focus from the editor.

### Method
blur

### Parameters
None

### Response
No return value.
```

```APIDOC
## getEditor()

### Description
Returns the Quill instance that backs the editor. While you can freely use this to access methods such as `getText()`, please avoid from imperatively manipulating the instance, to avoid getting ReactQuill and Quill out-of-sync. A much-safer unprivileged editor is available as replacement.

### Method
getEditor

### Parameters
None

### Response
Returns the Quill instance.
```

```APIDOC
## makeUnprivilegedEditor(editor)

### Description
Creates an unprivileged editor. Pass this method a reference to the Quill instance from `getEditor`. Normally you do not need to use this method since the editor exposed to event handlers is already unprivileged.

### Method
makeUnprivilegedEditor

### Parameters
- **editor** (Quill instance) - Required - The Quill instance from `getEditor`.

### Response
Returns an unprivileged editor proxy.
```

```APIDOC
## getLength()

### Description
Returns the length of the editor contents, in characters, not including any HTML tag.

### Method
getLength

### Parameters
None

### Response
Returns the length of the editor contents.
```

```APIDOC
## getText()

### Description
Returns the string contents of the editor, not including any HTML tag.

### Method
getText

### Parameters
None

### Response
Returns the string contents of the editor.
```

```APIDOC
## getHTML()

### Description
Returns the full HTML contents of the editor.

### Method
getHTML

### Parameters
None

### Response
Returns the full HTML contents of the editor.
```

```APIDOC
## getContents()

### Description
Returns a Quill Delta of the complete document.

### Method
getContents

### Parameters
None

### Response
Returns a Quill Delta of the complete document.
```

```APIDOC
## getSelection()

### Description
Returns the current selection range, or `null` if the editor is unfocused.

### Method
getSelection

### Parameters
None

### Response
Returns the current selection range, or `null` if the editor is unfocused.
```

```APIDOC
## getBounds()

### Description
Returns the pixel position, relative to the editor container, and dimensions, of a selection, at a given location.

### Method
getBounds

### Parameters
None

### Response
Returns the pixel position and dimensions of a selection.
```

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

### Constructor

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill.md

Initializes a new ReactQuill component instance with the provided props, selecting the initial editor value based on controlled or uncontrolled usage.

```APIDOC
## Constructor

### Description
Initializes a new ReactQuill component instance with the provided props, selecting the initial editor value based on controlled or uncontrolled usage.

### Method
Constructor

### Signature
```ts
constructor(props: ReactQuillProps)
```

### Parameters
#### props (ReactQuillProps) - Required
- The full set of props, e.g. `value`, `defaultValue`, `modules`, `formats`, `theme`, `readOnly`, handlers, …

### Behavior
- If controlled (`'value' in props`), `this.value = props.value`.
- Otherwise `this.value = props.defaultValue`.
- Falsy values fall back to empty string: `this.value = value ?? '';`

### Return Type
- An initialized `ReactQuill` component instance (constructor returns void).
```

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

### ReactQuill

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/exports.md

Documentation for the ReactQuill component, its static properties, type exports, and public instance methods.

```APIDOC
## ReactQuill

### Description
ReactQuill is the default export of the react-quill package. It is a React component that wraps the Quill rich text editor. It provides a controlled component interface for integrating Quill into React applications.

### Import
```js
import ReactQuill from 'react-quill';
```

### Static Properties
- **Quill** (static class) - The upstream `quill` `Quill` class, accessible as `ReactQuill.Quill`.
- **displayName** (static string) - `'React Quill'`.
- **defaultProps** (static object) - `{ theme: 'snow', modules: {}, readOnly: false }`.

### Type Exports
- **Value** (type alias) - `string | DeltaStatic`
- **Range** (type alias) - `RangeStatic | null`
- **QuillOptions** (interface) - Extends `QuillOptionsStatic`
- **ReactQuillProps** (interface) - Component props interface
- **UnprivilegedEditor** (interface) - Editor interface with limited access

### Instance Methods (public, not importable)
The following methods are public on the class and can be called on an instance, but are not importable from the package:
- `getEditor()` - Returns the underlying Quill editor instance.
- `getEditorContents()` - Returns the current editor contents.
- `getEditorSelection()` - Returns the current editor selection.
- `focus()` - Focuses the editor.
- `blur()` - Blurs the editor.
- `makeUnprivilegedEditor()` - Creates an unprivileged editor wrapper.
- `isControlled()` - Returns whether the component is controlled.
- `validateProps()` - Validates component props.
- `shouldComponentUpdate()` - Determines if the component should update.
- `shouldComponentRegenerate()` - Determines if the editor should be regenerated.
- `componentDidMount()`, `componentWillUnmount()`, `componentDidUpdate()` - Lifecycle methods.
- `render()`, `renderEditingArea()` - Rendering methods.
- `instantiateEditor()`, `destroyEditor()`, `createEditor()`, `hookEditor()`, `unhookEditor()` - Editor lifecycle management.
- `getEditorConfig()` - Returns the editor configuration.
- `getEditingArea()` - Returns the editing area DOM element.
- `isDelta()`, `isEqualValue()` - Utility methods.
- `setEditorContents()`, `setEditorSelection()`, `setEditorTabIndex()`, `setEditorReadOnly()` - Setter methods.
- `onEditorChange()`, `onEditorChangeText()`, `onEditorChangeSelection()` - Event handlers.

### Instance Fields
- `dirtyProps`, `cleanProps`, `state`, `editor`, `editingArea`, `value`, `selection`, `lastDeltaChangeSet`, `regenerationSnapshot`, `unprivilegedEditor`
```

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

### Import ReactQuill and Quill (ES6 and CommonJS)

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

Shows how to import ReactQuill and the Quill namespace using ES6 modules or CommonJS. The Quill namespace is used to call register.

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

// CommonJS
const ReactQuill = require('react-quill');
const { Quill } = ReactQuill;
```

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

### Activate snow theme with theme prop

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

Activate the snow theme by passing the theme name to the theme prop. Pass a falsy value (e.g., null) to use the core theme.

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

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

### createEditor method implementation

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

Creates a new Quill editor instance on the given DOM element with the provided configuration. Sets the tab index when config.tabIndex is provided, then hooks the editor. Throws if the upstream Quill constructor throws, such as for an unsupported element.

```TypeScript
createEditor(element: Element, config: QuillOptions) {
  const editor = new Quill(element, config);
  if (config.tabIndex != null) {
    this.setEditorTabIndex(editor, config.tabIndex);
  }
  this.hookEditor(editor);
  return editor;
}
```

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

### focus(): void

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

Focuses the Quill editor. If the editor has not been instantiated, this is a no-op.

```APIDOC
## focus(): void

### Description
Focuses the Quill editor. If the editor has not been instantiated, this is a no-op.

### Method
focus

### Signature
```ts
focus(): void
```

### Parameters
No parameters.

### Return Type
`void`

### Throws
Never.

### Example
```jsx
function EditorWithButton() {
  const quillRef = React.useRef();
  return (
    <div>
      <ReactQuill ref={quillRef} />
      <button onClick={() => quillRef.current.focus()}>Focus editor</button>
    </div>
  );
}
```
```

```APIDOC
## blur(): void

### Description
Removes focus from the Quill editor. Resets the tracked selection to null before calling `this.editor.blur()`, so listeners observe the blur. If the editor is not instantiated, it is a no-op.

### Method
blur

### Signature
```ts
blur(): void
```

### Parameters
None.

### Return Type
`void`

### Throws
Never.

### Example
```jsx
function handleBlur() {
  quillRef.current.blur();
  // The editor loses focus; subsequent selection events report null.
}
```
```

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

### ReactQuill Class

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill.md

Describes the ReactQuill class signature, including static and instance properties.

```APIDOC
## ReactQuill Class

### Description
The ReactQuill component class. It extends React.Component with ReactQuillProps and ReactQuillState.

### Class Signature
```ts
class ReactQuill extends React.Component<ReactQuillProps, ReactQuillState> {
  static displayName = 'React Quill';
  static Quill = Quill;
  static defaultProps = {
    theme: 'snow',
    modules: {},
    readOnly: false,
  };

  dirtyProps: (keyof ReactQuillProps)[] = [
    'modules', 'formats', 'bounds', 'theme', 'children',
  ];
  cleanProps: (keyof ReactQuillProps)[] = [
    'id', 'className', 'style', 'placeholder', 'tabIndex',
    'onChange', 'onChangeSelection', 'onFocus', 'onBlur',
    'onKeyPress', 'onKeyDown', 'onKeyUp',
  ];

  state: ReactQuillState;
  editor?: Quill;
  editingArea?: React.ReactInstance | null;
  value: Value;
  selection: Range;
  lastDeltaChangeSet?: DeltaStatic;
  regenerationSnapshot?: { delta: DeltaStatic, selection: Range };
  unprivilegedEditor?: UnprivilegedEditor;
}
```

### Static Properties
- **displayName** (string) - The display name of the component.
- **Quill** (Quill) - The Quill instance.
- **defaultProps** (object) - Default props: `theme: 'snow'`, `modules: {}`, `readOnly: false`.

### Instance Properties
- **dirtyProps** (array) - Props that trigger a re-render when changed.
- **cleanProps** (array) - Props that are passed to the underlying DOM element.
- **state** (ReactQuillState) - The component state.
- **editor** (Quill) - The Quill editor instance.
- **editingArea** (React.ReactInstance) - The editing area DOM element.
- **value** (Value) - The current value.
- **selection** (Range) - The current selection range.
- **lastDeltaChangeSet** (DeltaStatic) - The last delta change set.
- **regenerationSnapshot** (object) - Snapshot for regeneration.
- **unprivilegedEditor** (UnprivilegedEditor) - An unprivileged editor instance.
```

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

### Import ReactQuill (ES6, CommonJS, UMD)

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill.md

Shows the three ways to import the ReactQuill component: ES6/TypeScript import, CommonJS require, and the browser UMD global. Use the appropriate one for your module system.

```jsx
// ES6 / TypeScript
import ReactQuill from 'react-quill';

// CommonJS
const ReactQuill = require('react-quill');

// Browser bundle (UMD global)
// <script src="react-quill.js"></script>
const ReactQuill = globalThis.ReactQuill;
```

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

### componentDidMount() lifecycle method

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

Called after the component mounts. Instantiates the Quill editor on the editing area and then writes the current `value` into it, converting HTML strings via the clipboard.

```ts
componentDidMount() {
  this.instantiateEditor();
  this.setEditorContents(this.editor!, this.getEditorContents());
}
```

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

### Create custom HTML toolbar with custom insertStar handler

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

Builds a fully custom HTML/JSX toolbar with a custom star button that inserts a '★' character at the cursor. The toolbar is attached via the Quill toolbar module using a container selector and a custom handler. Includes dropdowns for header and color, and defines the editor's formats and propTypes.

```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')
);
```

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

### ReactQuill Component Props

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

Documentation for the ReactQuill component props, including types, descriptions, and usage notes.

```APIDOC
## ReactQuill Component Props

### Description
This section documents the props that can be passed to the ReactQuill component to configure its behavior and appearance.

### Props

#### `id`
- **Type**: string
- **Required**: No
- **Description**: ID to be applied to the DOM element.

#### `className`
- **Type**: string
- **Required**: No
- **Description**: Classes to be applied to the DOM element.

#### `value`
- **Type**: string | Delta | object
- **Required**: No
- **Description**: Value for the editor as a controlled component. Can be a string containing HTML, a Quill Delta instance, or a plain object representing a Delta. Note that due to limitations in Quill, this is actually a semi-controlled mode, meaning that the edit is not prevented, but changing `value` will still replace the contents. Also note that passing a Quill Delta here, and then an HTML string, or vice-versa, will always trigger a change, regardless of whether they represent the same document. Do not pass the `delta` object from the `onChange` event as `value`, as it will cause a loop.

#### `defaultValue`
- **Type**: string | Delta | object
- **Required**: No
- **Description**: Initial value for the editor as an uncontrolled component. Can be a string containing HTML, a Quill Delta, or a plain object representing a Delta.

#### `readOnly`
- **Type**: boolean
- **Required**: No
- **Description**: If true, the editor won't allow changing its contents. Wraps the Quill `disable` API.

#### `placeholder`
- **Type**: string
- **Required**: No
- **Description**: The default value for the empty editor. Note: The Quill API does not support changing this value dynamically. Use refs and data-attributes instead.

#### `modules`
- **Type**: object
- **Required**: No
- **Description**: An object specifying which modules are enabled, and their configuration. The editor toolbar is a commonly customized module.

#### `formats`
- **Type**: array
- **Required**: No
- **Description**: An array of formats to be enabled during editing. All implemented formats are enabled by default. Custom formats should not be included in the array as of version 1.0.0. Instead they should be created through Parchment and registered with the module's Quill export.

#### `style`
- **Type**: object
- **Required**: No
- **Description**: An object with custom CSS rules to apply on the editor's container. Rules should be in React's "camelCased" naming style.

#### `theme`
- **Type**: string
- **Required**: No
- **Description**: The name of the theme to apply to the editor. Defaults to `snow`, Quill's standard theme. Pass `null` to use the minimal core theme.

#### `tabIndex`
- **Type**: number
- **Required**: No
- **Description**: The order in which the editor becomes focused, among other controls in the page, during keyboard navigation.

#### `bounds`
- **Type**: string | Element
- **Required**: No
- **Description**: Selector or DOM element used by Quill to constrain position of popups. Defaults to `document.body`.

#### `children`
- **Type**: ReactElement
- **Required**: No
- **Description**: A single React element that will be used as the editing area for Quill in place of the default, which is a `<div>`. Note that you cannot use a `<textarea>`, as it is not a supported target. Also note that updating children is costly, as it will cause the Quill editor to be recreated. Set the `value` prop if you want to control the html contents of the editor.

#### `onChange(content, delta, source, editor)`
- **Type**: function
- **Required**: No
- **Description**: Called back with the new contents of the editor after change. It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as `getHTML()`. Do not use this `delta` object as `value`, as it will cause a loop. Use `editor.getContents()` instead.

#### `onChangeSelection(range, source, editor)`
- **Type**: function
- **Required**: No
- **Description**: Called back with the new selected range, or null when unfocused. It will be passed the selection range, the source of the change, and finally a read-only proxy to editor accessors such as `getBounds()`.

#### `onFocus(range, source, editor)`
- **Type**: function
- **Required**: No
- **Description**: Called when the editor becomes focused. It will receive the new selection range.

#### `onBlur(previousRange, source, editor)`
- **Type**: function
- **Required**: No
- **Description**: Called when the editor loses focus. It will receive the selection range it had right before losing focus.

#### `onKeyPress(event)`
- **Type**: function
- **Required**: No
- **Description**: Called after a key has been pressed and released. Note that, like its native counterpart, this won't be called for special keys such as shift or enter. If you need those, hook onto `onKeyDown` or `onKeyUp`.

#### `onKeyDown(event)`
- **Type**: function
- **Required**: No
- **Description**: Called after a key has been pressed, but before it is released. Note that, due to how Quill works, it's possible that you won't receive events for keys such as enter, backspace or delete. If that's the case, try hooking onto `onKeyUp` instead.

#### `onKeyUp(event)`
- **Type**: function
- **Required**: No
- **Description**: Called after a key has been released.

#### `preserveWhitespace`
- **Type**: boolean
- **Required**: No
- **Description**: If true, a `pre` tag is used for the editor area instead of the default `div` tag. This prevents Quill from collapsing continuous whitespaces on paste.
```

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

### Sources

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/types.md

Documentation for the Sources type from @types/quill, used in the ReactQuill API.

```APIDOC
## Sources

### Description
Represents the source of a change in the editor.

### Type
Union type

### Values
- **"api"** - Change caused by the Quill API (programmatic)
- **"user"** - Change caused by user interaction
- **"silent"** - Change caused internally, broadcast without events

### Usage
Passed to: `onChange(value, delta, source, editor)`, `onChangeSelection`, `onFocus`, `onBlur`, and accepted by Quill mutator methods.
```

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

### Quill class (static ReactQuill.Quill)

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/types.md

Documentation for the Quill class re-exported as ReactQuill.Quill.

```APIDOC
## Quill class (static ReactQuill.Quill)

### Description
Re-exported as `ReactQuill.Quill` for `Quill.register(path, def, suppressWarning?)`, `Quill.import(path)`, `Quill.find(domNode, bubble?)` and `Quill.debug(level)` (see `@types/quill` for the full method list). Also the runtime type of the `editor` instance handled by the component (`editor?: Quill`, `getEditor(): Quill`).

### Type
Class

### Methods
- **register(path, def, suppressWarning?)** - Register a module or format.
- **import(path)** - Import a Quill module or format.
- **find(domNode, bubble?)** - Find a Quill instance from a DOM node.
- **debug(level)** - Set debug level.
```

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

### Import ReactQuill and Quill (ES6 and CommonJS)

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

Import ReactQuill and the Quill object using either ES6 import or CommonJS require. The Quill object is needed to register custom Parchment formats.

```js
import ReactQuill, { Quill } from 'react-quill'; // ES6
const ReactQuill = require('react-quill'); // CommonJS
```

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

### Browser bundle script tags

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

Include React, ReactDOM, ReactQuill, and Babel standalone from unpkg for the browser bundle. The script with type="text/babel" loads your own code.

```html
<script
  src="https://unpkg.com/react@16/umd/react.development.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
  crossorigin
></script>
<script src="https://unpkg.com/react-quill@1.3.3/dist/react-quill.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="/my-scripts.js"></script>
```

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

### Basic ReactQuill component with webpack or create-react-app

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

Basic usage with webpack or create-react-app. Imports the snow theme stylesheet and renders a controlled ReactQuill editor with a value state and onChange handler.

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

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

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

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

### getEditorConfig() method

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

Maps props to the Quill options object passed to `new Quill(element, config)`. Includes bounds, formats, modules, placeholder, readOnly, scrollingContainer, tabIndex, and theme.

```ts
getEditorConfig(): QuillOptions {
  return {
    bounds: this.props.bounds,
    formats: this.props.formats,
    modules: this.props.modules,
    placeholder: this.props.placeholder,
    readOnly: this.props.readOnly,
    scrollingContainer: this.props.scrollingContainer,
    tabIndex: this.props.tabIndex,
    theme: this.props.theme,
  };
}
```

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

### StringMap

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/types.md

Documentation for the StringMap interface from @types/quill, used in the ReactQuill API.

```APIDOC
## StringMap

### Description
A heterogeneous string-keyed map used for `modules`, delta operation `attributes`, and format maps.

### Type
Interface

### Fields
- **[key: string]** (`any`) - Required - Arbitrary key-value pairs.

### Usage
`modules` in `ReactQuillProps`/`QuillOptions` uses it.
```

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

### focus() method signature

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/react-quill-methods.md

TypeScript signature for the focus() method. It focuses the Quill editor, but is a no-op if the editor is not instantiated.

```typescript
// src/index.tsx:559
focus(): void
```

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

### BoundsStatic

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/types.md

Documentation for the BoundsStatic interface from @types/quill, used in the ReactQuill API.

```APIDOC
## BoundsStatic

### Description
Represents pixel geometry of a range relative to the editor container.

### Type
Interface

### Fields
- **bottom** (`number`) - Required - Pixel geometry of the range relative to the editor container
- **left** (`number`) - Required - Pixel geometry of the range relative to the editor container
- **right** (`number`) - Required - Pixel geometry of the range relative to the editor container
- **top** (`number`) - Required - Pixel geometry of the range relative to the editor container
- **height** (`number`) - Required - Pixel geometry of the range relative to the editor container
- **width** (`number`) - Required - Pixel geometry of the range relative to the editor container

### Usage
Returned by: `UnprivilegedEditor.getBounds(index, length?)`.
```

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

### Create unprivileged editor with makeUnprivilegedEditor

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

Creates an unprivileged editor proxy from the Quill instance obtained via getEditor. Use this when you need a safer API surface that avoids destructive methods. The unprivileged editor exposes methods like getText.

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

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

### Configure default Quill toolbar with format arrays

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

Configures the default Quill toolbar using an array of format names in the toolbar module. The toolbar array defines groups of buttons (header, bold, italic, etc.) and the formats array lists the allowed formats. Use this with the snow theme to render the standard toolbar.

```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;
```

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

### Access Quill instance with getEditor and insert text

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

Shows how to access the Quill instance via a ref to the ReactQuill component and use it to insert text at the current selection. Attach refs in componentDidMount and componentDidUpdate, and guard against getEditor not being available. The button triggers insertText, which inserts 'Hello, World! ' at the selection index or position 0.

```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>
    );
  }
}
```

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

### Browser UMD bundle script tags

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/api-reference/exports.md

HTML script tags for loading the UMD bundle, with react and react-dom as externals that must be loaded first. The global ReactQuill is then available, with ReactQuill.Quill as the Quill class.

```html
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="react-quill.js"></script>
<script>
  // global ReactQuill is available; ReactQuill.Quill is the Quill class.
</script>
```

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

### DeltaStatic

Source: https://github.com/zenoamaro/react-quill/blob/master/_autodocs/types.md

Documentation for the DeltaStatic interface from @types/quill, used in the ReactQuill API.

```APIDOC
## DeltaStatic

### Description
Represents a Quill delta document, used for editor contents and change events.

### Type
Interface

### Fields
- **ops** (`DeltaOperation[]`) - Optional - Operations array; a plain `{ ops: [...] }` object is a valid look-alike accepted by `setContents`.

### Methods
- **retain(length: number, attributes?: StringMap): DeltaStatic**
- **delete(length: number): DeltaStatic**
- **filter(predicate: (op: DeltaOperation) => boolean): DeltaOperation[]**
- **forEach(predicate: (op: DeltaOperation) => void): void**
- **insert(text: any, attributes?: StringMap): DeltaStatic**
- **map<T>(predicate: (op: DeltaOperation) => T): T[]**
- **partition(predicate: (op: DeltaOperation) => boolean): [DeltaOperation[], DeltaOperation[]]**
- **reduce<T>(predicate: (acc: T, curr: DeltaOperation, idx: number, arr: DeltaOperation[]) => T, initial: T): T**
- **chop(): DeltaStatic**
- **length(): number**
- **slice(start?: number, end?: number): DeltaStatic**
- **compose(other: DeltaStatic): DeltaStatic**
- **concat(other: DeltaStatic): DeltaStatic**
- **diff(other: DeltaStatic, index?: number): DeltaStatic**
- **eachLine(predicate: (line: DeltaStatic, attributes: StringMap, idx: number) => any, newline?: string): DeltaStatic**
- **transform(index: number, priority?: boolean): number**
- **transform(other: DeltaStatic, priority: boolean): DeltaStatic**
- **transformPosition(index: number, priority?: boolean): number**

### Usage
Accepted/returned by: `Value`, `UnprivilegedEditor.getContents`, `onChange`/`onChangeSelection` handlers (change delta), `setEditorContents`, `isDelta`/`isEqualValue`, `regenerationSnapshot.delta`.
```
Tokens:
Raw