@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -15,18 +15,17 @@
  * 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,
-    ...props
-  } = _ref;
+function Consumer({
+  children,
+  ...props
+}) {
   return children({
     onLinkClick: bridge.insertLink,
     onImageEmbed: bridge.embedImage,
@@ -35,14 +34,12 @@ function Consumer(_ref) {
     ...props
   });
 }
-
 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

@@ -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,
@@ -37,34 +45,29 @@ 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'
   };
 }
+
 /**
  * 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';
@@ -25,27 +25,27 @@ 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); // 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 +53,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 +127,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,13 +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/>.
  */
+
 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

@@ -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,57 +72,50 @@ 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,
-    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,
     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);
+      if (Array.isArray(preview?.preview)) {
+        URL?.revokeObjectURL?.(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 +123,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 +137,6 @@ export default function ComputerPanel(_ref) {
         });
       }
     }
-
     getPreview();
   });
   const handleLoadedMetadata = useCallback(event => {
@@ -162,16 +147,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 +215,6 @@ export default function ComputerPanel(_ref) {
       }
     }
   }
-
   if (theFile) {
     const filename = theFile.name;
     return /*#__PURE__*/React.createElement("div", {
@@ -269,19 +252,15 @@ export default function ComputerPanel(_ref) {
       margin: "0 auto"
     }, renderPreview()));
   }
-
   return /*#__PURE__*/React.createElement("div", {
     ref: panelRef
   }, /*#__PURE__*/React.createElement(FileDrop, {
     "data-testid": "filedrop",
     accept: accept,
-    onDropAccepted: _ref2 => {
-      let [file] = _ref2;
-
+    onDropAccepted: ([file]) => {
       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,22 +25,20 @@ 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,
-    onChange,
-    sortValue,
-    searchString,
-    contentType
-  } = _ref;
+export default function PanelFilter({
+  mountNode,
+  onChange,
+  sortValue,
+  searchString,
+  contentType
+}) {
   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 +51,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 +77,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
+  }
 }