From a67d75e437e5234731a43b553633f877fe0758d9 Mon Sep 17 00:00:00 2001
From: kiliwalk <kilireg@qq.com>
Date: Sat, 24 Sep 2016 18:09:44 +0800
Subject: [PATCH] fix unwanted ui update when state changed from input

---
 dist/editor.js | 16 +++++++++++-----
 lib/editor.js  | 11 ++++++++---
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/dist/editor.js b/dist/editor.js
index 64abd3d0..d7fda6f0 100644
--- a/dist/editor.js
+++ b/dist/editor.js
@@ -40,7 +40,7 @@ var ReactMediumEditor = function (_React$Component) {
   function ReactMediumEditor(props) {
     _classCallCheck(this, ReactMediumEditor);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ReactMediumEditor).call(this, props));
+    var _this = _possibleConstructorReturn(this, (ReactMediumEditor.__proto__ || Object.getPrototypeOf(ReactMediumEditor)).call(this, props));
 
     _this.state = {
       text: _this.props.text
@@ -57,7 +57,6 @@ var ReactMediumEditor = function (_React$Component) {
 
       this.medium = new MediumEditor(dom, this.props.options);
       this.medium.subscribe('editableInput', function (e) {
-        _this2._updated = true;
         _this2.change(dom.innerHTML);
       });
     }
@@ -70,15 +69,20 @@ var ReactMediumEditor = function (_React$Component) {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       this.medium.destroy();
+      this._editorText = null;
     }
   }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.text !== this.state.text && !this._updated) {
+      if (nextProps.text !== this._editorText) {
         this.setState({ text: nextProps.text });
       }
-
-      if (this._updated) this._updated = false;
+    }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this._editorText === nextState.text) return false;
+      return true;
     }
   }, {
     key: 'render',
@@ -99,6 +103,8 @@ var ReactMediumEditor = function (_React$Component) {
   }, {
     key: 'change',
     value: function change(text) {
+      this._editorText = text;
+      this.setState({ text: text });
       if (this.props.onChange) this.props.onChange(text, this.medium);
     }
   }]);
diff --git a/lib/editor.js b/lib/editor.js
index b109fb3d..1f4b8a6f 100644
--- a/lib/editor.js
+++ b/lib/editor.js
@@ -25,7 +25,6 @@ export default class ReactMediumEditor extends React.Component {
 
     this.medium = new MediumEditor(dom, this.props.options);
     this.medium.subscribe('editableInput', (e) => {
-      this._updated = true;
       this.change(dom.innerHTML);
     });
   }
@@ -36,14 +35,18 @@ export default class ReactMediumEditor extends React.Component {
 
   componentWillUnmount() {
     this.medium.destroy();
+    this._editorText = null;
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.text !== this.state.text && !this._updated) {
+    if(nextProps.text !== this._editorText){
       this.setState({ text: nextProps.text });
     }
+  }
 
-    if (this._updated) this._updated = false;
+  shouldComponentUpdate(nextProps, nextState) {
+    if(this._editorText === nextState.text) return false;
+    return true;
   }
 
   render() {
@@ -62,6 +65,8 @@ export default class ReactMediumEditor extends React.Component {
   }
 
   change(text) {
+    this._editorText = text;
+    this.setState({text});
     if (this.props.onChange) this.props.onChange(text, this.medium);
   }
 }