Demo

package.json

@@ -9,7 +9,8 @@
     "draft-js": "^0.10.0",
     "react": "^15.4.2",
     "react-bootstrap": "^0.30.7",
-    "react-dom": "^15.4.2"
+    "react-dom": "^15.4.2",
+    "react-json-pretty": "^1.3.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -7,7 +7,7 @@ class App extends Component {
   render() {
     return (
       <Grid>
-         <PageHeader>Simple text editor</PageHeader>
+         <PageHeader>Serialization</PageHeader>
         <Row>
           <Col xs={12}>
             <SimpleEditor />

src/SimpleEditor.js

@@ -1,33 +1,113 @@
 import React from 'react';
-import {Editor, EditorState} from 'draft-js';
-import {Panel} from 'react-bootstrap';
-import './SimpleEditor.css'
+import {Editor, EditorState, ContentState, CharacterMetadata, convertToRaw } from 'draft-js';
+import {Panel, Button} from 'react-bootstrap';
+import './SimpleEditor.css';
+import content from './content';
+import JSONPretty from 'react-json-pretty';
+
+/**
+ * inline style map
+ */
+const styleMap = {
+  'HIGHLIGHT': {
+    backgroundColor: 'rgb(141, 218, 165)',
+  },
+};
+
 
 class SimpleEditor extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
+    this.highlight = this.highlight.bind(this);
+    this.save = this.save.bind(this);
     this.state = {
-      editorState: EditorState.createEmpty()
+      editorState: EditorState.createWithContent(
+        ContentState.createFromText(content)
+      ),
+      selectedText: '',
+      rawContent: null
     };
   }
 
-
   onChange(editorState) {
     this.setState({ editorState });
   }
 
+  highlight() {
+    const editorState = this.state.editorState
+    const contentState = editorState.getCurrentContent();
+    const selectionState = editorState.getSelection();
+
+    // extract the text between the start and end
+    const start = selectionState.getStartOffset();
+    const end = selectionState.getEndOffset();
+
+    // get contentBlock where the 'cursor' is
+    const blockKey = selectionState.getAnchorKey();
+
+    // update the content block where the cursor is
+    const updatedBlockMap = contentState.getBlockMap().update(blockKey, contentBlock => {
+      // apply the style to the characters where the highlight is
+      const updatedCharacterList = contentBlock.getCharacterList().map((char, idx) => {
+        if (idx < start || idx >= end) {
+          return char;
+        }
+        return CharacterMetadata.applyStyle(char, 'HIGHLIGHT');
+      })
+
+      // set the new character list against the content block
+      return contentBlock.set('characterList', updatedCharacterList);
+    })
+
+    const updatedContentState = contentState.set('blockMap', updatedBlockMap)
+
+    this.setState({
+      editorState: EditorState.push(editorState, updatedContentState)
+    })
+
+  }
+
+  save() {
+    const contentState = this.state.editorState.getCurrentContent()
+    this.setState({
+      rawContent: convertToRaw(contentState)
+    })
+  }
 
   render() {
     return (
-        <Panel footer="Cursor position">
-
+      <div>
+        <Panel>
           <Editor
+            customStyleMap={styleMap}
             editorState={this.state.editorState}
             onChange={this.onChange}
           />
-
         </Panel>
+
+        <Button
+          bsStyle="success"
+          bsSize="xsmall"
+          onClick={this.highlight}>
+          Highlight
+        </Button>
+
+        <Button
+          bsStyle="primary"
+          bsSize="xsmall"
+          onClick={this.save}>
+          Save
+        </Button>
+
+        { this.state.rawContent &&
+          <JSONPretty
+            id="json-pretty"
+            json={this.state.rawContent}
+            style={{ marginTop: '30px' }}
+          />
+        }
+      </div>
     );
   }
 }

src/content.js

@@ -0,0 +1,3 @@
+export default `Facebook is to roll out an app that lets users watch the platform's video content on television.
+The move could allow it to eventually better compete with the likes of YouTube and traditional television channels for advertising revenue.
+Users with Apple TV, Amazon's Fire TV and Samsung's smart TVs will be able to watch Facebook's user-generated videos directly on their televisions.`