The MarkedArea lets you switch between preview and editor.

Click the Edit / Preview buttons to see how it works.

<section className={classNames.root}>

  <header className={classNames.header}>
    <label htmlFor={id}>{label}</label>
    <MarkedToolbar
      isPreview={isPreview}
      {...this.props} />
  </header>

  <div className={classNames.textContainer}>

    {this.state.isPreview ?
      <MarkedPreview value={value} /> :
        <MarkedInput onChange={this.handleTextChange} value={value} />}

  </div>

</section>