Changed annotator to a higher-order component

app/modules/annotate.js → app/components/Annotator.jsx

+import React from 'react'
 import annotator from 'annotator'
 
 let app = null
 
-export function startAnnotator(elm, options) {
-  if (app) {
-    app.destroy().then(() => {
-      start(elm, options)
-    })
-  } else {
-    start(elm, options)
-  }
-}
-
 function start(elm, options) {
   app = new annotator.App()
 
@@ -60,3 +51,37 @@ function packAnnotation(annotation, options) {
   annotation.file_id = options.file_id
   annotation.ranges = JSON.stringify(annotation.ranges)
 }
+
+const Annotator = BaseComponent =>
+  class AnnotatorDiv extends React.Component {
+    componentDidMount() {
+      this.startAnnotator()
+    }
+    setRef = elem => {
+      this.elem = elem
+    }
+    startAnnotator = () => {
+      const { toMark, user } = this.props
+      const annOpts = {
+        user_id: user,
+        file_id: toMark,
+      }
+      if (app) {
+        app.destroy().then(() => {
+          start(this.elem, annOpts)
+        })
+      } else {
+        start(this.elem, annOpts)
+      }
+    }
+    render() {
+      const { toMark, user, children, ...props } = this.props
+      return (
+        <div ref={this.setRef}>
+          <BaseComponent {...props}>{children}</BaseComponent>
+        </div>
+      )
+    }
+  }
+
+export default Annotator

app/components/XMLReview.jsx

@@ -22,6 +22,7 @@ import {
   SectionContent as Content,
   SectionHeader as Header,
 } from './ui/'
+import Annotator from './Annotator'
 import UploadFiles from './UploadFiles'
 import HTMLPreview from './HTMLPreview'
 import ManuscriptPreview from './ManuscriptPreview'
@@ -29,7 +30,6 @@ import XMLForm from './XMLForm'
 import PDFViewer from './pdf-viewer/PDFViewer'
 import blueXSD from '../assets/xsl/xsd/publishing/journalpublishing3.xsd'
 import greenXSD from '../assets/xsl/xsd/archiving/archivearticle3.xsd'
-import { startAnnotator } from '../modules/annotate'
 
 const PreviewPageDiv = styled(PreviewPage)`
   .show-mobile {
@@ -37,6 +37,15 @@ const PreviewPageDiv = styled(PreviewPage)`
   }
   .preview-buttons {
     align-items: center;
+
+    button {
+      height: 60%;
+      &.selected {
+        background-color: transparent;
+        color: #000;
+        border-bottom: ${th('borderWidth')} ${th('borderStyle')} transparent;
+      }
+    }
   }
   .annotator-hl {
     background-color: ${th('colorAnnotation')};
@@ -69,6 +78,10 @@ const Status = styled.span`
   font-style: italic;
   color: #999;
 `
+
+const AnnotatePDF = Annotator(PDFViewer)
+const AnnotateHTML = Annotator(HTMLPreview)
+
 const XMLFileTypes = [
   {
     label: '',
@@ -196,7 +209,6 @@ class EPMCTagged extends React.Component {
     this.processXML = this.processXML.bind(this)
     this.webPreview = this.webPreview.bind(this)
     this.setError = this.setError.bind(this)
-    this.setAnnotate = this.setAnnotate.bind(this)
   }
   static getDerivedStateFromProps(props, state) {
     const status = state.status === 'Saving...'
@@ -233,30 +245,13 @@ class EPMCTagged extends React.Component {
         })
     }
   }
-
-  setAnnotate(textContent) {
-    const options = {
-      user_id: this.props.currentUser.id,
-      file_id: this.props.currentVersion.id + (textContent ? '-pdf' : '-xml'),
-    }
-    if (textContent) {
-      startAnnotator(
-        document.getElementsByClassName('pdf-viewer-pane')[0],
-        options,
-      )
-    } else {
-      startAnnotator(document.getElementById('xml-preview-body'), options)
-    }
-  }
   async webPreview() {
     const { currentVersion } = this.props
     const { files } = currentVersion
     const html = files.find(file => file.type === 'tempHTML')
     if (html) {
       const response = await fetch(html.url)
-      this.setState({ html: await response.text() }, () => {
-        this.setAnnotate()
-      })
+      this.setState({ html: await response.text() })
     } else {
       this.setState({ html: 'Error. No Web Preview generated.' })
     }
@@ -284,6 +279,7 @@ class EPMCTagged extends React.Component {
           <PanelHeader className="preview-buttons">
             {currentUser.admin && (
               <Button
+                className={pane === 'files' ? 'selected' : ''}
                 onClick={() => this.setState({ pane: 'files' })}
                 primary={pane !== 'files'}
                 style={{ flex: 1, margin: '0 1px' }}
@@ -292,6 +288,7 @@ class EPMCTagged extends React.Component {
               </Button>
             )}
             <Button
+              className={pane === 'web' ? 'selected' : ''}
               onClick={() => {
                 this.webPreview()
                 this.setState({ pane: 'web' })
@@ -302,6 +299,7 @@ class EPMCTagged extends React.Component {
               Web Preview
             </Button>
             <Button
+              className={pane === 'pdf' ? 'selected' : ''}
               onClick={() => this.setState({ pane: 'pdf' })}
               primary={pane !== 'pdf'}
               style={{ flex: 1, margin: '0 1px' }}
@@ -309,7 +307,9 @@ class EPMCTagged extends React.Component {
               PDF Preview
             </Button>
             <Button
-              className="show-mobile"
+              className={
+                pane === 'original' ? 'selected show-mobile' : 'show-mobile'
+              }
               onClick={() => this.setState({ pane: 'original' })}
               primary={pane !== 'original'}
               style={{ flex: 1, margin: '0 1px' }}
@@ -382,8 +382,21 @@ class EPMCTagged extends React.Component {
               </Section>
             )}
             {pane === 'pdf' &&
-              pdf && <PDFViewer textContent={this.setAnnotate} url={pdf.url} />}
-            {pane === 'web' && html && <HTMLPreview html={html} />}
+              pdf && (
+                <AnnotatePDF
+                  toMark={`${currentVersion.id}-pdf`}
+                  url={pdf.url}
+                  user={currentUser.id}
+                />
+              )}
+            {pane === 'web' &&
+              html && (
+                <AnnotateHTML
+                  html={html}
+                  toMark={`${currentVersion.id}-xml`}
+                  user={currentUser.id}
+                />
+              )}
             {pane === 'original' &&
               manuscript && (
                 <ManuscriptPreview file={manuscript} source={source} />
@@ -408,7 +421,10 @@ class EPMCTagged extends React.Component {
             {showManuscript && manuscript ? (
               <ManuscriptPreview file={manuscript} source={source} />
             ) : (
-              <XMLForm files={originalFiles} {...this.props} />
+              <XMLForm
+                files={originalFiles.filter(file => file.type !== 'manuscript')}
+                {...this.props}
+              />
             )}
           </PanelContent>
         </EditPanel>