Refactored Highlighting mechanism

app/assets/javascripts/line_highlighter.js

@@ -54,12 +54,14 @@ LineHighlighter.prototype.bindEvents = function() {
   $fileHolder.on('highlight:line', this.highlightHash);
 };
 
-LineHighlighter.prototype.highlightHash = function() {
-  var range;
+LineHighlighter.prototype.highlightHash = function(newHash) {
+  let range;
+  if (newHash) this._hash = newHash;
+
+  this.clearHighlight();
 
   if (this._hash !== '') {
     range = this.hashToRange(this._hash);
-
     if (range[0]) {
       this.highlightRange(range);
       const lineSelector = `#L${range[0]}`;
@@ -131,6 +133,7 @@ LineHighlighter.prototype.hashToRange = function(hash) {
 //
 // lineNumber - Line number to highlight
 LineHighlighter.prototype.highlightLine = function(lineNumber) {
+  console.log('LINE : ' + lineNumber);
   return $("#LC" + lineNumber).addClass(this.highlightLineClass);
 };
 

app/assets/javascripts/repo/components/repo_editor.vue

@@ -64,11 +64,6 @@ const RepoEditor = {
       if (e.target.element.classList.contains('line-numbers')) {
         location.hash = `L${lineNumber}`;
         Store.setActiveLine(lineNumber);
-
-        Helper.monacoInstance.setPosition({
-          lineNumber: this.activeLine,
-          column: 1,
-        });
       }
     },
   },
@@ -101,6 +96,15 @@ const RepoEditor = {
         this.setupEditor();
       }
     },
+
+    activeLine() {
+      if (Helper.monacoInstance) {
+        Helper.monacoInstance.setPosition({
+          lineNumber: this.activeLine,
+          column: 1,
+        });
+      }
+    },
   },
   computed: {
     shouldHideEditor() {

app/assets/javascripts/repo/components/repo_preview.vue

@@ -28,6 +28,9 @@ export default {
         this.highlightFile();
       });
     },
+    activeLine(e) {
+      this.lineHighlighter.highlightHash('#L' + Store.activeLine);
+    },
   },
 };
 </script>

app/assets/javascripts/repo/components/repo_sidebar.vue

@@ -42,14 +42,6 @@ export default {
           const lineNumber = Number(location.hash.substr(2));
           if (!isNaN(lineNumber)) {
             Store.setActiveLine(lineNumber);
-            if (Store.isPreviewView() && document.getElementById(`L${lineNumber}`)) {
-              document.getElementById(`L${lineNumber}`).scrollIntoView();
-            } else {
-              Helper.monacoInstance.setPosition({
-                lineNumber: this.activeLine,
-                column: 1,
-              });
-            }
           }
         }
       } else {