Push MathJax font styles to document head to allow them to download #2078
Conversation
| @@ -158,6 +183,23 @@ export function loadMathJax(mathJaxConfig) { | |||
| } | |||
| }; | |||
|
|
|||
| if (mathJaxConfig && mathJaxConfig.deferTypeset && !document.head.querySelector('#d2l-mathjax-fonts') && !document.head.querySelector('#MJX-CHTML-styles')) { | |||
There was a problem hiding this comment.
MJX-CHTML-styles is the id of the style element that MathJax applies, which includes the font at-rules. If it exists in the document head already, we don't need to add our own. Notably, we also don't want to use this id because MathJax does a lot more than just the at-rules with those styles, so we also don't want to clobber MathJax's styles with these.
| @@ -1,4 +1,29 @@ | |||
| const mathjaxContextAttribute = 'data-mathjax-context'; | |||
| const mathjaxBaseUrl = 'https://s.brightspace.com/lib/mathjax/3.1.2'; | |||
|
|
|||
| const mathjaxFontMappings = new Map([ | |||
There was a problem hiding this comment.
These mappings are pulled from here: https://github.com/mathjax/MathJax-src/blob/master/ts/output/chtml/fonts/tex.ts
Of course, this can certainly change in the future, so we'll need to be careful when we update MathJax to update these fonts as well. It's not ideal, but MathJax doesn't expose these in any kind of convenient API so we can't really scrape them.
|
Visual diff tests failed - pull request #2079 has been opened with the updated goldens. |
There was a problem hiding this comment.
I really wish MathJax would provide an out of the box solution that handles all this so we would not have to be duct-taping this stuff together. Any thought on raising this with them in response to the thread that talks about how use MathJax in shadowDOM, or starting a new thread?
It would be much worthwhile to include a comment at the top of this file indicating the details of what needs to be checked when upgrading MathJax.
Aside from that, looks ok.
Yep, I can do that for sure.
Good point, yeah. I also find myself wondering if this would be a good candidate for automating deployment to the CDN, much like TinyMCE. That wouldn't change needing to add a comment here, but it's food for thought I think. |
|
Visual diff tests failed - pull request #2088 has been opened with the updated goldens. |
|
I'm very certain my addition of a single comment to the top of this file didn't start setting d2l-dialog visual diff tests on fire... |
|
Ack, accidentally deleted my previous comment... Any objections if I merge in the new goldens? These reports also failed across other PRs. |
Seems like the browser is doing something differently with shadows. Is this happening consistently? |
|
So yeah, if they are consistent I think it's fine. |
…-2078 Updating Visual Diff Goldens for PR 2078
|
Visual diff tests failed - pull request #2090 has been opened with the updated goldens. |
…-2078 Updating Visual Diff Goldens for PR 2078
|
Hey Grant, you can merge your changes in now. After your PR is merged, I am going to remove some of the flaky tests that are causing us trouble so hopefully we won't need to re-run 5 times the next time we run into an issue like this 😄 |
Oh, haha, fair enough. Unfortunately I don't have permission to skip required steps in this repo so I think someone else would need to push it through for me. 😬 EDIT: I say as tests finally finish and the run goes green... |
|
🎉 This PR is included in version 1.230.4 🎉 The release is available on: Your semantic-release bot 📦🚀 |
ghost
added
the
So... It turns out that MathJax fonts aren't loading properly within the html-block control when rendering is deferred; specifically because MathJax sprouts its font at-rules in a style element in whatever document context you give it. It turns out that within a component's shadowDOM, these fonts are just never downloaded.
My proposed solution is to mimic what MathJax does with its styles when rendering isn't deferred: sprout the font at-rules in the document head. This allows them to download as one would expect.
As usual, I'm entirely open to other ideas here. :)