1 files changed, 20 insertions, 13 deletions
diff --git a/app/assets/javascripts/code_navigation/utils/index.js b/app/assets/javascripts/code_navigation/utils/index.js
index 2dee0de6501..4d118852a94 100644
--- a/app/assets/javascripts/code_navigation/utils/index.js
+++ b/app/assets/javascripts/code_navigation/utils/index.js
@@ -3,18 +3,25 @@ export const cachedData = new Map();
 export const getCurrentHoverElement = () => cachedData.get('current');
 export const setCurrentHoverElement = el => cachedData.set('current', el);
 
-export const addInteractionClass = d => {
-  let charCount = 0;
-  const line = document.getElementById(`LC${d.start_line + 1}`);
-  const el = [...line.childNodes].find(({ textContent }) => {
-    if (charCount === d.start_char) return true;
-    charCount += textContent.length;
-    return false;
-  });
+export const addInteractionClass = (path, d) => {
+  const lineNumber = d.start_line + 1;
+  const lines = document
+    .querySelector(`[data-path="${path}"]`)
+    .querySelectorAll(`.blob-content #LC${lineNumber}, .line_content:not(.old) #LC${lineNumber}`);
+  if (!lines?.length) return;
+
+  lines.forEach(line => {
+    let charCount = 0;
+    const el = [...line.childNodes].find(({ textContent }) => {
+      if (charCount === d.start_char) return true;
+      charCount += textContent.length;
+      return false;
+    });
 
-  if (el) {
-    el.setAttribute('data-char-index', d.start_char);
-    el.setAttribute('data-line-index', d.start_line);
-    el.classList.add('cursor-pointer', 'code-navigation', 'js-code-navigation');
-  }
+    if (el) {
+      el.setAttribute('data-char-index', d.start_char);
+      el.setAttribute('data-line-index', d.start_line);
+      el.classList.add('cursor-pointer', 'code-navigation', 'js-code-navigation');
+    }
+  });
 };