ReactJS Markdown Editor

index.jade

h1.header  Markdown Previewer
#app
// https://daringfireball.net/projects/markdown/basics

reactjs-markdown-editor.markdown

ReactJS Markdown Editor

A Pen by Sonya Moisset on CodePen.

License.

script.babel

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 
`A First Level Header
====================

A Second Level Header
---------------------

The quick brown fox jumped over the lazy
dog's back.

### Header 3

> This is a blockquote.
> 
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote
`
    };
  }

  handleChange() {
    this.setState({value: this.refs.textarea.value});
  }

  rawMarkup() {
    return { __html: marked(this.state.value, {sanitize: true}) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <div className="box demo-card-square mdl-card mdl-shadow--2dp">
          <div className="mdl-card__title">
            <h2 className="mdl-card__title-text">Input</h2>
          </div>
          <div className="mdl-card__supporting-text">
            <textarea
            onChange={() => this.handleChange()}
            ref="textarea"
            defaultValue={this.state.value} />
          </div>
        </div>
        
        <div className="box demo-card-square mdl-card mdl-shadow--2dp">
          <div className="mdl-card__title">
            <h2 className="mdl-card__title-text">Output</h2>
          </div>
          <div className="mdl-card__supporting-text">
            <div
            className="content"
            dangerouslySetInnerHTML={this.rawMarkup()}
          />
          </div>
        </div>
     </div>
    );
  }
};

React.render(<MarkdownEditor />, document.getElementById('app'));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>

style.sass

body
  font-family: 'Open Sans', sans-serif
  
.header
  color: #46B6AC
  text-align: center

#app
  display: flex
  align-items: center
  justify-content: center

  .MarkdownEditor 
    display: flex
    justify-content: center
    flex-wrap: wrap
    width: 100%
    height: 100%

    .box
      padding: 5px 8px
      width: 50%

  .demo-card-square > .mdl-card__title 
    color: #fff
    background: url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC

  textarea
    border-color: #46B6AC
    width: 100%
    min-height: 500px

styles

<link href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="stylesheet" />