@instructure/canvas-rce 5.14.0 → 5.14.2

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'

package/es/rce/plugins/shared/ImageCropper/svg/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/>.
  */
+
 import round from '../../round';
 import { SHAPE_CONTAINER_LENGTH } from '../constants';
 import { createSvgElement } from './utils';
@@ -25,37 +26,27 @@ export function buildShapeMask(_ref) {
     size
   } = _ref;
   const dimensionSize = size || SHAPE_CONTAINER_LENGTH;
-
   switch (shape) {
     case Shape.Square:
       return buildSquare(dimensionSize);
-
     case Shape.Circle:
       return buildCircle(dimensionSize);
-
     case Shape.Triangle:
       return buildTriangle(dimensionSize);
-
     case Shape.Diamond:
       return buildDiamond(dimensionSize);
-
     case Shape.Pentagon:
       return buildPentagon(dimensionSize);
-
     case Shape.Hexagon:
       return buildHexagon(dimensionSize);
-
     case Shape.Octagon:
       return buildOctagon(dimensionSize);
-
     case Shape.Star:
       return buildStar(dimensionSize);
-
     default:
       throw new Error(`Invalid shape: ${shape}`);
   }
 }
-
 function buildSquare(dimensionSize) {
   return createSvgElement('rect', {
     x: 0,
@@ -65,7 +56,6 @@ function buildSquare(dimensionSize) {
     fill: 'black'
   });
 }
-
 function buildCircle(dimensionSize) {
   return createSvgElement('circle', {
     cx: dimensionSize / 2,
@@ -74,19 +64,16 @@ function buildCircle(dimensionSize) {
     fill: 'black'
   });
 }
-
 function buildTriangle(dimensionSize) {
   return createSvgElement('path', {
     d: `M${dimensionSize / 2} 0L${dimensionSize} ${dimensionSize}H0L${dimensionSize / 2} 0Z`
   });
 }
-
 function buildDiamond(dimensionSize) {
   return createSvgElement('path', {
     d: `M${dimensionSize / 2} 0L${dimensionSize} ${dimensionSize / 2}L${dimensionSize / 2} ${dimensionSize}L0 ${dimensionSize / 2}L${dimensionSize / 2} 0Z`
   });
 }
-
 function buildPentagon(dimensionSize) {
   const half = round(dimensionSize / 2, 2);
   const alpha = round(0.3906 * dimensionSize, 2);
@@ -95,14 +82,12 @@ function buildPentagon(dimensionSize) {
     d: `M${half} 0L${dimensionSize} ${alpha}L${half + beta} ${dimensionSize}H${half - beta}L0 ${alpha}L${half} 0L${half} 0Z`
   });
 }
-
 function buildHexagon(dimensionSize) {
   const leg = round(0.2895 * dimensionSize, 2);
   return createSvgElement('path', {
     d: `M${dimensionSize - leg} 0L${dimensionSize} ${dimensionSize / 2}L${dimensionSize - leg} ${dimensionSize}H${leg}L0 ${dimensionSize / 2}L${leg} 0H${dimensionSize - leg}Z`
   });
 }
-
 function buildOctagon(dimensionSize) {
   const leg = round(0.2895 * dimensionSize, 2);
   const side = round(dimensionSize - 2 * leg, 2);
@@ -110,7 +95,6 @@ function buildOctagon(dimensionSize) {
     d: `M0 ${leg}L${leg} 0H${leg + side}L${dimensionSize} ${leg}V${leg + side}L${leg + side} ${dimensionSize}H${leg}L0 ${leg + side}V${leg}Z`
   });
 }
-
 function buildStar(dimensionSize) {
   const half = round(dimensionSize / 2, 2);
   const alpha = round(0.1143 * dimensionSize, 2);

package/es/rce/plugins/shared/ImageCropper/svg/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/>.
  */
+
 export function createSvgElement(tag) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const element = document.createElementNS('http://www.w3.org/2000/svg', tag);

package/es/rce/plugins/shared/ImageCropper/useKeyMouseEvents.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 { useEffect, useState, useRef, useCallback } from 'react';
 import { debounce } from '@instructure/debounce';
 import { KEY_EVENT_DELAY, KEY_EVENT_ACCELERATION } from './constants';
@@ -22,25 +23,20 @@ import { actions } from './reducers/imageCropper';
 const EVENT_EXCEPTION_ELEMENT_IDS = ['imageCropperHeader', 'imageCropperFooter', 'imageCropperControls'];
 const TOUCH_EVENTS = ['ontouchmove', 'ontouchend', 'ontouchcancel'];
 const MOUSE_EVENTS = ['onmousemove', 'onmouseup', 'onmouseout'];
-
 function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving, dispatch) {
   // Refs that manage the keydown acceleration
   const direction = useRef(0);
   const initialTime = useRef(null);
-
   const onKeyDown = event => {
     // 37 = Left, 38 = Up, 39 = Right, 40 = Down
     const {
       keyCode
     } = event;
-
     if (![37, 38, 39, 40].includes(keyCode)) {
       return;
     }
-
     event.preventDefault();
     let elapsedTime;
-
     if (keyCode !== direction.current) {
       elapsedTime = 0;
       initialTime.current = new Date();
@@ -55,22 +51,18 @@ function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tem
       const currentTime = new Date();
       elapsedTime = (currentTime - initialTime.current) / 1000;
     }
-
     const translationDiff = Math.floor(KEY_EVENT_ACCELERATION * elapsedTime ** 2) || 1;
-
     if ([37, 39].includes(keyCode)) {
       const sign = keyCode === 37 ? -1 : 1;
       const newTranslateX = tempTranslateXRef.current + sign * translationDiff;
       setTempTranslateX(newTranslateX);
     }
-
     if ([38, 40].includes(keyCode)) {
       const sign = keyCode === 38 ? -1 : 1;
       const newTranslateY = tempTranslateYRef.current + sign * translationDiff;
       setTempTranslateY(newTranslateY);
     }
   };
-
   const stopMovement = useCallback(debounce(() => {
     direction.current = 0;
     initialTime.current = null;
@@ -83,41 +75,36 @@ function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tem
       // If the active element is in the modal header, footer or controls.
       if (EVENT_EXCEPTION_ELEMENT_IDS.some(id => {
         var _document$getElementB;
-
         return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(document.activeElement);
       })) {
         return;
       }
-
       onKeyDown(event);
-    }; // Adds the event listener when component did mount
-
-
+    };
+    // Adds the event listener when component did mount
     document.addEventListener('keydown', onKeyDownWrapper);
     return () => {
       // Removes the event listener when component will unmount
       document.removeEventListener('keydown', onKeyDownWrapper);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     if (isMoving && direction.current !== 0) {
       stopMovement();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tempTranslateX, tempTranslateY]);
 }
-
 function useMouseAndTouchEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving) {
   const initialPageX = useRef(0);
   const initialPageY = useRef(0);
   const isDragging = useRef(false);
   const imgElement = useRef(null);
-
   const onStopMove = isMouseEvent => () => {
     isDragging.current = false;
     initialPageX.current = 0;
     initialPageY.current = 0;
-
     if (imgElement.current) {
       const [move, end, cancel] = isMouseEvent ? MOUSE_EVENTS : TOUCH_EVENTS;
       imgElement.current[move] = null;
@@ -125,15 +112,12 @@ function useMouseAndTouchEvents(tempTranslateX, tempTranslateY, setTempTranslate
       imgElement.current[cancel] = null;
       imgElement.current = null;
     }
-
     setIsMoving(false);
   };
-
   const onMove = isMouseEvent => e => {
     if (!isDragging.current) {
       return onStopMove();
     }
-
     const {
       clientX,
       clientY
@@ -141,7 +125,6 @@ function useMouseAndTouchEvents(tempTranslateX, tempTranslateY, setTempTranslate
     setTempTranslateX(tempTranslateX + clientX - initialPageX.current);
     setTempTranslateY(tempTranslateY + clientY - initialPageY.current);
   };
-
   const onStartMove = (e, isMouseEvent) => {
     isDragging.current = true;
     const {
@@ -155,79 +138,69 @@ function useMouseAndTouchEvents(tempTranslateX, tempTranslateY, setTempTranslate
     initialPageY.current = clientY;
     const [move, end, cancel] = isMouseEvent ? MOUSE_EVENTS : TOUCH_EVENTS;
     target[move] = onMove(isMouseEvent);
-    target[end] = onStopMove(isMouseEvent); // Should stop the movement when touch/mouse leaves the preview
-
+    target[end] = onStopMove(isMouseEvent);
+    // Should stop the movement when touch/mouse leaves the preview
     target[cancel] = onStopMove(isMouseEvent);
     imgElement.current = target;
     setIsMoving(true);
   };
-
   return [e => onStartMove(e, true), e => onStartMove(e, false)];
 }
-
 export function useKeyMouseTouchEvents(translateX, translateY, dispatch) {
   const [tempTranslateX, _setTempTranslateX] = useState(translateX);
   const [tempTranslateY, _setTempTranslateY] = useState(translateY);
-  const [isMoving, setIsMoving] = useState(false); // These are used to get the current values when the callback is called from outside.
+  const [isMoving, setIsMoving] = useState(false);
 
+  // These are used to get the current values when the callback is called from outside.
   const tempTranslateXRef = useRef(tempTranslateX);
   const tempTranslateYRef = useRef(tempTranslateY);
-
   const setTempTranslateX = data => {
     setIsMoving(true);
     tempTranslateXRef.current = data;
-
     _setTempTranslateX(data);
   };
-
   const setTempTranslateY = data => {
     setIsMoving(true);
     tempTranslateYRef.current = data;
-
     _setTempTranslateY(data);
   };
-
   useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving, dispatch);
-  const [onMouseDown, onTouchStart] = useMouseAndTouchEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving); // Updates the reducer state when user stops moving.
+  const [onMouseDown, onTouchStart] = useMouseAndTouchEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving);
 
+  // Updates the reducer state when user stops moving.
   useEffect(() => {
     if (isMoving) {
       return;
     }
-
     if (tempTranslateX !== translateX) {
       dispatch({
         type: actions.SET_TRANSLATE_X,
         payload: tempTranslateX
       });
     }
-
     if (tempTranslateY !== translateY) {
       dispatch({
         type: actions.SET_TRANSLATE_Y,
         payload: tempTranslateY
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isMoving]); // Updates the component state when props changed.
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMoving]);
 
+  // Updates the component state when props changed.
   useEffect(() => {
     if (isMoving) {
       return;
     }
-
     if (translateX !== tempTranslateX) {
       tempTranslateXRef.current = translateX;
-
       _setTempTranslateX(translateX);
     }
-
     if (translateY !== tempTranslateY) {
       tempTranslateYRef.current = translateY;
-
       _setTempTranslateY(translateY);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [translateX, translateY]);
   return [tempTranslateX, tempTranslateY, onMouseDown, onTouchStart];
 }

package/es/rce/plugins/shared/ImageCropper/useMouseWheel.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 { useEffect, useState } from 'react';
 import { debounce } from '@instructure/debounce';
 import { calculateScaleRatio } from './controls/utils';
@@ -23,35 +24,32 @@ import { actions } from './reducers/imageCropper';
 export function useMouseWheel(scaleRatio, dispatch) {
   const [tempScaleRatio, setTempScaleRatio] = useState(scaleRatio);
   const [isScaling, setIsScaling] = useState(false);
-
   const onWheelCallback = event => {
     // Couldn't prevent modal body scroll when zoom, when using {passive:false}
     // the zoom event listener makes zoom look like a bouncing effect.
     // https://chromestatus.com/feature/6662647093133312
     // event.preventDefault()
-    const newScaleRatio = calculateScaleRatio(tempScaleRatio - event.deltaY * WHEEL_SCALE_STEP);
 
+    const newScaleRatio = calculateScaleRatio(tempScaleRatio - event.deltaY * WHEEL_SCALE_STEP);
     if (newScaleRatio !== tempScaleRatio) {
       setIsScaling(true);
       setTempScaleRatio(newScaleRatio);
     }
   };
-
   const setScalingRatio = () => {
     setIsScaling(false);
   };
-
   useEffect(() => {
     if (!isScaling) {
       setTempScaleRatio(scaleRatio);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scaleRatio]);
   useEffect(() => {
     if (isScaling) {
       debounce(setScalingRatio, WHEEL_EVENT_DELAY)();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tempScaleRatio]);
   useEffect(() => {
     if (!isScaling) {
@@ -59,8 +57,8 @@ export function useMouseWheel(scaleRatio, dispatch) {
         type: actions.SET_SCALE_RATIO,
         payload: tempScaleRatio
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isScaling]);
   return [tempScaleRatio, onWheelCallback];
 }

package/es/rce/plugins/shared/ImageOptionsForm.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 { SimpleSelect } from '@instructure/ui-simple-select';
@@ -28,7 +29,6 @@ import { Tooltip } from '@instructure/ui-tooltip';
 import { CUSTOM, MIN_HEIGHT, MIN_WIDTH, MIN_PERCENTAGE, imageSizes, labelForImageSize } from '../instructure_image/ImageEmbedOptions';
 import formatMessage from '../../../format-message';
 import DimensionsInput from './DimensionsInput';
-
 const ImageOptionsForm = _ref => {
   let {
     imageSize,
@@ -137,5 +137,4 @@ const ImageOptionsForm = _ref => {
     minPercentage: MIN_PERCENTAGE
   })))));
 };
-
 export default ImageOptionsForm;