Skip to content

Update MathJax to version 4 for format preview. #1599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cpeel merged 3 commits into from
Jul 29, 2026
Merged

Update MathJax to version 4 for format preview. #1599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1f9b904
Update MathJax to version 4 for format preview.
Mrducky Jul 26, 2026
d0dd568
Serve mathjax4 ourself, rather than from a CDN.
Mrducky Jul 26, 2026
d1e91a7
Fix previewControl.js formatting
Mrducky Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"d3": "^6.6.2",
"gettext.js": "^2.0.3",
"jquery": "^3.5.1",
"mathjax": "^4.1.3",
"resumablejs": "^1.1.0"
},
"browserslist": [
Expand Down
8 changes: 5 additions & 3 deletions pinc/base.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,11 @@ if (!headers_sent()) {
"default-src 'self'",
// allow inline styles
"style-src 'self' 'unsafe-inline'",
// allow inline scripts until we remove them, and cdn.jsdelivr.net
// for MathJAX
"script-src 'self' 'unsafe-inline' cdn.jsdelivr.net",
// allow inline scripts until we remove them
"script-src 'self' 'unsafe-inline'",
// MathJAX 4 dynamically loads fonts and a worker
"font-src 'self' data:",
"worker-src 'self' blob:",
// allow images from anywhere (due to project comments)
"img-src 'self' *",
// Disallow other sites from embedding pages in frames/iframes;
Expand Down
18 changes: 10 additions & 8 deletions tools/proofers/previewControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { ajax } from "../../scripts/api.js";
import { makePreview, defaultStyles } from "../../scripts/analyse_format.js";
import { validateText } from "../../scripts/text_validator.js";

window.addEventListener("DOMContentLoaded", () => {
window.addEventListener("DOMContentLoaded", async () => {
"use strict";
var supp_set = ["charBeforeStart", "sideNoteBlank"];
// this is a wrapper round text_preview which enables the padding
Expand Down Expand Up @@ -88,14 +88,14 @@ window.addEventListener("DOMContentLoaded", () => {
previewColorStyle.innerHTML = styleString;
}

function writePreviewText() {
async function writePreviewText() {
// makePreview is defined in analyse_format.js
preview = makePreview(txtarea.value, viewMode, wrapMode, previewStyles);
prevWin.style.whiteSpace = preview.ok && wrapMode ? "normal" : "pre";
prevWin.innerHTML = preview.txtout;
if (preview.ok && previewStyles.allowMathPreview) {
try {
MathJax.typeset([prevWin]);
await MathJax.typesetPromise([prevWin]);
} catch (exception) {
alert("MathJax error: " + exception);
}
Expand Down Expand Up @@ -187,13 +187,14 @@ window.addEventListener("DOMContentLoaded", () => {
window.MathJax = {
loader: { load: ["input/tex", "output/svg", "[tex]/unicode"] },
tex: { packages: { "[+]": ["unicode"] } },
output: { font: "mathjax-newcm", fontPath: "../../node_modules/@mathjax/mathjax-newcm-font" },
};
const mathJaxScriptElement = document.createElement("script");
mathJaxScriptElement.type = "text/javascript";
mathJaxScriptElement.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js";
mathJaxScriptElement.src = "../../node_modules/mathjax/tex-svg.js";
const scriptLoadPromise = new Promise(function (resolve) {
mathJaxScriptElement.onload = function () {
resolve();
MathJax.startup.promise.then(resolve);
};
document.body.appendChild(mathJaxScriptElement);
});
Expand All @@ -205,7 +206,7 @@ window.addEventListener("DOMContentLoaded", () => {
}

initStyle();
initView();
await initView();
setupFont();

function colorChange(event) {
Expand Down Expand Up @@ -404,8 +405,9 @@ window.addEventListener("DOMContentLoaded", () => {
saveStyle();
// if loading MathJax, wait for it to finish
initView().then(function () {
writePreviewText();
hideConfig();
writePreviewText().then(function () {

@chrismiceli chrismiceli Jul 28, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very minor, but if we are using async await above, we could here too I imagine.

@mrducky4 mrducky4 Jul 28, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think so, but I didn't change it since it was already using .then(). It should be equivalent either way.

hideConfig();
});
});
},

Expand Down