Skip to content

feat!: upgrade to mathjax v3 #33555

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

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
+453 −450
Draft

feat!: upgrade to mathjax v3 #33555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
77 changes: 38 additions & 39 deletions cms/djangoapps/pipeline_js/js/xmodule.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,41 +16,42 @@ define(

window.$ = $;
window._ = _;
window.MathJax = {
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
// autocollapse: false, // Not found in v3
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};

$script(
'https://cdn.jsdelivr.net/npm/[email protected]/MathJax.js'
+ '?config=TeX-MML-AM_SVG&delayStartupUntil=configured',
'https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-svg.js',
Copy link

@wittjeff wittjeff Nov 8, 2023

Choose a reason for hiding this comment

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

There is a v3.2.2 available. https://github.com/mathjax/MathJax/releases/tag/3.2.2

'mathjax',
function() {
window.MathJax.Hub.Config({
styles: {
'.MathJax_SVG>svg': {'max-width': '100%'},
// This is to resolve for people who use center mathjax with tables
'table>tbody>tr>td>.MathJax_SVG>svg': {'max-width': 'inherit'},
},
tex2jax: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
]
},
CommonHTML: {linebreaks: {automatic: true}},
SVG: {linebreaks: {automatic: true}},
'HTML-CSS': {linebreaks: {automatic: true}},
});

// In order to eliminate all flashing during interactive
// preview, it is necessary to set processSectionDelay to 0
// (remove delay between input and output phases). This
// effectively disables fast preview, regardless of
// the fast preview setting as shown in the context menu.
window.MathJax.Hub.processSectionDelay = 0;
window.MathJax.Hub.Configured();

window.addEventListener('resize', MJrenderer);

let t = -1;
Expand All @@ -65,14 +66,12 @@ define(
if (oldWidth !== document.documentElement.scrollWidth) {
t = window.setTimeout(function() {
oldWidth = document.documentElement.scrollWidth;
MathJax.Hub.Queue(
['Rerender', MathJax.Hub],
[() => $('.MathJax_SVG>svg').toArray().forEach(el => {
if ($(el).width() === 0) {
$(el).css('max-width', 'inherit');
}
})]
);
MathJax.typesetClear();
MathJax.typesetPromise().then(() => $('.MathJax>svg').toArray().forEach(el => {
if ($(el).width() === 0) {
$(el).css('max-width', 'inherit');
}
}));
t = -1;
}, delay);
}
Expand Down
68 changes: 31 additions & 37 deletions cms/static/cms/js/require-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,34 @@
}
});

// MathJax Fast Preview was introduced in 2.5. However, it
// causes undesirable flashing/font size changes when
// MathJax is used for interactive preview (equation editor).
// Setting processSectionDelay to 0 (see below) fully eliminates
// fast preview, but to reduce confusion, we are also setting
// the option as displayed in the context menu to false.
// When upgrading to 2.6, check if this variable name changed.
window.MathJax = {
menuSettings: {
CHTMLpreview: false,
collapsible: true,
autocollapse: false,
explorer: true
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};
};
Expand Down Expand Up @@ -137,7 +152,7 @@
'jquery_extend_patch': 'js/src/jquery_extend_patch',

// externally hosted files
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3.2.1/es5/tex-mml-svg.js?noext',
Copy link

@wittjeff wittjeff Nov 8, 2023

Choose a reason for hiding this comment

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

3.2.2 available

'youtube': [
// youtube URL does not end in '.js'. We add '?noext' to the path so
// that require.js adds the '.js' to the query component of the URL,
Expand Down Expand Up @@ -249,27 +264,6 @@
},
'mathjax': {
exports: 'MathJax',
init: function() {
window.MathJax.Hub.Config({
tex2jax: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
]
}
});
// In order to eliminate all flashing during interactive
// preview, it is necessary to set processSectionDelay to 0
// (remove delay between input and output phases). This
// effectively disables fast preview, regardless of
// the fast preview setting as shown in the context menu.
window.MathJax.Hub.processSectionDelay = 0;
window.MathJax.Hub.Configured();
}
},
'URI': {
exports: 'URI'
Expand Down Expand Up @@ -355,9 +349,9 @@
}
},
config: {
text: {
useXhr: () => true
}
text: {
useXhr: () => true
}
}
});
}).call(this, require, define);
42 changes: 32 additions & 10 deletions cms/static/cms/js/spec/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,37 @@
window.edx.HtmlUtils = HtmlUtils;
window.edx.StringUtils = StringUtils;
});

window.MathJax = {
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};
}

requirejs.config({
Expand Down Expand Up @@ -69,7 +100,7 @@
'domReady': 'xmodule_js/common_static/js/vendor/domReady',
'URI': 'xmodule_js/common_static/js/vendor/URI.min',
'mock-ajax': 'xmodule_js/common_static/js/vendor/mock-ajax',
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3.2.1/es5/tex-mml-svg.js?noext',
Copy link

@wittjeff wittjeff Nov 8, 2023

Choose a reason for hiding this comment

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

3.2.2 available

'youtube': '//www.youtube.com/player_api?noext',
'js/src/ajax_prefix': 'xmodule_js/common_static/js/src/ajax_prefix',
'js/spec/test_utils': 'js/spec/test_utils'
Expand Down Expand Up @@ -172,15 +203,6 @@
},
'mathjax': {
exports: 'MathJax',
init: function() {
window.MathJax.Hub.Config({
tex2jax: {
inlineMath: [['\\(', '\\)'], ['[mathjaxinline]', '[/mathjaxinline]']],
displayMath: [['\\[', '\\]'], ['[mathjax]', '[/mathjax]']]
}
});
return window.MathJax.Hub.Configured();
}
},
'accessibility': {
exports: 'accessibility',
Expand Down
43 changes: 33 additions & 10 deletions cms/static/cms/js/spec/main_squire.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,38 @@
'use strict';

var i, specHelpers, testFiles;
if (window) {
window.MathJax = {
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};
}

requirejs.config({
baseUrl: '/base/',
Expand Down Expand Up @@ -48,7 +80,7 @@
'draggabilly': 'xmodule_js/common_static/js/vendor/draggabilly',
'domReady': 'xmodule_js/common_static/js/vendor/domReady',
'URI': 'xmodule_js/common_static/js/vendor/URI.min',
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3.2.1/es5/tex-mml-svg.js?noext',
Copy link

@wittjeff wittjeff Nov 8, 2023

Choose a reason for hiding this comment

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

3.2.2 available

'youtube': '//www.youtube.com/player_api?noext',
'js/src/ajax_prefix': 'xmodule_js/common_static/js/src/ajax_prefix'
},
Expand Down Expand Up @@ -142,15 +174,6 @@
},
'mathjax': {
exports: 'MathJax',
init: function() {
window.MathJax.Hub.Config({
tex2jax: {
inlineMath: [['\\(', '\\)'], ['[mathjaxinline]', '[/mathjaxinline]']],
displayMath: [['\\[', '\\]'], ['[mathjax]', '[/mathjax]']]
}
});
window.MathJax.Hub.Configured();
}
},
'URI': {
exports: 'URI'
Expand Down
9 changes: 9 additions & 0 deletions cms/static/sass/studio-main-v1.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,12 @@
@import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
@import 'build-v1'; // shared app style assets/rendering


.MathJax>svg {
Copy link

@wittjeff wittjeff Nov 8, 2023

Choose a reason for hiding this comment

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

I thought v3 eliminated SVG rendering. No? SVG rendering is problematic when used as items in a select element.

max-width: 100%,
}

table>tbody>tr>td>.MathJax>svg {
Copy link

@wittjeff wittjeff Nov 8, 2023

Choose a reason for hiding this comment

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

Not sure if relevant now.

max-width: inherit
}
Loading