43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import remark from 'remark';
|
|
import remarkHTML from 'remark-html';
|
|
import remarkHighlight from '../highlight';
|
|
import PureRenderMixin from 'react-pure-render/mixin';
|
|
import { postHighlight } from '../../custom';
|
|
|
|
function renderHighlighted(nodes) {
|
|
return {
|
|
__html: postHighlight(remark()
|
|
.use(remarkHTML)
|
|
.stringify(remark().use(remarkHighlight).run({
|
|
type: 'root',
|
|
children: nodes
|
|
})))
|
|
};
|
|
}
|
|
|
|
var Section = React.createClass({
|
|
mixins: [PureRenderMixin],
|
|
propTypes: {
|
|
chunk: React.PropTypes.object.isRequired,
|
|
leftClassname: React.PropTypes.string.isRequired,
|
|
rightClassname: React.PropTypes.string.isRequired
|
|
},
|
|
render() {
|
|
let { chunk, leftClassname, rightClassname } = this.props;
|
|
let { left, right, preview } = chunk;
|
|
return (<div
|
|
data-title={chunk.title}
|
|
className={`keyline-top section contain clearfix ${preview ? 'preview' : ''}`}>
|
|
<div
|
|
className={leftClassname}
|
|
dangerouslySetInnerHTML={renderHighlighted(left)} />
|
|
{right.length > 0 && <div
|
|
className={rightClassname}
|
|
dangerouslySetInnerHTML={renderHighlighted(right)} />}
|
|
</div>);
|
|
}
|
|
});
|
|
|
|
module.exports = Section;
|