DEV: removes jquery usage from highlight-syntax (#10564)
diff --git a/app/assets/javascripts/admin/components/highlighted-code.js b/app/assets/javascripts/admin/components/highlighted-code.js
index 836ec06..f458042 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 98fa982..323e522 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 cd9724d..6a0f7e7 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();
+
+ elem.querySelectorAll(selector).forEach(e => {
+ // Large code blocks can cause crashes or slowdowns
+ if (e.innerHTML.length > 30000) {
+ return;
+ }
- $(e).removeClass("lang-auto");
- loadScript(path).then(() => {
- customHighlightJSLanguages();
+ 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 a5bd512..4a7f622 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()
GitHub sha: f8062300