@khanacademy/perseus-editor 4.0.0 → 4.1.1

package/dist/index.js

@@ -64,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "4.0.0";
+const libVersion = "4.1.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -28178,39 +28178,31 @@ const INTERNALLY_HOSTED_URL_RE = new RegExp("^(https?|web\\+graphie)://[^/]*" +
  * Alignment option for captions, relative to specified coordinates.
  */
 const captionAlignments = ["center", "above", "above right", "right", "below right", "below", "below left", "left", "above left"];
-const ImageEditor = createReactClass__default["default"]({
-  displayName: "ImageEditor",
-  propTypes: {
-    ...perseus.Changeable.propTypes
-  },
-  statics: {
-    widgetName: "image"
-  },
-  componentDidMount: function () {
+class ImageEditor extends React__namespace.Component {
+  _isMounted = false;
+  static displayName = "ImageEditor";
+  static widgetName = "image";
+  static defaultProps = {
+    title: "",
+    range: [defaultRange, defaultRange],
+    box: [defaultBoxSize, defaultBoxSize],
+    backgroundImage: defaultBackgroundImage$1,
+    labels: [],
+    alt: "",
+    caption: ""
+  };
+  state = {
+    backgroundImageError: ""
+  };
+  componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
     this._isMounted = true;
-  },
-  componentWillUnmount: function () {
+  }
+  componentWillUnmount() {
     this._isMounted = false;
-  },
-  getDefaultProps: function () {
-    return {
-      title: "",
-      range: [defaultRange, defaultRange],
-      box: [defaultBoxSize, defaultBoxSize],
-      backgroundImage: defaultBackgroundImage$1,
-      labels: [],
-      alt: "",
-      caption: ""
-    };
-  },
-  getInitialState: function () {
-    return {
-      backgroundImageError: ""
-    };
-  },
-  render: function () {
+  }
+  render() {
     const backgroundImage = this.props.backgroundImage;
     const imageSettings = /*#__PURE__*/React__namespace.createElement("div", {
       className: "image-settings"
@@ -28251,8 +28243,8 @@ const ImageEditor = createReactClass__default["default"]({
       },
       onChange: url => this.onUrlChange(url, false)
     })), backgroundImage.url && imageSettings);
-  },
-  _renderRowForLabel: function (label, i) {
+  }
+  _renderRowForLabel(label, i) {
     return /*#__PURE__*/React__namespace.createElement("tr", {
       key: i
     }, /*#__PURE__*/React__namespace.createElement("td", null, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
@@ -28291,22 +28283,22 @@ const ImageEditor = createReactClass__default["default"]({
       ,
       onClick: this.removeLabel.bind(this, i)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, perseus.icons.iconTrash))));
-  },
+  }
   change() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     return perseus.Changeable.change.apply(this, args);
-  },
-  removeLabel: function (labelIndex, e) {
+  }
+  removeLabel(labelIndex, e) {
     e.preventDefault();
-    const labels = ___default["default"](this.props.labels).clone();
+    const labels = [...this.props.labels];
     labels.splice(labelIndex, 1);
     this.props.onChange({
       labels: labels
     });
-  },
-  onCoordinateChange: function (labelIndex, newCoordinates) {
+  }
+  onCoordinateChange(labelIndex, newCoordinates) {
     const labels = this.props.labels.slice();
     labels[labelIndex] = ___default["default"].extend({}, labels[labelIndex], {
       coordinates: newCoordinates
@@ -28314,8 +28306,8 @@ const ImageEditor = createReactClass__default["default"]({
     this.props.onChange({
       labels: labels
     });
-  },
-  onContentChange: function (labelIndex, e) {
+  }
+  onContentChange(labelIndex, e) {
     const newContent = e.target.value;
     const labels = this.props.labels.slice();
     labels[labelIndex] = ___default["default"].extend({}, labels[labelIndex], {
@@ -28324,8 +28316,8 @@ const ImageEditor = createReactClass__default["default"]({
     this.props.onChange({
       labels: labels
     });
-  },
-  onAlignmentChange: function (labelIndex, e) {
+  }
+  onAlignmentChange(labelIndex, e) {
     const newAlignment = e.target.value;
     const labels = this.props.labels.slice();
     labels[labelIndex] = ___default["default"].extend({}, labels[labelIndex], {
@@ -28334,8 +28326,8 @@ const ImageEditor = createReactClass__default["default"]({
     this.props.onChange({
       labels: labels
     });
-  },
-  setUrl: function (url, width, height, silent) {
+  }
+  setUrl(url, width, height, silent) {
     // Because this calls into WidgetEditor._handleWidgetChange, which
     // checks for this widget's ref to serialize it.
     //
@@ -28353,11 +28345,12 @@ const ImageEditor = createReactClass__default["default"]({
       backgroundImage: image,
       box: box
     }, null, silent);
-  },
+  }
+
   // 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: async function (url, silent) {
+  async onUrlChange(url, silent) {
     // Check if we've been passed something that looks like a URL
     if (!url) {
       this.setUrl(url, 0, 0, silent);
@@ -28384,18 +28377,18 @@ const ImageEditor = createReactClass__default["default"]({
         backgroundImageError: `There was an error loading the image URL: ${JSON.stringify(error, null, 2)}`
       });
     }
-  },
-  onRangeChange: function (type, newRange) {
+  }
+  onRangeChange(type, newRange) {
     const range = this.props.range.slice();
     range[type] = newRange;
     this.props.onChange({
       range: range
     });
-  },
+  }
   serialize() {
     return perseus.EditorJsonify.serialize.call(this);
   }
-});
+}
 
 /* eslint-disable react/sort-comp */
 const {