1 files changed, 15 insertions, 2 deletions
diff --git a/app/assets/javascripts/code_navigation/utils/index.js b/app/assets/javascripts/code_navigation/utils/index.js
index 6c078891ed4..0d72153d8fe 100644
--- a/app/assets/javascripts/code_navigation/utils/index.js
+++ b/app/assets/javascripts/code_navigation/utils/index.js
@@ -1,9 +1,11 @@
+import { wrapNodes, isTextNode } from './dom_utils';
+
 export const cachedData = new Map();
 
 export const getCurrentHoverElement = () => cachedData.get('current');
 export const setCurrentHoverElement = (el) => cachedData.set('current', el);
 
-export const addInteractionClass = (path, d) => {
+export const addInteractionClass = ({ path, d, wrapTextNodes }) => {
   const lineNumber = d.start_line + 1;
   const lines = document
     .querySelector(`[data-path="${path}"]`)
@@ -12,13 +14,24 @@ export const addInteractionClass = (path, d) => {
 
   lines.forEach((line) => {
     let charCount = 0;
+
+    if (wrapTextNodes) {
+      line.childNodes.forEach((elm) => {
+        if (isTextNode(elm)) {
+          // Highlight.js does not wrap all text nodes by default
+          // We need all text nodes to be wrapped in order to append code nav attributes
+          elm.replaceWith(...wrapNodes(elm.textContent));
+        }
+      });
+    }
+
     const el = [...line.childNodes].find(({ textContent }) => {
       if (charCount === d.start_char) return true;
       charCount += textContent.length;
       return false;
     });
 
-    if (el) {
+    if (el && !isTextNode(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');