@khanacademy/perseus 17.7.0 → 18.0.0

package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap

@@ -306,10 +306,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 29.999999999999993px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -318,10 +315,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 58.49999999999999px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -330,10 +324,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 86.99999999999999px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -342,10 +333,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 115.49999999999999px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -354,10 +342,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 144px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -366,10 +351,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 172.5px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -378,10 +360,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 201px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -390,10 +369,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 229.5px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -402,10 +378,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: black; left: 258px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -414,10 +387,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: rgb(17, 172, 205); left: 29.999999999999993px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -426,10 +396,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                   style="position: absolute; padding: 7px; color: rgb(17, 172, 205); left: 258px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
               </div>
@@ -743,10 +710,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 29.999999999999982px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -755,10 +719,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 79.99999999999999px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -767,10 +728,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 129.99999999999997px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -779,10 +737,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 179.99999999999997px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -791,10 +746,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 229.99999999999997px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -803,10 +755,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 280px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -815,10 +764,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 330px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -827,10 +773,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 380px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -839,10 +782,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 430px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -851,10 +791,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 29.999999999999982px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
                 <span
@@ -863,10 +800,7 @@ exports[`number-line widget should snapshot: first render 1`] = `
                   style="position: absolute; padding: 7px; color: black; left: 430px; top: 61.2px; fill: none;"
                 >
                   <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
+                    class="tex-holder"
                   />
                 </span>
               </div>

package/src/widgets/__tests__/__snapshots__/plotter.test.tsx.snap

@@ -704,10 +704,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 75px; top: 325px; fill: none;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -716,10 +713,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 75px; top: 275px; fill: none;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -728,10 +722,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 75px; top: 225px; fill: none;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -740,10 +731,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 75px; top: 175px; fill: none;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -752,10 +740,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 75px; top: 125px; fill: none;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -764,10 +749,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 75px; top: 75px; fill: none;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -776,10 +758,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 75px; top: 25px; fill: none;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -788,10 +767,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 121.60377358490565px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -800,10 +776,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 193.30188679245282px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -812,10 +785,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 265px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -824,10 +794,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 336.6981132075471px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span
@@ -836,10 +803,7 @@ exports[`plotter widget should snapshot basic question: initial render 1`] = `
               style="position: absolute; padding: 7px; color: black; left: 408.3962264150943px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
             >
               <span
-                class="katex-holder"
-              />
-              <span
-                class="mathjax-holder"
+                class="tex-holder"
               />
             </span>
             <span

package/src/widgets/deprecated-standin/__stories__/deprecated-standin.stories.tsx

@@ -8,21 +8,17 @@ export default {
 
 const question1 = {
     content:
-        "Read the excerpt and answer the question below. \n\nThe Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with [[\u2603 definition 1]], upon these conditions.",
-    images: {},
+        "$\\overleftrightarrow{MN}$ is the perpendicular bisector of segment $\\overline{JL}$.  \n\n**Perform a reflection that proves $M$ must be equidistant from $J$ and $L$ and select the option which explains the proof.**  \nThe statement must be true for any point $M$ which lies on the perpendicular bisector.  \n\n[[☃ standin 1]]  \n\n",
+    images: {
+        "https://ka-perseus-images.s3.amazonaws.com/6cf0d9f007084e9d06e3ce0e241416dde920ec9c.png":
+            {height: 503, width: 504},
+    },
     widgets: {
-        "definition 1": {
+        "standin 1": {
             graded: true,
-            version: {
-                major: 0,
-                minor: 0,
-            },
-            static: false,
+            options: {},
             type: "deprecated-standin",
-            options: {
-                static: false,
-            },
-            alignment: "default",
+            version: {major: 0, minor: 0},
         },
     },
 } as const;

package/src/widgets/deprecated-standin/__tests__/__snapshots__/deprecated-standin.test.ts.snap

@@ -30,19 +30,18 @@ exports[`Deprecated Standin widget should have a default snapshot: first render
             style="padding-top: 8px; padding-bottom: 8px;"
           >
             <div
-              aria-live="polite"
-              class="default_xu2jcg-o_O-containerOuter_xu9ezy-o_O-inlineStyles_1ozd0sx"
-              role="alert"
+              class="default_xu2jcg-o_O-containerOuter_xu9ezy-o_O-inlineStyles_1ipey8s"
+              role="status"
             >
               <div
-                class="default_xu2jcg-o_O-backgroundColor_10s9e9d-o_O-inlineStyles_tkl0uy"
+                class="default_xu2jcg-o_O-backgroundColor_10s9e9d-o_O-inlineStyles_14jsc6v"
               />
               <div
                 class="default_xu2jcg-o_O-containerInner_mm2xcu"
               >
                 <span
-                  aria-label="warning"
-                  class="svg_1q6jc65-o_O-icon_1521uiv-o_O-icon_16tp01m-o_O-inlineStyles_g0hdza"
+                  aria-label="info"
+                  class="svg_1q6jc65-o_O-icon_1521uiv-o_O-icon_16tp01m-o_O-inlineStyles_94g682"
                   data-test-id="banner-kind-icon"
                   role="img"
                 />
@@ -55,7 +54,7 @@ exports[`Deprecated Standin widget should have a default snapshot: first render
                     <span
                       class="text_f1191h-o_O-LabelSmall_hl4zs1"
                     >
-                      This part of the question is no-longer available. You will not be graded on this part.
+                      Sorry, this part of the question is no longer available. 😅 Don't worry, you won't be graded on this part. Keep going!
                     </span>
                   </div>
                 </div>

package/src/widgets/deprecated-standin/index.tsx

@@ -6,11 +6,11 @@ import type {PerseusScore, WidgetExports} from "../../types";
 
 // The props are type `any` on purpose so that this can receive props
 // from any deprecated widget
-type AutoCorrectProps = any;
+type Props = any;
 type Rubric = any;
 type UserInput = Empty;
 
-class AutoCorrect extends React.Component<AutoCorrectProps> {
+class DeprecatedStandin extends React.Component<Props> {
     static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
         // Since this mean to replace an existing widget the learner
         // WILL earn points for this widget
@@ -27,7 +27,7 @@ class AutoCorrect extends React.Component<AutoCorrectProps> {
     };
 
     simpleValidate: (arg1: Rubric) => PerseusScore = (rubric) => {
-        return AutoCorrect.validate(this.getUserInput(), rubric);
+        return DeprecatedStandin.validate(this.getUserInput(), rubric);
     };
 
     render() {
@@ -40,9 +40,9 @@ class AutoCorrect extends React.Component<AutoCorrectProps> {
             >
                 <Banner
                     text={i18n._(
-                        "This part of the question is no-longer available. You will not be graded on this part.",
+                        "Sorry, this part of the question is no longer available. 😅 Don't worry, you won't be graded on this part. Keep going!",
                     )}
-                    kind="warning"
+                    kind="info"
                     layout="full-width"
                 />
             </div>
@@ -53,5 +53,6 @@ class AutoCorrect extends React.Component<AutoCorrectProps> {
 export default {
     name: "deprecated-standin",
     displayName: "Deprecated Standin",
-    widget: AutoCorrect,
-} as WidgetExports<typeof AutoCorrect>;
+    widget: DeprecatedStandin,
+    hidden: true,
+} as WidgetExports<typeof DeprecatedStandin>;

package/src/widgets/interactive-graph.tsx

@@ -29,6 +29,7 @@ import {
     similar,
 } from "../util/geometry";
 import GraphUtils from "../util/graph-utils";
+import {polar} from "../util/graphie";
 import {getInteractiveBoxFromSizeClass} from "../util/sizing-utils";
 
 import type {Coord} from "../interactive2/types";
@@ -1216,7 +1217,7 @@ class InteractiveGraph extends React.Component<Props, State> {
                     coords[rel(-1)],
                 );
 
-                const offset = this.graphie?.polar(
+                const offset = polar(
                     side,
                     outerAngle + (onLeft ? 1 : -1) * innerAngles[0],
                 );
@@ -1263,7 +1264,7 @@ class InteractiveGraph extends React.Component<Props, State> {
                 const onLeft =
                     sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
 
-                const offset = this.graphie?.polar(
+                const offset = polar(
                     sides[0],
                     outerAngle + (onLeft ? 1 : -1) * innerAngle,
                 );

package/src/widgets/passage.tsx

@@ -15,13 +15,11 @@ import PassageMarkdown from "./passage/passage-markdown";
 import type {ParseState} from "./passage/passage-markdown";
 import type {SerializedHighlightSet} from "../components/highlighting/types";
 import type {ChangeableProps} from "../mixins/changeable";
-import type {PerseusPassageWidgetOptions} from "../perseus-types";
 import type {
-    PerseusScore,
-    WidgetExports,
-    WidgetInfo,
-    WidgetProps,
-} from "../types";
+    PerseusPassageWidgetOptions,
+    PerseusWidget,
+} from "../perseus-types";
+import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
 import type {SingleASTNode} from "@khanacademy/simple-markdown";
 
 // A fake paragraph to measure the line height of the passage,
@@ -71,7 +69,7 @@ type RenderProps = {
     showLineNumbers: PerseusPassageWidgetOptions["showLineNumbers"];
 };
 
-type FindWidgetsCallback = (id: string, widgetInfo: WidgetInfo) => boolean;
+type FindWidgetsCallback = (id: string, widgetInfo: PerseusWidget) => boolean;
 
 type PassageProps = ChangeableProps &
     WidgetProps<RenderProps, Rubric> & {

package/src/widgets.ts

@@ -3,12 +3,12 @@ import _ from "underscore";
 import {Errors, Log} from "./logging/log";
 import {PerseusError} from "./perseus-error";
 
+import type {PerseusWidget} from "./perseus-types";
 import type {
     Alignment,
     Tracking,
     Version,
     WidgetExports,
-    WidgetInfo,
     WidgetTransform,
 } from "./types";
 import type * as React from "react";
@@ -79,6 +79,30 @@ export const registerEditors = (editorsToRegister: ReadonlyArray<Editor>) => {
     });
 };
 
+/**
+ *
+ * @param name - the widget that you are trying to replace
+ * @param replacementName - the name of the widget that takes its place
+ *
+ * e.g. replaceEditor("transformer", "always-correct") will make it so the
+ * transformer widget is replaced by the always correct widget
+ */
+export const replaceEditor = (name: string, replacementName: string) => {
+    const substituteEditor = editors[replacementName];
+
+    if (!substituteEditor && Log) {
+        const errorMsg = `Failed to replace editor ${name} with ${replacementName}`;
+        Log.error(errorMsg, Errors.Internal);
+        return;
+    }
+
+    editors[name] = substituteEditor;
+
+    if (Log) {
+        Log.log(`INFO: Replacing editor ${name} with ${replacementName}`);
+    }
+};
+
 export const getWidget = (
     name: string,
 ): React.ComponentType<any> | null | undefined => {
@@ -106,12 +130,12 @@ export const getTransform = (
     return _.has(widgets, name) ? widgets[name].transform || _.identity : null;
 };
 
-export const getVersion = (name: string): Version | null | undefined => {
+export const getVersion = (name: string): Version | undefined => {
     const widgetInfo = widgets[name];
     if (widgetInfo) {
         return widgets[name].version || {major: 0, minor: 0};
     }
-    return null;
+    return;
 };
 
 export const getVersionVector = (): {
@@ -136,7 +160,7 @@ export const getPublicWidgets = (): ReadonlyArray<WidgetExports> => {
     );
 };
 
-export const isAccessible = (widgetInfo: WidgetInfo): boolean => {
+export const isAccessible = (widgetInfo: PerseusWidget): boolean => {
     const accessible = widgets[widgetInfo.type].accessible;
     if (typeof accessible === "function") {
         return accessible(widgetInfo.options);
@@ -149,8 +173,8 @@ export const getAllWidgetTypes = (): ReadonlyArray<string> => {
 };
 
 export const upgradeWidgetInfoToLatestVersion = (
-    oldWidgetInfo: WidgetInfo,
-): WidgetInfo => {
+    oldWidgetInfo: PerseusWidget,
+): PerseusWidget => {
     const type = oldWidgetInfo.type;
     // TODO(LP-10707): Remove unnecessary type checking (`type` is a string)
     if (!_.isString(type)) {
@@ -271,9 +295,9 @@ export const upgradeWidgetInfoToLatestVersion = (
 };
 
 export const getRendererPropsForWidgetInfo = (
-    widgetInfo: WidgetInfo,
+    widgetInfo: PerseusWidget,
     problemNum?: number,
-): any => {
+): PerseusWidget => {
     const type = widgetInfo.type;
     const widgetExports = widgets[type];
     if (widgetExports == null) {
@@ -298,9 +322,9 @@ export const getRendererPropsForWidgetInfo = (
 };
 
 export const traverseChildWidgets = (
-    widgetInfo: WidgetInfo,
+    widgetInfo: PerseusWidget,
     traverseRenderer: any,
-): WidgetInfo => {
+): PerseusWidget => {
     if (!traverseRenderer) {
         throw new PerseusError(
             "traverseRenderer must be provided, but was not",