@instructure/canvas-rce 5.14.1 → 5.14.2

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

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2024 - present Instructure, Inc.
  *
@@ -17,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, { useState } from 'react';
 import { Flex } from '@instructure/ui-flex';
 import ErrorBoundary from '../ErrorBoundary';
@@ -34,18 +34,19 @@ export default function CanvasContentPanel(_ref) {
   } = _ref;
   const [filterSettings, setFilterSettings] = useFilterSettings(FILTER_SETTINGS_BY_PLUGIN[plugin]);
   const [link, setLink] = useState(null);
-  const [hasLoaded, setHasLoaded] = useState(false); // storeProps has functions that collide with what we want to do in a block editor setting
+  const [hasLoaded, setHasLoaded] = useState(false);
 
+  // storeProps has functions that collide with what we want to do in a block editor setting
   const baseStoreProps = useStoreProps();
   const {
     onImageEmbed: _,
+    onMediaEmbed: _m,
     ...storeProps
   } = baseStoreProps;
-
   function handleFilterChange(newFilter, onChangeContext, onChangeSearchString, onChangeSortBy) {
-    const newFilterSettings = { ...newFilter
+    const newFilterSettings = {
+      ...newFilter
     };
-
     if (newFilterSettings.sortValue) {
       newFilterSettings.sortDir = newFilterSettings.sortValue === 'alphabetical' ? 'asc' : 'desc';
       onChangeSortBy({
@@ -53,50 +54,43 @@ export default function CanvasContentPanel(_ref) {
         dir: newFilterSettings.sortDir
       });
     }
-
     if ('searchString' in newFilterSettings && filterSettings.searchString !== newFilterSettings.searchString) {
       onChangeSearchString(newFilterSettings.searchString);
     }
-
     setFilterSettings(newFilterSettings);
-
     if (newFilterSettings.contentType) {
       let contextType, contextId;
-
       switch (newFilterSettings.contentType) {
         case 'user_files':
           contextType = 'user';
           contextId = trayProps.containingContext.userId;
           break;
-
         case 'group_files':
           contextType = 'group';
           contextId = trayProps.containingContext.contextId;
           break;
-
         case 'course_files':
           contextType = trayProps.contextType;
           contextId = trayProps.containingContext.contextId;
           break;
-
         case 'links':
           contextType = trayProps.containingContext.contextType;
           contextId = trayProps.containingContext.contextId;
       }
-
       onChangeContext({
         contextType,
         contextId
-      }); // context is only changed on load
-
+      });
+      // context is only changed on load
       setHasLoaded(true);
     }
   }
-
   const handleImageClick = image => {
     setFileUrl(image.href);
   };
-
+  const handleMediaClick = media => {
+    setFileUrl(`/media_attachments_iframe/${media.id}`);
+  };
   return /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     direction: "column",
@@ -134,7 +128,8 @@ export default function CanvasContentPanel(_ref) {
     editing: false,
     onEditClick: setLink,
     selectedLink: link,
-    onImageEmbed: handleImageClick
+    onImageEmbed: handleImageClick,
+    onMediaEmbed: handleMediaClick
   }, storeProps)))))));
 }
 CanvasContentPanel.propTypes = {

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

@@ -15,10 +15,10 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 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)) {

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

@@ -15,10 +15,12 @@
  * 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/>.
  */
+
 // NOTE: if you're looking in here for the ComputerPanel that's used for
 // the RCE's Media > Upload/Record Media function, it's not this one
 // (though this panel can handle video with the right "accept" prop).
 // See @instructure/canvas-media/src/ComputerPanel.js
+
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { arrayOf, func, number, object, oneOfType, shape, string } from 'prop-types';
 import { StyleSheet, css } from 'aphrodite';
@@ -38,34 +40,26 @@ import { MediaPlayer } from '@instructure/ui-media-player';
 import { RocketSVG, useComputerPanelFocus, isAudio, isPreviewable, sizeMediaPlayer } from '@instructure/canvas-media';
 import formatMessage from '../../../../format-message';
 import { getIconFromType, isAudioOrVideo, isImage, isText, isIWork, getIWorkType } from '../fileTypeUtils';
-
 function isPreviewableAudioOrVideo(type) {
   return isPreviewable(type) && isAudioOrVideo(type);
 }
-
 function readFile(theFile) {
   const p = new Promise((resolve, reject) => {
     const reader = new FileReader();
-
     reader.onload = () => {
       let result = reader.result;
-
       if (isText(theFile.type) && result.length > 1000) {
         result = `${result.substr(0, 1000)}...`;
       }
-
       resolve(result);
     };
-
     reader.onerror = () => {
       reject(new Error(formatMessage('An error occured reading the file')));
     };
-
     if (theFile.size === 0) {
       // canvas will reject uploading an empty file
       reject(new Error(formatMessage('You may not upload an empty file.')));
     }
-
     if (isImage(theFile.type)) {
       reader.readAsDataURL(theFile);
     } else if (isText(theFile.type)) {
@@ -78,19 +72,17 @@ function readFile(theFile) {
       }];
       resolve(sources);
     } else {
-      let type = theFile.type; // Native JS File API returns empty string if it can't determine the type
-
+      let type = theFile.type;
+      // Native JS File API returns empty string if it can't determine the type
       if (type === '' && isIWork(theFile.name)) {
         type = getIWorkType(theFile.name);
       }
-
       const icon = getIconFromType(type);
       resolve(icon);
     }
   });
   return p;
 }
-
 export default function ComputerPanel(_ref) {
   let {
     theFile,
@@ -104,31 +96,28 @@ export default function ComputerPanel(_ref) {
   const [preview, setPreview] = useState({
     preview: null,
     isLoading: false
-  }); // the trashcan is 38px tall and the 1.5rem margin-bottom
+  });
+  // the trashcan is 38px tall and the 1.5rem margin-bottom
   // the 350 is to guarantee the video doesn't oveflow into the copyright UI,
   // which should probably be rendered here and not up in the modal because
   // dealing with Tabs and size is nearly impossible
-
   const height = Math.min(350, 0.8 * (bounds.height - 38 - px('1.5rem')));
   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);
       }
     };
   }, [preview]);
   useEffect(() => {
     if (!theFile || preview.isLoading || preview.preview || preview.error) return;
-
     async function getPreview() {
       setPreview({
         preview: null,
         isLoading: true
       });
-
       try {
         const previewer = await readFile(theFile);
         setPreview({
@@ -136,7 +125,6 @@ export default function ComputerPanel(_ref) {
           isLoading: false
         });
         setError(null);
-
         if (isImage(theFile.type)) {
           // we need the preview to know the image size to show the placeholder
           theFile.preview = previewer;
@@ -151,7 +139,6 @@ export default function ComputerPanel(_ref) {
         });
       }
     }
-
     getPreview();
   });
   const handleLoadedMetadata = useCallback(event => {
@@ -162,16 +149,15 @@ export default function ComputerPanel(_ref) {
     });
     player.style.width = sz.width;
     player.style.height = sz.height;
-    player.style.margin = '0 auto'; // from this sub-package, I don't have a URL to use as the
+    player.style.margin = '0 auto';
+    // from this sub-package, I don't have a URL to use as the
     // audio player's poster image. We can give it a background image though
-
     player.classList.add(isAudio(theFile.type) ? 'audio-player' : 'video-player');
   }, [theFile, width, height]);
   const previewPanelRef = useRef(null);
   const clearButtonRef = useRef(null);
   const panelRef = useRef(null);
   useComputerPanelFocus(theFile, panelRef, clearButtonRef);
-
   function renderPreview() {
     if (preview.isLoading) {
       return /*#__PURE__*/React.createElement("div", {
@@ -231,7 +217,6 @@ export default function ComputerPanel(_ref) {
       }
     }
   }
-
   if (theFile) {
     const filename = theFile.name;
     return /*#__PURE__*/React.createElement("div", {
@@ -269,7 +254,6 @@ export default function ComputerPanel(_ref) {
       margin: "0 auto"
     }, renderPreview()));
   }
-
   return /*#__PURE__*/React.createElement("div", {
     ref: panelRef
   }, /*#__PURE__*/React.createElement(FileDrop, {
@@ -277,11 +261,9 @@ export default function ComputerPanel(_ref) {
     accept: accept,
     onDropAccepted: _ref2 => {
       let [file] = _ref2;
-
       if (messages.length) {
         setMessages([]);
       }
-
       setFile(file);
     },
     onDropRejected: () => {

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

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2024 - present Instructure, Inc.
  *
@@ -17,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 { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
@@ -25,11 +25,9 @@ import { SimpleSelect } from '@instructure/ui-simple-select';
 import { TextInput } from '@instructure/ui-text-input';
 import formatMessage from 'format-message';
 import React, { useEffect, useState } from 'react';
-
 function shouldSearch(searchString) {
   return searchString.length === 0 || searchString.length >= 3;
 }
-
 export default function PanelFilter(_ref) {
   let {
     mountNode,
@@ -39,8 +37,9 @@ export default function PanelFilter(_ref) {
     contentType
   } = _ref;
   const [pendingSearchString, setPendingSearchString] = useState(searchString);
-  const [searchInputTimer, setSearchInputTimer] = useState(0); // only run on mounting to trigger change to correct contextType
+  const [searchInputTimer, setSearchInputTimer] = useState(0);
 
+  // only run on mounting to trigger change to correct contextType
   useEffect(() => {
     onChange({
       contentType
@@ -53,28 +52,22 @@ export default function PanelFilter(_ref) {
         window.clearTimeout(searchInputTimer);
         setSearchInputTimer(0);
       }
-
       onChange({
         searchString: value
       });
     }
   }
-
   function handleChangeSearch(value) {
     setPendingSearchString(value);
-
     if (searchInputTimer) {
       window.clearTimeout(searchInputTimer);
     }
-
     const tid = window.setTimeout(() => doSearch(value), 250);
     setSearchInputTimer(tid);
   }
-
   function handleClear() {
     handleChangeSearch('');
   }
-
   function renderClearButton() {
     if (pendingSearchString) {
       return /*#__PURE__*/React.createElement(IconButton, {
@@ -85,10 +78,8 @@ export default function PanelFilter(_ref) {
         size: "small"
       }, /*#__PURE__*/React.createElement(IconXLine, null));
     }
-
     return undefined;
   }
-
   return /*#__PURE__*/React.createElement(Flex, {
     margin: "none xx-large none none",
     gap: "small",

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

@@ -15,21 +15,22 @@
  * 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 { ICON_MAKER_ICONS, TYPE, SVG_TYPE } from '../../instructure_icon_maker/svg/constants';
 export const typeTest = SVG_TYPE;
 const sliceSize = 400; // bytes
-
 const iconMakerType = TYPE;
 export async function process(file) {
   try {
     // The first slice of 400 bytes is sufficient to grab
     // the "type" metadata for icon maker SVGs
     const slice = await file.slice(0, sliceSize).text();
-
     if (slice.includes(iconMakerType)) {
       return {
         category: ICON_MAKER_ICONS
       };
     }
-  } catch {}
+  } catch {
+    // intentionally empty
+  }
 }

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,27 @@ 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) {
+export const handleSubmit = function (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;
   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) || {};
-
   switch (selectedPanel) {
     case 'COMPUTER':
       {
         var _uploadData$usageRigh;
-
         const {
           theFile
         } = uploadData;
@@ -65,24 +66,20 @@ export const handleSubmit = function (editor, accept, selectedPanel, uploadData,
           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
         };
         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,16 +93,13 @@ 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();
@@ -129,18 +123,20 @@ export function UploadFile(_ref) {
   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();
       sz.height -= px('3rem'); // leave room for the tabs
-
       setModalBodyWidth(sz.width);
       setModalBodyHeight(sz.height);
     }
@@ -148,7 +144,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';
@@ -33,35 +34,28 @@ 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;
-
   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,
@@ -87,38 +81,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);
-
   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,11 +120,9 @@ 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",
@@ -144,11 +133,9 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     onDismiss: onDismiss,
     onSubmit: e => {
       e.preventDefault();
-
       if (submitDisabled || uploading) {
         return false;
       }
-
       onSubmit(editor, accept, selectedPanel, {
         fileUrl,
         theFile,
@@ -202,7 +189,6 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
             height: modalBodyHeight
           }
         })));
-
       case 'URL':
         return /*#__PURE__*/React.createElement(Tabs.Panel, {
           key: panel,
@@ -219,7 +205,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 +223,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 +289,5 @@ UploadFileModal.propTypes = {
   forBlockEditorUse: bool,
   uploading: bool,
   preselectedFile: object // JS File
-
 };
 export default UploadFileModal;

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

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import { string, func } from 'prop-types';
 import { TextInput } from '@instructure/ui-text-input';