docs better error display for live editor and JSX compiler
Cheng Lou committed
Jan 1, 2014 at 19:41 UTC
f0b5219df90d1e15a75130a6564390fd7c90b810
2 files changed
+32
-7
docs/_css/react.scss
+13
-2
@@ -466,6 +466,12 @@ section.black content {
466
@include code-typography;
467
}
468
}
469
+
470
+ .playgroundError {
471
+ // The compiler view kills padding in order to render the CodeMirror code
472
+ // more nicely. For the error view, put a padding back
473
+ padding: 15px 20px;
474
+ }
475
}
476
477
/* Button */
@@ -560,7 +566,7 @@ figure {
566
margin-top: 60px;
567
}
568
563
-/* Code Mirror */
569
+/* CodeMirror */
570
571
div.CodeMirror pre, div.CodeMirror-linenumber, code {
572
@include code-typography;
@@ -622,6 +628,11 @@ p code {
628
width: $columnWidth;
629
}
630
631
+.playgroundError {
632
+ color: darken($primary, 5%);
633
+ font-size: 15px;
634
+}
635
+
636
.MarkdownEditor textarea {
637
width: 100%;
638
height: 100px
@@ -636,7 +647,7 @@ p code {
647
padding-left: 9px;
648
}
649
639
-/* Codemirror doesn't support <jsx> syntax. Instead of highlighting it
650
+/* CodeMirror doesn't support <jsx> syntax. Instead of highlighting it
651
as error, just ignore it */
652
.highlight .javascript .err {
653
background-color: transparent;
docs/_js/live_editor.js
+19
-5
@@ -53,7 +53,20 @@ var CodeMirrorEditor = React.createClass({
53
}
54
});
55
56
+var selfCleaningTimeout = {
57
+ componentDidUpdate: function() {
58
+ clearTimeout(this.timeoutID);
59
+ },
60
+
61
+ setTimeout: function() {
62
+ clearTimeout(this.timeoutID);
63
+ this.timeoutID = setTimeout.apply(null, arguments);
64
+ }
65
+};
66
+
67
var ReactPlayground = React.createClass({
68
+ mixins: [selfCleaningTimeout],
69
+
70
MODES: {XJS: 'XJS', JS: 'JS'}, //keyMirror({XJS: true, JS: true}),
71
72
propTypes: {
@@ -137,11 +150,12 @@ var ReactPlayground = React.createClass({
150
eval(compiledCode);
151
}
152
} catch (e) {
140
- React.renderComponent(
141
- <div content={e.toString()} className="playgroundError" />,
142
- mountNode
143
- );
153
+ this.setTimeout(function() {
154
+ React.renderComponent(
155
+ <div className="playgroundError">{e.toString()}</div>,
156
+ mountNode
157
+ );
158
+ }, 500);
159
}
160
}
161
});
147
-