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.
36 lines
896 B
36 lines
896 B
var MARKDOWN_COMPONENT = `
|
|
var MarkdownEditor = React.createClass({
|
|
getInitialState: function() {
|
|
return {value: 'Type some *markdown* here!'};
|
|
},
|
|
handleChange: function() {
|
|
this.setState({value: this.refs.textarea.value});
|
|
},
|
|
rawMarkup: function() {
|
|
return { __html: marked(this.state.value, {sanitize: true}) };
|
|
},
|
|
render: function() {
|
|
return (
|
|
<div className="MarkdownEditor">
|
|
<h3>Input</h3>
|
|
<textarea
|
|
onChange={this.handleChange}
|
|
ref="textarea"
|
|
defaultValue={this.state.value} />
|
|
<h3>Output</h3>
|
|
<div
|
|
className="content"
|
|
dangerouslySetInnerHTML={this.rawMarkup()}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<MarkdownEditor />, mountNode);
|
|
`;
|
|
|
|
ReactDOM.render(
|
|
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
|
|
document.getElementById('markdownExample')
|
|
);
|
|
|