@khanacademy/math-input 4.1.1 → 4.2.0

package/src/components/{key-translator.ts → key-handlers/key-translator.ts}

@@ -1,12 +1,15 @@
-import Key from "../data/keys";
-import {DecimalSeparator} from "../enums";
-import {decimalSeparator} from "../utils";
-
-import MQ from "./input/mathquill-instance";
+import Key from "../../data/keys";
+import {DecimalSeparator} from "../../enums";
+import {decimalSeparator} from "../../utils";
+import {mathQuillInstance} from "../input/mathquill-instance";
 import {
     MathFieldInterface,
-    MathQuillUpdaterCallback,
-} from "./input/mathquill-types";
+    MathFieldUpdaterCallback,
+} from "../input/mathquill-types";
+
+import handleArrow from "./handle-arrow";
+import handleExponent from "./handle-exponent";
+import handleJumpOut from "./handle-jump-out";
 
 enum ActionType {
     WRITE = "write",
@@ -20,7 +23,7 @@ const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
 function buildGenericCallback(
     str: string,
     type: ActionType = ActionType.WRITE,
-): MathQuillUpdaterCallback {
+): MathFieldUpdaterCallback {
     return function (mathQuill: MathFieldInterface) {
         switch (type) {
             case ActionType.WRITE: {
@@ -39,20 +42,41 @@ function buildGenericCallback(
     };
 }
 
-const keyToMathquillMap: Record<Key, MathQuillUpdaterCallback> = {
+function buildNormalFunctionCallback(command: string) {
+    return function (mathField: MathFieldInterface) {
+        mathField.write(`\\${command}\\left(\\right)`);
+        mathField.keystroke("Left");
+    };
+}
+
+const keyToMathquillMap: Record<Key, MathFieldUpdaterCallback> = {
+    EXP: handleExponent,
+    EXP_2: handleExponent,
+    EXP_3: handleExponent,
+
+    JUMP_OUT_PARENTHESES: handleJumpOut,
+    JUMP_OUT_EXPONENT: handleJumpOut,
+    JUMP_OUT_BASE: handleJumpOut,
+    JUMP_INTO_NUMERATOR: handleJumpOut,
+    JUMP_OUT_NUMERATOR: handleJumpOut,
+    JUMP_OUT_DENOMINATOR: handleJumpOut,
+
+    LEFT: handleArrow,
+    RIGHT: handleArrow,
+
+    LOG: buildNormalFunctionCallback("log"),
+    LN: buildNormalFunctionCallback("ln"),
+    SIN: buildNormalFunctionCallback("sin"),
+    COS: buildNormalFunctionCallback("cos"),
+    TAN: buildNormalFunctionCallback("tan"),
+
     CDOT: buildGenericCallback("\\cdot"),
-    COS: buildGenericCallback("cos"),
     DECIMAL: buildGenericCallback(decimalSymbol),
     DIVIDE: buildGenericCallback("\\div"),
     EQUAL: buildGenericCallback("="),
-    EXP: buildGenericCallback("^"),
-    EXP_2: buildGenericCallback("^2"),
-    EXP_3: buildGenericCallback("^3"),
     GEQ: buildGenericCallback("\\geq"),
     GT: buildGenericCallback(">"),
     LEQ: buildGenericCallback("\\leq"),
-    LN: buildGenericCallback("\\ln"),
-    LOG: buildGenericCallback("\\log"),
     LT: buildGenericCallback("<"),
     MINUS: buildGenericCallback("-"),
     NEGATIVE: buildGenericCallback("-"),
@@ -60,13 +84,12 @@ const keyToMathquillMap: Record<Key, MathQuillUpdaterCallback> = {
     PERCENT: buildGenericCallback("%"),
     PERIOD: buildGenericCallback("."),
     PLUS: buildGenericCallback("+"),
-    SIN: buildGenericCallback("sin"),
-    TAN: buildGenericCallback("tan"),
     TIMES: buildGenericCallback("\\times"),
 
     // The `FRAC_EXCLUSIVE` variant is handled manually, since we may need to do
     // some additional navigation depending on the cursor position.
     FRAC_INCLUSIVE: buildGenericCallback("/", ActionType.CMD),
+    FRAC: buildGenericCallback("\\frac", ActionType.CMD),
     LEFT_PAREN: buildGenericCallback("(", ActionType.CMD),
     RIGHT_PAREN: buildGenericCallback(")", ActionType.CMD),
     SQRT: buildGenericCallback("sqrt", ActionType.CMD),
@@ -75,6 +98,7 @@ const keyToMathquillMap: Record<Key, MathQuillUpdaterCallback> = {
     THETA: buildGenericCallback("theta", ActionType.CMD),
     RADICAL: buildGenericCallback("nthroot", ActionType.CMD),
 
+    BACKSPACE: buildGenericCallback("Backspace", ActionType.KEYSTROKE),
     UP: buildGenericCallback("Up", ActionType.KEYSTROKE),
     DOWN: buildGenericCallback("Down", ActionType.KEYSTROKE),
 
@@ -87,7 +111,8 @@ const keyToMathquillMap: Record<Key, MathQuillUpdaterCallback> = {
         const cursor = mathQuill.__controller.cursor;
         // If there's nothing to the left of the cursor, then we want to
         // leave the cursor to the left of the fraction after creating it.
-        const shouldNavigateLeft = cursor[MQ.L] === ActionType.MQ_END;
+        const shouldNavigateLeft =
+            cursor[mathQuillInstance.L] === ActionType.MQ_END;
         mathQuill.cmd("\\frac");
         if (shouldNavigateLeft) {
             mathQuill.keystroke("Left");
@@ -128,17 +153,7 @@ const keyToMathquillMap: Record<Key, MathQuillUpdaterCallback> = {
 
     // These need to be overwritten by the consumer
     // if they're going to be used
-    FRAC: () => {},
-    RIGHT: () => {},
-    LEFT: () => {},
-    BACKSPACE: () => {},
     DISMISS: () => {},
-    JUMP_OUT_PARENTHESES: () => {},
-    JUMP_OUT_EXPONENT: () => {},
-    JUMP_OUT_BASE: () => {},
-    JUMP_INTO_NUMERATOR: () => {},
-    JUMP_OUT_NUMERATOR: () => {},
-    JUMP_OUT_DENOMINATOR: () => {},
     NOOP: () => {},
     MANY: () => {},
 

package/src/components/keypad/__tests__/{KeypadButton.test.tsx → keypad-button.test.tsx}

@@ -18,7 +18,7 @@ describe("<KeypadButton />", () => {
 
         // Assert
         expect(
-            screen.getByRole("button", {name: "LEFT_PAREN"}),
+            screen.getByRole("button", {name: "Left parenthesis"}),
         ).toBeInTheDocument();
     });
 
@@ -33,9 +33,9 @@ describe("<KeypadButton />", () => {
         );
 
         // Act
-        userEvent.click(screen.getByRole("button", {name: "LEFT_PAREN"}));
+        userEvent.click(screen.getByRole("button", {name: "Left parenthesis"}));
 
         // Assert
-        expect(mockClickKeyCallback).toHaveBeenCalled();
+        expect(mockClickKeyCallback).toHaveBeenCalledWith("LEFT_PAREN");
     });
 });

package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -0,0 +1,231 @@
+import Color from "@khanacademy/wonder-blocks-color";
+import {Popover} from "@khanacademy/wonder-blocks-popover";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom";
+
+import Key from "../../../data/keys";
+import {createMathField} from "../../input/mathquill-instance";
+import {MathFieldInterface} from "../../input/mathquill-types";
+import keyTranslator from "../../key-handlers/key-translator";
+import Keypad from "../index";
+
+type Props = {
+    onChangeMathInput: (mathInputTex: string) => void;
+};
+
+function V2KeypadWithMathquill(props: Props) {
+    const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [mathField, setMathField] = React.useState<MathFieldInterface>();
+
+    React.useEffect(() => {
+        if (!mathField && mathFieldWrapperRef.current) {
+            const mathFieldInstance = createMathField(
+                mathFieldWrapperRef.current,
+                (baseConfig) => {
+                    return {
+                        ...baseConfig,
+                        handlers: {
+                            edit: (mathField) => {
+                                props.onChangeMathInput(mathField.latex());
+                            },
+                        },
+                    };
+                },
+            );
+            setMathField(mathFieldInstance);
+        }
+    }, [mathField, props]);
+
+    function handleClickKey(key: Key) {
+        if (!mathField) {
+            return;
+        }
+
+        const mathFieldCallback = keyTranslator[key];
+        if (mathFieldCallback) {
+            mathFieldCallback(mathField, key);
+        }
+    }
+
+    return (
+        <div style={{maxWidth: "400px", margin: "2em"}}>
+            <Popover
+                content={
+                    <div>
+                        <Keypad
+                            extraKeys={["a", "b", "c"]}
+                            onClickKey={handleClickKey}
+                            advancedRelations
+                            basicRelations
+                            divisionKey
+                            logarithms
+                            multiplicationDot
+                            preAlgebra
+                            trigonometry
+                        />
+                    </div>
+                }
+                dismissEnabled
+                opened
+            >
+                <div
+                    style={{
+                        width: "100%",
+                        marginBottom: "1em",
+                        border: `1px solid ${Color.offBlack16}`,
+                    }}
+                    ref={mathFieldWrapperRef}
+                />
+            </Popover>
+        </div>
+    );
+}
+
+describe("Keypad v2 with MathQuill", () => {
+    it("can write the Pythagorean theorem (simple)", () => {
+        // Arrange
+        const mockMathInputCallback = jest.fn();
+        render(
+            <V2KeypadWithMathquill onChangeMathInput={mockMathInputCallback} />,
+        );
+
+        // Act
+
+        // a^2
+        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "a"}));
+        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        // +
+        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("button", {name: "Plus"}));
+
+        // b^2 =
+        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "b"}));
+        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+        userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
+
+        // c^2
+        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "c"}));
+        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        // Assert
+        expect(mockMathInputCallback).toHaveBeenLastCalledWith("a^2+b^2=c^2");
+    });
+
+    it("can write the Pythagorean theorem (complex)", () => {
+        // Arrange
+        const mockMathInputCallback = jest.fn();
+        render(
+            <V2KeypadWithMathquill onChangeMathInput={mockMathInputCallback} />,
+        );
+
+        // Act
+
+        // c = /Square root
+        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "c"}));
+        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
+        userEvent.click(screen.getByRole("button", {name: "Square root"}));
+
+        // a^2
+        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "a"}));
+        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        // +
+        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("button", {name: "Plus"}));
+
+        // b^2
+        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "b"}));
+        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        // Assert
+        expect(mockMathInputCallback).toHaveBeenLastCalledWith(
+            "c=\\sqrt{a^2+b^2}",
+        );
+    });
+
+    it("writes the Pythagorean theorem using typing/clicking together", () => {
+        // Arrange
+        const mockMathInputCallback = jest.fn();
+        render(
+            <V2KeypadWithMathquill onChangeMathInput={mockMathInputCallback} />,
+        );
+
+        // Act
+
+        // Argument is empty because mathquill generates textarea w/o label
+        userEvent.type(screen.getByRole("textbox"), "a");
+        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        userEvent.type(screen.getByRole("textbox"), "+");
+
+        // b^2
+        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "b"}));
+        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+        userEvent.type(screen.getByRole("textbox"), "=c^2");
+
+        // Assert
+        expect(mockMathInputCallback).toHaveBeenLastCalledWith("a^2+b^2=c^2");
+    });
+
+    it("deletes from the input using the backspace button", () => {
+        // Arrange
+        const mockMathInputCallback = jest.fn();
+        render(
+            <V2KeypadWithMathquill onChangeMathInput={mockMathInputCallback} />,
+        );
+
+        // Act
+        // Write `a^2+b^2=c^2` using the keypad
+        const buttonPressesForFormula = [
+            "Extras",
+            "a",
+            "Operators",
+            "Square",
+            "Numbers",
+            "Plus",
+            "Extras",
+            "b",
+            "Operators",
+            "Square",
+            "Equals sign",
+            "Extras",
+            "c",
+            "Operators",
+            "Square",
+        ];
+        buttonPressesForFormula.forEach((button) => {
+            userEvent.click(screen.getByRole("button", {name: button}));
+        });
+
+        // Assert
+        // make sure the formula was typed correctly
+        expect(mockMathInputCallback).toHaveBeenLastCalledWith("a^2+b^2=c^2");
+
+        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        // delete: need 14 backspaces in MathQuill to delete `a^2+b^2=c^2`
+        for (let i = 0; i < 14; i++) {
+            userEvent.click(screen.getByRole("button", {name: "Delete"}));
+        }
+
+        expect(mockMathInputCallback).toHaveBeenLastCalledWith("");
+    });
+});

package/src/components/keypad/__tests__/keypad-v2.cypress.ts

@@ -1,11 +1,24 @@
 import renderSingleKeypad from "../../../../../../testing/render-keypad-with-cypress";
+import KeyConfigs from "../../../data/key-configs";
 
 const tabs = [
-    {name: "Operators", specialButton: "EXP_2"},
-    {name: "Extras", specialButton: "PI"},
+    {
+        name: "Operators",
+        specialButton: "EXP_2",
+        label: KeyConfigs["EXP_2"].ariaLabel,
+    },
+    {name: "Extras", specialButton: "PI", label: KeyConfigs["PI"].ariaLabel},
 
-    {name: "Geometry", specialButton: "COS"},
-    {name: "Numbers", specialButton: "NUM_7"},
+    {
+        name: "Geometry",
+        specialButton: "COS",
+        label: KeyConfigs["COS"].ariaLabel,
+    },
+    {
+        name: "Numbers",
+        specialButton: "NUM_7",
+        label: KeyConfigs["NUM_7"].ariaLabel,
+    },
 ];
 
 describe("Keypad v2", () => {
@@ -16,14 +29,14 @@ describe("Keypad v2", () => {
             // currently clicking on the bottom left due to button re-rendering
             // after mousedown but before mouseup (only in Cypress)
             cy.get('[aria-label="' + tab.name + '"]').click("bottomLeft");
-            cy.get('[aria-label="' + tab.specialButton + '"]').should("exist");
+            cy.get('[aria-label="' + tab.label + '"]').should("exist");
         });
 
         it(`calls ${tab.specialButton} key callback in  ${tab.name} tab`, () => {
             const onClickKeySpy = cy.spy().as("onClickKeySpy");
             renderSingleKeypad(onClickKeySpy);
             cy.get('[aria-label="' + tab.name + '"]').click();
-            cy.get('[aria-label="' + tab.specialButton + '"]').click();
+            cy.get('[aria-label="' + tab.label + '"]').click();
             cy.get("@onClickKeySpy").should(
                 "have.been.calledOnceWithExactly",
                 tab.specialButton,

package/src/components/keypad/keypad-mathquill.stories.tsx

@@ -1,10 +1,11 @@
 import Color from "@khanacademy/wonder-blocks-color";
 import {Popover} from "@khanacademy/wonder-blocks-popover";
-import MathQuill from "mathquill";
 import * as React from "react";
 
 import Key from "../../data/keys";
-import keyTranslator from "../key-translator";
+import {createMathField} from "../input/mathquill-instance";
+import {MathFieldInterface} from "../input/mathquill-types";
+import keyTranslator from "../key-handlers/key-translator";
 
 import Keypad from "./index";
 
@@ -12,36 +13,27 @@ export default {
     title: "v2 Keypad With Mathquill",
 };
 
-const mathQuillConfig = {
-    autoCommands: "pi theta phi sqrt nthroot",
-    charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
-    supSubsRequireOperand: true,
-    spaceBehavesLikeTab: true,
-};
-
 export function V2KeypadWithMathquill() {
-    const mathquillWrapperRef = React.useRef<HTMLDivElement>(null);
-    const [mathQuill, setMathQuill] = React.useState<MathQuill>();
+    const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [mathField, setMathField] = React.useState<MathFieldInterface>();
 
     React.useEffect(() => {
-        if (!mathQuill && mathquillWrapperRef.current) {
-            const MQ = MathQuill.getInterface(2);
-            const mathQuillInstance = MQ.MathField(
-                mathquillWrapperRef.current,
-                mathQuillConfig,
+        if (!mathField && mathFieldWrapperRef.current) {
+            const mathFieldInstance = createMathField(
+                mathFieldWrapperRef.current,
             );
-            setMathQuill(mathQuillInstance);
+            setMathField(mathFieldInstance);
         }
-    }, [mathQuill]);
+    }, [mathField]);
 
     function handleClickKey(key: Key) {
-        if (!mathQuill) {
+        if (!mathField) {
             return;
         }
 
-        const mathQuillCallback = keyTranslator[key];
-        if (mathQuillCallback) {
-            mathQuillCallback(mathQuill, key);
+        const mathFieldCallback = keyTranslator[key];
+        if (mathFieldCallback) {
+            mathFieldCallback(mathField, key);
         } else {
             // eslint-disable-next-line no-console
             console.warn(`No translation to Mathquill for: ${key}`);
@@ -74,7 +66,7 @@ export function V2KeypadWithMathquill() {
                         marginBottom: "1em",
                         border: `1px solid ${Color.offBlack16}`,
                     }}
-                    ref={mathquillWrapperRef}
+                    ref={mathFieldWrapperRef}
                 />
             </Popover>
         </div>

package/src/components/keypad/keypad-page-items.tsx

@@ -50,7 +50,7 @@ export const KeypadButton = ({
         onPress={() => onClickKey(keyConfig.id)}
         tintColor={tintColor}
         style={style}
-        ariaLabel={keyConfig.id}
+        ariaLabel={keyConfig.ariaLabel}
     >
         <ButtonAsset id={keyConfig.id} />
     </Button>

package/src/index.ts

@@ -13,4 +13,9 @@ export type {default as Keys} from "./data/keys";
 export {type KeyType, KeypadType} from "./enums";
 
 export {default as Keypad} from "./components/keypad/index";
-export {default as keyTranslator} from "./components/key-translator";
+export {default as keyTranslator} from "./components/key-handlers/key-translator";
+export {
+    createMathField,
+    mathQuillInstance,
+} from "./components/input/mathquill-instance";
+export {type MathFieldInterface} from "./components/input/mathquill-types";