@khanacademy/perseus 17.7.0 → 18.0.0

package/src/util/interactive.ts

@@ -31,7 +31,7 @@ import {Errors} from "../logging/log";
 import {PerseusError} from "../perseus-error";
 
 import KhanColors from "./colors";
-import GraphUtils from "./graphie";
+import GraphUtils, {polar} from "./graphie";
 import KhanMath from "./math";
 
 import type {Coord} from "../interactive2/types";
@@ -4024,7 +4024,7 @@ _.extend(MovableAngle.prototype, {
                         Math.round((angle - snapOffset) / snap) * snap +
                         snapOffset;
                     const distance = GraphUtils.getDistance(newPoint, vertex);
-                    return addPoints(vertex, graphie.polar(distance, angle));
+                    return addPoints(vertex, polar(distance, angle));
                 }
                 return true;
             };

package/src/util/interval.ts

@@ -0,0 +1,4 @@
+// type Interval represents a closed interval.
+// (see: https://en.wikipedia.org/wiki/Interval_(mathematics))
+
+export type Interval = [number, number];

package/src/util/parse-perseus-json.test.ts

@@ -0,0 +1,10 @@
+import parsePerseusJSON from "./parse-perseus-json";
+
+describe("parsePerseusJSON", () => {
+    it("should parse JSON", () => {
+        const result = parsePerseusJSON(
+            `{ "question": { "content": "idk why I'm testing this" }}`,
+        );
+        expect(result.question.content).toBe("idk why I'm testing this");
+    });
+});

package/src/util/parse-perseus-json.ts

@@ -0,0 +1,13 @@
+import type {PerseusItem} from "../perseus-types";
+
+/**
+ * Helper to parse Perseus JSON
+ * Why not just use JSON.parse? We want:
+ * - To make sure types are correct
+ * - To give us a central place to validate/transform output if needed
+ * @param {string} input - the stringified Perseus JSON
+ * @returns {PerseusItem} the parsed PerseusItem object
+ */
+export default function parsePerseusJSON(input: string): PerseusItem {
+    return JSON.parse(input);
+}

package/src/util/tex.ts

@@ -6,8 +6,6 @@ import {getDependencies} from "../dependencies";
 import KhanMath from "./math";
 import reactRender from "./react-render";
 
-declare const MathJax: any;
-
 function findChildOrAdd(elem: any, className: string) {
     const $child = $(elem).find("." + className);
     if ($child.length === 0) {
@@ -16,27 +14,6 @@ function findChildOrAdd(elem: any, className: string) {
     return $child;
 }
 
-function doCallback(
-    elem: HTMLElement,
-    callback: (() => unknown) | (() => void),
-) {
-    let tries = 0;
-    (function check() {
-        const height = elem.scrollHeight;
-        // Heuristic to guess if the font has kicked in
-        // so we have box metrics (magic number ick,
-        // but this seems to work mostly-consistently)
-        if (height > 18 || tries >= 10) {
-            callback();
-        } else {
-            tries++;
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-            // eslint-disable-next-line no-restricted-syntax
-            setTimeout(check, 100);
-        }
-    })();
-}
-
 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.
@@ -55,7 +32,7 @@ export default {
     //           processed
     processMath: async function (
         elem: HTMLElement,
-        text: string,
+        text: string | number,
         force?: boolean,
         callback?: () => unknown,
     ) {
@@ -63,29 +40,14 @@ export default {
 
         // Only process if it hasn't been done before, or it is forced
         if ($elem.attr("data-math-formula") == null || force) {
-            const $katexHolder = findChildOrAdd($elem, "katex-holder");
-            const $mathjaxHolder = findChildOrAdd($elem, "mathjax-holder");
-
-            // Search for MathJax-y script tags inside of the node. These are
-            // used by MathJax to denote the formula to be typeset. Before, we
-            // would update the formula by updating the contents of the script
-            // tag, which shouldn't happen any more, but we manage them just in
-            // case.
-            const script: HTMLElement | undefined = $mathjaxHolder.find(
-                "script[type='math/tex']",
-            )[0];
-
-            // If text wasn't provided, we look in two places
-            if (text == null) {
-                if ($elem.attr("data-math-formula")) {
-                    // The old typeset formula
-                    // @ts-expect-error - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
-                    text = $elem.attr("data-math-formula");
-                } else if (script) {
-                    // The contents of the <script> tag
-                    // @ts-expect-error - TS2339 - Property 'text' does not exist on type 'HTMLElement'.
-                    text = script.text || script.textContent;
-                }
+            const $texHolder = findChildOrAdd($elem, "tex-holder");
+
+            // If text wasn't provided, we use the cached text.
+            // TODO(benchristel): I'm not sure if text can ever be null. It's
+            // possible we don't need this check.
+            if (text == null && $elem.attr("data-math-formula")) {
+                // @ts-expect-error - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
+                text = $elem.attr("data-math-formula");
             }
 
             text = text != null ? text + "" : "";
@@ -102,45 +64,10 @@ export default {
             reactRender(
                 React.createElement(TeX, {
                     children: text,
-                    onRender: () => {
-                        if (callback) {
-                            doCallback(elem, callback);
-                        }
-                    },
+                    onRender: callback,
                 }),
-                $katexHolder[0],
+                $texHolder[0],
             );
         }
     },
-
-    // Function to restore a node to a non-math-processed state
-    cleanupMath: function (elem: HTMLElement): HTMLElement {
-        const $elem = $(elem);
-
-        // Only mess with it if it's been processed before
-        if ($elem.attr("data-math-formula")) {
-            // Remove MathJax remnants
-            if (typeof MathJax !== "undefined") {
-                const jax = MathJax.Hub.getJaxFor($elem.find("script")[0]);
-                if (jax) {
-                    const e = jax.SourceElement();
-                    if (e.previousSibling && e.previousSibling.className) {
-                        jax.Remove();
-                    }
-                }
-            }
-
-            // @ts-expect-error - TS2769 - No overload matches this call.
-            $elem.text($elem.attr("data-math-formula"));
-            $elem.attr("data-math-formula", null);
-            $elem.attr("data-math-type", null);
-        }
-
-        return elem;
-    },
-
-    // Function to retrieve the formula of a typeset math node
-    retrieveMathFormula: function (elem: HTMLElement): any {
-        return $(elem).attr("data-math-formula");
-    },
 };

package/src/widgets/__stories__/image.stories.tsx

@@ -28,18 +28,11 @@ export const Question1 = (args: StoryArgs): React.ReactElement => {
             ...question.widgets,
             "image 1": {
                 ...question.widgets["image 1"],
-                options:
-                    // `options` is nullable so we have handle it explicitly
-                    // to avoid spreading `null` and generating
-                    // hard-to-understand type errors about missing keys
-                    // in object literal.
-                    imageOptions != null
-                        ? {
-                              ...imageOptions,
-                              title: args.title,
-                              caption: args.caption,
-                          }
-                        : null,
+                options: {
+                    ...imageOptions,
+                    title: args.title,
+                    caption: args.caption,
+                },
             },
         },
     } as const;
@@ -64,20 +57,13 @@ export const Question2 = (args: StoryArgs): React.ReactElement => {
             ...question.widgets,
             "image 1": {
                 ...question.widgets["image 1"],
-                options:
-                    // `options` is nullable so we have handle it explicitly
-                    // to avoid spreading `null` and generating
-                    // hard-to-understand type errors about missing keys
-                    // in object literal.
-                    imageOptions != null
-                        ? {
-                              ...imageOptions,
-                              alignment: "full-width",
-                              title: args.title,
-                              caption:
-                                  "There is neither happiness nor unhappiness in this world; there is only the comparison of one state with another. Only a man who has felt ultimate despair is capable of feeling ultimate bliss. It is necessary to have wished for death in order to know how good it is to live.....the sum of all human wisdom will be contained in these two words: Wait and Hope",
-                          }
-                        : null,
+                options: {
+                    ...imageOptions,
+                    alignment: "full-width",
+                    title: args.title,
+                    caption:
+                        "There is neither happiness nor unhappiness in this world; there is only the comparison of one state with another. Only a man who has felt ultimate despair is capable of feeling ultimate bliss. It is necessary to have wished for death in order to know how good it is to live.....the sum of all human wisdom will be contained in these two words: Wait and Hope",
+                },
             },
         },
     } as const;