Remove obsolete references to KaTeX (#2303)

## Summary:
In 2023, we deprecated our usage of KaTeX in favor of MathJax 3.
This PR cleans up references to KaTeX in Perseus.

Issue: LEMS-1608

## Test plan:

- Deploy a ZND
- Verify that you can see math in an exercise
- ...and in the exercise editor
- ...and in the article editor.
- If you create a math element with invalid syntax, like `$#$`, you should see
  a "TeX Errors" box appear that lists the errors and their locations.

Author: benchristel

Reviewers: benchristel, handeyeco, SonicScrewdriver, jeremywiebe

Required Reviewers:

Approved By: handeyeco

Checks: ✅ 8 checks were successful

Pull Request URL: #2303

Author: benchristel

.changeset/ten-adults-act.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": major
+"@khanacademy/perseus-editor": major
+---
+
+Drop support for using KaTeX as a math renderer. You may encounter styling issues or TeX syntax errors if you try to implement `PerseusDependencies.TeX` using KaTeX.

packages/perseus-editor/package.json

@@ -43,6 +43,7 @@
         "@khanacademy/perseus-core": "workspace:*",
         "@khanacademy/perseus-score": "workspace:*",
         "@khanacademy/pure-markdown": "workspace:*",
+        "katex": "0.11.1",
         "mafs": "^0.19.0"
     },
     "devDependencies": {
@@ -68,7 +69,6 @@
         "aphrodite": "catalog:",
         "classnames": "catalog:",
         "jquery": "catalog:",
-        "katex": "0.11.1",
         "perseus-build-settings": "workspace:*",
         "prop-types": "catalog:",
         "react": "catalog:",

packages/perseus-editor/src/widgets/label-image/answer-choices.tsx

@@ -18,7 +18,7 @@ type AddAnswerProps = {
 };
 
 type AnswerProps = {
-    // The answer string, can be plain text or a KaTeX expression.
+    // The answer string, can be plain text or a TeX expression.
     answer: string;
     // Callback for when an answer is changed.
     onChange: (answer: string) => void;

packages/perseus/src/__tests__/renderer.test.tsx

@@ -736,26 +736,6 @@ describe("renderer", () => {
             expect(container).toMatchSnapshot();
         });
 
-        it("should replace deprecated alignment tags in inline math", async () => {
-            // Arrange
-            const question = {
-                content:
-                    "Hello $\\begin{align}\n2\\text{HCl}(\\text{aq})+\\text{Ca}(\\text{OH})_2(\\text{aq})\\rightarrow\\text{Ca}(\\text{s})+2\\text H_2\\text O(\\text l)+\\text{Cl}_2(\\text g)\n\\end{align}$",
-                images: {},
-                widgets: {},
-            } as const;
-
-            // Act
-            renderQuestion(question);
-
-            // Assert
-            await waitFor(() => {
-                expect(
-                    screen.getByText(/\\begin\{aligned\}.*\\end\{aligned\}/),
-                ).toBeInTheDocument();
-            });
-        });
-
         it("should replace deprecated alignment tags in block math", async () => {
             // Arrange
             const question = {

packages/perseus/src/components/zoomable-tex.tsx

@@ -22,9 +22,7 @@ const computeMathBounds = (
     parentNode: HTMLElement,
     parentBounds: {width: number; height: number},
 ) => {
-    const textElement =
-        parentNode.querySelector(".katex-html") ||
-        parentNode.querySelector(".MathJax");
+    const textElement = parentNode.querySelector(".MathJax");
     const textBounds = {
         // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element'.
         width: textElement.offsetWidth,

packages/perseus/src/renderer.tsx

@@ -1219,14 +1219,7 @@ class Renderer
             );
         }
         if (node.type === "math") {
-            // Replace uses of \begin{align}...\end{align} which KaTeX doesn't
-            // support (yet) with \begin{aligned}...\end{aligned} which renders
-            // the same is supported by KaTeX.  It does the same for align*.
-            // TODO(kevinb) update content to use aligned instead of align.
-            // TODO(LEMS-1608) Remove this replacement as MathJax supports the
-            // "align" macro correctly (and, in fact, it is not synonymous with
-            // "aligned").
-            const tex = node.content.replace(/\{align[*]?\}/g, "{aligned}");
+            const tex = node.content;
 
             // We render math here instead of in perseus-markdown.jsx
             // because we need to pass it our onRender callback.

packages/perseus/src/styles/styles.less

@@ -70,11 +70,10 @@
         }
 
         // Inline math should have the same font-size as the surrounding text.
-        // There is no wrapping element around .katex to indicate that it is
+        // There is no wrapping element around TeX to indicate that it is
         // inline, so we rely on the "actual paragraph" check above
         // (a .paragraph that contains another .paragraph instead of a
         // .perseus-block-math).
-        .katex,
         mjx-container {
             font-size: 100%;
         }
@@ -242,7 +241,6 @@
             .paragraph {
                 .text(@choiceTextSize, @choiceLineHeight, @gray17);
 
-                .katex,
                 mjx-container {
                     color: @gray17;
                 }
@@ -392,7 +390,6 @@
             .paragraph {
                 .text(@choiceTextSize, @choiceLineHeight, @gray17);
 
-                .katex,
                 mjx-container {
                     color: @gray17;
                 }
@@ -420,24 +417,17 @@
 
     .math(@blockMathTextSize; @blockMathLineHeight;
           @inlineMathTextSize; @inlineMathLineHeight) {
-        :is(.katex, mjx-container):not(.mafs-graph *) {
+        mjx-container:not(.mafs-graph *) {
             font-size: @inlineMathTextSize;
             line-height: @inlineMathLineHeight;
             color: @gray17;
         }
 
-        .perseus-block-math .katex,
         .perseus-block-math mjx-container {
             font-size: @blockMathTextSize;
             line-height: @blockMathLineHeight;
         }
 
-        // HACK(charlie): I am ashamed. This seems to be the only way to revert
-        // KaTeX rendered as Graphie labels to the KaTeX defaults, taken from:
-        // https://github.com/Khan/KaTeX/blob/965b8a6164ee54212bf382108f256c6920eb7a70/static/katex.less#L18.
-        // It's dangerous to resize labels, since they're deliberately
-        // positioned relative to their background images.
-        .graphie-label .katex,
         .graphie-label mjx-container {
             font-size: 1.21em;
             line-height: 1.2;

packages/perseus/src/styles/widgets/interactive-graph.less

@@ -42,7 +42,6 @@
         border-radius: 5px;
         bottom: 50px;
 
-        .katex,
         mjx-container {
             color: @kaGreen !important;
         }
@@ -57,7 +56,6 @@
         text-align: center;
     }
 
-    .graphie-label .katex,
     .graphie-label mjx-container {
         color: inherit !important;
     }

packages/perseus/src/styles/widgets/label-image.less

@@ -37,7 +37,6 @@
         .perseus-block-math {
             padding: 0;
 
-            .katex,
             mjx-container {
                 font-size: initial !important;
                 line-height: initial !important;

packages/perseus/src/styles/widgets/passage.less

@@ -50,7 +50,6 @@
             }
         }
     }
-    .katex,
     mjx-container {
         line-height: @line-height - 2;
     }

packages/perseus/src/styles/widgets/plotter.less

@@ -23,7 +23,6 @@
         border: solid 0.5px @gray76;
         border-radius: 4px;
 
-        .graphie-label .katex,
         .graphie-label mjx-container {
             color: @gray41;
         }

pnpm-lock.yaml

@@ -36,16 +36,7 @@ export const testDependencies: PerseusDependencies = {
         addComponent: (renderer) => -1,
         removeComponentAtIndex: (index) => {},
     },
-    // The KaTeX used in the 'should replace deprecated alignment tags in inline
-    // math' test uses the `align` environment. This results in `array` nodes in
-    // the parsed KaTeX node tree. When the Tex component tries to build an a11y
-    // string for it, KaTeX throws an error because render-a11y-string.js doesn't
-    // support `array` nodes. It then logs the error it to the server. However,
-    // there is throttling code in the logKaTeXError() function which only reports
-    // the error 1% of the time... so this causes _very_ rare test failures.
-    // Mocking this here so that we don't fail because of this issue.
-    logKaTeXError: (expression: string, error: Error): Promise<any> =>
-        Promise.resolve({}),
+
     TeX: ({children}: {children: React.ReactNode}) => {
         return <span className="mock-TeX">{children}</span>;
     },