@khanacademy/perseus 6.2.2 → 6.3.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/perseus
 
+## 6.3.1
+
+### Patch Changes
+
+-   Updated dependencies [cf29ed88]
+    -   @khanacademy/math-input@4.3.0
+
+## 6.3.0
+
+### Minor Changes
+
+-   d497118e: MathInput exports tools for generating MathFields, replacing the need for direct MathQuill access
+
+### Patch Changes
+
+-   Updated dependencies [e7d21b67]
+-   Updated dependencies [d497118e]
+-   Updated dependencies [eceb4510]
+    -   @khanacademy/math-input@4.2.0
+
 ## 6.2.2
 
 ### Patch Changes

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

@@ -1,3 +1,4 @@
+import { MathFieldInterface } from "@khanacademy/math-input";
 import * as React from "react";
 import type { ButtonSetsType } from "./tex-buttons";
 type ButtonsVisibleType = "always" | "never" | "focused";
@@ -22,6 +23,8 @@ type State = {
 };
 declare class MathInput extends React.Component<Props, State> {
     mouseDown: boolean;
+    __mathFieldWrapperRef: HTMLSpanElement | null;
+    __mathField: MathFieldInterface | null;
     static defaultProps: DefaultProps;
     state: State;
     componentDidMount(): void;
@@ -32,7 +35,7 @@ declare class MathInput extends React.Component<Props, State> {
     handleBlur: (arg1: React.FocusEvent) => void;
     _shouldShowButtons: () => boolean;
     insert: (value: any) => void;
-    mathField: (arg1: any) => any;
+    mathField: () => MathFieldInterface | null;
     focus: () => void;
     blur: () => void;
     render(): React.ReactNode;

package/dist/components/math-input.js.flow

@@ -4,6 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
+import { MathFieldInterface } from "@khanacademy/math-input";
 import * as React from "react";
 import type { ButtonSetsType } from "./tex-buttons";
 declare type ButtonsVisibleType = "always" | "never" | "focused";
@@ -28,6 +29,8 @@ declare type State = {|
 |};
 declare class MathInput extends React.Component<Props, State> {
   mouseDown: boolean;
+  __mathFieldWrapperRef: HTMLSpanElement | null;
+  __mathField: MathFieldInterface | null;
   static defaultProps: DefaultProps;
   state: State;
   componentDidMount(): void;
@@ -38,7 +41,7 @@ declare class MathInput extends React.Component<Props, State> {
   handleBlur: (arg1: SyntheticFocusEvent<>) => void;
   _shouldShowButtons: () => boolean;
   insert: (value: any) => void;
-  mathField: (arg1: any) => any;
+  mathField: () => MathFieldInterface | null;
   focus: () => void;
   blur: () => void;
   render(): React.Node;

package/dist/components/tex-buttons.d.ts

@@ -1,6 +1,10 @@
 import { Keys } from "@khanacademy/math-input";
 import * as React from "react";
-type ButtonSet = (props: any) => [React.ReactNode, Keys];
+type ButtonSet = (props: any) => [
+    React.ReactNode,
+    Keys,
+    string
+];
 type ButtonSets = {
     readonly [key: string]: ReadonlyArray<ButtonSet>;
 };

package/dist/components/tex-buttons.js.flow

@@ -6,7 +6,7 @@
  */
 import { Keys } from "@khanacademy/math-input";
 import * as React from "react";
-declare type ButtonSet = (props: any) => [React.Node, Keys];
+declare type ButtonSet = (props: any) => [React.Node, Keys, string];
 declare type ButtonSets = {
   +[key: string]: $ReadOnlyArray<ButtonSet>,
 };

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import * as KAS from '@khanacademy/kas';
-import { keyTranslator, KeypadInput, KeypadType, keypadElementPropType, LegacyKeypad } from '@khanacademy/math-input';
+import { keyTranslator, createMathField, mathQuillInstance, KeypadInput, KeypadType, keypadElementPropType, LegacyKeypad } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
@@ -8,7 +8,6 @@ import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import _, { debounce } from 'underscore';
 import $ from 'jquery';
-import MathQuill from 'mathquill';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import PropTypes from 'prop-types';
@@ -138,10 +137,10 @@ const symbStyle = {
 const basic = [() => [/*#__PURE__*/React.createElement("span", {
   key: "plus",
   style: slightlyBig
-}, "+"), "PLUS"], () => [/*#__PURE__*/React.createElement("span", {
+}, "+"), "PLUS", i18n._("Plus")], () => [/*#__PURE__*/React.createElement("span", {
   key: "minus",
   style: prettyBig
-}, "-"), "MINUS"],
+}, "-"), "MINUS", i18n._("Minus")],
 // TODO(joel) - display as \cdot when appropriate
 props => {
   const {
@@ -151,12 +150,12 @@ props => {
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "times",
       style: prettyBig
-    }, i18n.doNotTranslate("\\times")), "TIMES"];
+    }, i18n.doNotTranslate("\\times")), "TIMES", i18n._("Multiply")];
   }
   return [/*#__PURE__*/React.createElement(TeX, {
     key: "times",
     style: prettyBig
-  }, i18n.doNotTranslate("\\cdot")), "CDOT"];
+  }, i18n.doNotTranslate("\\cdot")), "CDOT", i18n._("Multiply")];
 }, () => {
   const {
     TeX
@@ -164,7 +163,7 @@ props => {
   return [/*#__PURE__*/React.createElement(TeX, {
     key: "frac",
     style: prettyBig
-  }, i18n.doNotTranslate("\\frac{x}{y}")), "FRAC"];
+  }, i18n.doNotTranslate("\\frac{x}{y}")), "FRAC", i18n._("Fraction, excluding the current expression")];
 }];
 const buttonSets = {
   basic,
@@ -174,7 +173,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "div"
-    }, i18n.doNotTranslate("\\div")), "DIVIDE"];
+    }, i18n.doNotTranslate("\\div")), "DIVIDE", i18n._("Divide")];
   }]),
   trig: [() => {
     const {
@@ -182,21 +181,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "sin"
-    }, i18n.doNotTranslate("\\sin")), "SIN"];
+    }, i18n.doNotTranslate("\\sin")), "SIN", i18n._("Sine")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "cos"
-    }, i18n.doNotTranslate("\\cos")), "COS"];
+    }, i18n.doNotTranslate("\\cos")), "COS", i18n._("Cosine")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "tan"
-    }, i18n.doNotTranslate("\\tan")), "TAN"];
+    }, i18n.doNotTranslate("\\tan")), "TAN", i18n._("Tangent")];
   }, () => {
     const {
       TeX
@@ -204,7 +203,7 @@ const buttonSets = {
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "theta",
       style: symbStyle
-    }, i18n.doNotTranslate("\\theta")), "THETA"];
+    }, i18n.doNotTranslate("\\theta")), "THETA", i18n._("Theta")];
   }, () => {
     const {
       TeX
@@ -216,7 +215,7 @@ const buttonSets = {
     }, i18n.doNotTranslate("phi")), /*#__PURE__*/React.createElement(TeX, {
       key: "pi",
       style: symbStyle
-    }, i18n.doNotTranslate("\\phi"))), "PHI"];
+    }, i18n.doNotTranslate("\\phi"))), "PHI", i18n._("Phi")];
   }],
   prealgebra: [() => {
     const {
@@ -224,7 +223,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "sqrt"
-    }, i18n.doNotTranslate("\\sqrt{x}")), "SQRT"];
+    }, i18n.doNotTranslate("\\sqrt{x}")), "SQRT", i18n._("Square root")];
   },
   // TODO(joel) - how does desmos do this?
   () => {
@@ -233,7 +232,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "nthroot"
-    }, i18n.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3"];
+    }, i18n.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3", i18n._("Cube root")];
   }, () => {
     const {
       TeX
@@ -241,7 +240,7 @@ const buttonSets = {
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "pow",
       style: slightlyBig
-    }, i18n.doNotTranslate("a^b")), "POW"];
+    }, i18n.doNotTranslate("a^b")), "POW", i18n._("Exponent")];
   }, () => {
     const {
       TeX
@@ -249,7 +248,7 @@ const buttonSets = {
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "pi",
       style: slightlyBig
-    }, i18n.doNotTranslate("\\pi")), "PI"];
+    }, i18n.doNotTranslate("\\pi")), "PI", i18n._("Pi")];
   }],
   logarithms: [() => {
     const {
@@ -257,21 +256,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "log"
-    }, i18n.doNotTranslate("\\log")), "LOG"];
+    }, i18n.doNotTranslate("\\log")), "LOG", i18n._("Logarithm with base 10")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "ln"
-    }, i18n.doNotTranslate("\\ln")), "LN"];
+    }, i18n.doNotTranslate("\\ln")), "LN", i18n._("Natural logarithm")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "log_b"
-    }, i18n.doNotTranslate("\\log_b")), "LOG_B"];
+    }, i18n.doNotTranslate("\\log_b")), "LOG_B", i18n._("Logarithm with custom base")];
   }],
   "basic relations": [() => {
     const {
@@ -279,21 +278,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "eq"
-    }, "="), "EQUAL"];
+    }, "="), "EQUAL", i18n._("Equals sign")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "lt"
-    }, i18n.doNotTranslate("\\lt")), "LT"];
+    }, i18n.doNotTranslate("\\lt")), "LT", i18n._("Less than sign")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "gt"
-    }, i18n.doNotTranslate("\\gt")), "GT"];
+    }, i18n.doNotTranslate("\\gt")), "GT", i18n._("Greater than sign")];
   }],
   "advanced relations": [() => {
     const {
@@ -301,21 +300,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "neq"
-    }, i18n.doNotTranslate("\\neq")), "NEQ"];
+    }, i18n.doNotTranslate("\\neq")), "NEQ", i18n._("Not-equals sign")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "leq"
-    }, i18n.doNotTranslate("\\leq")), "LEQ"];
+    }, i18n.doNotTranslate("\\leq")), "LEQ", i18n._("Less than or equal to sign")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "geq"
-    }, i18n.doNotTranslate("\\geq")), "GEQ"];
+    }, i18n.doNotTranslate("\\geq")), "GEQ", i18n._("Greater than or equal to sign")];
   }]
 };
 const buttonSetsPropType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
@@ -337,7 +336,8 @@ class TexButtons extends React.Component {
         // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'. | TS2339 - Property 'key' does not exist on type 'boolean | ReactChild | ReactFragment | ReactPortal'.
         ,
         key: symbol[0].key,
-        type: "button"
+        type: "button",
+        "aria-label": symbol[2]
       }, symbol[0]);
     }));
     const buttonPopup = _(buttonRows).map((row, i) => {
@@ -372,6 +372,8 @@ class MathInput extends React.Component {
   constructor(...args) {
     super(...args);
     this.mouseDown = void 0;
+    this.__mathFieldWrapperRef = null;
+    this.__mathField = null;
     this.state = {
       focused: false
     };
@@ -426,12 +428,11 @@ class MathInput extends React.Component {
       return this.state.focused;
     };
     this.insert = value => {
-      // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
       const input = this.mathField();
       const inputModifier = customKeyTranslator[value];
       if (inputModifier) {
         inputModifier(input, value);
-        input.focus();
+        input == null ? void 0 : input.focus();
         return;
       }
 
@@ -442,131 +443,98 @@ class MathInput extends React.Component {
       if (_(value).isFunction()) {
         value(input);
       } else if (value[0] === "\\") {
-        input.cmd(value).focus();
+        input == null ? void 0 : input.cmd(value).focus();
       } else {
-        input.write(value).focus();
+        input == null ? void 0 : input.write(value).focus();
+      }
+      input == null ? void 0 : input.focus();
+    };
+    this.mathField = () => {
+      if (!this.__mathField && this.__mathFieldWrapperRef) {
+        // Initialize MathQuill.MathField instance
+        this.__mathField = createMathField(this.__mathFieldWrapperRef, baseConfig => _extends({}, baseConfig, {
+          handlers: {
+            edit: mathField => {
+              // This handler is guaranteed to be called on change, but
+              // unlike React it sometimes generates false positives.
+              // One of these is on initialization (with an empty string
+              // value), so we have to guard against that below.
+              let value = mathField.latex();
+
+              // Provide a MathQuill-compatible way to generate the
+              // not-equals sign without pasting unicode or typing TeX
+              value = value.replace(/<>/g, "\\ne");
+
+              // Use the specified symbol to represent multiplication
+              // TODO(alex): Add an option to disallow variables, in
+              // which case 'x' should get converted to '\\times'
+              if (this.props.convertDotToTimes) {
+                value = value.replace(/\\cdot/g, "\\times");
+
+                // Preserve cursor position in the common case:
+                // typing '*' to insert a multiplication sign.
+                // We do this by modifying internal MathQuill state
+                // directly, instead of waiting for `.latex()` to be
+                // called in `componentDidUpdate()`.
+                const left = mathField.__controller.cursor[mathQuillInstance.L];
+                if (left && left.ctrlSeq === "\\cdot ") {
+                  mathField.__controller.backspace();
+                  mathField.cmd("\\times");
+                }
+              } else {
+                value = value.replace(/\\times/g, "\\cdot");
+              }
+              if (this.props.value !== value) {
+                this.props.onChange(value);
+              }
+            },
+            enter: () => {
+              // NOTE(kevinb): This isn't how answers to exercises are
+              // submitted.  The actual mechanism for this can be found
+              // in exercise-problem-template.jsx, see `handleSubmit`.
+
+              // This handler is called when the user presses the enter
+              // key. Since this isn't an actual <input> element, we have
+              // to manually trigger the usually automatic form submit.
+              if (this.__mathFieldWrapperRef) {
+                $(this.__mathFieldWrapperRef).submit();
+              }
+            },
+            upOutOf: mathField => {
+              // This handler is called when the user presses the up
+              // arrow key, but there is nowhere in the expression to go
+              // up to (no numerator or exponent). For ease of use,
+              // interpret this as an attempt to create an exponent.
+              mathField.typedText("^");
+            }
+          }
+        }));
       }
-      input.focus();
-    };
-    this.mathField = options => {
-      // The MathQuill API is now "versioned" through its own "InterVer"
-      // system.
-      // See: https://github.com/mathquill/mathquill/pull/459
-      const MQ = MathQuill.getInterface(2);
-
-      // MathQuill.MathField takes a DOM node, MathQuill-ifies it if it's
-      // seeing that node for the first time, then returns the associated
-      // MathQuill object for that node. It is stable - will always return
-      // the same object when called on the same DOM node.
-      // eslint-disable-next-line react/no-string-refs
-      return MQ.MathField(ReactDOM__default.findDOMNode(this.refs.mathinput), options);
+      return this.__mathField;
     };
     this.focus = () => {
-      // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-      this.mathField().focus();
+      var _this$mathField;
+      (_this$mathField = this.mathField()) == null ? void 0 : _this$mathField.focus();
       this.setState({
         focused: true
       });
     };
     this.blur = () => {
-      // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-      this.mathField().blur();
+      var _this$mathField2;
+      (_this$mathField2 = this.mathField()) == null ? void 0 : _this$mathField2.blur();
       this.setState({
         focused: false
       });
     };
   }
   componentDidMount() {
+    var _this$mathField3;
     window.addEventListener("mousedown", this.handleMouseDown);
     window.addEventListener("mouseup", this.handleMouseUp);
-    let initialized = false;
-
-    // Initialize MathQuill.MathField instance
-    this.mathField({
-      // LaTeX commands that, when typed, are immediately replaced by the
-      // appropriate symbol. This does not include ln, log, or any of the
-      // trig functions; those are always interpreted as commands.
-      autoCommands: "pi theta phi sqrt nthroot",
-      // Pop the cursor out of super/subscripts on arithmetic operators
-      // or (in)equalities.
-      charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
-      // Prevent excessive super/subscripts or fractions from being
-      // created without operands, e.g. when somebody holds down a key
-      supSubsRequireOperand: true,
-      // The name of this option is somewhat misleading, as tabbing in
-      // MathQuill breaks you out of a nested context (fraction/script)
-      // if you're in one, but moves focus to the next input if you're
-      // not. Spaces (with this option enabled) are just ignored in the
-      // latter case.
-      //
-      // TODO(alex): In order to allow inputting mixed numbers, we will
-      // have to accept spaces in certain cases. The desired behavior is
-      // still to escape nested contexts if currently in one, but to
-      // insert a space if not (we don't expect mixed numbers in nested
-      // contexts). We should also limit to one consecutive space.
-      spaceBehavesLikeTab: true,
-      handlers: {
-        edited: mathField => {
-          // This handler is guaranteed to be called on change, but
-          // unlike React it sometimes generates false positives.
-          // One of these is on initialization (with an empty string
-          // value), so we have to guard against that below.
-          let value = mathField.latex();
-
-          // Provide a MathQuill-compatible way to generate the
-          // not-equals sign without pasting unicode or typing TeX
-          value = value.replace(/<>/g, "\\ne");
-
-          // Use the specified symbol to represent multiplication
-          // TODO(alex): Add an option to disallow variables, in
-          // which case 'x' should get converted to '\\times'
-          if (this.props.convertDotToTimes) {
-            value = value.replace(/\\cdot/g, "\\times");
-
-            // Preserve cursor position in the common case:
-            // typing '*' to insert a multiplication sign.
-            // We do this by modifying internal MathQuill state
-            // directly, instead of waiting for `.latex()` to be
-            // called in `componentDidUpdate()`.
-            const left = mathField.__controller.cursor[MathQuill.L];
-            if (left && left.ctrlSeq === "\\cdot ") {
-              mathField.__controller.backspace();
-              mathField.cmd("\\times");
-            }
-          } else {
-            value = value.replace(/\\times/g, "\\cdot");
-          }
-          if (initialized && this.props.value !== value) {
-            this.props.onChange(value);
-          }
-        },
-        enter: () => {
-          // NOTE(kevinb): This isn't how answers to exercises are
-          // submitted.  The actual mechanism for this can be found
-          // in exercise-problem-template.jsx, see `handleSubmit`.
-
-          // This handler is called when the user presses the enter
-          // key. Since this isn't an actual <input> element, we have
-          // to manually trigger the usually automatic form submit.
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'submit' does not exist on type 'JQueryStatic'.
-          $(ReactDOM__default.findDOMNode(this.refs.mathinput)).submit();
-        },
-        upOutOf: mathField => {
-          // This handler is called when the user presses the up
-          // arrow key, but there is nowhere in the expression to go
-          // up to (no numerator or exponent). For ease of use,
-          // interpret this as an attempt to create an exponent.
-          mathField.typedText("^");
-        }
-      }
-    });
 
     // Ideally, we would be able to pass an initial value directly into
-    // the constructor above
-    // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-    this.mathField().latex(this.props.value);
-    initialized = true;
+    // the constructor
+    (_this$mathField3 = this.mathField()) == null ? void 0 : _this$mathField3.latex(this.props.value);
   }
   componentWillUnmount() {
     window.removeEventListener("mousedown", this.handleMouseDown);
@@ -609,10 +577,8 @@ class MathInput extends React.Component {
         display: "inline-block"
       }
     }, /*#__PURE__*/React.createElement("span", {
-      className: className
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "mathinput",
+      className: className,
+      ref: ref => this.__mathFieldWrapperRef = ref,
       "aria-label": this.props.labelText,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur