From a9f5b4ce299332047455672643d1feeb957d5fd4 Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Wed, 3 Aug 2022 21:07:20 +0200 Subject: [PATCH 1/5] Fix events not firing in strict mode (#822) --- src/index.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 3fdb2732..f83a11db 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -284,11 +284,14 @@ class ReactQuill extends React.Component { } instantiateEditor(): void { - if (this.editor) return; - this.editor = this.createEditor( - this.getEditingArea(), - this.getEditorConfig() - ); + if (this.editor) { + this.hookEditor(this.editor); + } else { + this.editor = this.createEditor( + this.getEditingArea(), + this.getEditorConfig() + ); + } } destroyEditor(): void { From ea08be486172beb8d63df4d4009c190d5e45a953 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Wed, 3 Aug 2022 12:29:11 -0700 Subject: [PATCH 2/5] v2.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c511084f..9013f4cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-quill", - "version": "2.0.0-beta.4", + "version": "2.0.0", "description": "The Quill rich-text editor as a React component.", "author": "zenoamaro ", "license": "MIT", From e55e901d221865ae80eda6e3a7175aaf2efdfde2 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Wed, 3 Aug 2022 12:31:25 -0700 Subject: [PATCH 3/5] Update readme for 2.0.0 --- README.md | 231 +++++++++++++++++++++++++++++------------------------- 1 file changed, 126 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index b84d68fa..ec283199 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@ A [Quill] component for [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/ +[quill]: https://quilljs.com +[react]: https://facebook.github.io/react/ [live demo]: https://zenoamaro.github.io/react-quill/ - [Quick Start](#quick-start) @@ -43,18 +43,12 @@ This is the documentation for ReactQuill v2 — Previous releases: [v1](/../../t --- -💯 **ReactQuill v2 beta period** +💯 **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). -Help us test the beta, and finalize this release! To try it out, simply update the dependency: - -~~~sh -npm install react-quill@beta -~~~ - 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. --- @@ -65,37 +59,44 @@ We expect this release to be a drop-in upgrade – if that isn't the case, plea 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 +```sh npm install react-quill --save -~~~ +``` -~~~jsx -import React, { useState } from "react"; +```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 ( - - ); + return ; } -~~~ +``` ### With the browser bundle -~~~html - -~~~ - -~~~html - - +```html + +``` + +```html + + -~~~ +``` ## Usage @@ -123,9 +124,9 @@ The Quill editor supports [themes](http://quilljs.com/docs/themes/). It includes 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 +```jsx -~~~ +``` Then, import the stylesheet for the themes you want to use. @@ -133,15 +134,18 @@ This may vary depending how application is structured, directories or otherwise. 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 +```jsx import 'react-quill/dist/quill.snow.css'; -~~~ +``` The styles are also available via CDN: -~~~html - -~~~ +```html + +``` ### Custom Toolbar @@ -152,7 +156,7 @@ The [Quill Toolbar Module](http://quilljs.com/docs/modules/toolbar/) API provide
Example Code -~~~jsx +```jsx class MyComponent extends Component { constructor(props) { super(props); @@ -191,7 +195,7 @@ class MyComponent extends Component { } export default MyComponent; -~~~ +```
@@ -204,21 +208,21 @@ See this example live on Codepen: [Custom Toolbar Example](https://codepen.io/al
Example Code -~~~jsx +```jsx /* * Custom "star" icon for the toolbar using an Octicon * https://octicons.github.io */ -const CustomButton = () => +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) +function insertStar() { + const cursorPosition = this.quill.getSelection().index; + this.quill.insertText(cursorPosition, '★'); + this.quill.setSelection(cursorPosition + 1); } /* @@ -226,7 +230,11 @@ function insertStar () { */ const CustomToolbar = () => (
- e.persist()} + > @@ -246,20 +254,20 @@ 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) + constructor(props) { + super(props); + this.state = { editorHtml: '' }; + this.handleChange = this.handleChange.bind(this); } - handleChange (html) { - this.setState({ editorHtml: html }); + handleChange(html) { + this.setState({ editorHtml: html }); } render() { @@ -272,7 +280,7 @@ class Editor extends React.Component { modules={Editor.modules} /> - ) + ); } } @@ -282,39 +290,49 @@ class Editor extends React.Component { */ Editor.modules = { toolbar: { - container: "#toolbar", + container: '#toolbar', handlers: { - "insertStar": insertStar, - } - } -} + 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', -] + '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') -) -~~~ +); +```
@@ -328,36 +346,36 @@ The component has two types of formats:
Example Code -~~~js -import ReactQuill, {Quill} from 'react-quill'; // ES6 +```js +import ReactQuill, { Quill } from 'react-quill'; // ES6 const ReactQuill = require('react-quill'); // CommonJS -~~~ +``` -~~~jsx +```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 { } +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 +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: '' } + this.formats = formats; + this.state = { text: '' }; } handleChange(value) { - this.setState({text: value}) + this.setState({ text: value }); } render() { @@ -367,10 +385,10 @@ class MyComponent extends React.Component { onChange={this.handleChange} formats={this.formats} /> - ) + ); } } -~~~ +```
@@ -382,7 +400,7 @@ Note: Custom editing areas lose focus when using React 16 as a peer dep at this
-~~~jsx +```jsx class MyComponent extends React.Component { render() { @@ -394,7 +412,7 @@ class MyComponent extends React.Component { } }); -~~~ +```
@@ -424,19 +442,18 @@ Use the [Toolbar Module](#default-toolbar-elements) or the [HTML Toolbar](#html- ### Exports -~~~jsx +```jsx // ES6 -import ReactQuill, {Quill} from 'react-quill'; +import ReactQuill, { Quill } from 'react-quill'; // CommonJS const ReactQuill = require('react-quill'); -const {Quill} = ReactQuill; -~~~ +const { Quill } = ReactQuill; +``` `Quill` : The `Quill` namespace on which you can call `register`. - ### Props `id` @@ -447,9 +464,9 @@ const {Quill} = ReactQuill; `value` : Value for the editor as a controlled component. Can be a string containing HTML, a [Quill Delta](https://quilljs.com/docs/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. See [Using Deltas](#using-deltas) for details. +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. See [Using Deltas](#using-deltas) for details. `defaultValue` : Initial value for the editor as an uncontrolled component. Can be a string containing HTML, a [Quill Delta](https://quilljs.com/docs/delta/), or a plain object representing a Delta. @@ -465,7 +482,7 @@ const {Quill} = ReactQuill; `formats` : An array of formats to be enabled during editing. All implemented formats are enabled by default. See [Formats](http://quilljs.com/docs/formats/) for a list. - Custom formats should not be included in the array as of version 1.0.0. Instead they should be created through [Parchment](https://github.com/quilljs/parchment) and registered with the module's [Quill export](#exports). +Custom formats should not be included in the array as of version 1.0.0. Instead they should be created through [Parchment](https://github.com/quilljs/parchment) and registered with the module's [Quill export](#exports). `style` : An object with custom CSS rules to apply on the editor's container. Rules should be in React's "camelCased" naming style. @@ -484,7 +501,7 @@ const {Quill} = ReactQuill; `onChange(content, delta, source, editor)` : 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](#the-unprivileged-editor) such as `getHTML()`. - ⚠️ Do not use this `delta` object as `value`, as it will cause a loop. Use `editor.getContents()` instead. See [Using Deltas](#using-deltas) for details. +⚠️ Do not use this `delta` object as `value`, as it will cause a loop. Use `editor.getContents()` instead. See [Using Deltas](#using-deltas) for details. `onChangeSelection(range, source, editor)` : 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()`. @@ -528,45 +545,48 @@ If you have [a ref](https://facebook.github.io/react/docs/more-about-refs.html) [View this example on Codepen](https://codepen.io/alexkrolick/pen/YNmGar?editors=0011) -~~~jsx +```jsx class Editor extends React.Component { constructor(props) { - super(props) - this.quillRef = null; // Quill instance + super(props); + this.quillRef = null; // Quill instance this.reactQuillRef = null; // ReactQuill component } componentDidMount() { - this.attachQuillRefs() + this.attachQuillRefs(); } componentDidUpdate() { - this.attachQuillRefs() + 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! ') - } + this.quillRef.insertText(position, 'Hello, World! '); + }; render() { return (
{ this.reactQuillRef = el }} - theme={'snow'} /> + ref={(el) => { + this.reactQuillRef = el; + }} + theme={'snow'} + />
- ) + ); } } -~~~ +``` @@ -576,12 +596,12 @@ class Editor extends React.Component {
Example -~~~jsx +```jsx const editor = this.reactQuillRef.getEditor(); const unprivilegedEditor = this.reactQuillRef.makeUnprivilegedEditor(editor); // You may now use the unprivilegedEditor proxy methods unprivilegedEditor.getText(); -~~~ +```
@@ -611,20 +631,20 @@ During events, ReactQuill will make a restricted subset of the Quill API availab You can build libs, types and bundles: -~~~sh +```sh npm build # or watch -~~~ +``` You can also run the automated test suite: -~~~sh +```sh npm test -~~~ +``` More tasks are available as package scripts: | 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 | @@ -642,6 +662,7 @@ Please check the browser support table for the upstream [Quill](https://github.c ## Contributors ReactQuill would not be where it is today without the contributions of many people, which we are incredibly grateful for: + - @zenoamaro (maintainer) - @alexkrolick (maintainer) - @clemmy From 91aa93f4f909c2b8023657d8ee3669a0990be891 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Wed, 3 Aug 2022 12:35:25 -0700 Subject: [PATCH 4/5] Add @g12i as contributor, update changelog --- CHANGELOG.md | 100 +++++++++++++++++++++++---------------------------- README.md | 1 + 2 files changed, 45 insertions(+), 56 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d555884e..68d29ca0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,74 +1,62 @@ -Changelog -========= +# Changelog -Next ----- +## 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 ------- +## v1.3.4 - Bump Quill to 1.3.7 to close a security vulnerability (#575) -v1.3.3 ------- +## v1.3.3 - Pin Quill types version (#420 @daggmano) -v1.3.2 ------- +## v1.3.2 - Add preserveWhitespace prop (#407 @royshouvik) -v1.3.1 ------- +## v1.3.1 - Add back default export (#374, #384 one19) -v1.3.0 ------- +## v1.3.0 - Add scrollingContainer prop - Fix Typescript exports - Fix tabindex prop -v1.2.6 ------- +## v1.2.6 Replaced React.DOM with react-dom-factories (#319 thienanle) -v1.2.5 ------- +## 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 ------- +## v1.2.4 - Only restore focus if editor had focus (#312 @MattKunze) - -v1.2.2 ------- +## v1.2.2 - Add Typescript definitions (#277 @Charrondev) -- Fixes for TS definitions (#294 @jdhungtington, #296 @ajaska) +- Fixes for TS definitions (#294 @jdhungtington, #296 @ajaska) -v1.1.0 ------- +## 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 ------- +## 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) @@ -110,12 +98,12 @@ This release supports Quill v1.0.0+. ⚠️ There are many breaking changes, so - Updated React peerDependency (@rpellerin) - Removed inline Parchment formats for font-size and font-family (#217) -v0.4.1 ------- +## v0.4.1 + - Added contents of `dist` to NPM package. -v0.4.0 ------- +## 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) @@ -129,8 +117,8 @@ This release finally adds support for React 0.14. ⚠️ Shims to support older - Quill stylesheets are now linked to `dist/` for convenience. (#70) - Exposed editor accessor methods in change events. (#33) -v0.3.0 ------- +## 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. @@ -146,60 +134,60 @@ v0.3.0 - 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 ------- +## v0.0.1 + - Initial version. diff --git a/README.md b/README.md index ec283199..4c87140e 100644 --- a/README.md +++ b/README.md @@ -665,6 +665,7 @@ ReactQuill would not be where it is today without the contributions of many peop - @zenoamaro (maintainer) - @alexkrolick (maintainer) +- @g12i - @clemmy - @asiniy - @webcarrot From 615b4bf730e7a34c1dda1707447123c1d727f9d1 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Sat, 22 Feb 2025 10:33:37 -0900 Subject: [PATCH 5/5] add note that library is not needed in 2025 --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 4c87140e..8f2b576a 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ ReactQuill [![Build Status](https://travis-ci.org/zenoamaro/react-quill.svg?bran A [Quill] component for [React]. +> **2025 Note** +> +> You probably don't need this library to use Quill with React. See https://quilljs.com/playground/react + See a [live demo] or [Codepen](http://codepen.io/alexkrolick/pen/xgyOXQ/left?editors=0010#0). [quill]: https://quilljs.com