React ContentEditable Div

A custom contentEditable div, with placeholder text styling:

Part 1: The JSX component file

var ContentEditableDiv = module.exports = React.createClass({
  
  handleKeyPress: function(e){

    e.stopPropagation();
    if(getKeyCode(e) == 13) {
      e.preventDefault();
      e.target.blur();
      if(this.props.onEnterKey) this.props.onEnterKey(e);
    }
  },

  onBlur: function(e){

      e.stopPropagation();
      // console.log('blurring called from content_editable div react');
      if(this.props.onBlur) {
        console.log('e', e);
        var el = $(e.target);
        var text = $.trim(el.text());
        el.text(text); //just to keep it in sync
        this.props.onBlur(text, e);
      }
  },
  
  onKeyDown: function(e){
    if(this.props.onKeyDown) this.props.onKeyDown(e);
  },

  render: function(){
      // console.log('render content content_editable', this.props.text.length);
      var klass = this.props.class + " content_editable";
      var placeholder = this.props.placeholder ? this.props.placeholder : "Type here";
      return (

<div classname="{klass}" contenteditable="{true}" id="{this.props.id}" onblur="{this.onBlur}" onkeydown="{this.props.onKeyDown}" onkeypress="{this.handleKeyPress}" placeholder="{placeholder}">

{this.props.text}

</div>
)
  }
});

Part 2: CSS Styling:

.content_editable
  border: none
  outline: none
  height: 17.55px
  padding-right: 2px !important
  &:focus
    white-space: normal
    border-bottom: 1px solid black
  

.content_editable:empty:before  
  content: attr(placeholder)
  display: block /* For Firefox */
  &:hover
    cursor: text


.content_editable:focus:empty:before
  content: ""
  display: block /* For Firefox */
  margin-top: 19px /* To make sure the border doesn't go up */
  min-width: 90px