From 07294becb5823b387e6b0ae8caae190a8b08551d Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 6 Jul 2020 19:28:29 +0200
Subject: highlight the current paragraph

---
 .../frontend/views/paragraph/components/paragraph.types.js  | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'animism-align/frontend/views/paragraph/components')

diff --git a/animism-align/frontend/views/paragraph/components/paragraph.types.js b/animism-align/frontend/views/paragraph/components/paragraph.types.js
index c200a19..daab5db 100644
--- a/animism-align/frontend/views/paragraph/components/paragraph.types.js
+++ b/animism-align/frontend/views/paragraph/components/paragraph.types.js
@@ -3,7 +3,8 @@ import React, { Component } from 'react'
 import actions from '../../../actions'
 
 export const Paragraph = ({ paragraph, selectedParagraph, selectedAnnotation, onAnnotationClick, onDoubleClick }) => {
-  const className = paragraph.type
+  let className = paragraph.type
+  if (className !== 'paragraph') className += ' paragraph'
   if (selectedParagraph) className += ' selected'
   return (
     <div
@@ -16,7 +17,7 @@ export const Paragraph = ({ paragraph, selectedParagraph, selectedAnnotation, on
           className={annotation.id === selectedAnnotation ? 'selected' : ''}
           onClick={e => onAnnotationClick(e, paragraph, annotation)}
         >
-          {annotation.text}
+          {' '}{annotation.text}{' '}
         </span>
       ))}
     </div>
@@ -24,7 +25,7 @@ export const Paragraph = ({ paragraph, selectedParagraph, selectedAnnotation, on
 }
 
 export const ParagraphHeader = ({ paragraph, selectedParagraph, selectedAnnotation, onAnnotationClick, onDoubleClick }) => {
-  const className = selectedParagraph ? 'header selected' : 'header'
+  let className = selectedParagraph ? 'header selected' : 'header'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
   console.log(text)
   return (
@@ -38,7 +39,7 @@ export const ParagraphHeader = ({ paragraph, selectedParagraph, selectedAnnotati
 }
 
 export const ParagraphElementLookup = {
-  paragraph: Paragraph,
-  blockquote: Paragraph,
-  header: ParagraphHeader,
+  paragraph: React.memo(Paragraph),
+  blockquote: React.memo(Paragraph),
+  header: React.memo(ParagraphHeader),
 }
-- 
cgit v1.2.3-70-g09d2