From 172e37431219fa3bad2fd4264ab7bb96b4caeca8 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Thu, 12 May 2016 18:29:38 -0400
Subject: [PATCH] add active line color in Codemirror editor

---
 shared/components/Editor/Editor.jsx                | 2 ++
 styles/abstracts/_variables.scss                   | 1 +
 styles/components/_editor.scss                     | 5 ++++-
 styles/components/_p5-widget-codemirror-theme.scss | 2 +-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx
index 9fc3c1de..a17c1d8d 100644
--- a/shared/components/Editor/Editor.jsx
+++ b/shared/components/Editor/Editor.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/selection/active-line'
 
 class Editor extends React.Component {
 	_cm: CodeMirror.Editor
@@ -10,6 +11,7 @@ class Editor extends React.Component {
       theme: 'p5-widget',
       value: this.props.content,
       lineNumbers: true,
+      styleActiveLine: true,
       mode: 'javascript'
     });
     this._cm.on('change', () => {
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
index e5f9990b..dd970a64 100644
--- a/styles/abstracts/_variables.scss
+++ b/styles/abstracts/_variables.scss
@@ -33,4 +33,5 @@ $dark-button-hover-color: $white;
 $dark-button-active-color: $white;
 
 $editor-border-color: #f4f4f4;
+$editor-selected-line-color: #f3f3f3;
 
diff --git a/styles/components/_editor.scss b/styles/components/_editor.scss
index 233db07e..e6d3fa0a 100644
--- a/styles/components/_editor.scss
+++ b/styles/components/_editor.scss
@@ -14,5 +14,8 @@
 
 .CodeMirror-lines {
 	padding-top: #{25 / $base-font-size}rem;
-	padding-left: #{5 / $base-font-size}rem;
+}
+
+.CodeMirror-line {
+	padding-left: #{5 / $base-font-size}rem;	
 }
\ No newline at end of file
diff --git a/styles/components/_p5-widget-codemirror-theme.scss b/styles/components/_p5-widget-codemirror-theme.scss
index ea45b8f5..1c7fab3e 100644
--- a/styles/components/_p5-widget-codemirror-theme.scss
+++ b/styles/components/_p5-widget-codemirror-theme.scss
@@ -26,7 +26,7 @@
 
 .cm-s-p5-widget span.cm-error { color: #f00; }
 
-.cm-s-p5-widget .CodeMirror-activeline-background { background: #e8f2ff; }
+.cm-s-p5-widget .CodeMirror-activeline-background { background-color: #e8f2ff; }
 .cm-s-p5-widget .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
 
 /* These styles don't seem to be set by CodeMirror's javascript mode. */