enhance PageEditor

* match-highlighter
* annotatescrollbar

resource/css/_form.scss

@@ -66,8 +66,16 @@
     border-right: 1px solid #ccc;
 
     // override CodeMirror styles
-    .CodeMirror pre {
-      font-family: $font-family-monospace-not-strictly;
+    .CodeMirror {
+      pre {
+        font-family: $font-family-monospace-not-strictly;
+      }
+      .cm-matchhighlight {
+        background-color: cyan;
+      }
+      .CodeMirror-selection-highlight-scrollbar {
+        background-color: darkcyan;
+      }
     }
   }
   .page-editor-preview-container {

resource/js/components/PageEditor/Editor.js

@@ -9,6 +9,8 @@ require('codemirror/addon/edit/matchtags');
 require('codemirror/addon/edit/closetag');
 require('codemirror/addon/edit/continuelist');
 require('codemirror/addon/edit/indentlist');
+require('codemirror/addon/search/match-highlighter');
+require('codemirror/addon/scroll/annotatescrollbar');
 require('codemirror/mode/gfm/gfm');
 require('codemirror/theme/eclipse.css');
 
@@ -34,11 +36,13 @@ export default class Editor extends React.Component {
           lineNumbers: true,
           tabSize: 4,
           indentUnit: 4,
+          lineWrapping: true,
           autoRefresh: true,
           autoCloseTags: true,
           matchBrackets: true,
           matchTags: {bothTags: true},
-          lineWrapping: true,
+          // match-highlighter, matchesonscrollbar, annotatescrollbar options
+          highlightSelectionMatches: {annotateScrollbar: true},
           // markdown mode options
           highlightFormatting: true,
           // continuelist, indentlist