feat: run onImgLoad even on broken images (#102)

* feat: run onImgLoad even on broken images

src/editors/containers/TextEditor/components/ImageSettingsModal/__snapshots__/index.test.jsx.snap

@@ -70,15 +70,29 @@ exports[`ImageSettingsModal render snapshot 1`] = `
     >
       <Image
         className="img-settings-thumbnail"
-        onLoad={
+        onError={
           Object {
             "hooks.dimensions.onImgLoad.callback": Object {
               "selection": Object {
-                "selected": "image data",
+                "altText": "AlTTExt",
+                "externalUrl": "ExtERNALurL",
+                "url": "UrL",
               },
             },
           }
         }
+        onLoad={
+          Object {
+            "hooks.dimensions.onImgLoad.callback": Object {
+              "selection": Object {
+                "altText": "AlTTExt",
+                "externalUrl": "ExtERNALurL",
+                "url": "UrL",
+              },
+            },
+          }
+        }
+        src="ExtERNALurL"
       />
     </div>
     <hr
@@ -93,7 +107,16 @@ exports[`ImageSettingsModal render snapshot 1`] = `
             "calls": Array [
               Array [
                 Object {
-                  "selected": "image data",
+                  "altText": "AlTTExt",
+                  "externalUrl": "ExtERNALurL",
+                  "url": "UrL",
+                },
+              ],
+              Array [
+                Object {
+                  "altText": "AlTTExt",
+                  "externalUrl": "ExtERNALurL",
+                  "url": "UrL",
                 },
               ],
             ],
@@ -103,7 +126,21 @@ exports[`ImageSettingsModal render snapshot 1`] = `
                 "value": Object {
                   "hooks.dimensions.onImgLoad.callback": Object {
                     "selection": Object {
-                      "selected": "image data",
+                      "altText": "AlTTExt",
+                      "externalUrl": "ExtERNALurL",
+                      "url": "UrL",
+                    },
+                  },
+                },
+              },
+              Object {
+                "type": "return",
+                "value": Object {
+                  "hooks.dimensions.onImgLoad.callback": Object {
+                    "selection": Object {
+                      "altText": "AlTTExt",
+                      "externalUrl": "ExtERNALurL",
+                      "url": "UrL",
                     },
                   },
                 },

src/editors/containers/TextEditor/components/ImageSettingsModal/index.jsx

@@ -24,11 +24,11 @@ import ErrorAlert from '../ErrorAlerts/ErrorAlert';
  * @param {func} returnToSelection - return to image selection
  */
 export const ImageSettingsModal = ({
-  isOpen,
   close,
-  selection,
-  saveToEditor,
+  isOpen,
   returnToSelection,
+  saveToEditor,
+  selection,
   // inject
   intl,
 }) => {
@@ -42,9 +42,7 @@ export const ImageSettingsModal = ({
   });
   return (
     <BaseModal
-      title={intl.formatMessage(messages.titleLabel)}
       close={close}
-      isOpen={isOpen}
       confirmAction={(
         <Button
           variant="primary"
@@ -53,6 +51,8 @@ export const ImageSettingsModal = ({
           <FormattedMessage {...messages.saveButtonLabel} />
         </Button>
       )}
+      isOpen={isOpen}
+      title={intl.formatMessage(messages.titleLabel)}
     >
       <ErrorAlert
         dismissError={altText.error.dismiss}
@@ -62,10 +62,10 @@ export const ImageSettingsModal = ({
         <FormattedMessage {...messages.altTextError} />
       </ErrorAlert>
       <Button
-        onClick={returnToSelection}
-        variant="link"
-        size="inline"
         iconBefore={ArrowBackIos}
+        onClick={returnToSelection}
+        size="inline"
+        variant="link"
       >
         <FormattedMessage {...messages.replaceImageButtonLabel} />
       </Button>
@@ -74,6 +74,7 @@ export const ImageSettingsModal = ({
         <div className="img-settings-thumbnail-container">
           <Image
             className="img-settings-thumbnail"
+            onError={dimensions.onImgLoad(selection)}
             onLoad={dimensions.onImgLoad(selection)}
             src={selection.externalUrl}
           />
@@ -89,15 +90,15 @@ export const ImageSettingsModal = ({
 };
 
 ImageSettingsModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
   close: PropTypes.func.isRequired,
-  selection: PropTypes.shape({
-    url: PropTypes.string,
-    externalUrl: PropTypes.string,
-    altText: PropTypes.string,
-  }).isRequired,
-  saveToEditor: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
   returnToSelection: PropTypes.func.isRequired,
+  saveToEditor: PropTypes.func.isRequired,
+  selection: PropTypes.shape({
+    altText: PropTypes.string,
+    externalUrl: PropTypes.string,
+    url: PropTypes.string,
+  }).isRequired,
   // inject
   intl: intlShape.isRequired,
 };

src/editors/containers/TextEditor/components/ImageSettingsModal/index.test.jsx

@@ -8,19 +8,19 @@ jest.mock('./AltTextControls', () => 'AltTextControls');
 jest.mock('./DimensionControls', () => 'DimensionControls');
 
 jest.mock('./hooks', () => ({
-  dimensions: () => ({
-    value: { width: 12, height: 13 },
-    onImgLoad: jest.fn(
-      (selection) => ({ 'hooks.dimensions.onImgLoad.callback': { selection } }),
-    ).mockName('hooks.dimensions.onImgLoad'),
-  }),
   altText: () => ({
-    value: 'alternative Taxes',
-    isDecorative: false,
     error: {
       show: 'sHoW',
       dismiss: jest.fn(),
     },
+    isDecorative: false,
+    value: 'alternative Taxes',
+  }),
+  dimensions: () => ({
+    onImgLoad: jest.fn(
+      (selection) => ({ 'hooks.dimensions.onImgLoad.callback': { selection } }),
+    ).mockName('hooks.dimensions.onImgLoad'),
+    value: { width: 12, height: 13 },
   }),
   onSaveClick: (args) => ({ 'hooks.onSaveClick': args }),
 }));
@@ -28,7 +28,11 @@ jest.mock('./hooks', () => ({
 describe('ImageSettingsModal', () => {
   const props = {
     isOpen: false,
-    selection: { selected: 'image data' },
+    selection: {
+      altText: 'AlTTExt',
+      externalUrl: 'ExtERNALurL',
+      url: 'UrL',
+    },
     // inject
     intl: { formatMessage },
   };