@instructure/canvas-rce 5.14.2 → 5.15.1

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

@@ -29,24 +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

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

@@ -26,15 +26,14 @@ 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

@@ -23,15 +23,14 @@ 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 {};

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

@@ -59,7 +59,6 @@ export default function RceFileBrowser(props) {
     });
   }, [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,11 +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 {

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

@@ -22,11 +22,10 @@ import bridge from '../../../bridge';
 import sidebarHandlers from '../../../sidebar/containers/sidebarHandlers';
 import { propsFromState } from '../../../sidebar/containers/Sidebar';
 import configureStore from '../../../sidebar/store/configureStore';
-function Consumer(_ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
+function Consumer({
+  children,
+  ...props
+}) {
   return children({
     onLinkClick: bridge.insertLink,
     onImageEmbed: bridge.embedImage,
@@ -37,11 +36,10 @@ function Consumer(_ref) {
 }
 export const StoreConsumer = connect(propsFromState, sidebarHandlers)(Consumer);
 const StoreContext = /*#__PURE__*/createContext();
-export function StoreProvider(_ref2) {
-  let {
-    children,
-    ...storeProps
-  } = _ref2;
+export function StoreProvider({
+  children,
+  ...storeProps
+}) {
   const [store] = useState(() => configureStore(storeProps));
   return /*#__PURE__*/React.createElement(ReduxProvider, {
     store: store

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

@@ -45,19 +45,18 @@ export function displayStyleFrom(studioAttributes) {
   return studioAttributes['data-studio-resizable'] || studioAttributes['data-studio-tray-enabled'] ? 'inline-block' : '';
 }
 export function isStudioEmbeddedMedia(element) {
-  var _tinymceIframeShim$fi;
   // Borrowing this structure from isMediaElement in ContentSelection.js
-  const tinymceIframeShim = (element === null || element === void 0 ? void 0 : element.tagName) === 'IFRAME' ? element === null || element === void 0 ? void 0 : element.parentElement : element;
-  if ((tinymceIframeShim === null || tinymceIframeShim === void 0 ? void 0 : (_tinymceIframeShim$fi = tinymceIframeShim.firstElementChild) === null || _tinymceIframeShim$fi === void 0 ? void 0 : _tinymceIframeShim$fi.tagName) !== 'IFRAME') {
+  const tinymceIframeShim = element?.tagName === 'IFRAME' ? element?.parentElement : element;
+  if (tinymceIframeShim?.firstElementChild?.tagName !== 'IFRAME') {
     return false;
   }
   return tinymceIframeShim.getAttribute('data-mce-p-data-studio-tray-enabled') === 'true';
 }
 export function parseStudioOptions(element) {
-  const tinymceIframeShim = (element === null || element === void 0 ? void 0 : element.tagName) === 'IFRAME' ? element === null || element === void 0 ? void 0 : element.parentElement : element;
+  const tinymceIframeShim = element?.tagName === 'IFRAME' ? element?.parentElement : element;
   return {
-    resizable: (tinymceIframeShim === null || tinymceIframeShim === void 0 ? void 0 : tinymceIframeShim.getAttribute('data-mce-p-data-studio-resizable')) === 'true',
-    convertibleToLink: (tinymceIframeShim === null || tinymceIframeShim === void 0 ? void 0 : tinymceIframeShim.getAttribute('data-mce-p-data-studio-convertible-to-link')) === 'true'
+    resizable: tinymceIframeShim?.getAttribute('data-mce-p-data-studio-resizable') === 'true',
+    convertibleToLink: tinymceIframeShim?.getAttribute('data-mce-p-data-studio-convertible-to-link') === 'true'
   };
 }
 

package/es/rce/plugins/shared/Upload/CanvasContentPanel.js

@@ -25,13 +25,12 @@ import PanelFilter from './PanelFilter';
 import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel } from '../canvasContentUtils';
 import { useStoreProps } from '../StoreContext';
 // TODO: Component is only validated for images, need to validate for other content types
-export default function CanvasContentPanel(_ref) {
-  let {
-    trayProps,
-    canvasOrigin,
-    plugin,
-    setFileUrl
-  } = _ref;
+export default function CanvasContentPanel({
+  trayProps,
+  canvasOrigin,
+  plugin,
+  setFileUrl
+}) {
   const [filterSettings, setFilterSettings] = useFilterSettings(FILTER_SETTINGS_BY_PLUGIN[plugin]);
   const [link, setLink] = useState(null);
   const [hasLoaded, setHasLoaded] = useState(false);

package/es/rce/plugins/shared/Upload/CategoryProcessor.js

@@ -18,10 +18,9 @@
 
 import * as SvgProcessor from './SvgCategoryProcessor';
 export async function process(file) {
-  var _file$type;
   // Determine which processor to use based on file type.
   // If no matching processor is found for the given file type, return undefined
-  if (file !== null && file !== void 0 && (_file$type = file.type) !== null && _file$type !== void 0 && _file$type.includes(SvgProcessor.typeTest)) {
+  if (file?.type?.includes(SvgProcessor.typeTest)) {
     return await SvgProcessor.process(file);
   }
 }

package/es/rce/plugins/shared/Upload/ComputerPanel.js

@@ -83,15 +83,14 @@ function readFile(theFile) {
   });
   return p;
 }
-export default function ComputerPanel(_ref) {
-  let {
-    theFile,
-    setFile,
-    setError,
-    accept,
-    label,
-    bounds
-  } = _ref;
+export default function ComputerPanel({
+  theFile,
+  setFile,
+  setError,
+  accept,
+  label,
+  bounds
+}) {
   const [messages, setMessages] = useState([]);
   const [preview, setPreview] = useState({
     preview: null,
@@ -105,9 +104,8 @@ export default function ComputerPanel(_ref) {
   const width = 0.8 * bounds.width;
   useEffect(() => {
     return () => {
-      if (Array.isArray(preview === null || preview === void 0 ? void 0 : preview.preview)) {
-        var _URL, _URL$revokeObjectURL;
-        (_URL = URL) === null || _URL === void 0 ? void 0 : (_URL$revokeObjectURL = _URL.revokeObjectURL) === null || _URL$revokeObjectURL === void 0 ? void 0 : _URL$revokeObjectURL.call(_URL, preview.preview[0].src);
+      if (Array.isArray(preview?.preview)) {
+        URL?.revokeObjectURL?.(preview.preview[0].src);
       }
     };
   }, [preview]);
@@ -259,8 +257,7 @@ export default function ComputerPanel(_ref) {
   }, /*#__PURE__*/React.createElement(FileDrop, {
     "data-testid": "filedrop",
     accept: accept,
-    onDropAccepted: _ref2 => {
-      let [file] = _ref2;
+    onDropAccepted: ([file]) => {
       if (messages.length) {
         setMessages([]);
       }

package/es/rce/plugins/shared/Upload/PanelFilter.js

@@ -28,14 +28,13 @@ import React, { useEffect, useState } from 'react';
 function shouldSearch(searchString) {
   return searchString.length === 0 || searchString.length >= 3;
 }
-export default function PanelFilter(_ref) {
-  let {
-    mountNode,
-    onChange,
-    sortValue,
-    searchString,
-    contentType
-  } = _ref;
+export default function PanelFilter({
+  mountNode,
+  onChange,
+  sortValue,
+  searchString,
+  contentType
+}) {
   const [pendingSearchString, setPendingSearchString] = useState(searchString);
   const [searchInputTimer, setSearchInputTimer] = useState(0);
 

package/es/rce/plugins/shared/Upload/UploadFile.js

@@ -33,24 +33,22 @@ export const FullPanelIds = [...UploadCanvasPanelIds, ...UploadFilePanelIds];
 /**
  * Handles uploading data based on what type of data is submitted.
  */
-export const handleSubmit = function (editor, accept, selectedPanel,
+export const handleSubmit = (editor, accept, selectedPanel,
 // @ts-expect-error
 uploadData,
 // @ts-expect-error
 storeProps,
 // @ts-expect-error
-_source) {
-  let afterInsert = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : () => undefined;
+_source, afterInsert = () => undefined) => {
   Bridge.focusEditor(RCEWrapper.getByEditor(editor)); // necessary since it blurred when the modal opened
   const {
     altText,
     isDecorativeImage,
     displayAs
-  } = (uploadData === null || uploadData === void 0 ? void 0 : uploadData.imageOptions) || {};
+  } = uploadData?.imageOptions || {};
   switch (selectedPanel) {
     case 'COMPUTER':
       {
-        var _uploadData$usageRigh;
         const {
           theFile
         } = uploadData;
@@ -63,7 +61,7 @@ _source) {
           altText,
           isDecorativeImage,
           displayAs,
-          usageRights: (uploadData === null || uploadData === void 0 ? void 0 : (_uploadData$usageRigh = uploadData.usageRights) === null || _uploadData$usageRigh === void 0 ? void 0 : _uploadData$usageRigh.usageRight) === 'choose' ? undefined : uploadData === null || uploadData === void 0 ? void 0 : uploadData.usageRights
+          usageRights: uploadData?.usageRights?.usageRight === 'choose' ? undefined : uploadData?.usageRights
         };
         let tabContext = 'documents';
         if (isImage(theFile.type)) {
@@ -104,21 +102,20 @@ _source) {
   element.addEventListener('load', () => indicate(indicatorRegion(editor, element)));
   afterInsert();
 };
-export function UploadFile(_ref) {
-  let {
-    accept,
-    editor,
-    label,
-    panels,
-    onDismiss,
-    requireA11yAttributes = true,
-    forBlockEditorUse = false,
-    uploading = false,
-    trayProps,
-    canvasOrigin,
-    onSubmit = handleSubmit,
-    preselectedFile = undefined
-  } = _ref;
+export function UploadFile({
+  accept,
+  editor,
+  label,
+  panels,
+  onDismiss,
+  requireA11yAttributes = true,
+  forBlockEditorUse = false,
+  uploading = false,
+  trayProps,
+  canvasOrigin,
+  onSubmit = handleSubmit,
+  preselectedFile = undefined
+}) {
   const [modalBodyWidth, setModalBodyWidth] = useState(undefined);
   const [modalBodyHeight, setModalBodyHeight] = useState(undefined);
   const [theFile] = useState(preselectedFile);
@@ -135,7 +132,7 @@ export function UploadFile(_ref) {
     if (bodyRef.current) {
       // eslint-disable-next-line react/no-find-dom-node
       const thebody = ReactDOM.findDOMNode(bodyRef.current);
-      const sz = thebody === null || thebody === void 0 ? void 0 : thebody.getBoundingClientRect();
+      const sz = thebody?.getBoundingClientRect();
       sz.height -= px('3rem'); // leave room for the tabs
       setModalBodyWidth(sz.width);
       setModalBodyHeight(sz.height);

package/es/rce/plugins/shared/Upload/UploadFileModal.js

@@ -25,7 +25,7 @@ import { Spinner } from '@instructure/ui-spinner';
 import { Tabs } from '@instructure/ui-tabs';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
 import formatMessage from '../../../../format-message';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 import RceApiSource from '../../../../rcs/api';
 import ImageOptionsForm from '../ImageOptionsForm';
 import UsageRightsSelectBox from './UsageRightsSelectBox';
@@ -34,12 +34,11 @@ import { UploadCanvasPanelIds, CanvasPanelTitles } from '../canvasContentUtils';
 const CanvasContentPanel = /*#__PURE__*/React.lazy(() => import('./CanvasContentPanel'));
 const ComputerPanel = /*#__PURE__*/React.lazy(() => import('./ComputerPanel'));
 const UrlPanel = /*#__PURE__*/React.lazy(() => import('./UrlPanel'));
-function shouldBeDisabled(_ref, selectedPanel, usageRightNotSet) {
-  let {
-    fileUrl,
-    theFile,
-    error
-  } = _ref;
+function shouldBeDisabled({
+  fileUrl,
+  theFile,
+  error
+}, selectedPanel, usageRightNotSet) {
   if (error || usageRightNotSet && selectedPanel === 'COMPUTER') {
     return true;
   }
@@ -54,25 +53,23 @@ function shouldBeDisabled(_ref, selectedPanel, usageRightNotSet) {
     // When in doubt, don't disable (but we shouldn't get here either)
   }
 }
-const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  var _contentProps$session;
-  let {
-    preselectedFile,
-    editor,
-    contentProps,
-    trayProps,
-    canvasOrigin,
-    onSubmit,
-    onDismiss,
-    panels,
-    label,
-    accept,
-    modalBodyWidth,
-    modalBodyHeight,
-    requireA11yAttributes = true,
-    forBlockEditorUse = false,
-    uploading = false
-  } = _ref2;
+const UploadFileModal = /*#__PURE__*/React.forwardRef(({
+  preselectedFile,
+  editor,
+  contentProps,
+  trayProps,
+  canvasOrigin,
+  onSubmit,
+  onDismiss,
+  panels,
+  label,
+  accept,
+  modalBodyWidth,
+  modalBodyHeight,
+  requireA11yAttributes = true,
+  forBlockEditorUse = false,
+  uploading = false
+}, ref) => {
   const [theFile, setFile] = useState(preselectedFile);
   const [error, setError] = useState(null);
   const [fileUrl, setFileUrl] = useState('');
@@ -89,7 +86,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const [displayAs, setDisplayAs] = useState('embed');
   // even though usage rights might be required by the course, canvas has no place
   // on the user to store it. Only Group and Course.
-  const requiresUsageRights = (contentProps === null || contentProps === void 0 ? void 0 : (_contentProps$session = contentProps.session) === null || _contentProps$session === void 0 ? void 0 : _contentProps$session.usageRightsRequired) && /(?:course|group)/.test(trayProps.contextType);
+  const requiresUsageRights = contentProps?.session?.usageRightsRequired && /(?:course|group)/.test(trayProps.contextType);
   function handleAltTextChange(event) {
     setAltText(event.target.value);
   }
@@ -127,7 +124,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     "data-mce-component": true,
     as: "form",
     label: label,
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     size: "large",
     overflow: "fit",
     onDismiss: onDismiss,
@@ -158,12 +155,9 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }), /*#__PURE__*/React.createElement(Heading, null, label)), /*#__PURE__*/React.createElement(Modal.Body, {
     ref: ref
   }, /*#__PURE__*/React.createElement(Tabs, {
-    onRequestTabChange: (event, _ref3) => {
-      let {
-        index
-      } = _ref3;
-      return handleRequestTabChange(index);
-    }
+    onRequestTabChange: (event, {
+      index
+    }) => handleRequestTabChange(index)
   }, panels.map(panel => {
     switch (panel) {
       case 'COMPUTER':

package/es/rce/plugins/shared/Upload/UrlPanel.js

@@ -20,11 +20,10 @@ import React from 'react';
 import { string, func } from 'prop-types';
 import { TextInput } from '@instructure/ui-text-input';
 import formatMessage from '../../../../format-message';
-export default function UrlPanel(_ref) {
-  let {
-    fileUrl,
-    setFileUrl
-  } = _ref;
+export default function UrlPanel({
+  fileUrl,
+  setFileUrl
+}) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, {
     name: "file-url",
     renderLabel: formatMessage('File URL'),

package/es/rce/plugins/shared/Upload/UsageRightsSelectBox.js

@@ -22,12 +22,11 @@ import formatMessage from '../../../../format-message';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { View } from '@instructure/ui-view';
 import { TextInput } from '@instructure/ui-text-input';
-const ShowCreativeCommonsOptions = _ref => {
-  let {
-    ccLicense,
-    setCCLicense,
-    licenseOptions
-  } = _ref;
+const ShowCreativeCommonsOptions = ({
+  ccLicense,
+  setCCLicense,
+  licenseOptions
+}) => {
   const onlyCC = licenseOptions.filter(license => license.id.indexOf('cc') === 0);
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -36,12 +35,9 @@ const ShowCreativeCommonsOptions = _ref => {
     renderLabel: formatMessage('Creative Commons License:'),
     assistiveText: formatMessage('Use arrow keys to navigate options.'),
     value: ccLicense,
-    onChange: (e, _ref2) => {
-      let {
-        id
-      } = _ref2;
-      return setCCLicense(id);
-    }
+    onChange: (e, {
+      id
+    }) => setCCLicense(id)
   }, onlyCC.map(license => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
     key: license.id,
     id: license.id,
@@ -59,14 +55,13 @@ const ShowMessage = () => {
     }
   }, formatMessage("If you do not select usage rights now, this file will be unpublished after it's uploaded."))));
 };
-const UsageRightsSelectBox = _ref3 => {
-  let {
-    contextType,
-    contextId,
-    showMessage: showMessageProp,
-    usageRightsState,
-    setUsageRightsState
-  } = _ref3;
+const UsageRightsSelectBox = ({
+  contextType,
+  contextId,
+  showMessage: showMessageProp,
+  usageRightsState,
+  setUsageRightsState
+}) => {
   const {
     usageRight,
     ccLicense,
@@ -119,10 +114,9 @@ const UsageRightsSelectBox = _ref3 => {
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     renderLabel: formatMessage('Usage Right:'),
     assistiveText: formatMessage('Use arrow keys to navigate options.'),
-    onChange: (e, _ref4) => {
-      let {
-        id
-      } = _ref4;
+    onChange: (e, {
+      id
+    }) => {
       handleChange(id);
     },
     value: usageRight

package/es/rce/plugins/shared/Upload/doFileUpload.js

@@ -29,13 +29,12 @@ export default function doFileUpload(ed, document, opts) {
   } = {
     ...opts
   };
-  const title = accept !== null && accept !== void 0 && accept.startsWith('image/') ? formatMessage('Upload Image') : formatMessage('Upload File');
+  const title = accept?.startsWith('image/') ? formatMessage('Upload Image') : formatMessage('Upload File');
   let shownResolve;
   const shownPromise = new Promise(resolve => shownResolve = resolve);
-  const closedPromise = import('./UploadFile').then(_ref => {
-    let {
-      UploadFile
-    } = _ref;
+  const closedPromise = import('./UploadFile').then(({
+    UploadFile
+  }) => {
     const container = document.querySelector('.canvas-rce-upload-container') || (() => {
       const elem = document.createElement('div');
       elem.className = 'canvas-rce-upload-container';
@@ -48,9 +47,9 @@ export default function doFileUpload(ed, document, opts) {
         ed.focus(false);
         resolve('dismissed');
       };
-      const wrappedSubmit = function () {
+      const wrappedSubmit = (...args) => {
         try {
-          return handleSubmit(...arguments);
+          return handleSubmit(...args);
         } finally {
           resolve('submitted');
         }

package/es/rce/plugins/shared/ai_tools/AIResponseModal.js

@@ -22,14 +22,13 @@ import formatMessage from '../../../../format-message';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { Modal } from '@instructure/ui-modal';
-const AIResponseModal = _ref => {
-  let {
-    open,
-    html,
-    onClose,
-    onInsert,
-    onReplace
-  } = _ref;
+const AIResponseModal = ({
+  open,
+  html,
+  onClose,
+  onInsert,
+  onReplace
+}) => {
   return /*#__PURE__*/React.createElement(Modal, {
     open: open,
     onDismiss: onClose,