@khanacademy/math-input 4.1.0 → 4.2.0

package/dist/types.d.ts

@@ -61,4 +61,5 @@ export type ActiveNodesObj = {
 export type LayoutProps = {
     initialBounds: Bound;
 };
+export type ClickKeyCallback = (key: Key) => void;
 export {};

package/dist/types.js.flow

@@ -76,3 +76,4 @@ export type ActiveNodesObj = {|
 export type LayoutProps = {|
   initialBounds: Bound,
 |};
+export type ClickKeyCallback = (key: Key) => void;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "4.1.0",
+    "version": "4.2.0",
     "publishConfig": {
         "access": "public"
     },

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

@@ -87,21 +87,17 @@ class MathInput extends React.Component<Props, State> {
     componentDidMount() {
         this._isMounted = true;
 
-        this.mathField = new MathWrapper(
-            this._mathContainer,
-            {},
-            {
-                onCursorMove: (cursor: Cursor) => {
-                    // TODO(charlie): It's not great that there is so much coupling
-                    // between this keypad and the input behavior. We should wrap
-                    // this `MathInput` component in an intermediary component
-                    // that translates accesses on the keypad into vanilla props,
-                    // to make this input keypad-agnostic.
-                    this.props.keypadElement &&
-                        this.props.keypadElement.setCursor(cursor);
-                },
+        this.mathField = new MathWrapper(this._mathContainer, {
+            onCursorMove: (cursor: Cursor) => {
+                // TODO(charlie): It's not great that there is so much coupling
+                // between this keypad and the input behavior. We should wrap
+                // this `MathInput` component in an intermediary component
+                // that translates accesses on the keypad into vanilla props,
+                // to make this input keypad-agnostic.
+                this.props.keypadElement &&
+                    this.props.keypadElement.setCursor(cursor);
             },
-        );
+        });
 
         // NOTE(charlie): MathQuill binds this handler to manage its
         // drag-to-select behavior. For reasons that I can't explain, the event

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

@@ -18,58 +18,30 @@ import $ from "jquery";
 
 import Key from "../../data/keys";
 import {Cursor} from "../../types";
-import keyTranslator from "../key-translator";
+import handleBackspace from "../key-handlers/handle-backspace";
+import keyTranslator from "../key-handlers/key-translator";
 
-import handleArrow from "./key-handlers/handle-arrow";
-import handleBackspace from "./key-handlers/handle-backspace";
-import handleExponent from "./key-handlers/handle-exponent";
-import handleJumpOut from "./key-handlers/handle-jump-out";
 import {
     getCursor,
     contextForCursor,
     maybeFindCommand,
 } from "./mathquill-helpers";
-import MQ from "./mathquill-instance";
+import {createMathField, mathQuillInstance} from "./mathquill-instance";
 import {
     MathFieldInterface,
     MathFieldCursor,
-    MathQuillUpdaterCallback,
+    MathFieldUpdaterCallback,
 } from "./mathquill-types";
 
-function buildNormalFunctionCallback(command: string) {
-    return function (mathField: MathFieldInterface) {
-        mathField.write(`\\${command}\\left(\\right)`);
-        mathField.keystroke("Left");
-    };
-}
-
-const customKeyTranslator: Record<Key, MathQuillUpdaterCallback> = {
+const mobileKeyTranslator: Record<Key, MathFieldUpdaterCallback> = {
     ...keyTranslator,
-    // note(Matthew): in all likelihood, this should be moved
-    // to the shared key2MathQuill translator. During this refactor
-    // I tried to keep logic the same while deduplicating code.
-    // Perseus' Expression MathInput treats this stuff differently
-    // (or doesn't do anything with them at all), so I kept it that way
+    // note(Matthew): our mobile backspace logic is really complicated
+    // and for some reason doesn't really work in the desktop experience.
+    // So we default to the basic backspace functionality in the
+    // key translator and overwrite it with the complicated logic here
+    // until we can unify the experiences (if we even want to).
+    // https://khanacademy.atlassian.net/browse/LC-906
     BACKSPACE: handleBackspace,
-    EXP: handleExponent,
-    EXP_2: handleExponent,
-    EXP_3: handleExponent,
-    FRAC: (mathQuill) => {
-        mathQuill.cmd("\\frac");
-    },
-    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"),
 };
 
 /**
@@ -78,16 +50,18 @@ const customKeyTranslator: Record<Key, MathQuillUpdaterCallback> = {
  * from MathQuill changes.
  */
 class MathWrapper {
-    mathField: MathFieldInterface; // MathQuill input
+    mathField: MathFieldInterface; // MathQuill MathField input
     callbacks: any;
 
-    constructor(element, options = {}, callbacks = {}) {
-        this.mathField = MQ.MathField(element, {
-            // use a span instead of a textarea so that we don't bring up the
-            // native keyboard on mobile when selecting the input
-            substituteTextarea: function () {
-                return document.createElement("span");
-            },
+    constructor(element, callbacks = {}) {
+        this.mathField = createMathField(element, () => {
+            return {
+                // use a span instead of a textarea so that we don't bring up the
+                // native keyboard on mobile when selecting the input
+                substituteTextarea: function () {
+                    return document.createElement("span");
+                },
+            };
         });
         this.callbacks = callbacks;
     }
@@ -119,7 +93,7 @@ class MathWrapper {
      */
     pressKey(key: Key): Cursor {
         const cursor = this.getCursor();
-        const translator = customKeyTranslator[key];
+        const translator = mobileKeyTranslator[key];
 
         if (translator) {
             translator(this.mathField, key);
@@ -173,7 +147,7 @@ class MathWrapper {
                 // Unless that would leave us mid-command, in which case, we
                 // need to adjust and place the cursor inside the parens
                 // following the command.
-                const command = maybeFindCommand(cursor[MQ.L]);
+                const command = maybeFindCommand(cursor[mathQuillInstance.L]);
                 if (command && command.endNode) {
                     // NOTE(charlie): endNode should definitely be \left(.
                     cursor.insLeftOf(command.endNode);

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

@@ -1,5 +1,5 @@
 import {CursorContext} from "./cursor-contexts";
-import MQ from "./mathquill-instance";
+import {mathQuillInstance} from "./mathquill-instance";
 import {
     MathFieldActionType,
     MathFieldCursor,
@@ -126,8 +126,8 @@ export function isInsideLogIndex(cursor: MathFieldCursor): boolean {
 
 export function isInsideEmptyNode(cursor: MathFieldCursor): boolean {
     return (
-        cursor[MQ.L] === MathFieldActionType.MQ_END &&
-        cursor[MQ.R] === MathFieldActionType.MQ_END
+        cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END &&
+        cursor[mathQuillInstance.R] === MathFieldActionType.MQ_END
     );
 }
 
@@ -191,7 +191,7 @@ export function maybeFindCommand(initialNode) {
             break;
         }
 
-        node = node[MQ.L];
+        node = node[mathQuillInstance.L];
     }
 
     // If we hit the start of a command, then grab the rest of it by
@@ -199,7 +199,7 @@ export function maybeFindCommand(initialNode) {
     // with its terminal node.
     if (startNode) {
         // Next, iterate from the start to the right.
-        node = initialNode[MQ.R];
+        node = initialNode[mathQuillInstance.R];
         while (node !== 0) {
             const ctrlSeq = node.ctrlSeq.trim();
             if (commandCharRegex.test(ctrlSeq)) {
@@ -213,7 +213,7 @@ export function maybeFindCommand(initialNode) {
                 break;
             }
 
-            node = node[MQ.R];
+            node = node[mathQuillInstance.R];
         }
         if (validCommands.includes(name)) {
             return {name, startNode, endNode};
@@ -235,19 +235,19 @@ export function maybeFindCommand(initialNode) {
  *                          name (`name`) of the command
  */
 export function maybeFindCommandBeforeParens(leftParenNode) {
-    return maybeFindCommand(leftParenNode[MQ.L]);
+    return maybeFindCommand(leftParenNode[mathQuillInstance.L]);
 }
 
 export function contextForCursor(cursor: MathFieldCursor): CursorContext {
     // First, try to find any fraction to the right, unimpeded.
     let visitor = cursor;
-    while (visitor[MQ.R] !== MathFieldActionType.MQ_END) {
-        if (isFraction(visitor[MQ.R])) {
+    while (visitor[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
+        if (isFraction(visitor[mathQuillInstance.R])) {
             return CursorContext.BEFORE_FRACTION;
-        } else if (!isLeaf(visitor[MQ.R])) {
+        } else if (!isLeaf(visitor[mathQuillInstance.R])) {
             break;
         }
-        visitor = visitor[MQ.R];
+        visitor = visitor[mathQuillInstance.R];
     }
 
     // If that didn't work, check if the parent or grandparent is a special

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

@@ -1,5 +1,60 @@
 import MathQuill from "mathquill";
 
-import {MathQuillInterface} from "./mathquill-types";
+import {MathQuillInterface, MathFieldConfig} from "./mathquill-types";
 
-export default MathQuill.getInterface(2) as MathQuillInterface;
+// We only need one MathQuill instance (referred to as MQ in the docs)
+// and that contains some MQ constants and the MathField constructor
+export const mathQuillInstance = MathQuill.getInterface(
+    2,
+) as MathQuillInterface;
+
+function createBaseConfig(): MathFieldConfig {
+    return {
+        // LaTeX commands that, when typed, are immediately replaced by the
+        // appropriate symbol. This does not include ln, log, or any of the
+        // trig functions; those are always interpreted as commands.
+        autoCommands: "pi theta phi sqrt nthroot",
+
+        // Pop the cursor out of super/subscripts on arithmetic operators
+        // or (in)equalities.
+        charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
+
+        // Prevent excessive super/subscripts or fractions from being
+        // created without operands, e.g. when somebody holds down a key
+        supSubsRequireOperand: true,
+
+        // The name of this option is somewhat misleading, as tabbing in
+        // MathQuill breaks you out of a nested context (fraction/script)
+        // if you're in one, but moves focus to the next input if you're
+        // not. Spaces (with this option enabled) are just ignored in the
+        // latter case.
+        //
+        // TODO(alex): In order to allow inputting mixed numbers, we will
+        // have to accept spaces in certain cases. The desired behavior is
+        // still to escape nested contexts if currently in one, but to
+        // insert a space if not (we don't expect mixed numbers in nested
+        // contexts). We should also limit to one consecutive space.
+        spaceBehavesLikeTab: true,
+    };
+}
+
+/**
+ * Creates a new [MathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)
+ * instance within the given `container`.
+ *
+ * An optional configuration callback can be provided to customize
+ * the created MathField. A default configuration is passed to this
+ * callback which can then be adjusted as needed. The configuration
+ * returned from this callback is used to create the MathField.
+ * This allows callers to do minimal configuration as only configs
+ * that vary from the default need to be provided.
+ */
+export function createMathField(
+    container: HTMLDivElement | HTMLSpanElement,
+    configCallback?: (baseConfig: MathFieldConfig) => MathFieldConfig,
+) {
+    const baseConfig = createBaseConfig();
+    const config = configCallback ? configCallback(baseConfig) : baseConfig;
+
+    return mathQuillInstance.MathField(container, config);
+}

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

@@ -3,22 +3,52 @@ import Key from "../../data/keys";
 export interface MathQuillInterface {
     L: "L";
     R: "R";
-    MathField: (mount: HTMLDivElement, options: any) => MathFieldInterface;
+    MathField: (
+        mount: HTMLDivElement | HTMLSpanElement,
+        config: MathFieldConfig,
+    ) => MathFieldInterface;
 }
 
+type MathQuillDir = "L" | "R";
+
+export type MathFieldConfig = {
+    spaceBehavesLikeTab?: boolean;
+    leftRightIntoCmdGoes?: string;
+    restrictMismatchedBrackets?: boolean;
+    sumStartsWithNEquals?: boolean;
+    supSubsRequireOperand?: boolean;
+    charsThatBreakOutOfSupSub?: string;
+    autoSubscriptNumerals?: boolean;
+    autoCommands?: string;
+    autoOperatorNames?: string;
+    maxDepth?: number;
+    substituteTextarea?: () => HTMLElement;
+    handlers?: {
+        edit?: (mathField: MathFieldInterface) => void;
+        upOutOf?: (mathField: MathFieldInterface) => void;
+        moveOutOf?: (dir: MathQuillDir, mathField: MathFieldInterface) => void;
+    };
+};
+
 export interface MathFieldInterface {
+    // Puts the focus on the editable field.
+    // http://docs.mathquill.com/en/latest/Api_Methods/#focus
+    focus: () => MathFieldInterface;
+    // Removes focus from the editable field.
+    // http://docs.mathquill.com/en/latest/Api_Methods/#blur
+    blur: () => MathFieldInterface;
     // Write LaTeX
     // https://docs.mathquill.com/en/latest/Api_Methods/#writelatex_string
-    write: (input: string) => void;
+    write: (input: string) => MathFieldInterface;
     // Enter a LaTeX command
     // https://docs.mathquill.com/en/latest/Api_Methods/#cmdlatex_string
-    cmd: (input: string) => void;
+    cmd: (input: string) => MathFieldInterface;
     // Simulates keystrokes given a string like "Ctrl-Home Del"
     // https://docs.mathquill.com/en/latest/Api_Methods/#keystrokekeys
-    keystroke: (input: string) => void;
+    keystroke: (input: string) => MathFieldInterface;
     // Simulates typing text, one character at a time
     // https://docs.mathquill.com/en/latest/Api_Methods/#typedtexttext
-    typedText: (input: string) => void;
+    typedText: (input: string) => MathFieldInterface;
     // () => {}: Gets the contents as LaTeX
     // (string) => {}: Sets the contents as LaTeX
     // https://docs.mathquill.com/en/latest/Api_Methods/#latex
@@ -49,7 +79,7 @@ export enum MathFieldActionType {
 // we reach into the internals to get it
 export type MathFieldCursor = any;
 
-export type MathQuillUpdaterCallback = (
-    mathQuill: MathFieldInterface,
+export type MathFieldUpdaterCallback = (
+    mathField: MathFieldInterface,
     key: Key,
 ) => void;

package/src/components/{input/key-handlers → key-handlers}/handle-arrow.ts

@@ -1,15 +1,15 @@
-import Key from "../../../data/keys";
+import Key from "../../data/keys";
 import {
     maybeFindCommand,
     maybeFindCommandBeforeParens,
     getCursor,
-} from "../mathquill-helpers";
-import MQ from "../mathquill-instance";
+} from "../input/mathquill-helpers";
+import {mathQuillInstance} from "../input/mathquill-instance";
 import {
     MathFieldInterface,
     MathFieldActionType,
     MathFieldCursor,
-} from "../mathquill-types";
+} from "../input/mathquill-types";
 
 function handleLeftArrow(
     mathField: MathFieldInterface,
@@ -25,7 +25,7 @@ function handleLeftArrow(
     // the ActionType.MQ_END node, that our grandparent is the left parenthesis, and
     // the nodes to the left of our grandparent comprise a valid function
     // name.
-    if (cursor[MQ.L] === MathFieldActionType.MQ_END) {
+    if (cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END) {
         const parent = cursor.parent;
         const grandparent = parent.parent;
         if (grandparent.ctrlSeq === "\\left(") {
@@ -45,7 +45,7 @@ function handleRightArrow(
     mathField: MathFieldInterface,
     cursor: MathFieldCursor,
 ) {
-    const command = maybeFindCommand(cursor[MQ.R]);
+    const command = maybeFindCommand(cursor[mathQuillInstance.R]);
     if (command) {
         // Similarly, if a function is to our right, then we need to place
         // the cursor at the start of its parenthetical content, which is

package/src/components/{input/key-handlers → key-handlers}/handle-backspace.ts

@@ -8,19 +8,20 @@ import {
     selectNode,
     getCursor,
     maybeFindCommandBeforeParens,
-} from "../mathquill-helpers";
-import MQ from "../mathquill-instance";
+} from "../input/mathquill-helpers";
+import {mathQuillInstance} from "../input/mathquill-instance";
 import {
     MathFieldActionType,
     MathFieldInterface,
     MathFieldCursor,
-} from "../mathquill-types";
+} from "../input/mathquill-types";
 
 function handleBackspaceInNthRoot(
     mathField: MathFieldInterface,
     cursor: MathFieldCursor,
 ) {
-    const isAtLeftEnd = cursor[MQ.L] === MathFieldActionType.MQ_END;
+    const isAtLeftEnd =
+        cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END;
 
     const isRootEmpty = isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
 
@@ -46,7 +47,7 @@ function handleBackspaceInRootIndex(
 
         const grandparent = cursor.parent.parent;
         const latex = grandparent.latex();
-        const reinsertionPoint = grandparent[MQ.L];
+        const reinsertionPoint = grandparent[mathQuillInstance.L];
 
         selectNode(grandparent, cursor);
 
@@ -68,13 +69,13 @@ function handleBackspaceInRootIndex(
 
             // Adjust the cursor to be to the left the sqrt.
             if (reinsertionPoint === MathFieldActionType.MQ_END) {
-                mathField.moveToDirEnd(MQ.L);
+                mathField.moveToDirEnd(mathQuillInstance.L);
             } else {
                 cursor.insRightOf(reinsertionPoint);
             }
         }
     } else {
-        if (cursor[MQ.L] !== MathFieldActionType.MQ_END) {
+        if (cursor[mathQuillInstance.L] !== MathFieldActionType.MQ_END) {
             // If the cursor is not at the leftmost position inside the
             // root's index, delete a character.
             mathField.keystroke("Backspace");
@@ -97,8 +98,8 @@ function handleBackspaceInLogIndex(
         cursor.insLeftOf(command?.startNode);
         cursor.startSelection();
 
-        if (grandparent[MQ.R] !== MathFieldActionType.MQ_END) {
-            cursor.insRightOf(grandparent[MQ.R]);
+        if (grandparent[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
+            cursor.insRightOf(grandparent[mathQuillInstance.R]);
         } else {
             cursor.insRightOf(grandparent);
         }
@@ -106,7 +107,8 @@ function handleBackspaceInLogIndex(
         cursor.select();
         cursor.endSelection();
 
-        const isLogBodyEmpty = grandparent[MQ.R].contentjQ.text() === "";
+        const isLogBodyEmpty =
+            grandparent[mathQuillInstance.R].contentjQ.text() === "";
 
         if (isLogBodyEmpty) {
             // If there's no content inside the log's parens then delete the
@@ -127,8 +129,8 @@ function handleBackspaceOutsideParens(cursor: MathFieldCursor) {
     // (x+1)| => |(x+1)|
     // \log(x+1)| => |\log(x+1)|
 
-    const leftNode = cursor[MQ.L];
-    const rightNode = cursor[MQ.R];
+    const leftNode = cursor[mathQuillInstance.L];
+    const rightNode = cursor[mathQuillInstance.R];
     const command = maybeFindCommandBeforeParens(leftNode);
 
     if (command && command.startNode) {
@@ -179,7 +181,7 @@ function handleBackspaceInsideParens(
     // - \log(|x+1) => |\log(x+1)|
     // - \log(|) => |
 
-    if (cursor[MQ.L] !== MathFieldActionType.MQ_END) {
+    if (cursor[mathQuillInstance.L] !== MathFieldActionType.MQ_END) {
         // This command contains math and there's some math to
         // the left of the cursor that we should delete normally
         // before doing anything special.
@@ -193,12 +195,12 @@ function handleBackspaceInsideParens(
     // has a subscript as is the case in log_n then move the cursor into
     // the subscript, e.g. \log_{5}(|x+1) => \log_{5|}(x+1)
 
-    if (grandparent[MQ.L].sub) {
+    if (grandparent[mathQuillInstance.L].sub) {
         // if there is a subscript
-        if (grandparent[MQ.L].sub.jQ.text()) {
+        if (grandparent[mathQuillInstance.L].sub.jQ.text()) {
             // and it contains text
             // move the cursor to the right end of the subscript
-            cursor.insAtRightEnd(grandparent[MQ.L].sub);
+            cursor.insAtRightEnd(grandparent[mathQuillInstance.L].sub);
             return;
         }
     }
@@ -238,7 +240,7 @@ function handleBackspace(mathField: MathFieldInterface) {
     if (!cursor.selection) {
         const parent = cursor.parent;
         const grandparent = parent.parent;
-        const leftNode = cursor[MQ.L];
+        const leftNode = cursor[mathQuillInstance.L];
 
         if (isFraction(leftNode)) {
             selectNode(leftNode, cursor);

package/src/components/{input/key-handlers → key-handlers}/handle-exponent.ts

@@ -1,7 +1,10 @@
-import Key from "../../../data/keys";
-import {getCursor} from "../mathquill-helpers";
-import MQ from "../mathquill-instance";
-import {MathFieldInterface, MathFieldActionType} from "../mathquill-types";
+import Key from "../../data/keys";
+import {getCursor} from "../input/mathquill-helpers";
+import {mathQuillInstance} from "../input/mathquill-instance";
+import {
+    MathFieldInterface,
+    MathFieldActionType,
+} from "../input/mathquill-types";
 
 const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
 const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
@@ -16,7 +19,7 @@ export default function handleExponent(
     // parentheses and apply the exponent to that.
     const invalidPrefixes = [...ArithmeticOperators, ...EqualityOperators];
 
-    const precedingNode = cursor[MQ.L];
+    const precedingNode = cursor[mathQuillInstance.L];
     const shouldPrefixWithParens =
         precedingNode === MathFieldActionType.MQ_END ||
         invalidPrefixes.includes(precedingNode.ctrlSeq.trim());

package/src/components/{input/key-handlers → key-handlers}/handle-jump-out.ts

@@ -1,13 +1,16 @@
-import Key from "../../../data/keys";
-import {CursorContext} from "../cursor-contexts";
+import Key from "../../data/keys";
+import {CursorContext} from "../input/cursor-contexts";
 import {
     isFraction,
     isParens,
     contextForCursor,
     getCursor,
-} from "../mathquill-helpers";
-import MQ from "../mathquill-instance";
-import {MathFieldInterface, MathFieldActionType} from "../mathquill-types";
+} from "../input/mathquill-helpers";
+import {mathQuillInstance} from "../input/mathquill-instance";
+import {
+    MathFieldInterface,
+    MathFieldActionType,
+} from "../input/mathquill-types";
 
 const KeysForJumpContext = {
     [CursorContext.IN_PARENS]: "JUMP_OUT_PARENTHESES",
@@ -46,11 +49,13 @@ function handleJumpOut(mathField: MathFieldInterface, key: Key): void {
             // Find the nearest fraction to the right of the cursor.
             let fractionNode;
             let visitor = cursor;
-            while (visitor[MQ.R] !== MathFieldActionType.MQ_END) {
-                if (isFraction(visitor[MQ.R])) {
-                    fractionNode = visitor[MQ.R];
+            while (
+                visitor[mathQuillInstance.R] !== MathFieldActionType.MQ_END
+            ) {
+                if (isFraction(visitor[mathQuillInstance.R])) {
+                    fractionNode = visitor[mathQuillInstance.R];
                 }
-                visitor = visitor[MQ.R];
+                visitor = visitor[mathQuillInstance.R];
             }
 
             // Jump into it!
@@ -82,7 +87,7 @@ function handleJumpOut(mathField: MathFieldInterface, key: Key): void {
             // Navigate right once more, if we're right before parens. This
             // is to handle the standard case in which the subscript is the
             // base of a custom log.
-            if (isParens(cursor[MQ.R])) {
+            if (isParens(cursor[mathQuillInstance.R])) {
                 mathField.keystroke("Right");
             }
             break;