react-templates/playground/CodeMirrorViewer.js

48 lines
1.8 KiB
JavaScript

define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
'./libs/codemirror-4.8/mode/javascript/javascript',
'./libs/codemirror-4.8/mode/xml/xml',
'./libs/codemirror-4.8/addon/runmode/runmode'
], function (React, _, $, CodeMirror) {
'use strict';
return React.createClass({
displayName: 'CodeMirrorViewer',
propTypes: {
id: React.PropTypes.string,
mode: React.PropTypes.string
},
getDefaultProps: function () {
return {
mode: 'html'
};
},
getInitialState: function () {
return {
editorId: _.uniqueId()
};
},
render: function () {
var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
props.id = this.props.id || this.state.editorId;
props.className = 'cm-s-default';
var value = this.props.valueLink ? this.props.valueLink() : this.props.value;
return React.DOM.pre(props, value);
},
componentWillUpdate: function (nextProps/*, nextState*/) {
var value = nextProps.valueLink ? nextProps.valueLink() : nextProps.value;
if (this.editor && this.editor.getValue() !== value) {
this.editor.setValue(value || '');
}
},
componentDidMount: function () {
var value = this.props.valueLink ? this.props.valueLink() : this.props.value;
var mode = this.props.mode;
if (this.props.mode === 'html') {
mode = 'text/html';
}
this.editor = CodeMirror.runMode(value, mode, this.getDOMNode());
},
componentWillUnmount: function () {
this.editor.toTextArea();
}
});
});