Converted Reader page to use DraftJS. Farewell dangerously setting HTML.

TODO.txt

@@ -21,7 +21,7 @@
 		+ Notes Modal to Select A Note +
 		+ Abstract Notes Page into Documents Page, Create Text Route +
 		+ Make Links Pop Modals +
-	- Make Remove Highlight Work with Contextual Disabling
+		+ Make Remove Highlight Work with Contextual Disabling +
 	- Make Annotate Mode Ignore Keyboard Input
 	- More Responsive CSS
 	- Functioning Search Page

src/components/joyceReaderPageContainer.js

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import Navbar from '../components/navbar'
-import Content from '../components/content'
-import JoyceReaderSidebarContainer from '../containers/joyceReaderSidebarContainer'
-import JoyceReaderContentContainer from '../containers/joyceReaderContentContainer'
-
-const ReaderContainer = () =>
-	<div>
-		<Navbar />
-		<div id='joyce_reader' className='container-fluid'>
-			<div className="row">
-				<JoyceReaderSidebarContainer />
-				<Content>
-					<JoyceReaderContentContainer />
-				</Content>
-			</div>
-		</div>
-	</div>
-
-export default ReaderContainer

src/containers/joyceReaderContentContainer.js

@@ -1,18 +1,21 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { Editor } from 'draft-js'
+
 import { setCurrentChapter, setAnnotationNote } from '../actions'
 import DocumentTitle from '../components/documentTitle'
 
-const JoyceReaderContent = ({currentDocument, highlightActive}) =>
-	<div id="page" className={highlightActive ? 'show_notes' : 'hide_notes'}>
+const JoyceReaderContent = ({currentDocument, highlightActive, editorState}) =>
+	<div id="page" className={highlightActive ? 'annotations' : 'hidden_annotations'}>
 		<DocumentTitle docType={'chapters'} currentDocument={currentDocument} />
-		<div dangerouslySetInnerHTML={{__html: currentDocument.text}} />
+		<Editor editorState={editorState} readOnly={true} />
 	</div>			
 
 const mapStateToProps = state => {
 	return {
 		currentDocument: state.currentDocument,
-		highlightActive: state.highlightActive
+		highlightActive: state.highlightActive,
+		editorState: state.editorState
 	}
 }
 

src/containers/joyceReaderPageContainer.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 
 import Navbar from '../components/navbar'
 import Content from '../components/content'
-import AnnotationModel from '../components/annotationModal'
+import AnnotationModal from '../components/annotationModal'
 import JoyceReaderSidebarContainer from '../containers/joyceReaderSidebarContainer'
 import JoyceReaderContentContainer from '../containers/joyceReaderContentContainer'
 
@@ -18,12 +18,12 @@ const JoyceReaderPage = ({annotationNote}) =>
 				</Content>
 			</div>
 		</div>
-		<AnnotationModel annotationNote={annotationNote} />
+		<AnnotationModal annotationNote={annotationNote} />
 	</div>
 
 const mapStateToProps = state => {
 	return {
-		notes: state.notes
+		annotationNote: state.annotationNote
 	}
 }
 

src/containers/linkContainer.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 const Link = (props) => {
 	const data = props.contentState.getEntity(props.entityKey).getData()
     return (
-    	<a href='#' className='hidden_annotations' onClick={()=>props.onAnnotationClick(data.url)} data-toggle='modal' data-target='#annotation_modal' data-url={data.url}>
+    	<a href='#' onClick={()=>props.onAnnotationClick(data.url)} data-toggle='modal' data-target='#annotation_modal' data-url={data.url}>
     		{props.children}
     	</a>
     )

src/reducers/reduceReader.js

@@ -3,6 +3,7 @@ import { combineReducers } from 'redux'
 import chapters from './chapters'
 import notes from './notes'
 import currentDocument from './currentDocument'
+import editorState from './editorState'
 import annotationNote from './annotationNote'
 import highlightActive from './highlightActive'
 import docType from './docType'
@@ -10,6 +11,7 @@ import docType from './docType'
 const reduceReader = combineReducers({
 	chapters,
 	notes,
+	editorState,
 	annotationNote,
 	docType,
 	currentDocument,

src/stylesheets/_page.scss

@@ -25,14 +25,14 @@
 	pointer-events: none;
 }
 
-.annotations {
+.annotations a {
 	cursor: pointer;
   	animation-duration: 1s;
   	animation-name: fadeIn;	
   	animation-fill-mode: forwards;	
 }
 
-.hidden_annotations {
+.hidden_annotations a {
 	color: black;
 	text-decoration: none;
 	cursor: default;