From 4db91d74fed6c2e44fca2825c5af9ffed44dd617 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Sun, 1 Mar 2015 11:53:06 -0800
Subject: [PATCH] [docs] show line numbers in online jsx compiler

---
 _js/jsx-compiler.js |  1 +
 _js/live_editor.js  | 17 +++++++++++++++--
 css/react.scss      |  4 ++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/_js/jsx-compiler.js b/_js/jsx-compiler.js
index a69bdd21..bd1f2d8a 100644
--- a/_js/jsx-compiler.js
+++ b/_js/jsx-compiler.js
@@ -27,6 +27,7 @@ var CompilerPlayground = React.createClass({
           renderCode={true}
           transformer={transformer.bind(null, this.state.harmony)}
           showCompiledJSTab={false}
+          showLineNumbers={true}
         />
         <label className="compiler-option">
           <input
diff --git a/_js/live_editor.js b/_js/live_editor.js
index 4e453a79..0ffc203d 100644
--- a/_js/live_editor.js
+++ b/_js/live_editor.js
@@ -9,12 +9,21 @@ var IS_MOBILE = (
 );
 
 var CodeMirrorEditor = React.createClass({
+  propTypes: {
+    lineNumbers: React.PropTypes.bool,
+    onChange: React.PropTypes.func
+  },
+  getDefaultProps: function() {
+    return {
+      lineNumbers: false
+    };
+  },
   componentDidMount: function() {
     if (IS_MOBILE) return;
 
     this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
       mode: 'javascript',
-      lineNumbers: false,
+      lineNumbers: this.props.lineNumbers,
       lineWrapping: true,
       smartIndent: false,  // javascript mode does bad things with jsx indents
       matchBrackets: true,
@@ -75,6 +84,7 @@ var ReactPlayground = React.createClass({
     transformer: React.PropTypes.func,
     renderCode: React.PropTypes.bool,
     showCompiledJSTab: React.PropTypes.bool,
+    showLineNumbers: React.PropTypes.bool,
     editorTabTitle: React.PropTypes.string
   },
 
@@ -84,7 +94,8 @@ var ReactPlayground = React.createClass({
         return JSXTransformer.transform(code).code;
       },
       editorTabTitle: 'Live JSX Editor',
-      showCompiledJSTab: true
+      showCompiledJSTab: true,
+      showLineNumbers: false
     };
   },
 
@@ -122,6 +133,7 @@ var ReactPlayground = React.createClass({
         onChange={this.handleCodeChange}
         codeText={compiledCode}
         readOnly={true}
+        lineNumbers={this.props.showLineNumbers}
       />;
 
     var JSXContent =
@@ -130,6 +142,7 @@ var ReactPlayground = React.createClass({
         onChange={this.handleCodeChange}
         className="playgroundStage"
         codeText={this.state.code}
+        lineNumbers={this.props.showLineNumbers}
       />;
 
     var JSXTabClassName =
diff --git a/css/react.scss b/css/react.scss
index 96c26962..9075b4d0 100644
--- a/css/react.scss
+++ b/css/react.scss
@@ -608,8 +608,8 @@ div.CodeMirror pre, div.CodeMirror-linenumber, code {
   @include code-typography;
 }
 
-div.CodeMirror-linenumber:after {
-  content: '.';
+div.CodeMirror-linenumber {
+  text-align: right;
 }
 
 .CodeMirror, div.CodeMirror-gutters, div.highlight {