var initialMarkdown = `Heading
=======

Sub-heading
-----------

### Another deeper heading

Paragraphs are separated by a blank line.

leave 2 spaces at the end of a line to do a  
line break.

Text attributes *italic*, **bold**, \`monospace\`, ~~strikethrough~~.

Shopping List
- apples
- oranges
- bananas`;

var MarkdownEdit = React.createClass({
  getInitialState: function() {
    return {text: initialMarkdown};
  },
  handleTextChange: function(e) {
    var text = e.target.value
    this.setState({text: text});
    this.props.onTextChange({text: text.trim()});
  },
  render: function() {
    return (
      <div id="markdownEdit">
        <textarea type="text"
          autofocus="autofocus"
          placeholder="Type some Markdown Here"
          value={this.state.text}
          onChange={this.handleTextChange}
        ></textarea>
      </div>
    );
  }
});

var MarkdownView = React.createClass({
  rawMarkup: function() {
    const markdownString = this.props.data.text.toString();
    const markdownText = markdownString.length === 0 ? 
          `Don't know what markdown is? Read MarkdownGuide.org for a primer.` : markdownString;
    var rawMarkup = marked(markdownText, {sanitize: true});
    return { __html: rawMarkup };
  },
  render: function() {
    return (
      <div id="markdownView">
         <div dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    );
  }
});

var MarkdownPreviewer = React.createClass({
  getInitialState: function() {
    return {text: {text: initialMarkdown}};
  },
  handleTextChange: function(text) {
    this.setState({text: text});
  },
  render: function() {
    return (
      <div id="markdownPreviewer">
        <MarkdownEdit onTextChange={this.handleTextChange} />
        <MarkdownView data={this.state.text}/>
      </div>
    );
  }
});

ReactDOM.render(
  <MarkdownPreviewer />,
  document.getElementById('mount-point')
);