@khanacademy/math-input 4.1.1 → 4.3.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}

@@ -4,21 +4,22 @@ import * as React from "react";
 import "@testing-library/jest-dom";
 
 import Keys from "../../../data/key-configs";
-import {KeypadButton} from "../keypad-page-items";
+import {KeypadButton} from "../keypad-button";
 
 describe("<KeypadButton />", () => {
     it("uses the aria label from the key config", () => {
         // Arrange
         render(
             <KeypadButton
-                onClickKey={(config) => {}}
+                onClickKey={() => {}}
                 keyConfig={Keys.LEFT_PAREN}
+                coord={[0, 0]}
             />,
         );
 
         // Assert
         expect(
-            screen.getByRole("button", {name: "LEFT_PAREN"}),
+            screen.getByRole("button", {name: "Left parenthesis"}),
         ).toBeInTheDocument();
     });
 
@@ -29,13 +30,14 @@ describe("<KeypadButton />", () => {
             <KeypadButton
                 onClickKey={mockClickKeyCallback}
                 keyConfig={Keys.LEFT_PAREN}
+                coord={[0, 0]}
             />,
         );
 
         // 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/index.tsx

@@ -8,35 +8,27 @@ import {ClickKeyCallback} from "../../types";
 import Tabbar from "../tabbar/tabbar";
 import {TabbarItemType} from "../tabbar/types";
 
-import ExtrasPage from "./extras-page";
-import GeometryPage from "./geometry-page";
-import NumbersPage from "./numbers-page";
-import {NumbersPageOptions} from "./numbers-page/types";
-import OperatorsPage from "./operators-page";
-import {OperatorsButtonSets} from "./operators-page/types";
+import ExtrasPage from "./keypad-pages/extras-page";
+import GeometryPage from "./keypad-pages/geometry-page";
+import NumbersPage from "./keypad-pages/numbers-page";
+import OperatorsPage from "./keypad-pages/operators-page";
+import SharedKeys from "./shared-keys";
 
 export type Props = {
     onClickKey: ClickKeyCallback;
     trigonometry?: boolean;
     extraKeys: ReadonlyArray<Key>;
-} & OperatorsButtonSets &
-    NumbersPageOptions;
-
-type State = {
-    selectedPage: TabbarItemType;
-};
-
-type DefaultProps = {
-    extraKeys: Props["extraKeys"];
+    multiplicationDot?: boolean;
+    divisionKey?: boolean;
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
 };
 
 function allPages(props: Props): ReadonlyArray<TabbarItemType> {
     const pages: Array<TabbarItemType> = ["Numbers"];
 
-    if (props.extraKeys?.length) {
-        pages.push("Extras");
-    }
-
     if (
         // OperatorsButtonSets
         props.preAlgebra ||
@@ -51,48 +43,80 @@ function allPages(props: Props): ReadonlyArray<TabbarItemType> {
         pages.push("Geometry");
     }
 
+    if (props.extraKeys?.length) {
+        pages.push("Extras");
+    }
+
     return pages;
 }
 
-export default class Keypad extends React.Component<Props, State> {
-    state: State = {
-        selectedPage: "Numbers",
-    };
-
-    static defaultProps: DefaultProps = {
-        extraKeys: [],
-    };
-
-    render(): React.ReactNode {
-        const {selectedPage} = this.state;
-
-        const availablePages = allPages(this.props);
-
-        return (
-            <View>
-                <Tabbar
-                    items={availablePages}
-                    selectedItem={selectedPage}
-                    onSelectItem={(tabbarItem: TabbarItemType) => {
-                        this.setState({selectedPage: tabbarItem});
-                    }}
-                    style={styles.tabbar}
-                />
-                {selectedPage === "Numbers" && <NumbersPage {...this.props} />}
-                {selectedPage === "Extras" && <ExtrasPage {...this.props} />}
+export default function Keypad(props: Props) {
+    const [selectedPage, setSelectedPage] =
+        React.useState<TabbarItemType>("Numbers");
+
+    const availablePages = allPages(props);
+
+    const {
+        onClickKey,
+        extraKeys = [],
+        multiplicationDot,
+        divisionKey,
+        preAlgebra,
+        logarithms,
+        basicRelations,
+        advancedRelations,
+    } = props;
+
+    return (
+        <View>
+            <Tabbar
+                items={availablePages}
+                selectedItem={selectedPage}
+                onSelectItem={(tabbarItem: TabbarItemType) => {
+                    setSelectedPage(tabbarItem);
+                }}
+                style={styles.tabbar}
+            />
+
+            <View style={styles.grid}>
+                {selectedPage === "Numbers" && (
+                    <NumbersPage onClickKey={onClickKey} />
+                )}
+                {selectedPage === "Extras" && (
+                    <ExtrasPage onClickKey={onClickKey} extraKeys={extraKeys} />
+                )}
                 {selectedPage === "Operators" && (
-                    <OperatorsPage {...this.props} />
+                    <OperatorsPage
+                        onClickKey={onClickKey}
+                        preAlgebra={preAlgebra}
+                        logarithms={logarithms}
+                        basicRelations={basicRelations}
+                        advancedRelations={advancedRelations}
+                    />
                 )}
                 {selectedPage === "Geometry" && (
-                    <GeometryPage {...this.props} />
+                    <GeometryPage onClickKey={onClickKey} />
                 )}
+                <SharedKeys
+                    onClickKey={onClickKey}
+                    multiplicationDot={multiplicationDot}
+                    divisionKey={divisionKey}
+                />
             </View>
-        );
-    }
+        </View>
+    );
 }
 
 const styles = StyleSheet.create({
     tabbar: {
         background: Color.white,
     },
+    grid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(6, 1fr)",
+        gridTemplateRows: "repeat(4, 1fr)",
+        backgroundColor: "#DBDCDD",
+        maxHeight: 200,
+        maxWidth: 300,
+    },
 });

package/src/components/keypad/{button.stories.tsx → keypad-button.stories.tsx}

@@ -4,7 +4,7 @@ import * as React from "react";
 
 import KeyConfigs from "../../data/key-configs";
 
-import {KeypadButton, KeypadButtonProps} from "./keypad-page-items";
+import {KeypadButton, KeypadButtonProps} from "./keypad-button";
 
 export default {
     title: "Keypad Button",
@@ -70,6 +70,7 @@ export const AllButtons: ComponentStory<typeof KeypadButton> = ({
                 <KeypadButton
                     keyConfig={KeyConfigs[key]}
                     onClickKey={action("pressed")}
+                    coord={[0, 0]}
                 />
             </div>
         ))}