mirror of
https://github.com/lebr0nli/slader-extension.git
synced 2025-05-10 16:32:11 +00:00
Smoothly handle Katex error
This commit is contained in:
parent
8540c5affb
commit
4a9c58256a
|
@ -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, {
|
||||||
|
|
Loading…
Reference in a new issue