FIX: adds katex support for chat (#88)

Also drops jquery support and uses `decorateCookedElement` instead of `decorateCooked` for posts.

assets/javascripts/initializers/discourse-math-katex.js

@@ -1,48 +1,53 @@
-import $ from "jquery";
 import loadScript from "discourse/lib/load-script";
 import { withPluginApi } from "discourse/lib/plugin-api";
 
-function ensureKaTeX() {
-  return loadScript("/plugins/discourse-math/katex/katex.min.js").then(() => {
-    return loadScript("/plugins/discourse-math/katex/katex.min.css", {
+async function ensureKaTeX() {
+  try {
+    await loadScript("/plugins/discourse-math/katex/katex.min.js");
+    await loadScript("/plugins/discourse-math/katex/katex.min.css", {
       css: true,
-    })
-      .then(() => {
-        return loadScript("/plugins/discourse-math/katex/mhchem.min.js");
-      })
-      .then(() => {
-        return loadScript("/plugins/discourse-math/katex/copy-tex.min.js");
-      });
     });
+    await loadScript("/plugins/discourse-math/katex/mhchem.min.js");
+    await loadScript("/plugins/discourse-math/katex/copy-tex.min.js");
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error("Failed to load KaTeX dependencies.", e);
+  }
 }
 
 function decorate(elem, katexOpts) {
-  const $elem = $(elem);
   katexOpts["displayMode"] = elem.tagName === "DIV";
 
-  if ($elem.data("applied-katex")) {
+  if (elem.dataset.appliedKatex) {
+    return;
+  }
+
+  elem.dataset.appliedKatex = true;
+
+  if (!elem.classList.contains("math")) {
     return;
   }
-  $elem.data("applied-katex", true);
 
-  if ($elem.hasClass("math")) {
   const tag = elem.tagName === "DIV" ? "div" : "span";
   const displayClass = tag === "div" ? "block-math" : "inline-math";
-    const text = $elem.text();
-    $elem.addClass(`math-container ${displayClass} katex-math`).text("");
+  const text = elem.textContent;
+  elem.classList.add("math-container", displayClass, "katex-math");
+  elem.textContent = "";
   window.katex.render(text, elem, katexOpts);
-  }
 }
 
-function katex($elem) {
-  if (!$elem || !$elem.find) {
+async function katex(elem) {
+  if (!elem) {
     return;
   }
 
-  const mathElems = $elem.find(".math");
+  const mathElems = elem.querySelectorAll(".math");
+  if (!mathElems.length > 0) {
+    return;
+  }
+
+  await ensureKaTeX();
 
-  if (mathElems.length > 0) {
-    ensureKaTeX().then(() => {
   // enable persistent macros with are disabled by default: https://katex.org/docs/api.html#persistent-macros
   // also enable equation labelling and referencing which are disabled by default
   // both of these are enabled in mathjax by default, so now the katex implementation is (more) mathjax compatible
@@ -55,18 +60,25 @@ function katex($elem) {
     },
     displayMode: false,
   };
-      mathElems.each((idx, elem) => decorate(elem, katexOpts));
-    });
-  }
+  mathElems.forEach((mathElem) => decorate(mathElem, katexOpts));
 }
 
 function initializeMath(api) {
-  api.decorateCooked(
+  api.decorateCookedElement(
     function (elem) {
       katex(elem);
     },
     { id: "katex" }
   );
+
+  if (api.decorateChatMessage) {
+    api.decorateChatMessage(
+      (element) => {
+        katex(element);
+      },
+      { id: "katex-chat" }
+    );
+  }
 }
 
 export default {