2014-10-24 12:13:18 +08:00
|
|
|
var MARKDOWN_COMPONENT = `
|
2016-10-05 02:33:09 +08:00
|
|
|
class MarkdownEditor extends React.Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
|
|
|
this.state = {value: 'Type some *markdown* here!'};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleChange() {
|
2015-10-06 06:02:34 +08:00
|
|
|
this.setState({value: this.refs.textarea.value});
|
2016-10-05 02:33:09 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getRawMarkup() {
|
2016-06-04 05:41:38 +08:00
|
|
|
var md = new Remarkable();
|
|
|
|
|
return { __html: md.render(this.state.value) };
|
2016-10-05 02:33:09 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
2014-10-24 12:13:18 +08:00
|
|
|
return (
|
|
|
|
|
<div className="MarkdownEditor">
|
|
|
|
|
<h3>Input</h3>
|
|
|
|
|
<textarea
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
ref="textarea"
|
|
|
|
|
defaultValue={this.state.value} />
|
|
|
|
|
<h3>Output</h3>
|
|
|
|
|
<div
|
|
|
|
|
className="content"
|
2016-10-05 02:33:09 +08:00
|
|
|
dangerouslySetInnerHTML={this.getRawMarkup()}
|
2014-10-24 12:13:18 +08:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2016-10-05 02:33:09 +08:00
|
|
|
}
|
2014-10-24 12:13:18 +08:00
|
|
|
|
2015-10-06 06:02:34 +08:00
|
|
|
ReactDOM.render(<MarkdownEditor />, mountNode);
|
2016-10-05 02:33:09 +08:00
|
|
|
`.trim();
|
2013-05-30 03:46:11 +08:00
|
|
|
|
2015-10-06 06:02:34 +08:00
|
|
|
ReactDOM.render(
|
2013-05-30 03:46:11 +08:00
|
|
|
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
|
|
|
|
|
document.getElementById('markdownExample')
|
|
|
|
|
);
|