import * as React from 'react' ; import { AnnotationTypes } from '../../metadata/AnnotationTypes' ; import { IDocAnnotationRef } from '../DocAnnotation' ; import { Optional } from 'polar-shared/src/util/ts/Optional' ; import { HighlightColors } from 'polar-shared/src/metadata/HighlightColor' ; import { AnnotationViewControlBar2 } from "../AnnotationViewControlBar2" ; import { AnnotationTagsBar } from "../AnnotationTagsBar" ; import { deepMemo } from "../../react/ReactUtils" ; import { AnnotationDivider } from "./AnnotationDivider" ; interface IProps { readonly annotation : IDocAnnotationRef ; } export const TextHighlightAnnotationView2 = deepMemo ( ( props ) => { const { annotation } = props ; const attrType = AnnotationTypes . toDataAttribute ( annotation . annotationType ) ; const html = Optional . first ( annotation . html ) . getOrElse ( '' ) ; const key = 'text-highlight-' + annotation . id ; const borderColor = HighlightColors . toBackgroundColor ( annotation . color , 0.7 ) ; return ( < > < div key = { key } data - annotation - id = { annotation . id } data - annotation - type = { attrType } data - annotation - color = { annotation . color } className = { attrType } style = { { borderLeft : `4px solid ${ borderColor }` , paddingLeft : '8px' , paddingRight : '5px' } } > { } { } { } { } { } < div style = { { display : 'flex' , flexDirection : 'column' } } > < div style = { { marginTop : '5px' } } > < AnnotationTagsBar tags = { annotation . original . tags } /> < /div> < div style = { { display : 'flex' } } > < div style = { { fontSize : '14px' } } dangerouslySetInnerHTML = { { __html : html } } > < /div> < div / > < /div> < div > < AnnotationViewControlBar2 annotation = { annotation } /> < /div> < /div> < /div> < AnnotationDivider / > < />); } ) ;