jsx import { css , jsx } from '@emotion/core' ; import { Paper } from '@material-ui/core' ; import React from 'react' ; import ReactDom from 'react-dom' ; import { Popup } from '../../utils/Popup' ; import { popupCss } from '../../utils/presets' ; interface Match { begin : { divIdx : number ; offset : number ; } ; end : { divIdx : number ; offset : number ; } ; } export const convertMatches = ( queryLen , matches , textLayer ) => { const { textContentItemsStr } = textLayer ; if ( ! matches ) { return [ ] ; } let i = 0 ; let iIndex = 0 ; const end = textContentItemsStr . length - 1 ; const result = [ ] ; for ( let m = 0 , mm = matches . length ; m < mm ; m ++ ) { let matchIdx = matches [ m ] ; while ( i !== end && matchIdx >= iIndex + textContentItemsStr [ i ] . length ) { iIndex += textContentItemsStr [ i ] . length ; i ++ ; } if ( i === textContentItemsStr . length ) { console . error ( 'Could not find a matching mapping' ) ; } const match = { begin : { divIdx : i , offset : matchIdx - iIndex , } , } ; matchIdx += queryLen ; while ( i !== end && matchIdx > iIndex + textContentItemsStr [ i ] . length ) { iIndex += textContentItemsStr [ i ] . length ; i ++ ; } result . push ( { ... match , end : { divIdx : i , offset : matchIdx - iIndex , } , } ) ; } return result ; } ; const TooltipContent = ( { text } ) => { return ( < Paper css = { css `
        ${ popupCss };
        text-transform: capitalize;
      ` } > { text } < /Paper>); } ; export const renderMatches = ( matches , pageIdx , textLayer , tooltipText ) => { const { textContentItemsStr , textDivs } = textLayer ; if ( matches . length === 0 ) { return ; } let prevEnd = null ; const infinity = { divIdx : - 1 , offset : undefined , } ; const appendTextToDiv = ( divIdx , fromOffset , toOffset , addTooltip = false ) => { const div = textDivs [ divIdx ] ; const content = textContentItemsStr [ divIdx ] . substring ( fromOffset , toOffset ) ; if ( addTooltip ) { const span = document . createElement ( 'span' ) ; div . appendChild ( span ) ; ReactDom . render ( < Popup popupContent = { < TooltipContent text = { tooltipText } / > } bodyElement = { < span css = { css `
                border-bottom: 1px dashed #ffaa2a;
              ` } > { content } < /span>}/ > , span ) ; } else { const node = document . createTextNode ( content ) ; div . appendChild ( node ) ; } } ; const beginText = ( begin ) => { const { divIdx } = begin ; textDivs [ divIdx ] . textContent = '' ; appendTextToDiv ( divIdx , 0 , begin . offset ) ; } ; for ( let i = 0 ; i < matches . length ; i ++ ) { const match = matches [ i ] ; const { begin , end } = match ; if ( ! prevEnd || begin . divIdx !== prevEnd . divIdx ) { if ( prevEnd !== null ) { appendTextToDiv ( prevEnd . divIdx , prevEnd . offset , infinity . offset ) ; } beginText ( begin ) ; } else { appendTextToDiv ( prevEnd . divIdx , prevEnd . offset , begin . offset ) ; } appendTextToDiv ( begin . divIdx , begin . offset , end . offset , true ) ; prevEnd = end ; } if ( prevEnd ) { appendTextToDiv ( prevEnd . divIdx , prevEnd . offset , infinity . offset ) ; } } ;