Smoothly handle Katex error

This commit is contained in:
EthanHarv 2021-07-14 01:47:09 -05:00
parent 8540c5affb
commit 4a9c58256a

View file

@ -76,16 +76,26 @@ function processData(data){
// Insert inner text // Insert inner text
if (column.text) if (column.text)
{ {
columnDiv.textContent = column.text.replaceAll('\n\n\n', '\n\n'); // The replace call is a bit funky but it works. var textDiv = document.createElement('div');
div.querySelector('.sladerBypassKatex').appendChild(columnDiv); textDiv.classList.add('sladerBypassKatexTextArea')
textDiv.textContent = column.text.replaceAll('\n\n\n', '\n\n'); // The replace call is a bit funky but it works.
columnDiv.appendChild(textDiv);
} }
// Insert image, if applicable // Insert image, if applicable
if (column.images.additional) if (column.images.additional)
{ {
var image = document.createElement('img'); var image = document.createElement('img');
image.setAttribute('src', column.images.additional.regular.srcUrl); image.setAttribute('src', column.images.additional.regular.srcUrl);
div.querySelector('.sladerBypassKatex').appendChild(image); columnDiv.appendChild(image);
} }
// Append server-rendered image src url. Used in errorhandling. (See: handleKatexError())
if (column.images.latex.large)
{
div.querySelector('.sladerBypassKatex').setAttribute('katexsrc', column.images.latex.large.srcUrl);
}
div.querySelector('.sladerBypassKatex').appendChild(columnDiv);
}); });
// Append card to explanation area. // Append card to explanation area.
@ -95,23 +105,43 @@ function processData(data){
// Render Katex for each card // Render Katex for each card
expArea.querySelectorAll('.sladerBypassKatex').forEach(textArea => { expArea.querySelectorAll('.sladerBypassKatex').forEach(textArea => {
renderMathInElement(textArea, { try {
delimiters: [ renderMathInElement(textArea, {
{left: "$$", right: "$$", display: true}, delimiters: [
{left: "$", right: "$", display: false}, {left: "$$", right: "$$", display: true},
{left: "\\(", right: "\\)", display: false}, {left: "$", right: "$", display: false},
{left: "\\begin{equation}", right: "\\end{equation}", display: true}, {left: "\\(", right: "\\)", display: false},
{left: "\\begin{align}", right: "\\end{align}", display: true}, {left: "\\begin{equation}", right: "\\end{equation}", display: true},
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true}, {left: "\\begin{align}", right: "\\end{align}", display: true},
{left: "\\begin{gather}", right: "\\end{gather}", display: true}, {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
{left: "\\begin{CD}", right: "\\end{CD}", display: true}, {left: "\\begin{gather}", right: "\\end{gather}", display: true},
{left: "\\[", right: "\\]", display: true} {left: "\\begin{CD}", right: "\\end{CD}", display: true},
], {left: "\\[", right: "\\]", display: true}
throwOnError : false ],
}); throwOnError : true,
errorCallback : function(a, b){ handleKatexError(a, b, textArea); }
});
} catch (error) {
console.error('Katex experienced an error. Attempting to load image replacement.');
}
}); });
}; };
function handleKatexError(a, b, textArea)
{
// Display Katex error
console.error(a);
console.error(b);
// Remove broken Katex
textArea.querySelector('.sladerBypassKatexTextArea').innerHTML = '';
// Fallback to server-rendered katex (I'm assuming they have better error detection there.)
var image = document.createElement('img');
image.setAttribute('src', textArea.getAttribute('katexsrc'));
textArea.appendChild(image);
}
async function doFetch(url) async function doFetch(url)
{ {
const response = await fetch(url, { const response = await fetch(url, {