Remove 'katex' package as a dependency from @khanacademy/perseus

packages/perseus/package.json

@@ -75,7 +75,6 @@
         "create-react-class": "15.6.3",
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
-        "katex": "0.11.1",
         "lodash.debounce": "^4.0.8",
         "perseus-build-settings": "^0.4.1",
         "prop-types": "15.6.1",

packages/perseus/src/components/__stories__/graph.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import Graph from "../graph";
-// TODO(scottgrant): Katex is unavailable here. Fix!
 
 type StoryArgs = Record<any, any>;
 

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

@@ -23,15 +23,15 @@ const ForceZoomWrapper = ({children}: Props): React.ReactElement => (
     </>
 );
 
-export const KaTeX = (args: StoryArgs): React.ReactElement => {
+export const Tex = (args: StoryArgs): React.ReactElement => {
     return (
         <ForceZoomWrapper>
             <ZoomableTex children="\sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6}" />
         </ForceZoomWrapper>
     );
 };
 
-export const ComplexKaTeX = (args: StoryArgs): React.ReactElement => {
+export const ComplexTex = (args: StoryArgs): React.ReactElement => {
     return (
         <ForceZoomWrapper>
             {" "}

packages/perseus/src/index.ts

@@ -84,7 +84,7 @@ export {
  */
 export {default as Util} from "./util";
 export {default as KhanColors} from "./util/colors";
-export {default as preprocessTex} from "./util/katex-preprocess";
+export {default as preprocessTex} from "./util/tex-preprocess";
 export {registerAllWidgetsForTesting} from "./util/register-all-widgets-for-testing";
 export * as SizingUtils from "./util/sizing-utils";
 export {

packages/perseus/src/interactive2/movable-point.tsx

@@ -519,9 +519,9 @@ export class MovablePoint {
      * Displays a tooltip above the point, replacing any previous contents. If
      * there is no tooltip initialized, adds the tooltip.
      *
-     * If the type of contents is string, the contents will be rendered with
-     * KaTeX. Otherwise, the content will be assumed to be a DOM node and will
-     * be appended inside the tooltip.
+     * If the type of contents is string, the contents will be rendered as TeX
+     * Otherwise, the content will be assumed to be a DOM node and will be
+     * appended inside the tooltip.
      */
     _showTooltip(contents) {
         if (!this._tooltip) {

packages/perseus/src/perseus-types.ts

@@ -441,7 +441,7 @@ export const PerseusExpressionAnswerFormConsidered = [
 ] as const;
 
 export type PerseusExpressionAnswerForm = {
-    // The Katex form of the expression.  e.g. "x\\cdot3=y"
+    // The TeX form of the expression.  e.g. "x\\cdot3=y"
     value: string;
     // The Answer expression must have the same form
     form: boolean;
@@ -874,7 +874,7 @@ export type PerseusGraphTypeRay = {
 } & PerseusGraphTypeCommon;
 
 export type PerseusLabelImageWidgetOptions = {
-    // Translatable Text; Katex representation of choices
+    // Translatable Text; Tex representation of choices
     choices: ReadonlyArray<string>;
     // The URL of the image
     imageUrl: string;

packages/perseus/src/renderer.tsx

@@ -26,7 +26,7 @@ import PerseusMarkdown from "./perseus-markdown";
 import QuestionParagraph from "./question-paragraph";
 import TranslationLinter from "./translation-linter";
 import Util from "./util";
-import preprocessTex from "./util/katex-preprocess";
+import preprocessTex from "./util/tex-preprocess";
 import WidgetContainer from "./widget-container";
 import * as Widgets from "./widgets";
 
@@ -1289,12 +1289,6 @@ class Renderer extends React.Component<Props, State> {
             );
         }
         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.
-            const tex = node.content.replace(/\{align[*]?\}/g, "{aligned}");
-
             // We render math here instead of in perseus-markdown.jsx
             // because we need to pass it our onRender callback.
             return (
@@ -1316,7 +1310,7 @@ class Renderer extends React.Component<Props, State> {
                                     onRender={this.props.onRender}
                                     setAssetStatus={setAssetStatus}
                                 >
-                                    {tex}
+                                    {node.content}
                                 </TeX>
                             )}
                         </AssetContext.Consumer>

packages/perseus/src/util/tex-preprocess.ts

@@ -0,0 +1,8 @@
+/**
+ * Preprocess TeX code to convert things that MathJax doesn't know how to handle
+ * to things is does.
+ */
+export default (texCode: string): string =>
+    texCode
+        // Replace non-breaking spaces with regular spaces.
+        .replace(/[\u00a0]/g, " ");

packages/perseus/src/util/tex.ts

@@ -15,8 +15,8 @@ function findChildOrAdd(elem: any, className: string) {
 }
 
 export default {
-    // Process a node and add math inside of it. This attempts to use KaTeX to
-    // format the math, and if that fails it falls back to MathJax.
+    // Process a node and add math inside of it. This uses MathJax
+    // format the math.
     //
     // elem: The element which the math should be added to.
     //

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

@@ -14,7 +14,7 @@ import {usePerseusI18n} from "../../components/i18n-context";
 import Renderer from "../../renderer";
 
 export type AnswerType = {
-    // The answer string, can be plain text or a KaTeX expression.
+    // The answer string, can be plain text or a TeX expression.
     content: string;
     // Whether the answer is selected.
     checked: boolean;