Fix live editor on mobile devices

_config.yml

@@ -1,6 +1,7 @@
 --- 
-markdown: redcarpet
 name: React
+markdown: redcarpet
+baseurl: /react
 react_version: 0.3.0
 redcarpet: 
   extensions: 
@@ -11,4 +12,3 @@ exclude:
 - Gemfile.lock
 - README.md
 - Rakefile
-baseurl: /react

_js/live_editor.js

@@ -2,8 +2,22 @@
  * @jsx React.DOM
  */
 
+
+var IS_MOBILE = (
+  navigator.userAgent.match(/Android/i)
+    || navigator.userAgent.match(/webOS/i)
+    || navigator.userAgent.match(/iPhone/i)
+    || navigator.userAgent.match(/iPad/i)
+    || navigator.userAgent.match(/iPod/i)
+    || navigator.userAgent.match(/BlackBerry/i)
+    || navigator.userAgent.match(/Windows Phone/i)
+);
+
 var CodeMirrorEditor = React.createClass({
   componentDidMount: function(root) {
+    if (IS_MOBILE) {
+      return;
+    }
     this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
       mode: 'javascript',
       lineNumbers: false,
@@ -21,9 +35,17 @@ var CodeMirrorEditor = React.createClass({
   },
   render: function() {
     // wrap in a div to fully contain CodeMirror
+    var editor;
+
+    if (IS_MOBILE) {
+      editor = <pre style={{overflow: 'scroll'}}>{this.props.codeText}</pre>;
+    } else {
+      editor = <textarea ref="editor">{this.props.codeText}</textarea>;
+    }
+
     return (
       <div class={this.props.className}>
-        <textarea ref="editor">{this.props.codeText}</textarea>
+        {editor}
       </div>
     );
   }