@instructure/canvas-rce 5.14.2 → 5.15.1

package/es/rce/plugins/shared/ColorInput.js

@@ -84,21 +84,19 @@ const NAMED_COLORS = [{
   color: '#FFFFFF',
   name: formatMessage('White')
 }, null];
-export const ColorInput = _ref => {
-  var _NAMED_COLORS$find;
-  let {
-    color,
-    label,
-    name,
-    onChange,
-    popoverMountNode,
-    width = '11rem',
-    readonly = false,
-    requireColor = false
-  } = _ref;
+export const ColorInput = ({
+  color,
+  label,
+  name,
+  onChange,
+  popoverMountNode,
+  width = '11rem',
+  readonly = false,
+  requireColor = false
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState(color);
-  const colorName = (_NAMED_COLORS$find = NAMED_COLORS.find(c => (c === null || c === void 0 ? void 0 : c.color) === color)) === null || _NAMED_COLORS$find === void 0 ? void 0 : _NAMED_COLORS$find.name;
+  const colorName = NAMED_COLORS.find(c => c?.color === color)?.name;
   useEffect(() => {
     setInputValue(color);
   }, [color]);
@@ -121,12 +119,12 @@ export const ColorInput = _ref => {
     }
   };
   const colorPreviews = NAMED_COLORS.map(c => /*#__PURE__*/React.createElement(ColorPreview, {
-    key: `${name}-${c === null || c === void 0 ? void 0 : c.color}`,
-    color: c === null || c === void 0 ? void 0 : c.color,
-    name: c === null || c === void 0 ? void 0 : c.name,
+    key: `${name}-${c?.color}`,
+    color: c?.color,
+    name: c?.name,
     disabled: !isOpen,
     onSelect: () => {
-      handleColorChange(c === null || c === void 0 ? void 0 : c.color);
+      handleColorChange(c?.color);
       setIsOpen(false);
     }
   }));
@@ -186,14 +184,13 @@ export const ColorInput = _ref => {
     interaction: readonly ? 'readonly' : undefined
   }));
 };
-function ColorPreview(_ref2) {
-  let {
-    color,
-    name,
-    disabled,
-    margin = 'xxx-small',
-    onSelect
-  } = _ref2;
+function ColorPreview({
+  color,
+  name,
+  disabled,
+  margin = 'xxx-small',
+  onSelect
+}) {
   return /*#__PURE__*/React.createElement(BaseButton, {
     interaction: disabled ? 'readonly' : undefined,
     isCondensed: true,

package/es/rce/plugins/shared/ConditionalTooltip.js

@@ -19,12 +19,11 @@
 import React from 'react';
 import { bool, element, oneOfType, arrayOf } from 'prop-types';
 import { Tooltip } from '@instructure/ui-tooltip';
-export const ConditionalTooltip = _ref => {
-  let {
-    condition,
-    children,
-    ...tooltipProps
-  } = _ref;
+export const ConditionalTooltip = ({
+  condition,
+  children,
+  ...tooltipProps
+}) => {
   return condition ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 ConditionalTooltip.propTypes = {

package/es/rce/plugins/shared/ContentSelection.js

@@ -34,7 +34,7 @@ export const DISPLAY_AS_EMBED = 'embed';
 export const DISPLAY_AS_EMBED_DISABLED = 'embed-disabled';
 export const DISPLAY_AS_DOWNLOAD_LINK = 'download-link';
 export function asImageEmbed($element) {
-  const nodeName = $element === null || $element === void 0 ? void 0 : $element.nodeName.toLowerCase();
+  const nodeName = $element?.nodeName.toLowerCase();
   if (nodeName !== 'img') {
     return null;
   }
@@ -45,9 +45,8 @@ export function asImageEmbed($element) {
   };
 }
 export function asLink($element, editor) {
-  var _$link;
   let $link = $element;
-  if (((_$link = $link) === null || _$link === void 0 ? void 0 : _$link.tagName) !== 'A') {
+  if ($link?.tagName !== 'A') {
     // the user may have selected some text that is w/in a link
     // but didn't include the <a>. Let's see if that's true
     $link = editor && editor.dom.getParent($link, 'a[href]');
@@ -93,7 +92,6 @@ export function asLink($element, editor) {
 // tinymce releases.
 // see https://github.com/tinymce/tinymce/issues/5181
 export function asVideoElement($element) {
-  var _$videoElem$parentEle;
   const $videoElem = findMediaPlayerIframe($element);
   if (!isVideoElement($videoElem) && !isStudioEmbeddedMedia($videoElem)) {
     return null;
@@ -102,11 +100,10 @@ export function asVideoElement($element) {
     ...fromVideoEmbed($videoElem),
     $element,
     type: VIDEO_EMBED_TYPE,
-    id: ((_$videoElem$parentEle = $videoElem.parentElement) === null || _$videoElem$parentEle === void 0 ? void 0 : _$videoElem$parentEle.getAttribute('data-mce-p-data-media-id')) || $videoElem.getAttribute('data-mce-p-data-media-id')
+    id: $videoElem.parentElement?.getAttribute('data-mce-p-data-media-id') || $videoElem.getAttribute('data-mce-p-data-media-id')
   };
 }
 export function asAudioElement($element) {
-  var _$element$parentEleme;
   if (!$element) {
     return null;
   }
@@ -115,13 +112,12 @@ export function asAudioElement($element) {
   const title = ($audioIframe.getAttribute('title') || $tinymceIframeShim.getAttribute('data-mce-p-title') || '').replace(formatMessage('Video player for '), '');
   const audioOptions = {
     titleText: title,
-    id: ((_$element$parentEleme = $element.parentElement) === null || _$element$parentEleme === void 0 ? void 0 : _$element$parentEleme.getAttribute('data-mce-p-data-media-id')) || $element.getAttribute('data-mce-p-data-media-id')
+    id: $element.parentElement?.getAttribute('data-mce-p-data-media-id') || $element.getAttribute('data-mce-p-data-media-id')
   };
   if ($audioIframe.tagName === 'IFRAME') {
     const audioDoc = $audioIframe.contentDocument;
     try {
-      var _audioDoc$querySelect;
-      const trackSJson = (_audioDoc$querySelect = audioDoc.querySelector('[data-tracks]')) === null || _audioDoc$querySelect === void 0 ? void 0 : _audioDoc$querySelect.getAttribute('data-tracks');
+      const trackSJson = audioDoc.querySelector('[data-tracks]')?.getAttribute('data-tracks');
       if (trackSJson) {
         audioOptions.tracks = JSON.parse(trackSJson);
       }
@@ -130,7 +126,7 @@ export function asAudioElement($element) {
   }
   if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
     const source = $audioIframe.getAttribute('src');
-    const matches = source === null || source === void 0 ? void 0 : source.match(/\/media_attachments_iframe\/(\d+)/);
+    const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
     if (matches) {
       audioOptions.attachmentId = matches[1];
     }
@@ -163,8 +159,7 @@ export function getContentFromElement($element, editor) {
   const content = asLink($element, editor) || asImageEmbed($element) || asVideoElement($element) || asText($element, editor) || asNone($element);
   return content;
 }
-export function getContentFromEditor(editor) {
-  let expandSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export function getContentFromEditor(editor, expandSelection = false) {
   let $element;
   if (editor && editor.selection) {
     // tinymce selects the element around the cursor, whether it's
@@ -194,18 +189,17 @@ export function isImageEmbed($element) {
   return !!asImageEmbed($element) && !$element.getAttribute('data-placeholder-for');
 }
 function isMediaElement($element, mediaType) {
-  var _tinymceIframeShim$fi, _tinymceIframeShim$ge;
   // the video is hosted in an iframe, but tinymce
   // wraps it in a span with swizzled attribute names
-  if (!($element !== null && $element !== void 0 && $element.getAttribute) || !$element) {
+  if (!$element?.getAttribute || !$element) {
     return false;
   }
   const tinymceIframeShim = $element.tagName === 'IFRAME' ? $element.parentElement : $element;
-  if (((_tinymceIframeShim$fi = tinymceIframeShim.firstElementChild) === null || _tinymceIframeShim$fi === void 0 ? void 0 : _tinymceIframeShim$fi.tagName) !== 'IFRAME') {
+  if (tinymceIframeShim.firstElementChild?.tagName !== 'IFRAME') {
     return false;
   }
   const media_obj_id = tinymceIframeShim.getAttribute('data-mce-p-data-media-id');
-  const is_media_attachment_iframe = (_tinymceIframeShim$ge = tinymceIframeShim.getAttribute('data-mce-p-src')) === null || _tinymceIframeShim$ge === void 0 ? void 0 : _tinymceIframeShim$ge.includes('media_attachments_iframe');
+  const is_media_attachment_iframe = tinymceIframeShim.getAttribute('data-mce-p-src')?.includes('media_attachments_iframe');
   if (!media_obj_id && !is_media_attachment_iframe) {
     return false;
   }
@@ -219,20 +213,18 @@ export function isAudioElement($element) {
   return isMediaElement($element, 'audio');
 }
 export function findMediaPlayerIframe(elem) {
-  var _elem$firstElementChi;
   if (!elem) return null;
   if (elem.tagName === 'IFRAME') {
     // we have the iframe
     return elem;
   }
-  if (((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.tagName) === 'IFRAME') {
+  if (elem.firstElementChild?.tagName === 'IFRAME') {
     // we have the shim tinymce puts around the iframe
     return elem.firstElementChild;
   }
   if (elem.classList.contains('mce-shim')) {
-    var _elem$previousSibling;
     // tinymce puts a <span class='mce-shin'> after the iframe (since v5, I think)
-    if (((_elem$previousSibling = elem.previousSibling) === null || _elem$previousSibling === void 0 ? void 0 : _elem$previousSibling.tagName) === 'IFRAME') {
+    if (elem.previousSibling?.tagName === 'IFRAME') {
       return elem.previousSibling;
     }
   }

package/es/rce/plugins/shared/DimensionUtils.js

@@ -35,8 +35,7 @@ function scaleEvenly(width, height, scaleFactor, constraints) {
     width: Math.round(width * minimumScaleFactor)
   };
 }
-export function scaleForHeight(width, height, targetHeight) {
-  let constraints = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+export function scaleForHeight(width, height, targetHeight, constraints = {}) {
   if (targetHeight == null) {
     return {
       height: null,
@@ -46,8 +45,7 @@ export function scaleForHeight(width, height, targetHeight) {
   const scaleFactor = targetHeight / height;
   return scaleEvenly(width, height, scaleFactor, constraints);
 }
-export function scaleForWidth(width, height, targetWidth) {
-  let constraints = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+export function scaleForWidth(width, height, targetWidth, constraints = {}) {
   if (targetWidth == null) {
     return {
       height: null,

package/es/rce/plugins/shared/EventUtils.js

@@ -21,7 +21,7 @@
 // Assumes we've already confirmed that cbdata includes files
 export function isMicrosoftWordContentInEvent(event) {
   const cbdata = event.type === 'paste' ? event.clipboardData : event.dataTransfer;
-  if ((cbdata === null || cbdata === void 0 ? void 0 : cbdata.files[0].type.indexOf('image/')) === 0 && cbdata.types.includes('text/html')) {
+  if (cbdata?.files[0].type.indexOf('image/') === 0 && cbdata.types.includes('text/html')) {
     const html = cbdata.getData('text/html');
     return isMicrosoftWordContent(html);
   }

package/es/rce/plugins/shared/FixedContentTray.js

@@ -48,20 +48,19 @@ function renderJoinedItem(bodyAs, renderBody, renderFooter) {
     borderWidth: "small none none none"
   }, renderFooter()))));
 }
-export const FixedContentTray = _ref => {
-  let {
-    title,
-    isOpen,
-    onDismiss,
-    onUnmount,
-    mountNode,
-    renderHeader,
-    renderBody,
-    renderFooter,
-    bodyAs,
-    shouldJoinBodyAndFooter,
-    shouldCloseOnDocumentClick
-  } = _ref;
+export const FixedContentTray = ({
+  title,
+  isOpen,
+  onDismiss,
+  onUnmount,
+  mountNode,
+  renderHeader,
+  renderBody,
+  renderFooter,
+  bodyAs,
+  shouldJoinBodyAndFooter,
+  shouldCloseOnDocumentClick
+}) => {
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
     label: title,

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

@@ -42,10 +42,9 @@ const directionToWord = direction => {
       return null;
   }
 };
-export const DirectionRegion = _ref => {
-  let {
-    direction
-  } = _ref;
+export const DirectionRegion = ({
+  direction
+}) => {
   const directionWord = directionToWord(direction);
   const directionMessage = directionWord ? formatMessage('Moving image to crop {directionWord}', {
     directionWord

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

@@ -29,7 +29,7 @@ import { Preview } from './Preview';
 import { Controls } from './controls';
 import { ImageCropperSettingsPropTypes } from './propTypes';
 import { DirectionRegion } from './DirectionRegion';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 const renderBody = (image, settings, dispatch, message, loading) => {
   if (loading) {
     return /*#__PURE__*/React.createElement(Flex, {
@@ -73,17 +73,16 @@ const renderFooter = (settings, onClose) => {
     type: "submit"
   }, formatMessage('Save')));
 };
-export const ImageCropperModal = _ref => {
-  let {
-    open,
-    shape,
-    onClose,
-    onSubmit,
-    image,
-    message,
-    cropSettings,
-    loading
-  } = _ref;
+export const ImageCropperModal = ({
+  open,
+  shape,
+  onClose,
+  onSubmit,
+  image,
+  message,
+  cropSettings,
+  loading
+}) => {
   const [settings, dispatch] = useReducer(cropperSettingsReducer, defaultState);
   useEffect(() => {
     shape !== settings.shape && dispatch({
@@ -102,7 +101,7 @@ export const ImageCropperModal = _ref => {
     "data-mce-component": true,
     as: "form",
     label: formatMessage('Crop Image'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     size: "large",
     open: open,
     onDismiss: onClose,

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

@@ -37,13 +37,12 @@ function replaceSvg(svg, node) {
   }
   node.appendChild(svg);
 }
-function getTransformValue(_ref) {
-  let {
-    translateX,
-    translateY,
-    rotation,
-    scaleRatio
-  } = _ref;
+function getTransformValue({
+  translateX,
+  translateY,
+  rotation,
+  scaleRatio
+}) {
   const values = [];
   if (translateX !== 0) values.push(`translateX(${translateX}px)`);
   if (translateY !== 0) values.push(`translateY(${translateY}px)`);
@@ -51,12 +50,11 @@ function getTransformValue(_ref) {
   if (scaleRatio > 1) values.push(`scale(${scaleRatio})`);
   return values.join(' ');
 }
-export const Preview = _ref2 => {
-  let {
-    image,
-    settings,
-    dispatch
-  } = _ref2;
+export const Preview = ({
+  image,
+  settings,
+  dispatch
+}) => {
   const previewRef = /*#__PURE__*/createRef();
   const shapeRef = /*#__PURE__*/createRef();
   const imgRef = /*#__PURE__*/createRef();

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

@@ -22,15 +22,14 @@ import { NumberInput } from '@instructure/ui-number-input';
 import { useDebouncedNumericValue } from './useDebouncedNumericValue';
 import formatMessage from '../../../../../format-message';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-export const CustomNumberInput = _ref => {
-  let {
-    value,
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    placeholder,
-    onChange
-  } = _ref;
+export const CustomNumberInput = ({
+  value,
+  parseValueCallback,
+  processValueCallback,
+  formatValueCallback,
+  placeholder,
+  onChange
+}) => {
   const [inputValue, digestCurrentValue, digestNewValue, hasError] = useDebouncedNumericValue({
     value,
     parseValueCallback,

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

@@ -22,10 +22,9 @@ import { Flex } from '@instructure/ui-flex';
 import { Button } from '@instructure/ui-buttons';
 import { IconResetLine } from '@instructure/ui-icons';
 import formatMessage from '../../../../../format-message';
-export const ResetControls = _ref => {
-  let {
-    onReset
-  } = _ref;
+export const ResetControls = ({
+  onReset
+}) => {
   return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
     renderIcon: IconResetLine,
     onClick: onReset

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

@@ -39,11 +39,10 @@ const parseRotationText = value => {
   return result;
 };
 const formatRotationText = value => `${value}º`;
-export const RotationControls = _ref => {
-  let {
-    rotation,
-    onChange
-  } = _ref;
+export const RotationControls = ({
+  rotation,
+  onChange
+}) => {
   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, {

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

@@ -49,22 +49,18 @@ const SHAPE_OPTIONS = [{
   id: Shape.Star,
   label: formatMessage('Star')
 }];
-export const ShapeControls = _ref => {
-  let {
-    shape,
-    onChange
-  } = _ref;
+export const ShapeControls = ({
+  shape,
+  onChange
+}) => {
   return /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "0 medium 0 0"
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     isInline: true,
     value: shape,
-    onChange: (event, _ref2) => {
-      let {
-        id
-      } = _ref2;
-      return onChange(id);
-    },
+    onChange: (event, {
+      id
+    }) => onChange(id),
     renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Select crop shape')),
     "data-testid": "shape-select-dropdown"
   }, SHAPE_OPTIONS.map(option => /*#__PURE__*/React.createElement(SimpleSelect.Option, {

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

@@ -43,11 +43,10 @@ const parseZoomText = value => {
 };
 const formatZoomText = value => `${value}%`;
 const debouncedAlert = debounce(showFlashAlert, 1000);
-export const ZoomControls = _ref => {
-  let {
-    scaleRatio,
-    onChange
-  } = _ref;
+export const ZoomControls = ({
+  scaleRatio,
+  onChange
+}) => {
   const onZoomChange = value => {
     const message = {
       message: `${round(value * 100)}% Zoom`,

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

@@ -23,11 +23,10 @@ import { ZoomControls } from './ZoomControls';
 import { RotationControls } from './RotationControls';
 import { ShapeControls } from './ShapeControls';
 import { ResetControls } from './ResetControls';
-export const Controls = _ref => {
-  let {
-    settings,
-    dispatch
-  } = _ref;
+export const Controls = ({
+  settings,
+  dispatch
+}) => {
   return /*#__PURE__*/React.createElement(Flex, {
     id: "imageCropperControls",
     direction: "row",

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

@@ -19,13 +19,12 @@
 import { useEffect, useRef, useState } from 'react';
 import { debounce } from '@instructure/debounce';
 const CHANGE_EVENT_DELAY = 1000;
-const digestValue = _ref => {
-  let {
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    value
-  } = _ref;
+const digestValue = ({
+  parseValueCallback,
+  processValueCallback,
+  formatValueCallback,
+  value
+}) => {
   const parsedNewValue = parseValueCallback(value);
   if (parsedNewValue === null) {
     return [null, null];
@@ -34,14 +33,13 @@ const digestValue = _ref => {
   const formattedNewTempValue = formatValueCallback(processedNewValue);
   return [formattedNewTempValue, processedNewValue];
 };
-export function useDebouncedNumericValue(_ref2) {
-  let {
-    value,
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    onChange
-  } = _ref2;
+export function useDebouncedNumericValue({
+  value,
+  parseValueCallback,
+  processValueCallback,
+  formatValueCallback,
+  onChange
+}) {
   const [inputValue, setInputValue] = useState(formatValueCallback(value));
   const [hasError, setHasError] = useState(false);
   const updateStateAfterDigest = newValue => {

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

@@ -62,11 +62,10 @@ const fetchImageMetadata = src => {
     img.src = src;
   });
 };
-const createDefsElement = _ref => {
-  let {
-    shape,
-    squareDimension
-  } = _ref;
+const createDefsElement = ({
+  shape,
+  squareDimension
+}) => {
   const defs = createSvgElement('defs');
   const shapeMask = buildShapeMask({
     shape,
@@ -82,14 +81,13 @@ const createDefsElement = _ref => {
 const convertTranslationUnits = (translationPixels, imageHeight) => {
   return imageHeight * translationPixels / PREVIEW_HEIGHT;
 };
-const createMainSvgGroup = _ref2 => {
-  let {
-    imageWidth,
-    imageHeight,
-    squareDimension,
-    image,
-    settings
-  } = _ref2;
+const createMainSvgGroup = ({
+  imageWidth,
+  imageHeight,
+  squareDimension,
+  image,
+  settings
+}) => {
   const mainGroup = createSvgElement('g', {
     'clip-path': `url(#${CLIP_PATH_ID})`
   });
@@ -108,14 +106,13 @@ const createMainSvgGroup = _ref2 => {
   mainGroup.appendChild(imageElement);
   return mainGroup;
 };
-export const setTransformAttribute = _ref3 => {
-  let {
-    imageElement,
-    imageWidth,
-    imageHeight,
-    squareDimension,
-    settings
-  } = _ref3;
+export const setTransformAttribute = ({
+  imageElement,
+  imageWidth,
+  imageHeight,
+  squareDimension,
+  settings
+}) => {
   const {
     rotation = 0,
     scaleRatio = 1.0,

package/es/rce/plugins/shared/ImageCropper/svg/shape.js

@@ -20,11 +20,10 @@ 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:

package/es/rce/plugins/shared/ImageCropper/svg/utils.js

@@ -16,11 +16,9 @@
  * 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

@@ -73,10 +73,7 @@ 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);