Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

2 files changed, 11 insertions, 11 deletions

diff --git a/app/assets/javascripts/code_navigation/utils/dom_utils.js b/app/assets/javascripts/code_navigation/utils/dom_utils.js
index 90af31b715c..66770cca8a2 100644
--- a/app/assets/javascripts/code_navigation/utils/dom_utils.js
+++ b/app/assets/javascripts/code_navigation/utils/dom_utils.js
@@ -6,26 +6,28 @@ const isBlank = (str) => !str || /^\s*$/.test(str);
 
 const isMatch = (s1, s2) => !isBlank(s1) && s1.trim() === s2.trim();
 
-const createSpan = (content) => {
+const createSpan = (content, classList) => {
   const span = document.createElement('span');
   span.innerText = content;
+  span.classList = classList || '';
   return span;
 };
 
-const wrapSpacesWithSpans = (text) => text.replace(/ /g, createSpan(' ').outerHTML);
+const wrapSpacesWithSpans = (text) =>
+  text.replace(/ /g, createSpan(' ').outerHTML).replace(/\t/g, createSpan('	').outerHTML);
 
-const wrapTextWithSpan = (el, text) => {
+const wrapTextWithSpan = (el, text, classList) => {
   if (isTextNode(el) && isMatch(el.textContent, text)) {
-    const newEl = createSpan(text.trim());
+    const newEl = createSpan(text.trim(), classList);
     el.replaceWith(newEl);
   }
 };
 
-const wrapNodes = (text) => {
+const wrapNodes = (text, classList) => {
   const wrapper = createSpan();
   // eslint-disable-next-line no-unsanitized/property
   wrapper.innerHTML = wrapSpacesWithSpans(text);
-  wrapper.childNodes.forEach((el) => wrapTextWithSpan(el, text));
+  wrapper.childNodes.forEach((el) => wrapTextWithSpan(el, text, classList));
   return wrapper.childNodes;
 };
 
diff --git a/app/assets/javascripts/code_navigation/utils/index.js b/app/assets/javascripts/code_navigation/utils/index.js
index 46038df2f86..7a5fa9f4a35 100644
--- a/app/assets/javascripts/code_navigation/utils/index.js
+++ b/app/assets/javascripts/code_navigation/utils/index.js
@@ -17,11 +17,9 @@ export const addInteractionClass = ({ path, d, wrapTextNodes }) => {
 
     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));
-        }
+        // 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, elm.classList));
       });
     }