Fix environments for KaTeX and error reporting (#22453) (#22473)

Backport #22453

In #22447 it was noticed that display environments were not working
correctly. This was due to the setting displayMode not being set.

Further it was noticed that the error was not being displayed correctly.

This PR fixes both of these issues by forcibly setting the displayMode
setting and corrects an error in displayError.

Fix #22447

Signed-off-by: Andrew Thornton <art27@cantab.net>

diff --git a/web_src/js/markup/math.js b/web_src/js/markup/math.js
index 5790a327a51f6b22bbebf9fba1973597597bb8fd..cfd058c93cc8eeae7729f51ec01d99f5c769e7b7 100644 (file)
--- a/web_src/js/markup/math.js
+++ b/web_src/js/markup/math.js
@@ -1,6 +1,6 @@
 function displayError(el, err) {
   const target = targetElement(el);
-  target.remove('is-loading');
+  target.classList.remove('is-loading');
   const errorNode = document.createElement('div');
   errorNode.setAttribute('class', 'ui message error markup-block-error mono');
   errorNode.textContent = err.str || err.message || String(err);
@@ -23,12 +23,16 @@ export async function renderMath() {
 
   for (const el of els) {
     const source = el.textContent;
-    const options = {display: el.classList.contains('display')};
+    const displayMode = el.classList.contains('display');
+    const nodeName = displayMode ? 'p' : 'span';
 
     try {
-      const markup = katex.renderToString(source, options);
-      const tempEl = document.createElement(options.display ? 'p' : 'span');
-      tempEl.innerHTML = markup;
+      const tempEl = document.createElement(nodeName);
+      katex.render(source, tempEl, {
+        maxSize: 25,
+        maxExpand: 50,
+        displayMode,
+      });
       targetElement(el).replaceWith(tempEl);
     } catch (error) {
       displayError(el, error);