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} /> } } |