react-quill - npm Package Compare versions

Comparing version 1.0.0-beta-3 to 1.0.0-beta-4

CHANGELOG.md

@@ -36,2 +36,8 @@ Changelog
 - 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)
 
@@ -38,0 +44,0 @@ v0.4.1

package.json

 {
   "name": "react-quill",
-  "version": "1.0.0-beta-3",
+  "version": "1.0.0-beta-4",
   "description": "The Quill rich-text editor as a React component.",
@@ -5,0 +5,0 @@ "author": "zenoamaro <[e-mail]>",

README.md

@@ -12,16 +12,17 @@ React-Quill [![Build Status](https://travis-ci.org/zenoamaro/react-quill.svg?branch=master)](https://travis-ci.org/zenoamaro/react-quill)
 
-  1. [Quick start](#quick-start)
-  1. [Advanced Options](#advanced-options)
-    1. [Theme](#theme)
-    1. [Custom Toolbar](#custom-toolbar)
-    1. [Custom Formats](#custom-formats)
-    1. [Mixin](#mixin)
-  1. [Upgrading to React-Quill v1.0.0](#upgrading-to-react-quill-v100)
-  1. [API reference](#api-reference)
-  1. [Browser support](#browser-support)
-  1. [Building and testing](#building-and-testing)
-    1. [Bundling with Webpack](#bundling-with-webpack)
-  1. [Changelog](#changelog)
-  1. [Contributors](#contributors)
-  1. [License](#license)
+1. [Quick start](#quick-start)
+1. [Advanced Options](#advanced-options)
+   1. [Theme](#theme)
+   1. [Custom Toolbar](#custom-toolbar)
+   1. [Custom Formats](#custom-formats)
+   1. [Custom Editing Area](#custom-editing-area)
+   1. [Mixin](#mixin)
+1. [Upgrading to React-Quill v1.0.0](#upgrading-to-react-quill-v100)
+1. [API reference](#api-reference)
+1. [Browser support](#browser-support)
+1. [Building and testing](#building-and-testing)
+   1. [Bundling with Webpack](#bundling-with-webpack)
+1. [Changelog](#changelog)
+1. [Contributors](#contributors)
+1. [License](#license)
 
@@ -35,4 +36,5 @@ ---
 
-🎧 **Latest published package version: `v1.0.0-beta-1`**  
-Follow React Quill's development on the beta channel leading to `v1.0.0`.
+🎧 **Latest published package version: `v1.0.0-beta-4`**  
+Follow React Quill's development on the beta channel leading to `v1.0.0`.  
+`npm install react-quill@v1.0.0-beta-4`
  
@@ -87,3 +89,2 @@ ---
 <link rel="stylesheet" href="node_modules/react-quill/dist/quill.base.css">
-
 ```
@@ -100,2 +101,4 @@
 <details>
+<summary>Example Code</summary>
+
 ```jsx
@@ -127,6 +130,2 @@ var MyComponent = React.createClass({
                     formats={this.formats}>
-          <div key="editor"
-                ref="editor"
-                className="quill-contents my-class-name"
-                dangerouslySetInnerHTML={{__html:this.state.editorContent}}/>
         </ReactQuill>
@@ -139,2 +138,3 @@ </div>
 ```
+
 </details>
@@ -146,4 +146,7 @@
 
+See this example live on Codepen: [Custom Toolbar Example](https://codepen.io/alexkrolick/pen/gmroPj?editors=0010)
+
 <details>
-See this example live on Codepen: [Custom Toolbar Example](https://codepen.io/alexkrolick/pen/gmroPj?editors=0010)
+<summary>Example Code</summary>
+
 ```jsx
@@ -215,10 +218,3 @@ /*
           modules={Editor.modules}
-        >
-          <div 
-            key="editor"                     
-            ref="editor"
-            className="quill-contents"                     
-            dangerouslySetInnerHTML={{__html:this.state.editorHtml}}
-          />
-        </ReactQuill>
+        />
       </div>
@@ -268,2 +264,3 @@ )
 ```
+
 </details>
@@ -279,3 +276,4 @@
 <details>
-<summary>Expand custom format example</summary>
+<summary>Example Code</summary>
+
 ES6 Import
@@ -327,9 +325,36 @@ ```js
 ```
+
 </details>
 
+### Custom editing area
+
+If you instantiate ReactQuill without children, it will create a `<div>` for you, to be used as the editing area for Quill. If you prefer, you can specify your own element for ReactQuill to use.
+
+<details>
+
+```jsx
+class MyComponent extends React.Component {
+
+  render() {
+    return (
+      <ReactQuill>
+        <div className="my-editing-area"/>
+      </ReactQuill>
+    );
+  }
+
+});
+```
+
+</details>
+
 ### Mixin
 
-The module exports a mixin which can be used to create custom editor components. (Note that mixins will be deprecated in a future version of React).
+The module exports a mixin which can be used to create custom editor components. (Note that mixins will be deprecated in a future version of React). 
 
 <details>
+<summary>Example Code</summary>
+
+The ReactQuill default component is built using the mixin. See [component.js](src/component.js) for source.
+
 ```jsx
@@ -343,3 +368,3 @@ import {Mixin} from 'react-quill'
     var editor = this.createEditor(
-      this.getEditorElement(),
+      this.getEditingArea(),
       this.getEditorConfig()
@@ -358,3 +383,3 @@ );
 ```
-The ReactQuill default component is built using the mixin. See [component.js](src/component.js) for source.
+
 </details>
@@ -367,3 +392,3 @@
 <details>
-<summary>Expand upgrade guide</summary>
+<summary>Expand Upgrade Guide</summary>
 
@@ -375,4 +400,7 @@ ### The toolbar module
 Previously, toolbar properties could be set by passing a `toolbar` prop to React Quill. Pass the same options as `modules.toolbar` instead.
+
 <details>
-~~~diff
+<summary>Read More</summary>
+
+```diff
 + modules: {
@@ -388,7 +416,7 @@ toolbar: [
   />
-~~~
+```
 
-If you provided your own HTML toolbar component, you can still do the same:
+If you used to provide your own HTML toolbar component, you can still do the same:
 
-~~~diff
+```diff
 + modules: {
@@ -402,7 +430,9 @@ +   toolbar: '#my-toolbar-component',
   />
-~~~
+```
 
+Note that it is not possible to pass a toolbar component as a child to ReactQuill anymore.
+
 Previously, React Quill would create a custom HTML toolbar for you if you passed a configuration object as the `toolbar` prop. This will not happen anymore. You can still create a `ReactQuill.Toolbar` explicitly:
 
-~~~diff
+```diff
 + modules: {
@@ -421,3 +451,3 @@ +   toolbar: '#my-quill-toolbar',
   />
-~~~
+```
 
@@ -427,2 +457,3 @@ However, consider switching to the new Quill format instead, or provide your own [toolbar component](#html-toolbar).
 React Quill now follows the Quill toolbar format closely. See the [Quill toolbar documentation](https://quilljs.com/docs/modules/toolbar/) for a complete reference on all supported options.
+
 </details>
@@ -458,3 +489,3 @@
 `ReactQuill.Toolbar`
-: The component that renders the custom ReactQuill toolbar. The default collection of items and color swatches is available as `ReactQuill.Toolbar.defaultItems` and `ReactQuill.Toolbar.defaultColors` respectively. ⚠️ The Toolbar component is deprecated since v1.0.0. See [upgrading to React Quill v1.0.0](#upgrading-to-react-quill-v1-0-0).
+: The component that renders the custom ReactQuill toolbar. The default collection of items and color swatches is available as `ReactQuill.Toolbar.defaultItems` and `ReactQuill.Toolbar.defaultColors` respectively. ⚠️ The Toolbar component is deprecated since v1.0.0. See [upgrading to React Quill v1.0.0](#upgrading-to-react-quill-v100).
 
@@ -501,2 +532,5 @@ `ReactQuill.Quill`
 
+`children`
+: 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. Note also 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)`
@@ -625,2 +659,3 @@ : 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-set itself, the source of the change, and finally a read-only proxy to editor accessors such as `getText()`.
 - Started testing with Enzyme (@alexkrolick)
+- Fixed issue where changing props caused re-render artifacts (#147)
 
@@ -676,4 +711,4 @@ #### v0.4.1
 - [x] Quill v1.0.0+ support
+- [x] Tests!
 - [ ] ES6 rewrite
-- [ ] Tests!
 
@@ -680,0 +715,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3629294

increased by19.61%

Number of package files

12

increased by9.09%

Lines of code

30601

increased by82.53%

Number of lines in readme file

704

increased by5.23%

Worsened metrics

Number of low supply chain risk alerts

6

increased by50%

Number of medium supply chain risk alerts

4

increased by100%

No dependency changes