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