Normalize HTML before comparison

lib/react-contenteditable.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -50,12 +50,14 @@ var ContentEditable = function (_React$Component) {
   }, {
     key: 'shouldComponentUpdate',
     value: function shouldComponentUpdate(nextProps) {
-      return !this.htmlEl || nextProps.html !== this.htmlEl.innerHTML || this.props.disabled !== nextProps.disabled;
+      var currentHtml = this.htmlEl && this.htmlEl.innerHTML;
+      return !currentHtml || nextProps.html !== currentHtml && this.normalizeHtml(nextProps.html) !== currentHtml || this.props.disabled !== nextProps.disabled;
     }
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      if (this.htmlEl && this.props.html !== this.htmlEl.innerHTML) {
+      var currentHtml = this.htmlEl && this.htmlEl.innerHTML;
+      if (this.props.html !== currentHtml && this.normalizeHtml(this.props.html) !== currentHtml) {
         this.htmlEl.innerHTML = this.props.html;
       }
     }
@@ -70,10 +72,25 @@ var ContentEditable = function (_React$Component) {
       }
       this.lastHtml = html;
     }
+  }, {
+    key: 'normalizeHtml',
+    value: function normalizeHtml(htmlValue) {
+      // Skip browser reformatting when rendering on the server.
+      if (typeof window === 'undefined') {
+        return htmlValue;
+      }
+
+      // Run the HTML string through the browser's reformatting, otherwise it
+      // could throw off our comparison.
+      var tempContainer = document.createElement('div');
+      tempContainer.innerHTML = htmlValue;
+      return tempContainer.innerHTML;
+    }
   }]);
 
   return ContentEditable;
 }(_react2.default.Component);
 
 exports.default = ContentEditable;
 module.exports = exports['default'];
+

src/react-contenteditable.js

@@ -20,13 +20,18 @@ export default class ContentEditable extends React.Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return !this.htmlEl || nextProps.html !== this.htmlEl.innerHTML ||
-            this.props.disabled !== nextProps.disabled;
+    const currentHtml = this.htmlEl && this.htmlEl.innerHTML;
+    return !currentHtml ||
+        nextProps.html !== currentHtml &&
+        this.normalizeHtml(nextProps.html) !== currentHtml ||
+        this.props.disabled !== nextProps.disabled;
   }
 
   componentDidUpdate() {
-    if ( this.htmlEl && this.props.html !== this.htmlEl.innerHTML ) {
-     this.htmlEl.innerHTML = this.props.html;
+    const currentHtml = this.htmlEl && this.htmlEl.innerHTML;
+    if ( this.props.html !== currentHtml &&
+          this.normalizeHtml(this.props.html) !== currentHtml ) {
+      this.htmlEl.innerHTML = this.props.html;
     }
   }
 
@@ -39,4 +44,17 @@ export default class ContentEditable extends React.Component {
     }
     this.lastHtml = html;
   }
+
+  normalizeHtml(htmlValue) {
+    // Skip browser reformatting when rendering on the server.
+    if (typeof window === 'undefined') {
+      return htmlValue;
+    }
+
+    // Run the HTML string through the browser's reformatting, otherwise it
+    // could throw off our comparison.
+    const tempContainer = document.createElement('div')
+    tempContainer.innerHTML = htmlValue
+    return tempContainer.innerHTML
+  }
 }