@khanacademy/perseus 7.0.0 → 7.0.1

package/dist/util.d.ts

@@ -171,7 +171,8 @@ declare function extractPointerLocation(event: any): Position | null | undefined
  * avoid sending the touch to the mobile scratchpad
  */
 declare function captureScratchpadTouchStart(e: TouchEvent): void;
-declare function getImageSize(url: string, callback: (arg1: number, arg2: number) => void): void;
+declare function getImageSizeModern(url: string): Promise<[number, number]>;
+declare function getImageSize(url: string, callback: (width: number, height: number) => void): void;
 declare function getRealImageUrl(url: string): string;
 declare function isLabeledSVG(url: string): boolean;
 declare function getBaseUrl(url: string): string;
@@ -233,6 +234,7 @@ declare const Util: {
     readonly supportsPassiveEvents: () => boolean;
     readonly captureScratchpadTouchStart: typeof captureScratchpadTouchStart;
     readonly getImageSize: typeof getImageSize;
+    readonly getImageSizeModern: typeof getImageSizeModern;
     readonly getRealImageUrl: typeof getRealImageUrl;
     readonly isLabeledSVG: typeof isLabeledSVG;
     readonly getBaseUrl: typeof getBaseUrl;

package/dist/util.js.flow

@@ -236,9 +236,10 @@ declare function extractPointerLocation(event: any): Position | null | void;
  * avoid sending the touch to the mobile scratchpad
  */
 declare function captureScratchpadTouchStart(e: TouchEvent): void;
+declare function getImageSizeModern(url: string): Promise<[number, number]>;
 declare function getImageSize(
   url: string,
-  callback: (arg1: number, arg2: number) => void
+  callback: (width: number, height: number) => void
 ): void;
 declare function getRealImageUrl(url: string): string;
 declare function isLabeledSVG(url: string): boolean;
@@ -307,6 +308,7 @@ declare var Util: {|
   +supportsPassiveEvents: () => boolean,
   +captureScratchpadTouchStart: typeof captureScratchpadTouchStart,
   +getImageSize: typeof getImageSize,
+  +getImageSizeModern: typeof getImageSizeModern,
   +getRealImageUrl: typeof getRealImageUrl,
   +isLabeledSVG: typeof isLabeledSVG,
   +getBaseUrl: typeof getBaseUrl,

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "7.0.0",
+    "version": "7.0.1",
     "publishConfig": {
         "access": "public"
     },
@@ -23,8 +23,8 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^8.0.0",
-        "@khanacademy/perseus-core": "0.0.2",
+        "@khanacademy/math-input": "^8.1.0",
+        "@khanacademy/perseus-core": "0.1.0",
         "@khanacademy/perseus-linter": "^0.3.1",
         "@khanacademy/pure-markdown": "^0.2.3",
         "@khanacademy/simple-markdown": "^0.9.3"

package/src/mixins/provide-keypad.tsx

@@ -10,7 +10,7 @@
  * extend a `ProvideKeypad` component instead of using this mixin.
  */
 
-import {Keypad} from "@khanacademy/math-input";
+import {MobileKeypad} from "@khanacademy/math-input";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -91,7 +91,7 @@ const ProvideKeypad = {
             document.body?.appendChild(_this._keypadContainer);
 
             reactRender(
-                <Keypad
+                <MobileKeypad
                     onElementMounted={(element) => {
                         // NOTE(kevinb): The reason why this setState works is
                         // b/c we're calling it manually from item-renderer.jsx

package/src/util.ts

@@ -839,9 +839,26 @@ function captureScratchpadTouchStart(e: TouchEvent) {
     e.stopPropagation();
 }
 
+async function getImageSizeModern(url: string): Promise<[number, number]> {
+    const image = new Image();
+
+    return new Promise((resolve, reject) => {
+        // Handle the success case
+        image.onload = () => {
+            resolve([image.naturalWidth, image.naturalHeight]);
+        };
+
+        // Handle the error case
+        image.onerror = reject;
+
+        // Kick off the loading
+        image.src = url;
+    });
+}
+
 function getImageSize(
     url: string,
-    callback: (arg1: number, arg2: number) => void,
+    callback: (width: number, height: number) => void,
 ): void {
     const img = new Image();
     img.onload = function () {
@@ -990,6 +1007,7 @@ const Util = {
     supportsPassiveEvents,
     captureScratchpadTouchStart,
     getImageSize,
+    getImageSizeModern,
     getRealImageUrl,
     isLabeledSVG,
     getBaseUrl,

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -1,4 +1,4 @@
-import {KeypadContext, Keypad} from "@khanacademy/math-input";
+import {KeypadContext, MobileKeypad} from "@khanacademy/math-input";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -8,7 +8,7 @@ const Footer = (): React.ReactElement => {
         <View style={styles.keypadContainer}>
             <KeypadContext.Consumer>
                 {({setKeypadElement, renderer}) => (
-                    <Keypad
+                    <MobileKeypad
                         onElementMounted={setKeypadElement}
                         onDismiss={() => renderer && renderer.blur()}
                         style={styles.keypad}