docs better error display for live editor and JSX compiler

_css/react.scss

@@ -466,6 +466,12 @@ section.black content {
       @include code-typography;
     }
   }
+
+  .playgroundError {
+    // The compiler view kills padding in order to render the CodeMirror code
+    // more nicely. For the error view, put a padding back
+    padding: 15px 20px;
+  }
 }
 
 /* Button */
@@ -622,6 +628,11 @@ p code {
   width: $columnWidth;
 }
 
+.playgroundError {
+  color: darken($primary, 5%);
+  font-size: 15px;
+}
+
 .MarkdownEditor textarea {
   width: 100%;
   height: 100px
@@ -636,7 +647,7 @@ p code {
   padding-left: 9px;
 }
 
-/* Codemirror doesn't support <jsx> syntax. Instead of highlighting it
+/* CodeMirror doesn't support <jsx> syntax. Instead of highlighting it
    as error, just ignore it */
 .highlight .javascript .err {
   background-color: transparent;

_js/live_editor.js

@@ -53,7 +53,20 @@ var CodeMirrorEditor = React.createClass({
   }
 });
 
+var selfCleaningTimeout = {
+  componentDidUpdate: function() {
+    clearTimeout(this.timeoutID);
+  },
+
+  setTimeout: function() {
+    clearTimeout(this.timeoutID);
+    this.timeoutID = setTimeout.apply(null, arguments);
+  }
+};
+
 var ReactPlayground = React.createClass({
+  mixins: [selfCleaningTimeout],
+
   MODES: {XJS: 'XJS', JS: 'JS'}, //keyMirror({XJS: true, JS: true}),
 
   propTypes: {
@@ -137,11 +150,12 @@ var ReactPlayground = React.createClass({
         eval(compiledCode);
       }
     } catch (e) {
+      this.setTimeout(function() {
         React.renderComponent(
-        <div content={e.toString()} className="playgroundError" />,
+          <div className="playgroundError">{e.toString()}</div>,
           mountNode
         );
+      }, 500);
     }
   }
 });
-