real-time markdown editor in React.js

app.js

//node/express server routes for editing

// edit a post
 router.get('/a/:id/edit', function(req, res) {
   Post.findById(req.params.id, function(err, post) {
     if (err) {
       res.send(err);

     } else {
       res.render('createPost', {
         title: "create post",
         post: JSON.stringify(post)
       });

     }
   });
  });


//update a post
  router.put('/a/:id', function(req, res) {
   Post.findById(req.params.id, function(err, post) {
     if (err) {
       res.send(err);

     } else {
      post.title = req.body.title;
      post.body = req.body.postBodyProcessed;
      post.bodyRaw = req.body.postBodyRaw;
      post.save(function(err) {
        if (err) {
          res.send(err);
        } else {
          res.redirect('/b/' + post._id);
        }
      });
     }
   });
  });

editor.handlebars

<div class="editor">
	<div id="Editor"></div>
	<div id="data" data="{{post}}"></div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>

	<script src="http://fb.me/react-0.8.0.js"></script>
	<script src="/edit.js"></script>
</div>

editor.jsx

/** @jsx React.DOM */

var converter = new Showdown.converter();

var Editor = React.createClass({
  getInitialState: function() {
    var text = "hi";
    var title = "[untitled]";
    var id = null;
    var data = document.getElementById('data').getAttribute('data');
    if (data) {
      data  = JSON.parse(data);
      text = data.bodyRaw || data.body;
      title = data.title;
      id = data._id;
    }
    return {
      postBody: text,
      title: title,
      id: id
     };
  },
  componentDidMount: function() {
    this.refs.textarea.getDOMNode().value = this.state.postBody;
    this.refs.titleArea.getDOMNode().value = this.state.title;
  },
  handleChange: function() {
    this.setState({postBody: this.refs.textarea.getDOMNode().value});
  },
  handleTitleChange: function() {
    this.setState({title: this.refs.titleArea.getDOMNode().value});
  },
  handleSubmit: function () {
    var data = JSON.stringify({
      'title': this.state.title,
      'postBodyRaw': this.state.postBody,
      'postBodyProcessed': converter.makeHtml(this.state.postBody)
    });

    var request = new XMLHttpRequest();
    //if this.state.id !== null set the post url to a/id ?
    var requestType = 'POST';
    var requestURL = '/a';
    if (this.state.id !== null) {
      requestType = 'PUT';
      requestURL = '/a/' + this.state.id;
    }
    request.open(requestType, requestURL, true);
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.send(data);
    setTimeout(function() {
      window.location.href = "/a";
    }, 1000);
  },
  render: function() {
    return (
      <div>
        <button 
          className="submit-post"
          onClick={this.handleSubmit} >
          Post!
        </button>


        <div className="edit-area">
          <input 
            onChange={this.handleTitleChange}
            value={this.state.title}
            ref="titleArea"
            />
          <textarea
            onChange={this.handleChange}
            ref="textarea"
            defaultValue={this.state.postBody} />
        </div>
        <div className="markdown">
          <div className="edit-title-area" 
            dangerouslySetInnerHTML={{
              __html: this.state.title
            }}>

          </div>
          <div
            dangerouslySetInnerHTML={{
              __html: converter.makeHtml(this.state.postBody)
            }}>
          </div>
        </div>
      </div>
    );
  }
});
React.renderComponent(<Editor />, document.getElementById('Editor'));