mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 04:33:10 +00:00
Now examples are trasnformed to GraphQL during build and assembled by the index template. This makes them easier to edit and tie in with their associated markdown description.
35 lines
791 B
JavaScript
35 lines
791 B
JavaScript
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() {
|
|
const 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); |