@khanacademy/perseus-editor 2.3.13 → 2.4.0

package/dist/index.js

@@ -28323,7 +28323,13 @@ const ImageEditor = createReactClass__default["default"]({
     const backgroundImage = this.props.backgroundImage;
     const imageSettings = /*#__PURE__*/React__namespace.createElement("div", {
       className: "image-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.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__namespace.createElement(Editor, {
+    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Preview:"), /*#__PURE__*/React__namespace.createElement("img", {
+      alt: "Editor preview of image",
+      src: backgroundImage.url,
+      style: {
+        width: "100%"
+      }
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.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__namespace.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28460,7 +28466,13 @@ const ImageEditor = createReactClass__default["default"]({
   // 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({
@@ -28468,24 +28480,19 @@ const ImageEditor = createReactClass__default["default"]({
       });
       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 perseus.Util.getImageSizeModern(url);
+      this.setUrl(url, size[0], size[1], true);
+    } catch (error) {
+      this.setState({
+        backgroundImageError: "There was an error loading the image URL: ".concat(error)
+      });
     }
-    perseus.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();