@khanacademy/perseus-editor 2.3.12 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/perseus-editor
 
+## 2.4.0
+
+### Minor Changes
+
+-   97d02dac: Fixes a bug where images don't get dimensions in the image editor, and adds small preview to the image editor
+
+### Patch Changes
+
+-   Updated dependencies [5611204a]
+    -   @khanacademy/perseus@7.0.1
+
+## 2.3.13
+
+### Patch Changes
+
+-   Updated dependencies [f9ee9d24]
+-   Updated dependencies [b18986d3]
+-   Updated dependencies [b18986d3]
+    -   @khanacademy/perseus@7.0.0
+
 ## 2.3.12
 
 ### Patch Changes

package/dist/editor-page.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-import type { APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, Hint, ImageUploader, RendererInterface, Version, KEScore } from "@khanacademy/perseus";
+import type { APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, Hint, ImageUploader, Version } from "@khanacademy/perseus";
+import type { RendererInterface, KEScore } from "@khanacademy/perseus-core";
 type Props = {
     apiOptions?: APIOptions;
     answerArea?: any;

package/dist/editor-page.js.flow

@@ -12,10 +12,9 @@ import type {
   DeviceType,
   Hint,
   ImageUploader,
-  RendererInterface,
   Version,
-  KEScore,
 } from "@khanacademy/perseus";
+import type { RendererInterface, KEScore } from "@khanacademy/perseus-core";
 declare type Props = {|
   apiOptions?: APIOptions,
   answerArea?: any,

package/dist/es/index.js

@@ -28178,7 +28178,13 @@ const ImageEditor = createReactClass({
     const backgroundImage = this.props.backgroundImage;
     const imageSettings = /*#__PURE__*/React.createElement("div", {
       className: "image-settings"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Preview:"), /*#__PURE__*/React.createElement("img", {
+      alt: "Editor preview of image",
+      src: backgroundImage.url,
+      style: {
+        width: "100%"
+      }
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28312,7 +28318,13 @@ const ImageEditor = 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, silent) {
+    // 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({
@@ -28320,24 +28332,19 @@ const ImageEditor = createReactClass({
       });
       return;
     }
+
+    // Clear previous errors
     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;
-    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) {
     const range = this.props.range.slice();