diff --git a/_css/react.scss b/_css/react.scss index 1c0e9730..d130086f 100644 --- a/_css/react.scss +++ b/_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 */ @@ -560,7 +566,7 @@ figure { margin-top: 60px; } -/* Code Mirror */ +/* CodeMirror */ div.CodeMirror pre, div.CodeMirror-linenumber, code { @include code-typography; @@ -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 syntax. Instead of highlighting it +/* CodeMirror doesn't support syntax. Instead of highlighting it as error, just ignore it */ .highlight .javascript .err { background-color: transparent; diff --git a/_js/live_editor.js b/_js/live_editor.js index aebeadec..e51bfabf 100644 --- a/_js/live_editor.js +++ b/_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) { - React.renderComponent( -
, - mountNode - ); + this.setTimeout(function() { + React.renderComponent( +
{e.toString()}
, + mountNode + ); + }, 500); } } }); -