Soreine/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <!-- Immutable -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
        <!-- React -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
        <!-- ReactDOM -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
        <!-- Draft -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.js"></script>
        <!-- babel -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.min.css">
    </head>

    <body>
        <div id="content"></div>

        <p id="initial" hidden="true">
Accusantium libero illum tempore provident doloribus voluptate. Blanditiis et recusandae unde non necessitatibus. Nulla qui libero optio doloremque dolorum accusamus.

Sapiente est, un mot par ci, et corporis. Porro magni sit similique quo. Molestias rerum quo ipsum ut. Aut sint id non mollitia.

Voluptas hic quia dolores quo inventore. Quasi minima sit ut culpa consequuntur et. Inventore perferendis nihil aut ipsa odio. Possimus ratione temporibus et aut. Dicta incidunt magni voluptatem.

Molestiae optio et quam at labore voluptatem animi. Sed libero odio repellendus iure omnis eos. Alias sapiente placeat est provident repellendus. Earum minima vero nesciunt voluptatem ipsa. Sint vitae et hic eveniet sunt. Doloremque ea esse consequatur.
        </p>

        <script type="text/babel">
         /* globals React, ReactDOM, Draft */

         var Editor = React.createClass({

             propTypes: {
                 text: React.PropTypes.string
             },

             getInitialState: function () {
                 var RedDecorator = new Draft.CompositeDecorator([{
                     strategy: function (contentBlock, callback) {
                         // Highlight in red the first 10 characters
                         callback(0, 10);
                     },
                     component: RedSpan
                 }]);

                 var content = Draft.ContentState.createFromText(text);
                 var editorState = Draft.EditorState.createWithContent(content, RedDecorator);
                 return {
                     editorState: editorState
                 };
             },

             onChange: function (editorState) {
                 this.setState({
                     editorState: editorState
                 });
             },

             render: function () {
                 return <Draft.Editor
                    editorState={this.state.editorState}
                    onChange={this.onChange}
                 />;
             }
         });

         var RedSpan = function (props) {
             return <span {...props} style={{color: '#f00'}}>{props.children}</span>;
         };

         // ---- main

         var text = document.getElementById('initial').innerText;
         ReactDOM.render(
             <Editor text={text}></Editor>,
             document.getElementById('content')
         );
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- Immutable -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
	<!-- React -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
	<!-- ReactDOM -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
	<!-- Draft -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.js"></script>
	<!-- babel -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.min.css">
	</head>

	<body>
	<div id="content"></div>

	<p id="initial" hidden="true">
	Accusantium libero illum tempore provident doloribus voluptate. Blanditiis et recusandae unde non necessitatibus. Nulla qui libero optio doloremque dolorum accusamus.

	Sapiente est, un mot par ci, et corporis. Porro magni sit similique quo. Molestias rerum quo ipsum ut. Aut sint id non mollitia.

	Voluptas hic quia dolores quo inventore. Quasi minima sit ut culpa consequuntur et. Inventore perferendis nihil aut ipsa odio. Possimus ratione temporibus et aut. Dicta incidunt magni voluptatem.

	Molestiae optio et quam at labore voluptatem animi. Sed libero odio repellendus iure omnis eos. Alias sapiente placeat est provident repellendus. Earum minima vero nesciunt voluptatem ipsa. Sint vitae et hic eveniet sunt. Doloremque ea esse consequatur.
	</p>

	<script type="text/babel">
	/* globals React, ReactDOM, Draft */

	var Editor = React.createClass({

	propTypes: {
	text: React.PropTypes.string
	},

	getInitialState: function () {
	var RedDecorator = new Draft.CompositeDecorator([{
	strategy: function (contentBlock, callback) {
	// Highlight in red the first 10 characters
	callback(0, 10);
	},
	component: RedSpan
	}]);

	var content = Draft.ContentState.createFromText(text);
	var editorState = Draft.EditorState.createWithContent(content, RedDecorator);
	return {
	editorState: editorState
	};
	},

	onChange: function (editorState) {
	this.setState({
	editorState: editorState
	});
	},

	render: function () {
	return <Draft.Editor
	editorState={this.state.editorState}
	onChange={this.onChange}
	/>;
	}
	});

	var RedSpan = function (props) {
	return <span {...props} style={{color: '#f00'}}>{props.children}</span>;
	};

	// ---- main

	var text = document.getElementById('initial').innerText;
	ReactDOM.render(
	<Editor text={text}></Editor>,
	document.getElementById('content')
	);
	</script>
	</body>
	</html>