Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

1 files changed, 25 insertions, 11 deletions

diff --git a/app/assets/javascripts/syntax_highlight.js b/app/assets/javascripts/syntax_highlight.js
index 474b5132bc6..96b6e78c668 100644
--- a/app/assets/javascripts/syntax_highlight.js
+++ b/app/assets/javascripts/syntax_highlight.js
@@ -1,7 +1,5 @@
 /* eslint-disable consistent-return */
 
-import $ from 'jquery';
-
 // Syntax Highlighter
 //
 // Applies a syntax highlighting color scheme CSS class to any element with the
@@ -12,14 +10,30 @@ import $ from 'jquery';
 //   <div class="js-syntax-highlight"></div>
 //
 
-export default function syntaxHighlight(el) {
-  if ($(el).hasClass('js-syntax-highlight')) {
-    // Given the element itself, apply highlighting
-    return $(el).addClass(gon.user_color_scheme);
-  }
-  // Given a parent element, recurse to any of its applicable children
-  const $children = $(el).find('.js-syntax-highlight');
-  if ($children.length) {
-    return syntaxHighlight($children);
+export default function syntaxHighlight($els = null) {
+  if (!$els) return;
+
+  const els = $els.get ? $els.get() : $els;
+  const handler = (el) => {
+    if (el.classList.contains('js-syntax-highlight')) {
+      // Given the element itself, apply highlighting
+      return el.classList.add(gon.user_color_scheme);
+    }
+    // Given a parent element, recurse to any of its applicable children
+    const children = el.querySelectorAll('.js-syntax-highlight');
+    if (children.length) {
+      return syntaxHighlight(children);
+    }
+  };
+
+  // In order to account for NodeList returned by document.querySelectorAll,
+  // we should rather check whether the els object is iterable
+  // instead of relying on Array.isArray()
+  const isIterable = typeof els[Symbol.iterator] === 'function';
+
+  if (isIterable) {
+    els.forEach((el) => handler(el));
+  } else {
+    handler(els);
   }
 }