@instructure/canvas-rce 5.14.1 → 5.14.2

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { View } from '@instructure/ui-view';
@@ -27,12 +28,11 @@ import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
 import { actions as svgActions } from '../../../reducers/svgSettings';
 import formatMessage from '../../../../../../format-message';
 import { PREVIEW_WIDTH, PREVIEW_HEIGHT } from '../../../../shared/ImageCropper/constants';
-
 const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
   let image = dataUrl;
-
   if (isAnUnsupportedGifPngImage(dataBlob)) {
-    dispatch({ ...actions.CLEAR_IMAGE
+    dispatch({
+      ...actions.CLEAR_IMAGE
     });
     return onChange({
       type: svgActions.SET_ERROR,
@@ -41,18 +41,18 @@ const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
       })
     });
   }
-
-  dispatch({ ...actions.SET_IMAGE,
+  dispatch({
+    ...actions.SET_IMAGE,
     payload: ''
   });
-  dispatch({ ...actions.SET_CROPPER_OPEN,
+  dispatch({
+    ...actions.SET_CROPPER_OPEN,
     payload: true
   });
   onChange({
     type: svgActions.SET_EMBED_IMAGE,
     payload: ''
   });
-
   if (canCompressImage() && shouldCompressImage(dataBlob)) {
     try {
       // If compression fails, use the original one
@@ -66,13 +66,13 @@ const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
       // eslint-disable-next-line no-console
       console.error(e);
     }
-
-    dispatch({ ...actions.SET_COMPRESSION_STATUS,
+    dispatch({
+      ...actions.SET_COMPRESSION_STATUS,
       payload: true
     });
   }
-
-  dispatch({ ...actions.SET_IMAGE,
+  dispatch({
+    ...actions.SET_IMAGE,
     payload: image
   });
   onChange({
@@ -80,7 +80,6 @@ const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
     payload: image
   });
 };
-
 const Course = _ref => {
   let {
     dispatch,
@@ -102,26 +101,30 @@ const Course = _ref => {
     dataLoading,
     dataBlob
   } = useDataUrl();
-  const category = 'uncategorized'; // Handle image selection
+  const category = 'uncategorized';
 
+  // Handle image selection
   useEffect(() => {
     // Don't clear the current image on re-render
     if (!dataUrl || !dataBlob) return;
-    dispatchImage(dispatch, onChange, dataUrl, dataBlob); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataUrl, dataBlob]); // Handle loading states
+    dispatchImage(dispatch, onChange, dataUrl, dataBlob);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataUrl, dataBlob]);
 
+  // Handle loading states
   useEffect(() => {
     dispatch(dataLoading ? actions.START_LOADING : actions.STOP_LOADING);
-
     if (dataUrl) {
-      dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+      dispatch({
+        ...actions.SET_IMAGE_COLLECTION_OPEN,
         payload: false
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataLoading]);
   useEffect(() => {
-    if (isLoading) onLoading && onLoading();else onLoaded && onLoaded(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (isLoading) onLoading && onLoading();else onLoaded && onLoaded();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
   return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ImageList, {
     fetchInitialImages: () => storeProps.fetchInitialImages({
@@ -145,14 +148,14 @@ const Course = _ref => {
     },
     onImageEmbed: file => {
       setUrl(file.download_url);
-      dispatch({ ...actions.SET_IMAGE_NAME,
+      dispatch({
+        ...actions.SET_IMAGE_NAME,
         payload: file.filename
       });
     },
     canvasOrigin: canvasOrigin
   }));
 };
-
 Course.propTypes = {
   dispatch: PropTypes.func,
   onChange: PropTypes.func,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { useState, useCallback, useEffect } from 'react';
 import formatMessage from '../../../../../../format-message';
 import { actions, modes } from '../../../reducers/imageSection';
@@ -35,11 +36,9 @@ import { createCroppedImageSvg } from '../../../../shared/ImageCropper/imageCrop
 import { convertFileToBase64 } from '../../../../shared/fileUtils';
 import { ImageSettingsPropTypes } from './propTypes';
 import _ from 'lodash';
-
 const getCompressionMessage = () => formatMessage('Your image has been compressed for Icon Maker. Images less than {size} KB will not be compressed.', {
   size: MAX_IMAGE_SIZE_BYTES / 1024
 });
-
 function renderImagePreview(_ref, embedImage) {
   let {
     loading
@@ -52,7 +51,6 @@ function renderImagePreview(_ref, embedImage) {
     checkered: true
   });
 }
-
 function renderImageName(_ref2) {
   let {
     imageName
@@ -62,7 +60,6 @@ function renderImageName(_ref2) {
     as: "div"
   }, /*#__PURE__*/React.createElement(TruncateText, null, /*#__PURE__*/React.createElement(Text, null, imageName || formatMessage('None Selected'))));
 }
-
 function renderImageActionButtons(_ref3, dispatch, trayDispatch, setFocus, ref) {
   let {
     mode,
@@ -91,7 +88,6 @@ function renderImageActionButtons(_ref3, dispatch, trayDispatch, setFocus, ref)
     "data-testid": "clear-image"
   }, /*#__PURE__*/React.createElement(IconTrashLine, null)));
 }
-
 export const ImageOptions = _ref4 => {
   let {
     state,
@@ -103,18 +99,17 @@ export const ImageOptions = _ref4 => {
   const [isImageActionFocused, setIsImageActionFocused] = useState(false);
   const imageActionRef = useCallback(el => {
     if (el && isImageActionFocused) el.focus();
-  }, [isImageActionFocused]); // After submitting cropper modal a new embedded image should be generated
+  }, [isImageActionFocused]);
 
+  // After submitting cropper modal a new embedded image should be generated
   useEffect(() => {
     var _settings$imageSettin;
-
     if (state.cropperSettings && settings.imageSettings && !_.isEqual(state.cropperSettings, (_settings$imageSettin = settings.imageSettings) === null || _settings$imageSettin === void 0 ? void 0 : _settings$imageSettin.cropperSettings)) {
       if (state.cropperSettings.shape !== settings.shape) {
         trayDispatch({
           shape: state.cropperSettings.shape
         });
       }
-
       createCroppedImageSvg(state.cropperSettings, settings.imageSettings.image).then(generatedSvg => convertFileToBase64(new Blob([generatedSvg.outerHTML], {
         type: 'image/svg+xml'
       }))).then(base64Image => {
@@ -122,10 +117,11 @@ export const ImageOptions = _ref4 => {
           type: trayActions.SET_EMBED_IMAGE,
           payload: base64Image
         });
-      }) // eslint-disable-next-line no-console
+      })
+      // eslint-disable-next-line no-console
       .catch(error => console.error(error));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.cropperSettings]);
   const {
     image

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageSection.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { useReducer, useEffect, useRef, Suspense } from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -33,19 +34,15 @@ import { transformForShape } from '../../../svg/image';
 import SingleColorSVG from './SingleColor/svg';
 import { createCroppedImageSvg } from '../../../../shared/ImageCropper/imageCropUtils';
 const IMAGE_SECTION_ID = 'icon-maker-tray-image-section';
-
 const getImageSection = () => document.querySelector(`#${IMAGE_SECTION_ID}`);
-
 const scrollToBottom = () => {
   const section = getImageSection();
-
   if (section !== null && section !== void 0 && section.scrollIntoView) {
     section.scrollIntoView({
       behavior: 'smooth'
     });
   }
 };
-
 const filterSectionStateMetadata = state => {
   const {
     mode,
@@ -64,7 +61,6 @@ const filterSectionStateMetadata = state => {
     cropperSettings
   };
 };
-
 export const ImageSection = _ref => {
   let {
     settings,
@@ -75,12 +71,13 @@ export const ImageSection = _ref => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const Upload = /*#__PURE__*/React.lazy(() => import('./Upload'));
   const SingleColor = /*#__PURE__*/React.lazy(() => import('./SingleColor'));
-  const MultiColor = /*#__PURE__*/React.lazy(() => import('./MultiColor')); // This object maps image selection modes to the
+  const MultiColor = /*#__PURE__*/React.lazy(() => import('./MultiColor'));
+
+  // This object maps image selection modes to the
   // component that handles that selection.
   //
   // The selected component is dynamically rendered
   // in this component's returned JSX
-
   const allowedModes = {
     [modes.courseImages.type]: Course,
     [modes.uploadImages.type]: Upload,
@@ -90,9 +87,10 @@ export const ImageSection = _ref => {
   const metadata = filterSectionStateMetadata(state);
   const isMetadataLoaded = useRef(false);
   useEffect(() => {
-    const transform = transformForShape(settings.shape, settings.size); // Set Q1 crop defaults
-    // TODO: Set these properties based on cropper
+    const transform = transformForShape(settings.shape, settings.size);
 
+    // Set Q1 crop defaults
+    // TODO: Set these properties based on cropper
     onChange({
       type: svgActions.SET_X,
       payload: transform.x
@@ -120,16 +118,19 @@ export const ImageSection = _ref => {
   }, [onChange, settings.shape, settings.size]);
   useEffect(() => {
     if (state.icon && state.icon in SingleColorSVG) {
-      dispatch({ ...actions.START_LOADING
-      }); // eslint-disable-next-line promise/catch-or-return
-
+      dispatch({
+        ...actions.START_LOADING
+      });
+      // eslint-disable-next-line promise/catch-or-return
       convertFileToBase64(new Blob([SingleColorSVG[state.icon].source(state.iconFillColor)], {
         type: 'image/svg+xml'
       })).then(base64Image => {
-        dispatch({ ...actions.SET_IMAGE,
+        dispatch({
+          ...actions.SET_IMAGE,
           payload: base64Image
         });
-        dispatch({ ...actions.STOP_LOADING
+        dispatch({
+          ...actions.STOP_LOADING
         });
         onChange({
           type: svgActions.SET_EMBED_IMAGE,
@@ -137,11 +138,13 @@ export const ImageSection = _ref => {
         });
       });
     }
-  }, [onChange, state.icon, state.iconFillColor]); // After a new shape is selected in shape section a new embedded image should be generated
+  }, [onChange, state.icon, state.iconFillColor]);
 
+  // After a new shape is selected in shape section a new embedded image should be generated
   useEffect(() => {
     if (state.cropperSettings && settings.shape !== state.cropperSettings.shape) {
-      const newCropperSettings = { ...state.cropperSettings,
+      const newCropperSettings = {
+        ...state.cropperSettings,
         shape: settings.shape
       };
       dispatch({
@@ -155,10 +158,11 @@ export const ImageSection = _ref => {
           type: svgActions.SET_EMBED_IMAGE,
           payload: base64Image
         });
-      }) // eslint-disable-next-line no-console
+      })
+      // eslint-disable-next-line no-console
       .catch(error => console.error(error));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.shape]);
   useEffect(() => {
     if (settings.imageSettings && !isMetadataLoaded.current && !_.isEqual(settings.imageSettings, metadata)) {
@@ -167,8 +171,8 @@ export const ImageSection = _ref => {
         type: actions.UPDATE_SETTINGS.type,
         payload: settings.imageSettings
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.imageSettings]);
   useEffect(() => {
     if (!_.isEqual(metadata, settings.imageSettings)) {
@@ -176,8 +180,8 @@ export const ImageSection = _ref => {
         type: svgActions.SET_IMAGE_SETTINGS,
         payload: metadata
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, Object.values(metadata));
   const modeIsAllowed = !!allowedModes[state.mode];
   const ImageSelector = allowedModes[state.mode];

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ModeSelect.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { forwardRef } from 'react';
 import formatMessage from '../../../../../../format-message';
 import { modes, actions } from '../../../reducers/imageSection';
@@ -30,7 +31,6 @@ const ModeSelect = /*#__PURE__*/forwardRef((_ref, ref) => {
     onFocus,
     onBlur
   } = _ref;
-
   const menuFor = mode => /*#__PURE__*/React.createElement(Menu.Item, {
     key: mode.type,
     value: mode.type,
@@ -39,18 +39,19 @@ const ModeSelect = /*#__PURE__*/forwardRef((_ref, ref) => {
       dispatch({
         type: mode.type
       });
-      dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+      dispatch({
+        ...actions.SET_IMAGE_COLLECTION_OPEN,
         payload: true
       });
     }
   }, mode.label);
-
   return /*#__PURE__*/React.createElement(Menu, {
     mountNode: mountNode,
     placement: "top",
     ref: ref,
     onFocus: onFocus,
-    onBlur: onBlur // maps to data-position-content
+    onBlur: onBlur
+    // maps to data-position-content
     ,
     id: ICON_MAKER_ADD_IMAGE_MENU_ID,
     trigger: /*#__PURE__*/React.createElement(Button, {

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/MultiColor/index.js

@@ -15,36 +15,40 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVGList, { TYPE } from '../SVGList';
 import { actions } from '../../../../reducers/imageSection';
 import { convertFileToBase64 } from '../../../../../shared/fileUtils';
 import { actions as svgActions } from '../../../../reducers/svgSettings';
-
 const MultiColor = _ref => {
   let {
     dispatch,
     onChange,
     onLoaded
   } = _ref;
-
   const onSelect = (id, svg) => {
-    dispatch({ ...actions.START_LOADING
+    dispatch({
+      ...actions.START_LOADING
     });
-    dispatch({ ...actions.SET_IMAGE_NAME,
+    dispatch({
+      ...actions.SET_IMAGE_NAME,
       payload: svg.label
     });
     convertFileToBase64(new Blob([svg.source()], {
       type: 'image/svg+xml'
     })).then(base64Image => {
-      dispatch({ ...actions.SET_IMAGE,
+      dispatch({
+        ...actions.SET_IMAGE,
         payload: base64Image
       });
-      dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+      dispatch({
+        ...actions.SET_IMAGE_COLLECTION_OPEN,
         payload: false
       });
-      dispatch({ ...actions.STOP_LOADING
+      dispatch({
+        ...actions.STOP_LOADING
       });
       onChange({
         type: svgActions.SET_EMBED_IMAGE,
@@ -52,14 +56,12 @@ const MultiColor = _ref => {
       });
     });
   };
-
   return /*#__PURE__*/React.createElement(SVGList, {
     type: TYPE.Multicolor,
     onSelect: onSelect,
     onMount: onLoaded
   });
 };
-
 MultiColor.propTypes = {
   dispatch: PropTypes.func,
   onChange: PropTypes.func,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/MultiColor/svg.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import formatMessage from '../../../../../../../format-message';
 export default {
   art: {

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SVGList.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@instructure/ui-link';
@@ -30,7 +31,6 @@ export const TYPE = {
 export function svgSourceFor(type) {
   return type === TYPE.Multicolor ? MultiColorSVG : SingleColorSVG;
 }
-
 const SVGList = _ref => {
   let {
     type,
@@ -38,10 +38,12 @@ const SVGList = _ref => {
     fillColor,
     onMount
   } = _ref;
-  const svgSourceList = svgSourceFor(type); // Only execute this once
+  const svgSourceList = svgSourceFor(type);
 
+  // Only execute this once
   useEffect(() => {
-    if (onMount) onMount(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (onMount) onMount();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "start",
@@ -72,7 +74,6 @@ const SVGList = _ref => {
     fillColor: fillColor
   }))))));
 };
-
 SVGList.propTypes = {
   fillColor: PropTypes.string,
   type: PropTypes.oneOf(Object.values(TYPE)).isRequired,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SVGThumbnail.js

@@ -15,13 +15,12 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SVGIcon } from '@instructure/ui-svg-images';
-
 const SVGThumbnail = _ref => {
   var _source$name, _source$name2;
-
   let {
     name,
     source,
@@ -38,7 +37,6 @@ const SVGThumbnail = _ref => {
     "data-testid": `icon-${name}`
   }));
 };
-
 SVGThumbnail.propTypes = {
   size: PropTypes.string,
   fillColor: PropTypes.string,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SingleColor/index.js

@@ -15,11 +15,11 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVGList, { TYPE } from '../SVGList';
 import { actions } from '../../../../reducers/imageSection';
-
 const SingleColor = _ref => {
   let {
     data,
@@ -29,19 +29,20 @@ const SingleColor = _ref => {
   const {
     iconFillColor
   } = data;
-
   const onSelect = (id, svg) => {
-    dispatch({ ...actions.SET_IMAGE_NAME,
+    dispatch({
+      ...actions.SET_IMAGE_NAME,
       payload: svg.label
     });
-    dispatch({ ...actions.SET_ICON,
+    dispatch({
+      ...actions.SET_ICON,
       payload: id
     });
-    dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+    dispatch({
+      ...actions.SET_IMAGE_COLLECTION_OPEN,
       payload: false
     });
   };
-
   return /*#__PURE__*/React.createElement(SVGList, {
     type: TYPE.Singlecolor,
     onSelect: onSelect,
@@ -49,7 +50,6 @@ const SingleColor = _ref => {
     onMount: onLoaded
   });
 };
-
 SingleColor.propTypes = {
   dispatch: PropTypes.func,
   data: PropTypes.shape({

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SingleColor/svg.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import formatMessage from '../../../../../../../format-message';
 const DEFAULT_COLOR = '#ff00ff';
 export default {