@khanacademy/perseus-editor 2.3.13 → 2.4.1

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.3.13",
+    "version": "2.4.1",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/perseus": "^7.0.0"
+        "@khanacademy/perseus": "^7.0.2"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.0.8",

package/src/widgets/image-editor.tsx

@@ -97,6 +97,27 @@ const ImageEditor: any = createReactClass({
 
         const imageSettings = (
             <div className="image-settings">
+                <div>
+                    <label>
+                        <div>Preview:</div>
+                        <img
+                            alt="Editor preview of image"
+                            src={backgroundImage.url}
+                            style={{
+                                width: "100%",
+                            }}
+                        />
+                    </label>
+                </div>
+                <div>
+                    <label>
+                        <div>Dimensions:</div>
+                        <p>
+                            {backgroundImage.width}x{backgroundImage.height}
+                        </p>
+                    </label>
+                </div>
+
                 <div>
                     <label>
                         <div>
@@ -277,7 +298,16 @@ const ImageEditor: any = createReactClass({
     // silently load the image when the component mounts
     // silently update url and sizes when the image loads
     // noisily load the image in response to the author changing it
-    onUrlChange: function (url, silent) {
+    onUrlChange: async function (
+        url: string | undefined | null,
+        silent: boolean,
+    ) {
+        // Check if we've been passed something that looks like a URL
+        if (!url) {
+            this.setUrl(url, 0, 0, silent);
+            return;
+        }
+
         // All article content must be KA-owned!
         if (!INTERNALLY_HOSTED_URL_RE.test(url)) {
             this.setState({
@@ -288,25 +318,18 @@ const ImageEditor: any = createReactClass({
             });
             return;
         }
-        this.setState({backgroundImageError: ""});
 
-        // We update our background image prop after the image loads below. To
-        // avoid weirdness when we change to a very slow URL, then a much
-        // faster URL, we keep track of the URL we're trying to change to.
-        this._leadingUrl = url;
+        // Clear previous errors
+        this.setState({backgroundImageError: ""});
 
-        if (!url) {
-            this.setUrl(url, 0, 0, silent);
-            return;
+        try {
+            const size = await Util.getImageSizeModern(url);
+            this.setUrl(url, size[0], size[1], true);
+        } catch (error) {
+            this.setState({
+                backgroundImageError: `There was an error loading the image URL: ${error}`,
+            });
         }
-
-        Util.getImageSize(url, (width, height) => {
-            if (this._leadingUrl !== url) {
-                return;
-            }
-
-            this.setUrl(url, width, height, true);
-        });
     },
 
     onRangeChange: function (type, newRange) {