@instructure/canvas-rce 5.14.0 → 5.14.2

package/es/rce/plugins/shared/LinkDisplay.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, { useEffect } from 'react';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
@@ -24,9 +25,7 @@ import formatMessage from '../../../format-message';
 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,

package/es/rce/plugins/shared/PreviewIcon.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 PropTypes from 'prop-types';
 import { Spinner } from '@instructure/ui-spinner';
@@ -22,7 +23,6 @@ import { Flex } from '@instructure/ui-flex';
 import formatMessage from '../../../format-message';
 import checkerboardStyle from './CheckerboardStyling';
 const SQUARE_SIZE = 4;
-
 const PreviewIcon = _ref => {
   let {
     color,
@@ -33,10 +33,8 @@ const PreviewIcon = _ref => {
     checkered
   } = _ref;
   const variantSettings = PreviewIcon.variants[variant];
-
   const background = () => {
     if (loading) return {};
-
     if (image) {
       return {
         backgroundImage: `url(${image})`,
@@ -45,7 +43,6 @@ const PreviewIcon = _ref => {
         backgroundPosition: 'center'
       };
     }
-
     return {
       border: '1px solid #73818C',
       borderRadius: '3px',
@@ -58,7 +55,6 @@ const PreviewIcon = _ref => {
       `
     };
   };
-
   return /*#__PURE__*/React.createElement("div", {
     id: "preview-background-wrapper",
     style: checkered ? checkerboardStyle(SQUARE_SIZE) : {}
@@ -80,7 +76,6 @@ const PreviewIcon = _ref => {
     size: "small"
   })))));
 };
-
 PreviewIcon.variants = {
   small: {
     width: '25px',

package/es/rce/plugins/shared/Previewable.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/>.
  */
+
 // copied from canvas-lms/ui/shared/features/doc-previews/jquery/index.js
 export const previewableMimeTypes = ['application/vnd.openxmlformats-officedocument.wordprocessingml.template', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.sun.xml.writer', 'application/excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/rtf', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.sun.xml.impress', 'application/vnd.sun.xml.calc', 'application/vnd.ms-excel', 'application/msword', 'application/mspowerpoint', 'application/rtf', 'application/vnd.oasis.opendocument.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow', 'text/plain', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/postscript', 'application/pdf', 'application/vnd.ms-powerpoint'];
 export function isPreviewable(type) {

package/es/rce/plugins/shared/RceFileBrowser.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, { useMemo } from 'react';
 import { func, object, string } from 'prop-types';
 import classnames from 'classnames';
@@ -22,8 +23,9 @@ import { View } from '@instructure/ui-view';
 import { downloadToWrap } from '../../../common/fileUrl';
 import { mediaPlayerURLFromFile } from './fileTypeUtils';
 import RceApiSource from '../../../rcs/api';
-import addIconMakerAttributes from '../instructure_icon_maker/utils/addIconMakerAttributes'; // TODO: should find a better way to share this code
+import addIconMakerAttributes from '../instructure_icon_maker/utils/addIconMakerAttributes';
 
+// TODO: should find a better way to share this code
 import FileBrowser from '../../../canvasFileBrowser/FileBrowser';
 import { isPreviewable } from './Previewable';
 RceFileBrowser.propTypes = {
@@ -56,10 +58,8 @@ export default function RceFileBrowser(props) {
       canvasOrigin
     });
   }, [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);
@@ -73,7 +73,6 @@ export default function RceFileBrowser(props) {
       target: '_blank',
       content_type
     };
-
     if (((_fileInfo$api = fileInfo.api) === null || _fileInfo$api === void 0 ? void 0 : _fileInfo$api.category) === 'icon_maker_icons') {
       onFileSelectParams.src = fileInfo.api.url;
       addIconMakerAttributes(onFileSelectParams);
@@ -83,14 +82,13 @@ export default function RceFileBrowser(props) {
         instructure_scribd_file: canPreview,
         inline_disabled: true
       });
-      onFileSelectParams = { ...onFileSelectParams,
+      onFileSelectParams = {
+        ...onFileSelectParams,
         class: clazz
       };
     }
-
     onFileSelect(onFileSelectParams);
   }
-
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     margin: "medium",

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

@@ -15,13 +15,13 @@
  * 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, { createContext, useContext, useState } from 'react';
 import { connect, Provider as ReduxProvider } from 'react-redux';
 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,
@@ -35,7 +35,6 @@ function Consumer(_ref) {
     ...props
   });
 }
-
 export const StoreConsumer = connect(propsFromState, sidebarHandlers)(Consumer);
 const StoreContext = /*#__PURE__*/createContext();
 export function StoreProvider(_ref2) {

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

@@ -15,7 +15,16 @@
  * 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 PropTypes, { bool, shape } from 'prop-types';
+
+/**
+ * Interface for content item's 'custom' field, specifically for what is expected to come from Studio
+ *
+ * Used to determine whether or not Studio embedded media should be resizable, and whether or not we
+ * present controls for the user to modify the embedded media.
+ */
+
 export const parsedStudioOptionsPropType = shape({
   resizable: bool.isRequired,
   convertibleToLink: bool.isRequired
@@ -25,7 +34,6 @@ export function isStudioContentItemCustomJson(input) {
 }
 export function studioAttributesFrom(customJson) {
   var _customJson$resizable, _customJson$enableMed;
-
   return {
     'data-studio-resizable': (_customJson$resizable = customJson.resizable) !== null && _customJson$resizable !== void 0 ? _customJson$resizable : false,
     'data-studio-tray-enabled': (_customJson$enableMed = customJson.enableMediaOptions) !== null && _customJson$enableMed !== void 0 ? _customJson$enableMed : false,
@@ -38,14 +46,11 @@ export function displayStyleFrom(studioAttributes) {
 }
 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') {
     return false;
   }
-
   return tinymceIframeShim.getAttribute('data-mce-p-data-studio-tray-enabled') === 'true';
 }
 export function parseStudioOptions(element) {
@@ -55,16 +60,15 @@ export function parseStudioOptions(element) {
     convertibleToLink: (tinymceIframeShim === null || tinymceIframeShim === void 0 ? void 0 : tinymceIframeShim.getAttribute('data-mce-p-data-studio-convertible-to-link')) === 'true'
   };
 }
+
 /**
  * Tinymce adds an overlay when you click on an iframe inside the editor. It will by default
  * add resize handles to the corners of the overlay. The code that adds these handles won't
  * if the overlay has `data-mce-resize='false'` on it. Here, we force that behavior when the
  * underlying iframe has a `data-studio-resizable='false'`
  */
-
 export function handleBeforeObjectSelected(e) {
   const targetElement = e.target;
-
   if (targetElement.getAttribute('data-mce-p-data-studio-resizable') === 'false') {
     targetElement.setAttribute('data-mce-resize', 'false');
   }

package/es/rce/plugins/shared/UnknownFileTypePanel.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 { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';

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
+  }
 }