From afb9770a19a60ef0f4e3eca6e4810b7e60148a35 Mon Sep 17 00:00:00 2001
From: Michal Zalecki <michal@michalzalecki.com>
Date: Tue, 18 Apr 2017 00:40:28 +0200
Subject: [PATCH] Allow to manually reference HTML element

---
 lib/react-contenteditable.js | 41 +++++++++++++++++++-----------------
 src/react-contenteditable.js | 19 ++++++++++-------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/lib/react-contenteditable.js b/lib/react-contenteditable.js
index 3e2b7c0..a240627 100644
--- a/lib/react-contenteditable.js
+++ b/lib/react-contenteditable.js
@@ -26,28 +26,42 @@ var ContentEditable = function (_React$Component) {
   _inherits(ContentEditable, _React$Component);
 
   function ContentEditable() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, ContentEditable);
 
-    var _this = _possibleConstructorReturn(this, (ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call(this));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.emitChange = _this.emitChange.bind(_this);
-    return _this;
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call.apply(_ref, [this].concat(args))), _this), _this.emitChange = function (evt) {
+      if (!_this.htmlEl) return;
+      var html = _this.htmlEl.innerHTML;
+      if (_this.props.onChange && html !== _this.lastHtml) {
+        evt.target = { value: html };
+        _this.props.onChange(evt);
+      }
+      _this.lastHtml = html;
+    }, _this.refEl = function (el) {
+      if (!_this.htmlEl) {
+        _this.htmlEl = el;
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(ContentEditable, [{
     key: 'render',
     value: function render() {
-      var _this2 = this;
-
       var _props = this.props,
           tagName = _props.tagName,
           html = _props.html,
           props = _objectWithoutProperties(_props, ['tagName', 'html']);
 
       return _react2.default.createElement(tagName || 'div', _extends({}, props, {
-        ref: function ref(e) {
-          return _this2.htmlEl = e;
-        },
+        ref: this.refEl
+      }, typeof tagName === 'function' ? { refEl: this.refEl } : {}, {
         onInput: this.emitChange,
         onBlur: this.props.onBlur || this.emitChange,
         contentEditable: !this.props.disabled,
@@ -77,17 +91,6 @@ var ContentEditable = function (_React$Component) {
         this.htmlEl.innerHTML = this.props.html;
       }
     }
-  }, {
-    key: 'emitChange',
-    value: function emitChange(evt) {
-      if (!this.htmlEl) return;
-      var html = this.htmlEl.innerHTML;
-      if (this.props.onChange && html !== this.lastHtml) {
-        evt.target = { value: html };
-        this.props.onChange(evt);
-      }
-      this.lastHtml = html;
-    }
   }]);
 
   return ContentEditable;
diff --git a/src/react-contenteditable.js b/src/react-contenteditable.js
index f4bcd51..e341e4a 100644
--- a/src/react-contenteditable.js
+++ b/src/react-contenteditable.js
@@ -1,11 +1,6 @@
 import React from 'react';
 
 export default class ContentEditable extends React.Component {
-  constructor() {
-    super();
-    this.emitChange = this.emitChange.bind(this);
-  }
-
   render() {
     var { tagName, html, ...props } = this.props;
 
@@ -13,13 +8,15 @@ export default class ContentEditable extends React.Component {
       tagName || 'div',
       {
         ...props,
-        ref: (e) => this.htmlEl = e,
+        ref: this.refEl,
+        ...(typeof tagName === 'function' ? { refEl: this.refEl } : {}),
         onInput: this.emitChange,
         onBlur: this.props.onBlur || this.emitChange,
         contentEditable: !this.props.disabled,
         dangerouslySetInnerHTML: {__html: html}
       },
-      this.props.children);
+      this.props.children
+    );
   }
 
   shouldComponentUpdate(nextProps) {
@@ -44,7 +41,7 @@ export default class ContentEditable extends React.Component {
     }
   }
 
-  emitChange(evt) {
+  emitChange = (evt) => {
     if (!this.htmlEl) return;
     var html = this.htmlEl.innerHTML;
     if (this.props.onChange && html !== this.lastHtml) {
@@ -53,4 +50,10 @@ export default class ContentEditable extends React.Component {
     }
     this.lastHtml = html;
   }
+
+  refEl = (el) => {
+    if (!this.htmlEl) {
+      this.htmlEl = el;
+    }
+  };
 }