Merge branch 'srp-fix-code-intel-with-multiple-tokens-per-line' into 'master'

Allow code intelligence for all tokens in a line

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/142343



Merged-by: Jacques Erasmus <jerasmus@gitlab.com>
Approved-by: Peter Hegman <phegman@gitlab.com>
Approved-by: Jacques Erasmus <jerasmus@gitlab.com>
Approved-by: Ammar Alakkad <aalakkad@gitlab.com>
Co-authored-by: Scott Pledger <scott.pledger@thetradedesk.com>
Co-authored-by: Scott Pledger <scottpledger2005@gmail.com>

app/assets/javascripts/code_navigation/utils/dom_utils.js

@@ -16,18 +16,19 @@ const createSpan = (content, classList) => {
 const wrapSpacesWithSpans = (text) =>
   text.replace(/ /g, createSpan(' ').outerHTML).replace(/\t/g, createSpan('	').outerHTML);
 
-const wrapTextWithSpan = (el, text, classList) => {
+const wrapTextWithSpan = (el, text, classList, dataset) => {
   if (isTextNode(el) && isMatch(el.textContent, text)) {
     const newEl = createSpan(text.trim(), classList);
+    Object.assign(newEl.dataset, dataset);
     el.replaceWith(newEl);
   }
 };
 
-const wrapNodes = (text, classList) => {
+const wrapNodes = (text, classList, dataset) => {
   const wrapper = createSpan();
   // eslint-disable-next-line no-unsanitized/property
   wrapper.innerHTML = wrapSpacesWithSpans(text);
-  wrapper.childNodes.forEach((el) => wrapTextWithSpan(el, text, classList));
+  wrapper.childNodes.forEach((el) => wrapTextWithSpan(el, text, classList, dataset));
   return wrapper.childNodes;
 };
 

app/assets/javascripts/code_navigation/utils/index.js

@@ -2,6 +2,8 @@ import { wrapNodes, isTextNode } from './dom_utils';
 
 export const cachedData = new Map();
 
+const wrappedLines = new WeakSet();
+
 export const getCurrentHoverElement = () => cachedData.get('current');
 export const setCurrentHoverElement = (el) => cachedData.set('current', el);
 
@@ -19,8 +21,9 @@ export const addInteractionClass = ({ path, d, wrapTextNodes }) => {
       line.childNodes.forEach((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, elm.classList));
+        elm.replaceWith(...wrapNodes(elm.textContent, elm.classList, elm.dataset));
       });
+      wrappedLines.add(line);
     }
 
     const el = [...line.childNodes].find(({ textContent }) => {

spec/frontend/code_navigation/utils/index_spec.js

@@ -88,6 +88,21 @@ describe('addInteractionClass', () => {
       expect(spans[2].textContent).toBe(' ');
     });
 
+    it('keeps datasets for all wrapped nodes in a line', () => {
+      setHTMLFixture(
+        '<div data-path="index.js"><div class="blob-content"><div id="LC1" class="line"><span>console</span><span>.</span><span>log</span></div><div id="LC2" class="line"><span>function</span></div></div></div>',
+      );
+      addInteractionClass({ ...params, d: { start_line: 0, start_char: 0 }, wrapTextNodes: true });
+      // It should set the dataset the first time
+      expect(findAllSpans()[0].dataset).toMatchObject({ charIndex: '0', lineIndex: '0' });
+
+      addInteractionClass({ ...params, d: { start_line: 0, start_char: 8 }, wrapTextNodes: true });
+      // It should keep the dataset for the first token
+      expect(findAllSpans()[0].dataset).toMatchObject({ charIndex: '0', lineIndex: '0' });
+      // And set the dataset for the second token
+      expect(findAllSpans()[2].dataset).toMatchObject({ charIndex: '8', lineIndex: '0' });
+    });
+
     it('adds the correct class names to wrapped nodes', () => {
       setHTMLFixture(
         '<div data-path="index.js"><div class="blob-content"><div id="LC1" class="line"><span class="test"> Text </span></div></div></div>',