Add placeHolder prop for EditableText

skins/base/views/atoms/EditableText.js

@@ -43,14 +43,22 @@ module.exports = React.createClass({
     },
 
     onFinish: function(ev) {
+        if (ev.target.value) {
             this.setValue(ev.target.value);
+        } else {
+            this.cancelEdit();
+        }
     },
 
     render: function() {
         var editable_el;
 
         if (this.state.phase == this.Phases.Display) {
+            if (this.state.value) {
                 editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
+            } else {
+                editable_el = <div ref="display_div" onClick={this.onClickDiv}><i>{this.props.placeHolder}</i></div>;
+            }
         } else if (this.state.phase == this.Phases.Edit) {
             editable_el = (
                 <div>

src/controllers/atoms/EditableText.js

@@ -22,6 +22,7 @@ module.exports = {
     propTypes: {
         onValueChanged: React.PropTypes.func,
         initalValue: React.PropTypes.string,
+        placeHolder: React.PropTypes.string,
     },
 
     Phases: {
@@ -33,6 +34,7 @@ module.exports = {
         return {
             onValueChanged: function() {},
             initalValue: '',
+            placeHolder: 'Click to set',
         };
     },