Input validation for annotation modal

src/components/annotationModal.js

@@ -1,10 +1,11 @@
 import React from 'react'
+import { Editor } from 'draft-js'
 import PropTypes from 'prop-types'
 
 import { EditorSubmitButton, EditorCancelButton } from './button'
 import { DocumentList } from './list'
 
-const AnnotateModal = ({annotationNote}) =>
+const AnnotateModal = ({annotationNote, modalEditorState}) =>
 	<div className='modal fade' id='annotation_modal' tabIndex='-1' role='dialog'>
 		<div className='modal-dialog modal-lg' role='document'>
 			<div className='modal-content'>
@@ -14,7 +15,7 @@ const AnnotateModal = ({annotationNote}) =>
 				<div className='modal-body'>
 					<div className='row'>
 						<div className='col-md-10 offset-md-1'>
-							<div dangerouslySetInnerHTML={{__html: annotationNote.html_source}} />
+							<Editor editorState={modalEditorState} readOnly={true} />
 						</div>
 					</div>
 				</div>

src/components/chooseAnnotationModal.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Editor } from 'draft-js'
 import PropTypes from 'prop-types'
 
 import { EditorSubmitButton, EditorCancelButton } from './button'
@@ -6,7 +7,7 @@ import TagColorPreview from './tagColorPreview'
 import { DocumentList } from './list'
 import helpers from '../modules/helpers'
 
-const ChooseAnnotationModal = ({notes, tags, annotationNote, annotationTag, onSubmitClick, selectAnnotationNote, selectAnnotationTag, clearAnnotationTag, userErrors}) =>
+const ChooseAnnotationModal = ({notes, tags, annotationNote, annotationTag, modalEditorState, onSubmitClick, selectAnnotationNote, selectAnnotationTag, clearAnnotationTag, userErrors}) =>
 	<div className='modal fade' id='annotate_modal' tabIndex='-1' role='dialog'>
 		<div className='modal-dialog modal-lg' role='document'>
 			<div className='modal-content'>
@@ -22,7 +23,7 @@ const ChooseAnnotationModal = ({notes, tags, annotationNote, annotationTag, onSu
 							<DocumentList docs={notes} currentDocument={annotationNote} onDocumentClick={selectAnnotationNote} docType={'notes'}/>
 						</div>
 						<div className='col-md-8 offset-md-1'>
-							<div dangerouslySetInnerHTML={{__html: annotationNote.html_source}} />
+							<Editor editorState={modalEditorState} readOnly={true} />
 						</div>
 					</div>
 					<div className='row'>

src/containers/editorPageContainer.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { EditorState } from 'draft-js'
 
 import actions from '../actions'
 import Content from '../components/content'
@@ -19,6 +18,7 @@ const EditorPage = ({
 	annotationNote,
 	annotationTag,
 	editorState,
+	modalEditorState,
 	docType,
 	tags,
 	loadingToggle,
@@ -46,12 +46,13 @@ const EditorPage = ({
 			</Content>
 		</div>
 		<DeleteConfirmModal onDeleteConfirm={()=>onDeleteConfirm(currentDocument.id, docType)}/>
-		<AnnotationModal annotationNote={annotationNote}/>
+		<AnnotationModal annotationNote={annotationNote} modalEditorState={modalEditorState} />
 		<ChooseAnnotationModal 
 			notes={notes}
 			tags={tags}
 			annotationNote={annotationNote} 
-			annotationTag={annotationTag} 
+			annotationTag={annotationTag}
+			modalEditorState={modalEditorState}
 			onSubmitClick={()=>onSubmitAnnotationClick(annotationNote, annotationTag, selectionState, editorState)} 
 			selectAnnotationNote={selectAnnotationNote} 
 			selectAnnotationTag={selectAnnotationTag}
@@ -68,6 +69,7 @@ const mapStateToProps = state => {
 		annotationNote: state.annotationNote,
 		annotationTag: state.annotationTag,
 		editorState: state.editorState,
+		modalEditorState: state.modalEditorState,
 		selectionState: state.selectionState,
 		docType: state.docType,
 		loadingToggle: state.loadingToggle,
@@ -102,6 +104,7 @@ EditorPage.propTypes = {
 	annotationNote: PropTypes.object,
 	annotationTag: PropTypes.object,
 	editorState: PropTypes.object,
+	modalEditorState: PropTypes.object,
 	selectionState: PropTypes.object,
 	docType: PropTypes.string,
 	loadingToggle: PropTypes.bool,

src/containers/linkContainer.js

@@ -8,7 +8,7 @@ const Link = (props) => {
 	const data = props.contentState.getEntity(props.entityKey).getData()
     return (
     	<a href='#' 
-    		// onClick={()=>props.onAnnotationClick(data['url'])}
+    		onClick={()=>props.onAnnotationClick(data['url'])}
     		style={{color: '#' + data['data-color']}}
     		data-toggle='modal'
     		data-target='#annotation_modal'
@@ -38,4 +38,4 @@ Link.propTypes = {
 
 const LinkContainer = connect(mapStateToProps, mapDispatchToProps)(Link)
 
-export default Link
+export default LinkContainer

src/containers/readerPageContainer.js

@@ -13,6 +13,7 @@ import AnnotationModal from '../components/annotationModal'
 const ReaderPage = ({
 	currentDocument, 
 	annotationNote,
+	modalEditorState,
 	loadingToggle,
 }) =>
 	<div id='joyce_reader' className='container-fluid'>
@@ -30,19 +31,21 @@ const ReaderPage = ({
 				}				
 			</Content>
 		</div>
-		<AnnotationModal annotationNote={annotationNote} />
+		<AnnotationModal annotationNote={annotationNote} modalEditorState={modalEditorState} />
 	</div>
 
 const mapStateToProps = state => {
 	return {
 		currentDocument: state.currentDocument,
 		annotationNote: state.annotationNote,
+		modalEditorState: state.modalEditorState,
 		loadingToggle: state.loadingToggle,
 	}
 }
 
 ReaderPage.propTypes = {
-	currentDocument: PropTypes.object, 
+	currentDocument: PropTypes.object,
+	modalEditorState: PropTypes.object, 
 	annotationNote: PropTypes.object,
 	loadingToggle: PropTypes.bool,
 }

src/middleware/joyceInterface.js

@@ -17,7 +17,11 @@ const joyceInterface = store => next => action => {
 			const docErrors = validateSubmittedDocument(action.docType, action.documentTitleInput, action.colorPickerInput)
 			if (docErrors.length < 1) {
 				const textContent = action.editorState.getCurrentContent()
-				const data = { title: action.documentTitleInput, html_source: stateToHTML(textContent, html_export_options), search_text: convertToSearchText(textContent) }
+				const data = { 
+					title: action.documentTitleInput, 
+					html_source: stateToHTML(textContent, html_export_options), 
+					search_text: convertToSearchText(textContent) 
+				}
 				if (action.docType === 'tags') {
 					data.color = action.colorPickerInput
 				}

src/reducers/editorState.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EditorState, RichUtils } from 'draft-js'
+import { EditorState, RichUtils, Modifier } from 'draft-js'
 import { stateFromHTML } from 'draft-js-import-html'
 
 import { linkDecorator } from '../modules/editorSettings.js'

src/reducers/modalEditorState.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { EditorState } from 'draft-js'
+import { stateFromHTML } from 'draft-js-import-html'
+
+import { linkDecorator } from '../modules/editorSettings.js'
+
+const blankEditor = EditorState.createEmpty(linkDecorator)
+
+const modalEditorState = (state=blankEditor, action) => {
+	switch(action.type) {
+		case 'GET_DOCUMENT_TEXT':
+			if (action.status === 'success' && action.state === 'annotationNote') {
+				const editorState = EditorState.createWithContent(stateFromHTML(action.data.html_source), linkDecorator)
+				return editorState
+			} else if (action.status === 'request' && action.state === 'annotationNote') {
+				return blankEditor
+			} else { return state }
+		case 'ANNOTATION_CREATED':
+			return blankEditor
+		default:
+			return state
+	}
+}
+
+export default modalEditorState

src/reducers/reduceJoyce.js

@@ -13,6 +13,7 @@ import searchResults from './searchResults'
 
 // User Inputs
 import editorState from './editorState'
+import modalEditorState from './modalEditorState'
 import selectionState from './selectionState'
 import documentTitleInput from './documentTitleInput'
 import colorPickerInput from './colorPickerInput'
@@ -39,6 +40,7 @@ const reduceJoyce = combineReducers({
 	searchResults,
 	// User Inputs
 	editorState,
+	modalEditorState,
 	selectionState,
 	colorPickerInput,
 	documentTitleInput,