@instructure/canvas-rce 5.14.1 → 5.14.2

package/es/rce/plugins/shared/ImageCropper/DirectionRegion.js

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2022 - present Instructure, Inc.
  *
@@ -17,11 +16,11 @@ import _pt from "prop-types";
  * 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 { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import formatMessage from '../../../../format-message';
 export let Direction;
-
 (function (Direction) {
   Direction[Direction["LEFT"] = 37] = "LEFT";
   Direction[Direction["UP"] = 38] = "UP";
@@ -29,26 +28,20 @@ export let Direction;
   Direction[Direction["DOWN"] = 40] = "DOWN";
   Direction[Direction["NONE"] = 0] = "NONE";
 })(Direction || (Direction = {}));
-
 const directionToWord = direction => {
   switch (direction) {
     case Direction.LEFT:
       return formatMessage('Left');
-
     case Direction.UP:
       return formatMessage('Up');
-
     case Direction.RIGHT:
       return formatMessage('Right');
-
     case Direction.DOWN:
       return formatMessage('Down');
-
     case Direction.NONE:
       return null;
   }
 };
-
 export const DirectionRegion = _ref => {
   let {
     direction

package/es/rce/plugins/shared/ImageCropper/Modal.js

@@ -30,7 +30,6 @@ import { Controls } from './controls';
 import { ImageCropperSettingsPropTypes } from './propTypes';
 import { DirectionRegion } from './DirectionRegion';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
-
 const renderBody = (image, settings, dispatch, message, loading) => {
   if (loading) {
     return /*#__PURE__*/React.createElement(Flex, {
@@ -42,7 +41,6 @@ const renderBody = (image, settings, dispatch, message, loading) => {
       size: "large"
     })));
   }
-
   return /*#__PURE__*/React.createElement(Flex, {
     direction: "column",
     margin: "none"
@@ -66,7 +64,6 @@ const renderBody = (image, settings, dispatch, message, loading) => {
     direction: settings.direction
   }));
 };
-
 const renderFooter = (settings, onClose) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
@@ -76,7 +73,6 @@ const renderFooter = (settings, onClose) => {
     type: "submit"
   }, formatMessage('Save')));
 };
-
 export const ImageCropperModal = _ref => {
   let {
     open,
@@ -93,7 +89,8 @@ export const ImageCropperModal = _ref => {
     shape !== settings.shape && dispatch({
       type: actions.SET_SHAPE,
       payload: shape
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shape]);
   useEffect(() => {
     cropSettings && dispatch({
@@ -110,9 +107,9 @@ export const ImageCropperModal = _ref => {
     open: open,
     onDismiss: onClose,
     onSubmit: e => {
-      e.preventDefault(); // Direction is only used while in cropper and
+      e.preventDefault();
+      // Direction is only used while in cropper and
       // should not be embedded in the icon's metadata
-
       const {
         direction,
         ...cropperSettings

package/es/rce/plugins/shared/ImageCropper/Preview.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, createRef } from 'react';
 import PropTypes from 'prop-types';
 import formatMessage from '../../../../format-message';
@@ -25,20 +26,17 @@ import { useMouseWheel } from './useMouseWheel';
 import { useKeyMouseTouchEvents } from './useKeyMouseEvents';
 import checkerboardStyle from '../CheckerboardStyling';
 import { View } from '@instructure/ui-view';
+
 /**
  * Remove the node contents and append the svg element.
  */
-
 function replaceSvg(svg, node) {
   if (!node) return;
-
   while (node.firstChild) {
     node.removeChild(node.lastChild);
   }
-
   node.appendChild(svg);
 }
-
 function getTransformValue(_ref) {
   let {
     translateX,
@@ -53,7 +51,6 @@ function getTransformValue(_ref) {
   if (scaleRatio > 1) values.push(`scale(${scaleRatio})`);
   return values.join(' ');
 }
-
 export const Preview = _ref2 => {
   let {
     image,
@@ -73,8 +70,8 @@ export const Preview = _ref2 => {
   const [tempScaleRatio, onWheelCallback] = useMouseWheel(scaleRatio, dispatch);
   const [tempTranslateX, tempTranslateY, onMouseDownCallback, onTouchStartCallback] = useKeyMouseTouchEvents(translateX, translateY, dispatch, imgRef);
   useEffect(() => {
-    imgRef.current.ondragstart = () => false; // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    imgRef.current.ondragstart = () => false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     const svg = buildSvg(shape);
@@ -86,17 +83,16 @@ export const Preview = _ref2 => {
     rotation,
     scaleRatio: tempScaleRatio
   });
-
   function isSafariVersion15OrLesser() {
     const match = /Version\/(\d+).+Safari/.exec(navigator.userAgent);
     return match ? parseInt(match[1], 10) < 16 : false;
-  } // Clip is not supported in Safari until v16.
+  }
+
+  // Clip is not supported in Safari until v16.
   // It's needed here to prevent a strange screenreader
   // behavior that makes the cropper look bad. 'hidden'
   // suffices when clip is not available, although it's not perfect
   // TODO: remove when Safari versions >= 16 are more commonplace
-
-
   const overflow = isSafariVersion15OrLesser() ? 'hidden' : 'clip';
   return /*#__PURE__*/React.createElement("div", {
     style: {

package/es/rce/plugins/shared/ImageCropper/constants.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/>.
  */
+
 export const PREVIEW_BACKGROUND_COLOR = '#394B58';
 export const PREVIEW_WIDTH = 942;
 export const PREVIEW_HEIGHT = 350;

package/es/rce/plugins/shared/ImageCropper/controls/CustomNumberInput.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 from 'react';
 import PropTypes from 'prop-types';
 import { NumberInput } from '@instructure/ui-number-input';
@@ -37,20 +38,16 @@ export const CustomNumberInput = _ref => {
     formatValueCallback,
     onChange
   });
-
   const handleChange = (event, newValue) => digestNewValue(newValue.trim());
-
   const handleBlur = () => digestCurrentValue();
-
   const handleIncrement = () => onChange(processValueCallback(value + 1));
-
   const handleDecrement = () => onChange(processValueCallback(value - 1));
-
   const messages = hasError ? [{
     text: formatMessage('Invalid entry.'),
     type: 'error'
   }] : [];
   return /*#__PURE__*/React.createElement(NumberInput, {
+    allowStringValue: true,
     value: inputValue,
     onChange: handleChange,
     onBlur: handleBlur,

package/es/rce/plugins/shared/ImageCropper/controls/ResetControls.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 from 'react';
 import PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';

package/es/rce/plugins/shared/ImageCropper/controls/RotationControls.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 from 'react';
 import PropTypes from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
@@ -25,36 +26,26 @@ import { CustomNumberInput } from './CustomNumberInput';
 import { calculateRotation, getNearestRectAngle } from './utils';
 import { BUTTON_ROTATION_DEGREES } from '../constants';
 import formatMessage from '../../../../../format-message';
-
 const parseRotationText = value => {
   // Matches a positive/negative integer/decimal followed by "º" symbol
   const matches = value.match(/([-|+]?\d+(?:\.\d+)?)º?/);
-
   if (!matches) {
     return null;
   }
-
   const result = parseInt(matches[1], 10);
-
   if (Number.isNaN(result)) {
     return null;
   }
-
   return result;
 };
-
 const formatRotationText = value => `${value}º`;
-
 export const RotationControls = _ref => {
   let {
     rotation,
     onChange
   } = _ref;
-
   const rotateLeftCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, true) - BUTTON_ROTATION_DEGREES));
-
   const rotateRightCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, false) + BUTTON_ROTATION_DEGREES));
-
   return /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "0 medium 0 0",
     title: formatMessage('Rotation'),

package/es/rce/plugins/shared/ImageCropper/controls/ShapeControls.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 from 'react';
 import PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';

package/es/rce/plugins/shared/ImageCropper/controls/ZoomControls.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 from 'react';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
@@ -28,33 +29,25 @@ import PropTypes from 'prop-types';
 import { CustomNumberInput } from './CustomNumberInput';
 import { showFlashAlert } from '../../../../../common/FlashAlert';
 import { debounce } from '@instructure/debounce';
-
 const parseZoomText = value => {
   // Matches a positive/negative integer/decimal followed by %" symbol
   const matches = value.match(/([-|+]?\d+(?:\.\d+)?)%?/);
-
   if (!matches) {
     return null;
   }
-
   const result = parseInt(matches[1], 10);
-
   if (Number.isNaN(result)) {
     return null;
   }
-
   return result;
 };
-
 const formatZoomText = value => `${value}%`;
-
 const debouncedAlert = debounce(showFlashAlert, 1000);
 export const ZoomControls = _ref => {
   let {
     scaleRatio,
     onChange
   } = _ref;
-
   const onZoomChange = value => {
     const message = {
       message: `${round(value * 100)}% Zoom`,
@@ -64,17 +57,14 @@ export const ZoomControls = _ref => {
     debouncedAlert(message);
     onChange(value);
   };
-
   const zoomOutCallback = () => {
     const newScaleRatio = calculateScaleRatio(scaleRatio - BUTTON_SCALE_STEP);
     onZoomChange(newScaleRatio);
   };
-
   const zoomInCallback = () => {
     const newScaleRatio = calculateScaleRatio(scaleRatio + BUTTON_SCALE_STEP);
     onZoomChange(newScaleRatio);
   };
-
   return /*#__PURE__*/React.createElement(Flex.Item, {
     title: formatMessage('Zoom'),
     role: "toolbar",

package/es/rce/plugins/shared/ImageCropper/controls/index.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 from 'react';
 import { Flex } from '@instructure/ui-flex';
 import { actions } from '../reducers/imageCropper';

package/es/rce/plugins/shared/ImageCropper/controls/useDebouncedNumericValue.js

@@ -15,10 +15,10 @@
  * 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 { useEffect, useRef, useState } from 'react';
 import { debounce } from '@instructure/debounce';
 const CHANGE_EVENT_DELAY = 1000;
-
 const digestValue = _ref => {
   let {
     parseValueCallback,
@@ -27,16 +27,13 @@ const digestValue = _ref => {
     value
   } = _ref;
   const parsedNewValue = parseValueCallback(value);
-
   if (parsedNewValue === null) {
     return [null, null];
   }
-
   const processedNewValue = processValueCallback(parsedNewValue);
   const formattedNewTempValue = formatValueCallback(processedNewValue);
   return [formattedNewTempValue, processedNewValue];
 };
-
 export function useDebouncedNumericValue(_ref2) {
   let {
     value,
@@ -47,7 +44,6 @@ export function useDebouncedNumericValue(_ref2) {
   } = _ref2;
   const [inputValue, setInputValue] = useState(formatValueCallback(value));
   const [hasError, setHasError] = useState(false);
-
   const updateStateAfterDigest = newValue => {
     const [formattedValue, processedValue] = digestValue({
       parseValueCallback,
@@ -55,40 +51,31 @@ export function useDebouncedNumericValue(_ref2) {
       formatValueCallback,
       value: newValue
     });
-
     if (formattedValue === null || processedValue === null) {
       setHasError(true);
       return;
     }
-
     setHasError(false);
-
     if (newValue !== formattedValue) {
       setInputValue(formattedValue);
     }
-
     if (processedValue !== value) {
       onChange(processedValue);
     }
   };
-
   const debouncedUpdateStateAfterDigest = useRef(debounce(updateStateAfterDigest, CHANGE_EVENT_DELAY));
   useEffect(() => {
     const newTempValue = formatValueCallback(value);
-
     if (newTempValue !== inputValue) {
       setInputValue(newTempValue);
       setHasError(false);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
-
   const digestCurrentValue = () => updateStateAfterDigest(inputValue);
-
   const digestNewValue = rawValue => {
     setInputValue(rawValue);
     debouncedUpdateStateAfterDigest.current(rawValue);
   };
-
   return [inputValue, digestCurrentValue, digestNewValue, hasError];
 }

package/es/rce/plugins/shared/ImageCropper/controls/utils.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 { BUTTON_ROTATION_DEGREES, MAX_SCALE_RATIO, MIN_SCALE_RATIO } from '../constants';
 import round from '../../round';
 export const calculateScaleRatio = scaleRatio => {
@@ -29,11 +30,9 @@ export const calculateScalePercentage = scalePercentage => {
 };
 export const calculateRotation = rotationAngle => {
   const simplifiedRotationAngle = round(rotationAngle % 360);
-
   if (Math.abs(rotationAngle) >= 360) {
     return simplifiedRotationAngle;
   }
-
   return rotationAngle;
 };
 export const getNearestRectAngle = (rotationAngle, shouldRotateToLeft) => {

package/es/rce/plugins/shared/ImageCropper/imageCropUtils.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 round from '../round';
 import { buildShapeMask } from './svg/shape';
 import { createSvgElement } from './svg/utils';
@@ -49,22 +50,18 @@ export async function createCroppedImageSvg(cropperSettings, image) {
   rootElement.appendChild(mainGroup);
   return rootElement;
 }
-
 const fetchImageMetadata = src => {
   return new Promise(resolve => {
     const img = new Image();
-
     img.onload = function () {
       resolve({
         imageWidth: this.naturalWidth,
         imageHeight: this.naturalHeight
       });
     };
-
     img.src = src;
   });
 };
-
 const createDefsElement = _ref => {
   let {
     shape,
@@ -82,11 +79,9 @@ const createDefsElement = _ref => {
   defs.appendChild(clipPath);
   return defs;
 };
-
 const convertTranslationUnits = (translationPixels, imageHeight) => {
   return imageHeight * translationPixels / PREVIEW_HEIGHT;
 };
-
 const createMainSvgGroup = _ref2 => {
   let {
     imageWidth,
@@ -113,7 +108,6 @@ const createMainSvgGroup = _ref2 => {
   mainGroup.appendChild(imageElement);
   return mainGroup;
 };
-
 export const setTransformAttribute = _ref3 => {
   let {
     imageElement,
@@ -135,15 +129,12 @@ export const setTransformAttribute = _ref3 => {
   const x = round(-horizontalCenter + convertedTranslateX + squareDimension / 2, 2);
   const y = round(-verticalCenter + convertedTranslateY + squareDimension / 2, 2);
   let value = `translate(${x}, ${y})`;
-
   if (rotation !== 0) {
     // Rotates image using its center as pivot
     value += ` rotate(${rotation}, ${horizontalCenter}, ${verticalCenter})`;
   }
-
   if (scaleRatio !== 1.0) {
     value += ` scale(${scaleRatio})`;
   }
-
   imageElement.setAttribute('transform', value);
 };

package/es/rce/plugins/shared/ImageCropper/index.js

@@ -15,4 +15,5 @@
  * 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/>.
  */
+
 export { ImageCropperModal } from './Modal';

package/es/rce/plugins/shared/ImageCropper/propTypes.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 PropTypes from 'prop-types';
 export const ImageCropperSettingsPropTypes = PropTypes.shape({
   shape: PropTypes.string,

package/es/rce/plugins/shared/ImageCropper/reducers/imageCropper.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 { DEFAULT_CROPPER_SETTINGS } from '../constants';
 export const defaultState = DEFAULT_CROPPER_SETTINGS;
 export const actions = {
@@ -29,43 +30,43 @@ export const actions = {
 export const cropperSettingsReducer = (state, action) => {
   switch (action.type) {
     case actions.SET_SHAPE:
-      return { ...state,
+      return {
+        ...state,
         shape: action.payload
       };
-
     case actions.SET_ROTATION:
-      return { ...state,
+      return {
+        ...state,
         rotation: action.payload
       };
-
     case actions.SET_SCALE_RATIO:
-      return { ...state,
+      return {
+        ...state,
         scaleRatio: action.payload
       };
-
     case actions.SET_TRANSLATE_X:
-      return { ...state,
+      return {
+        ...state,
         translateX: action.payload
       };
-
     case actions.SET_TRANSLATE_Y:
-      return { ...state,
+      return {
+        ...state,
         translateY: action.payload
       };
-
     case actions.UPDATE_SETTINGS:
-      return { ...state,
+      return {
+        ...state,
         ...action.payload
       };
-
     case actions.RESET_SETTINGS:
-      return { ...state,
+      return {
+        ...state,
         rotation: defaultState.rotation,
         scaleRatio: defaultState.scaleRatio,
         translateX: defaultState.translateX,
         translateY: defaultState.translateY
       };
-
     default:
       throw Error('Unknown action for image cropper reducer');
   }

package/es/rce/plugins/shared/ImageCropper/shape.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/>.
  */
+
 export const Shape = {
   Square: 'square',
   Circle: 'circle',

package/es/rce/plugins/shared/ImageCropper/svg/index.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 { createSvgElement } from './utils';
 import { PREVIEW_HEIGHT, SHAPE_CONTAINER_LENGTH, GLUE_WIDTH, PREVIEW_WIDTH, PREVIEW_BACKGROUND_COLOR } from '../constants';
 import { buildShapeMask } from './shape';
@@ -57,7 +58,6 @@ export function buildSvg(shape) {
   mainContainer.appendChild(bgElement);
   return mainContainer;
 }
-
 function createSvgContainer() {
   return createSvgElement('svg', {
     xmlns: 'http://www.w3.org/2000/svg',
@@ -65,7 +65,6 @@ function createSvgContainer() {
     height: PREVIEW_HEIGHT
   });
 }
-
 function createMask(settings) {
   const maskElement = createSvgElement('mask', {
     id: 'imageCropperMask'