Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import React from 'react'
import CrowiRenderer from 'client/util/CrowiRenderer'
import { Page } from 'client/types/crowi'
interface Props {
page: Page
highlightKeywords: string
pageBody: string
}
export default class PageBody extends React.Component<Props> {
static defaultProps = { page: {}, pageBody: '' }
crowiRenderer: CrowiRenderer
constructor(props: Props) {
super(props)
this.crowiRenderer = window.crowiRenderer // FIXME
this.getMarkupHTML = this.getMarkupHTML.bind(this)
this.getHighlightBody = this.getHighlightBody.bind(this)
}
getHighlightBody(body: string, keywords: string) {
let returnBody = body
keywords
.replace(/"/g, '')
.split(' ')
.forEach(keyword => {
if (keyword === '') {
return
}
const k = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/(^"|"$)/g, '') // for phrase (quoted) keyword
const keywordExp = new RegExp(`(${k}(?!(.*?")))`, 'ig')
returnBody = returnBody.replace(keywordExp, '<em class="highlighted">$&</em>')
})
return returnBody
}
getMarkupHTML() {
let body = this.props.pageBody
if (body === '') {
body = this.props.page.revision.body
}
body = this.crowiRenderer.render(body)
if (this.props.highlightKeywords) {
body = this.getHighlightBody(body, this.props.highlightKeywords)
}
return { __html: body }
}
render() {
const parsedBody = this.getMarkupHTML()
return <div className="content" dangerouslySetInnerHTML={parsedBody} />
}
}
|