Used DraftJS RichUtil library to wire up bold/italic/underline/header buttons.

TODO.txt

@@ -7,47 +7,62 @@
 	+ Wire React to ES API +
 	+ Simple CRUD interface +
 	+ Async API Middleware +
+	+ Introduce Draft.JS + 
 	+ Font Awesome / Better Glyphicons +
+	+ DRY up Sass Modules +
+	+ Wire Up Rich Util Buttons +
+	- Major TextEditor Refactor
+	- Wire Up Editor Style Buttons
+	- Seed Chapter Data for Setup.py
+	- Abstract API Blueprint for Notes
+	- Modularize TextEditor Container Component
+	- Testing
+		- Python Unit Tests
+		- React Unit Tests
+		- ES API Tests?
 
 - v0.2 Reader
 	- Reader UX
+	- Collapse Reader Sidebar
 	- Top Bar
 	- Background Texture - Canvas / Paper
+	- Reader Options
+		- Font-size
+		- Font
+		- Pagination?
+	- Full-Screen Mode
 
 - v0.3 Notes and Text Formatting
 	- Abstract API Blueprint for Notes
 	- Note Manager Component
 
 - v0.4 Search
+	- Advanced search page? broken out with text results and note results
+	- Drop Down window
 
 - v0.5 Pagination
 
+- v0.6 Users
+	- Admin Access Restrictions (OAuth?)
+	- Login with Social Media OAuth, User Preferences?
+	- Bookmarks?
+	- Store Session / Progress in cookie
+	- Note Commenting
+
+- v0.7 Monitoring
+	- Pixel
+
 Short List:
 - PropTypes
-- DRY up Sass Modules
 - Env Configs
-- Some Testing
-- Draft.JS
 - Elasticsearch Versioning and Revert UI
-- Collapsable Button Lists
 - Loading Indicators
 - Error Handling
-- Unit Testing
-- Remove Flask-Webpack?
-- Admin Access Restrictions (OAuth?)
-- Admin Page
-- Search Functionality
 - HTML Editor For Chapters / Notes
-- Draft.JS
 - Community Contributors?
-- Login with Social Media OAuth, User Preferences?
 - Search, broken out with text results and note results
 	- Advanced search page?
-- Immutable Text
-- Add Typechecking with Flow or at least PropTypes
-- Maintain old version of Joyce Project? (unlikely)
-- Weed out unneeded dependencies
-- Implement a pixel to track usage
-- Default Pagination?
+- Weed out unneeded dependencies (Flask-Webpack?)
 - ARIA compliance
-- Docker
+- Docker
+- Stats Logging

src/containers/textEditorContainer.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Editor } from 'draft-js'
+import { Editor, RichUtils } from 'draft-js'
 import { stateToHTML } from 'draft-js-export-html'
 
 import { updateEditorState, updateChapterTitleInput, updateChapterNumberInput, submitChapter, deleteChapter } from '../actions'
 
 
-const TextEditor = ({currentChapter, editorState, onChangeEditorState, chapterTitleInput, onChapterTitleChange, onEditSubmit, onDelete}) =>
+const TextEditor = ({currentChapter, editorState, handleKeyCommand, onChangeEditorState, onBoldClick, onItalicClick, onUnderlineClick, onHeaderClick, chapterTitleInput, onChapterTitleChange, onEditSubmit, onDelete}) =>
 	<div id='editor_container'>
 		<div id='editor_topbar'>
 			<div className='row'>			
@@ -19,21 +19,33 @@ const TextEditor = ({currentChapter, editorState, onChangeEditorState, chapterTi
 
 			</div>
 			<div className='row'>
-				<div className='btn-group col-md-3 offset-md-6' role='group'>
-					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-bold'></i></button>
-					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-italic'></i></button>
-					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-underline'></i></button>
+				<div className='btn-group col-md-3' role='group'>
+					<button type='button' onClick={()=>onBoldClick(editorState)} className='btn btn-info btn-sm'><i className='fa fa-bold'></i></button>
+					<button type='button' onClick={()=>onItalicClick(editorState)} className='btn btn-info btn-sm'><i className='fa fa-italic'></i></button>
+					<button type='button' onClick={()=>onUnderlineClick(editorState)} className='btn btn-info btn-sm'><i className='fa fa-underline'></i></button>
+					<button type='button' onClick={()=>onHeaderClick(editorState)} className='btn btn-info btn-sm'><i className='fa fa-header'></i></button>
 				</div>
 				<div className='btn-group col-md-3' role='group'>
 					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-align-left'></i></button>
 					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-align-center'></i></button>
 					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-align-right'></i></button>			
 				</div>
+				<div className='btn-group col-md-1' role='group'>
+					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-file-image-o'></i></button>
+				</div>
+				<div className='btn-group col-md-2' role='group'>
+					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-indent'></i></button>
+					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-outdent'></i></button>
+				</div>								
+				<div className='btn-group col-md-2' role='group'>
+					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-undo'></i></button>
+					<button type='button' className='btn btn-info btn-sm'><i className='fa fa-repeat'></i></button>
+				</div>
 			</div>
 		</div>
 
 		<div id='editor_content'>
-			<Editor editorState={editorState} onChange={onChangeEditorState} />
+			<Editor editorState={editorState} handleKeyCommand={handleKeyCommand} onChange={onChangeEditorState} />
 		</div>
 
 		<div id='editor_bottombar'>
@@ -75,6 +87,26 @@ const mapDispatchToProps = dispatch => {
 				dispatch(deleteChapter(currentChapter.number))
 			}
 		},
+		handleKeyCommand: (command, editorState) => {
+			const newState = RichUtils.handleKeyCommand(editorState, command)
+			dispatch(updateEditorState(newState))
+		},
+		onBoldClick: (editorState) => {
+			const newState = RichUtils.toggleInlineStyle(editorState, 'BOLD')
+			dispatch(updateEditorState(newState))
+		},
+		onItalicClick: (editorState) => {
+			const newState = RichUtils.toggleInlineStyle(editorState, 'ITALIC')
+			dispatch(updateEditorState(newState))
+		},
+		onUnderlineClick: (editorState) => {
+			const newState = RichUtils.toggleInlineStyle(editorState, 'UNDERLINE')
+			dispatch(updateEditorState(newState))
+		},
+		onHeaderClick: (editorState) => {
+			const newState = RichUtils.toggleBlockType(editorState, 'header-two')
+			dispatch(updateEditorState(newState))
+		},
 		onEditSubmit: (currentChapter, chapterTitleInput, editorState) => {
 			let textContent = editorState.getCurrentContent()
 			const editDocument = {

src/stylesheets/_page.scss

@@ -8,6 +8,7 @@
     padding: 3% 8%;
     border: 1px solid $border_color;
     border-radius: 5px;
+    font-size: 0.8em;
 }
 
 #page.show_notes a {	

src/stylesheets/_sidebar.scss

@@ -10,7 +10,7 @@
 }
 
 #highlight_button > button {
-	width: 100%;
+	width: 100%;    
 }
 
 .sidebar_spacer {
@@ -21,4 +21,5 @@
 .chapter_button > button {
 	width: 100%;
 	margin: 1% 0 1% 0;
+    padding: 0.3rem 1rem;
 }

src/stylesheets/editor.scss

@@ -34,14 +34,15 @@ $fa-font-path: "../../node_modules/font-awesome/fonts";
 }
 
 #editor_content {
-    height: 35em;
+    height: 43em;
     overflow: scroll;
     background-color: rgba(256,256,256,.8);
     box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
-    margin: 0.8% 0;
+    margin: 1.3% 0;
     border: 1px solid $border_color;
     border-radius: 5px;
     padding: 2% 5%;
+    font-size: 0.8em;
 }
 
 #editor_content div {