react-quill - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

 Changelog
 =========
 
+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
@@ -5,0 +20,0 @@ ------

package.json

 {
   "name": "react-quill",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The Quill rich-text editor as a React component.",
@@ -39,14 +39,15 @@ "author": "zenoamaro <[e-mail]>",
   "dependencies": {
-    "quill": "^0.20.0"
+    "quill": "^0.20.1"
   },
   "peerDependencies": {
-    "react": ">=0.11.0"
+    "react": ">=0.14.0"
   },
   "devDependencies": {
     "blanket": "^1.1.6",
-    "jsdom": "^1.2.1",
+    "jsdom": "^7.0.1",
     "jshint": "^2.5.10",
     "mocha": "^2.0.1",
     "mocha-text-cov": "^0.1.0",
-    "react": "^0.12.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
     "should": "^4.3.0",
@@ -53,0 +54,0 @@ "sinon": "^1.12.1",

README.md

@@ -13,7 +13,8 @@ React-Quill ![](https://travis-ci.org/zenoamaro/react-quill.svg?branch=master)
   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)
+  2. [Styles and themes](#styles-and-themes)
+  3. [Bundling with Webpack](#bundling-with-webpack)
+  4. [API reference](#api-reference)
+  5. [Building and testing](#building-and-testing)
+  6. [Changelog](#changelog)
+  7. [License](#license)
 
@@ -26,8 +27,2 @@
     ~~~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');
@@ -47,9 +42,10 @@ var ReactQuill = require('react-quill');
 
-2. Customize a few settings:
+2. Bind to the `onChange` event and 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`.
+    Include `quill.snow.css` to use the editor's standard theme. For example,
+    depending on the structure of your app, you could do something like this:
+
+    <link rel="stylesheet" href="../node_modules/react-quill/dist/quill.snow.css">
     */
@@ -123,2 +119,25 @@
 
+Styles and themes
+-----------------
+The Quill editor supports themes.
+
+It includes a full-fledged theme, called _snow_, that is Quill's standard appearance, and a _base_ theme containing only the bare essentials to allow modules like toolbars or tooltips to work.
+
+These stylesheets can be found in the Quill distribution, but for convenience they are also linked among React Quill's `dist`s. In a common case you would activate a theme like this:
+
+    <ReactQuill theme='snow' />
+
+And then link the appropriate stylesheet:
+
+    <link rel="stylesheet" href="../node_modules/react-quill/dist/quill.snow.css">
+
+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.
+
+Quill will include a set of basic styles upon instantiation, so that including `quill.base.css` is not needed. If you would instead like to avoid this style injection, so to include `quill.base.css` manually or use your own styles, pass `false` (not just a _falsy_ value) as `styles`:
+
+    <ReactQuill styles={false}>
+
+Otherwise, you can set this to an object containing selectors and rules, that will be injected inside the document by Quill.
+
+
 Bundling with Webpack
@@ -151,2 +170,14 @@ ---------------------
 
+### Exports
+
+`ReactQuill.Mixin`
+: Provides the bridge between React and Quill. `ReactQuill` implements this mixin; in the same way you can use it to build your own component, or replace it to implement a new core for the default component.
+
+`ReactQuill.Toolbar`
+: The component that renders the basic ReactQuill toolbar. The default collection of items and color swatches is available as `ReactQuill.Toolbar.defaultItems` and `ReactQuill.Toolbar.defaultColors` respectively.
+
+`ReactQuill.Quill`
+: The `Quill` namespace on which you can call `registerModule` and such.
+
+
 ### Props
@@ -201,7 +232,7 @@
 
-`onChange(value, delta, source)`
-: Called back with the new contents of the editor after change.
+`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-set itself, the source of the change, and finally a read-only proxy to editor accessors such as `getText()`.
 
-`onChangeSelection(range, source)`
-: Called back with the new selected range, or null when unfocused.
+`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()`.
 
@@ -255,4 +286,19 @@ `onKeyPress(event)`
 ---------
+#### 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
+- Bumped Quill.js to v0.20.0
 - Exposed `focus` and `blur` public methods from component.
@@ -272,9 +318,3 @@ - Exposed `getEditor` public method to retrieve the backing Quill instance from the component.
 
-#### v0.2.2
-- Added missing `modules` propType and documentation.
-- Children are now cloned so ReactQuill can own their refs. Fixes #20.
 
-#### v0.2.1
-- Link toolbar button and module are now enabled by default. Fixes #19.
-
 [Full changelog](CHANGELOG.md)
@@ -296,3 +336,3 @@
 
-Copyright (c) 2015, zenoamaro <[e-mail]>
+Copyright (c) 2016, zenoamaro <[e-mail]>
 
@@ -299,0 +339,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

src/component.js

 'use strict';
 
 var React = require('react'),
+	ReactDOM = require('react-dom'),
 	QuillToolbar = require('./toolbar'),
@@ -8,18 +9,5 @@ QuillMixin = require('./mixin'),
 
-// Support React 0.11 and 0.12
-// FIXME: Remove with React 0.13
-if (React.createFactory) {
-	QuillToolbar = React.createFactory(QuillToolbar);
-}
+// FIXME: Remove with the switch to JSX
+QuillToolbar = React.createFactory(QuillToolbar);
 
-// Support React 0.12 and 0.13+
-// FIXME: Remove with React 0.13
-if (React.cloneElement) {
-	var cloneElement = React.cloneElement;
-} else if (React.addons && React.addons.cloneWithProps) {
-	var cloneElement = React.addons.cloneWithProps;
-} else {
-	throw new Error('React addons are required when using React 0.12 or less.');
-}
-
 var QuillComponent = React.createClass({
@@ -70,3 +58,4 @@
 			modules: {
-				'link-tooltip': true
+				'link-tooltip': true,
+				'image-tooltip': true
 			}
@@ -194,3 +183,3 @@ };
 			config.modules.toolbar = {
-				container: this.refs.toolbar.getDOMNode()
+				container: ReactDOM.findDOMNode(this.refs.toolbar)
 			};
@@ -206,3 +195,3 @@ }
 	getEditorElement: function() {
-		return this.refs.editor.getDOMNode();
+		return ReactDOM.findDOMNode(this.refs.editor);
 	},
@@ -227,3 +216,3 @@
 				this.props.children,
-				function(c) { return cloneElement(c, { ref: c.ref }) }
+				function(c) { return React.cloneElement(c, { ref: c.ref }) }
 			);
@@ -256,3 +245,3 @@ } else {
 			style: this.props.style,
-			className: 'quill ' + this.props.className,
+			className: ['quill'].concat(this.props.className).join(' '),
 			onKeyPress: this.props.onKeyPress,
@@ -266,7 +255,7 @@ onKeyDown: this.props.onKeyDown,
 
-	onEditorChange: function(value, delta, source) {
+	onEditorChange: function(value, delta, source, editor) {
 		if (value !== this.getEditorContents()) {
 			this.setState({ value: value });
 			if (this.props.onChange) {
-				this.props.onChange(value, delta, source);
+				this.props.onChange(value, delta, source, editor);
 			}
@@ -276,3 +265,3 @@ }
 
-	onEditorChangeSelection: function(range, source) {
+	onEditorChangeSelection: function(range, source, editor) {
 		var s = this.getEditorSelection() || {};
@@ -283,3 +272,3 @@ var r = range || {};
 			if (this.props.onChangeSelection) {
-				this.props.onChangeSelection(range, source);
+				this.props.onChangeSelection(range, source, editor);
 			}
@@ -286,0 +275,0 @@ }

src/index.js

 /*
-React-Quill v0.3.0
+React-Quill v0.4.0
 https://github.com/zenoamaro/react-quill
@@ -8,1 +8,2 @@ */
 module.exports.Toolbar = require('./toolbar');
+module.exports.Quill = require('quill');

src/mixin.js

@@ -18,5 +18,13 @@ 'use strict';
 	hookEditor: function(editor) {
+		// Expose the editor on change events via a weaker,
+		// unprivileged proxy object that does not allow
+		// accidentally modifying editor state.
+		var unprivilegedEditor = this.makeUnprivilegedEditor(editor);
+
 		editor.on('text-change', function(delta, source) {
 			if (this.onEditorChange) {
-				this.onEditorChange(editor.getHTML(), delta, source);
+				this.onEditorChange(
+					editor.getHTML(), delta, source,
+					unprivilegedEditor
+				);
 			}
@@ -27,3 +35,6 @@ }.bind(this));
 			if (this.onEditorChangeSelection) {
-				this.onEditorChangeSelection(range, source);
+				this.onEditorChangeSelection(
+					range, source,
+					unprivilegedEditor
+				);
 			}
@@ -61,2 +72,19 @@ }.bind(this));
 		editor.setSelection(range);
+	},
+
+	/*
+	Returns an weaker, unprivileged proxy object that only
+	exposes read-only accessors found on the editor instance,
+	without any state-modificating methods.
+	*/
+	makeUnprivilegedEditor: function(editor) {
+		var e = editor;
+		return {
+			getLength:    function(){ e.getLength.apply(e, arguments); },
+			getText:      function(){ e.getText.apply(e, arguments); },
+			getHTML:      function(){ e.getHTML.apply(e, arguments); },
+			getContents:  function(){ e.getContents.apply(e, arguments); },
+			getSelection: function(){ e.getSelection.apply(e, arguments); },
+			getBounds:    function(){ e.getBounds.apply(e, arguments); },
+		};
 	}
@@ -63,0 +91,0 @@

src/toolbar.js

 'use strict';
 
 var React = require('react'),
+	ReactDOMServer = require('react-dom/server'),
 	T = React.PropTypes;
@@ -25,3 +26,3 @@
 		{ label:'Font', type:'font', items: [
-			{ label:'Sans Serif',  value:'sans-serif' },
+			{ label:'Sans Serif',  value:'sans-serif', selected:true },
 			{ label:'Serif',       value:'serif' },
@@ -32,11 +33,11 @@ { label:'Monospace',   value:'monospace' }
 		{ label:'Size', type:'size', items: [
-			{ label:'Normal',  value:'10px' },
-			{ label:'Smaller', value:'13px' },
-			{ label:'Larger',  value:'18px' },
-			{ label:'Huge',    value:'32px' }
+			{ label:'Small',  value:'10px' },
+			{ label:'Normal', value:'13px', selected:true },
+			{ label:'Large',  value:'18px' },
+			{ label:'Huge',   value:'32px' }
 		]},
 		{ type:'separator' },
 		{ label:'Alignment', type:'align', items: [
+			{ label:'', value:'left', selected:true },
 			{ label:'', value:'center' },
-			{ label:'', value:'left' },
 			{ label:'', value:'right' },
@@ -101,3 +102,4 @@ { label:'', value:'justify' }
 			key: item.label || item.value || key,
-			value:item.value },
+			value:item.value,
+			selected:item.selected },
 			item.label
@@ -148,3 +150,3 @@ );
 		var children = this.props.items.map(this.renderItem);
-		var html = children.map(React.renderToStaticMarkup).join('');
+		var html = children.map(ReactDOMServer.renderToStaticMarkup).join('');
 		return React.DOM.div({
@@ -160,2 +162,2 @@ className: this.getClassName(),
 QuillToolbar.defaultItems = defaultItems;
-QuillToolbar.defaultColors = defaultColors;
+QuillToolbar.defaultColors = defaultColors;

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

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

32243

increased by14.62%

Lines of code

475

increased by4.4%

Number of lines in readme file

335

increased by13.56%

Worsened metrics

Dev dependency count

12

increased by9.09%

Dependency changes

• Updatedquill@^0.20.1