You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
934 B
41 lines
934 B
var MARKDOWN_COMPONENT = `
|
|
class MarkdownEditor extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.handleChange = this.handleChange.bind(this);
|
|
this.state = {value: 'Type some *markdown* here!'};
|
|
}
|
|
|
|
handleChange(e) {
|
|
this.setState({value: e.target.value});
|
|
}
|
|
|
|
getRawMarkup() {
|
|
var md = new Remarkable();
|
|
return { __html: md.render(this.state.value) };
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="MarkdownEditor">
|
|
<h3>Input</h3>
|
|
<textarea
|
|
onChange={this.handleChange}
|
|
defaultValue={this.state.value} />
|
|
<h3>Output</h3>
|
|
<div
|
|
className="content"
|
|
dangerouslySetInnerHTML={this.getRawMarkup()}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<MarkdownEditor />, mountNode);
|
|
`.trim();
|
|
|
|
ReactDOM.render(
|
|
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
|
|
document.getElementById('markdownExample')
|
|
);
|
|
|