Edit textbox on clicking an image & save on clicking outside

This was my response to a stackoverflow question: http://stackoverflow.com/questions/36045974/how-to-create-an-editable-textbox/36046548#36046548

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

Jquery list attributes of an element

$('#ElemId').each(function() {
  $.each(this.attributes, function() {
    // this.attributes is not a plain object, but an array
    // of attribute nodes, which contain both the name and value
    if(this.specified) {
      console.log(this.name, this.value);
    }
  });
});

SVG Add Class, Delete Class for Jquery

svgAddClass($(".myClass"), "selected_class");
svgRemoveClass($(".myClass"), "selected_class");

/**
  date: 26th Jan 2016
  Jquery doesn't support add class for svg currently
  workaround function for that
**/

function svgAddClass(svgElem, className){
  var classList = svgElem.attr('class') + " " +className;
  console.log('classList', classList);
  svgElem.attr('class', classList);
}

function svgRemoveClass(svgElem, className){
  var classList = svgElem.attr('class').replace(className, '');
  console.log('classList', classList);
  svgElem.attr('class', classList);
}