Add CodeExample component.

Author: joemcbride

docs/src/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import EditorPlayground from './EditorPlayground';
+import CodeExample from '../../src/CodeExample';
 
 if (typeof window !== 'undefined') {
   require('./assets/root.less');
@@ -32,6 +33,9 @@ class Application extends React.Component {
           <EditorPlayground
             theme="monokai"
             initialCode={example}/>
+          <CodeExample
+            className="cm-s-monokai"
+            codeText={example}/>
         </div>
       </div>
     );

docs/src/assets/root.less

@@ -9,12 +9,10 @@ body {
   line-height: 24px;
 }
 
-pre {
-  background-color: #f7f7f9;
+.code-example {
   border: 1px solid #e1e1e8;
-  padding: 9px 14px;
+  padding: 0 15px 30px 20px;
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-  font-size: 90%;
   .border-radius(4px);
 }
 
@@ -30,6 +28,10 @@ pre {
 
 .content {
   padding: 20px 60px;
+
+  .editor-body {
+    margin: 0 0 40px 0;
+  }
 }
 
 .playground {

lib/CodeExample.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _CodeMirrorSettings = require('./CodeMirrorSettings');
+
+if (_CodeMirrorSettings.IS_BROWSER) {
+  require('codemirror/addon/runmode/runmode');
+}
+
+var propTypes = {
+  codeText: _react2['default'].PropTypes.string.isRequired,
+  className: _react2['default'].PropTypes.string,
+  mode: _react2['default'].PropTypes.string
+};
+
+var defaultProps = {
+  mode: 'javascript'
+};
+
+var CodeExample = (function (_React$Component) {
+  function CodeExample() {
+    _classCallCheck(this, CodeExample);
+
+    if (_React$Component != null) {
+      _React$Component.apply(this, arguments);
+    }
+  }
+
+  _inherits(CodeExample, _React$Component);
+
+  _createClass(CodeExample, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (_CodeMirrorSettings.CodeMirror === undefined) {
+        return;
+      }
+
+      _CodeMirrorSettings.CodeMirror.runMode(this.props.codeText, this.props.mode, _react2['default'].findDOMNode(this).children[0]);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var classes = _classnames2['default']('code-example', 'CodeMirror', this.props.className);
+      return _react2['default'].createElement(
+        'pre',
+        { className: classes },
+        _react2['default'].createElement(
+          'code',
+          null,
+          this.props.codeText
+        )
+      );
+    }
+  }]);
+
+  return CodeExample;
+})(_react2['default'].Component);
+
+CodeExample.defaultProps = defaultProps;
+CodeExample.propTypes = propTypes;
+
+exports['default'] = CodeExample;
+module.exports = exports['default'];

lib/CodeMirrorEditor.js

@@ -49,6 +49,7 @@ var CodeMirrorEditor = (function (_React$Component) {
         lineWrapping: false,
         matchBrackets: true,
         tabSize: 2,
+        styleSelectedText: true,
         theme: this.props.theme,
         readOnly: this.props.readOnly
       });

src/CodeExample.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import classNames from 'classnames';
+import {CodeMirror, IS_BROWSER} from './CodeMirrorSettings';
+
+if (IS_BROWSER) {
+  require('codemirror/addon/runmode/runmode');
+}
+
+const propTypes = {
+  codeText: React.PropTypes.string.isRequired,
+  className: React.PropTypes.string,
+  mode: React.PropTypes.string
+};
+
+const defaultProps = {
+  mode: 'javascript'
+};
+
+class CodeExample extends React.Component {
+
+  componentDidMount() {
+    if (CodeMirror === undefined) {
+      return;
+    }
+
+    CodeMirror.runMode(
+      this.props.codeText,
+      this.props.mode,
+      React.findDOMNode(this).children[0]
+    );
+  }
+
+  render() {
+    let classes = classNames('code-example', 'CodeMirror', this.props.className);
+    return (
+      <pre className={classes}>
+        <code>
+          {this.props.codeText}
+        </code>
+      </pre>
+    );
+  }
+}
+
+CodeExample.defaultProps = defaultProps;
+CodeExample.propTypes = propTypes;
+
+export default CodeExample;