diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..7c451ff7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,47 @@ +Thanks for filing an issue! + +If at all possible, please provide a Codesandbox or Codepen to demonstrate the problem you're having with React Quill. Here's a [template] to get you started. + +⚠️ Make sure that your bug hasn't already been fixed by ReactQuill `v2.0.0-beta.2`. See the homepage for instructions on how to upgrade. + +[template]: +https://codesandbox.io/s/react-quill-template-u9c9c + + +### Ticket due diligence + +- [ ] I have verified that the issue persists under ReactQuill `v2.0.0-beta.2` +- [ ] I can't use the beta version for other reasons + + +### ReactQuill version + +- [ ] master +- [ ] v2.0.0-beta.2 +- [ ] v2.0.0-beta.1 +- [ ] 1.3.5 +- [ ] 1.3.4 or older +- [ ] Other (fork) + + +### FAQ + +**Is this a bug in Quill or ReactQuill?** + +ReactQuill is just a ~thin~ wrapper on top of the Quill editor. Often, what looks like a bug in ReactQuill, is actually a bug in the Quill editor itself. Before opening a ticket, please check the [Quill documentation], and the [issues page], and see if that answers your question first. + +[Quill documentation]: +https://quilljs.com/docs + +[issues page]: +https://github.com/quilljs/quill/issues + +**How do I access the wrapped Quill instance?** + +See the [instance methods] and [API] documentation. + +[instance methods]: +https://github.com/zenoamaro/react-quill#methods + +[API]: +https://github.com/zenoamaro/react-quill#api-reference diff --git a/.gitignore b/.gitignore index c2c1f4b8..978bb651 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,24 @@ +# Misc *~ ~* *.tmp *.orig *.bak *.log +*.DS_STORE /tmp -/node_modules \ No newline at end of file + +# Dependencies +/node_modules + +# Compiled files +/dist +/lib + +# Packaging artifacts +/react-quill-*.tgz +/package + +# Test artifacts +.cypress/screenshots +.cypress/videos diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index c7374cab..00000000 --- a/.jshintrc +++ /dev/null @@ -1,28 +0,0 @@ -{ - "browser": true, - "node": true, - "bitwise": true, - "camelcase": true, - "curly": true, - "eqeqeq": true, - "es3": true, - "freeze": true, - "immed": true, - "latedef": false, - "noarg": true, - "newcap": false, - "noempty": true, - "nonbsp": true, - "nonew": true, - "quotmark": "single", - "undef": true, - "unused": false, - "strict": true, - "maxdepth": 2, - "maxparams": 3, - "maxcomplexity": 5, - "maxlen": 80, - "eqnull": true, - "lastsemic": true, - "laxbreak": true -} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..c1a6f667 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/.travis.yml b/.travis.yml index 365ab705..0947ad80 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,9 +1,19 @@ language: node_js - node_js: - - "0.11" - - "0.10" - - "0.8" - -before_install: - - npm install -g npm \ No newline at end of file + - 10 +addons: + apt: + packages: + # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves + - libgconf-2-4 +cache: + # Caches $HOME/.npm when npm ci is default script command + # Caches node_modules in all other cases + npm: true + directories: + # we also need to cache folder with Cypress binary + - ~/.cache +install: + - npm install +script: + - npm run test diff --git a/CHANGELOG.md b/CHANGELOG.md index bdebbefc..68d29ca0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,60 +1,193 @@ -Changelog -========= +# Changelog + +## v2.0.0 + +- Fully ported to TypeScript (#549) +- Fully React16 compliant (#549) +- Removed Mixin (#549) +- Removed Toolbar (#549) +- Support for React 18 (#793, #822) + +## v1.3.4 + +- Bump Quill to 1.3.7 to close a security vulnerability (#575) + +## v1.3.3 + +- Pin Quill types version (#420 @daggmano) + +## v1.3.2 + +- Add preserveWhitespace prop (#407 @royshouvik) + +## v1.3.1 + +- Add back default export (#374, #384 one19) + +## v1.3.0 + +- Add scrollingContainer prop +- Fix Typescript exports +- Fix tabindex prop + +## v1.2.6 + +Replaced React.DOM with react-dom-factories (#319 thienanle) + +## v1.2.5 + +- Fix issue with unnecessary editor focus on mount (#321 jetzhou) +- Switch to Quill's clipboard.convert from the paste API that now grabs focus automatically + +## v1.2.4 + +- Only restore focus if editor had focus (#312 @MattKunze) + +## v1.2.2 + +- Add Typescript definitions (#277 @Charrondev) +- Fixes for TS definitions (#294 @jdhungtington, #296 @ajaska) + +## v1.1.0 + +- Add support for React 16 and onwards by depending on `prop-types` and `create-react-class` (#181 @mikecousins) +- Allow setting contents with a Quill Delta via the `value` prop (#101) +- Add onFocus/onBlur props (#110) +- Add tabindex support (#232) + +## v1.0.0 + +This release supports Quill v1.0.0+. ⚠️ There are many breaking changes, so refer to the documentation for information on how to migrate your application. + +- Updated to support Quill v1.0.0+ (@clemmy, @alexkrolick) +- Bundling Quill with ReactQuill (@clemmy) +- Deprecated `toolbar` property and component +- Deprecated the `styles` property +- Deprecated custom formats via the `formats` property +- Deprecated the `pollInterval` property +- Rerendering on `style` property change (@lavrton) +- Improved docs for `bounds`, which now rerenders on change +- Performing deep props comparison to avoid rerenders +- Fixed the unprivileged editor not returning values +- Restoring selection event after text change +- Fixed the order of parameters in change events (@webcarrot) +- Using 'core' instead of 'base' CSS (@alexkrolick) +- Added support for the `placeholder` property (@alexkrolick) +- Enable/disable editor using top-level Quill API (@alexkrolick) +- Prevent whitespace issues when initializing the editor (@bobrafie) +- Using buttons instead of spans for toolbar actions (@clemmy) +- Removed getHtml from unprivileged editor (@clemmy) +- Fixed calculations for range fields (@clemmy) +- Removed deprecated destroy functionality (@clemmy) +- Added return statement to proxy editor methods (@druti) +- Inline styles support for Quill Toolbar (@e-jigsaw) +- Fixed custom font size definitions (@clemmy) +- Support for bullet and ordered lists in toolbar (@clemmy) +- Updated the toolbar alignment section (@clemmy) +- Updated rendering of toolbar actions (@clemmy) +- Improved toolbar renderChoices implementation (@zhang-z) +- Fixed use of `defaultValue` in Toolbar selects +- Fixed bounds validation in setEditorSelection (@wouterh) +- Exposed Quill in exports (@tdg5) +- Added unhook function to clean up event listeners on unmount (@alexkrolick, @jrmmnr) +- Fixed documentation typos (@l3kn) +- Started testing with Enzyme (@alexkrolick) +- Fixed issue where changing props caused re-render artifacts (#147) +- Fixed bounds validation in setEditorSelection (@wouterh) +- Updated README.md to reference core.css instead of base.css (@sandbochs) +- Updated React peerDependency (@rpellerin) +- Removed inline Parchment formats for font-size and font-family (#217) + +## v0.4.1 + +- Added contents of `dist` to NPM package. + +## v0.4.0 + +This release finally adds support for React 0.14. ⚠️ Shims to support older versions of React have been removed. + +- React 0.14 support (@jacktrades, #49) +- Removed shims for React 0.12 and 0.13 +- Bumped Quill.js to v0.20.1 +- _Normal_ and _smaller_ sizes are not swapped anymore. (#63) +- Various toolbar choice items are now correctly ordered. +- Added image tooltips to the default set of modules (@kairxa, #54) +- Fixed extra white-space in classnames (@asiniy, #67) +- Published the Quill namespace on ReactQuill (@Sajam, #60) +- Quill stylesheets are now linked to `dist/` for convenience. (#70) +- Exposed editor accessor methods in change events. (#33) + +## v0.3.0 + +- Bumped Quill.js to v0.2.0 +- Exposed `focus` and `blur` public methods from component. +- Exposed `getEditor` public method to retrieve the backing Quill instance from the component. +- Added callbacks for listening to keyboard events. +- Added tooltips for toolbar choice controls (@bird512). +- Added support for child nodes in toolbar items (@1000hz). +- Added support for custom formats in the configuration (@csk157). +- Added an option to disable the toolbar entirely by passing `false` to `toolbar`. +- Added an option to disable styles entirely by passing `false` to `style` (@kkerr1). +- Fixed an issue where the Quill would duplicate React IDs inside the toolbar leading to errors. Fixes #15. +- Fixes an issue where the editor could be used while null (@brucedlukens). +- Fixes an issue where null would be set on the editor. Fixes #48. +- Fixes an issue where the editor would be instantiated with the wrong value. Fixes #50. +- Avoiding parsing Quill's `dist` directory with webpack. + +## v0.2.2 -v0.2.2 ------- - Added missing `modules` propType and documentation. - Children are now cloned so ReactQuill can own their refs. Fixes #20. -v0.2.1 ------- +## v0.2.1 + - Link toolbar button and module are now enabled by default. Fixes #19. -v0.2.0 ------- +## v0.2.0 + - Fix React warnings about unique `key` props in toolbar (@Janekk). - Sending `delta` and `source` from editor change events. Fixes #17. - Rewritten uncontrolled and semi-controlled operation. Should fix #9, #10 and #14. - Editor props can now be changed after mounting. - Added callback for selection change event. Closes #12. -v0.1.1 ------- +## v0.1.1 + - The pre-compiled distributable is not shipped with the NPM package anymore. Should fix #2. - Sourcemaps are now emitted for both distributables, as separate files. - Avoiding parsing Quill as it ships with a pre-built main. -v0.1.0 ------- +## v0.1.0 + - Added support for toolbar separators. - Added support for font family selectors. - Updated the default toolbar to match Quill's. - Updated Quill to v0.19.12. -v0.0.6 ------- +## v0.0.6 + - Added keywords for inclusion in [React.parts](https://react.parts). -v0.0.5 ------- +## v0.0.5 + - Default empty content for components with no value. - Fixes wrong `QuillToolbar` propType. -v0.0.4 ------- +## v0.0.4 + - Added color toggle to toolbar (@chrismcv) - Exporting default item sets on `QuillToolbar` - Fixed `QuillComponent` only accepting a single child. -v0.0.3 ------- +## v0.0.3 + - Switched from `quilljs` package to `quill`. - Using the new `destroy()` from Quill. -v0.0.2 ------- +## v0.0.2 + - Compatible with React 0.12. -v0.0.1 ------- -- Initial version. \ No newline at end of file +## v0.0.1 + +- Initial version. diff --git a/LICENSE b/LICENSE index 5ca1126b..06ce3d58 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015, zenoamaro +Copyright (c) 2020, zenoamaro Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. \ No newline at end of file +THE SOFTWARE. diff --git a/Makefile b/Makefile deleted file mode 100644 index f742d8c1..00000000 --- a/Makefile +++ /dev/null @@ -1,39 +0,0 @@ -LINT=./node_modules/.bin/jshint -LINT_FLAGS= -TEST=./node_modules/.bin/mocha -SPEC_FLAGS=-R spec -COVERAGE_FLAGS=-R mocha-text-cov - -usage: - @echo lint: lints the source - @echo spec: runs the test specs - @echo coverage: runs the code coverage test - @echo test: lint, spec and coverage threshold test - @echo build: builds the minified version - @echo clean: removes the build artifacts - -lint: - @$(LINT) $(LINT_FLAGS) $(SOURCE) - -spec: - @$(TEST) $(SPEC_FLAGS) test/index - -coverage: - @$(TEST) $(COVERAGE_FLAGS) test/index - -test: - @make lint - @make spec SPEC_FLAGS="-R dot" - @make coverage COVERAGE_FLAGS="-R travis-cov" - -build: - @webpack --config webpack.dev.js - @webpack --config webpack.prod.js - -watch: - @webpack --watch --config webpack.dev.js - -clean: - @if [ -d dist ]; then rm -r dist; fi - -.PHONY: usage test spec coverage lint build clean diff --git a/README.md b/README.md index 54c624c4..8f2b576a 100644 --- a/README.md +++ b/README.md @@ -1,148 +1,462 @@ -React-Quill ![](https://travis-ci.org/zenoamaro/react-quill.svg?branch=master) +ReactQuill [![Build Status](https://travis-ci.org/zenoamaro/react-quill.svg?branch=master)](https://travis-ci.org/zenoamaro/react-quill) [![npm](https://img.shields.io/npm/v/react-quill.svg)](https://www.npmjs.com/package/react-quill) +[![npm downloads](https://img.shields.io/npm/dt/react-quill.svg?maxAge=2592000)](http://www.npmtrends.com/react-quill) ============================================================================== A [Quill] component for [React]. -See the [live demo]. +> **2025 Note** +> +> You probably don't need this library to use Quill with React. See https://quilljs.com/playground/react -[Quill]: https://quilljs.com -[React]: https://facebook.github.io/react/ +See a [live demo] or [Codepen](http://codepen.io/alexkrolick/pen/xgyOXQ/left?editors=0010#0). + +[quill]: https://quilljs.com +[react]: https://facebook.github.io/react/ [live demo]: https://zenoamaro.github.io/react-quill/ - 1. [Quick start](#quick-start) - 2. [Bundling with Webpack](#bundling-with-webpack) - 3. [API reference](#api-reference) - 4. [Building and testing](#building-and-testing) - 5. [Changelog](#changelog) - 6. [License](#license) - - -Quick start ------------ -1. Use straight away: - - ~~~jsx - /* - Include `quill.base.css` to give the editor some basic styles it needs. - You can find the _base_ theme in the quill distribution or inside - `node_modules`. - */ - - var React = require('react'); - var ReactQuill = require('react-quill'); - - var MyComponent = React.createClass({ - /* ... */ - - render: function() { - return ( - - ); - } - }); - ~~~ - -2. Customize a few settings: - - ~~~jsx - /* - Include a theme like `quill.snow.css` and activate it in the - configuration like shown below. You can find the _snow_ theme in the - quill distribution or inside `node_modules`. - */ - - var MyComponent = React.createClass({ - /* ... */ - - onTextChange: function(value) { - this.setState({ text:value }); - }, - - render: function() { - return ( - - ); - } - }); - ~~~ - -3. Custom controls: - - ~~~jsx - var MyComponent = React.createClass({ - /* ... */ - - render: function() { - return ( - - -
- - ); - } - }); - ~~~ - -4. Mixing in: - - ~~~jsx - var MyComponent = React.createClass({ - mixins: [ ReactQuill.Mixin ], - - componentDidMount: function() { - var editor = this.createEditor( - this.getEditorElement(), - this.getEditorConfig() - ); - this.setState({ editor:editor }); - }, - - componentWillReceiveProps: function(nextProps) { - if ('value' in nextProps && nextProps.value !== this.props.value) { - this.setEditorContents(this.state.editor, nextProps.value); - } - }, - - /* ... */ - }); - ~~~ - - See [component.js](src/component.js) for a fully fleshed-out example. - - -Bundling with Webpack ---------------------- -Quill ships only a pre-built javascript file, so Webpack will complain: - -~~~ -Error: ./~/react-quill/~/quill/dist/quill.js -Critical dependencies: -6:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. -@ ./~/react-quill/~/quill/dist/quill.js 6:478-485 -~~~ - -The warning is harmless, but if you want to silence it you can avoid parsing Quill by adding this to your Webpack configuration: - -~~~js -module: { - // Shut off warnings about using pre-built javascript files - // as Quill.js unfortunately ships one as its `main`. - noParse: /node_modules\/quill\/dist/ +- [Quick Start](#quick-start) + - [With webpack or create-react-app](#with-webpack-or-create-react-app) + - [With the browser bundle](#with-the-browser-bundle) +- [Usage](#usage) + - [Controlled mode caveats](#controlled-mode-caveats) + - [Using Deltas](#using-deltas) + - [Themes](#themes) + - [Custom Toolbar](#custom-toolbar) + - [Default Toolbar Elements](#default-toolbar-elements) + - [HTML Toolbar](#html-toolbar) + - [Custom Formats](#custom-formats) + - [Custom editing area](#custom-editing-area) +- [Upgrading to ReactQuill v2](#upgrading-to-reactquill-v2) + - [Deprecated props](#deprecated-props) + - [ReactQuill Mixin](#reactquill-mixin) + - [Toolbar component](#toolbar-component) +- [API reference](#api-reference) + - [Exports](#exports) + - [Props](#props) + - [Methods](#methods) + - [The unprivileged editor](#the-unprivileged-editor) +- [Building and testing](#building-and-testing) +- [Browser support](#browser-support) +- [Changelog](#changelog) +- [Contributors](#contributors) +- [License](#license) + +--- + +This is the documentation for ReactQuill v2 — Previous releases: [v1](/../../tree/v1) + +--- + +💯 **ReactQuill v2** + +ReactQuill 2 is here, baby! And it brings a full port to TypeScript and React 16+, a refactored build system, and a general tightening of the internal logic. + +We worked hard to avoid introducing any behavioral changes. For the vast majority of the cases, no migration is necessary at all. However, support for long-deprecated props, the ReactQuill Mixin, and the Toolbar component have been removed. Be sure to read the [migration guide](#upgrading-to-reactquill-v2). + +We expect this release to be a drop-in upgrade – if that isn't the case, please [file an issue](/../../issues/new) with the `v2` label. + +--- + +## Quick Start + +### With webpack or create-react-app + +Make sure you have `react` and `react-dom`, and some way to load styles, like [style-loader](https://www.npmjs.com/package/style-loader). See the documentation on [themes](#themes) for more information. + +```sh +npm install react-quill --save +``` + +```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 ; } -~~~ +``` + +### With the browser bundle + +```html + +``` + +```html + + + + + +``` + +## Usage + +### Controlled mode caveats + +In controlled mode, components are supposed to prevent local stateful changes, and instead only have them happen through `onChange` and `value`. + +Because Quill handles its own changes, and does not allow preventing edits, ReactQuill has to settle for a hybrid between controlled and uncontrolled mode. It can't prevent the change, but will still override the content whenever `value` differs from current state. + +If you frequently need to manipulate the DOM or use the [Quill API](https://quilljs.com/docs/api/)s imperatively, you might consider switching to fully uncontrolled mode. ReactQuill will initialize the editor using `defaultValue`, but won't try to reset it after that. The `onChange` callback will still work as expected. + +Read more about uncontrolled components in the [React docs](https://facebook.github.io/react/docs/uncontrolled-components.html#default-values). + +### Using Deltas + +You can pass a [Quill Delta](https://quilljs.com/docs/delta/), instead of an HTML string, as the `value` and `defaultValue` properties. Deltas have a number of advantages over HTML strings, so you might want use them instead. Be aware, however, that comparing Deltas for changes is more expensive than comparing HTML strings, so it might be worth to profile your usage patterns. + +Note that switching `value` from an HTML string to a Delta, or vice-versa, will trigger a change, regardless of whether they represent the same document, so you might want to stick to a format and keep using it consistently throughout. -See [#7](https://github.com/zenoamaro/react-quill/issues/7) for more details. +⚠️ Do not use the `delta` object you receive from the `onChange` event as `value`. This object does not contain the full document, but only the last modifications, and doing so will most likely trigger an infinite loop where the same changes are applied over and over again. Use `editor.getContents()` during the event to obtain a Delta of the full document instead. ReactQuill will prevent you from making such a mistake, however if you are absolutely sure that this is what you want, you can pass the object through `new Delta()` again to un-taint it. + +### Themes + +The Quill editor supports [themes](http://quilljs.com/docs/themes/). It includes a full-fledged theme, called _snow_, that is Quill's standard appearance, and a _bubble_ theme that is similar to the inline editor on Medium. At the very least, the _core_ theme must be included for modules like toolbars or tooltips to work. + +To activate a theme, pass the name of the theme to the `theme` [prop](#props). Pass a falsy value (eg. `null`) to use the core theme. + +```jsx + +``` + +Then, import the stylesheet for the themes you want to use. + +This may vary depending how application is structured, directories or otherwise. For example, if you use a CSS pre-processor like SASS, you may want to import that stylesheet inside your own. These stylesheets can be found in the Quill distribution, but for convenience they are also linked in ReactQuill's `dist` folder. + +Here's an example using [style-loader](https://www.npmjs.com/package/style-loader) for Webpack, or `create-react-app`, that will automatically inject the styles on the page: + +```jsx +import 'react-quill/dist/quill.snow.css'; +``` + +The styles are also available via CDN: + +```html + +``` + +### Custom Toolbar + +#### Default Toolbar Elements + +The [Quill Toolbar Module](http://quilljs.com/docs/modules/toolbar/) API provides an easy way to configure the default toolbar icons using an array of format names. + +
+Example Code + +```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 ( +
+ + +
+ ); + } +} + +export default MyComponent; +``` + +
+ +#### HTML Toolbar + +You can also supply your own HTML/JSX toolbar with custom elements that are not part of the Quill theme. + +See this example live on Codepen: [Custom Toolbar Example](https://codepen.io/alexkrolick/pen/gmroPj?editors=0010) + +
+Example Code + +```jsx +/* + * Custom "star" icon for the toolbar using an Octicon + * https://octicons.github.io + */ +const CustomButton = () => ; + +/* + * 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 = () => ( +
+ + + + + +
+); + +/* + * 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 ( +
+ + +
+ ); + } +} + +/* + * 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( + , + document.querySelector('.app') +); +``` +
-API reference -------------- +### Custom Formats + +The component has two types of formats: + +1. The default [Quill formats](http://quilljs.com/docs/formats/) that are enabled/disabled using the [`formats` prop](#props). All formats are enabled by default. +2. Custom formats created using Parchment and registered with your component's Quill instance + +
+Example Code + +```js +import ReactQuill, { Quill } from 'react-quill'; // ES6 +const ReactQuill = require('react-quill'); // CommonJS +``` + +```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 ( + + ); + } +} +``` + +
+ +### Custom editing area + +If you instantiate ReactQuill without children, it will create a `
` for you, to be used as the editing area for Quill. If you prefer, you can specify your own element for ReactQuill to use. Note that `