add placeholder to the div, update example with additional prop

README.md

@@ -12,7 +12,10 @@ npm install react-contenteditable --save
   var ContentEditable = require("react-contenteditable");
   var MyComponent = React.createClass({
     getInitialState: function(){
-      return {html: "<b>Hello <i>World</i></b>"};
+      return {
+        placeholder: "<b>placeholder...</b>",
+        html: "<b>Hello <i>World</i></b>"
+      };
     },
 
     handleChange: function(evt){
@@ -22,6 +25,7 @@ npm install react-contenteditable --save
     render: function(){
       return <ContentEditable
                 html={this.state.html} // innerHTML of the editable div
+                placeholder={this.state.placeholder} // placeholder on the div
                 disabled={false}       // use true to disable edition
                 onChange={this.handleChange} // handle innerHTML change
               />

lib/react-contenteditable.js

@@ -25,11 +25,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var ContentEditable = function (_React$Component) {
   _inherits(ContentEditable, _React$Component);
 
-  function ContentEditable() {
+  function ContentEditable(props) {
     _classCallCheck(this, ContentEditable);
 
-    var _this = _possibleConstructorReturn(this, (ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call(this));
+    var _this = _possibleConstructorReturn(this, (ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call(this, props));
 
+    _this.html = '';
+    _this.active = false;
     _this.emitChange = _this.emitChange.bind(_this);
     return _this;
   }
@@ -42,16 +44,35 @@ var ContentEditable = function (_React$Component) {
       var _props = this.props,
           tagName = _props.tagName,
           html = _props.html,
-          props = _objectWithoutProperties(_props, ['tagName', 'html']);
+          placeholder = _props.placeholder,
+          props = _objectWithoutProperties(_props, ['tagName', 'html', 'placeholder']);
+
+      if (placeholder !== undefined && html.trim().length <= 0 && !this.active) {
+        this.html = placeholder;
+      } else {
+        this.html = html;
+      }
 
       return _react2.default.createElement(tagName || 'div', _extends({}, props, {
         ref: function ref(e) {
           return _this2.htmlEl = e;
         },
         onInput: this.emitChange,
-        onBlur: this.props.onBlur || this.emitChange,
+        onFocus: function onFocus(evt) {
+          _this2.active = true;
+          if (placeholder !== undefined && _this2.htmlEl.innerHTML === placeholder) {
+            _this2.html = html;
+            _this2.htmlEl.innerHTML = '';
+          }
+        },
+        onBlur: function onBlur(evt) {
+          _this2.active = false;
+          if (_this2.htmlEl.innerHTML.length === 0) _this2.htmlEl.innerHTML = placeholder;
+
+          if (_this2.props.onBlur) _this2.props.onBlur(evt);else _this2.emitChange(evt);
+        },
         contentEditable: !this.props.disabled,
-        dangerouslySetInnerHTML: { __html: html }
+        dangerouslySetInnerHTML: { __html: this.html }
       }), this.props.children);
     }
   }, {

src/react-contenteditable.js

@@ -1,23 +1,47 @@
 import React from 'react';
 
 export default class ContentEditable extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
+    this.html = '';
+    this.active = false;
     this.emitChange = this.emitChange.bind(this);
   }
 
   render() {
-    var { tagName, html, ...props } = this.props;
+    var { tagName, html, placeholder, ...props } = this.props;
+
+    if (placeholder !== undefined && html.trim().length <= 0 && !this.active) {
+      this.html = placeholder;
+    } else {
+      this.html = html;
+    }
 
     return React.createElement(
       tagName || 'div',
       {
         ...props,
         ref: (e) => this.htmlEl = e,
         onInput: this.emitChange,
-        onBlur: this.props.onBlur || this.emitChange,
+        onFocus: (evt) => {
+          this.active = true;
+          if (placeholder !== undefined && this.htmlEl.innerHTML === placeholder) {
+            this.html = html;
+            this.htmlEl.innerHTML = '';
+          }
+        },
+        onBlur: (evt) => {
+          this.active = false;
+          if (this.htmlEl.innerHTML.length === 0)
+            this.htmlEl.innerHTML = placeholder;
+
+          if (this.props.onBlur)
+            this.props.onBlur(evt)
+          else 
+            this.emitChange(evt)
+        },
         contentEditable: !this.props.disabled,
-        dangerouslySetInnerHTML: {__html: html}
+        dangerouslySetInnerHTML: {__html: this.html}
       },
       this.props.children);
   }