@khanacademy/perseus 6.1.0 → 6.2.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/perseus
 
+## 6.2.1
+
+### Patch Changes
+
+-   Updated dependencies [a7f56710]
+-   Updated dependencies [a7f56710]
+    -   @khanacademy/math-input@4.1.0
+
+## 6.2.0
+
+### Minor Changes
+
+-   e900688e: Centralize Key2MathQuill translator. TeXButtons send keypresses, not strings/functions anymore.
+
+### Patch Changes
+
+-   83d93e8f: Remove the use of Record<string, never> which is unsafe
+-   3a3c317d: Refactor MathWrapper to use shared key2MathQuill translator
+-   Updated dependencies [0d352105]
+-   Updated dependencies [c4b8d862]
+-   Updated dependencies [47055ffc]
+-   Updated dependencies [e900688e]
+-   Updated dependencies [3a3c317d]
+    -   @khanacademy/math-input@4.0.0
+
 ## 6.1.0
 
 ### Minor Changes

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

@@ -31,7 +31,7 @@ declare class MathInput extends React.Component<Props, State> {
     handleMouseUp: (arg1: MouseEvent) => void;
     handleBlur: (arg1: React.FocusEvent) => void;
     _shouldShowButtons: () => boolean;
-    insert: (arg1: any) => void;
+    insert: (value: any) => void;
     mathField: (arg1: any) => any;
     focus: () => void;
     blur: () => void;

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

@@ -37,7 +37,7 @@ declare class MathInput extends React.Component<Props, State> {
   handleMouseUp: (arg1: MouseEvent) => void;
   handleBlur: (arg1: SyntheticFocusEvent<>) => void;
   _shouldShowButtons: () => boolean;
-  insert: (arg1: any) => void;
+  insert: (value: any) => void;
   mathField: (arg1: any) => any;
   focus: () => void;
   blur: () => void;

package/dist/components/sortable.d.ts

@@ -45,7 +45,7 @@ type SortableItem = {
     option: SortableOption;
     key: number;
     state: ItemState;
-    endPosition: Position | Record<string, never>;
+    endPosition?: Position;
     width: number;
     height: number;
 };

package/dist/components/sortable.js.flow

@@ -58,7 +58,7 @@ declare type SortableItem = {|
   option: SortableOption,
   key: number,
   state: $Values<typeof ItemState>,
-  endPosition: Position | { [key: string]: empty },
+  endPosition?: Position,
   width: number,
   height: number,
 |};

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

@@ -1,6 +1,6 @@
+import { Keys } from "@khanacademy/math-input";
 import * as React from "react";
-type Inserter = string | ((input: any) => void);
-type ButtonSet = (props: any) => [React.ReactNode, Inserter];
+type ButtonSet = (props: any) => [React.ReactNode, Keys];
 type ButtonSets = {
     readonly [key: string]: ReadonlyArray<ButtonSet>;
 };
@@ -8,7 +8,7 @@ declare const buttonSets: ButtonSets;
 export type ButtonSetsType = ReadonlyArray<keyof typeof buttonSets>;
 type Props = {
     sets: ButtonSetsType;
-    onInsert: (arg1: Inserter) => void;
+    onInsert: (key: Keys) => void;
     className?: string;
     convertDotToTimes?: boolean;
 };

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

@@ -4,9 +4,9 @@
  * Flowgen v1.21.0
  * @flow
  */
+import { Keys } from "@khanacademy/math-input";
 import * as React from "react";
-declare type Inserter = string | ((input: any) => void);
-declare type ButtonSet = (props: any) => [React.Node, Inserter];
+declare type ButtonSet = (props: any) => [React.Node, Keys];
 declare type ButtonSets = {
   +[key: string]: $ReadOnlyArray<ButtonSet>,
 };
@@ -14,7 +14,7 @@ declare var buttonSets: ButtonSets;
 export type ButtonSetsType = $ReadOnlyArray<$Keys<typeof buttonSets>>;
 declare type Props = {|
   sets: ButtonSetsType,
-  onInsert: (arg1: Inserter) => void,
+  onInsert: (key: Keys) => void,
   className?: string,
   convertDotToTimes?: boolean,
 |};

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import * as KAS from '@khanacademy/kas';
-import { KeypadInput, KeypadType, keypadElementPropType, LegacyKeypad } from '@khanacademy/math-input';
+import { keyTranslator, 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';
@@ -138,10 +138,10 @@ const symbStyle = {
 const basic = [() => [/*#__PURE__*/React.createElement("span", {
   key: "plus",
   style: slightlyBig
-}, "+"), "+"], () => [/*#__PURE__*/React.createElement("span", {
+}, "+"), "PLUS"], () => [/*#__PURE__*/React.createElement("span", {
   key: "minus",
   style: prettyBig
-}, "-"), "-"],
+}, "-"), "MINUS"],
 // TODO(joel) - display as \cdot when appropriate
 props => {
   const {
@@ -151,12 +151,12 @@ props => {
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "times",
       style: prettyBig
-    }, i18n.doNotTranslate("\\times")), "\\times"];
+    }, i18n.doNotTranslate("\\times")), "TIMES"];
   }
   return [/*#__PURE__*/React.createElement(TeX, {
     key: "times",
     style: prettyBig
-  }, i18n.doNotTranslate("\\cdot")), "\\cdot"];
+  }, i18n.doNotTranslate("\\cdot")), "CDOT"];
 }, () => {
   const {
     TeX
@@ -164,17 +164,7 @@ props => {
   return [/*#__PURE__*/React.createElement(TeX, {
     key: "frac",
     style: prettyBig
-  }, i18n.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.doNotTranslate("\\frac{x}{y}")), "FRAC"];
 }];
 const buttonSets = {
   basic,
@@ -184,7 +174,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "div"
-    }, i18n.doNotTranslate("\\div")), "\\div"];
+    }, i18n.doNotTranslate("\\div")), "DIVIDE"];
   }]),
   trig: [() => {
     const {
@@ -192,21 +182,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "sin"
-    }, i18n.doNotTranslate("\\sin")), "\\sin"];
+    }, i18n.doNotTranslate("\\sin")), "SIN"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "cos"
-    }, i18n.doNotTranslate("\\cos")), "\\cos"];
+    }, i18n.doNotTranslate("\\cos")), "COS"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "tan"
-    }, i18n.doNotTranslate("\\tan")), "\\tan"];
+    }, i18n.doNotTranslate("\\tan")), "TAN"];
   }, () => {
     const {
       TeX
@@ -214,7 +204,7 @@ const buttonSets = {
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "theta",
       style: symbStyle
-    }, i18n.doNotTranslate("\\theta")), "\\theta"];
+    }, i18n.doNotTranslate("\\theta")), "THETA"];
   }, () => {
     const {
       TeX
@@ -226,7 +216,7 @@ const buttonSets = {
     }, i18n.doNotTranslate("phi")), /*#__PURE__*/React.createElement(TeX, {
       key: "pi",
       style: symbStyle
-    }, i18n.doNotTranslate("\\phi"))), "\\phi"];
+    }, i18n.doNotTranslate("\\phi"))), "PHI"];
   }],
   prealgebra: [() => {
     const {
@@ -234,7 +224,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "sqrt"
-    }, i18n.doNotTranslate("\\sqrt{x}")), "\\sqrt"];
+    }, i18n.doNotTranslate("\\sqrt{x}")), "SQRT"];
   },
   // TODO(joel) - how does desmos do this?
   () => {
@@ -243,10 +233,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "nthroot"
-    }, i18n.doNotTranslate("\\sqrt[3]{x}")), input => {
-      input.typedText("nthroot3");
-      input.keystroke("Right");
-    }];
+    }, i18n.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3"];
   }, () => {
     const {
       TeX
@@ -254,17 +241,7 @@ const buttonSets = {
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "pow",
       style: slightlyBig
-    }, i18n.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.doNotTranslate("a^b")), "POW"];
   }, () => {
     const {
       TeX
@@ -272,7 +249,7 @@ const buttonSets = {
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "pi",
       style: slightlyBig
-    }, i18n.doNotTranslate("\\pi")), "\\pi"];
+    }, i18n.doNotTranslate("\\pi")), "PI"];
   }],
   logarithms: [() => {
     const {
@@ -280,27 +257,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "log"
-    }, i18n.doNotTranslate("\\log")), "\\log"];
+    }, i18n.doNotTranslate("\\log")), "LOG"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "ln"
-    }, i18n.doNotTranslate("\\ln")), "\\ln"];
+    }, i18n.doNotTranslate("\\ln")), "LN"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "log_b"
-    }, i18n.doNotTranslate("\\log_b")), input => {
-      input.typedText("log_");
-      input.keystroke("Right");
-      input.typedText("(");
-      input.keystroke("Left");
-      input.keystroke("Left");
-    }];
+    }, i18n.doNotTranslate("\\log_b")), "LOG_B"];
   }],
   "basic relations": [() => {
     const {
@@ -308,21 +279,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "eq"
-    }, "="), "="];
+    }, "="), "EQUAL"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "lt"
-    }, i18n.doNotTranslate("\\lt")), "\\lt"];
+    }, i18n.doNotTranslate("\\lt")), "LT"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "gt"
-    }, i18n.doNotTranslate("\\gt")), "\\gt"];
+    }, i18n.doNotTranslate("\\gt")), "GT"];
   }],
   "advanced relations": [() => {
     const {
@@ -330,21 +301,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "neq"
-    }, i18n.doNotTranslate("\\neq")), "\\neq"];
+    }, i18n.doNotTranslate("\\neq")), "NEQ"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "leq"
-    }, i18n.doNotTranslate("\\leq")), "\\leq"];
+    }, i18n.doNotTranslate("\\leq")), "LEQ"];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React.createElement(TeX, {
       key: "geq"
-    }, i18n.doNotTranslate("\\geq")), "\\geq"];
+    }, i18n.doNotTranslate("\\geq")), "GEQ"];
   }]
 };
 const buttonSetsPropType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
@@ -383,6 +354,19 @@ class TexButtons extends React.Component {
 TexButtons.buttonSets = buttonSets;
 TexButtons.buttonSetsType = buttonSetsPropType;
 
+const customKeyTranslator = _extends({}, 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.Component {
   constructor(...args) {
@@ -444,6 +428,17 @@ class MathInput extends React.Component {
     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 (_(value).isFunction()) {
         value(input);
       } else if (value[0] === "\\") {
@@ -2587,11 +2582,6 @@ class Expression extends React.Component {
       // @ts-expect-error [FEI-5003] - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
       this.refs.input.blur();
     };
-    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);
-    };
     this.getInputPaths = () => {
       // The widget itself is an input, so we return a single empty list to
       // indicate this.
@@ -2764,6 +2754,12 @@ class Expression extends React.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.createElement(KeypadInput
@@ -32339,7 +32335,7 @@ class Draggable extends React.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)));
@@ -32409,7 +32405,6 @@ class Sortable extends React.Component {
         option: option,
         key: i,
         state,
-        endPosition: {},
         width: 0,
         height: 0
       };