React JS Markdown Editor

Demo from the React homepage. Uses JSFiddle integration for their JSX transformer.

by Matt Diebolt

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://facebook.github.io/react/js/showdown.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div class="container"></div>

CSS

textarea {
    font-size: 14px;
    padding: 0.5em;
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    resize: none;
}

JavaScript 1.7

/** @jsx React.DOM */

var converter = new Showdown.converter();

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

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