Skip to content

Instantly share code, notes, and snippets.

@mehdi-alouane
Forked from rgoldfinger/app.js
Created March 2, 2016 11:35
Show Gist options
  • Save mehdi-alouane/ed28a4075dd6143eec35 to your computer and use it in GitHub Desktop.
Save mehdi-alouane/ed28a4075dd6143eec35 to your computer and use it in GitHub Desktop.
real-time markdown editor in React.js
//node/express server routes for editing
// edit a post
router.get('/a/:id/edit', function(req, res) {
Post.findById(req.params.id, function(err, post) {
if (err) {
res.send(err);
} else {
res.render('createPost', {
title: "create post",
post: JSON.stringify(post)
});
}
});
});
//update a post
router.put('/a/:id', function(req, res) {
Post.findById(req.params.id, function(err, post) {
if (err) {
res.send(err);
} else {
post.title = req.body.title;
post.body = req.body.postBodyProcessed;
post.bodyRaw = req.body.postBodyRaw;
post.save(function(err) {
if (err) {
res.send(err);
} else {
res.redirect('/b/' + post._id);
}
});
}
});
});
<div class="editor">
<div id="Editor"></div>
<div id="data" data="{{post}}"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="/edit.js"></script>
</div>
/** @jsx React.DOM */
var converter = new Showdown.converter();
var Editor = React.createClass({
getInitialState: function() {
var text = "hi";
var title = "[untitled]";
var id = null;
var data = document.getElementById('data').getAttribute('data');
if (data) {
data = JSON.parse(data);
text = data.bodyRaw || data.body;
title = data.title;
id = data._id;
}
return {
postBody: text,
title: title,
id: id
};
},
componentDidMount: function() {
this.refs.textarea.getDOMNode().value = this.state.postBody;
this.refs.titleArea.getDOMNode().value = this.state.title;
},
handleChange: function() {
this.setState({postBody: this.refs.textarea.getDOMNode().value});
},
handleTitleChange: function() {
this.setState({title: this.refs.titleArea.getDOMNode().value});
},
handleSubmit: function () {
var data = JSON.stringify({
'title': this.state.title,
'postBodyRaw': this.state.postBody,
'postBodyProcessed': converter.makeHtml(this.state.postBody)
});
var request = new XMLHttpRequest();
//if this.state.id !== null set the post url to a/id ?
var requestType = 'POST';
var requestURL = '/a';
if (this.state.id !== null) {
requestType = 'PUT';
requestURL = '/a/' + this.state.id;
}
request.open(requestType, requestURL, true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(data);
setTimeout(function() {
window.location.href = "/a";
}, 1000);
},
render: function() {
return (
<div>
<button
className="submit-post"
onClick={this.handleSubmit} >
Post!
</button>
<div className="edit-area">
<input
onChange={this.handleTitleChange}
value={this.state.title}
ref="titleArea"
/>
<textarea
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.postBody} />
</div>
<div className="markdown">
<div className="edit-title-area"
dangerouslySetInnerHTML={{
__html: this.state.title
}}>
</div>
<div
dangerouslySetInnerHTML={{
__html: converter.makeHtml(this.state.postBody)
}}>
</div>
</div>
</div>
);
}
});
React.renderComponent(<Editor />, document.getElementById('Editor'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment