@khanacademy/math-input 4.1.0 → 4.2.0

package/dist/index.js

@@ -401,274 +401,52 @@ class DragListener {
   }
 }
 
-/**
- * Constants that are shared between multiple files.
- */
-
-let KeypadType = /*#__PURE__*/function (KeypadType) {
-  KeypadType["FRACTION"] = "FRACTION";
-  KeypadType["EXPRESSION"] = "EXPRESSION";
-  return KeypadType;
-}({});
-const KeyTypes = ["EMPTY",
-// For numerals, variables, and any other characters that themselves
-// compose 'values'.
-"VALUE",
-// For buttons that insert or adjust math in an input.
-"OPERATOR",
-// For buttons that move the cursor in an input (including via
-// deletion).
-"INPUT_NAVIGATION",
-// For buttons that modify the broader keypad state (e.g., by changing
-// the visible pane).
-"KEYPAD_NAVIGATION",
-// For buttons that house multiple buttons and have no action
-// themselves.
-"MANY",
-// For the echo animation that appears on press.
-"ECHO"];
-let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
-  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
-  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
-  return DeviceOrientation;
-}({});
-let DeviceType = /*#__PURE__*/function (DeviceType) {
-  DeviceType["PHONE"] = "PHONE";
-  DeviceType["TABLET"] = "TABLET";
-  return DeviceType;
-}({});
-let LayoutMode = /*#__PURE__*/function (LayoutMode) {
-  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
-  LayoutMode["COMPACT"] = "COMPACT";
-  return LayoutMode;
-}({});
-let BorderDirection = /*#__PURE__*/function (BorderDirection) {
-  BorderDirection["LEFT"] = "LEFT";
-  BorderDirection["BOTTOM"] = "BOTTOM";
-  return BorderDirection;
-}({});
-const BorderStyles = {
-  LEFT: [BorderDirection.LEFT],
-  BOTTOM: [BorderDirection.BOTTOM],
-  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
-  NONE: []
-};
-let IconType = /*#__PURE__*/function (IconType) {
-  IconType["MATH"] = "MATH";
-  IconType["SVG"] = "SVG";
-  IconType["TEXT"] = "TEXT";
-  return IconType;
-}({});
-let DecimalSeparator = /*#__PURE__*/function (DecimalSeparator) {
-  DecimalSeparator["COMMA"] = "COMMA";
-  DecimalSeparator["PERIOD"] = "PERIOD";
-  return DecimalSeparator;
-}({});
-let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
-  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
-  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
-  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
-  return EchoAnimationType;
-}({});
-
-// NOTES(kevinb):
-// - In order to get the correct decimal separator for the current locale,
-//   the locale must bet set using `setLocale(kaLocale)` which can be
-//   imported from wonder-blocks-i18n.
-// - Some languages/locales use different decimal separators than the ones
-//   listed here.  Much of the Arab world uses U+066C.
-const decimalSeparator = i18n.getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
-
-var MQ = MathQuill__default["default"].getInterface(2);
-
-var ActionType = /*#__PURE__*/function (ActionType) {
-  ActionType["WRITE"] = "write";
-  ActionType["CMD"] = "cmd";
-  ActionType["KEYSTROKE"] = "keystroke";
-  ActionType[ActionType["MQ_END"] = 0] = "MQ_END";
-  return ActionType;
-}(ActionType || {});
-const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
-function buildGenericCallback(str) {
-  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ActionType.WRITE;
-  return function (mathQuill) {
-    switch (type) {
-      case ActionType.WRITE:
-        {
-          mathQuill.write(str);
-          return;
-        }
-      case ActionType.CMD:
-        {
-          mathQuill.cmd(str);
-          return;
-        }
-      case ActionType.KEYSTROKE:
-        {
-          mathQuill.keystroke(str);
-          return;
-        }
-    }
+// We only need one MathQuill instance (referred to as MQ in the docs)
+// and that contains some MQ constants and the MathField constructor
+const mathQuillInstance = MathQuill__default["default"].getInterface(2);
+function createBaseConfig() {
+  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
   };
 }
-const keyToMathquillMap = {
-  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("-"),
-  NEQ: buildGenericCallback("\\neq"),
-  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),
-  LEFT_PAREN: buildGenericCallback("(", ActionType.CMD),
-  RIGHT_PAREN: buildGenericCallback(")", ActionType.CMD),
-  SQRT: buildGenericCallback("sqrt", ActionType.CMD),
-  PHI: buildGenericCallback("\\phi", ActionType.CMD),
-  PI: buildGenericCallback("pi", ActionType.CMD),
-  THETA: buildGenericCallback("theta", ActionType.CMD),
-  RADICAL: buildGenericCallback("nthroot", ActionType.CMD),
-  UP: buildGenericCallback("Up", ActionType.KEYSTROKE),
-  DOWN: buildGenericCallback("Down", ActionType.KEYSTROKE),
-  CUBE_ROOT: mathQuill => {
-    mathQuill.write("\\sqrt[3]{}");
-    mathQuill.keystroke("Left"); // under the root
-  },
-
-  FRAC_EXCLUSIVE: mathQuill => {
-    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;
-    mathQuill.cmd("\\frac");
-    if (shouldNavigateLeft) {
-      mathQuill.keystroke("Left");
-    }
-  },
-  LOG_B: mathQuill => {
-    mathQuill.typedText("log_");
-    mathQuill.keystroke("Right");
-    mathQuill.typedText("(");
-    mathQuill.keystroke("Left");
-    mathQuill.keystroke("Left");
-  },
-  LOG_N: mathQuill => {
-    mathQuill.write("log_{ }\\left(\\right)");
-    mathQuill.keystroke("Left"); // into parentheses
-    mathQuill.keystroke("Left"); // out of parentheses
-    mathQuill.keystroke("Left"); // into index
-  },
-
-  NTHROOT3: mathQuill => {
-    mathQuill.typedText("nthroot3");
-    mathQuill.keystroke("Right");
-  },
-  POW: mathQuill => {
-    const contents = mathQuill.latex();
-    mathQuill.typedText("^");
 
-    // If the input hasn't changed (for example, if we're
-    // attempting to add an exponent on an empty input or an empty
-    // denominator), insert our own "a^b"
-    if (mathQuill.latex() === contents) {
-      mathQuill.typedText("a^b");
-    }
-  },
-  // 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: () => {},
-  NUM_0: buildGenericCallback("0"),
-  NUM_1: buildGenericCallback("1"),
-  NUM_2: buildGenericCallback("2"),
-  NUM_3: buildGenericCallback("3"),
-  NUM_4: buildGenericCallback("4"),
-  NUM_5: buildGenericCallback("5"),
-  NUM_6: buildGenericCallback("6"),
-  NUM_7: buildGenericCallback("7"),
-  NUM_8: buildGenericCallback("8"),
-  NUM_9: buildGenericCallback("9"),
-  a: buildGenericCallback("a"),
-  b: buildGenericCallback("b"),
-  c: buildGenericCallback("c"),
-  d: buildGenericCallback("d"),
-  e: buildGenericCallback("e"),
-  f: buildGenericCallback("f"),
-  g: buildGenericCallback("g"),
-  h: buildGenericCallback("h"),
-  i: buildGenericCallback("i"),
-  j: buildGenericCallback("j"),
-  k: buildGenericCallback("k"),
-  l: buildGenericCallback("l"),
-  m: buildGenericCallback("m"),
-  n: buildGenericCallback("n"),
-  o: buildGenericCallback("o"),
-  p: buildGenericCallback("p"),
-  q: buildGenericCallback("q"),
-  r: buildGenericCallback("r"),
-  s: buildGenericCallback("s"),
-  t: buildGenericCallback("t"),
-  u: buildGenericCallback("u"),
-  v: buildGenericCallback("v"),
-  w: buildGenericCallback("w"),
-  x: buildGenericCallback("x"),
-  y: buildGenericCallback("y"),
-  z: buildGenericCallback("z"),
-  A: buildGenericCallback("A"),
-  B: buildGenericCallback("B"),
-  C: buildGenericCallback("C"),
-  D: buildGenericCallback("D"),
-  E: buildGenericCallback("E"),
-  F: buildGenericCallback("F"),
-  G: buildGenericCallback("G"),
-  H: buildGenericCallback("H"),
-  I: buildGenericCallback("I"),
-  J: buildGenericCallback("J"),
-  K: buildGenericCallback("K"),
-  L: buildGenericCallback("L"),
-  M: buildGenericCallback("M"),
-  N: buildGenericCallback("N"),
-  O: buildGenericCallback("O"),
-  P: buildGenericCallback("P"),
-  Q: buildGenericCallback("Q"),
-  R: buildGenericCallback("R"),
-  S: buildGenericCallback("S"),
-  T: buildGenericCallback("T"),
-  U: buildGenericCallback("U"),
-  V: buildGenericCallback("V"),
-  W: buildGenericCallback("W"),
-  X: buildGenericCallback("X"),
-  Y: buildGenericCallback("Y"),
-  Z: buildGenericCallback("Z")
-};
+/**
+ * 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.
+ */
+function createMathField(container, configCallback) {
+  const baseConfig = createBaseConfig();
+  const config = configCallback ? configCallback(baseConfig) : baseConfig;
+  return mathQuillInstance.MathField(container, config);
+}
 
 let MathFieldActionType = /*#__PURE__*/function (MathFieldActionType) {
   MathFieldActionType["WRITE"] = "write";
@@ -739,7 +517,7 @@ function isInsideLogIndex(cursor) {
   return false;
 }
 function isInsideEmptyNode(cursor) {
-  return cursor[MQ.L] === MathFieldActionType.MQ_END && cursor[MQ.R] === MathFieldActionType.MQ_END;
+  return cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END && cursor[mathQuillInstance.R] === MathFieldActionType.MQ_END;
 }
 function selectNode(node, cursor) {
   cursor.insLeftOf(node);
@@ -799,7 +577,7 @@ function maybeFindCommand(initialNode) {
     } else {
       break;
     }
-    node = node[MQ.L];
+    node = node[mathQuillInstance.L];
   }
 
   // If we hit the start of a command, then grab the rest of it by
@@ -807,7 +585,7 @@ 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)) {
@@ -820,7 +598,7 @@ function maybeFindCommand(initialNode) {
         endNode = node;
         break;
       }
-      node = node[MQ.R];
+      node = node[mathQuillInstance.R];
     }
     if (validCommands.includes(name)) {
       return {
@@ -846,18 +624,18 @@ function maybeFindCommand(initialNode) {
  *                          name (`name`) of the command
  */
 function maybeFindCommandBeforeParens(leftParenNode) {
-  return maybeFindCommand(leftParenNode[MQ.L]);
+  return maybeFindCommand(leftParenNode[mathQuillInstance.L]);
 }
 function contextForCursor(cursor) {
   // 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
@@ -877,57 +655,8 @@ function contextForCursor(cursor) {
   }
 }
 
-function handleLeftArrow(mathField, cursor) {
-  // 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, cursor) {
-  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");
-  }
-}
-function handleArrow(mathField, key) {
-  const cursor = getCursor(mathField);
-  if (key === "LEFT") {
-    handleLeftArrow(mathField, cursor);
-  } else if (key === "RIGHT") {
-    handleRightArrow(mathField, cursor);
-  }
-}
-
 function handleBackspaceInNthRoot(mathField, cursor) {
-  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);
   if (isAtLeftEnd) {
     selectNode(cursor.parent.parent, cursor);
@@ -946,7 +675,7 @@ function handleBackspaceInRootIndex(mathField, cursor) {
 
     const grandparent = cursor.parent.parent;
     const latex = grandparent.latex();
-    const reinsertionPoint = grandparent[MQ.L];
+    const reinsertionPoint = grandparent[mathQuillInstance.L];
     selectNode(grandparent, cursor);
     const rootIsEmpty = grandparent.blocks[1].jQ.text() === "";
     if (rootIsEmpty) {
@@ -965,13 +694,13 @@ function handleBackspaceInRootIndex(mathField, cursor) {
 
       // 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");
@@ -984,14 +713,14 @@ function handleBackspaceInLogIndex(mathField, cursor) {
     const command = maybeFindCommandBeforeParens(grandparent);
     cursor.insLeftOf(command === null || command === void 0 ? void 0 : 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);
     }
     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
       // whole thing.
@@ -1010,8 +739,8 @@ function handleBackspaceOutsideParens(cursor) {
   // (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) {
     // There's a command before the parens so we select it as well as
@@ -1057,7 +786,7 @@ function handleBackspaceInsideParens(mathField, cursor) {
   // - \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.
@@ -1070,12 +799,12 @@ function handleBackspaceInsideParens(mathField, cursor) {
   // 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;
     }
   }
@@ -1113,7 +842,7 @@ function handleBackspace(mathField) {
   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);
     } else if (isSquareRoot(leftNode)) {
@@ -1140,6 +869,133 @@ function handleBackspace(mathField) {
   }
 }
 
+/**
+ * Constants that are shared between multiple files.
+ */
+
+let KeypadType = /*#__PURE__*/function (KeypadType) {
+  KeypadType["FRACTION"] = "FRACTION";
+  KeypadType["EXPRESSION"] = "EXPRESSION";
+  return KeypadType;
+}({});
+const KeyTypes = ["EMPTY",
+// For numerals, variables, and any other characters that themselves
+// compose 'values'.
+"VALUE",
+// For buttons that insert or adjust math in an input.
+"OPERATOR",
+// For buttons that move the cursor in an input (including via
+// deletion).
+"INPUT_NAVIGATION",
+// For buttons that modify the broader keypad state (e.g., by changing
+// the visible pane).
+"KEYPAD_NAVIGATION",
+// For buttons that house multiple buttons and have no action
+// themselves.
+"MANY",
+// For the echo animation that appears on press.
+"ECHO"];
+let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
+  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
+  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
+  return DeviceOrientation;
+}({});
+let DeviceType = /*#__PURE__*/function (DeviceType) {
+  DeviceType["PHONE"] = "PHONE";
+  DeviceType["TABLET"] = "TABLET";
+  return DeviceType;
+}({});
+let LayoutMode = /*#__PURE__*/function (LayoutMode) {
+  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
+  LayoutMode["COMPACT"] = "COMPACT";
+  return LayoutMode;
+}({});
+let BorderDirection = /*#__PURE__*/function (BorderDirection) {
+  BorderDirection["LEFT"] = "LEFT";
+  BorderDirection["BOTTOM"] = "BOTTOM";
+  return BorderDirection;
+}({});
+const BorderStyles = {
+  LEFT: [BorderDirection.LEFT],
+  BOTTOM: [BorderDirection.BOTTOM],
+  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
+  NONE: []
+};
+let IconType = /*#__PURE__*/function (IconType) {
+  IconType["MATH"] = "MATH";
+  IconType["SVG"] = "SVG";
+  IconType["TEXT"] = "TEXT";
+  return IconType;
+}({});
+let DecimalSeparator = /*#__PURE__*/function (DecimalSeparator) {
+  DecimalSeparator["COMMA"] = "COMMA";
+  DecimalSeparator["PERIOD"] = "PERIOD";
+  return DecimalSeparator;
+}({});
+let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
+  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
+  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
+  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
+  return EchoAnimationType;
+}({});
+
+// NOTES(kevinb):
+// - In order to get the correct decimal separator for the current locale,
+//   the locale must bet set using `setLocale(kaLocale)` which can be
+//   imported from wonder-blocks-i18n.
+// - Some languages/locales use different decimal separators than the ones
+//   listed here.  Much of the Arab world uses U+066C.
+const decimalSeparator = i18n.getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
+
+function handleLeftArrow(mathField, cursor) {
+  // 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[mathQuillInstance.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, cursor) {
+  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
+    // 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");
+  }
+}
+function handleArrow(mathField, key) {
+  const cursor = getCursor(mathField);
+  if (key === "LEFT") {
+    handleLeftArrow(mathField, cursor);
+  } else if (key === "RIGHT") {
+    handleRightArrow(mathField, cursor);
+  }
+}
+
 const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
 const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
 function handleExponent(mathField, key) {
@@ -1148,7 +1004,7 @@ function handleExponent(mathField, key) {
   // 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 precedingNode = cursor[mathQuillInstance.L];
   const shouldPrefixWithParens = precedingNode === MathFieldActionType.MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
   if (shouldPrefixWithParens) {
     mathField.write("\\left(\\right)");
@@ -1214,11 +1070,11 @@ function handleJumpOut(mathField, key) {
       // 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!
@@ -1247,7 +1103,7 @@ function handleJumpOut(mathField, key) {
       // 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;
@@ -1260,26 +1116,46 @@ function handleJumpOut(mathField, key) {
   }
 }
 
+var ActionType = /*#__PURE__*/function (ActionType) {
+  ActionType["WRITE"] = "write";
+  ActionType["CMD"] = "cmd";
+  ActionType["KEYSTROKE"] = "keystroke";
+  ActionType[ActionType["MQ_END"] = 0] = "MQ_END";
+  return ActionType;
+}(ActionType || {});
+const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
+function buildGenericCallback(str) {
+  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ActionType.WRITE;
+  return function (mathQuill) {
+    switch (type) {
+      case ActionType.WRITE:
+        {
+          mathQuill.write(str);
+          return;
+        }
+      case ActionType.CMD:
+        {
+          mathQuill.cmd(str);
+          return;
+        }
+      case ActionType.KEYSTROKE:
+        {
+          mathQuill.keystroke(str);
+          return;
+        }
+    }
+  };
+}
 function buildNormalFunctionCallback(command) {
   return function (mathField) {
     mathField.write("\\".concat(command, "\\left(\\right)"));
     mathField.keystroke("Left");
   };
 }
-const customKeyTranslator = {
-  ...keyToMathquillMap,
-  // 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
-  BACKSPACE: handleBackspace,
+const keyToMathquillMap = {
   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,
@@ -1292,7 +1168,158 @@ const customKeyTranslator = {
   LN: buildNormalFunctionCallback("ln"),
   SIN: buildNormalFunctionCallback("sin"),
   COS: buildNormalFunctionCallback("cos"),
-  TAN: buildNormalFunctionCallback("tan")
+  TAN: buildNormalFunctionCallback("tan"),
+  CDOT: buildGenericCallback("\\cdot"),
+  DECIMAL: buildGenericCallback(decimalSymbol),
+  DIVIDE: buildGenericCallback("\\div"),
+  EQUAL: buildGenericCallback("="),
+  GEQ: buildGenericCallback("\\geq"),
+  GT: buildGenericCallback(">"),
+  LEQ: buildGenericCallback("\\leq"),
+  LT: buildGenericCallback("<"),
+  MINUS: buildGenericCallback("-"),
+  NEGATIVE: buildGenericCallback("-"),
+  NEQ: buildGenericCallback("\\neq"),
+  PERCENT: buildGenericCallback("%"),
+  PERIOD: buildGenericCallback("."),
+  PLUS: buildGenericCallback("+"),
+  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),
+  PHI: buildGenericCallback("\\phi", ActionType.CMD),
+  PI: buildGenericCallback("pi", ActionType.CMD),
+  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),
+  CUBE_ROOT: mathQuill => {
+    mathQuill.write("\\sqrt[3]{}");
+    mathQuill.keystroke("Left"); // under the root
+  },
+
+  FRAC_EXCLUSIVE: mathQuill => {
+    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[mathQuillInstance.L] === ActionType.MQ_END;
+    mathQuill.cmd("\\frac");
+    if (shouldNavigateLeft) {
+      mathQuill.keystroke("Left");
+    }
+  },
+  LOG_B: mathQuill => {
+    mathQuill.typedText("log_");
+    mathQuill.keystroke("Right");
+    mathQuill.typedText("(");
+    mathQuill.keystroke("Left");
+    mathQuill.keystroke("Left");
+  },
+  LOG_N: mathQuill => {
+    mathQuill.write("log_{ }\\left(\\right)");
+    mathQuill.keystroke("Left"); // into parentheses
+    mathQuill.keystroke("Left"); // out of parentheses
+    mathQuill.keystroke("Left"); // into index
+  },
+
+  NTHROOT3: mathQuill => {
+    mathQuill.typedText("nthroot3");
+    mathQuill.keystroke("Right");
+  },
+  POW: mathQuill => {
+    const contents = mathQuill.latex();
+    mathQuill.typedText("^");
+
+    // If the input hasn't changed (for example, if we're
+    // attempting to add an exponent on an empty input or an empty
+    // denominator), insert our own "a^b"
+    if (mathQuill.latex() === contents) {
+      mathQuill.typedText("a^b");
+    }
+  },
+  // These need to be overwritten by the consumer
+  // if they're going to be used
+  DISMISS: () => {},
+  NOOP: () => {},
+  MANY: () => {},
+  NUM_0: buildGenericCallback("0"),
+  NUM_1: buildGenericCallback("1"),
+  NUM_2: buildGenericCallback("2"),
+  NUM_3: buildGenericCallback("3"),
+  NUM_4: buildGenericCallback("4"),
+  NUM_5: buildGenericCallback("5"),
+  NUM_6: buildGenericCallback("6"),
+  NUM_7: buildGenericCallback("7"),
+  NUM_8: buildGenericCallback("8"),
+  NUM_9: buildGenericCallback("9"),
+  a: buildGenericCallback("a"),
+  b: buildGenericCallback("b"),
+  c: buildGenericCallback("c"),
+  d: buildGenericCallback("d"),
+  e: buildGenericCallback("e"),
+  f: buildGenericCallback("f"),
+  g: buildGenericCallback("g"),
+  h: buildGenericCallback("h"),
+  i: buildGenericCallback("i"),
+  j: buildGenericCallback("j"),
+  k: buildGenericCallback("k"),
+  l: buildGenericCallback("l"),
+  m: buildGenericCallback("m"),
+  n: buildGenericCallback("n"),
+  o: buildGenericCallback("o"),
+  p: buildGenericCallback("p"),
+  q: buildGenericCallback("q"),
+  r: buildGenericCallback("r"),
+  s: buildGenericCallback("s"),
+  t: buildGenericCallback("t"),
+  u: buildGenericCallback("u"),
+  v: buildGenericCallback("v"),
+  w: buildGenericCallback("w"),
+  x: buildGenericCallback("x"),
+  y: buildGenericCallback("y"),
+  z: buildGenericCallback("z"),
+  A: buildGenericCallback("A"),
+  B: buildGenericCallback("B"),
+  C: buildGenericCallback("C"),
+  D: buildGenericCallback("D"),
+  E: buildGenericCallback("E"),
+  F: buildGenericCallback("F"),
+  G: buildGenericCallback("G"),
+  H: buildGenericCallback("H"),
+  I: buildGenericCallback("I"),
+  J: buildGenericCallback("J"),
+  K: buildGenericCallback("K"),
+  L: buildGenericCallback("L"),
+  M: buildGenericCallback("M"),
+  N: buildGenericCallback("N"),
+  O: buildGenericCallback("O"),
+  P: buildGenericCallback("P"),
+  Q: buildGenericCallback("Q"),
+  R: buildGenericCallback("R"),
+  S: buildGenericCallback("S"),
+  T: buildGenericCallback("T"),
+  U: buildGenericCallback("U"),
+  V: buildGenericCallback("V"),
+  W: buildGenericCallback("W"),
+  X: buildGenericCallback("X"),
+  Y: buildGenericCallback("Y"),
+  Z: buildGenericCallback("Z")
+};
+
+const mobileKeyTranslator = {
+  ...keyToMathquillMap,
+  // 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
 };
 
 /**
@@ -1301,18 +1328,20 @@ const customKeyTranslator = {
  * from MathQuill changes.
  */
 class MathWrapper {
-  // MathQuill input
+  // MathQuill MathField input
 
   constructor(element) {
-    let callbacks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    let callbacks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     _defineProperty(this, "mathField", void 0);
     _defineProperty(this, "callbacks", void 0);
-    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");
-      }
+    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;
   }
@@ -1342,7 +1371,7 @@ class MathWrapper {
    */
   pressKey(key) {
     const cursor = this.getCursor();
-    const translator = customKeyTranslator[key];
+    const translator = mobileKeyTranslator[key];
     if (translator) {
       translator(this.mathField, key);
     }
@@ -1390,7 +1419,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);
@@ -1961,7 +1990,7 @@ class MathInput extends React__namespace.Component {
   }
   componentDidMount() {
     this._isMounted = true;
-    this.mathField = new MathWrapper(this._mathContainer, {}, {
+    this.mathField = new MathWrapper(this._mathContainer, {
       onCursorMove: cursor => {
         // TODO(charlie): It's not great that there is so much coupling
         // between this keypad and the input behavior. We should wrap
@@ -8363,7 +8392,7 @@ const KeypadButton = _ref2 => {
     onPress: () => onClickKey(keyConfig.id),
     tintColor: tintColor,
     style: style,
-    ariaLabel: keyConfig.id
+    ariaLabel: keyConfig.ariaLabel
   }, /*#__PURE__*/React__namespace.createElement(ButtonAsset, {
     id: keyConfig.id
   }));
@@ -8793,6 +8822,8 @@ exports.Keypad = Keypad;
 exports.KeypadInput = MathInput;
 exports.KeypadType = KeypadType;
 exports.LegacyKeypad = ProvidedKeypad;
+exports.createMathField = createMathField;
 exports.keyTranslator = keyToMathquillMap;
 exports.keypadElementPropType = keypadElementPropType;
+exports.mathQuillInstance = mathQuillInstance;
 //# sourceMappingURL=index.js.map