Discource-C
/
discourse-math
mirror of https://github.com/discourse/discourse-math.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: adds katex support for chat (#88) 

Also drops jquery support and uses `decorateCookedElement` instead of `decorateCooked` for posts.
This commit is contained in:
Joffrey JAFFEUX 2024-08-12 09:31:09 +02:00 committed by GitHub
parent 35e80a0007
commit 686736d3c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 54 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
assets/javascripts/initializers/discourse-math-katex.js
View File

@ -1,72 +1,84 @@
import $ from "jquery";
import loadScript from "discourse/lib/load-script"; import loadScript from "discourse/lib/load-script";
import { withPluginApi } from "discourse/lib/plugin-api"; import { withPluginApi } from "discourse/lib/plugin-api";
function ensureKaTeX() { async function ensureKaTeX() {
return loadScript("/plugins/discourse-math/katex/katex.min.js").then(() => { try {
return loadScript("/plugins/discourse-math/katex/katex.min.css", { await loadScript("/plugins/discourse-math/katex/katex.min.js");
await loadScript("/plugins/discourse-math/katex/katex.min.css", {
css: true, css: true,
}) });
.then(() => { await loadScript("/plugins/discourse-math/katex/mhchem.min.js");
return loadScript("/plugins/discourse-math/katex/mhchem.min.js"); await loadScript("/plugins/discourse-math/katex/copy-tex.min.js");
}) } catch (e) {
.then(() => { // eslint-disable-next-line no-console
return loadScript("/plugins/discourse-math/katex/copy-tex.min.js"); console.error("Failed to load KaTeX dependencies.", e);
}); }
});
} }
function decorate(elem, katexOpts) { function decorate(elem, katexOpts) {
const $elem = $(elem);
katexOpts["displayMode"] = elem.tagName === "DIV"; katexOpts["displayMode"] = elem.tagName === "DIV";
if ($elem.data("applied-katex")) { if (elem.dataset.appliedKatex) {
return; return;
} }
$elem.data("applied-katex", true);
if ($elem.hasClass("math")) { elem.dataset.appliedKatex = true;
const tag = elem.tagName === "DIV" ? "div" : "span";
const displayClass = tag === "div" ? "block-math" : "inline-math"; if (!elem.classList.contains("math")) {
const text = $elem.text(); return;
$elem.addClass(`math-container ${displayClass} katex-math`).text("");
window.katex.render(text, elem, katexOpts);
} }
const tag = elem.tagName === "DIV" ? "div" : "span";
const displayClass = tag === "div" ? "block-math" : "inline-math";
const text = elem.textContent;
elem.classList.add("math-container", displayClass, "katex-math");
elem.textContent = "";
window.katex.render(text, elem, katexOpts);
} }
function katex($elem) { async function katex(elem) {
if (!$elem || !$elem.find) { if (!elem) {
return; return;
} }
const mathElems = $elem.find(".math"); const mathElems = elem.querySelectorAll(".math");
if (!mathElems.length > 0) {
if (mathElems.length > 0) { return;
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
const katexOpts = {
trust: (context) => ["\\htmlId", "\\href"].includes(context.command),
macros: {
"\\eqref": "\\href{###1}{(\\text{#1})}",
"\\ref": "\\href{###1}{\\text{#1}}",
"\\label": "\\htmlId{#1}{}",
},
displayMode: false,
};
mathElems.each((idx, elem) => decorate(elem, katexOpts));
});
} }
await ensureKaTeX();
// 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
const katexOpts = {
trust: (context) => ["\\htmlId", "\\href"].includes(context.command),
macros: {
"\\eqref": "\\href{###1}{(\\text{#1})}",
"\\ref": "\\href{###1}{\\text{#1}}",
"\\label": "\\htmlId{#1}{}",
},
displayMode: false,
};
mathElems.forEach((mathElem) => decorate(mathElem, katexOpts));
} }
function initializeMath(api) { function initializeMath(api) {
api.decorateCooked( api.decorateCookedElement(
function (elem) { function (elem) {
katex(elem); katex(elem);
}, },
{ id: "katex" } { id: "katex" }
); );
if (api.decorateChatMessage) {
api.decorateChatMessage(
(element) => {
katex(element);
},
{ id: "katex-chat" }
);
}
} }
export default { export default {