@khanacademy/math-input 16.5.0 → 17.0.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "16.5.0",
+    "version": "17.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -21,7 +21,7 @@
     "scripts": {},
     "dependencies": {
         "@khanacademy/perseus-core": "1.4.1",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#774bb82942c268bd56cd1024dc18b01ac4d90029",
         "performance-now": "^0.2.0"
     },
     "devDependencies": {
@@ -29,7 +29,7 @@
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-popover": "^3.0.22",
+        "@khanacademy/wonder-blocks-popover": "^3.1.0",
         "@khanacademy/wonder-blocks-timing": "^4.0.2",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",

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

@@ -17,7 +17,7 @@ import {KeypadContext, StatefulKeypadContextProvider} from "../keypad-context";
 
 import type {KeypadConfiguration} from "../../types";
 
-const MQ = MathQuill.getInterface(2);
+const MQ = MathQuill.getInterface(3);
 
 const defaultConfiguration: KeypadConfiguration = {
     keypadType: KeypadType.FRACTION,
@@ -176,11 +176,14 @@ describe("math input integration", () => {
 
         // MathQuill is problematic,
         // this is how to get the value of the input directly from MQ
-        const mathquillInstance =
+        const mathquillInstance = MQ(
             // eslint-disable-next-line testing-library/no-node-access
-            MQ(document.getElementsByClassName("mq-editable-field")[0]);
+            document.getElementsByClassName(
+                "mq-editable-field",
+            )[0] as HTMLElement,
+        );
 
-        expect(mathquillInstance.latex()).toBe("8675309");
+        expect(mathquillInstance?.latex()).toBe("8675309");
     });
 
     it("can handle symbols", async () => {
@@ -202,11 +205,14 @@ describe("math input integration", () => {
 
         // MathQuill is problematic,
         // this is how to get the value of the input directly from MQ
-        const mathquillInstance =
+        const mathquillInstance = MQ(
             // eslint-disable-next-line testing-library/no-node-access
-            MQ(document.getElementsByClassName("mq-editable-field")[0]);
+            document.getElementsByClassName(
+                "mq-editable-field",
+            )[0] as HTMLElement,
+        );
 
-        expect(mathquillInstance.latex()).toBe("42\\%");
+        expect(mathquillInstance?.latex()).toBe("42\\%");
     });
 
     it("handles fractions correctly in expression", async () => {
@@ -243,11 +249,14 @@ describe("math input integration", () => {
 
         // MathQuill is problematic,
         // this is how to get the value of the input directly from MQ
-        const mathquillInstance =
+        const mathquillInstance = MQ(
             // eslint-disable-next-line testing-library/no-node-access
-            MQ(document.getElementsByClassName("mq-editable-field")[0]);
+            document.getElementsByClassName(
+                "mq-editable-field",
+            )[0] as HTMLElement,
+        );
 
-        expect(mathquillInstance.latex()).toBe("1\\frac{4}{2}");
+        expect(mathquillInstance?.latex()).toBe("1\\frac{4}{2}");
     });
 
     it("handles fractions correctly in fraction", async () => {
@@ -279,10 +288,13 @@ describe("math input integration", () => {
 
         // MathQuill is problematic,
         // this is how to get the value of the input directly from MQ
-        const mathquillInstance =
+        const mathquillInstance = MQ(
             // eslint-disable-next-line testing-library/no-node-access
-            MQ(document.getElementsByClassName("mq-editable-field")[0]);
+            document.getElementsByClassName(
+                "mq-editable-field",
+            )[0] as HTMLElement,
+        );
 
-        expect(mathquillInstance.latex()).toBe("1\\frac{4}{2}");
+        expect(mathquillInstance?.latex()).toBe("1\\frac{4}{2}");
     });
 });

package/src/components/input/__tests__/mathquill.test.ts

@@ -35,23 +35,23 @@ describe("MathQuill", () => {
         });
 
         it("should work after an expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.pressKey("FRAC_INCLUSIVE");
-            expect(mathField.getContent()).toEqual("\\frac{35x^2}{ }");
+            expect(mathField.getContent()).toEqual("\\frac{35x^{2}}{ }");
         });
 
         it("should work before an expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.moveToStart();
             mathField.pressKey("FRAC_INCLUSIVE");
-            expect(mathField.getContent()).toEqual("\\frac{ }{ }35x^2");
+            expect(mathField.getContent()).toEqual("\\frac{ }{ }35x^{2}");
         });
 
         it("should work with a selected expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.selectAll();
             mathField.pressKey("FRAC_INCLUSIVE");
-            expect(mathField.getContent()).toEqual("\\frac{35x^2}{ }");
+            expect(mathField.getContent()).toEqual("\\frac{35x^{2}}{ }");
         });
     });
 
@@ -63,30 +63,30 @@ describe("MathQuill", () => {
         });
 
         it("should work after an expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.pressKey("RIGHT_PAREN");
-            expect(mathField.getContent()).toEqual("\\left(35x^2\\right)");
+            expect(mathField.getContent()).toEqual("\\left(35x^{2}\\right)");
         });
 
         it("should work before an expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.moveToStart();
             mathField.pressKey("LEFT_PAREN");
-            expect(mathField.getContent()).toEqual("\\left(35x^2\\right)");
+            expect(mathField.getContent()).toEqual("\\left(35x^{2}\\right)");
         });
 
         it.skip("should work on a selected expression", () => {
             mathField.setContent("35x + 5");
             mathField.selectAll();
             mathField.pressKey("LEFT_PAREN");
-            expect(mathField.getContent()).toEqual("\\left(35x^2\\right)");
+            expect(mathField.getContent()).toEqual("\\left(35x^{2}\\right)");
         });
     });
 
     describe("Squared", () => {
         it("should prefix with empty parens after no content", () => {
             mathField.pressKey("EXP_2");
-            expect(mathField.getContent()).toEqual("\\left(\\right)^2");
+            expect(mathField.getContent()).toEqual("\\left(\\right)^{2}");
 
             // Verify that the cursor is in parens.
             expect(isInsideEmptyParens(mathField.getCursor())).toBeTruthy();
@@ -95,27 +95,27 @@ describe("MathQuill", () => {
         it("should prefix with empty parens after an operator", () => {
             mathField.pressKey("DIVIDE");
             mathField.pressKey("EXP_2");
-            expect(mathField.getContent()).toEqual("\\div\\left(\\right)^2");
+            expect(mathField.getContent()).toEqual("\\div\\left(\\right)^{2}");
         });
 
         it("should work after an expression", () => {
             mathField.setContent("35x");
             mathField.pressKey("EXP_2");
-            expect(mathField.getContent()).toEqual("35x^2");
+            expect(mathField.getContent()).toEqual("35x^{2}");
         });
 
         it.skip("should work on a selected expression", () => {
             mathField.setContent("35x+5");
             mathField.selectAll();
             mathField.pressKey("EXP_2");
-            expect(mathField.getContent()).toEqual("\\left(35x+5\\right)^2");
+            expect(mathField.getContent()).toEqual("\\left(35x+5\\right)^{2}");
         });
     });
 
     describe("Cubed", () => {
         it("should prefix with empty parens after no content", () => {
             mathField.pressKey("EXP_3");
-            expect(mathField.getContent()).toEqual("\\left(\\right)^3");
+            expect(mathField.getContent()).toEqual("\\left(\\right)^{3}");
 
             // Verify that the cursor is in parens.
             expect(isInsideEmptyParens(mathField.getCursor())).toBeTruthy();
@@ -124,20 +124,20 @@ describe("MathQuill", () => {
         it("should prefix with empty parens after an operator", () => {
             mathField.pressKey("EQUAL");
             mathField.pressKey("EXP_3");
-            expect(mathField.getContent()).toEqual("=\\left(\\right)^3");
+            expect(mathField.getContent()).toEqual("=\\left(\\right)^{3}");
         });
 
         it("should work after an expression", () => {
             mathField.setContent("35x");
             mathField.pressKey("EXP_3");
-            expect(mathField.getContent()).toEqual("35x^3");
+            expect(mathField.getContent()).toEqual("35x^{3}");
         });
 
         it.skip("should work on a selected expression", () => {
             mathField.setContent("35x+5");
             mathField.selectAll();
             mathField.pressKey("EXP_3");
-            expect(mathField.getContent()).toEqual("\\left(35x+5\\right)^3");
+            expect(mathField.getContent()).toEqual("\\left(35x+5\\right)^{3}");
         });
     });
 
@@ -150,7 +150,7 @@ describe("MathQuill", () => {
             // writing a unique character to verify cursor position.
             expect(isInsideEmptyParens(mathField.getCursor())).toBeFalsy();
             mathField.pressKey("PLUS");
-            expect(mathField.getContent()).toEqual("\\left(\\right)^+");
+            expect(mathField.getContent()).toEqual("\\left(\\right)^{+}");
         });
 
         it("should prefix with empty parens after an operator", () => {
@@ -181,9 +181,9 @@ describe("MathQuill", () => {
         });
 
         it("should work after an expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.pressKey("SQRT");
-            expect(mathField.getContent()).toEqual("35x^2\\sqrt{ }");
+            expect(mathField.getContent()).toEqual("35x^{2}\\sqrt{ }");
         });
 
         it("should work on a selected expression", () => {
@@ -201,9 +201,9 @@ describe("MathQuill", () => {
         });
 
         it("should work after an expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.pressKey("RADICAL");
-            expect(mathField.getContent()).toEqual("35x^2\\sqrt[]{}");
+            expect(mathField.getContent()).toEqual("35x^{2}\\sqrt[]{}");
         });
 
         it.skip("should work on a selected expression", () => {
@@ -222,9 +222,11 @@ describe("MathQuill", () => {
         });
 
         it("should work after an expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.pressKey("LOG");
-            expect(mathField.getContent()).toEqual("35x^2\\log\\left(\\right)");
+            expect(mathField.getContent()).toEqual(
+                "35x^{2}\\log\\left(\\right)",
+            );
         });
 
         it.skip("should work on a selected expression", () => {
@@ -242,10 +244,10 @@ describe("MathQuill", () => {
         });
 
         it("should work after an expression", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.pressKey("LOG_N");
             expect(mathField.getContent()).toEqual(
-                "35x^2\\log_{ }\\left(\\right)",
+                "35x^{2}\\log_{ }\\left(\\right)",
             );
         });
 
@@ -269,15 +271,15 @@ describe("MathQuill", () => {
         });
 
         it("should convert a fraction when deleting the denominator", () => {
-            mathField.setContent("\\frac{35x^2}{ }");
+            mathField.setContent("\\frac{35x^{2}}{ }");
             mathField.pressKey("LEFT");
             mathField.pressKey("BACKSPACE");
-            expect(mathField.getContent()).toEqual("35x^2");
+            expect(mathField.getContent()).toEqual("35x^{2}");
         });
 
         // TODO(kevinb) math isn't selected
         it("should select a fraction when deleting from outside of it", () => {
-            const expr = "\\frac{35x+5}{x^2}";
+            const expr = "\\frac{35x+5}{x^{2}}";
             mathField.setContent(expr);
             mathField.pressKey("BACKSPACE");
             expect(mathField.isSelected()).toBeTruthy();
@@ -358,9 +360,9 @@ describe("MathQuill", () => {
 
         // TODO(kevinb) fix this behavior so that we delete the exponent too
         it.skip("should not delete squared exponents", () => {
-            mathField.setContent("35x^2");
+            mathField.setContent("35x^{2}");
             mathField.pressKey("BACKSPACE");
-            expect(mathField.getContent()).toEqual("35x^2");
+            expect(mathField.getContent()).toEqual("35x^{2}");
             mathField.pressKey("BACKSPACE");
             expect(mathField.getContent()).toEqual("35x^{ }");
         });
@@ -368,7 +370,7 @@ describe("MathQuill", () => {
         it("should not delete non-square exponents", () => {
             mathField.setContent("35x^5");
             mathField.pressKey("BACKSPACE");
-            expect(mathField.getContent()).toEqual("35x^5");
+            expect(mathField.getContent()).toEqual("35x^{5}");
             mathField.pressKey("BACKSPACE");
             expect(mathField.getContent()).toEqual("35x^{ }");
         });
@@ -592,7 +594,7 @@ describe("MathQuill", () => {
             const cursor = mathField.getCursor();
 
             expect(cursor[MQ.L].ctrlSeq).toEqual("5");
-            expect(mathField.getContent()).toEqual("\\log_5\\left(\\right)");
+            expect(mathField.getContent()).toEqual("\\log_{5}\\left(\\right)");
         });
 
         it("should select full log when deleting from empty index (1)", () => {

package/src/components/input/__tests__/test-math-wrapper.ts

@@ -1,5 +1,4 @@
 import MathWrapper from "../math-wrapper";
-import {mathQuillInstance} from "../mathquill-instance";
 
 export default class TestMathWrapper extends MathWrapper {
     getContent() {
@@ -15,7 +14,7 @@ export default class TestMathWrapper extends MathWrapper {
     }
 
     moveToStart() {
-        this.mathField.moveToDirEnd(mathQuillInstance.L);
+        this.mathField.moveToLeftEnd();
     }
 
     isSelected() {

package/src/components/input/math-input.tsx

@@ -99,21 +99,6 @@ class MathInput extends React.Component<Props, State> {
             },
         });
 
-        // NOTE(charlie): MathQuill binds this handler to manage its
-        // drag-to-select behavior. For reasons that I can't explain, the event
-        // itself gets triggered even if you tap slightly outside of the
-        // bound container (maybe 5px outside of any boundary). As a result, the
-        // cursor appears when tapping at those locations, even though the input
-        // itself doesn't receive any touch start or mouse down event and, as
-        // such, doesn't focus itself. This makes for a confusing UX, as the
-        // cursor appears, but the keypad does not and the input otherwise
-        // treats itself as unfocused. Thankfully, we don't need this behavior--
-        // we manage all of the cursor interactions ourselves--so we can safely
-        // unbind the handler.
-        this.mathField.mathField.__controller.container.unbind(
-            "mousedown.mathquill",
-        );
-
         this.mathField.setContent(this.props.value);
 
         this._updateInputPadding();
@@ -542,7 +527,7 @@ class MathInput extends React.Component<Props, State> {
         // Pre-emptively check if the input has any child nodes; if not, the
         // input is empty, so we throw the cursor at the start.
         if (!this._root.hasChildNodes()) {
-            cursor.insAtLeftEnd(this.mathField.mathField.__controller.root);
+            cursor.insAtLeftEnd(this.mathField.mathField.controller().root);
             return;
         }
 
@@ -595,9 +580,9 @@ class MathInput extends React.Component<Props, State> {
         // or left of all of the math, so we place the cursor at the end to
         // which it's closest.
         if (Math.abs(x - right) < Math.abs(x - left)) {
-            cursor.insAtRightEnd(this.mathField.mathField.__controller.root);
+            cursor.insAtRightEnd(this.mathField.mathField.controller().root);
         } else {
-            cursor.insAtLeftEnd(this.mathField.mathField.__controller.root);
+            cursor.insAtLeftEnd(this.mathField.mathField.controller().root);
         }
         // In that event, we need to update the cursor context ourselves.
         this.props.keypadElement &&

package/src/components/input/math-wrapper.ts

@@ -19,11 +19,7 @@ import $ from "jquery";
 import handleBackspace from "../key-handlers/handle-backspace";
 import keyTranslator from "../key-handlers/key-translator";
 
-import {
-    getCursor,
-    getCursorContext,
-    maybeFindCommand,
-} from "./mathquill-helpers";
+import {getCursorContext, maybeFindCommand} from "./mathquill-helpers";
 import {createMathField, mathQuillInstance} from "./mathquill-instance";
 
 import type {
@@ -31,7 +27,6 @@ import type {
     MathFieldUpdaterCallback,
 } from "./mathquill-types";
 import type Key from "../../data/keys";
-import type {Cursor} from "../../types";
 
 const mobileKeyTranslator: Record<Key, MathFieldUpdaterCallback> = {
     ...keyTranslator,
@@ -70,19 +65,17 @@ class MathWrapper {
         // HACK(charlie): We shouldn't reaching into MathQuill internals like
         // this, but it's the easiest way to allow us to manage the focus state
         // ourselves.
-        const controller = this.mathField.__controller;
-        controller.cursor.show();
+        this.mathField.cursor().show();
 
         // Set MathQuill's internal state to reflect the focus, otherwise it
         // will consistently try to hide the cursor on key-press and introduce
         // layout jank.
-        controller.blurred = false;
+        this.mathField.focus();
     }
 
     blur() {
-        const controller = this.mathField.__controller;
-        controller.cursor.hide();
-        controller.blurred = true;
+        this.mathField.cursor().hide();
+        this.mathField.blur();
     }
 
     /**
@@ -91,7 +84,7 @@ class MathWrapper {
      * @param {Key} key - an enum representing the key that was pressed
      * @returns {object} a cursor object, consisting of a cursor context
      */
-    pressKey(key: Key): Cursor {
+    pressKey(key: Key) {
         const cursor = this.getCursor();
         const translator = mobileKeyTranslator[key];
 
@@ -135,10 +128,10 @@ class MathWrapper {
             if (el.hasAttribute("mq-root-block")) {
                 // If we're in the empty area place the cursor at the right
                 // end of the expression.
-                cursor.insAtRightEnd(this.mathField.__controller.root);
+                cursor.insAtRightEnd(this.mathField.controller().root);
             } else {
                 // Otherwise place beside the element at x, y.
-                const controller = this.mathField.__controller;
+                const controller = this.mathField.controller();
 
                 const pageX = x - document.body.scrollLeft;
                 const pageY = y - document.body.scrollTop;
@@ -166,7 +159,7 @@ class MathWrapper {
     // note(Matthew): extracted this logic to share it elsewhere,
     // but it's part of the public MathWrapper API
     getCursor() {
-        return getCursor(this.mathField);
+        return this.mathField.cursor();
     }
 
     // note(Matthew): extracted this logic to keep this file focused,

package/src/components/input/mathquill-helpers.ts

@@ -2,7 +2,7 @@ import {CursorContext} from "./cursor-contexts";
 import {mathQuillInstance} from "./mathquill-instance";
 import {MathFieldActionType} from "./mathquill-types";
 
-import type {MathFieldCursor, MathFieldInterface} from "./mathquill-types";
+import type {MathFieldInterface} from "./mathquill-types";
 
 const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const GreekLetters = ["\\theta", "\\pi"];
@@ -44,20 +44,19 @@ const ValidLeaves = [
     ...Letters.map((letter) => letter.toUpperCase()),
 ];
 
-export function getCursor(mathField: MathFieldInterface): MathFieldCursor {
-    return mathField.__controller.cursor;
-}
+const mqNodeHasClass = (node: any, className: string): boolean =>
+    node._el && (node._el as HTMLElement).classList.contains(className);
 
 export function isFraction(node): boolean {
-    return node.jQ && node.jQ.hasClass("mq-fraction");
+    return mqNodeHasClass(node, "mq-fraction");
 }
 
 export function isNumerator(node): boolean {
-    return node.jQ && node.jQ.hasClass("mq-numerator");
+    return mqNodeHasClass(node, "mq-numerator");
 }
 
 export function isDenominator(node): boolean {
-    return node.jQ && node.jQ.hasClass("mq-denominator");
+    return mqNodeHasClass(node, "mq-denominator");
 }
 
 export function isSubScript(node): boolean {
@@ -65,8 +64,7 @@ export function isSubScript(node): boolean {
     // to be represented as a parent node with 'mq-sup-only' containing a
     // single child with 'mq-sup'.
     return (
-        node.jQ &&
-        (node.jQ.hasClass("mq-sub-only") || node.jQ.hasClass("mq-sub"))
+        mqNodeHasClass(node, "mq-sub-only") || mqNodeHasClass(node, "mq-sub")
     );
 }
 
@@ -75,8 +73,7 @@ export function isSuperScript(node): boolean {
     // to be represented as a parent node with 'mq-sup-only' containing a
     // single child with 'mq-sup'.
     return (
-        node.jQ &&
-        (node.jQ.hasClass("mq-sup-only") || node.jQ.hasClass("mq-sup"))
+        mqNodeHasClass(node, "mq-sup-only") || mqNodeHasClass(node, "mq-sup")
     );
 }
 
@@ -89,29 +86,21 @@ export function isLeaf(node): boolean {
 }
 
 export function isSquareRoot(node): boolean {
-    return (
-        node.blocks &&
-        node.blocks[0].jQ &&
-        node.blocks[0].jQ.hasClass("mq-sqrt-stem")
-    );
+    return node.blocks && mqNodeHasClass(node.blocks[0], "mq-sqrt-stem");
 }
 
 export function isNthRoot(node): boolean {
-    return (
-        node.blocks &&
-        node.blocks[0].jQ &&
-        node.blocks[0].jQ.hasClass("mq-nthroot")
-    );
+    return node.blocks && mqNodeHasClass(node.blocks[0], "mq-nthroot");
 }
 
 export function isNthRootIndex(node): boolean {
-    return node.jQ && node.jQ.hasClass("mq-nthroot");
+    return mqNodeHasClass(node, "mq-nthroot");
 }
 
-export function isInsideLogIndex(cursor: MathFieldCursor): boolean {
+export function isInsideLogIndex(cursor): boolean {
     const grandparent = cursor.parent.parent;
 
-    if (grandparent && grandparent.jQ.hasClass("mq-supsub")) {
+    if (grandparent && mqNodeHasClass(grandparent, "mq-supsub")) {
         const command = maybeFindCommandBeforeParens(grandparent);
 
         if (command && command.name === "\\log") {
@@ -122,7 +111,7 @@ export function isInsideLogIndex(cursor: MathFieldCursor): boolean {
     return false;
 }
 
-export function isInsideEmptyNode(cursor: MathFieldCursor): boolean {
+export function isInsideEmptyNode(cursor): boolean {
     return (
         cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END &&
         cursor[mathQuillInstance.R] === MathFieldActionType.MQ_END
@@ -244,7 +233,7 @@ export function getCursorContext(
     }
 
     // First, try to find any fraction to the right, unimpeded.
-    const cursor = getCursor(mathField);
+    const cursor = mathField.cursor();
     let visitor = cursor;
     while (visitor[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
         if (isFraction(visitor[mathQuillInstance.R])) {