Draft.jsプロトタイプ

HTML

<script src="https://npmcdn.com/react/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/immutable/dist/immutable.min.js"></script>
<script src="https://npmcdn.com/draft-js/dist/Draft.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-semantify/0.5.1/react-semantify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.3/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.3/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<h1>Playground!</h1>
<div id="root"></div>

CSS

/**
 * @providesModule DraftEditor
 * @permanent
 */

/**
 * We inherit the height of the container by default
 */

.DraftEditor-root {
  background: #fff;
  border: 0.5px solid #ddd;
  font-family: 'Helvetica', serif;
  font-size: 14px;
  padding: 15px;
},
.DraftEditor-editorContainer,
.public-DraftEditor-content {
  height: inherit;
  text-align: initial;
}

.DraftEditor-root {
  position: relative;
}

/**
 * Zero-opacity background used to allow focus in IE. Otherwise, clicks
 * fall through to the placeholder.
 */

.DraftEditor-editorContainer {
  background-color: rgba(255, 255, 255, 0);
  /* Repair mysterious missing Safari cursor */
  border-left: 0.1px solid transparent;
  position: relative;
  z-index: 1;
}

.public-DraftEditor-content {
  outline: none;
  white-space: pre-wrap;
}

.public-DraftEditor-block {
  position: relative;
}

.DraftEditor-alignLeft .public-DraftEditor-block {
  text-align: left;
}

.DraftEditor-alignLeft .public-DraftEditorPlaceholder/root {
  left: 0;
  text-align: left;
}

.DraftEditor-alignCenter .public-DraftEditor-block {
  text-align: center;
}

.DraftEditor-alignCenter .public-DraftEditorPlaceholder/root {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.DraftEditor-alignRight .public-DraftEditor-block {
  text-align: right;
}

.DraftEditor-alignRight .public-DraftEditorPlaceholder/root {
  right: 0;
  text-align: right;
}
/**
 * @providesModule DraftEditorPlaceholder
 */

.public-DraftEditorPlaceholder-root {
  color: #9197a3;
  position: absolute;
  z-index: 0;
}

.public-DraftEditorPlaceholder-hasFocus {
  color: #bdc1c9;
}

.DraftEditorPlaceholder-hidden {
  display: none;
}
/**
 * @providesModule DraftStyleDefault
 */

.public-DraftStyleDefault-block {
  position: relative;
  white-space: pre-wrap;
}

/* @noflip */

.public-DraftStyleDefault-ltr {
  direction: ltr;
  text-align: left;
}

/* @noflip */

.public-DraftStyleDefault-rtl {
  direction: rtl;
  text-align: right;
}

/**
 * These rules provide...

Babel + JSX

const { render } = ReactDOM;
const { Editor, EditorState, ContentState, RichUtils, DefaultDraftBlockRenderMap, Modifier,  convertFromHTML } = Draft;

var StyleButtons = React.createClass({
  onBlockStyle: function(e) {
    e.preventDefault();
    this.props.toggleBlockStyle(e.currentTarget.attributes['data-value'].value);
  },

  onInlineStyle: function(e) {
    e.preventDefault();
    this.props.toggleInlineStyle(e.currentTarget.attributes['data-value'].value);
  },

	renderButton: function(spec) {
  	var className = "ui button ";
    if (spec.type == spec.value || spec.type.has && spec.type.has(spec.value))
    	className += 'active';
  	return (<div className={className} onClick={spec.click} data-value={spec.value}><i className={spec.icon+' icon'} style={spec.style}/></div>);
  },

  render: function() {
  	var selection = this.props.editorState.getSelection();
    var blockType = this.props.editorState.
    			getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
    var currentStyle = this.props.editorState.getCurrentInlineStyle();

		var specs = [
    		{ icon: 'header', value: 'header-one', click: this.onBlockStyle, type: blockType },
    		{ icon: 'bold',   value: 'BOLD',       click: this.onInlineStyle, type: currentStyle },
    		{ icon: 'underline', value: 'UNDERLINE', click: this.onInlineStyle, type: currentStyle },
    		{ icon: 'font',   value: 'YELLOWBACK', click: this.onInlineStyle, type: currentStyle, style: {backgroundColor: 'yellow'} },
    		{ icon: 'red font', value: 'REDFONT', click: this.onInlineStyle, type: currentStyle },
    		{ icon: 'unordered list', value: 'unordered-list-item', click: this.onBlockStyle, type: blockType },
    		{ icon: 'ordered list', value: 'ordered-list-item', click: this.onBlockStyle, type: blockType },
    		{ icon: 'code', value: 'code-block', click: this.onBlockStyle, type: blockType }];

		return (
      <div className="ui compact tiny icon buttons">
      	{specs.map((spec)=> { return...