Merge pull request #177 from zenoamaro/cleaner-rerendering

Cleaner rerendering

Author: alexkrolick

.jshintrc

@@ -19,7 +19,7 @@
 	"strict": true,
 	"maxdepth": 3,
 	"maxparams": 4,
-	"maxcomplexity": 6,
+	"maxcomplexity": 8,
 	"maxlen": 100,
 	"eqnull": true,
 	"lastsemic": true,

CHANGELOG.md

@@ -33,6 +33,12 @@ This release supports Quill v1.0.0+. ⚠️ There are many breaking changes, so
 - 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)
 
 v0.4.1
 ------

README.md

@@ -32,9 +32,9 @@ Thanks to @clemmy and @alexkrolick for landing this much-awaited change. There a
 
 ---
 
-🎧 **Latest published package version: `v1.0.0-beta-3`**  
+🎧 **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 [email protected]3`
+`npm install [email protected]4`
 
 ---
 
@@ -635,6 +635,7 @@ This release adds support for Quill v1.0.0+. ⚠️ There are many breaking chan
 - 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)
 
 #### v0.4.1
 - Added contents of `dist` to NPM package.

package.json

@@ -1,6 +1,6 @@
 {
   "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.",
   "author": "zenoamaro <[email protected]>",
   "homepage": "https://github.com/zenoamaro/react-quill",

src/component.js

@@ -42,14 +42,14 @@ var QuillComponent = React.createClass({
 			) return new Error(
 				'Since v1.0.0, React Quill will not create a custom toolbar for you ' +
 				'anymore. Create a toolbar explictly, or let Quill create one. ' +
-				'See: https://github.com/zenoamaro/react-quill#upgrading-to-react-quill-v1-0-0'
+				'See: https://github.com/zenoamaro/react-quill#upgrading-to-react-quill-v100'
 			);
 		},
 
 		toolbar: function(props) {
 			if ('toolbar' in props) return new Error(
 				'The `toolbar` prop has been deprecated. Use `modules.toolbar` instead. ' +
-				'See: https://github.com/zenoamaro/react-quill#upgrading-to-react-quill-v1-0-0'
+				'See: https://github.com/zenoamaro/react-quill#upgrading-to-react-quill-v100'
 			);
 		},
 
@@ -94,105 +94,156 @@ var QuillComponent = React.createClass({
 	},
 
 	/*
-	Changing one of these props should cause a re-render.
+	Changing one of these props should cause a full re-render.
 	*/
 	dirtyProps: [
-		'id',
-		'className',
-		'style',
 		'modules',
 		'formats',
 		'bounds',
 		'theme',
 		'children',
 	],
 
+	/*
+	Changing one of these props should cause a regular update.
+	*/
+	cleanProps: [
+		'id',
+		'className',
+		'style',
+		'placeholder',
+		'onKeyPress',
+		'onKeyDown',
+		'onKeyUp',
+		'onChange',
+		'onChangeSelection',
+	],
+
 	getDefaultProps: function() {
 		return {
-			className: '',
 			theme: 'snow',
 			modules: {},
 		};
 	},
 
 	/*
-	We consider the component to be controlled if
-	whenever `value` is being sent in props.
+	We consider the component to be controlled if `value` is being sent in props.
 	*/
 	isControlled: function() {
 		return 'value' in this.props;
 	},
 
 	getInitialState: function() {
 		return {
+			generation: 0,
 			value: this.isControlled()
 				? this.props.value
 				: this.props.defaultValue
 		};
 	},
 
-	componentWillReceiveProps: function(nextProps) {
+	componentWillReceiveProps: function(nextProps, nextState) {
+		// If we need to regenerate the component, we can avoid a detailed
+		// in-place update step, and just let everything rerender.
+		if (this.shouldComponentRegenerate(nextProps, nextState)) {
+			return this.regenerate();
+		}
+
 		var editor = this.editor;
+
 		// If the component is unmounted and mounted too quickly
 		// an error is thrown in setEditorContents since editor is
 		// still undefined. Must check if editor is undefined
 		// before performing this call.
-		if (editor) {
-			// Update only if we've been passed a new `value`.
-			// This leaves components using `defaultValue` alone.
-			if ('value' in nextProps) {
-				// 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.
-				if (nextProps.value !== this.getEditorContents()) {
-					this.setEditorContents(editor, nextProps.value);
-				}
+		if (!editor) return;
+		
+		// Update only if we've been passed a new `value`.
+		// This leaves components using `defaultValue` alone.
+		if ('value' in nextProps) {
+			// 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.
+			if (nextProps.value !== this.getEditorContents()) {
+				this.setEditorContents(editor, nextProps.value);
 			}
-			// We can update readOnly state in-place.
-			if ('readOnly' in nextProps) {
-				if (nextProps.readOnly !== this.props.readOnly) {
-					this.setEditorReadOnly(editor, nextProps.readOnly);
-				}
+		}
+		
+		// We can update readOnly state in-place.
+		if ('readOnly' in nextProps) {
+			if (nextProps.readOnly !== this.props.readOnly) {
+				this.setEditorReadOnly(editor, nextProps.readOnly);
 			}
 		}
 	},
 
 	componentDidMount: function() {
-		var editor = this.createEditor(
+		this.editor = this.createEditor(
 			this.getEditingArea(),
 			this.getEditorConfig()
 		);
-		this.editor = editor;
+		// Restore editor from Quill's native formats in regeneration scenario
+		if (this.quillDelta) {
+			this.editor.setContents(this.quillDelta);
+			this.editor.setSelection(this.quillSelection);		
+			this.editor.focus();
+			this.quillDelta = this.quillSelection = null;
+			return;
+		}
+		if (this.state.value) {
+			this.setEditorContents(this.editor, this.state.value);
+			return;
+		}
 	},
 
 	componentWillUnmount: function() {
-		// NOTE: Don't set the state to null here
-		//       as it would generate a loop.
-		var e = this.getEditor();
-		if (e) this.unhookEditor(e);
+		var editor; if ((editor = this.getEditor())) {
+			this.unhookEditor(editor);
+			this.editor = null;
+		}
 	},
 
 	shouldComponentUpdate: function(nextProps, nextState) {
-		// Rerender whenever a "dirtyProp" changes
-		var props = this.props;
+		var self = this;
+
+		// If the component has been regenerated, we already know we should update.
+		if (this.state.generation !== nextState.generation) {
+			return true;
+		}
+		
+		// Compare props that require React updating the DOM.
+		return some(this.cleanProps, function(prop) {
+			// Note that `isEqual` compares deeply, making it safe to perform
+			// non-immutable updates, at the cost of performance.
+			return !isEqual(nextProps[prop], self.props[prop]);
+		});
+	},
+
+	shouldComponentRegenerate: function(nextProps, nextState) {
+		var self = this;
+		// Whenever a `dirtyProp` changes, the editor needs reinstantiation.
 		return some(this.dirtyProps, function(prop) {
-			return !isEqual(nextProps[prop], props[prop]);
+			// Note that `isEqual` compares deeply, making it safe to perform
+			// non-immutable updates, at the cost of performance.
+			return !isEqual(nextProps[prop], self.props[prop]);
 		});
 	},
 
 	/*
-	If for whatever reason we are rendering again,
-	we should tear down the editor and bring it up
-	again.
+	If we could not update settings from the new props in-place, we have to tear
+	down everything and re-render from scratch.
 	*/
-	componentWillUpdate: function() {
-		this.componentWillUnmount();
+	componentWillUpdate: function(nextProps, nextState) {
+		if (this.state.generation !== nextState.generation) {
+			this.componentWillUnmount();
+		}
 	},
 
-	componentDidUpdate: function() {
-		this.componentDidMount();
+	componentDidUpdate: function(prevProps, prevState) {
+		if (this.state.generation !== prevState.generation) {
+			this.componentDidMount();
+		}
 	},
 
 	getEditorConfig: function() {
@@ -222,6 +273,19 @@ var QuillComponent = React.createClass({
 		return this.state.selection;
 	},
 
+	/*
+	Regenerating the editor will cause the whole tree, including the container,
+	to be cleaned up and re-rendered from scratch.
+	*/
+	regenerate: function() {
+		// Cache selection and contents in Quill's native format to be restored later
+		this.quillDelta = this.editor.getContents();
+		this.quillSelection = this.editor.getSelection();
+		this.setState({
+			generation: this.state.generation + 1,
+		});
+	},
+
 	/*
 	Renders an editor area, unless it has been provided one to clone.
 	*/
@@ -230,22 +294,26 @@ var QuillComponent = React.createClass({
 		var children = this.props.children;
 
 		var properties = {
+			key: this.state.generation,
 			ref: function(element) { self.editingArea = element },
-			dangerouslySetInnerHTML: { __html:this.getEditorContents() }
 		};
 
-		if (React.Children.count(children) === 0) {
-			return React.DOM.div(properties);
-		}
+		var customElement = React.Children.count(children)
+			? React.Children.only(children)
+			: null;
+
+		var editingArea = customElement
+			? React.cloneElement(customElement, properties)
+			: React.DOM.div(properties);
 
-		var editor = React.Children.only(children);
-		return React.cloneElement(editor, properties);
+		return editingArea;
 	},
 
 	render: function() {
 		return React.DOM.div({
 			id: this.props.id,
 			style: this.props.style,
+			key: this.state.generation,
 			className: ['quill'].concat(this.props.className).join(' '),
 			onKeyPress: this.props.onKeyPress,
 			onKeyDown: this.props.onKeyDown,