@khanacademy/perseus 6.1.0 → 6.2.1

package/dist/index.js

@@ -209,10 +209,10 @@ const symbStyle = {
 const basic = [() => [/*#__PURE__*/React__namespace.createElement("span", {
   key: "plus",
   style: slightlyBig
-}, "+"), "+"], () => [/*#__PURE__*/React__namespace.createElement("span", {
+}, "+"), "PLUS"], () => [/*#__PURE__*/React__namespace.createElement("span", {
   key: "minus",
   style: prettyBig
-}, "-"), "-"],
+}, "-"), "MINUS"],
 // TODO(joel) - display as \cdot when appropriate
 props => {
   const {
@@ -222,12 +222,12 @@ props => {
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "times",
       style: prettyBig
-    }, i18n__namespace.doNotTranslate("\\times")), "\\times"];
+    }, i18n__namespace.doNotTranslate("\\times")), "TIMES"];
   }
   return [/*#__PURE__*/React__namespace.createElement(TeX, {
     key: "times",
     style: prettyBig
-  }, i18n__namespace.doNotTranslate("\\cdot")), "\\cdot"];
+  }, i18n__namespace.doNotTranslate("\\cdot")), "CDOT"];
 }, () => {
   const {
     TeX
@@ -235,17 +235,7 @@ props => {
   return [/*#__PURE__*/React__namespace.createElement(TeX, {
     key: "frac",
     style: prettyBig
-  }, i18n__namespace.doNotTranslate("\\frac{x}{y}")),
-  // If there's something in the input that can become part of a
-  // fraction, typing "/" puts it in the numerator. If not, typing
-  // "/" does nothing. In that case, enter a \frac.
-  input => {
-    const contents = input.latex();
-    input.typedText("/");
-    if (input.latex() === contents) {
-      input.cmd("\\frac");
-    }
-  }];
+  }, i18n__namespace.doNotTranslate("\\frac{x}{y}")), "FRAC"];
 }];
 const buttonSets = {
   basic,
@@ -255,7 +245,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "div"
-    }, i18n__namespace.doNotTranslate("\\div")), "\\div"];
+    }, i18n__namespace.doNotTranslate("\\div")), "DIVIDE"];
   }]),
   trig: [() => {
     const {
@@ -263,21 +253,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "sin"
-    }, i18n__namespace.doNotTranslate("\\sin")), "\\sin"];
+    }, i18n__namespace.doNotTranslate("\\sin")), "SIN"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "cos"
-    }, i18n__namespace.doNotTranslate("\\cos")), "\\cos"];
+    }, i18n__namespace.doNotTranslate("\\cos")), "COS"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "tan"
-    }, i18n__namespace.doNotTranslate("\\tan")), "\\tan"];
+    }, i18n__namespace.doNotTranslate("\\tan")), "TAN"];
   }, () => {
     const {
       TeX
@@ -285,7 +275,7 @@ const buttonSets = {
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "theta",
       style: symbStyle
-    }, i18n__namespace.doNotTranslate("\\theta")), "\\theta"];
+    }, i18n__namespace.doNotTranslate("\\theta")), "THETA"];
   }, () => {
     const {
       TeX
@@ -297,7 +287,7 @@ const buttonSets = {
     }, i18n__namespace.doNotTranslate("phi")), /*#__PURE__*/React__namespace.createElement(TeX, {
       key: "pi",
       style: symbStyle
-    }, i18n__namespace.doNotTranslate("\\phi"))), "\\phi"];
+    }, i18n__namespace.doNotTranslate("\\phi"))), "PHI"];
   }],
   prealgebra: [() => {
     const {
@@ -305,7 +295,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "sqrt"
-    }, i18n__namespace.doNotTranslate("\\sqrt{x}")), "\\sqrt"];
+    }, i18n__namespace.doNotTranslate("\\sqrt{x}")), "SQRT"];
   },
   // TODO(joel) - how does desmos do this?
   () => {
@@ -314,10 +304,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "nthroot"
-    }, i18n__namespace.doNotTranslate("\\sqrt[3]{x}")), input => {
-      input.typedText("nthroot3");
-      input.keystroke("Right");
-    }];
+    }, i18n__namespace.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3"];
   }, () => {
     const {
       TeX
@@ -325,17 +312,7 @@ const buttonSets = {
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "pow",
       style: slightlyBig
-    }, i18n__namespace.doNotTranslate("a^b")), input => {
-      const contents = input.latex();
-      input.typedText("^");
-
-      // If the input hasn't changed (for example, if we're
-      // attempting to add an exponent on an empty input or an empty
-      // denominator), insert our own "a^b"
-      if (input.latex() === contents) {
-        input.typedText("a^b");
-      }
-    }];
+    }, i18n__namespace.doNotTranslate("a^b")), "POW"];
   }, () => {
     const {
       TeX
@@ -343,7 +320,7 @@ const buttonSets = {
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "pi",
       style: slightlyBig
-    }, i18n__namespace.doNotTranslate("\\pi")), "\\pi"];
+    }, i18n__namespace.doNotTranslate("\\pi")), "PI"];
   }],
   logarithms: [() => {
     const {
@@ -351,27 +328,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "log"
-    }, i18n__namespace.doNotTranslate("\\log")), "\\log"];
+    }, i18n__namespace.doNotTranslate("\\log")), "LOG"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "ln"
-    }, i18n__namespace.doNotTranslate("\\ln")), "\\ln"];
+    }, i18n__namespace.doNotTranslate("\\ln")), "LN"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "log_b"
-    }, i18n__namespace.doNotTranslate("\\log_b")), input => {
-      input.typedText("log_");
-      input.keystroke("Right");
-      input.typedText("(");
-      input.keystroke("Left");
-      input.keystroke("Left");
-    }];
+    }, i18n__namespace.doNotTranslate("\\log_b")), "LOG_B"];
   }],
   "basic relations": [() => {
     const {
@@ -379,21 +350,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "eq"
-    }, "="), "="];
+    }, "="), "EQUAL"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "lt"
-    }, i18n__namespace.doNotTranslate("\\lt")), "\\lt"];
+    }, i18n__namespace.doNotTranslate("\\lt")), "LT"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "gt"
-    }, i18n__namespace.doNotTranslate("\\gt")), "\\gt"];
+    }, i18n__namespace.doNotTranslate("\\gt")), "GT"];
   }],
   "advanced relations": [() => {
     const {
@@ -401,21 +372,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "neq"
-    }, i18n__namespace.doNotTranslate("\\neq")), "\\neq"];
+    }, i18n__namespace.doNotTranslate("\\neq")), "NEQ"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "leq"
-    }, i18n__namespace.doNotTranslate("\\leq")), "\\leq"];
+    }, i18n__namespace.doNotTranslate("\\leq")), "LEQ"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "geq"
-    }, i18n__namespace.doNotTranslate("\\geq")), "\\geq"];
+    }, i18n__namespace.doNotTranslate("\\geq")), "GEQ"];
   }]
 };
 const buttonSetsPropType = PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(___default["default"](buttonSets).keys()));
@@ -454,6 +425,20 @@ class TexButtons extends React__namespace.Component {
 _defineProperty(TexButtons, "buttonSets", buttonSets);
 _defineProperty(TexButtons, "buttonSetsType", buttonSetsPropType);
 
+const customKeyTranslator = {
+  ...mathInput.keyTranslator,
+  // If there's something in the input that can become part of a
+  // fraction, typing "/" puts it in the numerator. If not, typing
+  // "/" does nothing. In that case, enter a \frac.
+  FRAC: mathQuill => {
+    const contents = mathQuill.latex();
+    mathQuill.typedText("/");
+    if (mathQuill.latex() === contents) {
+      mathQuill.cmd("\\frac");
+    }
+  }
+};
+
 // A WYSIWYG math input that calls `onChange(LaTeX-string)`
 class MathInput extends React__namespace.Component {
   constructor() {
@@ -515,6 +500,17 @@ class MathInput extends React__namespace.Component {
     _defineProperty(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();
+        return;
+      }
+
+      // note(Matthew): I'm not sure this is still being used
+      // but it fails tests when I remove it and the way we call
+      // methods directly on components makes it difficult to confirm
+      // if it's dead code
       if (___default["default"](value).isFunction()) {
         value(input);
       } else if (value[0] === "\\") {
@@ -2650,11 +2646,6 @@ class Expression extends React__namespace.Component {
       // @ts-expect-error [FEI-5003] - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
       this.refs.input.blur();
     });
-    _defineProperty(this, "insert", text => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error [FEI-5003] - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
-      this.refs.input.insert(text);
-    });
     _defineProperty(this, "getInputPaths", () => {
       // The widget itself is an input, so we return a single empty list to
       // indicate this.
@@ -2826,6 +2817,12 @@ class Expression extends React__namespace.Component {
   }
   //#endregion
 
+  // HACK(joel)
+  insert(keyPressed) {
+    // eslint-disable-next-line react/no-string-refs
+    // @ts-expect-error [FEI-5003] - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
+    this.refs.input.insert(keyPressed);
+  }
   render() {
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React__namespace.createElement(mathInput.KeypadInput
@@ -32527,7 +32524,7 @@ class Draggable extends React__namespace.Component {
     if (this.props.state === prevProps.state) {
       return;
     }
-    if (this.props.state === ItemState.ANIMATING) {
+    if (this.props.state === ItemState.ANIMATING && this.props.endPosition) {
       // Start animating
       const current = this.getCurrentPosition();
       const duration = 15 * Math.sqrt(Math.sqrt(Math.pow(this.props.endPosition.left - current.left, 2) + Math.pow(this.props.endPosition.top - current.top, 2)));
@@ -32597,7 +32594,6 @@ class Sortable extends React__namespace.Component {
         option: option,
         key: i,
         state,
-        endPosition: {},
         width: 0,
         height: 0
       };