[gui] Highlight occurences of the selected text

Search and highlight occurrences of the selected text.
Ericsson · Nov 9, 2020 · 4807627 · 4807627
1 parent 988c26a
commit 4807627
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/web/server/vue-cli/src/components/Report/Report.vue b/web/server/vue-cli/src/components/Report/Report.vue
@@ -304,7 +304,8 @@ export default {
       mode: "text/x-c++src",
       gutters: [ "CodeMirror-linenumbers", "bugInfo" ],
       extraKeys: {},
-      viewportMargin: 500
+      viewportMargin: 500,
+      highlightSelectionMatches : { showToken: /\w/, annotateScrollbar: true }
     });
     this.editor.setSize("100%", "100%");
 
@@ -708,6 +709,14 @@ export default {
   .editor {
     font-size: initial;
     line-height: initial;
+
+    ::v-deep .cm-matchhighlight {
+      background-color: lightgreen;
+    }
+
+    ::v-deep .CodeMirror-selection-highlight-scrollbar {
+      background-color: green;
+    }
   }
 }
 

diff --git a/web/server/vue-cli/src/main.js b/web/server/vue-cli/src/main.js
@@ -13,6 +13,10 @@ if (!Error.captureStackTrace) {
 import "@mdi/font/css/materialdesignicons.css";
 import "codemirror/lib/codemirror.css";
 import "codemirror/mode/clike/clike.js";
+import "codemirror/addon/scroll/annotatescrollbar.js";
+import "codemirror/addon/search/match-highlighter.js";
+import "codemirror/addon/search/matchesonscrollbar.js";
+
 import "splitpanes/dist/splitpanes.css";
 
 import Vue from "vue";