static-cms/src/components/Widgets/MarkdownControl.js

import React, { PropTypes } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import { stateToMarkdown } from 'draft-js-export-markdown';
import { stateFromMarkdown } from 'draft-js-import-markdown';

export default class MarkdownControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createWithContent(stateFromMarkdown(props.value || ''))
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleKeyCommand = this.handleKeyCommand.bind(this);
  }

  handleChange(editorState) {
    const content = editorState.getCurrentContent();
    this.setState({ editorState });
    this.props.onChange(stateToMarkdown(content));
  }

  handleKeyCommand(command) {
    const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
    if (newState) {
      this.handleChange(newState);
      return true;
    }
    return false;
  }

  render() {
    const { editorState } = this.state;
    return (
      <Editor
          editorState={editorState}
          onChange={this.handleChange}
          handleKeyCommand={this.handleKeyCommand}
      />);
  }
}

MarkdownControl.propTypes = {
  onChange: PropTypes.func.isRequired,
  value: PropTypes.node,
};