Merge pull request #3011 from csordasmarton/codemirror_highlights

[gui] Enable search and highlight occurences of the selected text

web/server/vue-cli/src/components/Report/Report.vue

@@ -201,6 +201,20 @@
 import Vue from "vue";
 
 import CodeMirror from "codemirror";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/clike/clike.js";
+
+// Import libaries for code highlights.
+import "codemirror/addon/scroll/annotatescrollbar.js";
+import "codemirror/addon/search/match-highlighter.js";
+import "codemirror/addon/search/matchesonscrollbar.js";
+
+// Import libaries to support code search.
+import "codemirror/addon/dialog/dialog.js";
+import "codemirror/addon/dialog/dialog.css";
+import "codemirror/addon/search/search.js";
+import "codemirror/addon/search/searchcursor.js";
+
 import { jsPlumb } from "jsplumb";
 
 import { format } from "date-fns";
@@ -312,14 +326,23 @@ export default {
     }
   },
 
+  created() {
+    document.addEventListener("keydown", this.findText);
+  },
+
+  destoryed() {
+    document.removeEventListener("keydown", this.findText);
+  },
+
   mounted() {
     this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
       lineNumbers: true,
       readOnly: true,
       mode: "text/x-c++src",
       gutters: [ "CodeMirror-linenumbers", "bugInfo" ],
       extraKeys: {},
-      viewportMargin: 500
+      viewportMargin: 500,
+      highlightSelectionMatches : { showToken: /\w/, annotateScrollbar: true }
     });
     this.editor.setSize("100%", "100%");
 
@@ -403,6 +426,16 @@ export default {
       this.loading = false;
     },
 
+    findText(evt) {
+      if (evt.ctrlKey && evt.keyCode === 13) // Enter
+        this.editor.execCommand("findPersistentNext");
+
+      if (evt.ctrlKey && evt.keyCode === 70) { // Ctrl-f
+        evt.preventDefault();
+        this.editor.execCommand("findPersistent");
+      }
+    },
+
     highlightReportStep(stepId) {
       this.highlightCurrentBubble(stepId);
     },
@@ -723,6 +756,14 @@ export default {
   .editor {
     font-size: initial;
     line-height: initial;
+
+    ::v-deep .cm-matchhighlight:not(.cm-searching) {
+      background-color: lightgreen;
+    }
+
+    ::v-deep .CodeMirror-selection-highlight-scrollbar {
+      background-color: green;
+    }
   }
 }
 

web/server/vue-cli/src/main.js

@@ -11,8 +11,6 @@ if (!Error.captureStackTrace) {
 }
 
 import "@mdi/font/css/materialdesignicons.css";
-import "codemirror/lib/codemirror.css";
-import "codemirror/mode/clike/clike.js";
 import "splitpanes/dist/splitpanes.css";
 
 import Vue from "vue";