/* @flow */

import React, { Component } from 'react';
import { Editor } from '../../../src';
import draftToHtml from 'draftjs-to-html';
import Menu from '../Menu';
import styles from './styles.css';

export default class Demo1 extends Component {

  state: any = {
    editorContent: undefined,
  };

  _onEditorChange: Function = (editorContent) => {
    this.setState({
      editorContent,
    });
  };

  render() {
    const { editorContent } = this.state;
    return (
      <div className={styles.demo1_root}>
        <Menu />
        <div className={styles.demo1_label}>
          Playground for react wysiwyg editors, toolbar appears as you click the editor.
        </div>
        <div className={styles.demo1_editorWrapper}>
          <Editor
            toolbarClassName={styles.demo1_toolbar}
            wrapperClassName={styles.demo1_wrapper}
            editorClassName={styles.demo1_editor}
            onChange={this._onEditorChange}
          />
        </div>
        <textarea
          className={styles.demo1_content}
          value={draftToHtml(editorContent)}
        >
        </textarea>
      </div>
    );
  }
}
