@khanacademy/math-input 0.6.6 → 0.6.8

package/dist/index.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Color = require('@khanacademy/wonder-blocks-color');
 var i18n = require('@khanacademy/wonder-blocks-i18n');
+var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var aphrodite = require('aphrodite');
-var PropTypes = require('prop-types');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var $ = require('jquery');
 var MathQuill = require('mathquill');
+var PropTypes = require('prop-types');
 var reactRedux = require('react-redux');
 var Redux = require('redux');
 var katex = require('katex');
@@ -40,11 +41,11 @@ function _interopNamespace(e) {
 
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var MathQuill__default = /*#__PURE__*/_interopDefaultLegacy(MathQuill);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var Redux__namespace = /*#__PURE__*/_interopNamespace(Redux);
 var katex__default = /*#__PURE__*/_interopDefaultLegacy(katex);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
@@ -270,6 +271,176 @@ const navigationPadWidthPx = 192; // HACK(charlie): This should be injected by w
 
 const toolbarHeightPx = 60;
 
+const touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
+const touchTargetHeightPx = 2 * touchTargetRadiusPx;
+const touchTargetWidthPx = 2 * touchTargetRadiusPx;
+const cursorRadiusPx = cursorHandleRadiusPx;
+const cursorHeightPx = cursorHandleDistanceMultiplier * (cursorRadiusPx * 4);
+const cursorWidthPx = 4 * cursorRadiusPx;
+
+class CursorHandle extends React__namespace.Component {
+  render() {
+    const {
+      x,
+      y,
+      animateIntoPosition
+    } = this.props;
+    const animationStyle = animateIntoPosition ? {
+      transitionDuration: "100ms",
+      transitionProperty: "transform"
+    } : {};
+    const transformString = "translate(".concat(x, "px, ").concat(y, "px)");
+    const outerStyle = {
+      position: "absolute",
+      // This is essentially webapp's interactiveComponent + 1.
+      // TODO(charlie): Pull in those styles somehow to avoid breakages.
+      zIndex: 4,
+      left: -touchTargetWidthPx / 2,
+      top: 0,
+      transform: transformString,
+      width: touchTargetWidthPx,
+      height: touchTargetHeightPx,
+      // Touch events that start on the cursor shouldn't be allowed to
+      // produce page scrolls.
+      touchAction: "none",
+      ...animationStyle
+    };
+    return /*#__PURE__*/React__namespace.createElement("span", {
+      style: outerStyle,
+      onTouchStart: this.props.onTouchStart,
+      onTouchMove: this.props.onTouchMove,
+      onTouchEnd: this.props.onTouchEnd,
+      onTouchCancel: this.props.onTouchCancel
+    }, /*#__PURE__*/React__namespace.createElement("svg", {
+      fill: "none",
+      width: cursorWidthPx,
+      height: cursorHeightPx,
+      viewBox: "0 0 ".concat(cursorWidthPx, " ").concat(cursorHeightPx)
+    }, /*#__PURE__*/React__namespace.createElement("filter", {
+      id: "math-input_cursor",
+      colorInterpolationFilters: "sRGB",
+      filterUnits: "userSpaceOnUse",
+      height: cursorHeightPx * 0.87 // ~40
+      ,
+      width: cursorWidthPx * 0.82 // ~36
+      ,
+      x: "4",
+      y: "0"
+    }, /*#__PURE__*/React__namespace.createElement("feFlood", {
+      floodOpacity: "0",
+      result: "BackgroundImageFix"
+    }), /*#__PURE__*/React__namespace.createElement("feColorMatrix", {
+      in: "SourceAlpha",
+      type: "matrix",
+      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+    }), /*#__PURE__*/React__namespace.createElement("feOffset", {
+      dy: "4"
+    }), /*#__PURE__*/React__namespace.createElement("feGaussianBlur", {
+      stdDeviation: "4"
+    }), /*#__PURE__*/React__namespace.createElement("feColorMatrix", {
+      type: "matrix",
+      values: "0 0 0 0 0.129412 0 0 0 0 0.141176 0 0 0 0 0.172549 0 0 0 0.08 0"
+    }), /*#__PURE__*/React__namespace.createElement("feBlend", {
+      in2: "BackgroundImageFix",
+      mode: "normal",
+      result: "effect1_dropShadow"
+    }), /*#__PURE__*/React__namespace.createElement("feBlend", {
+      in: "SourceGraphic",
+      in2: "effect1_dropShadow",
+      mode: "normal",
+      result: "shape"
+    })), /*#__PURE__*/React__namespace.createElement("g", {
+      filter: "url(#math-input_cursor)"
+    }, /*#__PURE__*/React__namespace.createElement("path", {
+      d: "m22 4-7.07 7.0284c-1.3988 1.3901-2.3515 3.1615-2.7376 5.09-.3861 1.9284-.1883 3.9274.5685 5.7441s2.0385 3.3694 3.6831 4.4619c1.6445 1.0925 3.5781 1.6756 5.556 1.6756s3.9115-.5831 5.556-1.6756c1.6446-1.0925 2.9263-2.6452 3.6831-4.4619s.9546-3.8157.5685-5.7441c-.3861-1.9285-1.3388-3.6999-2.7376-5.09z",
+      fill: "#1865f2"
+    })), /*#__PURE__*/React__namespace.createElement("path", {
+      d: "m14.9301 10.4841 7.0699-7.06989 7.0699 7.06989.0001.0001c1.3988 1.3984 2.3515 3.1802 2.7376 5.1201s.1883 3.9507-.5685 5.7782c-.7568 1.8274-2.0385 3.3894-3.6831 4.4883-1.6445 1.099-3.5781 1.6855-5.556 1.6855s-3.9115-.5865-5.556-1.6855c-1.6446-1.0989-2.9263-2.6609-3.6831-4.4883-.7568-1.8275-.9546-3.8383-.5685-5.7782s1.3388-3.7217 2.7376-5.1201z",
+      stroke: "#fff",
+      strokeWidth: "2"
+    })));
+  }
+
+}
+
+_defineProperty(CursorHandle, "defaultProps", {
+  animateIntoPosition: false,
+  visible: false,
+  x: 0,
+  y: 0
+});
+
+/**
+ * A gesture recognizer that detects 'drags', crudely defined as either scrolls
+ * or touches that move a sufficient distance.
+ */
+// The 'slop' factor, after which we consider the use to be dragging. The value
+// is taken from the Android SDK. It won't be robust to page zoom and the like,
+// but it should be good enough for our purposes.
+const touchSlopPx = 8;
+
+class DragListener {
+  constructor(onDrag, initialEvent) {
+    // We detect drags in two ways. First, by listening for the window
+    // scroll event (we consider any legitimate scroll to be a drag).
+    this._scrollListener = () => {
+      onDrag();
+    }; // And second, by listening for touch moves and tracking the each
+    // finger's displacement. This allows us to track, e.g., when the user
+    // scrolls within an individual view.
+
+
+    const touchLocationsById = {};
+
+    for (let i = 0; i < initialEvent.changedTouches.length; i++) {
+      const touch = initialEvent.changedTouches[i];
+      touchLocationsById[touch.identifier] = [touch.clientX, touch.clientY];
+    }
+
+    this._moveListener = evt => {
+      for (let i = 0; i < evt.changedTouches.length; i++) {
+        const touch = evt.changedTouches[i];
+        const initialTouchLocation = touchLocationsById[touch.identifier];
+
+        if (initialTouchLocation) {
+          const touchLocation = [touch.clientX, touch.clientY];
+          const dx = touchLocation[0] - initialTouchLocation[0];
+          const dy = touchLocation[1] - initialTouchLocation[1];
+          const squaredDist = dx * dx + dy * dy;
+          const squaredTouchSlop = touchSlopPx * touchSlopPx;
+
+          if (squaredDist > squaredTouchSlop) {
+            onDrag();
+          }
+        }
+      }
+    }; // Clean-up any terminated gestures, since some browsers reuse
+    // identifiers.
+
+
+    this._endAndCancelListener = evt => {
+      for (let i = 0; i < evt.changedTouches.length; i++) {
+        delete touchLocationsById[evt.changedTouches[i].identifier];
+      }
+    };
+  }
+
+  attach() {
+    window.addEventListener("scroll", this._scrollListener);
+    window.addEventListener("touchmove", this._moveListener);
+    window.addEventListener("touchend", this._endAndCancelListener);
+    window.addEventListener("touchcancel", this._endAndCancelListener);
+  }
+
+  detach() {
+    window.removeEventListener("scroll", this._scrollListener);
+    window.removeEventListener("touchmove", this._moveListener);
+    window.removeEventListener("touchend", this._endAndCancelListener);
+    window.removeEventListener("touchcancel", this._endAndCancelListener);
+  }
+
+}
+
 /**
  * Constants that are shared between multiple files.
  */
@@ -343,1193 +514,656 @@ const EchoAnimationTypes = {
 const decimalSeparator = i18n.getDecimalSeparator() === "," ? DecimalSeparators.COMMA : DecimalSeparators.PERIOD;
 
 /**
- * This file contains configuration settings for the buttons in the keypad.
+ * Constants that define the various contexts in which a cursor can exist. The
+ * active context is determined first by looking at the cursor's siblings (e.g.,
+ * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
+ * cursor could in theory be nested in multiple contexts, we only care about the
+ * immediate context.
+ *
+ * TODO(charlie): Add a context to represent being inside of a radical. Right
+ * now, we show the dismiss button rather than allowing the user to jump out of
+ * the radical.
  */
-const KeyConfigs = {
-  // Basic math keys.
+// TODO: Get rid of these constants in favour of CursorContext type.
+// The cursor is not in any of the other viable contexts.
+const NONE = "NONE"; // The cursor is within a set of parentheses.
+
+const IN_PARENS = "IN_PARENS"; // The cursor is within a superscript (e.g., an exponent).
+
+const IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT"; // The cursor is within a subscript (e.g., the base of a custom logarithm).
+
+const IN_SUB_SCRIPT = "IN_SUB_SCRIPT"; // The cursor is in the numerator of a fraction.
+
+const IN_NUMERATOR = "IN_NUMERATOR"; // The cursor is in the denominator of a fraction.
+
+const IN_DENOMINATOR = "IN_DENOMINATOR"; // The cursor is sitting before a fraction; that is, the cursor is within
+// what looks to be a mixed number preceding a fraction. This will only be
+// the case when the only math between the cursor and the fraction to its
+// write is non-leaf math (numbers and variables).
+
+const BEFORE_FRACTION = "BEFORE_FRACTION";
+
+var CursorContexts = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  NONE: NONE,
+  IN_PARENS: IN_PARENS,
+  IN_SUPER_SCRIPT: IN_SUPER_SCRIPT,
+  IN_SUB_SCRIPT: IN_SUB_SCRIPT,
+  IN_NUMERATOR: IN_NUMERATOR,
+  IN_DENOMINATOR: IN_DENOMINATOR,
+  BEFORE_FRACTION: BEFORE_FRACTION
+});
+
+/**
+ * This file contains a wrapper around MathQuill so that we can provide a
+ * more regular interface for the functionality we need while insulating us
+ * from MathQuill changes.
+ */
+// If it does not exist, fall back to CommonJS require. - jsatk
+
+const decimalSymbol = decimalSeparator === DecimalSeparators.COMMA ? "," : ".";
+const WRITE = "write";
+const CMD = "cmd";
+const KEYSTROKE = "keystroke";
+const MQ_END = 0; // A mapping from keys that can be pressed on a keypad to the way in which
+// MathQuill should modify its input in response to that key-press. Any keys
+// that do not provide explicit actions (like the numeral keys) will merely
+// write their contents to MathQuill.
+
+const KeyActions = {
   [Keys.PLUS]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a plus sign.
-    ariaLabel: i18n__namespace._("Plus")
+    str: "+",
+    fn: WRITE
   },
   [Keys.MINUS]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a minus sign.
-    ariaLabel: i18n__namespace._("Minus")
+    str: "-",
+    fn: WRITE
   },
   [Keys.NEGATIVE]: {
-    type: KeyTypes.VALUE,
-    // I18N: A label for a minus sign.
-    ariaLabel: i18n__namespace._("Negative")
+    str: "-",
+    fn: WRITE
   },
   [Keys.TIMES]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a multiplication sign (represented with an 'x').
-    ariaLabel: i18n__namespace._("Multiply")
+    str: "\\times",
+    fn: WRITE
   },
   [Keys.DIVIDE]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a division sign.
-    ariaLabel: i18n__namespace._("Divide")
+    str: "\\div",
+    fn: WRITE
   },
   [Keys.DECIMAL]: {
-    type: KeyTypes.VALUE,
-    // I18N: A label for a decimal symbol.
-    ariaLabel: i18n__namespace._("Decimal"),
-    icon: decimalSeparator === DecimalSeparators.COMMA ? {
-      // TODO(charlie): Get an SVG icon for the comma, or verify with
-      // design that the text-rendered version is acceptable.
-      type: IconTypes.TEXT,
-      data: ","
-    } : {
-      type: IconTypes.SVG,
-      data: Keys.PERIOD
-    }
-  },
-  [Keys.PERCENT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a percent sign.
-    ariaLabel: i18n__namespace._("Percent")
-  },
-  [Keys.CDOT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a multiplication sign (represented as a dot).
-    ariaLabel: i18n__namespace._("Multiply")
+    str: decimalSymbol,
+    fn: WRITE
   },
   [Keys.EQUAL]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Equals sign")
+    str: "=",
+    fn: WRITE
   },
   [Keys.NEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Not-equals sign")
-  },
-  [Keys.GT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a 'greater than' sign (represented as '>').
-    ariaLabel: i18n__namespace._("Greater than sign")
-  },
-  [Keys.LT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a 'less than' sign (represented as '<').
-    ariaLabel: i18n__namespace._("Less than sign")
-  },
-  [Keys.GEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Greater than or equal to sign")
-  },
-  [Keys.LEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Less than or equal to sign")
-  },
-  // mobile native
-  [Keys.FRAC_INCLUSIVE]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that creates a new fraction and puts the
-    // current expression in the numerator of that fraction.
-    ariaLabel: i18n__namespace._("Fraction, with current expression in numerator")
-  },
-  // mobile native
-  [Keys.FRAC_EXCLUSIVE]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that creates a new fraction next to the
-    // cursor.
-    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
-  },
-  // mobile web
-  [Keys.FRAC]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that creates a new fraction next to the
-    // cursor.
-    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
-  },
-  [Keys.EXP]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that will allow the user to input a custom
-    // exponent.
-    ariaLabel: i18n__namespace._("Custom exponent")
-  },
-  [Keys.EXP_2]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that will square (take to the second
-    // power) some math.
-    ariaLabel: i18n__namespace._("Square")
-  },
-  [Keys.EXP_3]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that will cube (take to the third power)
-    // some math.
-    ariaLabel: i18n__namespace._("Cube")
-  },
-  [Keys.SQRT]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Square root")
+    str: "\\neq",
+    fn: WRITE
   },
-  [Keys.CUBE_ROOT]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Cube root")
+  [Keys.CDOT]: {
+    str: "\\cdot",
+    fn: WRITE
   },
-  [Keys.RADICAL]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Radical with custom root")
+  [Keys.PERCENT]: {
+    str: "%",
+    fn: WRITE
   },
   [Keys.LEFT_PAREN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Left parenthesis")
+    str: "(",
+    fn: CMD
   },
   [Keys.RIGHT_PAREN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Right parenthesis")
-  },
-  [Keys.LN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Natural logarithm")
-  },
-  [Keys.LOG]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Logarithm with base 10")
-  },
-  [Keys.LOG_N]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Logarithm with custom base")
-  },
-  [Keys.SIN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Sine")
-  },
-  [Keys.COS]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Cosine")
+    str: ")",
+    fn: CMD
   },
-  [Keys.TAN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Tangent")
+  [Keys.SQRT]: {
+    str: "sqrt",
+    fn: CMD
   },
   [Keys.PI]: {
-    type: KeyTypes.VALUE,
-    ariaLabel: i18n__namespace._("Pi"),
-    icon: {
-      type: IconTypes.MATH,
-      data: "\\pi"
-    }
+    str: "pi",
+    fn: CMD
   },
   [Keys.THETA]: {
-    type: KeyTypes.VALUE,
-    ariaLabel: i18n__namespace._("Theta"),
-    icon: {
-      type: IconTypes.MATH,
-      data: "\\theta"
-    }
-  },
-  [Keys.NOOP]: {
-    type: KeyTypes.EMPTY
-  },
-  // Input navigation keys.
-  [Keys.UP]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Up arrow")
-  },
-  [Keys.RIGHT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Right arrow")
-  },
-  [Keys.DOWN]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Down arrow")
-  },
-  [Keys.LEFT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Left arrow")
+    str: "theta",
+    fn: CMD
   },
-  [Keys.JUMP_OUT_PARENTHESES]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of a set of parentheses")
+  [Keys.RADICAL]: {
+    str: "nthroot",
+    fn: CMD
   },
-  [Keys.JUMP_OUT_EXPONENT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of an exponent")
+  [Keys.LT]: {
+    str: "<",
+    fn: WRITE
   },
-  [Keys.JUMP_OUT_BASE]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of a base")
+  [Keys.LEQ]: {
+    str: "\\leq",
+    fn: WRITE
   },
-  [Keys.JUMP_INTO_NUMERATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right into the numerator of a fraction")
+  [Keys.GT]: {
+    str: ">",
+    fn: WRITE
   },
-  [Keys.JUMP_OUT_NUMERATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of the numerator and into the denominator")
+  [Keys.GEQ]: {
+    str: "\\geq",
+    fn: WRITE
   },
-  [Keys.JUMP_OUT_DENOMINATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of the denominator of a fraction")
+  [Keys.UP]: {
+    str: "Up",
+    fn: KEYSTROKE
   },
-  [Keys.BACKSPACE]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    // I18N: A label for a button that will delete some input.
-    ariaLabel: i18n__namespace._("Delete")
+  [Keys.DOWN]: {
+    str: "Down",
+    fn: KEYSTROKE
   },
-  // Keypad navigation keys.
-  [Keys.DISMISS]: {
-    type: KeyTypes.KEYPAD_NAVIGATION,
-    // I18N: A label for a button that will dismiss/hide a keypad.
-    ariaLabel: i18n__namespace._("Dismiss")
+  // The `FRAC_EXCLUSIVE` variant is handled manually, since we may need to do
+  // some additional navigation depending on the cursor position.
+  [Keys.FRAC_INCLUSIVE]: {
+    str: "/",
+    fn: CMD
   }
-}; // Add in any multi-function buttons. By default, these keys will mix in any
-// configuration settings from their default child key (i.e., the first key in
-// the `childKeyIds` array).
-// TODO(charlie): Make the multi-function button's long-press interaction
-// accessible.
-// NOTE(kevinb): This is only used in the mobile native app.
-
-KeyConfigs[Keys.FRAC_MULTI] = {
-  childKeyIds: [Keys.FRAC_INCLUSIVE, Keys.FRAC_EXCLUSIVE]
-}; // TODO(charlie): Use the numeral color for the 'Many' key.
+};
+const NormalCommands = {
+  [Keys.LOG]: "log",
+  [Keys.LN]: "ln",
+  [Keys.SIN]: "sin",
+  [Keys.COS]: "cos",
+  [Keys.TAN]: "tan"
+};
+const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
+const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
+const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+const GreekLetters = ["\\theta", "\\pi"];
+const Letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]; // We only consider numerals, variables, and Greek Letters to be proper
+// leaf nodes.
 
-KeyConfigs[Keys.MANY] = {
-  type: KeyTypes.MANY // childKeyIds will be configured by the client.
+const ValidLeaves = [...Numerals, ...GreekLetters, ...Letters.map(letter => letter.toLowerCase()), ...Letters.map(letter => letter.toUpperCase())];
+const KeysForJumpContext = {
+  [IN_PARENS]: Keys.JUMP_OUT_PARENTHESES,
+  [IN_SUPER_SCRIPT]: Keys.JUMP_OUT_EXPONENT,
+  [IN_SUB_SCRIPT]: Keys.JUMP_OUT_BASE,
+  [BEFORE_FRACTION]: Keys.JUMP_INTO_NUMERATOR,
+  [IN_NUMERATOR]: Keys.JUMP_OUT_NUMERATOR,
+  [IN_DENOMINATOR]: Keys.JUMP_OUT_DENOMINATOR
+};
 
-}; // Add in every numeral.
+class MathWrapper {
+  constructor(element) {
+    let callbacks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    this.MQ = MathQuill__default["default"].getInterface(2);
+    this.mathField = this.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.callbacks = callbacks;
+  }
 
-const NUMBERS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  focus() {
+    // 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(); // 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.
 
-for (const num of NUMBERS) {
-  // TODO(charlie): Consider removing the SVG icons that we have for the
-  // numeral keys. They can be rendered just as easily with text (though that
-  // would mean that we'd be using text beyond the variable key).
-  const textRepresentation = "".concat(num);
-  KeyConfigs["NUM_".concat(num)] = {
-    type: KeyTypes.VALUE,
-    ariaLabel: textRepresentation,
-    icon: {
-      type: IconTypes.TEXT,
-      data: textRepresentation
-    }
-  };
-} // Add in every variable.
+    controller.blurred = false;
+  }
 
+  blur() {
+    const controller = this.mathField.__controller;
+    controller.cursor.hide();
+    controller.blurred = true;
+  }
 
-const LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
+  _writeNormalFunction(name) {
+    this.mathField.write("\\".concat(name, "\\left(\\right)"));
+    this.mathField.keystroke("Left");
+  }
+  /**
+   * Handle a key press and return the resulting cursor state.
+   *
+   * @param {Key} key - an enum representing the key that was pressed
+   * @returns {object} a cursor object, consisting of a cursor context
+   */
 
-for (const letter of LETTERS) {
-  const lowerCaseVariable = letter.toLowerCase();
-  const upperCaseVariable = letter.toUpperCase();
 
-  for (const textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
-    KeyConfigs[textRepresentation] = {
-      type: KeyTypes.VALUE,
-      ariaLabel: textRepresentation,
-      icon: {
-        type: IconTypes.MATH,
-        data: textRepresentation
+  pressKey(key) {
+    const cursor = this.mathField.__controller.cursor;
+
+    if (key in KeyActions) {
+      const {
+        str,
+        fn
+      } = KeyActions[key];
+
+      if (str && fn) {
+        this.mathField[fn](str);
+      }
+    } else if (Object.keys(NormalCommands).includes(key)) {
+      this._writeNormalFunction(NormalCommands[key]);
+    } else if (key === Keys.FRAC_EXCLUSIVE) {
+      // 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[this.MQ.L] === MQ_END;
+      this.mathField.cmd("\\frac");
+
+      if (shouldNavigateLeft) {
+        this.mathField.keystroke("Left");
       }
+    } else if (key === Keys.FRAC) {
+      // eslint-disable-next-line no-unused-vars
+      cursor[this.MQ.L] === MQ_END;
+      this.mathField.cmd("\\frac");
+    } else if (key === Keys.LOG_N) {
+      this.mathField.write("log_{ }\\left(\\right)");
+      this.mathField.keystroke("Left"); // into parentheses
+
+      this.mathField.keystroke("Left"); // out of parentheses
+
+      this.mathField.keystroke("Left"); // into index
+    } else if (key === Keys.CUBE_ROOT) {
+      this.mathField.write("\\sqrt[3]{}");
+      this.mathField.keystroke("Left"); // under the root
+    } else if (key === Keys.EXP || key === Keys.EXP_2 || key === Keys.EXP_3) {
+      this._handleExponent(cursor, key);
+    } else if (key === Keys.JUMP_OUT_PARENTHESES || key === Keys.JUMP_OUT_EXPONENT || key === Keys.JUMP_OUT_BASE || key === Keys.JUMP_INTO_NUMERATOR || key === Keys.JUMP_OUT_NUMERATOR || key === Keys.JUMP_OUT_DENOMINATOR) {
+      this._handleJumpOut(cursor, key);
+    } else if (key === Keys.BACKSPACE) {
+      this._handleBackspace(cursor);
+    } else if (key === Keys.LEFT) {
+      this._handleLeftArrow(cursor);
+    } else if (key === Keys.RIGHT || key === Keys.JUMP_OUT) {
+      this._handleRightArrow(cursor);
+    } else if (/^[a-zA-Z]$/.test(key)) {
+      this.mathField[WRITE](key);
+    } else if (/^NUM_\d/.test(key)) {
+      this.mathField[WRITE](key[4]);
+    }
+
+    if (!cursor.selection) {
+      // don't show the cursor for selections
+      cursor.show();
+    }
+
+    if (this.callbacks.onSelectionChanged) {
+      this.callbacks.onSelectionChanged(cursor.selection);
+    } // NOTE(charlie): It's insufficient to do this as an `edited` handler
+    // on the MathField, as that handler isn't triggered on navigation
+    // events.
+
+
+    return {
+      context: this.contextForCursor(cursor)
     };
   }
-}
+  /**
+   * Place the cursor beside the node located at the given coordinates.
+   *
+   * @param {number} x - the x coordinate in the viewport
+   * @param {number} y - the y coordinate in the viewport
+   * @param {Node} hitNode - the node next to which the cursor should be
+   *                         placed; if provided, the coordinates will be used
+   *                         to determine on which side of the node the cursor
+   *                         should be placed
+   */
 
-for (const key of Object.keys(KeyConfigs)) {
-  KeyConfigs[key] = {
-    id: key,
-    // Default to an SVG icon indexed by the key name.
-    icon: {
-      type: IconTypes.SVG,
-      data: key
-    },
-    ...KeyConfigs[key]
-  };
-}
 
-/**
- * Constants that define the various contexts in which a cursor can exist. The
- * active context is determined first by looking at the cursor's siblings (e.g.,
- * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
- * cursor could in theory be nested in multiple contexts, we only care about the
- * immediate context.
- *
- * TODO(charlie): Add a context to represent being inside of a radical. Right
- * now, we show the dismiss button rather than allowing the user to jump out of
- * the radical.
- */
-// TODO: Get rid of these constants in favour of CursorContext type.
-// The cursor is not in any of the other viable contexts.
-const NONE = "NONE"; // The cursor is within a set of parentheses.
+  setCursorPosition(x, y, hitNode) {
+    const el = hitNode || document.elementFromPoint(x, y);
 
-const IN_PARENS = "IN_PARENS"; // The cursor is within a superscript (e.g., an exponent).
+    if (el) {
+      const cursor = this.getCursor();
 
-const IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT"; // The cursor is within a subscript (e.g., the base of a custom logarithm).
+      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);
+      } else {
+        // Otherwise place beside the element at x, y.
+        const controller = this.mathField.__controller;
+        const pageX = x - document.body.scrollLeft;
+        const pageY = y - document.body.scrollTop;
+        controller.seek($__default["default"](el), pageX, pageY).cursor.startSelection(); // 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 IN_SUB_SCRIPT = "IN_SUB_SCRIPT"; // The cursor is in the numerator of a fraction.
+        const command = this._maybeFindCommand(cursor[this.MQ.L]);
 
-const IN_NUMERATOR = "IN_NUMERATOR"; // The cursor is in the denominator of a fraction.
+        if (command && command.endNode) {
+          // NOTE(charlie): endNode should definitely be \left(.
+          cursor.insLeftOf(command.endNode);
+          this.mathField.keystroke("Right");
+        }
+      }
 
-const IN_DENOMINATOR = "IN_DENOMINATOR"; // The cursor is sitting before a fraction; that is, the cursor is within
-// what looks to be a mixed number preceding a fraction. This will only be
-// the case when the only math between the cursor and the fraction to its
-// write is non-leaf math (numbers and variables).
+      if (this.callbacks.onCursorMove) {
+        this.callbacks.onCursorMove({
+          context: this.contextForCursor(cursor)
+        });
+      }
+    }
+  }
 
-const BEFORE_FRACTION = "BEFORE_FRACTION";
+  getCursor() {
+    return this.mathField.__controller.cursor;
+  }
 
-var CursorContexts = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  NONE: NONE,
-  IN_PARENS: IN_PARENS,
-  IN_SUPER_SCRIPT: IN_SUPER_SCRIPT,
-  IN_SUB_SCRIPT: IN_SUB_SCRIPT,
-  IN_NUMERATOR: IN_NUMERATOR,
-  IN_DENOMINATOR: IN_DENOMINATOR,
-  BEFORE_FRACTION: BEFORE_FRACTION
-});
+  getSelection() {
+    return this.getCursor().selection;
+  }
 
-/**
- * React PropTypes that may be shared between components.
- */
-const iconPropType = PropTypes__default["default"].shape({
-  type: PropTypes__default["default"].oneOf(Object.keys(IconTypes)).isRequired,
-  data: PropTypes__default["default"].string.isRequired
-});
-const keyIdPropType = PropTypes__default["default"].oneOf(Object.keys(KeyConfigs));
-const keyConfigPropType = PropTypes__default["default"].shape({
-  ariaLabel: PropTypes__default["default"].string,
-  id: keyIdPropType.isRequired,
-  type: PropTypes__default["default"].oneOf(Object.keys(KeyTypes)).isRequired,
-  childKeyIds: PropTypes__default["default"].arrayOf(keyIdPropType),
-  icon: iconPropType.isRequired
-});
-const keypadConfigurationPropType = PropTypes__default["default"].shape({
-  keypadType: PropTypes__default["default"].oneOf(Object.keys(KeypadTypes)).isRequired,
-  extraKeys: PropTypes__default["default"].arrayOf(keyIdPropType)
-}); // NOTE(jared): This is no longer guaranteed to be React element
+  getContent() {
+    return this.mathField.latex();
+  }
 
-const keypadElementPropType = PropTypes__default["default"].shape({
-  activate: PropTypes__default["default"].func.isRequired,
-  dismiss: PropTypes__default["default"].func.isRequired,
-  configure: PropTypes__default["default"].func.isRequired,
-  setCursor: PropTypes__default["default"].func.isRequired,
-  setKeyHandler: PropTypes__default["default"].func.isRequired,
-  getDOMNode: PropTypes__default["default"].func.isRequired
-});
-const bordersPropType = PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(Object.keys(BorderDirections)));
-const boundingBoxPropType = PropTypes__default["default"].shape({
-  height: PropTypes__default["default"].number,
-  width: PropTypes__default["default"].number,
-  top: PropTypes__default["default"].number,
-  right: PropTypes__default["default"].number,
-  bottom: PropTypes__default["default"].number,
-  left: PropTypes__default["default"].number
-});
-const echoPropType = PropTypes__default["default"].shape({
-  animationId: PropTypes__default["default"].string.isRequired,
-  animationType: PropTypes__default["default"].oneOf(Object.keys(EchoAnimationTypes)).isRequired,
-  borders: bordersPropType,
-  id: keyIdPropType.isRequired,
-  initialBounds: boundingBoxPropType.isRequired
-});
-const cursorContextPropType = PropTypes__default["default"].oneOf(Object.keys(CursorContexts));
-const popoverPropType = PropTypes__default["default"].shape({
-  parentId: keyIdPropType.isRequired,
-  bounds: boundingBoxPropType.isRequired,
-  childKeyIds: PropTypes__default["default"].arrayOf(keyIdPropType).isRequired
-});
-PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].node), PropTypes__default["default"].node]);
-
-const touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
-const touchTargetHeightPx = 2 * touchTargetRadiusPx;
-const touchTargetWidthPx = 2 * touchTargetRadiusPx;
-const cursorRadiusPx = cursorHandleRadiusPx;
-const cursorHeightPx = cursorHandleDistanceMultiplier * (cursorRadiusPx * 4);
-const cursorWidthPx = 4 * cursorRadiusPx;
-
-class CursorHandle extends React__namespace.Component {
-  render() {
-    const {
-      x,
-      y,
-      animateIntoPosition
-    } = this.props;
-    const animationStyle = animateIntoPosition ? {
-      msTransitionDuration: "100ms",
-      WebkitTransitionDuration: "100ms",
-      transitionDuration: "100ms",
-      msTransitionProperty: "transform",
-      WebkitTransitionProperty: "transform",
-      transitionProperty: "transform"
-    } : {};
-    const transformString = "translate(".concat(x, "px, ").concat(y, "px)");
-    const outerStyle = {
-      position: "absolute",
-      // This is essentially webapp's interactiveComponent + 1.
-      // TODO(charlie): Pull in those styles somehow to avoid breakages.
-      zIndex: 4,
-      left: -touchTargetWidthPx / 2,
-      top: 0,
-      msTransform: transformString,
-      WebkitTransform: transformString,
-      transform: transformString,
-      width: touchTargetWidthPx,
-      height: touchTargetHeightPx,
-      // Touch events that start on the cursor shouldn't be allowed to
-      // produce page scrolls.
-      touchAction: "none",
-      ...animationStyle
-    };
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      style: outerStyle,
-      onTouchStart: this.props.onTouchStart,
-      onTouchMove: this.props.onTouchMove,
-      onTouchEnd: this.props.onTouchEnd,
-      onTouchCancel: this.props.onTouchCancel
-    }, /*#__PURE__*/React__namespace.createElement("svg", {
-      fill: "none",
-      width: cursorWidthPx,
-      height: cursorHeightPx,
-      viewBox: "0 0 ".concat(cursorWidthPx, " ").concat(cursorHeightPx)
-    }, /*#__PURE__*/React__namespace.createElement("filter", {
-      id: "math-input_cursor",
-      colorInterpolationFilters: "sRGB",
-      filterUnits: "userSpaceOnUse",
-      height: cursorHeightPx * 0.87 // ~40
-      ,
-      width: cursorWidthPx * 0.82 // ~36
-      ,
-      x: "4",
-      y: "0"
-    }, /*#__PURE__*/React__namespace.createElement("feFlood", {
-      floodOpacity: "0",
-      result: "BackgroundImageFix"
-    }), /*#__PURE__*/React__namespace.createElement("feColorMatrix", {
-      in: "SourceAlpha",
-      type: "matrix",
-      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-    }), /*#__PURE__*/React__namespace.createElement("feOffset", {
-      dy: "4"
-    }), /*#__PURE__*/React__namespace.createElement("feGaussianBlur", {
-      stdDeviation: "4"
-    }), /*#__PURE__*/React__namespace.createElement("feColorMatrix", {
-      type: "matrix",
-      values: "0 0 0 0 0.129412 0 0 0 0 0.141176 0 0 0 0 0.172549 0 0 0 0.08 0"
-    }), /*#__PURE__*/React__namespace.createElement("feBlend", {
-      in2: "BackgroundImageFix",
-      mode: "normal",
-      result: "effect1_dropShadow"
-    }), /*#__PURE__*/React__namespace.createElement("feBlend", {
-      in: "SourceGraphic",
-      in2: "effect1_dropShadow",
-      mode: "normal",
-      result: "shape"
-    })), /*#__PURE__*/React__namespace.createElement("g", {
-      filter: "url(#math-input_cursor)"
-    }, /*#__PURE__*/React__namespace.createElement("path", {
-      d: "m22 4-7.07 7.0284c-1.3988 1.3901-2.3515 3.1615-2.7376 5.09-.3861 1.9284-.1883 3.9274.5685 5.7441s2.0385 3.3694 3.6831 4.4619c1.6445 1.0925 3.5781 1.6756 5.556 1.6756s3.9115-.5831 5.556-1.6756c1.6446-1.0925 2.9263-2.6452 3.6831-4.4619s.9546-3.8157.5685-5.7441c-.3861-1.9285-1.3388-3.6999-2.7376-5.09z",
-      fill: "#1865f2"
-    })), /*#__PURE__*/React__namespace.createElement("path", {
-      d: "m14.9301 10.4841 7.0699-7.06989 7.0699 7.06989.0001.0001c1.3988 1.3984 2.3515 3.1802 2.7376 5.1201s.1883 3.9507-.5685 5.7782c-.7568 1.8274-2.0385 3.3894-3.6831 4.4883-1.6445 1.099-3.5781 1.6855-5.556 1.6855s-3.9115-.5865-5.556-1.6855c-1.6446-1.0989-2.9263-2.6609-3.6831-4.4883-.7568-1.8275-.9546-3.8383-.5685-5.7782s1.3388-3.7217 2.7376-5.1201z",
-      stroke: "#fff",
-      strokeWidth: "2"
-    })));
+  setContent(latex) {
+    this.mathField.latex(latex);
   }
 
-}
+  isEmpty() {
+    const cursor = this.getCursor();
+    return cursor.parent.id === 1 && cursor[1] === 0 && cursor[-1] === 0;
+  } // Notes about MathQuill
+  //
+  // MathQuill's stores its layout as nested linked lists.  Each node in the
+  // list has this.MQ.L '-1' and this.MQ.R '1' properties that define links to
+  // the left and right nodes respectively.  They also have
+  //
+  // ctrlSeq: contains the latex code snippet that defines that node.
+  // jQ: jQuery object for the DOM node(s) for this MathQuill node.
+  // ends: pointers to the nodes at the ends of the container.
+  // parent: parent node.
+  // blocks: an array containing one or more nodes that make up the node.
+  // sub?: subscript node if there is one as is the case in log_n
+  //
+  // All of the code below is super fragile.  Please be especially careful
+  // when upgrading MathQuill.
 
-_defineProperty(CursorHandle, "propTypes", {
-  animateIntoPosition: PropTypes__default["default"].bool,
-  onTouchCancel: PropTypes__default["default"].func.isRequired,
-  onTouchEnd: PropTypes__default["default"].func.isRequired,
-  onTouchMove: PropTypes__default["default"].func.isRequired,
-  onTouchStart: PropTypes__default["default"].func.isRequired,
-  visible: PropTypes__default["default"].bool.isRequired,
-  x: PropTypes__default["default"].number.isRequired,
-  y: PropTypes__default["default"].number.isRequired
-});
 
-_defineProperty(CursorHandle, "defaultProps", {
-  animateIntoPosition: false,
-  visible: false,
-  x: 0,
-  y: 0
-});
+  _handleBackspaceInNthRoot(cursor) {
+    const isAtLeftEnd = cursor[this.MQ.L] === MQ_END;
 
-/**
- * A gesture recognizer that detects 'drags', crudely defined as either scrolls
- * or touches that move a sufficient distance.
- */
-// The 'slop' factor, after which we consider the use to be dragging. The value
-// is taken from the Android SDK. It won't be robust to page zoom and the like,
-// but it should be good enough for our purposes.
-const touchSlopPx = 8;
+    const isRootEmpty = this._isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
 
-class DragListener {
-  constructor(onDrag, initialEvent) {
-    // We detect drags in two ways. First, by listening for the window
-    // scroll event (we consider any legitimate scroll to be a drag).
-    this._scrollListener = () => {
-      onDrag();
-    }; // And second, by listening for touch moves and tracking the each
-    // finger's displacement. This allows us to track, e.g., when the user
-    // scrolls within an individual view.
+    if (isAtLeftEnd) {
+      this._selectNode(cursor.parent.parent, cursor);
+
+      if (isRootEmpty) {
+        this.mathField.keystroke("Backspace");
+      }
+    } else {
+      this.mathField.keystroke("Backspace");
+    }
+  }
+  /**
+   * Advances the cursor to the next logical position.
+   *
+   * @param {cursor} cursor
+   * @private
+   */
 
 
-    const touchLocationsById = {};
+  _handleJumpOut(cursor, key) {
+    const context = this.contextForCursor(cursor); // Validate that the current cursor context matches the key's intent.
 
-    for (let i = 0; i < initialEvent.changedTouches.length; i++) {
-      const touch = initialEvent.changedTouches[i];
-      touchLocationsById[touch.identifier] = [touch.clientX, touch.clientY];
+    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;
     }
 
-    this._moveListener = evt => {
-      for (let i = 0; i < evt.changedTouches.length; i++) {
-        const touch = evt.changedTouches[i];
-        const initialTouchLocation = touchLocationsById[touch.identifier];
+    switch (context) {
+      case 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;
 
-        if (initialTouchLocation) {
-          const touchLocation = [touch.clientX, touch.clientY];
-          const dx = touchLocation[0] - initialTouchLocation[0];
-          const dy = touchLocation[1] - initialTouchLocation[1];
-          const squaredDist = dx * dx + dy * dy;
-          const squaredTouchSlop = touchSlopPx * touchSlopPx;
+      case BEFORE_FRACTION:
+        // Find the nearest fraction to the right of the cursor.
+        let fractionNode;
+        let visitor = cursor;
 
-          if (squaredDist > squaredTouchSlop) {
-            onDrag();
+        while (visitor[this.MQ.R] !== MQ_END) {
+          if (this._isFraction(visitor[this.MQ.R])) {
+            fractionNode = visitor[this.MQ.R];
           }
-        }
-      }
-    }; // Clean-up any terminated gestures, since some browsers reuse
-    // identifiers.
-
 
-    this._endAndCancelListener = evt => {
-      for (let i = 0; i < evt.changedTouches.length; i++) {
-        delete touchLocationsById[evt.changedTouches[i].identifier];
-      }
-    };
-  }
+          visitor = visitor[this.MQ.R];
+        } // Jump into it!
 
-  attach() {
-    window.addEventListener("scroll", this._scrollListener);
-    window.addEventListener("touchmove", this._moveListener);
-    window.addEventListener("touchend", this._endAndCancelListener);
-    window.addEventListener("touchcancel", this._endAndCancelListener);
-  }
 
-  detach() {
-    window.removeEventListener("scroll", this._scrollListener);
-    window.removeEventListener("touchmove", this._moveListener);
-    window.removeEventListener("touchend", this._endAndCancelListener);
-    window.removeEventListener("touchcancel", this._endAndCancelListener);
-  }
+        cursor.insLeftOf(fractionNode);
+        this.mathField.keystroke("Right");
+        break;
 
-}
+      case 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];
 
-/**
- * This file contains a wrapper around MathQuill so that we can provide a
- * more regular interface for the functionality we need while insulating us
- * from MathQuill changes.
- */
-// If it does not exist, fall back to CommonJS require. - jsatk
-
-const decimalSymbol = decimalSeparator === DecimalSeparators.COMMA ? "," : ".";
-const WRITE = "write";
-const CMD = "cmd";
-const KEYSTROKE = "keystroke";
-const MQ_END = 0; // A mapping from keys that can be pressed on a keypad to the way in which
-// MathQuill should modify its input in response to that key-press. Any keys
-// that do not provide explicit actions (like the numeral keys) will merely
-// write their contents to MathQuill.
+        while (cursor.parent !== siblingDenominator) {
+          this.mathField.keystroke("Right");
+        }
 
-const KeyActions = {
-  [Keys.PLUS]: {
-    str: "+",
-    fn: WRITE
-  },
-  [Keys.MINUS]: {
-    str: "-",
-    fn: WRITE
-  },
-  [Keys.NEGATIVE]: {
-    str: "-",
-    fn: WRITE
-  },
-  [Keys.TIMES]: {
-    str: "\\times",
-    fn: WRITE
-  },
-  [Keys.DIVIDE]: {
-    str: "\\div",
-    fn: WRITE
-  },
-  [Keys.DECIMAL]: {
-    str: decimalSymbol,
-    fn: WRITE
-  },
-  [Keys.EQUAL]: {
-    str: "=",
-    fn: WRITE
-  },
-  [Keys.NEQ]: {
-    str: "\\neq",
-    fn: WRITE
-  },
-  [Keys.CDOT]: {
-    str: "\\cdot",
-    fn: WRITE
-  },
-  [Keys.PERCENT]: {
-    str: "%",
-    fn: WRITE
-  },
-  [Keys.LEFT_PAREN]: {
-    str: "(",
-    fn: CMD
-  },
-  [Keys.RIGHT_PAREN]: {
-    str: ")",
-    fn: CMD
-  },
-  [Keys.SQRT]: {
-    str: "sqrt",
-    fn: CMD
-  },
-  [Keys.PI]: {
-    str: "pi",
-    fn: CMD
-  },
-  [Keys.THETA]: {
-    str: "theta",
-    fn: CMD
-  },
-  [Keys.RADICAL]: {
-    str: "nthroot",
-    fn: CMD
-  },
-  [Keys.LT]: {
-    str: "<",
-    fn: WRITE
-  },
-  [Keys.LEQ]: {
-    str: "\\leq",
-    fn: WRITE
-  },
-  [Keys.GT]: {
-    str: ">",
-    fn: WRITE
-  },
-  [Keys.GEQ]: {
-    str: "\\geq",
-    fn: WRITE
-  },
-  [Keys.UP]: {
-    str: "Up",
-    fn: KEYSTROKE
-  },
-  [Keys.DOWN]: {
-    str: "Down",
-    fn: KEYSTROKE
-  },
-  // The `FRAC_EXCLUSIVE` variant is handled manually, since we may need to do
-  // some additional navigation depending on the cursor position.
-  [Keys.FRAC_INCLUSIVE]: {
-    str: "/",
-    fn: CMD
-  }
-};
-const NormalCommands = {
-  [Keys.LOG]: "log",
-  [Keys.LN]: "ln",
-  [Keys.SIN]: "sin",
-  [Keys.COS]: "cos",
-  [Keys.TAN]: "tan"
-};
-const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
-const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
-const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-const GreekLetters = ["\\theta", "\\pi"];
-const Letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]; // We only consider numerals, variables, and Greek Letters to be proper
-// leaf nodes.
+        break;
 
-const ValidLeaves = [...Numerals, ...GreekLetters, ...Letters.map(letter => letter.toLowerCase()), ...Letters.map(letter => letter.toUpperCase())];
-const KeysForJumpContext = {
-  [IN_PARENS]: Keys.JUMP_OUT_PARENTHESES,
-  [IN_SUPER_SCRIPT]: Keys.JUMP_OUT_EXPONENT,
-  [IN_SUB_SCRIPT]: Keys.JUMP_OUT_BASE,
-  [BEFORE_FRACTION]: Keys.JUMP_INTO_NUMERATOR,
-  [IN_NUMERATOR]: Keys.JUMP_OUT_NUMERATOR,
-  [IN_DENOMINATOR]: Keys.JUMP_OUT_DENOMINATOR
-};
+      case IN_DENOMINATOR:
+        cursor.insRightOf(cursor.parent.parent);
+        break;
 
-class MathWrapper {
-  constructor(element) {
-    let callbacks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    this.MQ = MathQuill__default["default"].getInterface(2);
-    this.mathField = this.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.callbacks = callbacks;
-  }
+      case 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.
 
-  focus() {
-    // 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(); // 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.
+        if (this._isParens(cursor[this.MQ.R])) {
+          this.mathField.keystroke("Right");
+        }
 
-    controller.blurred = false;
-  }
+        break;
 
-  blur() {
-    const controller = this.mathField.__controller;
-    controller.cursor.hide();
-    controller.blurred = true;
-  }
+      case IN_SUPER_SCRIPT:
+        // Insert just beyond the superscript.
+        cursor.insRightOf(cursor.parent.parent);
+        break;
 
-  _writeNormalFunction(name) {
-    this.mathField.write("\\".concat(name, "\\left(\\right)"));
-    this.mathField.keystroke("Left");
+      default:
+        throw new Error("Attempted to 'Jump Out' from node, but found no " + "appropriate cursor context: ".concat(context));
+    }
   }
   /**
-   * Handle a key press and return the resulting cursor state.
+   * Selects and deletes part of the expression based on the cursor location.
+   * See inline comments for precise behavior of different cases.
    *
-   * @param {Key} key - an enum representing the key that was pressed
-   * @returns {object} a cursor object, consisting of a cursor context
+   * @param {cursor} cursor
+   * @private
    */
 
 
-  pressKey(key) {
-    const cursor = this.mathField.__controller.cursor;
-
-    if (key in KeyActions) {
-      const {
-        str,
-        fn
-      } = KeyActions[key];
-
-      if (str && fn) {
-        this.mathField[fn](str);
-      }
-    } else if (Object.keys(NormalCommands).includes(key)) {
-      this._writeNormalFunction(NormalCommands[key]);
-    } else if (key === Keys.FRAC_EXCLUSIVE) {
-      // 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[this.MQ.L] === MQ_END;
-      this.mathField.cmd("\\frac");
+  _handleBackspace(cursor) {
+    if (!cursor.selection) {
+      const parent = cursor.parent;
+      const grandparent = parent.parent;
+      const leftNode = cursor[this.MQ.L];
 
-      if (shouldNavigateLeft) {
-        this.mathField.keystroke("Left");
+      if (this._isFraction(leftNode)) {
+        this._selectNode(leftNode, cursor);
+      } else if (this._isSquareRoot(leftNode)) {
+        this._selectNode(leftNode, cursor);
+      } else if (this._isNthRoot(leftNode)) {
+        this._selectNode(leftNode, cursor);
+      } else if (this._isNthRootIndex(parent)) {
+        this._handleBackspaceInRootIndex(cursor);
+      } else if (leftNode.ctrlSeq === "\\left(") {
+        this._handleBackspaceOutsideParens(cursor);
+      } else if (grandparent.ctrlSeq === "\\left(") {
+        this._handleBackspaceInsideParens(cursor);
+      } else if (this._isInsideLogIndex(cursor)) {
+        this._handleBackspaceInLogIndex(cursor);
+      } else if (leftNode.ctrlSeq === "\\ge " || leftNode.ctrlSeq === "\\le ") {
+        this._handleBackspaceAfterLigaturedSymbol(cursor);
+      } else if (this._isNthRoot(grandparent) && leftNode === MQ_END) {
+        this._handleBackspaceInNthRoot(cursor);
+      } else {
+        this.mathField.keystroke("Backspace");
       }
-    } else if (key === Keys.FRAC) {
-      // eslint-disable-next-line no-unused-vars
-      cursor[this.MQ.L] === MQ_END;
-      this.mathField.cmd("\\frac");
-    } else if (key === Keys.LOG_N) {
-      this.mathField.write("log_{ }\\left(\\right)");
-      this.mathField.keystroke("Left"); // into parentheses
-
-      this.mathField.keystroke("Left"); // out of parentheses
+    } else {
+      this.mathField.keystroke("Backspace");
+    }
+  }
 
-      this.mathField.keystroke("Left"); // into index
-    } else if (key === Keys.CUBE_ROOT) {
-      this.mathField.write("\\sqrt[3]{}");
-      this.mathField.keystroke("Left"); // under the root
-    } else if (key === Keys.EXP || key === Keys.EXP_2 || key === Keys.EXP_3) {
-      this._handleExponent(cursor, key);
-    } else if (key === Keys.JUMP_OUT_PARENTHESES || key === Keys.JUMP_OUT_EXPONENT || key === Keys.JUMP_OUT_BASE || key === Keys.JUMP_INTO_NUMERATOR || key === Keys.JUMP_OUT_NUMERATOR || key === Keys.JUMP_OUT_DENOMINATOR) {
-      this._handleJumpOut(cursor, key);
-    } else if (key === Keys.BACKSPACE) {
-      this._handleBackspace(cursor);
-    } else if (key === Keys.LEFT) {
-      this._handleLeftArrow(cursor);
-    } else if (key === Keys.RIGHT || key === Keys.JUMP_OUT) {
-      this._handleRightArrow(cursor);
-    } else if (/^[a-zA-Z]$/.test(key)) {
-      this.mathField[WRITE](key);
-    } else if (/^NUM_\d/.test(key)) {
-      this.mathField[WRITE](key[4]);
-    }
-
-    if (!cursor.selection) {
-      // don't show the cursor for selections
-      cursor.show();
-    }
-
-    if (this.callbacks.onSelectionChanged) {
-      this.callbacks.onSelectionChanged(cursor.selection);
-    } // NOTE(charlie): It's insufficient to do this as an `edited` handler
-    // on the MathField, as that handler isn't triggered on navigation
-    // events.
-
-
-    return {
-      context: this.contextForCursor(cursor)
-    };
-  }
-  /**
-   * Place the cursor beside the node located at the given coordinates.
-   *
-   * @param {number} x - the x coordinate in the viewport
-   * @param {number} y - the y coordinate in the viewport
-   * @param {Node} hitNode - the node next to which the cursor should be
-   *                         placed; if provided, the coordinates will be used
-   *                         to determine on which side of the node the cursor
-   *                         should be placed
-   */
-
-
-  setCursorPosition(x, y, hitNode) {
-    const el = hitNode || document.elementFromPoint(x, y);
-
-    if (el) {
-      const cursor = this.getCursor();
-
-      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);
-      } else {
-        // Otherwise place beside the element at x, y.
-        const controller = this.mathField.__controller;
-        const pageX = x - document.body.scrollLeft;
-        const pageY = y - document.body.scrollTop;
-        controller.seek($__default["default"](el), pageX, pageY).cursor.startSelection(); // Unless that would leave us mid-command, in which case, we
-        // need to adjust and place the cursor inside the parens
-        // following the command.
+  _handleLeftArrow(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 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[this.MQ.L] === MQ_END) {
+      const parent = cursor.parent;
+      const grandparent = parent.parent;
 
-        const command = this._maybeFindCommand(cursor[this.MQ.L]);
+      if (grandparent.ctrlSeq === "\\left(") {
+        const command = this._maybeFindCommandBeforeParens(grandparent);
 
-        if (command && command.endNode) {
-          // NOTE(charlie): endNode should definitely be \left(.
-          cursor.insLeftOf(command.endNode);
-          this.mathField.keystroke("Right");
+        if (command) {
+          cursor.insLeftOf(command.startNode);
+          return;
         }
       }
+    } // Otherwise, we default to the standard MathQull left behavior.
 
-      if (this.callbacks.onCursorMove) {
-        this.callbacks.onCursorMove({
-          context: this.contextForCursor(cursor)
-        });
-      }
-    }
-  }
 
-  getCursor() {
-    return this.mathField.__controller.cursor;
+    this.mathField.keystroke("Left");
   }
 
-  getSelection() {
-    return this.getCursor().selection;
-  }
+  _handleRightArrow(cursor) {
+    const command = this._maybeFindCommand(cursor[this.MQ.R]);
 
-  getContent() {
-    return this.mathField.latex();
+    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);
+      this.mathField.keystroke("Right");
+    } else {
+      // Otherwise, we default to the standard MathQull right behavior.
+      this.mathField.keystroke("Right");
+    }
   }
 
-  setContent(latex) {
-    this.mathField.latex(latex);
-  }
+  _handleExponent(cursor, key) {
+    // 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[this.MQ.L];
+    const shouldPrefixWithParens = precedingNode === MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
 
-  isEmpty() {
-    const cursor = this.getCursor();
-    return cursor.parent.id === 1 && cursor[1] === 0 && cursor[-1] === 0;
-  } // Notes about MathQuill
-  //
-  // MathQuill's stores its layout as nested linked lists.  Each node in the
-  // list has this.MQ.L '-1' and this.MQ.R '1' properties that define links to
-  // the left and right nodes respectively.  They also have
-  //
-  // ctrlSeq: contains the latex code snippet that defines that node.
-  // jQ: jQuery object for the DOM node(s) for this MathQuill node.
-  // ends: pointers to the nodes at the ends of the container.
-  // parent: parent node.
-  // blocks: an array containing one or more nodes that make up the node.
-  // sub?: subscript node if there is one as is the case in log_n
-  //
-  // All of the code below is super fragile.  Please be especially careful
-  // when upgrading MathQuill.
+    if (shouldPrefixWithParens) {
+      this.mathField.write("\\left(\\right)");
+    } // Insert the appropriate exponent operator.
 
 
-  _handleBackspaceInNthRoot(cursor) {
-    const isAtLeftEnd = cursor[this.MQ.L] === MQ_END;
+    switch (key) {
+      case Keys.EXP:
+        this.mathField.cmd("^");
+        break;
 
-    const isRootEmpty = this._isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
+      case Keys.EXP_2:
+      case Keys.EXP_3:
+        this.mathField.write("^".concat(key === Keys.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 (isAtLeftEnd) {
-      this._selectNode(cursor.parent.parent, cursor);
+        if (shouldPrefixWithParens) {
+          this.mathField.keystroke("Left");
+          this.mathField.keystroke("Left");
+          this.mathField.keystroke("Left");
+          this.mathField.keystroke("Left");
+        }
 
-      if (isRootEmpty) {
-        this.mathField.keystroke("Backspace");
-      }
-    } else {
-      this.mathField.keystroke("Backspace");
+        break;
+
+      default:
+        throw new Error("Invalid exponent key: ".concat(key));
     }
   }
   /**
-   * Advances the cursor to the next logical position.
+   * Return the start node, end node, and full name of the command of which
+   * the initial node is a part, or `null` if the node is not part of a
+   * command.
    *
-   * @param {cursor} cursor
+   * @param {node} initialNode - the node to included as part of the command
+   * @returns {null|object} - `null` or an object containing the start node
+   *                          (`startNode`), end node (`endNode`), and full
+   *                          name (`name`) of the command
    * @private
    */
 
 
-  _handleJumpOut(cursor, key) {
-    const context = this.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;
-    }
+  _maybeFindCommand(initialNode) {
+    if (!initialNode) {
+      return null;
+    } // MathQuill stores commands as separate characters so that
+    // users can delete commands one character at a time.  We iterate over
+    // the nodes from right to left until we hit a sequence starting with a
+    // '\\', which signifies the start of a command; then we iterate from
+    // left to right until we hit a '\\left(', which signifies the end of a
+    // command.  If we encounter any character that doesn't belong in a
+    // command, we return null.  We match a single character at a time.
+    // Ex) ['\\l', 'o', 'g ', '\\left(', ...]
 
-    switch (context) {
-      case 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 BEFORE_FRACTION:
-        // Find the nearest fraction to the right of the cursor.
-        let fractionNode;
-        let visitor = cursor;
+    const commandCharRegex = /^[a-z]$/;
+    const commandStartRegex = /^\\[a-z]$/;
+    const commandEndSeq = "\\left("; // Note: We allowlist the set of valid commands, since relying solely on
+    // a command being prefixed with a backslash leads to undesired
+    // behavior. For example, Greek symbols, left parentheses, and square
+    // roots all get treated as commands.
 
-        while (visitor[this.MQ.R] !== MQ_END) {
-          if (this._isFraction(visitor[this.MQ.R])) {
-            fractionNode = visitor[this.MQ.R];
-          }
+    const validCommands = ["\\log", "\\ln", "\\cos", "\\sin", "\\tan"];
+    let name = "";
+    let startNode;
+    let endNode; // Collect the portion of the command from the current node, leftwards
+    // until the start of the command.
 
-          visitor = visitor[this.MQ.R];
-        } // Jump into it!
+    let node = initialNode;
 
+    while (node !== 0) {
+      const ctrlSeq = node.ctrlSeq.trim();
 
-        cursor.insLeftOf(fractionNode);
-        this.mathField.keystroke("Right");
+      if (commandCharRegex.test(ctrlSeq)) {
+        name = ctrlSeq + name;
+      } else if (commandStartRegex.test(ctrlSeq)) {
+        name = ctrlSeq + name;
+        startNode = node;
+        break;
+      } else {
         break;
-
-      case 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) {
-          this.mathField.keystroke("Right");
-        }
-
-        break;
-
-      case IN_DENOMINATOR:
-        cursor.insRightOf(cursor.parent.parent);
-        break;
-
-      case 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 (this._isParens(cursor[this.MQ.R])) {
-          this.mathField.keystroke("Right");
-        }
-
-        break;
-
-      case 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: ".concat(context));
-    }
-  }
-  /**
-   * Selects and deletes part of the expression based on the cursor location.
-   * See inline comments for precise behavior of different cases.
-   *
-   * @param {cursor} cursor
-   * @private
-   */
-
-
-  _handleBackspace(cursor) {
-    if (!cursor.selection) {
-      const parent = cursor.parent;
-      const grandparent = parent.parent;
-      const leftNode = cursor[this.MQ.L];
-
-      if (this._isFraction(leftNode)) {
-        this._selectNode(leftNode, cursor);
-      } else if (this._isSquareRoot(leftNode)) {
-        this._selectNode(leftNode, cursor);
-      } else if (this._isNthRoot(leftNode)) {
-        this._selectNode(leftNode, cursor);
-      } else if (this._isNthRootIndex(parent)) {
-        this._handleBackspaceInRootIndex(cursor);
-      } else if (leftNode.ctrlSeq === "\\left(") {
-        this._handleBackspaceOutsideParens(cursor);
-      } else if (grandparent.ctrlSeq === "\\left(") {
-        this._handleBackspaceInsideParens(cursor);
-      } else if (this._isInsideLogIndex(cursor)) {
-        this._handleBackspaceInLogIndex(cursor);
-      } else if (leftNode.ctrlSeq === "\\ge " || leftNode.ctrlSeq === "\\le ") {
-        this._handleBackspaceAfterLigaturedSymbol(cursor);
-      } else if (this._isNthRoot(grandparent) && leftNode === MQ_END) {
-        this._handleBackspaceInNthRoot(cursor);
-      } else {
-        this.mathField.keystroke("Backspace");
-      }
-    } else {
-      this.mathField.keystroke("Backspace");
-    }
-  }
-
-  _handleLeftArrow(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 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[this.MQ.L] === MQ_END) {
-      const parent = cursor.parent;
-      const grandparent = parent.parent;
-
-      if (grandparent.ctrlSeq === "\\left(") {
-        const command = this._maybeFindCommandBeforeParens(grandparent);
-
-        if (command) {
-          cursor.insLeftOf(command.startNode);
-          return;
-        }
-      }
-    } // Otherwise, we default to the standard MathQull left behavior.
-
-
-    this.mathField.keystroke("Left");
-  }
-
-  _handleRightArrow(cursor) {
-    const command = this._maybeFindCommand(cursor[this.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);
-      this.mathField.keystroke("Right");
-    } else {
-      // Otherwise, we default to the standard MathQull right behavior.
-      this.mathField.keystroke("Right");
-    }
-  }
-
-  _handleExponent(cursor, key) {
-    // 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[this.MQ.L];
-    const shouldPrefixWithParens = precedingNode === MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
-
-    if (shouldPrefixWithParens) {
-      this.mathField.write("\\left(\\right)");
-    } // Insert the appropriate exponent operator.
-
-
-    switch (key) {
-      case Keys.EXP:
-        this.mathField.cmd("^");
-        break;
-
-      case Keys.EXP_2:
-      case Keys.EXP_3:
-        this.mathField.write("^".concat(key === Keys.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) {
-          this.mathField.keystroke("Left");
-          this.mathField.keystroke("Left");
-          this.mathField.keystroke("Left");
-          this.mathField.keystroke("Left");
-        }
-
-        break;
-
-      default:
-        throw new Error("Invalid exponent key: ".concat(key));
-    }
-  }
-  /**
-   * Return the start node, end node, and full name of the command of which
-   * the initial node is a part, or `null` if the node is not part of a
-   * command.
-   *
-   * @param {node} initialNode - the node to included as part of the command
-   * @returns {null|object} - `null` or an object containing the start node
-   *                          (`startNode`), end node (`endNode`), and full
-   *                          name (`name`) of the command
-   * @private
-   */
-
-
-  _maybeFindCommand(initialNode) {
-    if (!initialNode) {
-      return null;
-    } // MathQuill stores commands as separate characters so that
-    // users can delete commands one character at a time.  We iterate over
-    // the nodes from right to left until we hit a sequence starting with a
-    // '\\', which signifies the start of a command; then we iterate from
-    // left to right until we hit a '\\left(', which signifies the end of a
-    // command.  If we encounter any character that doesn't belong in a
-    // command, we return null.  We match a single character at a time.
-    // Ex) ['\\l', 'o', 'g ', '\\left(', ...]
-
-
-    const commandCharRegex = /^[a-z]$/;
-    const commandStartRegex = /^\\[a-z]$/;
-    const commandEndSeq = "\\left("; // Note: We allowlist the set of valid commands, since relying solely on
-    // a command being prefixed with a backslash leads to undesired
-    // behavior. For example, Greek symbols, left parentheses, and square
-    // roots all get treated as commands.
-
-    const validCommands = ["\\log", "\\ln", "\\cos", "\\sin", "\\tan"];
-    let name = "";
-    let startNode;
-    let endNode; // Collect the portion of the command from the current node, leftwards
-    // until the start of the command.
-
-    let node = initialNode;
-
-    while (node !== 0) {
-      const ctrlSeq = node.ctrlSeq.trim();
-
-      if (commandCharRegex.test(ctrlSeq)) {
-        name = ctrlSeq + name;
-      } else if (commandStartRegex.test(ctrlSeq)) {
-        name = ctrlSeq + name;
-        startNode = node;
-        break;
-      } else {
-        break;
-      }
+      }
 
       node = node[this.MQ.L];
     } // If we hit the start of a command, then grab the rest of it by
@@ -1938,12 +1572,39 @@ const scrollIntoView = (containerNode, keypadNode) => {
   }
 };
 
-const constrainingFrictionFactor = 0.8; // eslint-disable-next-line react/no-unsafe
+const constrainingFrictionFactor = 0.8;
 
+// eslint-disable-next-line react/no-unsafe
 class MathInput extends React__namespace.Component {
   constructor() {
     super(...arguments);
 
+    _defineProperty(this, "didTouchOutside", void 0);
+
+    _defineProperty(this, "didScroll", void 0);
+
+    _defineProperty(this, "mathField", void 0);
+
+    _defineProperty(this, "recordTouchStartOutside", void 0);
+
+    _defineProperty(this, "blurOnTouchEndOutside", void 0);
+
+    _defineProperty(this, "dragListener", void 0);
+
+    _defineProperty(this, "inputRef", void 0);
+
+    _defineProperty(this, "_isMounted", void 0);
+
+    _defineProperty(this, "_mathContainer", void 0);
+
+    _defineProperty(this, "_container", void 0);
+
+    _defineProperty(this, "_root", void 0);
+
+    _defineProperty(this, "_containerBounds", void 0);
+
+    _defineProperty(this, "_keypadBounds", void 0);
+
     _defineProperty(this, "state", {
       focused: false,
       handle: {
@@ -1954,7 +1615,7 @@ class MathInput extends React__namespace.Component {
       }
     });
 
-    _defineProperty(this, "_clearKeypadBoundsCache", keypadNode => {
+    _defineProperty(this, "_clearKeypadBoundsCache", () => {
       this._keypadBounds = null;
     });
 
@@ -2120,6 +1781,8 @@ class MathInput extends React__namespace.Component {
         const elementsById = {};
 
         for (const element of elements) {
+          // $FlowFixMe[incompatible-use]
+          // $FlowFixMe[prop-missing]
           const id = element.getAttribute("mathquill-command-id");
 
           if (id != null) {
@@ -2141,7 +1804,7 @@ class MathInput extends React__namespace.Component {
         // TODO(kevinb) consider preferring nodes hit by [x, y].
 
 
-        for (const [id, count] of Object.entries(counts)) {
+        for (const [id, count] of wonderStuffCore.entries(counts)) {
           if (count > max) {
             max = count;
             hitNode = elementsById[id];
@@ -2456,7 +2119,8 @@ class MathInput extends React__namespace.Component {
     this._updateInputPadding();
 
     this._container = ReactDOM__default["default"].findDOMNode(this);
-    this._root = this._container.querySelector(".mq-root-block");
+    this._root = this._container.querySelector(".mq-root-block"); // $FlowFixMe[incompatible-use]
+    // $FlowFixMe[prop-missing]
 
     this._root.addEventListener("scroll", this._handleScroll); // Record the initial scroll displacement on touch start. This allows
     // us to detect whether a touch event was a scroll and only blur the
@@ -2464,8 +2128,6 @@ class MathInput extends React__namespace.Component {
     // frustrating user experience.
 
 
-    this.touchStartInitialScroll = null;
-
     this.recordTouchStartOutside = evt => {
       if (this.state.focused) {
         // Only blur if the touch is both outside of the input, and
@@ -2524,165 +2186,499 @@ class MathInput extends React__namespace.Component {
 
       if (this.dragListener) {
         this.dragListener.detach();
-        this.removeListeners = null;
       }
     };
 
-    window.addEventListener("touchstart", this.recordTouchStartOutside);
-    window.addEventListener("touchend", this.blurOnTouchEndOutside);
-    window.addEventListener("touchcancel", this.blurOnTouchEndOutside); // HACK(benkomalo): if the window resizes, the keypad bounds can
-    // change. That's a bit peeking into the internals of the keypad
-    // itself, since we know bounds can change only when the viewport
-    // changes, but seems like a rare enough thing to get wrong that it's
-    // not worth wiring up extra things for the technical "purity" of
-    // having the keypad notify of changes to us.
+    window.addEventListener("touchstart", this.recordTouchStartOutside);
+    window.addEventListener("touchend", this.blurOnTouchEndOutside);
+    window.addEventListener("touchcancel", this.blurOnTouchEndOutside); // HACK(benkomalo): if the window resizes, the keypad bounds can
+    // change. That's a bit peeking into the internals of the keypad
+    // itself, since we know bounds can change only when the viewport
+    // changes, but seems like a rare enough thing to get wrong that it's
+    // not worth wiring up extra things for the technical "purity" of
+    // having the keypad notify of changes to us.
+
+    window.addEventListener("resize", this._clearKeypadBoundsCache);
+    window.addEventListener("orientationchange", this._clearKeypadBoundsCache);
+  }
+
+  UNSAFE_componentWillReceiveProps(props) {
+    if (this.props.keypadElement !== props.keypadElement) {
+      this._clearKeypadBoundsCache();
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.mathField.getContent() !== this.props.value) {
+      this.mathField.setContent(this.props.value);
+    }
+
+    if (prevState.focused !== this.state.focused) {
+      this._updateInputPadding();
+    }
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+    window.removeEventListener("touchstart", this.recordTouchStartOutside);
+    window.removeEventListener("touchend", this.blurOnTouchEndOutside);
+    window.removeEventListener("touchcancel", this.blurOnTouchEndOutside);
+    window.removeEventListener("resize", this._clearKeypadBoundsCache());
+    window.removeEventListener("orientationchange", this._clearKeypadBoundsCache());
+  }
+
+  render() {
+    const {
+      focused,
+      handle
+    } = this.state;
+    const {
+      style
+    } = this.props;
+    const innerStyle = { ...inlineStyles$1.innerContainer,
+      borderWidth: this.getBorderWidthPx(),
+      ...(focused ? {
+        borderColor: wonderBlocksBlue
+      } : {}),
+      ...style
+    }; // NOTE(diedra): This label explicitly refers to tapping because this field
+    // is currently only seen if the user is using a mobile device.
+    // We added the tapping instructions because there is currently a bug where
+    // Android users need to use two fingers to tap the input field to make the
+    // keyboard appear. It should only require one finger, which is how iOS works.
+    // TODO(diedra): Fix the bug that is causing Android to require a two finger tap
+    // to the open the keyboard, and then remove the second half of this label.
+
+    const ariaLabel = i18n__namespace._("Math input box") + " " + i18n__namespace._("Tap with one or two fingers to open keyboard");
+
+    return /*#__PURE__*/React__namespace.createElement(View, {
+      style: styles$e.input,
+      onTouchStart: this.handleTouchStart,
+      onTouchMove: this.handleTouchMove,
+      onTouchEnd: this.handleTouchEnd,
+      onClick: e => e.stopPropagation(),
+      role: "textbox",
+      ariaLabel: ariaLabel
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "keypad-input",
+      tabIndex: "0",
+      ref: node => {
+        this.inputRef = node;
+      },
+      onKeyUp: this.handleKeyUp
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      ref: node => {
+        this._mathContainer = ReactDOM__default["default"].findDOMNode(node);
+      },
+      style: innerStyle
+    })), focused && handle.visible && /*#__PURE__*/React__namespace.createElement(CursorHandle, _extends({}, handle, {
+      onTouchStart: this.onCursorHandleTouchStart,
+      onTouchMove: this.onCursorHandleTouchMove,
+      onTouchEnd: this.onCursorHandleTouchEnd,
+      onTouchCancel: this.onCursorHandleTouchCancel
+    })));
+  }
+
+}
+
+_defineProperty(MathInput, "defaultProps", {
+  style: {},
+  value: ""
+});
+
+const fontSizePt = 18;
+const inputMaxWidth = 128; // The height of numerals in Symbola (rendered at 18pt) is about 20px (though
+// they render at 24px due to padding for ascenders and descenders). We want our
+// box to be laid out such that there's 12px of padding between a numeral and the
+// edge of the input, so we use this 20px number as our 'base height' and
+// account for the ascender and descender padding when computing the additional
+// padding in our `render` method.
+
+const numeralHeightPx = 20;
+const totalDesiredPadding = 12;
+const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
+const minWidthPx = 64;
+const styles$e = aphrodite.StyleSheet.create({
+  input: {
+    position: "relative",
+    display: "inline-block",
+    verticalAlign: "middle",
+    maxWidth: inputMaxWidth
+  }
+});
+const inlineStyles$1 = {
+  // Styles for the inner, MathQuill-ified input element. It's important that
+  // these are done with regular inline styles rather than Aphrodite classes
+  // as MathQuill adds CSS class names to the element outside of the typical
+  // React flow; assigning a class to the element can thus disrupt MathQuill
+  // behavior. For example, if the client provided new styles to be applied
+  // on focus and the styles here were applied with Aphrodite, then Aphrodite
+  // would merge the provided styles with the base styles here, producing a
+  // new CSS class name that we would apply to the element, clobbering any CSS
+  // class names that MathQuill had applied itself.
+  innerContainer: {
+    backgroundColor: "white",
+    minHeight: minHeightPx,
+    minWidth: minWidthPx,
+    maxWidth: inputMaxWidth,
+    boxSizing: "border-box",
+    position: "relative",
+    borderStyle: "solid",
+    borderColor: Color__default["default"].offBlack50,
+    borderRadius: 4,
+    color: offBlack
+  }
+};
+
+/**
+ * This file contains configuration settings for the buttons in the keypad.
+ */
+const KeyConfigs = {
+  // Basic math keys.
+  [Keys.PLUS]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a plus sign.
+    ariaLabel: i18n__namespace._("Plus")
+  },
+  [Keys.MINUS]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a minus sign.
+    ariaLabel: i18n__namespace._("Minus")
+  },
+  [Keys.NEGATIVE]: {
+    type: KeyTypes.VALUE,
+    // I18N: A label for a minus sign.
+    ariaLabel: i18n__namespace._("Negative")
+  },
+  [Keys.TIMES]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a multiplication sign (represented with an 'x').
+    ariaLabel: i18n__namespace._("Multiply")
+  },
+  [Keys.DIVIDE]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a division sign.
+    ariaLabel: i18n__namespace._("Divide")
+  },
+  [Keys.DECIMAL]: {
+    type: KeyTypes.VALUE,
+    // I18N: A label for a decimal symbol.
+    ariaLabel: i18n__namespace._("Decimal"),
+    icon: decimalSeparator === DecimalSeparators.COMMA ? {
+      // TODO(charlie): Get an SVG icon for the comma, or verify with
+      // design that the text-rendered version is acceptable.
+      type: IconTypes.TEXT,
+      data: ","
+    } : {
+      type: IconTypes.SVG,
+      data: Keys.PERIOD
+    }
+  },
+  [Keys.PERCENT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a percent sign.
+    ariaLabel: i18n__namespace._("Percent")
+  },
+  [Keys.CDOT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a multiplication sign (represented as a dot).
+    ariaLabel: i18n__namespace._("Multiply")
+  },
+  [Keys.EQUAL]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Equals sign")
+  },
+  [Keys.NEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Not-equals sign")
+  },
+  [Keys.GT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a 'greater than' sign (represented as '>').
+    ariaLabel: i18n__namespace._("Greater than sign")
+  },
+  [Keys.LT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a 'less than' sign (represented as '<').
+    ariaLabel: i18n__namespace._("Less than sign")
+  },
+  [Keys.GEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Greater than or equal to sign")
+  },
+  [Keys.LEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Less than or equal to sign")
+  },
+  // mobile native
+  [Keys.FRAC_INCLUSIVE]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that creates a new fraction and puts the
+    // current expression in the numerator of that fraction.
+    ariaLabel: i18n__namespace._("Fraction, with current expression in numerator")
+  },
+  // mobile native
+  [Keys.FRAC_EXCLUSIVE]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that creates a new fraction next to the
+    // cursor.
+    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+  },
+  // mobile web
+  [Keys.FRAC]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that creates a new fraction next to the
+    // cursor.
+    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+  },
+  [Keys.EXP]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that will allow the user to input a custom
+    // exponent.
+    ariaLabel: i18n__namespace._("Custom exponent")
+  },
+  [Keys.EXP_2]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that will square (take to the second
+    // power) some math.
+    ariaLabel: i18n__namespace._("Square")
+  },
+  [Keys.EXP_3]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that will cube (take to the third power)
+    // some math.
+    ariaLabel: i18n__namespace._("Cube")
+  },
+  [Keys.SQRT]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Square root")
+  },
+  [Keys.CUBE_ROOT]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Cube root")
+  },
+  [Keys.RADICAL]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Radical with custom root")
+  },
+  [Keys.LEFT_PAREN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Left parenthesis")
+  },
+  [Keys.RIGHT_PAREN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Right parenthesis")
+  },
+  [Keys.LN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Natural logarithm")
+  },
+  [Keys.LOG]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Logarithm with base 10")
+  },
+  [Keys.LOG_N]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Logarithm with custom base")
+  },
+  [Keys.SIN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Sine")
+  },
+  [Keys.COS]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Cosine")
+  },
+  [Keys.TAN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Tangent")
+  },
+  [Keys.PI]: {
+    type: KeyTypes.VALUE,
+    ariaLabel: i18n__namespace._("Pi"),
+    icon: {
+      type: IconTypes.MATH,
+      data: "\\pi"
+    }
+  },
+  [Keys.THETA]: {
+    type: KeyTypes.VALUE,
+    ariaLabel: i18n__namespace._("Theta"),
+    icon: {
+      type: IconTypes.MATH,
+      data: "\\theta"
+    }
+  },
+  [Keys.NOOP]: {
+    type: KeyTypes.EMPTY
+  },
+  // Input navigation keys.
+  [Keys.UP]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Up arrow")
+  },
+  [Keys.RIGHT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Right arrow")
+  },
+  [Keys.DOWN]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Down arrow")
+  },
+  [Keys.LEFT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Left arrow")
+  },
+  [Keys.JUMP_OUT_PARENTHESES]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of a set of parentheses")
+  },
+  [Keys.JUMP_OUT_EXPONENT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of an exponent")
+  },
+  [Keys.JUMP_OUT_BASE]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of a base")
+  },
+  [Keys.JUMP_INTO_NUMERATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right into the numerator of a fraction")
+  },
+  [Keys.JUMP_OUT_NUMERATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of the numerator and into the denominator")
+  },
+  [Keys.JUMP_OUT_DENOMINATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of the denominator of a fraction")
+  },
+  [Keys.BACKSPACE]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    // I18N: A label for a button that will delete some input.
+    ariaLabel: i18n__namespace._("Delete")
+  },
+  // Keypad navigation keys.
+  [Keys.DISMISS]: {
+    type: KeyTypes.KEYPAD_NAVIGATION,
+    // I18N: A label for a button that will dismiss/hide a keypad.
+    ariaLabel: i18n__namespace._("Dismiss")
+  }
+}; // Add in any multi-function buttons. By default, these keys will mix in any
+// configuration settings from their default child key (i.e., the first key in
+// the `childKeyIds` array).
+// TODO(charlie): Make the multi-function button's long-press interaction
+// accessible.
+// NOTE(kevinb): This is only used in the mobile native app.
+
+KeyConfigs[Keys.FRAC_MULTI] = {
+  childKeyIds: [Keys.FRAC_INCLUSIVE, Keys.FRAC_EXCLUSIVE]
+}; // TODO(charlie): Use the numeral color for the 'Many' key.
 
-    window.addEventListener("resize", this._clearKeypadBoundsCache);
-    window.addEventListener("orientationchange", this._clearKeypadBoundsCache);
-  }
+KeyConfigs[Keys.MANY] = {
+  type: KeyTypes.MANY // childKeyIds will be configured by the client.
 
-  UNSAFE_componentWillReceiveProps(props) {
-    if (this.props.keypadElement !== props.keypadElement) {
-      this._clearKeypadBoundsCache();
-    }
-  }
+}; // Add in every numeral.
 
-  componentDidUpdate(prevProps, prevState) {
-    if (this.mathField.getContent() !== this.props.value) {
-      this.mathField.setContent(this.props.value);
-    }
+const NUMBERS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
-    if (prevState.focused !== this.state.focused) {
-      this._updateInputPadding();
+for (const num of NUMBERS) {
+  // TODO(charlie): Consider removing the SVG icons that we have for the
+  // numeral keys. They can be rendered just as easily with text (though that
+  // would mean that we'd be using text beyond the variable key).
+  const textRepresentation = "".concat(num);
+  KeyConfigs["NUM_".concat(num)] = {
+    type: KeyTypes.VALUE,
+    ariaLabel: textRepresentation,
+    icon: {
+      type: IconTypes.TEXT,
+      data: textRepresentation
     }
-  }
+  };
+} // Add in every variable.
 
-  componentWillUnmount() {
-    this._isMounted = false;
-    window.removeEventListener("touchstart", this.recordTouchStartOutside);
-    window.removeEventListener("touchend", this.blurOnTouchEndOutside);
-    window.removeEventListener("touchcancel", this.blurOnTouchEndOutside);
-    window.removeEventListener("resize", this._clearKeypadBoundsCache());
-    window.removeEventListener("orientationchange", this._clearKeypadBoundsCache());
-  }
 
-  render() {
-    const {
-      focused,
-      handle
-    } = this.state;
-    const {
-      style
-    } = this.props;
-    const innerStyle = { ...inlineStyles$1.innerContainer,
-      borderWidth: this.getBorderWidthPx(),
-      ...(focused ? {
-        borderColor: wonderBlocksBlue
-      } : {}),
-      ...style
-    }; // NOTE(diedra): This label explicitly refers to tapping because this field
-    // is currently only seen if the user is using a mobile device.
-    // We added the tapping instructions because there is currently a bug where
-    // Android users need to use two fingers to tap the input field to make the
-    // keyboard appear. It should only require one finger, which is how iOS works.
-    // TODO(diedra): Fix the bug that is causing Android to require a two finger tap
-    // to the open the keyboard, and then remove the second half of this label.
+const LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
 
-    const ariaLabel = i18n__namespace._("Math input box") + " " + i18n__namespace._("Tap with one or two fingers to open keyboard");
+for (const letter of LETTERS) {
+  const lowerCaseVariable = letter.toLowerCase();
+  const upperCaseVariable = letter.toUpperCase();
 
-    return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$e.input,
-      onTouchStart: this.handleTouchStart,
-      onTouchMove: this.handleTouchMove,
-      onTouchEnd: this.handleTouchEnd,
-      onClick: e => e.stopPropagation(),
-      role: "textbox",
-      ariaLabel: ariaLabel
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "keypad-input",
-      tabIndex: "0",
-      ref: node => {
-        this.inputRef = node;
-      },
-      onKeyUp: this.handleKeyUp
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: node => {
-        this._mathContainer = ReactDOM__default["default"].findDOMNode(node);
-      },
-      style: innerStyle
-    })), focused && handle.visible && /*#__PURE__*/React__namespace.createElement(CursorHandle, _extends({}, handle, {
-      onTouchStart: this.onCursorHandleTouchStart,
-      onTouchMove: this.onCursorHandleTouchMove,
-      onTouchEnd: this.onCursorHandleTouchEnd,
-      onTouchCancel: this.onCursorHandleTouchCancel
-    })));
+  for (const textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
+    KeyConfigs[textRepresentation] = {
+      type: KeyTypes.VALUE,
+      ariaLabel: textRepresentation,
+      icon: {
+        type: IconTypes.MATH,
+        data: textRepresentation
+      }
+    };
   }
+}
 
+for (const key of Object.keys(KeyConfigs)) {
+  KeyConfigs[key] = {
+    id: key,
+    // Default to an SVG icon indexed by the key name.
+    icon: {
+      type: IconTypes.SVG,
+      data: key
+    },
+    ...KeyConfigs[key]
+  };
 }
 
-_defineProperty(MathInput, "propTypes", {
-  // The React element node associated with the keypad that will send
-  // key-press events to this input. If provided, this can be used to:
-  //   (1) Avoid blurring the input, on user interaction with the keypad.
-  //   (2) Scroll the input into view, if it would otherwise be obscured
-  //       by the keypad on focus.
-  keypadElement: keypadElementPropType,
-  onBlur: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func.isRequired,
-  onFocus: PropTypes__default["default"].func,
-  // An extra, vanilla style object, to be applied to the math input.
-  style: PropTypes__default["default"].any,
-  value: PropTypes__default["default"].string
+/**
+ * React PropTypes that may be shared between components.
+ */
+const iconPropType = PropTypes__default["default"].shape({
+  type: PropTypes__default["default"].oneOf(Object.keys(IconTypes)).isRequired,
+  data: PropTypes__default["default"].string.isRequired
 });
-
-_defineProperty(MathInput, "defaultProps", {
-  style: {},
-  value: ""
+const keyIdPropType = PropTypes__default["default"].oneOf(Object.keys(KeyConfigs));
+const keyConfigPropType = PropTypes__default["default"].shape({
+  ariaLabel: PropTypes__default["default"].string,
+  id: keyIdPropType.isRequired,
+  type: PropTypes__default["default"].oneOf(Object.keys(KeyTypes)).isRequired,
+  childKeyIds: PropTypes__default["default"].arrayOf(keyIdPropType),
+  icon: iconPropType.isRequired
 });
+const keypadConfigurationPropType = PropTypes__default["default"].shape({
+  keypadType: PropTypes__default["default"].oneOf(Object.keys(KeypadTypes)).isRequired,
+  extraKeys: PropTypes__default["default"].arrayOf(keyIdPropType)
+}); // NOTE(jared): This is no longer guaranteed to be React element
 
-const fontSizePt = 18;
-const inputMaxWidth = 128; // The height of numerals in Symbola (rendered at 18pt) is about 20px (though
-// they render at 24px due to padding for ascenders and descenders). We want our
-// box to be laid out such that there's 12px of padding between a numeral and the
-// edge of the input, so we use this 20px number as our 'base height' and
-// account for the ascender and descender padding when computing the additional
-// padding in our `render` method.
-
-const numeralHeightPx = 20;
-const totalDesiredPadding = 12;
-const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
-const minWidthPx = 64;
-const styles$e = aphrodite.StyleSheet.create({
-  input: {
-    position: "relative",
-    display: "inline-block",
-    verticalAlign: "middle",
-    maxWidth: inputMaxWidth
-  }
+const keypadElementPropType = PropTypes__default["default"].shape({
+  activate: PropTypes__default["default"].func.isRequired,
+  dismiss: PropTypes__default["default"].func.isRequired,
+  configure: PropTypes__default["default"].func.isRequired,
+  setCursor: PropTypes__default["default"].func.isRequired,
+  setKeyHandler: PropTypes__default["default"].func.isRequired,
+  getDOMNode: PropTypes__default["default"].func.isRequired
 });
-const inlineStyles$1 = {
-  // Styles for the inner, MathQuill-ified input element. It's important that
-  // these are done with regular inline styles rather than Aphrodite classes
-  // as MathQuill adds CSS class names to the element outside of the typical
-  // React flow; assigning a class to the element can thus disrupt MathQuill
-  // behavior. For example, if the client provided new styles to be applied
-  // on focus and the styles here were applied with Aphrodite, then Aphrodite
-  // would merge the provided styles with the base styles here, producing a
-  // new CSS class name that we would apply to the element, clobbering any CSS
-  // class names that MathQuill had applied itself.
-  innerContainer: {
-    backgroundColor: "white",
-    minHeight: minHeightPx,
-    minWidth: minWidthPx,
-    maxWidth: inputMaxWidth,
-    boxSizing: "border-box",
-    position: "relative",
-    borderStyle: "solid",
-    borderColor: Color__default["default"].offBlack50,
-    borderRadius: 4,
-    color: offBlack
-  }
-};
+const bordersPropType = PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(Object.keys(BorderDirections)));
+const boundingBoxPropType = PropTypes__default["default"].shape({
+  height: PropTypes__default["default"].number,
+  width: PropTypes__default["default"].number,
+  top: PropTypes__default["default"].number,
+  right: PropTypes__default["default"].number,
+  bottom: PropTypes__default["default"].number,
+  left: PropTypes__default["default"].number
+});
+const echoPropType = PropTypes__default["default"].shape({
+  animationId: PropTypes__default["default"].string.isRequired,
+  animationType: PropTypes__default["default"].oneOf(Object.keys(EchoAnimationTypes)).isRequired,
+  borders: bordersPropType,
+  id: keyIdPropType.isRequired,
+  initialBounds: boundingBoxPropType.isRequired
+});
+const cursorContextPropType = PropTypes__default["default"].oneOf(Object.keys(CursorContexts));
+const popoverPropType = PropTypes__default["default"].shape({
+  parentId: keyIdPropType.isRequired,
+  bounds: boundingBoxPropType.isRequired,
+  childKeyIds: PropTypes__default["default"].arrayOf(keyIdPropType).isRequired
+});
+PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].node), PropTypes__default["default"].node]);
 
 // naming convention: verb + noun
 // the noun should be one of the other properties in the object that's
@@ -7649,13 +7645,9 @@ const inlineStyles = {
     visibility: "hidden"
   },
   hidden: {
-    msTransform: "translate3d(0, 100%, 0)",
-    WebkitTransform: "translate3d(0, 100%, 0)",
     transform: "translate3d(0, 100%, 0)"
   },
   active: {
-    msTransform: "translate3d(0, 0, 0)",
-    WebkitTransform: "translate3d(0, 0, 0)",
     transform: "translate3d(0, 0, 0)"
   }
 };