@khanacademy/math-input 2.0.0 → 4.0.0

package/dist/strings.js

@@ -5,43 +5,51 @@
   */
  
 module.exports = [
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Cosine", {}),
     // I18N: A label for a button that will cube (take to the third power)
     i18n._("Cube", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Cube root", {}),
-    // I18N: A label for a button that will allow the user to input a custom
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Custom exponent", {}),
-    // I18N: A label for a decimal symbol.
+    // I18N: A label for a 'decimal' sign (represented as '.' or ',').
     i18n._("Decimal", {}),
-    // I18N: A label for a button that will delete some input.
     i18n._("Delete", {}),
     // I18N: A label for a button that will dismiss/hide a keypad.
     i18n._("Dismiss", {}),
-    // I18N: A label for a division sign.
+    // I18N: A label for a 'divide' sign.
     i18n._("Divide", {}),
     i18n._("Down arrow", {}),
+    // I18N: A label for an 'equals' sign (represented as '=').
     i18n._("Equals sign", {}),
     // I18N: A label for a button that creates a new fraction next to the
     // I18N: A label for a button that creates a new fraction next to the
     i18n._("Fraction, excluding the current expression", {}),
     // I18N: A label for a button that creates a new fraction and puts the
     i18n._("Fraction, with current expression in numerator", {}),
+    // I18N: A label for a 'greater than or equal to' sign (represented as '≥').
     i18n._("Greater than or equal to sign", {}),
     // I18N: A label for a 'greater than' sign (represented as '>').
     i18n._("Greater than sign", {}),
     i18n._("Left arrow", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Left parenthesis", {}),
+    // I18N: A label for a 'less than or equal to' sign (represented as '≤').
     i18n._("Less than or equal to sign", {}),
     // I18N: A label for a 'less than' sign (represented as '<').
     i18n._("Less than sign", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Logarithm with base 10", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Logarithm with custom base", {}),
     i18n._("Math input box", {}),
-    // I18N: A label for a minus sign.
+    // I18N: A label for a 'minus' sign.
     i18n._("Minus", {}),
-    // I18N: A label for a multiplication sign (represented with an 'x').
-    // I18N: A label for a multiplication sign (represented as a dot).
+    // I18N: A label for a 'multiply' sign.
+    // I18N: A label for a 'centered dot' multiplication sign (represented as '⋅').
     i18n._("Multiply", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Natural logarithm", {}),
     i18n._("Navigate right into the numerator of a fraction", {}),
     i18n._("Navigate right out of a base", {}),
@@ -49,23 +57,31 @@ module.exports = [
     i18n._("Navigate right out of an exponent", {}),
     i18n._("Navigate right out of the denominator of a fraction", {}),
     i18n._("Navigate right out of the numerator and into the denominator", {}),
-    // I18N: A label for a minus sign.
+    // I18N: A label for a 'negative' sign.
     i18n._("Negative", {}),
+    // I18N: A label for a 'not-equals' sign (represented as '≠').
     i18n._("Not-equals sign", {}),
-    // I18N: A label for a percent sign.
+    // I18N: A label for a 'percent' sign (represented as '%').
     i18n._("Percent", {}),
+    // I18N: A label for a button that will allow the user to input the
     i18n._("Pi", {}),
-    // I18N: A label for a plus sign.
+    // I18N: A label for a 'plus' sign.
     i18n._("Plus", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Radical with custom root", {}),
     i18n._("Right arrow", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Right parenthesis", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Sine", {}),
     // I18N: A label for a button that will square (take to the second
     i18n._("Square", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Square root", {}),
+    // I18N: A label for a button that will allow the user to input a
     i18n._("Tangent", {}),
     i18n._("Tap with one or two fingers to open keyboard", {}),
+    // I18N: A label for a button that will allow the user to input the
     i18n._("Theta", {}),
     i18n._("Up arrow", {}),
 ];

package/dist/types.d.ts

@@ -1,43 +1,46 @@
-import Keys from "./data/keys";
+import Key from "./data/keys";
 import { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
 import type { CursorContext } from "./components/input/cursor-contexts";
 export type Border = Partial<ReadonlyArray<BorderDirection>>;
-export type Bound = {
+export interface Bound {
     top: number;
     right: number;
     bottom: number;
     left: number;
     height: number;
     width: number;
-};
+}
 export type Popover = {
-    parentId: Keys;
+    parentId: Key;
     bounds: Partial<Bound>;
-    childKeyIds: Array<Keys>;
+    childKeyIds: Array<Key>;
 };
 export type Echo = {
     animationId: string;
     animationType: EchoAnimationType;
-    borders: Border;
-    id: Keys;
-    initialBounds: DOMRect;
+    id: Key;
+    initialBounds: Bound;
 };
 export type IconConfig = {
     type: IconType;
     data: string;
 };
-export type KeyConfig = {
-    ariaLabel: string;
-    id: Keys;
-    type: KeyType;
-    childKeyIds: Array<Keys>;
+export type NonManyKeyConfig = {
+    id: Key;
+    type: Exclude<KeyType, "MANY">;
     icon: IconConfig;
+    ariaLabel: string;
+};
+export type ManyKeyConfig = Omit<NonManyKeyConfig, "type"> & {
+    type: Extract<KeyType, "MANY">;
+    childKeyIds: ReadonlyArray<string>;
 };
+export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
 export type KeypadConfiguration = {
     keypadType: KeypadType;
-    extraKeys?: ReadonlyArray<Keys>;
+    extraKeys?: ReadonlyArray<Key>;
 };
-export type KeyHandler = (key: Keys) => Cursor;
+export type KeyHandler = (key: Key) => Cursor;
 export type Cursor = {
     context: CursorContext;
 };
@@ -56,7 +59,6 @@ export type ActiveNodesObj = {
     focus: string | null;
 };
 export type LayoutProps = {
-    initialBounds: DOMRect;
-    borders: Border;
+    initialBounds: Bound;
 };
 export {};

package/dist/types.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-import Keys from "./data/keys";
+import Key from "./data/keys";
 import {
   BorderDirection,
   EchoAnimationType,
@@ -14,42 +14,48 @@ import {
 } from "./enums";
 import type { CursorContext } from "./components/input/cursor-contexts";
 export type Border = $Rest<$ReadOnlyArray<BorderDirection>, {}>;
-export type Bound = {|
-  top: number,
-  right: number,
-  bottom: number,
-  left: number,
-  height: number,
-  width: number,
-|};
+export interface Bound {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  height: number;
+  width: number;
+}
 export type Popover = {|
-  parentId: Keys,
+  parentId: Key,
   bounds: $Rest<Bound, {}>,
-  childKeyIds: Array<Keys>,
+  childKeyIds: Array<Key>,
 |};
 export type Echo = {|
   animationId: string,
   animationType: EchoAnimationType,
-  borders: Border,
-  id: Keys,
-  initialBounds: DOMRect,
+  id: Key,
+  initialBounds: Bound,
 |};
 export type IconConfig = {|
   type: IconType,
   data: string,
 |};
-export type KeyConfig = {|
-  ariaLabel: string,
-  id: Keys,
-  type: KeyType,
-  childKeyIds: Array<Keys>,
+export type NonManyKeyConfig = {|
+  id: Key,
+  type: Exclude<KeyType, "MANY">,
   icon: IconConfig,
+  ariaLabel: string,
+|};
+export type ManyKeyConfig = {|
+  ...$Diff<NonManyKeyConfig, { type: any }>,
+  ...{|
+    type: Extract<KeyType, "MANY">,
+    childKeyIds: $ReadOnlyArray<string>,
+  |},
 |};
+export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
 export type KeypadConfiguration = {|
   keypadType: KeypadType,
-  extraKeys?: $ReadOnlyArray<Keys>,
+  extraKeys?: $ReadOnlyArray<Key>,
 |};
-export type KeyHandler = (key: Keys) => Cursor;
+export type KeyHandler = (key: Key) => Cursor;
 export type Cursor = {|
   context: CursorContext,
 |};
@@ -68,6 +74,5 @@ export type ActiveNodesObj = {|
   focus: string | null,
 |};
 export type LayoutProps = {|
-  initialBounds: DOMRect,
-  borders: Border,
+  initialBounds: Bound,
 |};

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.0.0",
+    "version": "4.0.0",
     "publishConfig": {
         "access": "public"
     },

package/src/components/input/__tests__/context-tracking.test.ts

@@ -1,4 +1,3 @@
-import Keys from "../../../data/keys";
 import {CursorContext} from "../cursor-contexts";
 
 import TestMathWrapper from "./test-math-wrapper";
@@ -27,65 +26,65 @@ describe("Cursor context", () => {
 
     it("should treat numbers and ternary operators as non-jumpable", () => {
         mathField.pressKey("NUM_1");
-        mathField.pressKey(Keys.CDOT);
+        mathField.pressKey("CDOT");
         const cursor = mathField.pressKey("NUM_2");
         expect(cursor.context).toEqual(CursorContext.NONE);
     });
 
     describe("Before fraction", () => {
         it("should detect when immediately to the left", () => {
-            const cursor = mathField.pressKey(Keys.FRAC_EXCLUSIVE);
+            const cursor = mathField.pressKey("FRAC_EXCLUSIVE");
             expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
         });
 
         it("should detect when numbers are between", () => {
             mathField.pressKey("NUM_1");
-            mathField.pressKey(Keys.FRAC_EXCLUSIVE);
-            mathField.pressKey(Keys.LEFT);
-            const cursor = mathField.pressKey(Keys.LEFT);
+            mathField.pressKey("FRAC_EXCLUSIVE");
+            mathField.pressKey("LEFT");
+            const cursor = mathField.pressKey("LEFT");
             expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
         });
 
         it("should not detect when operators are between", () => {
             mathField.pressKey("NUM_1");
-            mathField.pressKey(Keys.PLUS);
+            mathField.pressKey("PLUS");
             mathField.pressKey("NUM_2");
-            mathField.pressKey(Keys.FRAC_EXCLUSIVE);
-            mathField.pressKey(Keys.LEFT);
-            mathField.pressKey(Keys.LEFT);
-            mathField.pressKey(Keys.LEFT);
-            const cursor = mathField.pressKey(Keys.LEFT);
+            mathField.pressKey("FRAC_EXCLUSIVE");
+            mathField.pressKey("LEFT");
+            mathField.pressKey("LEFT");
+            mathField.pressKey("LEFT");
+            const cursor = mathField.pressKey("LEFT");
             expect(cursor.context).toEqual(CursorContext.NONE);
         });
 
         it("should not detect when parens are between", () => {
             mathField.pressKey("NUM_1");
-            mathField.pressKey(Keys.LEFT_PAREN);
-            mathField.pressKey(Keys.RIGHT_PAREN);
+            mathField.pressKey("LEFT_PAREN");
+            mathField.pressKey("RIGHT_PAREN");
             mathField.pressKey("NUM_2");
-            mathField.pressKey(Keys.FRAC_EXCLUSIVE);
-            mathField.pressKey(Keys.LEFT);
-            mathField.pressKey(Keys.LEFT);
-            mathField.pressKey(Keys.LEFT);
-            mathField.pressKey(Keys.LEFT);
-            const cursor = mathField.pressKey(Keys.LEFT);
+            mathField.pressKey("FRAC_EXCLUSIVE");
+            mathField.pressKey("LEFT");
+            mathField.pressKey("LEFT");
+            mathField.pressKey("LEFT");
+            mathField.pressKey("LEFT");
+            const cursor = mathField.pressKey("LEFT");
             expect(cursor.context).toEqual(CursorContext.NONE);
         });
     });
 
     describe("In parens", () => {
         it("should detect when inside empty parens", () => {
-            mathField.pressKey(Keys.LEFT_PAREN);
-            mathField.pressKey(Keys.RIGHT_PAREN);
-            const cursor = mathField.pressKey(Keys.LEFT);
+            mathField.pressKey("LEFT_PAREN");
+            mathField.pressKey("RIGHT_PAREN");
+            const cursor = mathField.pressKey("LEFT");
             expect(cursor.context).toEqual(CursorContext.IN_PARENS);
         });
 
         it("should detect when inside non-empty parens", () => {
-            mathField.pressKey(Keys.LEFT_PAREN);
+            mathField.pressKey("LEFT_PAREN");
             mathField.pressKey("NUM_2");
-            mathField.pressKey(Keys.RIGHT_PAREN);
-            const cursor = mathField.pressKey(Keys.LEFT);
+            mathField.pressKey("RIGHT_PAREN");
+            const cursor = mathField.pressKey("LEFT");
             expect(cursor.context).toEqual(CursorContext.IN_PARENS);
         });
     });
@@ -93,13 +92,13 @@ describe("Cursor context", () => {
     describe("In superscript", () => {
         it("should detect when inside empty superscript", () => {
             mathField.pressKey("NUM_2");
-            const cursor = mathField.pressKey(Keys.EXP);
+            const cursor = mathField.pressKey("EXP");
             expect(cursor.context).toEqual(CursorContext.IN_SUPER_SCRIPT);
         });
 
         it("should detect when inside non-empty superscript", () => {
             mathField.pressKey("NUM_2");
-            mathField.pressKey(Keys.EXP);
+            mathField.pressKey("EXP");
             const cursor = mathField.pressKey("NUM_3");
             expect(cursor.context).toEqual(CursorContext.IN_SUPER_SCRIPT);
         });
@@ -107,12 +106,12 @@ describe("Cursor context", () => {
 
     describe("In subscript", () => {
         it("should detect when inside empty superscript", () => {
-            const cursor = mathField.pressKey(Keys.LOG_N);
+            const cursor = mathField.pressKey("LOG_N");
             expect(cursor.context).toEqual(CursorContext.IN_SUB_SCRIPT);
         });
 
         it("should detect when inside non-empty superscript", () => {
-            mathField.pressKey(Keys.LOG_N);
+            mathField.pressKey("LOG_N");
             const cursor = mathField.pressKey("NUM_2");
             expect(cursor.context).toEqual(CursorContext.IN_SUB_SCRIPT);
         });
@@ -120,12 +119,12 @@ describe("Cursor context", () => {
 
     describe("In numerator", () => {
         it("should detect when inside empty numerator", () => {
-            const cursor = mathField.pressKey(Keys.FRAC_INCLUSIVE);
+            const cursor = mathField.pressKey("FRAC_INCLUSIVE");
             expect(cursor.context).toEqual(CursorContext.IN_NUMERATOR);
         });
 
         it("should detect when inside non-empty numerator", () => {
-            mathField.pressKey(Keys.FRAC_INCLUSIVE);
+            mathField.pressKey("FRAC_INCLUSIVE");
             const cursor = mathField.pressKey("NUM_2");
             expect(cursor.context).toEqual(CursorContext.IN_NUMERATOR);
         });
@@ -133,14 +132,14 @@ describe("Cursor context", () => {
 
     describe("In denominator", () => {
         it("should detect when inside empty denominator", () => {
-            mathField.pressKey(Keys.FRAC_INCLUSIVE);
-            const cursor = mathField.pressKey(Keys.RIGHT);
+            mathField.pressKey("FRAC_INCLUSIVE");
+            const cursor = mathField.pressKey("RIGHT");
             expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
         });
 
         it("should detect when inside non-empty denominator", () => {
-            mathField.pressKey(Keys.FRAC_INCLUSIVE);
-            mathField.pressKey(Keys.RIGHT);
+            mathField.pressKey("FRAC_INCLUSIVE");
+            mathField.pressKey("RIGHT");
             const cursor = mathField.pressKey("NUM_2");
             expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
         });
@@ -149,18 +148,18 @@ describe("Cursor context", () => {
     describe("Nesting", () => {
         it("should defer to jumping into fraction if possible", () => {
             // Move inside parens, but include a fraction.
-            mathField.pressKey(Keys.LEFT_PAREN);
+            mathField.pressKey("LEFT_PAREN");
             mathField.pressKey("NUM_2");
-            mathField.pressKey(Keys.FRAC_EXCLUSIVE);
-            const cursor = mathField.pressKey(Keys.LEFT);
+            mathField.pressKey("FRAC_EXCLUSIVE");
+            const cursor = mathField.pressKey("LEFT");
             expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
         });
 
         it("should defer to the nearest parent (1)", () => {
             // Move inside parens, inside a superscript.
             mathField.pressKey("NUM_2");
-            mathField.pressKey(Keys.EXP);
-            mathField.pressKey(Keys.LEFT_PAREN);
+            mathField.pressKey("EXP");
+            mathField.pressKey("LEFT_PAREN");
             const cursor = mathField.pressKey("NUM_3");
             expect(cursor.context).toEqual(CursorContext.IN_PARENS);
         });
@@ -168,9 +167,9 @@ describe("Cursor context", () => {
         it("should defer to the nearest parent (2)", () => {
             // Nest fractions, and put cursor in the denominator of the fraction
             // in the numerator.
-            mathField.pressKey(Keys.FRAC_INCLUSIVE);
-            mathField.pressKey(Keys.FRAC_INCLUSIVE);
-            const cursor = mathField.pressKey(Keys.RIGHT);
+            mathField.pressKey("FRAC_INCLUSIVE");
+            mathField.pressKey("FRAC_INCLUSIVE");
+            const cursor = mathField.pressKey("RIGHT");
             expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
         });
     });