highlight the current paragraph

1 files changed, 19 insertions, 3 deletions

diff --git a/animism-align/frontend/views/align/components/annotations/annotation.types.js b/animism-align/frontend/views/align/components/annotations/annotation.types.js
index f95589d..a2eae62 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.types.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.types.js
@@ -41,7 +41,23 @@ export const AnnotationHeader = ({ y, annotation, selected, onClick, onDoubleCli
   )
 }
 
+export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+  const { start_ts, text } = annotation
+  const className = selected ? 'annotation paragraph_end selected' : 'annotation paragraph_end'
+  return (
+    <div
+      className={className}
+      style={{ top: y }}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    >
+      {text}
+    </div>
+  )
+}
+
 export const AnnotationElementLookup = {
-  sentence: AnnotationSentence,
-  header: AnnotationHeader,
-}
\ No newline at end of file
+  sentence: React.memo(AnnotationSentence),
+  header: React.memo(AnnotationHeader),
+  paragraph_end: React.memo(AnnotationParagraphEnd),
+}