react-templates/playground/CodeMirrorViewer.js

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,
            value: React.PropTypes.string,
            valueLink: 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();
        }
    });
});