From f8062300da274cae559c17509e7c0d11458a065f Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 1 Sep 2020 09:50:49 +0200
Subject: [PATCH] DEV: removes jquery usage from highlight-syntax (#10564)

---
 .../admin/components/highlighted-code.js      |  2 +-
 .../app/initializers/post-decorations.js      |  2 +-
 .../discourse/app/lib/highlight-syntax.js     | 46 +++++++++++++------
 .../components/highlighted-code-test.js       |  4 +-
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/admin/components/highlighted-code.js b/app/assets/javascripts/admin/components/highlighted-code.js
index 836ec06c296..f458042335d 100644
--- a/app/assets/javascripts/admin/components/highlighted-code.js
+++ b/app/assets/javascripts/admin/components/highlighted-code.js
@@ -6,6 +6,6 @@ export default Component.extend({
   @on("didInsertElement")
   @observes("code")
   _refresh() {
-    highlightSyntax($(this.element), this.siteSettings, this.session);
+    highlightSyntax(this.element, this.siteSettings, this.session);
   }
 });
diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
index 98fa982cc4f..323e52259c1 100644
--- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js
+++ b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
@@ -10,7 +10,7 @@ export default {
     withPluginApi("0.1", api => {
       const siteSettings = container.lookup("site-settings:main");
       const session = container.lookup("session:main");
-      api.decorateCooked(
+      api.decorateCookedElement(
         elem => {
           return highlightSyntax(elem, siteSettings, session);
         },
diff --git a/app/assets/javascripts/discourse/app/lib/highlight-syntax.js b/app/assets/javascripts/discourse/app/lib/highlight-syntax.js
index cd9724d2fa3..6a0f7e70277 100644
--- a/app/assets/javascripts/discourse/app/lib/highlight-syntax.js
+++ b/app/assets/javascripts/discourse/app/lib/highlight-syntax.js
@@ -1,34 +1,52 @@
+import loadScript from "discourse/lib/load-script";
+import deprecated from "discourse-common/lib/deprecated";
+
 /*global hljs:true */
 let _moreLanguages = [];
 
-import loadScript from "discourse/lib/load-script";
+export default function highlightSyntax(elem, siteSettings, session) {
+  if (!elem) {
+    return;
+  }
 
-export default function highlightSyntax($elem, siteSettings, session) {
   const selector = siteSettings.autohighlight_all_code
-      ? "pre code"
-      : "pre code[class]",
-    path = session.highlightJsPath;
+    ? "pre code"
+    : "pre code[class]";
+  const path = session.highlightJsPath;
+
+  if (elem instanceof jQuery) {
+    deprecated(
+      "highlightSyntax now takes a DOM node instead of a jQuery object.",
+      {
+        since: "2.6.0",
+        dropFrom: "2.7.0"
+      }
+    );
+
+    elem = elem[0];
+  }
 
   if (!path) {
     return;
   }
 
-  $(selector, $elem).each(function(i, e) {
-    // Large code blocks can cause crashes or slowdowns
-    if (e.innerHTML.length > 30000) {
-      return;
-    }
+  return loadScript(path).then(() => {
+    customHighlightJSLanguages();
 
-    $(e).removeClass("lang-auto");
-    loadScript(path).then(() => {
-      customHighlightJSLanguages();
+    elem.querySelectorAll(selector).forEach(e => {
+      // Large code blocks can cause crashes or slowdowns
+      if (e.innerHTML.length > 30000) {
+        return;
+      }
+
+      e.classList.remove("lang-auto");
       hljs.highlightBlock(e);
     });
   });
 }
 
 export function registerHighlightJSLanguage(name, fn) {
-  _moreLanguages.push({ name: name, fn: fn });
+  _moreLanguages.push({ name, fn });
 }
 
 function customHighlightJSLanguages() {
diff --git a/test/javascripts/components/highlighted-code-test.js b/test/javascripts/components/highlighted-code-test.js
index a5bd5121024..4a7f6226ab2 100644
--- a/test/javascripts/components/highlighted-code-test.js
+++ b/test/javascripts/components/highlighted-code-test.js
@@ -13,7 +13,7 @@ componentTest("highlighting code", {
     this.set("code", "def test; end");
   },
 
-  async test(assert) {
+  test(assert) {
     assert.equal(
       find("code.ruby.hljs .hljs-function .hljs-keyword")
         .text()
@@ -32,7 +32,7 @@ componentTest("large code blocks are not highlighted", {
     this.set("code", LONG_CODE_BLOCK);
   },
 
-  async test(assert) {
+  test(assert) {
     assert.equal(
       find("code")
         .text()