@khanacademy/perseus 5.0.0 → 6.1.0

package/src/perseus-types.ts

@@ -3,6 +3,9 @@
 
 import type {Coord} from "./interactive2/types";
 
+export type Range = [number, number];
+export type Size = [number, number];
+
 // TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
 type Empty = Record<string, never>;
 
@@ -218,13 +221,14 @@ export type PerseusWidget =
     | UnitInputWidget
     | VideoWidget;
 
+// A background image applied to various widgets.
 export type PerseusImageBackground = {
     // The URL of the image
     url: string | null | undefined;
     // The width of the image
-    width: number;
+    width?: number;
     // The height of the image
-    height: number;
+    height?: number;
     // The top offset of the image
     // NOTE: perseus_data.go says this is required, but nullable, even though
     // it isn't necessary at all.
@@ -475,10 +479,10 @@ export type PerseusImageWidgetOptions = {
     labels?: ReadonlyArray<PerseusImageLabel>;
     // The range on the image render for labels
     // NOTE: perseus_data.go says this is required even though it isn't necessary.
-    range?: ReadonlyArray<ReadonlyArray<number>>;
+    range?: [Range, Range];
     // The box on the image render for labels. The same as backgroundImage.width and backgroundImage.height
     // NOTE: perseus_data.go says this is required even though it isn't necessary.
-    box?: ReadonlyArray<number>;
+    box?: Size;
 };
 
 export type PerseusImageLabel = {
@@ -1134,17 +1138,17 @@ export type PerseusInteractionGraph = {
     // "canvas", "graph"
     editableSettings?: ReadonlyArray<"canvas" | "graph">;
     // The Grid Canvas size. e.g. [400, 140]
-    box: ReadonlyArray<number>;
+    box: Size;
     // The Axis labels.  e.g. ["x", "y"]
     labels: ReadonlyArray<string>;
     // The Axis ranges. e.g. [[-10, 10], [-10, 10]]
-    range: ReadonlyArray<ReadonlyArray<number>>;
+    range: [Range, Range];
     // The steps in the grid. default [1, 1]
-    gridStep: ReadonlyArray<number>;
+    gridStep: Readonly<[number, number]>;
     // What to show on the graph.  "graph", "grid", or "none"
     markings: string;
     // The snap steps. default [0.5, 0.5]
-    snapStep?: ReadonlyArray<number>;
+    snapStep?: Readonly<[number, number]>;
     // Whether the grid is valid or not.  Do the numbers all make sense?
     // NOTE(jeremy) The editor for this widget sometimes stores the graph
     // editor validation error message into this field. It seems innocuous
@@ -1162,7 +1166,7 @@ export type PerseusInteractionGraph = {
     // How many ticks to show on the ruler.  e.g. 1, 2, 4, 8, 10, 16
     rulerTicks?: number;
     // This controls the number (and position) of the tick marks for the X and Y axis. e.g. [1, 1]
-    tickStep: ReadonlyArray<number>;
+    tickStep: Readonly<[number, number]>;
 };
 
 export type PerseusInteractionElement =

package/src/renderer.tsx

@@ -35,7 +35,6 @@ import type {
     FilterCriterion,
     FocusPath,
     LinterContextProps,
-    PerseusDependencies,
     PerseusScore,
     WidgetInfo,
     WidgetProps,
@@ -223,10 +222,7 @@ class Renderer extends React.Component<Props, State> {
     // The i18n linter.
     _translationLinter: TranslationLinter;
 
-    // @ts-expect-error [FEI-5003] - TS2564 - Property 'lastRenderedMarkdown' has no initializer and is not definitely assigned in the constructor.
-    lastRenderedMarkdown: React.ReactElement<
-        React.ComponentProps<PerseusDependencies["KatexProvider"]>
-    >;
+    lastRenderedMarkdown: React.ReactNode;
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'reuseMarkdown' has no initializer and is not definitely assigned in the constructor.
     reuseMarkdown: boolean;
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'translationIndex' has no initializer and is not definitely assigned in the constructor.
@@ -1848,7 +1844,6 @@ class Renderer extends React.Component<Props, State> {
 
     render(): React.ReactNode {
         const apiOptions = this.getApiOptions();
-        const {KatexProvider} = getDependencies();
 
         if (this.reuseMarkdown) {
             return this.lastRenderedMarkdown;
@@ -1896,17 +1891,13 @@ class Renderer extends React.Component<Props, State> {
                 // calls its before_dom_insert we can lookup this component by
                 // this attribute and render the text with markdown.
                 return (
-                    <KatexProvider>
-                        <DefinitionProvider>
-                            <div
-                                data-perseus-component-index={
-                                    this.translationIndex
-                                }
-                            >
-                                {content}
-                            </div>
-                        </DefinitionProvider>
-                    </KatexProvider>
+                    <DefinitionProvider>
+                        <div
+                            data-perseus-component-index={this.translationIndex}
+                        >
+                            {content}
+                        </div>
+                    </DefinitionProvider>
                 );
             }
         }
@@ -1963,11 +1954,9 @@ class Renderer extends React.Component<Props, State> {
         });
 
         this.lastRenderedMarkdown = (
-            <KatexProvider>
-                <DefinitionProvider>
-                    <div className={className}>{markdownContents}</div>
-                </DefinitionProvider>
-            </KatexProvider>
+            <DefinitionProvider>
+                <div className={className}>{markdownContents}</div>
+            </DefinitionProvider>
         );
         return this.lastRenderedMarkdown;
     }

package/src/types.ts

@@ -1,7 +1,3 @@
-// eslint-disable-next-line import/no-unresolved
-import katex from "katex";
-// eslint-disable-next-line import/no-unresolved
-import katexA11y from "katex/dist/contrib/render-a11y-string";
 import * as React from "react";
 
 import type {SerializedHighlightSet} from "./components/highlighting/types";
@@ -309,20 +305,6 @@ export type PerseusDependencies = {
     graphieMovablesJiptLabels: JiptLabelStore;
     svgImageJiptLabels: JiptLabelStore;
     rendererTranslationComponents: JiptTranslationComponents;
-    // KaTeX related dependencies
-    getKaTeX: () => Promise<katex>;
-    getRenderA11yString: () => Promise<katexA11y>;
-    loadMathjax: () => Promise<unknown>;
-    logKaTeXError: (
-        expression: string,
-        error: Error,
-    ) => Promise<Response | null | undefined>;
-    KatexProvider: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
-    // TODO(kevinb): Update `getKaTeX` to return the version of `katex` that
-    // webapp (or mobile) wants perseus to use.
-    shouldUseFutureKaTeX: (flag: boolean) => void;
     TeX: React.ComponentType<TeXProps>;
     //misc
     staticUrl: StaticUrlFn;

package/src/util/interactive.ts

@@ -36,6 +36,8 @@ import KhanMath from "./math";
 
 import type {Coord} from "../interactive2/types";
 
+export type MouseHandler = (position: Coord) => void;
+
 const {getCanUse3dTransform} = InteractiveUtil;
 
 function sum(array: any) {
@@ -109,7 +111,15 @@ _.extend(GraphUtils.Graphie.prototype, {
     // in the way of mouse events. This adds another SVG element on top
     // of everything else where we can add invisible shapes with mouse
     // handlers wherever we want.
-    addMouseLayer: function (options) {
+    addMouseLayer: function (options: {
+        onClick?: MouseHandler;
+        onMouseMove?: MouseHandler;
+        onMouseDown?: MouseHandler;
+        onMouseOver?: MouseHandler;
+        onMouseOut?: MouseHandler;
+        allowScratchpad?: boolean;
+        setDrawingAreaAvailable?: (available: boolean) => void;
+    }) {
         const graph = this;
         options = _.extend(
             {
@@ -149,10 +159,11 @@ _.extend(GraphUtils.Graphie.prototype, {
                     isClickingCanvas = true;
 
                     if (options.onMouseMove) {
+                        const handler = options.onMouseMove;
                         $(document).bind("vmousemove.mouseLayer", function (e) {
                             if (isClickingCanvas) {
                                 e.preventDefault();
-                                options.onMouseMove(graph.getMouseCoord(e));
+                                handler(graph.getMouseCoord(e));
                             }
                         });
                     }
@@ -170,18 +181,20 @@ _.extend(GraphUtils.Graphie.prototype, {
                 }
             });
             if (options.onMouseOver) {
+                const handler = options.onMouseOver;
                 $(graph.mouselayer.canvas).on("vmouseover", function (e) {
-                    options.onMouseOver(graph.getMouseCoord(e));
+                    handler(graph.getMouseCoord(e));
                 });
             }
             if (options.onMouseOut) {
+                const handler = options.onMouseOut;
                 $(graph.mouselayer.canvas).on("vmouseout", function (e) {
-                    options.onMouseOut(graph.getMouseCoord(e));
+                    handler(graph.getMouseCoord(e));
                 });
             }
         }
         if (!options.allowScratchpad) {
-            options.setDrawingAreaAvailable(false);
+            options.setDrawingAreaAvailable?.(false);
         }
 
         // Add mouse and visible wrapper layers for DOM-node-wrapped movables

package/src/util/tex.ts

@@ -1,8 +1,10 @@
 import $ from "jquery";
+import * as React from "react";
 
 import {getDependencies} from "../dependencies";
 
 import KhanMath from "./math";
+import reactRender from "./react-render";
 
 declare const MathJax: any;
 
@@ -94,84 +96,18 @@ export default {
             // Store the formula that we're using
             $elem.attr("data-math-formula", text);
 
-            const katex = await getDependencies().getKaTeX();
-            // Try to process the nodes with KaTeX first
-            try {
-                // Don't use the `trust: true` setting with KaTeX.  There is a
-                // security issue with it as outlined in https://hackerone.com/reports/844216.
-                // See https://khanacademy.atlassian.net/browse/FEI-2225 for
-                // additional context.
-                katex.render(text, $katexHolder[0], {colorIsTextColor: true});
-                // If that worked, and we previously formatted with
-                // mathjax, do some mathjax cleanup
-                if ($elem.attr("data-math-type") === "mathjax") {
-                    // Remove the old mathjax stuff
-                    if (typeof MathJax !== "undefined") {
-                        const jax = MathJax.Hub.getJaxFor(script);
-                        if (jax) {
-                            const e = jax.SourceElement();
-                            if (
-                                e.previousSibling &&
-                                e.previousSibling.className
-                            ) {
-                                jax.Remove();
-                            }
-                        }
+            const {TeX} = await getDependencies();
+            // We use createElement instead of JSX here because we can't name this file tex.tsx;
+            // that name is already taken.
+            reactRender(
+                React.createElement(TeX, {children: text}),
+                $katexHolder[0],
+                () => {
+                    if (callback) {
+                        doCallback(elem, callback);
                     }
-                }
-                $elem.attr("data-math-type", "katex");
-                // Call the callback
-                if (callback) {
-                    doCallback(elem, callback);
-                }
-                return;
-            } catch (err: any) {
-                getDependencies().logKaTeXError(text, err);
-
-                if (err instanceof katex.ParseError) {
-                    throw err;
-                }
-            }
-
-            // Otherwise, fallback to MathJax
-
-            // (Note: we don't need to do any katex cleanup here, because
-            // KaTeX is smart and cleans itself up)
-            $elem.attr("data-math-type", "mathjax");
-            // Update the script tag, or add one if necessary
-            if (!script) {
-                $mathjaxHolder.append(
-                    "<script type='math/tex'>" +
-                        text.replace(/<\//g, "< /") +
-                        "</script>",
-                );
-            } else {
-                if ("text" in script) {
-                    // IE8, etc
-                    script.text = text;
-                } else {
-                    script.textContent = text;
-                }
-            }
-            if (typeof MathJax !== "undefined") {
-                // Put the process, a debug log, and the callback into the
-                // MathJax queue
-                MathJax.Hub.Queue([
-                    "Reprocess",
-                    MathJax.Hub,
-                    $mathjaxHolder[0],
-                ]);
-                if (callback) {
-                    MathJax.Hub.Queue(function () {
-                        const cb = MathJax.Callback(function () {});
-                        doCallback(elem, function () {
-                            callback();
-                            cb();
-                        });
-                        return cb;
-                    });
-                }
-            }
+                },
+            );
         }
     },
 

package/src/util.ts

@@ -5,6 +5,7 @@ import {Errors} from "./logging/log";
 import {PerseusError} from "./perseus-error";
 import KhanAnswerTypes from "./util/answer-types";
 
+import type {Range} from "./perseus-types";
 import type {Widget, PerseusScore, KEScore} from "./types";
 
 type WordPosition = {
@@ -37,7 +38,7 @@ type QueryParams = {
     [param: string]: string;
 };
 
-type Position = {
+export type Position = {
     top: number;
     left: number;
 };
@@ -495,8 +496,6 @@ function tickStepFromNumTicks(span: number, numTicks: number): number {
     return step;
 }
 
-type Range = [number, number]; // [min, max]
-
 const constrainTickStep = (step: number, range: Range): number => {
     const span = range[1] - range[0];
     const numTicks = span / step;
@@ -519,7 +518,7 @@ const constrainTickStep = (step: number, range: Range): number => {
  * Specifically, we aim for 10 or fewer ticks per graph axis.
  */
 function constrainedTickStepsFromTickSteps(
-    tickSteps: Coordinates,
+    tickSteps: [number, number],
     ranges: [Range, Range],
 ): Coordinates {
     return [

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -1,4 +1,4 @@
-import {Keypad} from "@khanacademy/math-input";
+import {LegacyKeypad} from "@khanacademy/math-input";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -10,7 +10,7 @@ const Footer = (): React.ReactElement => {
         <View style={styles.keypadContainer}>
             <KeypadContext.Consumer>
                 {({keypadElement, setKeypadElement, renderer}) => (
-                    <Keypad
+                    <LegacyKeypad
                         onElementMounted={setKeypadElement}
                         onDismiss={() => renderer && renderer.blur()}
                         style={styles.keypad}