[docs] show line numbers in online jsx compiler
Paul O’Shannessy committed
Mar 1, 2015 at 11:53 UTC
b2161bd51d9d039c70bb1218bc4f847588816b51
3 files changed
+18
-4
docs/_js/jsx-compiler.js
+1
@@ -27,6 +27,7 @@ var CompilerPlayground = React.createClass({
27
renderCode={true}
28
transformer={transformer.bind(null, this.state.harmony)}
29
showCompiledJSTab={false}
30
+ showLineNumbers={true}
31
/>
32
<label className="compiler-option">
33
<input
docs/_js/live_editor.js
+15
-2
@@ -9,12 +9,21 @@ var IS_MOBILE = (
9
);
10
11
var CodeMirrorEditor = React.createClass({
12
+ propTypes: {
13
+ lineNumbers: React.PropTypes.bool,
14
+ onChange: React.PropTypes.func
15
+ },
16
+ getDefaultProps: function() {
17
+ return {
18
+ lineNumbers: false
19
+ };
20
+ },
21
componentDidMount: function() {
22
if (IS_MOBILE) return;
23
24
this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
25
mode: 'javascript',
17
- lineNumbers: false,
26
+ lineNumbers: this.props.lineNumbers,
27
lineWrapping: true,
28
smartIndent: false, // javascript mode does bad things with jsx indents
29
matchBrackets: true,
@@ -75,6 +84,7 @@ var ReactPlayground = React.createClass({
84
transformer: React.PropTypes.func,
85
renderCode: React.PropTypes.bool,
86
showCompiledJSTab: React.PropTypes.bool,
87
+ showLineNumbers: React.PropTypes.bool,
88
editorTabTitle: React.PropTypes.string
89
},
90
@@ -84,7 +94,8 @@ var ReactPlayground = React.createClass({
94
return JSXTransformer.transform(code).code;
95
},
96
editorTabTitle: 'Live JSX Editor',
87
- showCompiledJSTab: true
97
+ showCompiledJSTab: true,
98
+ showLineNumbers: false
99
};
100
},
101
@@ -122,6 +133,7 @@ var ReactPlayground = React.createClass({
133
onChange={this.handleCodeChange}
134
codeText={compiledCode}
135
readOnly={true}
136
+ lineNumbers={this.props.showLineNumbers}
137
/>;
138
139
var JSXContent =
@@ -130,6 +142,7 @@ var ReactPlayground = React.createClass({
142
onChange={this.handleCodeChange}
143
className="playgroundStage"
144
codeText={this.state.code}
145
+ lineNumbers={this.props.showLineNumbers}
146
/>;
147
148
var JSXTabClassName =
docs/css/react.scss
+2
-2
@@ -608,8 +608,8 @@ div.CodeMirror pre, div.CodeMirror-linenumber, code {
608
@include code-typography;
609
}
610
611
-div.CodeMirror-linenumber:after {
612
- content: '.';
611
+div.CodeMirror-linenumber {
612
+ text-align: right;
613
}
614
615
.CodeMirror, div.CodeMirror-gutters, div.highlight {