@khanacademy/math-input 17.0.5 → 17.0.7

package/dist/components/input/math-wrapper.d.ts

@@ -31,9 +31,9 @@ declare class MathWrapper {
      *                         should be placed
      */
     setCursorPosition(x: number, y: number, hitNode: HTMLElement): void;
-    getCursor(): any;
+    getCursor(): import("mathquill").Cursor;
     contextForCursor(): import("./cursor-contexts").CursorContext;
-    getSelection(): any;
+    getSelection(): import("mathquill").MQSelection | undefined;
     getContent(): string;
     setContent(latex: string): void;
     isEmpty(): boolean;

package/dist/components/input/mathquill-types.d.ts

@@ -7,17 +7,60 @@ export type MathFieldConfig = MathQuill.v3.Config;
  * the ones listed here.
  * https://docs.mathquill.com/en/latest/Api_Methods/
  */
-export type MathFieldInterface = MathQuill.v3.EditableMathQuill;
+export type MathFieldInterface = MathQuill.v3.EditableMathQuill & {
+    cursor: () => MathQuill.Cursor;
+    controller: () => MathQuill.Controller;
+};
 export declare enum MathFieldActionType {
     WRITE = "write",
     CMD = "cmd",
     KEYSTROKE = "keystroke",
     MQ_END = 0
 }
+export type MathFieldUpdaterCallback = (mathField: MathFieldInterface, key: Key) => void;
 /**
- * The MathQuill MathField Cursor
- * it's not part of the public API for MathQuill,
- * we reach into the internals to get it
+ * The MathQuill API (see mathuill.d.ts) does not include types
+ * for cursor() and controller(), and adding these types there
+ * in the MathQuill repo causes unexpected conflicts with other types.
+ *
+ * We don't want to use the cursor and controller default type `any`
+ * so we declare the types here.
  */
-export type MathFieldCursor = any;
-export type MathFieldUpdaterCallback = (mathField: MathFieldInterface, key: Key) => void;
+declare module "mathquill" {
+    interface MQNode extends ControllerRoot {
+        id: number;
+        parent: NodeBase;
+    }
+    interface MQSelection {
+        id: number;
+        getEnd(dir: number): number;
+    }
+    interface NodeBase extends MQNode {
+        ctrlSeq: string | undefined;
+        blocks: MQNode;
+        latex(): string;
+    }
+    interface Cursor {
+        parent: MQNode;
+        selection: MQSelection | undefined;
+        select(): void;
+        endSelection(): void;
+        show(): Cursor;
+        hide(): Cursor;
+        insAtRightEnd(root: ControllerRoot): Cursor;
+        insRightOf(el: MQNode): Cursor;
+        insLeftOf(el: MQNode): Cursor;
+        startSelection(): void;
+    }
+    interface Controller {
+        parent: string;
+        root: ControllerRoot;
+        cursor: Cursor;
+        backspace(): Controller;
+        seek(targetElm: HTMLElement, clientX: number, _clientY: number): Controller;
+    }
+    interface ControllerRoot {
+        controller: Controller;
+        cursor?: Cursor;
+    }
+}

package/dist/es/index.js

@@ -7,7 +7,7 @@ import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import $ from 'jquery';
+import { SpeechRuleEngine } from '@khanacademy/mathjax-renderer';
 import MathQuill from 'mathquill';
 import { View as View$1 } from '@khanacademy/wonder-blocks-core';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
@@ -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 = "17.0.5";
+const libVersion = "17.0.7";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -339,6 +339,50 @@ let CursorContext = /*#__PURE__*/function (CursorContext) {
   return CursorContext;
 }({});
 
+var _process;
+const DecimalSeparator = {
+  COMMA: ",",
+  PERIOD: "."
+};
+
+// NOTES(kevinb):
+// - In order to get the correct decimal separator for the current locale,
+//   the locale must bet set using `setLocale(kaLocale)` which can be
+//   imported from wonder-blocks-i18n.
+// - Some languages/locales use different decimal separators than the ones
+//   listed here.  Much of the Arab world uses U+066C.
+const decimalSeparator = getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
+const CDOT_ONLY = ["az", "cs", "da", "de", "hu", "hy", "kk", "ky", "lt", "lv", "nb", "sk", "sr", "sv", "uz"];
+const TIMES_ONLY = ["fr", "tr", "pt-pt"];
+
+/**
+ * convertDotToTimes (aka `times`) is an option the content creators have to
+ * use × (TIMES) rather than · (CDOT) for multiplication (for younger learners).
+ * Some locales _only_ use one or the other for all multiplication regardless
+ * of age.
+ *
+ * convertDotToTimesByLocale overrides convertDotToTimes for those locales.
+ *
+ * @param {boolean} convertDotToTimes - the setting set by content creators
+ * @returns {boolean} - true to convert to × (TIMES), false to use · (CDOT)
+ */
+function convertDotToTimesByLocale(convertDotToTimes) {
+  const locale = getLocale();
+  if (CDOT_ONLY.includes(locale)) {
+    return false;
+  }
+  if (TIMES_ONLY.includes(locale)) {
+    return true;
+  }
+  return convertDotToTimes;
+}
+
+/**
+ * Use this to avoid running code that should not run in Jest.
+ **/
+const inJest = typeof process !== "undefined" && !!((_process = process) != null && (_process = _process.env) != null && _process.JEST_WORKER_ID);
+// Explicitly checking for undefined because Cypress throws an error
+
 // 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(3);
@@ -390,6 +434,12 @@ function createMathField(container, configCallback) {
   const mathField = mathQuillInstance.MathField(container, config)
   // translated in ./math-input.tsx
   .setAriaLabel(i18n._("Math input box"));
+
+  // We should avoid running SpeechRuleEngine.setup() in Jest. It makes an
+  //   HTTP request to fetch non-english speech rules, and cannot be easily
+  //   mocked in consuming packages now that we do not bundle source code.
+  //   When it eventually times out, it will cause arbitrary test failures.
+  !inJest && SpeechRuleEngine.setup().then(SRE => mathField.setMathspeakOverride(SRE.texToSpeech));
   return mathField;
 }
 
@@ -408,9 +458,12 @@ let MathFieldActionType = /*#__PURE__*/function (MathFieldActionType) {
 }({});
 
 /**
- * The MathQuill MathField Cursor
- * it's not part of the public API for MathQuill,
- * we reach into the internals to get it
+ * The MathQuill API (see mathuill.d.ts) does not include types
+ * for cursor() and controller(), and adding these types there
+ * in the MathQuill repo causes unexpected conflicts with other types.
+ *
+ * We don't want to use the cursor and controller default type `any`
+ * so we declare the types here.
  */
 
 const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
@@ -825,43 +878,6 @@ function handleBackspace(mathField) {
   }
 }
 
-const DecimalSeparator = {
-  COMMA: ",",
-  PERIOD: "."
-};
-
-// NOTES(kevinb):
-// - In order to get the correct decimal separator for the current locale,
-//   the locale must bet set using `setLocale(kaLocale)` which can be
-//   imported from wonder-blocks-i18n.
-// - Some languages/locales use different decimal separators than the ones
-//   listed here.  Much of the Arab world uses U+066C.
-const decimalSeparator = getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
-const CDOT_ONLY = ["az", "cs", "da", "de", "hu", "hy", "kk", "ky", "lt", "lv", "nb", "sk", "sr", "sv", "uz"];
-const TIMES_ONLY = ["fr", "tr", "pt-pt"];
-
-/**
- * convertDotToTimes (aka `times`) is an option the content creators have to
- * use × (TIMES) rather than · (CDOT) for multiplication (for younger learners).
- * Some locales _only_ use one or the other for all multiplication regardless
- * of age.
- *
- * convertDotToTimesByLocale overrides convertDotToTimes for those locales.
- *
- * @param {boolean} convertDotToTimes - the setting set by content creators
- * @returns {boolean} - true to convert to × (TIMES), false to use · (CDOT)
- */
-function convertDotToTimesByLocale(convertDotToTimes) {
-  const locale = getLocale();
-  if (CDOT_ONLY.includes(locale)) {
-    return false;
-  }
-  if (TIMES_ONLY.includes(locale)) {
-    return true;
-  }
-  return convertDotToTimes;
-}
-
 function handleLeftArrow(mathField, cursor) {
   // If we're inside a function, and just after the left parentheses, we
   // need to skip the entire function name, rather than move the cursor
@@ -1323,7 +1339,7 @@ class MathWrapper {
         const controller = this.mathField.controller();
         const pageX = x - document.body.scrollLeft;
         const pageY = y - document.body.scrollTop;
-        controller.seek($(el), pageX, pageY).cursor.startSelection();
+        controller.seek(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