@khanacademy/math-input 2.0.0 → 4.0.0

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

@@ -0,0 +1,70 @@
+import Key from "../../../data/keys";
+import {
+    maybeFindCommand,
+    maybeFindCommandBeforeParens,
+    getCursor,
+} from "../mathquill-helpers";
+import MQ from "../mathquill-instance";
+import {
+    MathFieldInterface,
+    MathFieldActionType,
+    MathFieldCursor,
+} from "../mathquill-types";
+
+function handleLeftArrow(
+    mathField: MathFieldInterface,
+    cursor: MathFieldCursor,
+) {
+    // If we're inside a function, and just after the left parentheses, we
+    // need to skip the entire function name, rather than move the cursor
+    // inside of it. For example, when hitting left from within the
+    // parentheses in `cos()`, we want to place the cursor to the left of
+    // the entire expression, rather than between the `s` and the left
+    // parenthesis.
+    // From the cursor's perspective, this requires that our left node is
+    // 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) {
+        const parent = cursor.parent;
+        const grandparent = parent.parent;
+        if (grandparent.ctrlSeq === "\\left(") {
+            const command = maybeFindCommandBeforeParens(grandparent);
+            if (command) {
+                cursor.insLeftOf(command.startNode);
+                return;
+            }
+        }
+    }
+
+    // Otherwise, we default to the standard MathQull left behavior.
+    mathField.keystroke("Left");
+}
+
+function handleRightArrow(
+    mathField: MathFieldInterface,
+    cursor: MathFieldCursor,
+) {
+    const command = maybeFindCommand(cursor[MQ.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
+        // done by putting it to the left of ites parentheses and then
+        // moving right once.
+        cursor.insLeftOf(command.endNode);
+        mathField.keystroke("Right");
+    } else {
+        // Otherwise, we default to the standard MathQull right behavior.
+        mathField.keystroke("Right");
+    }
+}
+
+export default function handleArrow(mathField: MathFieldInterface, key: Key) {
+    const cursor = getCursor(mathField);
+
+    if (key === "LEFT") {
+        handleLeftArrow(mathField, cursor);
+    } else if (key === "RIGHT") {
+        handleRightArrow(mathField, cursor);
+    }
+}

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

@@ -0,0 +1,275 @@
+import {
+    isFraction,
+    isSquareRoot,
+    isNthRoot,
+    isNthRootIndex,
+    isInsideLogIndex,
+    isInsideEmptyNode,
+    selectNode,
+    getCursor,
+    maybeFindCommandBeforeParens,
+} from "../mathquill-helpers";
+import MQ from "../mathquill-instance";
+import {
+    MathFieldActionType,
+    MathFieldInterface,
+    MathFieldCursor,
+} from "../mathquill-types";
+
+function handleBackspaceInNthRoot(
+    mathField: MathFieldInterface,
+    cursor: MathFieldCursor,
+) {
+    const isAtLeftEnd = cursor[MQ.L] === MathFieldActionType.MQ_END;
+
+    const isRootEmpty = isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
+
+    if (isAtLeftEnd) {
+        selectNode(cursor.parent.parent, cursor);
+
+        if (isRootEmpty) {
+            mathField.keystroke("Backspace");
+        }
+    } else {
+        mathField.keystroke("Backspace");
+    }
+}
+
+function handleBackspaceInRootIndex(
+    mathField: MathFieldInterface,
+    cursor: MathFieldCursor,
+) {
+    if (isInsideEmptyNode(cursor)) {
+        // When deleting the index in a nthroot, we change from the nthroot
+        // to a sqrt, e.g. \sqrt[|]{35x-5} => |\sqrt{35x-5}.  If there's no
+        // content under the root, then we delete the whole thing.
+
+        const grandparent = cursor.parent.parent;
+        const latex = grandparent.latex();
+        const reinsertionPoint = grandparent[MQ.L];
+
+        selectNode(grandparent, cursor);
+
+        const rootIsEmpty = grandparent.blocks[1].jQ.text() === "";
+
+        if (rootIsEmpty) {
+            // If there is not content under the root then simply delete
+            // the whole thing.
+            mathField.keystroke("Backspace");
+        } else {
+            // Replace the nthroot with a sqrt if there was content under
+            // the root.
+
+            // Start by deleting the selection.
+            mathField.keystroke("Backspace");
+
+            // Replace the nth-root with a sqrt.
+            mathField.write(latex.replace(/^\\sqrt\[\]/, "\\sqrt"));
+
+            // Adjust the cursor to be to the left the sqrt.
+            if (reinsertionPoint === MathFieldActionType.MQ_END) {
+                mathField.moveToDirEnd(MQ.L);
+            } else {
+                cursor.insRightOf(reinsertionPoint);
+            }
+        }
+    } else {
+        if (cursor[MQ.L] !== MathFieldActionType.MQ_END) {
+            // If the cursor is not at the leftmost position inside the
+            // root's index, delete a character.
+            mathField.keystroke("Backspace");
+        } else {
+            // TODO(kevinb) verify that we want this behavior after testing
+            // Do nothing because we haven't completely deleted the
+            // index of the radical.
+        }
+    }
+}
+
+function handleBackspaceInLogIndex(
+    mathField: MathFieldInterface,
+    cursor: MathFieldCursor,
+) {
+    if (isInsideEmptyNode(cursor)) {
+        const grandparent = cursor.parent.parent;
+        const command = maybeFindCommandBeforeParens(grandparent);
+
+        cursor.insLeftOf(command?.startNode);
+        cursor.startSelection();
+
+        if (grandparent[MQ.R] !== MathFieldActionType.MQ_END) {
+            cursor.insRightOf(grandparent[MQ.R]);
+        } else {
+            cursor.insRightOf(grandparent);
+        }
+
+        cursor.select();
+        cursor.endSelection();
+
+        const isLogBodyEmpty = grandparent[MQ.R].contentjQ.text() === "";
+
+        if (isLogBodyEmpty) {
+            // If there's no content inside the log's parens then delete the
+            // whole thing.
+            mathField.keystroke("Backspace");
+        }
+    } else {
+        mathField.keystroke("Backspace");
+    }
+}
+
+function handleBackspaceOutsideParens(cursor: MathFieldCursor) {
+    // In this case the node with '\\left(' for its ctrlSeq
+    // is the parent of the expression contained within the
+    // parentheses.
+    //
+    // Handle selecting an expression before deleting:
+    // (x+1)| => |(x+1)|
+    // \log(x+1)| => |\log(x+1)|
+
+    const leftNode = cursor[MQ.L];
+    const rightNode = cursor[MQ.R];
+    const command = maybeFindCommandBeforeParens(leftNode);
+
+    if (command && command.startNode) {
+        // There's a command before the parens so we select it as well as
+        // the parens.
+        cursor.insLeftOf(command.startNode);
+        cursor.startSelection();
+        if (rightNode === MathFieldActionType.MQ_END) {
+            cursor.insAtRightEnd(cursor.parent);
+        } else {
+            cursor.insLeftOf(rightNode);
+        }
+        cursor.select();
+        cursor.endSelection();
+    } else {
+        cursor.startSelection();
+        cursor.insLeftOf(leftNode); // left of \\left(
+        cursor.select();
+        cursor.endSelection();
+    }
+}
+
+function handleBackspaceInsideParens(
+    mathField: MathFieldInterface,
+    cursor: MathFieldCursor,
+) {
+    // Handle situations when the cursor is inside parens or a
+    // command that uses parens, e.g. \log() or \tan()
+    //
+    // MathQuill represents log(x+1) in roughly the following way
+    // [l, o, g, \\left[parent:[x, +, 1]]]
+    //
+    // If the cursor is inside the parentheses it's next to one of:
+    // x, +, or 1.  This makes sub_sub_expr its parent and sub_expr
+    // it's parent.
+    //
+    // Interestingly parent doesn't have any nodes to the left or
+    // right of it (even though the corresponding DOM node has
+    // ( and ) characters on either side.
+    //
+    // The grandparent's ctrlSeq is `\\left(`. The `\\right)` isn't
+    // stored anywhere.  NOTE(kevinb): I believe this is because
+    // MathQuill knows what the close paren should be and does the
+    // right thing at render time.
+    //
+    // This conditional branch handles the following cases:
+    // - \log(x+1|) => \log(x+|)
+    // - \log(|x+1) => |\log(x+1)|
+    // - \log(|) => |
+
+    if (cursor[MQ.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.
+        mathField.keystroke("Backspace");
+        return;
+    }
+
+    const grandparent = cursor.parent.parent;
+
+    // If the cursors is inside the parens at the start but the command
+    // 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 there is a subscript
+        if (grandparent[MQ.L].sub.jQ.text()) {
+            // and it contains text
+            // move the cursor to the right end of the subscript
+            cursor.insAtRightEnd(grandparent[MQ.L].sub);
+            return;
+        }
+    }
+
+    // Determine if the parens are empty before we modify the
+    // cursor's position.
+    const isEmpty = isInsideEmptyNode(cursor);
+
+    // Insert the cursor to the left of the command if there is one
+    // or before the '\\left(` if there isn't
+    const command = maybeFindCommandBeforeParens(grandparent);
+
+    cursor.insLeftOf((command && command.startNode) || grandparent);
+    cursor.startSelection();
+    cursor.insRightOf(grandparent);
+    cursor.select();
+    cursor.endSelection();
+
+    // Delete the selection, but only if the parens were empty to
+    // begin with.
+    if (isEmpty) {
+        mathField.keystroke("Backspace");
+    }
+}
+
+function handleBackspaceAfterLigaturedSymbol(mathField: MathFieldInterface) {
+    mathField.keystroke("Backspace");
+    mathField.keystroke("Backspace");
+}
+
+/**
+ * Selects and deletes part of the expression based on the cursor location.
+ * See inline comments for precise behavior of different cases.
+ */
+function handleBackspace(mathField: MathFieldInterface) {
+    const cursor = getCursor(mathField);
+    if (!cursor.selection) {
+        const parent = cursor.parent;
+        const grandparent = parent.parent;
+        const leftNode = cursor[MQ.L];
+
+        if (isFraction(leftNode)) {
+            selectNode(leftNode, cursor);
+        } else if (isSquareRoot(leftNode)) {
+            selectNode(leftNode, cursor);
+        } else if (isNthRoot(leftNode)) {
+            selectNode(leftNode, cursor);
+        } else if (isNthRootIndex(parent)) {
+            handleBackspaceInRootIndex(mathField, cursor);
+        } else if (leftNode.ctrlSeq === "\\left(") {
+            handleBackspaceOutsideParens(cursor);
+        } else if (grandparent.ctrlSeq === "\\left(") {
+            handleBackspaceInsideParens(mathField, cursor);
+        } else if (isInsideLogIndex(cursor)) {
+            handleBackspaceInLogIndex(mathField, cursor);
+        } else if (
+            leftNode.ctrlSeq === "\\ge " ||
+            leftNode.ctrlSeq === "\\le "
+        ) {
+            handleBackspaceAfterLigaturedSymbol(mathField);
+        } else if (
+            isNthRoot(grandparent) &&
+            leftNode === MathFieldActionType.MQ_END
+        ) {
+            handleBackspaceInNthRoot(mathField, cursor);
+        } else {
+            mathField.keystroke("Backspace");
+        }
+    } else {
+        mathField.keystroke("Backspace");
+    }
+}
+
+export default handleBackspace;

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

@@ -0,0 +1,52 @@
+import Key from "../../../data/keys";
+import {getCursor} from "../mathquill-helpers";
+import MQ from "../mathquill-instance";
+import {MathFieldInterface, MathFieldActionType} from "../mathquill-types";
+
+const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
+const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
+
+export default function handleExponent(
+    mathField: MathFieldInterface,
+    key: Key,
+) {
+    const cursor = getCursor(mathField);
+    // If there's an invalid operator preceding the cursor (anything that
+    // knowingly cannot be raised to a power), add an empty set of
+    // parentheses and apply the exponent to that.
+    const invalidPrefixes = [...ArithmeticOperators, ...EqualityOperators];
+
+    const precedingNode = cursor[MQ.L];
+    const shouldPrefixWithParens =
+        precedingNode === MathFieldActionType.MQ_END ||
+        invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
+    if (shouldPrefixWithParens) {
+        mathField.write("\\left(\\right)");
+    }
+
+    // Insert the appropriate exponent operator.
+    switch (key) {
+        case "EXP":
+            mathField.cmd("^");
+            break;
+
+        case "EXP_2":
+        case "EXP_3":
+            mathField.write(`^${key === "EXP_2" ? 2 : 3}`);
+
+            // If we enter a square or a cube, we should leave the cursor
+            // within the newly inserted parens, if they exist. This takes
+            // exactly four left strokes, since the cursor by default would
+            // end up to the right of the exponent.
+            if (shouldPrefixWithParens) {
+                mathField.keystroke("Left");
+                mathField.keystroke("Left");
+                mathField.keystroke("Left");
+                mathField.keystroke("Left");
+            }
+            break;
+
+        default:
+            throw new Error(`Invalid exponent key: ${key}`);
+    }
+}

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

@@ -0,0 +1,103 @@
+import Key from "../../../data/keys";
+import {CursorContext} from "../cursor-contexts";
+import {
+    isFraction,
+    isParens,
+    contextForCursor,
+    getCursor,
+} from "../mathquill-helpers";
+import MQ from "../mathquill-instance";
+import {MathFieldInterface, MathFieldActionType} from "../mathquill-types";
+
+const KeysForJumpContext = {
+    [CursorContext.IN_PARENS]: "JUMP_OUT_PARENTHESES",
+    [CursorContext.IN_SUPER_SCRIPT]: "JUMP_OUT_EXPONENT",
+    [CursorContext.IN_SUB_SCRIPT]: "JUMP_OUT_BASE",
+    [CursorContext.BEFORE_FRACTION]: "JUMP_INTO_NUMERATOR",
+    [CursorContext.IN_NUMERATOR]: "JUMP_OUT_NUMERATOR",
+    [CursorContext.IN_DENOMINATOR]: "JUMP_OUT_DENOMINATOR",
+};
+
+/**
+ * Advances the cursor to the next logical position.
+ */
+function handleJumpOut(mathField: MathFieldInterface, key: Key): void {
+    const cursor = getCursor(mathField);
+    const context = contextForCursor(cursor);
+
+    // Validate that the current cursor context matches the key's intent.
+    if (KeysForJumpContext[context] !== key) {
+        // If we don't have a valid cursor context, yet the user was able
+        // to trigger a jump-out key, that's a broken invariant. Rather
+        // than throw an error (which would kick the user out of the
+        // exercise), we do nothing, as a fallback strategy. The user can
+        // still move the cursor manually.
+        return;
+    }
+
+    switch (context) {
+        case CursorContext.IN_PARENS:
+            // Insert at the end of the parentheses, and then navigate right
+            // once more to get 'beyond' the parentheses.
+            cursor.insRightOf(cursor.parent.parent);
+            break;
+
+        case CursorContext.BEFORE_FRACTION:
+            // 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];
+                }
+                visitor = visitor[MQ.R];
+            }
+
+            // Jump into it!
+            cursor.insLeftOf(fractionNode);
+            mathField.keystroke("Right");
+            break;
+
+        case CursorContext.IN_NUMERATOR:
+            // HACK(charlie): I can't find a better way to do this. The goal
+            // is to place the cursor at the start of the matching
+            // denominator. So, we identify the appropriate node, and
+            // continue rightwards until we find ourselves inside of it.
+            // It's possible that there are cases in which we don't reach
+            // the denominator, though I can't think of any.
+            const siblingDenominator = cursor.parent.parent.blocks[1];
+            while (cursor.parent !== siblingDenominator) {
+                mathField.keystroke("Right");
+            }
+            break;
+
+        case CursorContext.IN_DENOMINATOR:
+            cursor.insRightOf(cursor.parent.parent);
+            break;
+
+        case CursorContext.IN_SUB_SCRIPT:
+            // Insert just beyond the superscript.
+            cursor.insRightOf(cursor.parent.parent);
+
+            // 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])) {
+                mathField.keystroke("Right");
+            }
+            break;
+
+        case CursorContext.IN_SUPER_SCRIPT:
+            // Insert just beyond the superscript.
+            cursor.insRightOf(cursor.parent.parent);
+            break;
+
+        default:
+            throw new Error(
+                `Attempted to 'Jump Out' from node, but found no ` +
+                    `appropriate cursor context: ${context}`,
+            );
+    }
+}
+
+export default handleJumpOut;

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

@@ -5,7 +5,6 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-import Keys from "../../data/keys";
 import {View} from "../../fake-react-native-web/index";
 import {
     cursorHandleRadiusPx,
@@ -13,7 +12,7 @@ import {
     wonderBlocksBlue,
     offBlack,
 } from "../common-style";
-import ProvidedKeypad from "../provided-keypad";
+import ProvidedKeypad from "../keypad-legacy/provided-keypad";
 
 import CursorHandle from "./cursor-handle";
 import DragListener from "./drag-listener";
@@ -783,16 +782,16 @@ class MathInput extends React.Component<Props, State> {
         key,
     ) => {
         const keyMap = {
-            "+": Keys.PLUS,
-            "-": Keys.MINUS,
-            "*": Keys.TIMES,
-            "/": Keys.DIVIDE,
-            ".": Keys.DECIMAL,
-            "%": Keys.PERCENT,
-            "=": Keys.EQUAL,
-            ">": Keys.GT,
-            "<": Keys.LT,
-            "^": Keys.EXP,
+            "+": "PLUS",
+            "-": "MINUS",
+            "*": "TIMES",
+            "/": "DIVIDE",
+            ".": "DECIMAL",
+            "%": "PERCENT",
+            "=": "EQUAL",
+            ">": "GT",
+            "<": "LT",
+            "^": "EXP",
         } as const;
 
         // Numbers
@@ -802,7 +801,7 @@ class MathInput extends React.Component<Props, State> {
 
         // Movement keys
         else if (key === "Backspace") {
-            return Keys.BACKSPACE;
+            return "BACKSPACE";
         }
 
         // Operators