moving paragraph element lookup out

4 files changed, 8 insertions, 9 deletions

diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js
index bf68ed0..62b4a49 100644
--- a/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js
+++ b/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js
@@ -12,7 +12,7 @@ import {
   MediaImage
 } from './paragraphTypes.image'
 
-export const ParagraphElementLookup = {
+export const paragraphElementLookup = {
   paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
index 39ad661..c2ebcd7 100644
--- a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
+++ b/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
@@ -14,9 +14,8 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
           key={annotation.id}
           className={annotation.id === currentAnnotation ? 'current' : ''}
           onClick={e => onAnnotationClick(e, paragraph, annotation)}
-        >
-          {' '}{annotation.text}{' '}
-        </span>
+          dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
+        />
       ))}
     </div>
   )
diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
index 1361205..4c54808 100644
--- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
+++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
@@ -4,7 +4,6 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import actions from '../../../actions'
-import { ParagraphElementLookup } from '../components/paragraphTypes'
 import ParagraphForm from '../components/paragraph.form'
 
 const floatLT = (a,b) => ((a*10|0) < (b*10|0))
@@ -147,7 +146,7 @@ class ParagraphList extends Component {
   }
 
   render() {
-    const { media } = this.props
+    const { media, paragraphElementLookup } = this.props
     const { paragraphs, selectedParagraph, selectedParagraphOffset, currentParagraph, currentAnnotation } = this.state
     return (
       <div className='paragraphs'>
@@ -156,8 +155,8 @@ class ParagraphList extends Component {
             if (selectedParagraph && selectedParagraph.id === paragraph.id) {
               paragraph = selectedParagraph
             }
-            if (paragraph.type in ParagraphElementLookup) {
-              const ParagraphElement = ParagraphElementLookup[paragraph.type]
+            if (paragraph.type in paragraphElementLookup) {
+              const ParagraphElement = paragraphElementLookup[paragraph.type]
               return (
                 <ParagraphElement
                   key={paragraph.id}
diff --git a/animism-align/frontend/views/paragraph/paragraph.container.js b/animism-align/frontend/views/paragraph/paragraph.container.js
index 5699ca3..6035be8 100644
--- a/animism-align/frontend/views/paragraph/paragraph.container.js
+++ b/animism-align/frontend/views/paragraph/paragraph.container.js
@@ -9,6 +9,7 @@ import actions from '../../actions'
 import { Loader } from '../../common'
 
 import ParagraphList from './containers/paragraphList.container'
+import { paragraphElementLookup } from '../components/paragraphTypes'
 
 class ParagraphContainer extends Component {
   componentDidMount() {
@@ -51,7 +52,7 @@ class ParagraphContainer extends Component {
     }
     return (
       <div className='body'>
-        <ParagraphList />
+        <ParagraphList paragraphElementLookup={paragraphElementLookup} />
       </div>
     )
   }