MarkdownPad

/*Downloaded from https://www.codeseek.co/0damian/markdownpad-RGwaBQ */
body {
  background: #e5e5e5;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}
body * {
  box-sizing: border-box;
}
body h1, body h2 {
  margin: 0 auto 18px;
  font-weight: 400;
}
body .header {
  text-align: center;
  margin-top: 24px;
  font-weight: 400;
  display: table;
  margin: 0 auto 32px;
  padding-bottom: 12px;
  border-bottom: 2px solid #5f5f5f;
  color: #3f3f3f;
}
body .one-half {
  float: left;
  margin: 0 2%;
  width: 46%;
  padding: 15px;
  min-height: 80vh;
}
body textarea, body .content {
  background: #f5f5f5;
  font-size: 16px;
  border: none;
  color: #3f3f3f;
}
body textarea:focus, body .content:focus {
  outline: none;
}
@media screen and (max-width: 600px) {
  body .one-half {
    width: 96%;
  }
}
body img {
  display: block;
  margin: 6px auto;
}

/*Downloaded from https://www.codeseek.co/0damian/markdownpad-RGwaBQ */
var PropTypes = React.PropTypes;
// Add all business logic to main component
var Editor = React.createClass({
  displayName: "Editor",

  // set default text required by MdInput component
  getInitialState: function getInitialState() {
    // Add potentially dangerous pepe
    return {
      text: '##Type your *markdown* here!  ![pepe](https://66.media.tumblr.com/2a62809f53d0a566bcbbfad85da66600/tumblr_nqbo02EJx51us00yto1_250.gif)'
    };
  },
  // pass textarea content to parent 
  handleChange: function handleChange(e) {
    e.preventDefault();
    this.setState({ text: event.target.value });
  },
  // provide function for raw html trusting Marked library
  rawMarkup: function rawMarkup() {
    return { __html: marked(this.state.text) };
  },
  render: function render() {
    return React.createElement(
      "div",
      null,
      "\xA0 \xA0 \xA0 \xA0",
      React.createElement(
        "h1",
        { className: "header" },
        "MarkdownPad"
      ),
      React.createElement(MdInput
      /* Pass text value to output */
      , { text: this.state.text
        /* Make functions available to children */
        , onHandleChange: this.handleChange
      }),
      React.createElement(HtmlOutput
      /* Make functions available to children */
      , { showHtml: this.rawMarkup
      })
    );
  }
});

// Create input / output as stateless components
function MdInput(props) {
  return React.createElement("textarea", {
    // Use logic from parent component to handle input
    onChange: props.onHandleChange,
    defaultValue: props.text
    // make value available to parent's state
    , value: props.text,
    className: "one-half"
  });
}
// Require default text and input-handling function
MdInput.propTypes = {
  text: PropTypes.string.isRequired,
  onHandleChange: PropTypes.func.isRequired
  // Assume Marked library as trusted
};function HtmlOutput(props) {
  return React.createElement("div", {
    className: "content one-half",
    dangerouslySetInnerHTML: props.showHtml()
  });
}
// Require html-rendering function
HtmlOutput.propTypes = {
  showHtml: PropTypes.func.isRequired

  // Render parent container
};ReactDOM.render(React.createElement(Editor, null), document.getElementById('app'));