[#1519] highlight find matches when focused on search

Author: catarak

client/modules/IDE/components/Editor.jsx

@@ -22,6 +22,7 @@ import 'codemirror/addon/search/match-highlighter';
 import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/selection/mark-selection';
 
 import { JSHINT } from 'jshint';
 import { CSSLint } from 'csslint';
@@ -37,7 +38,7 @@ import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
 import { metaKey, } from '../../../utils/metaKey';
 
-import search from '../../../utils/codemirror-search';
+import '../../../utils/codemirror-search';
 
 import beepUrl from '../../../sounds/audioAlert.mp3';
 import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
@@ -55,8 +56,6 @@ import * as UserActions from '../../User/actions';
 import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 
-search(CodeMirror);
-
 const beautifyCSS = beautifyJS.css;
 const beautifyHTML = beautifyJS.html;
 
@@ -107,6 +106,7 @@ class Editor extends React.Component {
       highlightSelectionMatches: true, // highlight current search match
       matchBrackets: true,
       autoCloseBrackets: this.props.autocloseBracketsQuotes,
+      styleSelectedText: true,
       lint: {
         onUpdateLinting: ((annotations) => {
           this.props.hideRuntimeErrorWarning();

client/styles/abstracts/_variables.scss

@@ -2,7 +2,9 @@ $base-font-size: 12;
 
 //colors
 $p5js-pink: #ed225d;
+$p5js-pink-opacity: #ed225d66;
 $processing-blue: #007BBB;
+$processing-blue-opacity: #007BBB66;
 $p5js-active-pink: #f10046;
 $white: #fff;
 $black: #000;

client/styles/components/_editor.scss

@@ -279,6 +279,14 @@ pre.CodeMirror-line {
   background-image: url(../images/down-arrow.svg?byUrl)
 }
 
+.CodeMirror-search-match {
+  background: gold;
+  border-top: 1px solid orange;
+  border-bottom: 1px solid orange;
+  box-sizing: border-box;
+  opacity: .5;
+}
+
 /*
   Close button
 */

client/styles/components/_p5-contrast-codemirror-theme.scss

@@ -135,3 +135,11 @@ $p5-contrast-activeline: #999999;
 .cm-s-p5-contrast .CodeMirror-cursor {
   border-left: 1px solid $p5-contrast-white;
 }
+
+.cm-s-p5-contrast .cm-searching {
+  background-color: $processing-blue-opacity;  
+}
+
+.cm-s-p5-contrast .CodeMirror-selectedtext {
+  background-color: $medium-dark;
+}

client/styles/components/_p5-dark-codemirror-theme.scss

@@ -142,3 +142,12 @@ $p5-dark-error: #df3a3d;
 .cm-s-p5-dark .CodeMirror-cursor {
   border-left: 1px solid $p5-dark-white;
 }
+
+.cm-s-p5-dark .cm-searching {
+  background-color: $p5js-pink-opacity;
+}
+
+.cm-s-p5-dark .CodeMirror-selectedtext {
+  background-color: $medium-dark;
+}
+

client/styles/components/_p5-light-codemirror-theme.scss

@@ -135,3 +135,11 @@ $p5-light-activeline: rgb(207, 207, 207);
 .cm-s-p5-light .CodeMirror-cursor {
   border-left: 1px solid $p5-light-black;
 }
+
+.cm-s-p5-light .cm-searching {
+  background-color: $p5js-pink-opacity;
+}
+
+.cm-s-p5-light .CodeMirror-selectedtext {
+  background-color: $medium-light;
+}