React JS Markdown Editor

The React JS Demo from their website.

by Matt Diebolt

HTML

<script src="http://facebook.github.io/react/js/showdown.js"></script>
<div class="container"></div>

JavaScript

var converter = new Showdown.converter();

var MarkdownEditor = React.createClass({displayName: 'MarkdownEditor',
  getInitialState: function() {
    return {value: 'Type some *markdown* here!'};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.getDOMNode().value});
  },
  render: function() {
    return (
      React.DOM.div( {className:"MarkdownEditor"}, 
        React.DOM.h3(null, "Input"),
        React.DOM.textarea(
          {onChange:this.handleChange,
          ref:"textarea",
          defaultValue:this.state.value} ),
        React.DOM.h3(null, "Output"),
        React.DOM.div(
          {className:"content",
          dangerouslySetInnerHTML:{
            __html: converter.makeHtml(this.state.value)
          }}
        )
      )
    );
  }
});

React.renderComponent(MarkdownEditor {}), document.querySelector(".container")