@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -1,6 +1,4 @@
 import _pt from "prop-types";
-// @ts-nocheck
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -18,6 +16,7 @@ import _pt from "prop-types";
  * 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, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { px } from '@instructure/ui-utils';
@@ -31,25 +30,25 @@ import RCEWrapper from '../../../RCEWrapper';
 import { UploadCanvasPanelIds } from '../canvasContentUtils';
 export const UploadFilePanelIds = ['COMPUTER', 'URL'];
 export const FullPanelIds = [...UploadCanvasPanelIds, ...UploadFilePanelIds];
-
 /**
  * Handles uploading data based on what type of data is submitted.
  */
-export const handleSubmit = function (editor, accept, selectedPanel, uploadData, storeProps, _source) {
-  let afterInsert = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : () => undefined;
+export const handleSubmit = (editor, accept, selectedPanel,
+// @ts-expect-error
+uploadData,
+// @ts-expect-error
+storeProps,
+// @ts-expect-error
+_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;
@@ -62,27 +61,23 @@ export const handleSubmit = function (editor, accept, selectedPanel, uploadData,
           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)) {
           tabContext = 'images';
         } else if (isAudioOrVideo(theFile.type)) {
           tabContext = 'media';
         }
-
         storeProps.startMediaUpload(tabContext, fileMetaData);
         break;
       }
-
     case 'URL':
       {
         const {
           fileUrl
         } = uploadData;
         let editorHtml;
-
         if (displayAs !== 'link' && /image/.test(accept)) {
           editorHtml = editor.dom.createHTML('img', {
             src: fileUrl,
@@ -96,51 +91,49 @@ export const handleSubmit = function (editor, accept, selectedPanel, uploadData,
             href: fileUrl
           }, altText || fileUrl);
         }
-
         editor.insertContent(editorHtml);
         break;
       }
-
     default:
       throw new Error('Selected Panel is invalid');
     // Should never get here
   }
-
   const element = editor.selection.getEnd();
   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);
   const bodyRef = React.useRef();
-  trayProps = trayProps || Bridge.trayProps.get(editor); // the panels get rendered inside tab panels. it's difficult for them to
+
+  // @ts-expect-error
+  trayProps = trayProps || Bridge.trayProps.get(editor);
+
+  // the panels get rendered inside tab panels. it's difficult for them to
   // figure out how much space they have to work with, and I'd like the previews
   // not to trigger scrollbars in the modal's body. Get the Modal.Body's size
   // and to the ComputerPanel how much space it has so it can render the file preview
-
   useEffect(() => {
     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);
     }
@@ -148,7 +141,8 @@ export function UploadFile(_ref) {
   return /*#__PURE__*/React.createElement(StoreProvider, Object.assign({}, trayProps, {
     canvasOrigin: canvasOrigin
   }), contentProps => /*#__PURE__*/React.createElement(UploadFileModal, {
-    ref: bodyRef // @ts-ignore
+    ref: bodyRef
+    // @ts-expect-error
     ,
     preselectedFile: theFile,
     editor: editor,

package/es/rce/plugins/shared/Upload/UploadFileModal.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, { Suspense, useState } from 'react';
 import { arrayOf, bool, func, number, object, oneOf, oneOfType, string } from 'prop-types';
 import { Modal } from '@instructure/ui-modal';
@@ -24,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';
@@ -33,52 +34,42 @@ 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;
   }
-
   switch (selectedPanel) {
     case 'COMPUTER':
       return !theFile || theFile.error;
-
     case 'URL':
       return !fileUrl;
-
     default:
       if (UploadCanvasPanelIds.includes(selectedPanel)) return !fileUrl;
       return false;
     // 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('');
@@ -87,38 +78,35 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     usageRight: 'choose',
     ccLicense: '',
     copyrightHolder: ''
-  }); // Image options props
+  });
 
+  // Image options props
   const [altText, setAltText] = useState('');
   const [isDecorativeImage, setIsDecorativeImage] = useState(false);
-  const [displayAs, setDisplayAs] = useState('embed'); // even though usage rights might be required by the course, canvas has no place
+  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);
   }
-
   function handleIsDecorativeChange(event) {
     setIsDecorativeImage(event.target.checked);
   }
-
   function handleDisplayAsChange(event) {
     setDisplayAs(event.target.value);
   }
-
   const handleRequestTabChange = index => {
     setSelectedPanel(panels[index]);
     setFileUrl('');
   };
-
   const submitDisabled = shouldBeDisabled({
     fileUrl,
     theFile,
     error
-  }, selectedPanel, requiresUsageRights && usageRightsState.usageRight === 'choose'); // Load the necessary session values, if not already loaded
+  }, selectedPanel, requiresUsageRights && usageRightsState.usageRight === 'choose');
 
+  // Load the necessary session values, if not already loaded
   const loadSession = contentProps.loadSession;
   React.useEffect(() => {
     loadSession();
@@ -129,26 +117,22 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     host: trayProps.host,
     canvasOrigin
   });
-
   if (forBlockEditorUse && !['COMPUTER', 'URL'].includes(selectedPanel)) {
     requireA11yAttributes = false;
   }
-
   return /*#__PURE__*/React.createElement(Modal, {
     "data-mce-component": true,
     as: "form",
     label: label,
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     size: "large",
     overflow: "fit",
     onDismiss: onDismiss,
     onSubmit: e => {
       e.preventDefault();
-
       if (submitDisabled || uploading) {
         return false;
       }
-
       onSubmit(editor, accept, selectedPanel, {
         fileUrl,
         theFile,
@@ -171,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':
@@ -202,7 +183,6 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
             height: modalBodyHeight
           }
         })));
-
       case 'URL':
         return /*#__PURE__*/React.createElement(Tabs.Panel, {
           key: panel,
@@ -219,7 +199,6 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           fileUrl: fileUrl,
           setFileUrl: setFileUrl
         })));
-
       default:
         if (UploadCanvasPanelIds.includes(panel)) {
           return /*#__PURE__*/React.createElement(Tabs.Panel, {
@@ -238,10 +217,10 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
             setFileUrl: setFileUrl
           })));
         }
-
         return null;
     }
-  })), // We shouldn't show the accordions until the session data is loaded.
+  })),
+  // We shouldn't show the accordions until the session data is loaded.
   Object.keys(contentProps.session || {}).length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, selectedPanel === 'COMPUTER' && requiresUsageRights && /*#__PURE__*/React.createElement(View, {
     as: "div",
     role: "group",
@@ -304,6 +283,5 @@ UploadFileModal.propTypes = {
   forBlockEditorUse: bool,
   uploading: bool,
   preselectedFile: object // JS File
-
 };
 export default UploadFileModal;

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

@@ -15,15 +15,15 @@
  * 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 { 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

@@ -15,19 +15,18 @@
  * 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 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,19 +35,15 @@ 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,
     value: license.id
   }, license.name))));
 };
-
 const ShowMessage = () => {
   return /*#__PURE__*/React.createElement("div", {
     className: "alert"
@@ -60,15 +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,
@@ -100,23 +93,19 @@ const UsageRightsSelectBox = _ref3 => {
     function getUsageRightsOptions() {
       fetch(apiUrl()).then(res => res.text()).then(res => setLicenseOptions(JSON.parse(res))).catch(() => {});
     }
-
     function apiUrl() {
       const context = contextType.replace(/([^s])$/, '$1s'); // pluralize
-
       return `/api/v1/${context}/${contextId}/content_licenses`;
     }
-
     getUsageRightsOptions();
   }, [contextType, contextId]);
-
   function handleChange(value) {
-    setUsageRightsState(state => ({ ...state,
+    setUsageRightsState(state => ({
+      ...state,
       usageRight: value
     }));
     setShowMessage(showMessageProp && value === 'choose');
   }
-
   return /*#__PURE__*/React.createElement(View, {
     as: "div"
   }, /*#__PURE__*/React.createElement(View, {
@@ -125,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
@@ -138,7 +126,8 @@ const UsageRightsSelectBox = _ref3 => {
     value: contentOption.value
   }, contentOption.display)))), showCreativeCommonsOptions && /*#__PURE__*/React.createElement(ShowCreativeCommonsOptions, {
     ccLicese: ccLicense,
-    setCCLicense: license => setUsageRightsState(state => ({ ...state,
+    setCCLicense: license => setUsageRightsState(state => ({
+      ...state,
       ccLicense: license
     })),
     licenseOptions: licenseOptions
@@ -148,7 +137,8 @@ const UsageRightsSelectBox = _ref3 => {
   }, /*#__PURE__*/React.createElement(TextInput, {
     renderLabel: formatMessage('Copyright Holder:'),
     value: copyrightHolder,
-    onChange: (e, value) => setUsageRightsState(state => ({ ...state,
+    onChange: (e, value) => setUsageRightsState(state => ({
+      ...state,
       copyrightHolder: value
     })),
     placeholder: formatMessage('(c) 2001 Acme Inc.')
@@ -157,7 +147,6 @@ const UsageRightsSelectBox = _ref3 => {
     margin: "medium 0"
   }, showMessage && /*#__PURE__*/React.createElement(ShowMessage, null)));
 };
-
 UsageRightsSelectBox.propTypes = {
   usageRightsState: PropTypes.shape({
     ccLicense: PropTypes.string,

package/es/rce/plugins/shared/Upload/doFileUpload.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 ReactDOM from 'react-dom';
 import formatMessage from '../../../../format-message';
 import React from 'react';
@@ -25,39 +26,35 @@ export default function doFileUpload(ed, document, opts) {
     accept,
     panels,
     preselectedFile
-  } = { ...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';
       document.body.appendChild(elem);
       return elem;
     })();
-
     return new Promise(resolve => {
       const handleDismiss = () => {
         ReactDOM.unmountComponentAtNode(container);
         ed.focus(false);
         resolve('dismissed');
       };
-
-      const wrappedSubmit = function () {
+      const wrappedSubmit = (...args) => {
         try {
-          return handleSubmit(...arguments);
+          return handleSubmit(...args);
         } finally {
           resolve('submitted');
         }
       };
-
-      ReactDOM.render( /*#__PURE__*/React.createElement(UploadFile, {
+      ReactDOM.render(/*#__PURE__*/React.createElement(UploadFile, {
         preselectedFile: preselectedFile,
         accept: accept,
         editor: ed,

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

@@ -15,5 +15,6 @@
  * 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 { UploadFilePanelIds, handleSubmit, UploadFile } from './UploadFile';
 export { UploadFilePanelIds, handleSubmit, UploadFile };

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

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2024 - present Instructure, Inc.
  *
@@ -17,20 +16,19 @@ import _pt from "prop-types";
  * 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 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,
@@ -59,7 +57,6 @@ const AIResponseModal = _ref => {
     margin: "medium 0 0 medium"
   }, formatMessage('Insert'))));
 };
-
 AIResponseModal.propTypes = {
   open: _pt.bool.isRequired,
   html: _pt.string.isRequired,