@instructure/canvas-rce 5.14.2 → 5.15.0

package/es/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -38,7 +38,7 @@ import { validIcon } from '../utils/iconValidation';
 import { IconMakerFormHasChanges } from '../utils/IconMakerFormHasChanges';
 import bridge from '../../../../bridge';
 import { shouldIgnoreClose } from '../utils/IconMakerClose';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 const INVALID_MESSAGE = formatMessage('One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image');
 const UNSAVED_CHANGES_MESSAGE = formatMessage('You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?');
 function renderHeader(title, settings, onKeyDown, onAlertDismissal, onClose) {
@@ -109,13 +109,12 @@ function renderFooter(status, onClose, handleSubmit, editing, replaceAll, setRep
     isModified: isModified
   }));
 }
-export function IconMakerTray(_ref) {
-  let {
-    editor,
-    onUnmount,
-    editing,
-    canvasOrigin
-  } = _ref;
+export function IconMakerTray({
+  editor,
+  onUnmount,
+  editing,
+  canvasOrigin
+}) {
   const nameRef = useRef();
   const applyRef = useRef();
   const [isOpen, setIsOpen] = useState(true);
@@ -127,9 +126,9 @@ export function IconMakerTray(_ref) {
     ...defaultState
   });
   const isModified = useRef(false);
-  const [mountNode, setMountNode] = useState(instuiPopupMountNode());
+  const [mountNode, setMountNode] = useState(instuiPopupMountNodeFn());
   const handleFullscreenChange = useCallback(() => {
-    setMountNode(instuiPopupMountNode());
+    setMountNode(instuiPopupMountNodeFn());
   }, []);
 
   // These useRef objects are needed because when the tray is closed using the escape key
@@ -142,11 +141,9 @@ export function IconMakerTray(_ref) {
   statusRef.current = useMemo(() => status, [status]);
   initialSettingsRef.current = useMemo(() => initialSettings, [initialSettings]);
   useEffect(() => {
-    var _editor$rceWrapper, _editor$rceWrapper$_e, _editor$rceWrapper$_e2;
-    editor === null || editor === void 0 ? void 0 : (_editor$rceWrapper = editor.rceWrapper) === null || _editor$rceWrapper === void 0 ? void 0 : (_editor$rceWrapper$_e = _editor$rceWrapper._elementRef) === null || _editor$rceWrapper$_e === void 0 ? void 0 : (_editor$rceWrapper$_e2 = _editor$rceWrapper$_e.current) === null || _editor$rceWrapper$_e2 === void 0 ? void 0 : _editor$rceWrapper$_e2.addEventListener('fullscreenchange', handleFullscreenChange);
+    editor?.rceWrapper?._elementRef?.current?.addEventListener('fullscreenchange', handleFullscreenChange);
     return () => {
-      var _editor$rceWrapper2, _editor$rceWrapper2$_, _editor$rceWrapper2$_2;
-      editor === null || editor === void 0 ? void 0 : (_editor$rceWrapper2 = editor.rceWrapper) === null || _editor$rceWrapper2 === void 0 ? void 0 : (_editor$rceWrapper2$_ = _editor$rceWrapper2._elementRef) === null || _editor$rceWrapper2$_ === void 0 ? void 0 : (_editor$rceWrapper2$_2 = _editor$rceWrapper2$_.current) === null || _editor$rceWrapper2$_2 === void 0 ? void 0 : _editor$rceWrapper2$_2.removeEventListener('fullscreenchange', handleFullscreenChange);
+      editor?.rceWrapper?._elementRef?.current?.removeEventListener('fullscreenchange', handleFullscreenChange);
     };
   }, [editor, handleFullscreenChange]);
   useEffect(() => {
@@ -155,14 +152,14 @@ export function IconMakerTray(_ref) {
   }, [settings, initialSettings]);
   const storeProps = useStoreProps();
   const onClose = event => {
-    if (shouldIgnoreClose(event === null || event === void 0 ? void 0 : event.target, editor === null || editor === void 0 ? void 0 : editor.id)) return;
-    if ((statusRef === null || statusRef === void 0 ? void 0 : statusRef.current) === statuses.LOADING) return;
+    if (shouldIgnoreClose(event?.target, editor?.id)) return;
+    if (statusRef?.current === statuses.LOADING) return;
     // Uploading an image creates a modal on the page. If that modal is open, we don't want to close the tray
     // eslint-disable-next-line no-extra-boolean-cast
     if (!!hasOpenModal()) return;
     // RCE already uses browser's confirm dialog for unsaved changes
     // Its use here in the Icon Maker tray keeps that consistency
-    // eslint-disable-next-line no-restricted-globals, no-alert
+
     if (isModified.current && !confirm(UNSAVED_CHANGES_MESSAGE)) {
       return;
     }
@@ -171,10 +168,9 @@ export function IconMakerTray(_ref) {
   const hasOpenModal = () => document.querySelector('[data-cid="Modal"]');
   const isLoading = () => status === statuses.LOADING;
   const onKeyDown = event => {
-    var _applyRef$current, _nameRef$current;
     if (event.keyCode !== 9) return;
     event.preventDefault();
-    event.shiftKey ? (_applyRef$current = applyRef.current) === null || _applyRef$current === void 0 ? void 0 : _applyRef$current.focus() : (_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 ? void 0 : _nameRef$current.focus();
+    event.shiftKey ? applyRef.current?.focus() : nameRef.current?.focus();
   };
   useEffect(() => {
     setReplaceAll(false);
@@ -189,10 +185,9 @@ export function IconMakerTray(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.color, settings.textColor, settings.text, settings.textSize, settings.textBackgroundColor, settings.textPosition, settings.imageSettings, settings.outlineColor, settings.outlineSize, settings.name]);
-  const handleSubmit = _ref2 => {
-    let {
-      replaceFile = false
-    } = _ref2;
+  const handleSubmit = ({
+    replaceFile = false
+  }) => {
     setStatus(statuses.LOADING);
     if (!validIcon(settings)) {
       dispatch({
@@ -212,16 +207,14 @@ export function IconMakerTray(_ref) {
     }, {
       onDuplicate: replaceFile && 'overwrite'
     }).then(writeIconToRCE).then(() => setIsOpen(false)).catch(err => {
-      // eslint-disable-next-line no-console
       console.error(err);
       setStatus(statuses.ERROR);
     });
   };
-  const writeIconToRCE = _ref3 => {
-    let {
-      url,
-      display_name
-    } = _ref3;
+  const writeIconToRCE = ({
+    url,
+    display_name
+  }) => {
     const {
       alt,
       isDecorative,

package/es/rce/plugins/instructure_icon_maker/registerEditToolbar.js

@@ -19,7 +19,7 @@
 import formatMessage from '../../../format-message';
 import { BUTTON_ID, TOOLBAR_ID, ICON_MAKER_ATTRIBUTE } from './svg/constants';
 import TrayController from '../instructure_image/ImageOptionsTray/TrayController';
-export const shouldShowEditButton = node => !!(node !== null && node !== void 0 && node.getAttribute(ICON_MAKER_ATTRIBUTE));
+export const shouldShowEditButton = node => !!node?.getAttribute(ICON_MAKER_ATTRIBUTE);
 export const EDIT_ALT_TEXT_BUTTON_ID = 'inst-icon-maker-edit-alt-text';
 const trayController = new TrayController();
 export default function registerEditToolbar(editor, onAction) {

package/es/rce/plugins/instructure_icon_maker/svg/image.js

@@ -21,11 +21,10 @@ import { CLIP_PATH_ID } from './clipPath';
 import { Shape } from './shape';
 import { Size, STROKE_WIDTH, BASE_SIZE, ICON_PADDING } from './constants';
 const STOCK_IMAGE_TYPES = ['SingleColor', 'MultiColor'];
-const calculateImageHeight = _ref => {
-  let {
-    size,
-    outlineSize
-  } = _ref;
+const calculateImageHeight = ({
+  size,
+  outlineSize
+}) => {
   // Subtract the padding at the top and the bottom
   // to get the true height of the shape in the icon
   const iconHeightLessPadding = BASE_SIZE[size] - 2 * ICON_PADDING;
@@ -35,9 +34,8 @@ const calculateImageHeight = _ref => {
   return iconHeightLessPadding - STROKE_WIDTH[outlineSize];
 };
 export function buildImage(settings) {
-  var _settings$imageSettin;
   // Don't attempt to embed an image if none exist
-  if (!((_settings$imageSettin = settings.imageSettings) !== null && _settings$imageSettin !== void 0 && _settings$imageSettin.image)) return;
+  if (!settings.imageSettings?.image) return;
   let imageAttributes;
   if (STOCK_IMAGE_TYPES.includes(settings.imageSettings.mode)) {
     imageAttributes = {

package/es/rce/plugins/instructure_icon_maker/svg/index.js

@@ -24,8 +24,7 @@ import { buildImage } from './image';
 import { buildClipPath } from './clipPath';
 import { buildText, buildTextBackground, getContainerWidth, getContainerHeight } from './text';
 import base64EncodedFont from './font';
-export function buildSvg(settings) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+export function buildSvg(settings, options = {}) {
   settings = {
     ...DEFAULT_SETTINGS,
     ...settings
@@ -100,13 +99,11 @@ export function buildSvgContainer(settings, options) {
   if (options.isPreview) attributes.style = 'padding: 16px';
   return createSvgElement('svg', attributes);
 }
-export function buildGroup(_ref) {
-  let {
-    color,
-    outlineColor,
-    outlineSize
-  } = _ref;
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+export function buildGroup({
+  color,
+  outlineColor,
+  outlineSize
+}, options = {}) {
   const g = createSvgElement('g');
   if (options.fill) {
     g.setAttribute('fill', color || 'none');

package/es/rce/plugins/instructure_icon_maker/svg/settings.js

@@ -29,11 +29,10 @@ export const statuses = {
   IDLE: 'idle'
 };
 const getImageNode = (editor, editing) => {
-  var _editor$selection;
   // If the user is creating an icon rather then editing, no sense trying
   // to get an existing SVG URL
   if (!editing) return;
-  const selectedNode = editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getNode();
+  const selectedNode = editor?.selection?.getNode();
 
   // No selection made, return
   if (!selectedNode) return;
@@ -64,21 +63,20 @@ export function useSvgSettings(editor, editing, canvasOrigin) {
   const [settings, dispatch] = useReducer(svgSettingsReducer, defaultState);
   const [status, setStatus] = useState(statuses.IDLE);
   const imgNode = getImageNode(editor, editing);
-  const urlFromNode = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute(ICON_MAKER_DOWNLOAD_URL_ATTR);
-  const altText = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('alt');
-  const customStyle = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('style');
-  const customWidth = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('width');
-  const customHeight = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('height');
+  const urlFromNode = imgNode?.getAttribute(ICON_MAKER_DOWNLOAD_URL_ATTR);
+  const altText = imgNode?.getAttribute('alt');
+  const customStyle = imgNode?.getAttribute('style');
+  const customWidth = imgNode?.getAttribute('width');
+  const customHeight = imgNode?.getAttribute('height');
   useEffect(() => {
     const fetchSvgSettings = async () => {
       if (!urlFromNode) return;
       try {
-        var _urlFromNode$split$;
         setStatus(statuses.LOADING);
 
         // Parse out the file ID from something like
         // /courses/1/files/3/preview?...
-        const fileId = (_urlFromNode$split$ = urlFromNode.split('files/')[1]) === null || _urlFromNode$split$ === void 0 ? void 0 : _urlFromNode$split$.split('/')[0];
+        const fileId = urlFromNode.split('files/')[1]?.split('/')[0];
         const downloadUrl = buildMetadataUrl(fileId, canvasOrigin);
 
         // Download icon metadata. If no metadata found, return defaults
@@ -107,13 +105,13 @@ export function useSvgSettings(editor, editing, canvasOrigin) {
         const {
           imageSettings
         } = metadataJson;
-        if (imageSettings !== null && imageSettings !== void 0 && imageSettings.cropperSettings) {
+        if (imageSettings?.cropperSettings) {
           const generatedSvg = await createCroppedImageSvg(imageSettings.cropperSettings, imageSettings.image);
           metadataJson.embedImage = await convertFileToBase64(new Blob([generatedSvg.outerHTML], {
             type: 'image/svg+xml'
           }));
         } else {
-          metadataJson.embedImage = (imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.image) || defaultState.embedImage;
+          metadataJson.embedImage = imageSettings?.image || defaultState.embedImage;
         }
 
         // settings found, return parsed results
@@ -130,9 +128,8 @@ export function useSvgSettings(editor, editing, canvasOrigin) {
   return [settings, status, dispatch];
 }
 function processMetadataForBackwardCompatibility(metadataJson) {
-  var _metadataJson$imageSe, _metadataJson$imageSe2, _metadataJson$imageSe3, _metadataJson$imageSe4, _metadataJson$imageSe5, _metadataJson$imageSe6, _metadataJson$imageSe7, _metadataJson$imageSe8;
-  const icon = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe = metadataJson.imageSettings) === null || _metadataJson$imageSe === void 0 ? void 0 : _metadataJson$imageSe.icon;
-  const mode = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe2 = metadataJson.imageSettings) === null || _metadataJson$imageSe2 === void 0 ? void 0 : _metadataJson$imageSe2.mode;
+  const icon = metadataJson?.imageSettings?.icon;
+  const mode = metadataJson?.imageSettings?.mode;
   if (mode === modes.singleColorImages.type && typeof icon === 'object') {
     const foundIconId = iconsLabels[icon.label];
     if (foundIconId) {
@@ -144,9 +141,9 @@ function processMetadataForBackwardCompatibility(metadataJson) {
 
   // On old icons we stored the original image inside cropper settings
   // If that's the case we are copying it to the correct place
-  const cropperSettingsImage = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe3 = metadataJson.imageSettings) === null || _metadataJson$imageSe3 === void 0 ? void 0 : (_metadataJson$imageSe4 = _metadataJson$imageSe3.cropperSettings) === null || _metadataJson$imageSe4 === void 0 ? void 0 : _metadataJson$imageSe4.image;
-  const imageSettingsImage = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe5 = metadataJson.imageSettings) === null || _metadataJson$imageSe5 === void 0 ? void 0 : _metadataJson$imageSe5.image;
-  const encodedImage = metadataJson === null || metadataJson === void 0 ? void 0 : metadataJson.encodedImage;
+  const cropperSettingsImage = metadataJson?.imageSettings?.cropperSettings?.image;
+  const imageSettingsImage = metadataJson?.imageSettings?.image;
+  const encodedImage = metadataJson?.encodedImage;
   if (imageSettingsImage && cropperSettingsImage && imageSettingsImage !== cropperSettingsImage) {
     metadataJson.imageSettings.image = cropperSettingsImage || imageSettingsImage || encodedImage || '';
     delete metadataJson.imageSettings.cropperSettings.image;
@@ -158,14 +155,14 @@ function processMetadataForBackwardCompatibility(metadataJson) {
   delete metadataJson.encodedImageName;
 
   // Cleans image settings if there is no image or icon
-  const imageSettingsIcon = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe6 = metadataJson.imageSettings) === null || _metadataJson$imageSe6 === void 0 ? void 0 : _metadataJson$imageSe6.icon;
+  const imageSettingsIcon = metadataJson?.imageSettings?.icon;
   if (!imageSettingsImage && !imageSettingsIcon) {
     metadataJson.imageSettings = null;
   }
 
   // Replaces cropper settings' shape using icon's shape
-  const cropperSettingsShape = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe7 = metadataJson.imageSettings) === null || _metadataJson$imageSe7 === void 0 ? void 0 : (_metadataJson$imageSe8 = _metadataJson$imageSe7.cropperSettings) === null || _metadataJson$imageSe8 === void 0 ? void 0 : _metadataJson$imageSe8.shape;
-  const shape = metadataJson === null || metadataJson === void 0 ? void 0 : metadataJson.shape;
+  const cropperSettingsShape = metadataJson?.imageSettings?.cropperSettings?.shape;
+  const shape = metadataJson?.shape;
   if (shape && cropperSettingsShape && shape !== cropperSettingsShape) {
     metadataJson.imageSettings.cropperSettings.shape = shape;
   }

package/es/rce/plugins/instructure_icon_maker/svg/shape.js

@@ -28,11 +28,10 @@ export const Shape = {
   Octagon: 'octagon',
   Star: 'star'
 };
-export function buildShape(_ref) {
-  let {
-    shape,
-    size
-  } = _ref;
+export function buildShape({
+  shape,
+  size
+}) {
   switch (shape) {
     case Shape.Square:
       return buildSquare(size);

package/es/rce/plugins/instructure_icon_maker/svg/text.js

@@ -19,15 +19,14 @@
 import { createSvgElement, splitTextIntoLines } from './utils';
 import { TEXT_BACKGROUND_PADDING, BASE_SIZE, TEXT_SIZE, MAX_CHAR_COUNT, Size, TEXT_SIZE_FONT_DIFF } from './constants';
 import { Shape } from './shape';
-export function buildText(_ref) {
-  let {
-    text,
-    textPosition,
-    textSize,
-    textColor,
-    shape,
-    size
-  } = _ref;
+export function buildText({
+  text,
+  textPosition,
+  textSize,
+  textColor,
+  shape,
+  size
+}) {
   if (!text.trim()) return null;
   const lines = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]);
   const textElement = createSvgElement('text', {
@@ -54,15 +53,14 @@ export function buildText(_ref) {
   });
   return textElement;
 }
-export function buildTextBackground(_ref2) {
-  let {
-    text,
-    textPosition,
-    textSize,
-    textBackgroundColor,
-    shape,
-    size
-  } = _ref2;
+export function buildTextBackground({
+  text,
+  textPosition,
+  textSize,
+  textBackgroundColor,
+  shape,
+  size
+}) {
   if (!text.trim()) return null;
   const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
   const xValue = getTextXValue(text, textSize, size);
@@ -83,25 +81,23 @@ export function buildTextBackground(_ref2) {
   pathElement.setAttribute('fill', textBackgroundColor || '');
   return pathElement;
 }
-export function getContainerWidth(_ref3) {
-  let {
-    text,
-    textSize,
-    size
-  } = _ref3;
+export function getContainerWidth({
+  text,
+  textSize,
+  size
+}) {
   const fontWeight = 2;
   const base = BASE_SIZE[size];
   const textWidth = Math.floor(getTextWidth(text, textSize)) + TEXT_BACKGROUND_PADDING * 2 + fontWeight;
   return Math.max(base, textWidth);
 }
-export function getContainerHeight(_ref4) {
-  let {
-    text,
-    textPosition,
-    textSize,
-    shape,
-    size
-  } = _ref4;
+export function getContainerHeight({
+  text,
+  textPosition,
+  textSize,
+  shape,
+  size
+}) {
   const base = BASE_SIZE[size];
   if (!text || text.trim().length === 0) {
     return base;

package/es/rce/plugins/instructure_icon_maker/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/instructure_icon_maker/utils/IconMakerClose.js

@@ -30,12 +30,11 @@ export const shouldIgnoreClose = (target, editorId) => {
 };
 const elementTreeHasAttribute = (target, attribute, value) => {
   while (target) {
-    var _target, _target$attributes, _target$attributes$at, _target2;
     // @ts-expect-error
-    if (((_target = target) === null || _target === void 0 ? void 0 : (_target$attributes = _target.attributes) === null || _target$attributes === void 0 ? void 0 : (_target$attributes$at = _target$attributes[attribute]) === null || _target$attributes$at === void 0 ? void 0 : _target$attributes$at.value) === value) {
+    if (target?.attributes?.[attribute]?.value === value) {
       return true;
     }
-    target = (_target2 = target) === null || _target2 === void 0 ? void 0 : _target2.parentElement;
+    target = target?.parentElement;
   }
   return false;
 };

package/es/rce/plugins/instructure_icon_maker/utils/iconValidation.js

@@ -23,8 +23,7 @@ export const hasText = settings => {
   return settings.text.length > 0;
 };
 export const hasImage = settings => {
-  var _settings$imageSettin;
-  return ((_settings$imageSettin = settings.imageSettings) === null || _settings$imageSettin === void 0 ? void 0 : _settings$imageSettin.image.length) > 0;
+  return settings.imageSettings?.image.length > 0;
 };
 export const hasOutline = settings => {
   return settings.outlineSize !== 'none';

package/es/rce/plugins/instructure_image/ImageEmbedOptions.js

@@ -109,8 +109,7 @@ export function fromVideoEmbed($element) {
     source: $videoElem && $videoElem.querySelector('source')
   };
   try {
-    var _$videoDoc$querySelec;
-    const trackjson = (_$videoDoc$querySelec = $videoDoc.querySelector('[data-tracks]')) === null || _$videoDoc$querySelec === void 0 ? void 0 : _$videoDoc$querySelec.getAttribute('data-tracks');
+    const trackjson = $videoDoc.querySelector('[data-tracks]')?.getAttribute('data-tracks');
     if (trackjson) {
       videoOptions.tracks = JSON.parse(trackjson);
     }
@@ -120,7 +119,7 @@ export function fromVideoEmbed($element) {
   videoOptions.videoSize = imageSizeFromKnownOptions(videoOptions);
   if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
     const source = $videoIframe.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) {
       videoOptions.attachmentId = matches[1];
     }
@@ -148,10 +147,7 @@ export function scaleToSize(imageSize, naturalWidth, naturalHeight) {
       height: naturalHeight
     };
   }
-  const [dimension] = Object.entries(sizeByMaximumDimension).find(_ref => {
-    let [, size] = _ref;
-    return size === imageSize;
-  });
+  const [dimension] = Object.entries(sizeByMaximumDimension).find(([, size]) => size === imageSize);
   const scaleFactor = dimension / Math.max(naturalWidth, naturalHeight);
   return {
     height: Math.round(naturalHeight * scaleFactor),

package/es/rce/plugins/instructure_image/ImageList/Image.js

@@ -26,14 +26,13 @@ import { View } from '@instructure/ui-view';
 import dragHtml from '../../../../sidebar/dragHtml';
 import formatMessage from '../../../../format-message';
 import { renderImage } from '../../../contentRendering';
-export default function Image(_ref) {
-  let {
-    focusRef,
-    image,
-    onClick,
-    isIconMaker,
-    canvasOrigin
-  } = _ref;
+export default function Image({
+  focusRef,
+  image,
+  onClick,
+  isIconMaker,
+  canvasOrigin
+}) {
   const imgTitle = formatMessage('Click to embed {imageName}', {
     imageName: image.display_name
   });

package/es/rce/plugins/instructure_image/ImageList/index.js

@@ -20,14 +20,13 @@ import React from 'react';
 import { arrayOf, func, instanceOf, shape, bool, string } from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
 import Image from './Image';
-export default function ImageList(_ref) {
-  let {
-    images,
-    lastItemRef,
-    onImageClick,
-    isIconMaker,
-    canvasOrigin
-  } = _ref;
+export default function ImageList({
+  images,
+  lastItemRef,
+  onImageClick,
+  isIconMaker,
+  canvasOrigin
+}) {
   return /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "start",
     height: "100%",

package/es/rce/plugins/instructure_image/ImageOptionsTray/TrayController.js

@@ -45,8 +45,7 @@ export default class TrayController {
   }
 
   // Tray may be called to edit an Icon Maker icon alt text
-  showTrayForEditor(editor) {
-    let isIconMaker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  showTrayForEditor(editor, isIconMaker = false) {
     this._editor = editor;
     this.$img = editor.selection.getNode();
     this._shouldOpen = true;
@@ -113,7 +112,6 @@ export default class TrayController {
     this._editor = null;
   }
   _renderTray() {
-    var _this$_editor, _this$_editor$selecti;
     if (this._shouldOpen) {
       /*
        * When the tray is being opened again, it should be rendered fresh
@@ -123,7 +121,7 @@ export default class TrayController {
       this._renderId++;
     }
     const io = asImageEmbed(this.$img);
-    io.isLinked = ((_this$_editor = this._editor) === null || _this$_editor === void 0 ? void 0 : (_this$_editor$selecti = _this$_editor.selection) === null || _this$_editor$selecti === void 0 ? void 0 : _this$_editor$selecti.getSel().anchorNode.tagName) === 'A';
+    io.isLinked = this._editor?.selection?.getSel().anchorNode.tagName === 'A';
     const element = /*#__PURE__*/React.createElement(ImageOptionsTray, {
       key: this._renderId,
       imageOptions: io,

package/es/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -29,7 +29,7 @@ import ImageOptionsForm from '../../shared/ImageOptionsForm';
 import { getTrayHeight, isExternalUrl } from '../../shared/trayUtils';
 import validateURL from '../../instructure_links/validateURL';
 import UrlPanel from '../../shared/Upload/UrlPanel';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 export default function ImageOptionsTray(props) {
   const {
     imageOptions,
@@ -135,14 +135,14 @@ export default function ImageOptionsTray(props) {
     });
   }
   const disableForIcons = isIconMaker && !isDecorativeImage && altText === '';
-  const disableForImages = url === '' || displayAs === 'embed' && (!isDecorativeImage && altText === '' || imageSize === CUSTOM && !(dimensionsState !== null && dimensionsState !== void 0 && dimensionsState.isValid));
+  const disableForImages = url === '' || displayAs === 'embed' && (!isDecorativeImage && altText === '' || imageSize === CUSTOM && !dimensionsState?.isValid);
   const saveDisabled = isIconMaker ? disableForIcons : disableForImages;
   const trayLabel = isIconMaker ? formatMessage('Icon Options Tray') : formatMessage('Image Options Tray');
   const trayHeading = isIconMaker ? formatMessage('Icon Options') : formatMessage('Image Options');
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
     label: trayLabel,
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     onDismiss: onRequestClose,
     onEntered: onEntered,
     onExited: onExited,

package/es/rce/plugins/instructure_image/plugin.js

@@ -31,8 +31,7 @@ const trayController = new TrayController();
 
 // @ts-expect-error
 function getMenuItems(ed) {
-  var _ed$settings$canvas_r;
-  const contextType = (_ed$settings$canvas_r = ed.settings.canvas_rce_user_context) === null || _ed$settings$canvas_r === void 0 ? void 0 : _ed$settings$canvas_r.type;
+  const contextType = ed.settings.canvas_rce_user_context?.type;
   const items = [{
     text: formatMessage('Upload Image'),
     value: 'instructure_upload_image'

package/es/rce/plugins/instructure_links/components/AccordionSection.js

@@ -22,14 +22,13 @@ import formatMessage from '../../../../format-message';
 import { ToggleGroup } from '@instructure/ui-toggle-details';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
-export default function AccordionSection(_ref) {
-  let {
-    collection,
-    children,
-    onToggle,
-    expanded,
-    label
-  } = _ref;
+export default function AccordionSection({
+  collection,
+  children,
+  onToggle,
+  expanded,
+  label
+}) {
   const toggleLabel = expanded ? formatMessage('Collapse to hide {types}', {
     types: label
   }) : formatMessage('Expand to see {types}', {