Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-quill

Package Overview
Dependencies
Maintainers
2
Versions
49
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-quill - npm Package Compare versions

Comparing version 2.0.0-beta1 to 2.0.0

4

lib/index.d.ts

@@ -49,4 +49,2 @@ import React from 'react';

generation: number;
value: Value;
selection: Range;
}

@@ -66,2 +64,4 @@ declare class ReactQuill extends React.Component<ReactQuillProps, ReactQuillState> {

editingArea?: React.ReactInstance | null;
value: Value;
selection: Range;
lastDeltaChangeSet?: DeltaStatic;

@@ -68,0 +68,0 @@ regenerationSnapshot?: {

129

lib/index.js

@@ -67,3 +67,2 @@ "use strict";

'style',
'readOnly',
'placeholder',

@@ -81,5 +80,7 @@ 'tabIndex',

generation: 0,
selection: null,
value: '',
};
/*
Tracks the internal selection of the Quill editor
*/
_this.selection = null;
_this.onEditorChange = function (eventName, rangeOrDelta, oldRangeOrDelta, source) {

@@ -90,3 +91,3 @@ var _a, _b, _c, _d;

}
if (eventName === 'text-change' || eventName === 'selection-change') {
else if (eventName === 'selection-change') {
(_d = (_c = _this).onEditorChangeSelection) === null || _d === void 0 ? void 0 : _d.call(_c, rangeOrDelta, source, _this.unprivilegedEditor);

@@ -96,3 +97,3 @@ }

var value = _this.isControlled() ? props.value : props.defaultValue;
_this.state.value = (value !== null && value !== void 0 ? value : '');
_this.value = (value !== null && value !== void 0 ? value : '');
return _this;

@@ -117,7 +118,28 @@ }

var _this = this;
var _a;
this.validateProps(nextProps);
// If the component has been regenerated, we already know we should update.
if (this.state.generation !== nextState.generation) {
// If the editor hasn't been instantiated yet, or the component has been
// regenerated, we already know we should update.
if (!this.editor || this.state.generation !== nextState.generation) {
return true;
}
// Handle value changes in-place
if ('value' in nextProps) {
var prevContents = this.getEditorContents();
var nextContents = (_a = nextProps.value, (_a !== null && _a !== void 0 ? _a : ''));
// NOTE: Seeing that Quill is missing a way to prevent edits, we have to
// settle for a hybrid between controlled and uncontrolled mode. We
// can't prevent the change, but we'll still override content
// whenever `value` differs from current state.
// NOTE: Comparing an HTML string and a Quill Delta will always trigger a
// change, regardless of whether they represent the same document.
if (!this.isEqualValue(nextContents, prevContents)) {
this.setEditorContents(this.editor, nextContents);
}
}
// Handle read-only changes in-place
if (nextProps.readOnly !== this.props.readOnly) {
this.setEditorReadOnly(this.editor, nextProps.readOnly);
}
// Clean and Dirty props require a render
return __spreadArrays(this.cleanProps, this.dirtyProps).some(function (prop) {

@@ -136,3 +158,3 @@ return !isEqual_1.default(nextProps[prop], _this.props[prop]);

this.instantiateEditor();
this.setEditorContents(this.editor, this.state.value);
this.setEditorContents(this.editor, this.getEditorContents());
};

@@ -143,6 +165,3 @@ ReactQuill.prototype.componentWillUnmount = function () {

ReactQuill.prototype.componentDidUpdate = function (prevProps, prevState) {
var _a;
if (!this.editor)
return;
var editor = this.editor;
var _this = this;
// If we're changing one of the `dirtyProps`, the entire Quill Editor needs

@@ -152,5 +171,5 @@ // to be re-instantiated. Regenerating the editor will cause the whole tree,

// Store the contents so they can be restored later.
if (this.shouldComponentRegenerate(prevProps)) {
var delta = editor.getContents();
var selection = editor.getSelection();
if (this.editor && this.shouldComponentRegenerate(prevProps)) {
var delta = this.editor.getContents();
var selection = this.editor.getSelection();
this.regenerationSnapshot = { delta: delta, selection: selection };

@@ -163,44 +182,22 @@ this.setState({ generation: this.state.generation + 1 });

if (this.state.generation !== prevState.generation) {
var _b = this.regenerationSnapshot, delta = _b.delta, selection = _b.selection;
var _a = this.regenerationSnapshot, delta = _a.delta, selection_1 = _a.selection;
delete this.regenerationSnapshot;
this.instantiateEditor();
editor.setContents(delta);
if (selection)
editor.setSelection(selection);
editor.focus();
var editor_1 = this.editor;
editor_1.setContents(delta);
postpone(function () { return _this.setEditorSelection(editor_1, selection_1); });
}
// Update only if we've been passed a new `value`. This leaves components
// using `defaultValue` alone.
if ('value' in this.props) {
var prevContents = prevState.value;
var nextContents = (_a = this.props.value, (_a !== null && _a !== void 0 ? _a : ''));
// NOTE: Seeing that Quill is missing a way to prevent edits, we have to
// settle for a hybrid between controlled and uncontrolled mode. We
// can't prevent the change, but we'll still override content
// whenever `value` differs from current state.
// NOTE: Comparing an HTML string and a Quill Delta will always trigger a
// change, regardless of whether they represent the same document.
if (!this.isEqualValue(nextContents, prevContents)) {
this.setEditorContents(editor, nextContents);
}
}
// We can update readOnly state in-place.
if ('readOnly' in this.props) {
if (this.props.readOnly !== prevProps.readOnly) {
this.setEditorReadOnly(editor, this.props.readOnly);
}
}
};
ReactQuill.prototype.instantiateEditor = function () {
if (this.editor) {
throw new Error('Editor is already instantiated');
this.hookEditor(this.editor);
}
this.editor = this.createEditor(this.getEditingArea(), this.getEditorConfig());
else {
this.editor = this.createEditor(this.getEditingArea(), this.getEditorConfig());
}
};
ReactQuill.prototype.destroyEditor = function () {
if (!this.editor) {
throw new Error('Destroying editor before instantiation');
}
if (!this.editor)
return;
this.unhookEditor(this.editor);
delete this.editor;
};

@@ -246,2 +243,4 @@ /*

this.unprivilegedEditor = this.makeUnprivilegedEditor(editor);
// Using `editor-change` allows picking up silent updates, like selection
// changes on typing.
editor.on('editor-change', this.onEditorChange);

@@ -253,6 +252,6 @@ };

ReactQuill.prototype.getEditorContents = function () {
return this.state.value;
return this.value;
};
ReactQuill.prototype.getEditorSelection = function () {
return this.state.selection;
return this.selection;
};

@@ -281,3 +280,5 @@ /*

ReactQuill.prototype.setEditorContents = function (editor, value) {
var sel = editor.getSelection();
var _this = this;
this.value = value;
var sel = this.getEditorSelection();
if (typeof value === 'string') {

@@ -289,6 +290,6 @@ editor.setContents(editor.clipboard.convert(value));

}
if (sel && editor.hasFocus())
this.setEditorSelection(editor, sel);
postpone(function () { return _this.setEditorSelection(editor, sel); });
};
ReactQuill.prototype.setEditorSelection = function (editor, range) {
this.selection = range;
if (range) {

@@ -299,5 +300,4 @@ // Validate bounds before applying.

range.length = Math.max(0, Math.min(range.length, (length_1 - 1) - range.index));
editor.setSelection(range);
}
// Quill types (erroneously) do not specify that `null` is accepted here.
editor.setSelection(range);
};

@@ -351,6 +351,5 @@ ReactQuill.prototype.setEditorTabIndex = function (editor, tabIndex) {

var _this = this;
var _a = this.props, children = _a.children, preserveWhitespace = _a.preserveWhitespace, tabIndex = _a.tabIndex;
var _a = this.props, children = _a.children, preserveWhitespace = _a.preserveWhitespace;
var generation = this.state.generation;
var properties = {
tabIndex: tabIndex,
key: generation,

@@ -376,13 +375,12 @@ ref: function (instance) {

return;
var currentContents = this.getEditorContents();
// We keep storing the same type of value as what the user gives us,
// so that value comparisons will be more stable and predictable.
var nextContents = this.isDelta(currentContents)
var nextContents = this.isDelta(this.value)
? editor.getContents()
: editor.getHTML();
if (!this.isEqualValue(nextContents, currentContents)) {
if (nextContents !== this.getEditorContents()) {
// Taint this `delta` object, so we can recognize whether the user
// is trying to send it back as `value`, preventing a likely loop.
this.lastDeltaChangeSet = delta;
this.setState({ value: nextContents });
this.value = nextContents;
(_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value, delta, source, editor);

@@ -400,3 +398,3 @@ }

return;
this.setState({ selection: nextSelection });
this.selection = nextSelection;
(_b = (_a = this.props).onChangeSelection) === null || _b === void 0 ? void 0 : _b.call(_a, nextSelection, source, editor);

@@ -418,3 +416,4 @@ if (hasGainedFocus) {

return;
this.setEditorSelection(this.editor, null);
this.selection = null;
this.editor.blur();
};

@@ -433,3 +432,9 @@ ReactQuill.displayName = 'React Quill';

}(react_1.default.Component));
/*
Small helper to execute a function in the next micro-tick.
*/
function postpone(fn) {
Promise.resolve().then(fn);
}
module.exports = ReactQuill;
//# sourceMappingURL=index.js.map

18

package.json
{
"name": "react-quill",
"version": "2.0.0-beta1",
"version": "2.0.0",
"description": "The Quill rich-text editor as a React component.",

@@ -18,5 +18,8 @@ "author": "zenoamaro <zenoamaro@gmail.com>",

"watch": "tsc --watch",
"test": "npm run build && npm run test:unit && npm run test:coverage",
"pretest": "npm run build",
"test": "npm run test:unit && npm run test:coverage && npm run test:browser",
"test:unit": "mocha --recursive --require=./test/setup.js -R spec test/index",
"test:coverage": "mocha --recursive --require=./test/setup.js -R mocha-text-cov test/index",
"test:browser": "cypress run",
"test:browser:interactive": "cypress open",
"demo": "superstatic demo",

@@ -44,5 +47,3 @@ "clean": "rimraf lib dist",

"dependencies": {
"@types/lodash": "^4.14.146",
"@types/quill": "^1.3.10",
"@types/react": "^16.9.11",
"lodash": "^4.17.4",

@@ -52,9 +53,11 @@ "quill": "^1.3.7"

"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
"react": "^16 || ^17 || ^18",
"react-dom": "^16 || ^17 || ^18"
},
"devDependencies": {
"@types/react-dom": "^16.9.4",
"@types/chai": "^4.2.11",
"@types/lodash": "^4.14.146",
"@types/mocha": "^7.0.2",
"@types/react": "^16.9.11",
"@types/react-dom": "^16.9.4",
"@types/sinon": "^7.5.2",

@@ -66,2 +69,3 @@ "blanket": "^1.2.3",

"cpx": "^1.5.0",
"cypress": "^4.3.0",
"enzyme": "^3.10.0",

@@ -68,0 +72,0 @@ "enzyme-adapter-react-16": "^1.15.1",

231

README.md

@@ -9,4 +9,4 @@ 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)

[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/

@@ -47,14 +47,8 @@

💯 **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-react-quill-v2).
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@2
~~~
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.

@@ -70,8 +64,8 @@

~~~sh
```sh
npm install react-quill --save
~~~
```
~~~jsx
import React from 'react';
```jsx
import React, { useState } from 'react';
import ReactQuill from 'react-quill';

@@ -83,21 +77,28 @@ import 'react-quill/dist/quill.snow.css';

return (
<ReactQuill theme="snow"value={value} onChange={setValue}/>
);
return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}
~~~
```
### With the browser bundle
~~~html
<link rel="stylesheet" href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css">
~~~
```html
<link
rel="stylesheet"
href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css"
/>
```
~~~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>
```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>
~~~
```

@@ -130,5 +131,5 @@ ## Usage

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

@@ -141,11 +142,14 @@ Then, import the stylesheet for the themes you want to use.

~~~jsx
```jsx
import 'react-quill/dist/quill.snow.css';
~~~
```
The styles are also available via CDN:
~~~html
<link rel="stylesheet" href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css">
~~~
```html
<link
rel="stylesheet"
href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css"
/>
```

@@ -161,3 +165,3 @@ ### Custom Toolbar

~~~jsx
```jsx
class MyComponent extends Component {

@@ -201,3 +205,3 @@ constructor(props) {

export default MyComponent;
~~~
```

@@ -215,3 +219,3 @@ </details>

~~~jsx
```jsx
/*

@@ -221,3 +225,3 @@ * Custom "star" icon for the toolbar using an Octicon

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

@@ -228,6 +232,6 @@ /*

*/
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);
}

@@ -240,3 +244,7 @@

<div id="toolbar">
<select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
<select
className="ql-header"
defaultValue={''}
onChange={(e) => e.persist()}
>
<option value="1"></option>

@@ -261,3 +269,3 @@ <option value="2"></option>

</div>
)
);

@@ -268,10 +276,10 @@ /*

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

@@ -289,3 +297,3 @@

</div>
)
);
}

@@ -300,8 +308,8 @@ }

toolbar: {
container: "#toolbar",
container: '#toolbar',
handlers: {
"insertStar": insertStar,
}
}
}
insertStar: insertStar,
},
},
};

@@ -313,7 +321,17 @@ /*

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',
];

@@ -325,3 +343,3 @@ /*

placeholder: React.PropTypes.string,
}
};

@@ -332,6 +350,6 @@ /*

ReactDOM.render(
<Editor placeholder={'Write something or insert a star ★'}/>,
<Editor placeholder={'Write something or insert a star ★'} />,
document.querySelector('.app')
)
~~~
);
```

@@ -350,8 +368,8 @@ </details>

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

@@ -363,3 +381,3 @@ * Example Parchment format from

let Inline = Quill.import('blots/inline');
class BoldBlot extends Inline { }
class BoldBlot extends Inline {}
BoldBlot.blotName = 'bold';

@@ -369,3 +387,3 @@ BoldBlot.tagName = 'strong';

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

@@ -377,8 +395,8 @@ /*

constructor(props) {
this.formats = formats
this.state = { text: '' }
this.formats = formats;
this.state = { text: '' };
}
handleChange(value) {
this.setState({text: value})
this.setState({ text: value });
}

@@ -393,6 +411,6 @@

/>
)
);
}
}
~~~
```

@@ -409,3 +427,3 @@ </details>

~~~jsx
```jsx
class MyComponent extends React.Component {

@@ -422,3 +440,3 @@

});
~~~
```

@@ -453,10 +471,10 @@ </details>

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

@@ -466,3 +484,2 @@ `Quill`

### Props

@@ -478,5 +495,5 @@

: 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.

@@ -497,3 +514,3 @@ `defaultValue`

: 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).

@@ -517,3 +534,3 @@ `style`

: 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.

@@ -562,7 +579,7 @@ `onChangeSelection(range, source, editor)`

~~~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

@@ -572,7 +589,7 @@ }

componentDidMount() {
this.attachQuillRefs()
this.attachQuillRefs();
}
componentDidUpdate() {
this.attachQuillRefs()
this.attachQuillRefs();
}

@@ -583,3 +600,3 @@

this.quillRef = this.reactQuillRef.getEditor();
}
};

@@ -589,4 +606,4 @@ insertText = () => {

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

@@ -597,10 +614,13 @@ render() {

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

@@ -615,3 +635,3 @@ </details>

~~~jsx
```jsx
const editor = this.reactQuillRef.getEditor();

@@ -621,3 +641,3 @@ const unprivilegedEditor = this.reactQuillRef.makeUnprivilegedEditor(editor);

unprivilegedEditor.getText();
~~~
```

@@ -652,11 +672,11 @@ </details>

~~~sh
```sh
npm build # or watch
~~~
```
You can also run the automated test suite:
~~~sh
```sh
npm test
~~~
```

@@ -666,3 +686,3 @@ More tasks are available as package scripts:

| Script | Description |
|-----------------|---------------------------------------------|
| --------------- | ------------------------------------------- |
| `npm run build` | Builds lib and browser bundle |

@@ -685,2 +705,3 @@ | `npm run watch` | Rebuilds on source code changes |

ReactQuill would not be where it is today without the contributions of many people, which we are incredibly grateful for:
- @zenoamaro (maintainer)

@@ -687,0 +708,0 @@ - @alexkrolick (maintainer)

dist/react-quill.js

Sorry, the diff of this file is too big to display

lib/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc