@khanacademy/math-input 16.5.0 → 17.0.0

package/dist/es/index.js

@@ -17,7 +17,7 @@ import PropTypes from 'prop-types';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "16.5.0";
+const libVersion = "17.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -341,39 +341,37 @@ let CursorContext = /*#__PURE__*/function (CursorContext) {
 
 // We only need one MathQuill instance (referred to as MQ in the docs)
 // and that contains some MQ constants and the MathField constructor
-const mathQuillInstance = MathQuill.getInterface(2);
-function createBaseConfig() {
-  return {
-    // LaTeX commands that, when typed, are immediately replaced by the
-    // appropriate symbol. This does not include ln, log, or any of the
-    // trig functions; those are always interpreted as commands.
-    autoCommands: "pi theta phi sqrt nthroot",
-    // Most of these autoOperatorNames are simply the MathQuill defaults.
-    // We have to list them all in order to add the `sen` operator (see
-    // comment below).
-    autoOperatorNames: ["arccos", "arcsin", "arctan", "arg", "cos", "cosh", "cot", "coth", "csc", "deg", "det", "dim", "exp", "gcd", "hom", "inf", "ker", "lg", "lim", "liminf", "limsup", "ln", "log", "max", "min", "Pr", "projlim", "sec",
-    // sen is used instead of sin in e.g. Portuguese
-    "sen", "sin", "sinh", "sup", "tan", "tanh"].join(" "),
-    // Pop the cursor out of super/subscripts on arithmetic operators
-    // or (in)equalities.
-    charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
-    // Prevent excessive super/subscripts or fractions from being
-    // created without operands, e.g. when somebody holds down a key
-    supSubsRequireOperand: true,
-    // The name of this option is somewhat misleading, as tabbing in
-    // MathQuill breaks you out of a nested context (fraction/script)
-    // if you're in one, but moves focus to the next input if you're
-    // not. Spaces (with this option enabled) are just ignored in the
-    // latter case.
-    //
-    // TODO(alex): In order to allow inputting mixed numbers, we will
-    // have to accept spaces in certain cases. The desired behavior is
-    // still to escape nested contexts if currently in one, but to
-    // insert a space if not (we don't expect mixed numbers in nested
-    // contexts). We should also limit to one consecutive space.
-    spaceBehavesLikeTab: true
-  };
-}
+const mathQuillInstance = MathQuill.getInterface(3);
+const createBaseConfig = () => ({
+  // LaTeX commands that, when typed, are immediately replaced by the
+  // appropriate symbol. This does not include ln, log, or any of the
+  // trig functions; those are always interpreted as commands.
+  autoCommands: "pi theta phi sqrt nthroot",
+  // Most of these autoOperatorNames are simply the MathQuill defaults.
+  // We have to list them all in order to add the `sen` operator (see
+  // comment below).
+  autoOperatorNames: ["arccos", "arcsin", "arctan", "arg", "cos", "cosh", "cot", "coth", "csc", "deg", "det", "dim", "exp", "gcd", "hom", "inf", "ker", "lg", "lim", "liminf", "limsup", "ln", "log", "max", "min", "Pr", "projlim", "sec",
+  // sen is used instead of sin in e.g. Portuguese
+  "sen", "sin", "sinh", "sup", "tan", "tanh"].join(" "),
+  // Pop the cursor out of super/subscripts on arithmetic operators
+  // or (in)equalities.
+  charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
+  // Prevent excessive super/subscripts or fractions from being
+  // created without operands, e.g. when somebody holds down a key
+  supSubsRequireOperand: true,
+  // The name of this option is somewhat misleading, as tabbing in
+  // MathQuill breaks you out of a nested context (fraction/script)
+  // if you're in one, but moves focus to the next input if you're
+  // not. Spaces (with this option enabled) are just ignored in the
+  // latter case.
+  //
+  // TODO(alex): In order to allow inputting mixed numbers, we will
+  // have to accept spaces in certain cases. The desired behavior is
+  // still to escape nested contexts if currently in one, but to
+  // insert a space if not (we don't expect mixed numbers in nested
+  // contexts). We should also limit to one consecutive space.
+  spaceBehavesLikeTab: true
+});
 
 /**
  * Creates a new [MathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)
@@ -419,29 +417,27 @@ const Letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"
 // We only consider numerals, variables, and Greek Letters to be proper
 // leaf nodes.
 const ValidLeaves = [...Numerals, ...GreekLetters, ...Letters.map(letter => letter.toLowerCase()), ...Letters.map(letter => letter.toUpperCase())];
-function getCursor(mathField) {
-  return mathField.__controller.cursor;
-}
+const mqNodeHasClass = (node, className) => node._el && node._el.classList.contains(className);
 function isFraction(node) {
-  return node.jQ && node.jQ.hasClass("mq-fraction");
+  return mqNodeHasClass(node, "mq-fraction");
 }
 function isNumerator(node) {
-  return node.jQ && node.jQ.hasClass("mq-numerator");
+  return mqNodeHasClass(node, "mq-numerator");
 }
 function isDenominator(node) {
-  return node.jQ && node.jQ.hasClass("mq-denominator");
+  return mqNodeHasClass(node, "mq-denominator");
 }
 function isSubScript(node) {
   // NOTE(charlie): MyScript has a structure whereby its superscripts seem
   // to be represented as a parent node with 'mq-sup-only' containing a
   // single child with 'mq-sup'.
-  return node.jQ && (node.jQ.hasClass("mq-sub-only") || node.jQ.hasClass("mq-sub"));
+  return mqNodeHasClass(node, "mq-sub-only") || mqNodeHasClass(node, "mq-sub");
 }
 function isSuperScript(node) {
   // NOTE(charlie): MyScript has a structure whereby its superscripts seem
   // to be represented as a parent node with 'mq-sup-only' containing a
   // single child with 'mq-sup'.
-  return node.jQ && (node.jQ.hasClass("mq-sup-only") || node.jQ.hasClass("mq-sup"));
+  return mqNodeHasClass(node, "mq-sup-only") || mqNodeHasClass(node, "mq-sup");
 }
 function isParens(node) {
   return node && node.ctrlSeq === "\\left(";
@@ -450,17 +446,17 @@ function isLeaf(node) {
   return node && node.ctrlSeq && ValidLeaves.includes(node.ctrlSeq.trim());
 }
 function isSquareRoot(node) {
-  return node.blocks && node.blocks[0].jQ && node.blocks[0].jQ.hasClass("mq-sqrt-stem");
+  return node.blocks && mqNodeHasClass(node.blocks[0], "mq-sqrt-stem");
 }
 function isNthRoot(node) {
-  return node.blocks && node.blocks[0].jQ && node.blocks[0].jQ.hasClass("mq-nthroot");
+  return node.blocks && mqNodeHasClass(node.blocks[0], "mq-nthroot");
 }
 function isNthRootIndex(node) {
-  return node.jQ && node.jQ.hasClass("mq-nthroot");
+  return mqNodeHasClass(node, "mq-nthroot");
 }
 function isInsideLogIndex(cursor) {
   const grandparent = cursor.parent.parent;
-  if (grandparent && grandparent.jQ.hasClass("mq-supsub")) {
+  if (grandparent && mqNodeHasClass(grandparent, "mq-supsub")) {
     const command = maybeFindCommandBeforeParens(grandparent);
     if (command && command.name === "\\log") {
       return true;
@@ -584,7 +580,7 @@ function getCursorContext(mathField) {
   }
 
   // First, try to find any fraction to the right, unimpeded.
-  const cursor = getCursor(mathField);
+  const cursor = mathField.cursor();
   let visitor = cursor;
   while (visitor[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
     if (isFraction(visitor[mathQuillInstance.R])) {
@@ -634,7 +630,7 @@ function handleBackspaceInRootIndex(mathField, cursor) {
     const latex = grandparent.latex();
     const reinsertionPoint = grandparent[mathQuillInstance.L];
     selectNode(grandparent, cursor);
-    const rootIsEmpty = grandparent.blocks[1].jQ.text() === "";
+    const rootIsEmpty = grandparent.blocks[1]._el.textContent === "";
     if (rootIsEmpty) {
       // If there is not content under the root then simply delete
       // the whole thing.
@@ -651,7 +647,7 @@ function handleBackspaceInRootIndex(mathField, cursor) {
 
       // Adjust the cursor to be to the left the sqrt.
       if (reinsertionPoint === MathFieldActionType.MQ_END) {
-        mathField.moveToDirEnd(mathQuillInstance.L);
+        mathField.moveToLeftEnd();
       } else {
         cursor.insRightOf(reinsertionPoint);
       }
@@ -677,7 +673,7 @@ function handleBackspaceInLogIndex(mathField, cursor) {
     }
     cursor.select();
     cursor.endSelection();
-    const isLogBodyEmpty = grandparent[mathQuillInstance.R].contentjQ.text() === "";
+    const isLogBodyEmpty = grandparent[mathQuillInstance.R]._el.textContent === "";
     if (isLogBodyEmpty) {
       // If there's no content inside the log's parens then delete the
       // whole thing.
@@ -758,7 +754,7 @@ function handleBackspaceInsideParens(mathField, cursor) {
 
   if (grandparent[mathQuillInstance.L].sub) {
     // if there is a subscript
-    if (grandparent[mathQuillInstance.L].sub.jQ.text()) {
+    if (grandparent[mathQuillInstance.L].sub._el.textContent) {
       // and it contains text
       // move the cursor to the right end of the subscript
       cursor.insAtRightEnd(grandparent[mathQuillInstance.L].sub);
@@ -795,7 +791,7 @@ function handleBackspaceAfterLigaturedSymbol(mathField) {
  * See inline comments for precise behavior of different cases.
  */
 function handleBackspace(mathField) {
-  const cursor = getCursor(mathField);
+  const cursor = mathField.cursor();
   if (!cursor.selection) {
     const parent = cursor.parent;
     const grandparent = parent.parent;
@@ -904,7 +900,7 @@ function handleRightArrow(mathField, cursor) {
   }
 }
 function handleArrow(mathField, key) {
-  const cursor = getCursor(mathField);
+  const cursor = mathField.cursor();
   if (key === "LEFT") {
     handleLeftArrow(mathField, cursor);
   } else if (key === "RIGHT") {
@@ -915,7 +911,7 @@ function handleArrow(mathField, key) {
 const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
 const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
 function handleExponent(mathField, key) {
-  const cursor = getCursor(mathField);
+  const cursor = mathField.cursor();
   // 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.
@@ -964,7 +960,7 @@ const KeysForJumpContext = {
  * Advances the cursor to the next logical position.
  */
 function handleJumpOut(mathField, key) {
-  const cursor = getCursor(mathField);
+  const cursor = mathField.cursor();
   const context = getCursorContext(mathField);
 
   // Validate that the current cursor context matches the key's intent.
@@ -1119,7 +1115,7 @@ const keyToMathquillMap = {
   },
 
   FRAC_EXCLUSIVE: mathQuill => {
-    const cursor = mathQuill.__controller.cursor;
+    const cursor = mathQuill.cursor();
     // If there's nothing to the left of the cursor, then we want to
     // leave the cursor to the left of the fraction after creating it.
     const shouldNavigateLeft = cursor[mathQuillInstance.L] === ActionType.MQ_END;
@@ -1261,18 +1257,16 @@ class MathWrapper {
     // HACK(charlie): We shouldn't reaching into MathQuill internals like
     // this, but it's the easiest way to allow us to manage the focus state
     // ourselves.
-    const controller = this.mathField.__controller;
-    controller.cursor.show();
+    this.mathField.cursor().show();
 
     // Set MathQuill's internal state to reflect the focus, otherwise it
     // will consistently try to hide the cursor on key-press and introduce
     // layout jank.
-    controller.blurred = false;
+    this.mathField.focus();
   }
   blur() {
-    const controller = this.mathField.__controller;
-    controller.cursor.hide();
-    controller.blurred = true;
+    this.mathField.cursor().hide();
+    this.mathField.blur();
   }
 
   /**
@@ -1320,10 +1314,10 @@ class MathWrapper {
       if (el.hasAttribute("mq-root-block")) {
         // If we're in the empty area place the cursor at the right
         // end of the expression.
-        cursor.insAtRightEnd(this.mathField.__controller.root);
+        cursor.insAtRightEnd(this.mathField.controller().root);
       } else {
         // Otherwise place beside the element at x, y.
-        const controller = this.mathField.__controller;
+        const controller = this.mathField.controller();
         const pageX = x - document.body.scrollLeft;
         const pageY = y - document.body.scrollTop;
         controller.seek($(el), pageX, pageY).cursor.startSelection();
@@ -1349,7 +1343,7 @@ class MathWrapper {
   // note(Matthew): extracted this logic to share it elsewhere,
   // but it's part of the public MathWrapper API
   getCursor() {
-    return getCursor(this.mathField);
+    return this.mathField.cursor();
   }
 
   // note(Matthew): extracted this logic to keep this file focused,
@@ -1686,7 +1680,7 @@ class MathInput extends React.Component {
       // Pre-emptively check if the input has any child nodes; if not, the
       // input is empty, so we throw the cursor at the start.
       if (!this._root.hasChildNodes()) {
-        cursor.insAtLeftEnd(this.mathField.mathField.__controller.root);
+        cursor.insAtLeftEnd(this.mathField.mathField.controller().root);
         return;
       }
 
@@ -1734,9 +1728,9 @@ class MathInput extends React.Component {
       // or left of all of the math, so we place the cursor at the end to
       // which it's closest.
       if (Math.abs(x - right) < Math.abs(x - left)) {
-        cursor.insAtRightEnd(this.mathField.mathField.__controller.root);
+        cursor.insAtRightEnd(this.mathField.mathField.controller().root);
       } else {
-        cursor.insAtLeftEnd(this.mathField.mathField.__controller.root);
+        cursor.insAtLeftEnd(this.mathField.mathField.controller().root);
       }
       // In that event, we need to update the cursor context ourselves.
       this.props.keypadElement && this.props.keypadElement.setCursor({
@@ -2003,19 +1997,6 @@ class MathInput extends React.Component {
         this.props.keypadElement && this.props.keypadElement.setCursor(cursor);
       }
     });
-
-    // NOTE(charlie): MathQuill binds this handler to manage its
-    // drag-to-select behavior. For reasons that I can't explain, the event
-    // itself gets triggered even if you tap slightly outside of the
-    // bound container (maybe 5px outside of any boundary). As a result, the
-    // cursor appears when tapping at those locations, even though the input
-    // itself doesn't receive any touch start or mouse down event and, as
-    // such, doesn't focus itself. This makes for a confusing UX, as the
-    // cursor appears, but the keypad does not and the input otherwise
-    // treats itself as unfocused. Thankfully, we don't need this behavior--
-    // we manage all of the cursor interactions ourselves--so we can safely
-    // unbind the handler.
-    this.mathField.mathField.__controller.container.unbind("mousedown.mathquill");
     this.mathField.setContent(this.props.value);
     this._updateInputPadding();
     this._container = ReactDOM.findDOMNode(this);