add active line color in Codemirror editor

Author: catarak

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', () => {

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;
 

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;	
 }

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. */