Skip to content

Instantly share code, notes, and snippets.

@hasdavidc

hasdavidc/ace.jsx

Created Sep 11, 2015
Embed
What would you like to do?
modified react-ace editor; prefer componentDidUpdate over componentWillReceiveProps; destroy in the componentWillUnmount
var ace = require('brace');
var React = require('react');
module.exports = React.createClass({
displayName: 'ReactAce',
propTypes: {
mode : React.PropTypes.string,
theme : React.PropTypes.string,
name : React.PropTypes.string,
height : React.PropTypes.string,
width : React.PropTypes.string,
fontSize : React.PropTypes.number,
showGutter : React.PropTypes.bool,
onChange: React.PropTypes.func,
value: React.PropTypes.string,
onLoad: React.PropTypes.func,
maxLines : React.PropTypes.number,
readOnly : React.PropTypes.bool,
highlightActiveLine : React.PropTypes.bool,
showPrintMargin : React.PropTypes.bool,
editorProps: React.PropTypes.object
},
getDefaultProps: function() {
return {
name : 'brace-editor',
mode : '',
theme : '',
height : '500px',
width : '500px',
value : '',
fontSize : 12,
showGutter : true,
onChange : null,
onLoad : null,
maxLines : null,
readOnly : false,
highlightActiveLine : true,
showPrintMargin : true,
editorProps : {}
};
},
onChange: function() {
var value = this.editor.getValue();
if (this.props.onChange) {
this.props.onChange(value);
}
},
componentDidMount: function() {
this.editor = ace.edit(this.props.name);
var editorProps = Object.getOwnPropertyNames(this.props.editorProps)
for (var i = 0; i < editorProps.length; i++) {
this.editor[editorProps[i]] = this.props.editorProps[editorProps[i]]
}
this.editor.getSession().setMode('ace/mode/'+this.props.mode);
this.editor.setTheme('ace/theme/'+this.props.theme);
this.editor.setFontSize(this.props.fontSize);
this.editor.on('change', this.onChange);
this.editor.setValue(this.props.value, 1);
this.editor.renderer.setShowGutter(this.props.showGutter);
this.editor.setOption('maxLines', this.props.maxLines);
this.editor.setOption('readOnly', this.props.readOnly);
this.editor.setOption('highlightActiveLine', this.props.highlightActiveLine);
this.editor.setShowPrintMargin(this.props.setShowPrintMargin);
if (this.props.onLoad) {
this.props.onLoad(this.editor);
}
},
componentWillUnmount: function() {
this.editor.destroy();
this.editor = null;
},
componentDidUpdate: function() {
this.editor = ace.edit(this.props.name);
this.editor.getSession().setMode('ace/mode/'+this.props.mode);
this.editor.setTheme('ace/theme/'+this.props.theme);
this.editor.setFontSize(this.props.fontSize);
this.editor.setOption('maxLines', this.props.maxLines);
this.editor.setOption('readOnly', this.props.readOnly);
this.editor.setOption('highlightActiveLine', this.props.highlightActiveLine);
this.editor.setShowPrintMargin(this.props.setShowPrintMargin);
if (this.editor.getValue() !== this.props.value) {
this.editor.setValue(this.props.value, 1);
}
this.editor.renderer.setShowGutter(this.props.showGutter);
if (this.props.onLoad) {
this.props.onLoad(this.editor);
}
},
render: function() {
var divStyle = {
width: this.props.width,
height: this.props.height
};
return (<div id={this.props.name} onChange={this.onChange} style={divStyle}></div>);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment