Add support for other tag types

Add a property tagName that allows to set the type of tag that will be generated. Previously, only `div`s were possible. Fixes #11 Signed-off-by: @sebasgarcep
lovasoa · Jan 19, 2016 · f720f99 · f720f99
1 parent 161e06e
commit f720f99
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/lib/react-contenteditable.js b/lib/react-contenteditable.js
@@ -2,7 +2,7 @@
 
 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 _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
@@ -20,7 +20,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var ContentEditable = (function (_React$Component) {
+var ContentEditable = function (_React$Component) {
   _inherits(ContentEditable, _React$Component);
 
   function ContentEditable() {
@@ -37,14 +37,15 @@ var ContentEditable = (function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      return _react2.default.createElement('div', _extends({}, this.props, {
+      return _react2.default.createElement(this.props.tagName || 'div', _extends({}, this.props, {
         ref: function ref(e) {
           return _this2.htmlEl = e;
         },
         onInput: this.emitChange,
         onBlur: this.emitChange,
         contentEditable: !this.props.disabled,
-        dangerouslySetInnerHTML: { __html: this.props.html } }));
+        dangerouslySetInnerHTML: { __html: this.props.html }
+      }), this.props.children);
     }
   }, {
     key: 'shouldComponentUpdate',
@@ -72,6 +73,6 @@ var ContentEditable = (function (_React$Component) {
   }]);
 
   return ContentEditable;
-})(_react2.default.Component);
+}(_react2.default.Component);
 
 exports.default = ContentEditable;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-contenteditable",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React component representing a <div> with editable contents",
   "main": "./lib/react-contenteditable.js",
   "peerDependencies": {
@@ -20,16 +20,16 @@
     "url": "https://github.com/lovasoa/react-contenteditable.git"
   },
   "devDependencies": {
-    "babel-cli": "^6.1.18",
-    "babel-plugin-transform-react-jsx": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18"
+    "babel-cli": ">=6",
+    "babel-plugin-transform-object-assign": ">=6",
+    "babel-preset-es2015": ">=6"
   },
   "babel": {
-    "plugins": [
-      "transform-react-jsx"
-    ],
     "presets": [
       "es2015"
+    ],
+    "plugins": [
+      "transform-object-assign"
     ]
   },
   "scripts": {

diff --git a/src/react-contenteditable.js b/src/react-contenteditable.js
@@ -7,13 +7,16 @@ export default class ContentEditable extends React.Component {
   }
 
   render() {
-    return <div
-      {...this.props}
-      ref={(e) => this.htmlEl = e}
-      onInput={this.emitChange}
-      onBlur={this.emitChange}
-      contentEditable={!this.props.disabled}
-      dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
+    return React.createElement(
+      this.props.tagName || 'div',
+      Object.assign({}, this.props, {
+        ref: (e) => this.htmlEl = e,
+        onInput: this.emitChange,
+        onBlur: this.emitChange,
+        contentEditable: !this.props.disabled,
+        dangerouslySetInnerHTML: {__html: this.props.html}
+      }),
+      this.props.children);
   }
 
   shouldComponentUpdate(nextProps) {