JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
function textarea2editor(parent){
var $parent= jQuery(parent);
var $editor = jQuery('<div contenteditable/>');
$editor.css('background', "#333");
$editor.css("color", "#efefef");
$parent.find('textarea').replaceWith($editor);
/*...*/
return {
setText: function (text){
$editor.html(text);
},
/*...*/
}
}
var App = React.createClass({
getInitialState: function(){
return {
name: null
}
},
componentDidMount: function(){
this.editor = textarea2editor(this.getDOMNode());
this.editor.setText(this.props.contents);
},
componentDidUpdate: function(){
this.editor.setText(this.props.contents);
},
render: function() {
return (
<div>
<textarea value={this.props.contents}/>
</div>
)
}
});
var Component = React.render(<App contents="#./configure" />, document.body);
setTimeout(function(){
Component.setProps({
contents: "#/.configure\n#make"
});
}, 1000);
setTimeout(function(){
Component.setProps({
contents: "#/.configure\n#make\n#make install"
});
}, 2000);