@instructure/canvas-rce 5.14.1 → 5.15.0

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,47 +15,37 @@
  * 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';
 import { Shape } from '../shape';
-export function buildShapeMask(_ref) {
-  let {
-    shape,
-    size
-  } = _ref;
+export function buildShapeMask({
+  shape,
+  size
+}) {
   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 +55,6 @@ function buildSquare(dimensionSize) {
     fill: 'black'
   });
 }
-
 function buildCircle(dimensionSize) {
   return createSvgElement('circle', {
     cx: dimensionSize / 2,
@@ -74,19 +63,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 +81,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 +94,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,11 +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/>.
  */
-export function createSvgElement(tag) {
-  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+export function createSvgElement(tag, attributes = {}) {
   const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
-  Object.entries(attributes).forEach(_ref => {
-    let [attr, value] = _ref;
+  Object.entries(attributes).forEach(([attr, value]) => {
     element.setAttribute(attr, value);
   });
   return element;

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;
@@ -81,43 +73,35 @@ function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tem
   useEffect(() => {
     const onKeyDownWrapper = event => {
       // 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);
-      })) {
+      if (EVENT_EXCEPTION_ELEMENT_IDS.some(id => document.getElementById(id)?.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 +109,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 +122,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 +135,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,25 +29,23 @@ 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,
-    displayAs,
-    isDecorativeImage,
-    altText,
-    isLinked,
-    dimensionsState,
-    handleAltTextChange,
-    handleIsDecorativeChange,
-    handleDisplayAsChange,
-    handleImageSizeChange,
-    messagesForSize,
-    hideDimensions,
-    id = 'image-options-form',
-    isIconMaker = false,
-    forBlockEditorUse = false
-  } = _ref;
+const ImageOptionsForm = ({
+  imageSize,
+  displayAs,
+  isDecorativeImage,
+  altText,
+  isLinked,
+  dimensionsState,
+  handleAltTextChange,
+  handleIsDecorativeChange,
+  handleDisplayAsChange,
+  handleImageSizeChange,
+  messagesForSize,
+  hideDimensions,
+  id = 'image-options-form',
+  isIconMaker = false,
+  forBlockEditorUse = false
+}) => {
   const TYPE = isIconMaker ? formatMessage('icon') : formatMessage('image');
   const tooltipText = formatMessage('Used by screen readers to describe the content of an {TYPE}', {
     TYPE
@@ -137,5 +136,4 @@ const ImageOptionsForm = _ref => {
     minPercentage: MIN_PERCENTAGE
   })))));
 };
-
 export default ImageOptionsForm;

package/es/rce/plugins/shared/LinkDisplay.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 { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
@@ -24,18 +25,15 @@ import formatMessage from '../../../format-message';
 import { showFlashAlert } from '../../../common/FlashAlert';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { getIcon, getFriendlyLinkType } from './linkUtils';
-
 const getEditMessage = () => formatMessage('If left empty, link text will display as course link name');
-
-export const LinkDisplay = _ref => {
-  let {
-    linkText,
-    placeholderText,
-    linkFileName,
-    published,
-    handleTextChange,
-    linkType
-  } = _ref;
+export const LinkDisplay = ({
+  linkText,
+  placeholderText,
+  linkFileName,
+  published,
+  handleTextChange,
+  linkType
+}) => {
   useEffect(() => {
     showFlashAlert({
       message: formatMessage('Selected {linkFileName}', {

package/es/rce/plugins/shared/PreviewIcon.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 { Spinner } from '@instructure/ui-spinner';
@@ -22,21 +23,17 @@ import { Flex } from '@instructure/ui-flex';
 import formatMessage from '../../../format-message';
 import checkerboardStyle from './CheckerboardStyling';
 const SQUARE_SIZE = 4;
-
-const PreviewIcon = _ref => {
-  let {
-    color,
-    testId,
-    variant,
-    image,
-    loading,
-    checkered
-  } = _ref;
+const PreviewIcon = ({
+  color,
+  testId,
+  variant,
+  image,
+  loading,
+  checkered
+}) => {
   const variantSettings = PreviewIcon.variants[variant];
-
   const background = () => {
     if (loading) return {};
-
     if (image) {
       return {
         backgroundImage: `url(${image})`,
@@ -45,7 +42,6 @@ const PreviewIcon = _ref => {
         backgroundPosition: 'center'
       };
     }
-
     return {
       border: '1px solid #73818C',
       borderRadius: '3px',
@@ -58,7 +54,6 @@ const PreviewIcon = _ref => {
       `
     };
   };
-
   return /*#__PURE__*/React.createElement("div", {
     id: "preview-background-wrapper",
     style: checkered ? checkerboardStyle(SQUARE_SIZE) : {}
@@ -80,7 +75,6 @@ const PreviewIcon = _ref => {
     size: "small"
   })))));
 };
-
 PreviewIcon.variants = {
   small: {
     width: '25px',

package/es/rce/plugins/shared/Previewable.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/>.
  */
+
 // copied from canvas-lms/ui/shared/features/doc-previews/jquery/index.js
 export const previewableMimeTypes = ['application/vnd.openxmlformats-officedocument.wordprocessingml.template', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.sun.xml.writer', 'application/excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/rtf', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.sun.xml.impress', 'application/vnd.sun.xml.calc', 'application/vnd.ms-excel', 'application/msword', 'application/mspowerpoint', 'application/rtf', 'application/vnd.oasis.opendocument.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow', 'text/plain', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/postscript', 'application/pdf', 'application/vnd.ms-powerpoint'];
 export function isPreviewable(type) {

package/es/rce/plugins/shared/RceFileBrowser.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, { useMemo } from 'react';
 import { func, object, string } from 'prop-types';
 import classnames from 'classnames';
@@ -22,8 +23,9 @@ import { View } from '@instructure/ui-view';
 import { downloadToWrap } from '../../../common/fileUrl';
 import { mediaPlayerURLFromFile } from './fileTypeUtils';
 import RceApiSource from '../../../rcs/api';
-import addIconMakerAttributes from '../instructure_icon_maker/utils/addIconMakerAttributes'; // TODO: should find a better way to share this code
+import addIconMakerAttributes from '../instructure_icon_maker/utils/addIconMakerAttributes';
 
+// TODO: should find a better way to share this code
 import FileBrowser from '../../../canvasFileBrowser/FileBrowser';
 import { isPreviewable } from './Previewable';
 RceFileBrowser.propTypes = {
@@ -56,10 +58,7 @@ export default function RceFileBrowser(props) {
       canvasOrigin
     });
   }, [host, jwt, refreshToken, source, canvasOrigin]);
-
   function handleFileSelect(fileInfo) {
-    var _fileInfo$api$embed, _fileInfo$api;
-
     const content_type = fileInfo.api.type;
     const canPreview = isPreviewable(content_type);
     const url = downloadToWrap(fileInfo.src);
@@ -69,12 +68,11 @@ export default function RceFileBrowser(props) {
       title: fileInfo.name,
       href: url,
       embedded_iframe_url,
-      media_id: ((_fileInfo$api$embed = fileInfo.api.embed) === null || _fileInfo$api$embed === void 0 ? void 0 : _fileInfo$api$embed.id) || fileInfo.api.mediaEntryId,
+      media_id: fileInfo.api.embed?.id || fileInfo.api.mediaEntryId,
       target: '_blank',
       content_type
     };
-
-    if (((_fileInfo$api = fileInfo.api) === null || _fileInfo$api === void 0 ? void 0 : _fileInfo$api.category) === 'icon_maker_icons') {
+    if (fileInfo.api?.category === 'icon_maker_icons') {
       onFileSelectParams.src = fileInfo.api.url;
       addIconMakerAttributes(onFileSelectParams);
     } else {
@@ -83,14 +81,13 @@ export default function RceFileBrowser(props) {
         instructure_scribd_file: canPreview,
         inline_disabled: true
       });
-      onFileSelectParams = { ...onFileSelectParams,
+      onFileSelectParams = {
+        ...onFileSelectParams,
         class: clazz
       };
     }
-
     onFileSelect(onFileSelectParams);
   }
-
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     margin: "medium",