@khanacademy/perseus 6.1.0 → 6.2.1

package/dist/perseus-types.d.ts

@@ -1,7 +1,7 @@
 import type { Coord } from "./interactive2/types";
 export type Range = [number, number];
 export type Size = [number, number];
-type Empty = Record<string, never>;
+type Empty = Record<never, never>;
 export type PerseusItem = {
     question: PerseusRenderer;
     hints: ReadonlyArray<PerseusRenderer>;

package/dist/perseus-types.js.flow

@@ -7,7 +7,7 @@
 import type { Coord } from "./interactive2/types";
 export type Range = [number, number];
 export type Size = [number, number];
-declare type Empty = { [key: string]: empty };
+declare type Empty = { [key: empty]: empty };
 export type PerseusItem = {|
   question: PerseusRenderer,
   hints: $ReadOnlyArray<PerseusRenderer>,

package/dist/widgets/definition.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { PerseusRenderer, PerseusDefinitionWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
-type Empty = Record<string, never>;
+type Empty = Record<never, never>;
 type RenderProps = PerseusDefinitionWidgetOptions;
 type Rubric = PerseusDefinitionWidgetOptions;
 type UserInput = Empty;

package/dist/widgets/definition.js.flow

@@ -11,7 +11,7 @@ import type {
   PerseusDefinitionWidgetOptions,
 } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
-declare type Empty = { [key: string]: empty };
+declare type Empty = { [key: empty]: empty };
 declare type RenderProps = PerseusDefinitionWidgetOptions;
 declare type Rubric = PerseusDefinitionWidgetOptions;
 declare type UserInput = Empty;

package/dist/widgets/explanation.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { PerseusExplanationWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
-type Empty = Record<string, never>;
+type Empty = Record<never, never>;
 type RenderProps = PerseusExplanationWidgetOptions;
 type Rubric = PerseusExplanationWidgetOptions;
 type UserInput = Empty;

package/dist/widgets/explanation.js.flow

@@ -8,7 +8,7 @@ import * as $Flowgen$Import$_2e__2e__2f_types from "../types";
 import * as React from "react";
 import type { PerseusExplanationWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
-declare type Empty = { [key: string]: empty };
+declare type Empty = { [key: empty]: empty };
 declare type RenderProps = PerseusExplanationWidgetOptions;
 declare type Rubric = PerseusExplanationWidgetOptions;
 declare type UserInput = Empty;

package/dist/widgets/expression.d.ts

@@ -1,3 +1,4 @@
+import { Keys as Key } from "@khanacademy/math-input";
 import * as React from "react";
 import type { PerseusExpressionWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
@@ -51,7 +52,7 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     focus: () => boolean;
     focusInputPath: (inputPath: InputPath) => void;
     blurInputPath: (inputPath: InputPath) => void;
-    insert: (text: string) => void;
+    insert(keyPressed: Key): void;
     getInputPaths: () => ReadonlyArray<ReadonlyArray<any>>;
     getGrammarTypeForPath: (inputPath: string) => string;
     setInputValue: (path: string, newValue: string, cb: () => void) => void;

package/dist/widgets/expression.js.flow

@@ -5,6 +5,7 @@
  * @flow
  */
 import * as $Flowgen$Import$_2e__2e__2f_types from "../types";
+import { Keys as Key } from "@khanacademy/math-input";
 import * as React from "react";
 import type { PerseusExpressionWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
@@ -74,7 +75,7 @@ declare export class Expression
   focus: () => boolean;
   focusInputPath: (inputPath: InputPath) => void;
   blurInputPath: (inputPath: InputPath) => void;
-  insert: (text: string) => void;
+  insert(keyPressed: Key): void;
   getInputPaths: () => $ReadOnlyArray<$ReadOnlyArray<any>>;
   getGrammarTypeForPath: (inputPath: string) => string;
   setInputValue: (path: string, newValue: string, cb: () => void) => void;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.1.0",
+    "version": "6.2.1",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^3.0.0",
+        "@khanacademy/math-input": "^4.1.0",
         "@khanacademy/perseus-linter": "^0.3.1",
         "@khanacademy/pure-markdown": "^0.2.3",
         "@khanacademy/simple-markdown": "^0.9.3",

package/src/__tests__/item-renderer.test.tsx

@@ -2,7 +2,7 @@ import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {fireEvent, render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";
-import "@testing-library/jest-dom"; // Imports custom mathers
+import "@testing-library/jest-dom"; // Imports custom matchers
 
 import {testDependencies} from "../../../../testing/test-dependencies";
 import {

package/src/components/__tests__/sortable.test.tsx

@@ -181,7 +181,6 @@ describe("Sortable.itemsFromProps", () => {
         expect(items).toMatchInlineSnapshot(`
             [
               {
-                "endPosition": {},
                 "height": 0,
                 "key": 0,
                 "option": "a",
@@ -189,7 +188,6 @@ describe("Sortable.itemsFromProps", () => {
                 "width": 0,
               },
               {
-                "endPosition": {},
                 "height": 0,
                 "key": 1,
                 "option": "b",
@@ -197,7 +195,6 @@ describe("Sortable.itemsFromProps", () => {
                 "width": 0,
               },
               {
-                "endPosition": {},
                 "height": 0,
                 "key": 2,
                 "option": "c",

package/src/components/math-input.tsx

@@ -1,3 +1,4 @@
+import {keyTranslator} from "@khanacademy/math-input";
 import classNames from "classnames";
 import $ from "jquery";
 import MathQuill from "mathquill";
@@ -33,6 +34,20 @@ type State = {
     focused: boolean;
 };
 
+const customKeyTranslator = {
+    ...keyTranslator,
+    // If there's something in the input that can become part of a
+    // fraction, typing "/" puts it in the numerator. If not, typing
+    // "/" does nothing. In that case, enter a \frac.
+    FRAC: (mathQuill) => {
+        const contents = mathQuill.latex();
+        mathQuill.typedText("/");
+        if (mathQuill.latex() === contents) {
+            mathQuill.cmd("\\frac");
+        }
+    },
+};
+
 // A WYSIWYG math input that calls `onChange(LaTeX-string)`
 class MathInput extends React.Component<Props, State> {
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'mouseDown' has no initializer and is not definitely assigned in the constructor.
@@ -208,9 +223,20 @@ class MathInput extends React.Component<Props, State> {
         return this.state.focused;
     };
 
-    insert: (arg1: any) => void = (value) => {
+    insert: (value: any) => void = (value) => {
         // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
         const input = this.mathField();
+        const inputModifier = customKeyTranslator[value];
+        if (inputModifier) {
+            inputModifier(input, value);
+            input.focus();
+            return;
+        }
+
+        // note(Matthew): I'm not sure this is still being used
+        // but it fails tests when I remove it and the way we call
+        // methods directly on components makes it difficult to confirm
+        // if it's dead code
         if (_(value).isFunction()) {
             value(input);
         } else if (value[0] === "\\") {

package/src/components/sortable.tsx

@@ -72,7 +72,7 @@ class Placeholder extends React.Component<PlaceholderProps> {
 
 type DraggableProps = {
     content: string;
-    endPosition: {left: number; top: number} | Record<string, never>;
+    endPosition?: {left: number; top: number};
     includePadding: boolean;
     layout: Layout;
     width?: number;
@@ -251,7 +251,10 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
             return;
         }
 
-        if (this.props.state === ItemState.ANIMATING) {
+        if (
+            this.props.state === ItemState.ANIMATING &&
+            this.props.endPosition
+        ) {
             // Start animating
             const current = this.getCurrentPosition();
             const duration =
@@ -433,7 +436,7 @@ type SortableItem = {
     option: SortableOption;
     key: number;
     state: ItemState;
-    endPosition: Position | Record<string, never>;
+    endPosition?: Position;
     width: number;
     height: number;
 };
@@ -513,7 +516,6 @@ class Sortable extends React.Component<SortableProps, SortableState> {
                 option: option,
                 key: i,
                 state,
-                endPosition: {},
                 width: 0,
                 height: 0,
             };

package/src/components/tex-buttons.tsx

@@ -1,3 +1,4 @@
+import {Keys} from "@khanacademy/math-input";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -9,8 +10,7 @@ const prettyBig = {fontSize: "150%"} as const;
 const slightlyBig = {fontSize: "120%"} as const;
 const symbStyle = {fontSize: "130%"} as const;
 
-type Inserter = string | ((input: any) => void);
-type ButtonSet = (props: any) => [React.ReactNode, Inserter];
+type ButtonSet = (props: any) => [React.ReactNode, Keys];
 
 type ButtonSets = {
     readonly [key: string]: ReadonlyArray<ButtonSet>;
@@ -26,13 +26,13 @@ const basic: ReadonlyArray<ButtonSet> = [
         <span key="plus" style={slightlyBig}>
             +
         </span>,
-        "+",
+        "PLUS",
     ],
     () => [
         <span key="minus" style={prettyBig}>
             -
         </span>,
-        "-",
+        "MINUS",
     ],
 
     // TODO(joel) - display as \cdot when appropriate
@@ -43,14 +43,14 @@ const basic: ReadonlyArray<ButtonSet> = [
                 <TeX key="times" style={prettyBig}>
                     {i18n.doNotTranslate("\\times")}
                 </TeX>,
-                "\\times",
+                "TIMES",
             ];
         }
         return [
             <TeX key="times" style={prettyBig}>
                 {i18n.doNotTranslate("\\cdot")}
             </TeX>,
-            "\\cdot",
+            "CDOT",
         ];
     },
     () => {
@@ -59,17 +59,7 @@ const basic: ReadonlyArray<ButtonSet> = [
             <TeX key="frac" style={prettyBig}>
                 {i18n.doNotTranslate("\\frac{x}{y}")}
             </TeX>,
-
-            // If there's something in the input that can become part of a
-            // fraction, typing "/" puts it in the numerator. If not, typing
-            // "/" does nothing. In that case, enter a \frac.
-            (input: any) => {
-                const contents = input.latex();
-                input.typedText("/");
-                if (input.latex() === contents) {
-                    input.cmd("\\frac");
-                }
-            },
+            "FRAC",
         ];
     },
 ];
@@ -82,7 +72,7 @@ const buttonSets: ButtonSets = {
             const {TeX} = getDependencies();
             return [
                 <TeX key="div">{i18n.doNotTranslate("\\div")}</TeX>,
-                "\\div",
+                "DIVIDE",
             ];
         },
     ]),
@@ -90,24 +80,15 @@ const buttonSets: ButtonSets = {
     trig: [
         () => {
             const {TeX} = getDependencies();
-            return [
-                <TeX key="sin">{i18n.doNotTranslate("\\sin")}</TeX>,
-                "\\sin",
-            ];
+            return [<TeX key="sin">{i18n.doNotTranslate("\\sin")}</TeX>, "SIN"];
         },
         () => {
             const {TeX} = getDependencies();
-            return [
-                <TeX key="cos">{i18n.doNotTranslate("\\cos")}</TeX>,
-                "\\cos",
-            ];
+            return [<TeX key="cos">{i18n.doNotTranslate("\\cos")}</TeX>, "COS"];
         },
         () => {
             const {TeX} = getDependencies();
-            return [
-                <TeX key="tan">{i18n.doNotTranslate("\\tan")}</TeX>,
-                "\\tan",
-            ];
+            return [<TeX key="tan">{i18n.doNotTranslate("\\tan")}</TeX>, "TAN"];
         },
         () => {
             const {TeX} = getDependencies();
@@ -115,7 +96,7 @@ const buttonSets: ButtonSets = {
                 <TeX key="theta" style={symbStyle}>
                     {i18n.doNotTranslate("\\theta")}
                 </TeX>,
-                "\\theta",
+                "THETA",
             ];
         },
         () => {
@@ -130,7 +111,7 @@ const buttonSets: ButtonSets = {
                         {i18n.doNotTranslate("\\phi")}
                     </TeX>
                 </span>,
-                "\\phi",
+                "PHI",
             ];
         },
     ],
@@ -140,7 +121,7 @@ const buttonSets: ButtonSets = {
             const {TeX} = getDependencies();
             return [
                 <TeX key="sqrt">{i18n.doNotTranslate("\\sqrt{x}")}</TeX>,
-                "\\sqrt",
+                "SQRT",
             ];
         },
         // TODO(joel) - how does desmos do this?
@@ -148,10 +129,7 @@ const buttonSets: ButtonSets = {
             const {TeX} = getDependencies();
             return [
                 <TeX key="nthroot">{i18n.doNotTranslate("\\sqrt[3]{x}")}</TeX>,
-                (input: any) => {
-                    input.typedText("nthroot3");
-                    input.keystroke("Right");
-                },
+                "NTHROOT3",
             ];
         },
         () => {
@@ -160,17 +138,7 @@ const buttonSets: ButtonSets = {
                 <TeX key="pow" style={slightlyBig}>
                     {i18n.doNotTranslate("a^b")}
                 </TeX>,
-                (input: any) => {
-                    const contents = input.latex();
-                    input.typedText("^");
-
-                    // If the input hasn't changed (for example, if we're
-                    // attempting to add an exponent on an empty input or an empty
-                    // denominator), insert our own "a^b"
-                    if (input.latex() === contents) {
-                        input.typedText("a^b");
-                    }
-                },
+                "POW",
             ];
         },
         () => {
@@ -179,7 +147,7 @@ const buttonSets: ButtonSets = {
                 <TeX key="pi" style={slightlyBig}>
                     {i18n.doNotTranslate("\\pi")}
                 </TeX>,
-                "\\pi",
+                "PI",
             ];
         },
     ],
@@ -187,26 +155,17 @@ const buttonSets: ButtonSets = {
     logarithms: [
         () => {
             const {TeX} = getDependencies();
-            return [
-                <TeX key="log">{i18n.doNotTranslate("\\log")}</TeX>,
-                "\\log",
-            ];
+            return [<TeX key="log">{i18n.doNotTranslate("\\log")}</TeX>, "LOG"];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="ln">{i18n.doNotTranslate("\\ln")}</TeX>, "\\ln"];
+            return [<TeX key="ln">{i18n.doNotTranslate("\\ln")}</TeX>, "LN"];
         },
         () => {
             const {TeX} = getDependencies();
             return [
                 <TeX key="log_b">{i18n.doNotTranslate("\\log_b")}</TeX>,
-                (input) => {
-                    input.typedText("log_");
-                    input.keystroke("Right");
-                    input.typedText("(");
-                    input.keystroke("Left");
-                    input.keystroke("Left");
-                },
+                "LOG_B",
             ];
         },
     ],
@@ -214,39 +173,30 @@ const buttonSets: ButtonSets = {
     "basic relations": [
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="eq">{"="}</TeX>, "="];
+            return [<TeX key="eq">{"="}</TeX>, "EQUAL"];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="lt">{i18n.doNotTranslate("\\lt")}</TeX>, "\\lt"];
+            return [<TeX key="lt">{i18n.doNotTranslate("\\lt")}</TeX>, "LT"];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="gt">{i18n.doNotTranslate("\\gt")}</TeX>, "\\gt"];
+            return [<TeX key="gt">{i18n.doNotTranslate("\\gt")}</TeX>, "GT"];
         },
     ],
 
     "advanced relations": [
         () => {
             const {TeX} = getDependencies();
-            return [
-                <TeX key="neq">{i18n.doNotTranslate("\\neq")}</TeX>,
-                "\\neq",
-            ];
+            return [<TeX key="neq">{i18n.doNotTranslate("\\neq")}</TeX>, "NEQ"];
         },
         () => {
             const {TeX} = getDependencies();
-            return [
-                <TeX key="leq">{i18n.doNotTranslate("\\leq")}</TeX>,
-                "\\leq",
-            ];
+            return [<TeX key="leq">{i18n.doNotTranslate("\\leq")}</TeX>, "LEQ"];
         },
         () => {
             const {TeX} = getDependencies();
-            return [
-                <TeX key="geq">{i18n.doNotTranslate("\\geq")}</TeX>,
-                "\\geq",
-            ];
+            return [<TeX key="geq">{i18n.doNotTranslate("\\geq")}</TeX>, "GEQ"];
         },
     ],
 };
@@ -255,7 +205,7 @@ export type ButtonSetsType = ReadonlyArray<keyof typeof buttonSets>;
 
 type Props = {
     sets: ButtonSetsType;
-    onInsert: (arg1: Inserter) => void;
+    onInsert: (key: Keys) => void;
     className?: string;
     convertDotToTimes?: boolean;
 };

package/src/perseus-types.ts

@@ -7,7 +7,7 @@ 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>;
+type Empty = Record<never, never>;
 
 export type PerseusItem = {
     // The details of the question being asked to the user.

package/src/widgets/definition.tsx

@@ -13,7 +13,7 @@ import type {
 import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
 
 // TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-type Empty = Record<string, never>;
+type Empty = Record<never, never>;
 
 type RenderProps = PerseusDefinitionWidgetOptions;
 

package/src/widgets/explanation.tsx

@@ -13,7 +13,7 @@ import type {PerseusExplanationWidgetOptions} from "../perseus-types";
 import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
 
 // TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-type Empty = Record<string, never>;
+type Empty = Record<never, never>;
 
 type RenderProps = PerseusExplanationWidgetOptions; // transform = _.identity
 

package/src/widgets/expression.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import * as KAS from "@khanacademy/kas";
-import {KeypadInput, KeypadType} from "@khanacademy/math-input";
+import {KeypadInput, KeypadType, Keys as Key} from "@khanacademy/math-input";
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import classNames from "classnames";
@@ -413,11 +413,11 @@ export class Expression extends React.Component<Props, ExpressionState> {
     };
 
     // HACK(joel)
-    insert: (text: string) => void = (text: string) => {
+    insert(keyPressed: Key) {
         // eslint-disable-next-line react/no-string-refs
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
-        this.refs.input.insert(text);
-    };
+        this.refs.input.insert(keyPressed);
+    }
 
     getInputPaths: () => ReadonlyArray<ReadonlyArray<any>> = () => {
         // The widget itself is an input, so we return a single empty list to