@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -31,10 +31,12 @@ export const fileShape = {
   locked_for_user: bool,
   published: bool
 };
-export const imageShape = { ...fileShape,
+export const imageShape = {
+  ...fileShape,
   thumbnail_url: string
 };
-export const mediaObjectShape = { ...imageShape,
+export const mediaObjectShape = {
+  ...imageShape,
   title: string.isRequired,
   embedded_iframe_url: string,
   media_entry_id: string
@@ -76,32 +78,26 @@ export const mediaQueryReturnShape = {
   isLoading: bool,
   error: string
 };
-
 function createContentTrayDocumentShape(isRequired) {
   return function validateContentTrayDocuments(props, propName, componentName) {
     const p = props[propName];
-
     if (!p) {
       if (isRequired) {
         if (!p) {
           return new Error(`Required prop \`${propName}\` not supplied to \`${componentName}\`. Validation failed.`);
         }
       }
-
       return undefined;
     } else {
       const files = p.user || p.course || p.group || p.User || p.Course || p.Group;
-
       if (!files) {
         return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Missing "user"|"course"|"group" key.`);
       }
-
       if ('searchString' in p) {
         if (!(typeof p.searchString === 'string')) {
           return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. "searchString" must be a string.`);
         }
       }
-
       if (propName === 'documents') {
         checkPropTypes({
           docs: shape(documentQueryReturnShape)
@@ -124,6 +120,5 @@ function createContentTrayDocumentShape(isRequired) {
     }
   };
 }
-
 export const contentTrayDocumentShape = createContentTrayDocumentShape(false);
 contentTrayDocumentShape.isRequired = createContentTrayDocumentShape(true);

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

@@ -15,7 +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 { format, parse } from 'url';
+
 import { absoluteToRelativeUrl } from '../../../common/fileUrl';
 import { IconAudioLine, IconDocumentLine, IconMsExcelLine, IconMsPptLine, IconMsWordLine, IconPdfLine, IconVideoLine } from '@instructure/ui-icons';
 import RCEGlobals from '../../RCEGlobals';
@@ -25,26 +25,21 @@ export function getIconFromType(type) {
   } else if (isAudio(type)) {
     return IconAudioLine;
   }
-
   switch (type) {
     case 'application/msword':
     case 'application/vnd.apple.pages':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
       return IconMsWordLine;
-
     case 'application/vnd.ms-powerpoint':
     case 'application/vnd.apple.keynote':
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
       return IconMsPptLine;
-
     case 'application/pdf':
       return IconPdfLine;
-
     case 'application/vnd.ms-excel':
     case 'application/vnd.apple.numbers':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
       return IconMsExcelLine;
-
     default:
       return IconDocumentLine;
   }
@@ -70,72 +65,64 @@ export function isIWork(filename) {
 export function getIWorkType(filename) {
   const tokens = filename.split('.');
   if (tokens.length <= 1) return '';
-  const lastToken = tokens[tokens.length - 1];
-
-  switch (lastToken.toLowerCase()) {
+  const lastToken = tokens[tokens.length - 1].toLowerCase();
+  switch (lastToken) {
     case 'pages':
       return 'application/vnd.apple.pages';
-
     case 'key':
       return 'application/vnd.apple.keynote';
-
     case 'numbers':
       return 'application/vnd.apple.numbers';
-
     default:
       return '';
   }
 }
 export function mediaPlayerURLFromFile(file, canvasOrigin) {
-  var _RCEGlobals$getFeatur;
-
   // why oh why aren't we consistent?
   const content_type = file['content-type'] || file.content_type || file.type;
+  if (typeof content_type !== 'string') throw new Error('Invalid content type');
   const type = content_type.replace(/\/.*$/, '');
-
-  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
-    var _RCEGlobals$getFeatur2;
-
-    const url = parse(`/media_attachments_iframe/${file.id}`, true);
-    url.query.type = type;
-    url.query.embedded = true;
-
-    if (file.uuid && (file.contextType == 'User' || !!canvasOrigin && canvasOrigin !== window.location.origin && (_RCEGlobals$getFeatur2 = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur2 !== void 0 && _RCEGlobals$getFeatur2.file_verifiers_for_quiz_links)) {
-      url.query.verifier = file.uuid;
+  const baseOrigin = canvasOrigin !== null && canvasOrigin !== void 0 ? canvasOrigin : window.location.origin;
+  if (RCEGlobals.getFeatures()?.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
+    const url = new URL(`/media_attachments_iframe/${file.id}`, baseOrigin);
+    url.searchParams.set('type', type);
+    url.searchParams.set('embedded', 'true');
+    if (file.uuid && (file.contextType === 'User' || canvasOrigin && canvasOrigin !== window.location.origin && RCEGlobals.getFeatures()?.file_verifiers_for_quiz_links)) {
+      url.searchParams.set('verifier', file.uuid);
     } else if (file.url || file.href) {
-      const parsed_url = parse(file.url || file.href, true);
-
-      if (parsed_url.query.verifier) {
-        url.query.verifier = parsed_url.query.verifier;
+      const href = file.url || file.href;
+      if (typeof href !== 'string') {
+        throw new Error('Invalid URL');
+      }
+      const parsedUrl = new URL(href, baseOrigin);
+      const verifier = parsedUrl.searchParams.get('verifier');
+      if (verifier) {
+        url.searchParams.set('verifier', verifier);
       }
     }
-
-    return format(url);
+    return url.toString().replace(baseOrigin, '');
   }
-
   if (file.embedded_iframe_url) {
-    const url = new URL(file.embedded_iframe_url, canvasOrigin);
-
-    if (url.searchParams.has('type')) {
-      return `${absoluteToRelativeUrl(file.embedded_iframe_url, canvasOrigin)}`;
+    const embedUrl = new URL(file.embedded_iframe_url, baseOrigin);
+    if (embedUrl.searchParams.has('type')) {
+      return absoluteToRelativeUrl(file.embedded_iframe_url, canvasOrigin);
     }
-
-    return `${absoluteToRelativeUrl(file.embedded_iframe_url, canvasOrigin)}?type=${type}`;
+    const relative = absoluteToRelativeUrl(file.embedded_iframe_url, canvasOrigin);
+    return `${relative}?type=${type}`;
   }
-
   if (isAudioOrVideo(content_type)) {
-    var _file$embed;
-
-    const mediaEntryId = file.media_entry_id || ((_file$embed = file.embed) === null || _file$embed === void 0 ? void 0 : _file$embed.id) || file.mediaEntryId;
-
+    const mediaEntryId = file.media_entry_id || file.embed?.id || file.mediaEntryId;
     if (mediaEntryId && mediaEntryId !== 'maybe') {
       return `/media_objects_iframe/${mediaEntryId}?type=${type}`;
     }
-
-    const parsed_url = parse(file.url || file.href, true);
-    const verifier = parsed_url.query.verifier ? `&verifier=${parsed_url.query.verifier}` : '';
-    return `/media_objects_iframe?mediahref=${parsed_url.pathname}${verifier}&type=${type}`;
+    const href = file.url || file.href;
+    if (typeof href !== 'string') {
+      throw new Error('Invalid URL');
+    }
+    const parsedUrl = new URL(href, baseOrigin);
+    const verifier = parsedUrl.searchParams.get('verifier');
+    const verifierParam = verifier ? `&verifier=${verifier}` : '';
+    return `/media_objects_iframe?mediahref=${parsedUrl.pathname}${verifierParam}&type=${type}`;
   }
-
   return undefined;
 }

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

@@ -15,11 +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/>.
  */
+
 export const convertFileToBase64 = blob => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.readAsDataURL(blob);
-
   reader.onload = () => resolve(reader.result);
-
   reader.onerror = error => reject(error);
 });

package/es/rce/plugins/shared/linkUtils.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 { SVGIcon } from '@instructure/ui-svg-images';
 import { IconAssignmentLine, IconDiscussionLine, IconModuleLine, IconQuizLine, IconQuizSolid as IconNewQuiz, IconAnnouncementLine, IconDocumentLine } from '@instructure/ui-icons';
@@ -31,28 +32,20 @@ export const getIcon = type => {
   switch (type) {
     case 'assignments':
       return IconAssignmentLine;
-
     case 'discussions':
       return IconDiscussionLine;
-
     case 'modules':
       return IconModuleLine;
-
     case 'quizzes':
       return IconQuizLine;
-
     case 'quizzes.next':
       return IconNewQuiz;
-
     case 'announcements':
       return IconAnnouncementLine;
-
     case 'wikiPages':
       return IconDocumentLine;
-
     case 'navigation':
       return IconBlank;
-
     default:
       return IconDocumentLine;
   }
@@ -61,28 +54,20 @@ export const getFriendlyLinkType = type => {
   switch (type) {
     case 'assignments':
       return formatMessage('Assignment');
-
     case 'discussions':
       return formatMessage('Discussion');
-
     case 'modules':
       return formatMessage('Module');
-
     case 'quizzes':
       return formatMessage('Quiz');
-
     case 'quizzes.next':
       return formatMessage('New Quiz');
-
     case 'announcements':
       return formatMessage('Announcement');
-
     case 'wikiPages':
       return formatMessage('Page');
-
     case 'navigation':
       return formatMessage('Navigation');
-
     default:
       return '';
   }

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

@@ -15,8 +15,8 @@
  * 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/>.
  */
-export default function round(number) {
-  let decimalDigits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+
+export default function round(number, decimalDigits = 2) {
   if (decimalDigits < 0) throw new Error('decimal digits must be >= 0');
   if (decimalDigits % 1 !== 0) throw new Error('decimal digits must be a whole number');
   const val = Math.round(number * 10 ** decimalDigits) / 10 ** decimalDigits;

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

@@ -15,17 +15,21 @@
  * 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/>.
  */
+
 const MASQUERADE_SELECTOR = 'body.is-masquerading-or-student-view';
-let trayHeight = null; // Adjusts the height that slide-out trays should take up based on the presence
+let trayHeight = null;
+export const resetTrayHeight = () => {
+  trayHeight = null;
+};
+
+// Adjusts the height that slide-out trays should take up based on the presence
 // or absence of the masquerade bottom bar. Caches the result of this check
 // forever, since we always reload the bundle when you enter/leave masquerade.
-
 export const getTrayHeight = () => {
   if (!trayHeight) {
     const masqueradeBar = document.querySelector(MASQUERADE_SELECTOR);
     trayHeight = masqueradeBar ? 'calc(100vh - 50px)' : '100vh';
   }
-
   return trayHeight;
 };
 export const isExternalUrl = url => {

package/es/rce/plugins/shared/useDataUrl.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/>.
  */
-import { useState, useEffect } from 'react'; // Given a URL to some resource (lik an image),
+
+import { useState, useEffect } from 'react';
+
+// Given a URL to some resource (lik an image),
 // fetches that resource and creates a base64
 // data URL representation of the resource
-
 const useDataUrl = () => {
   const [url, setUrl] = useState('');
   const [dataUrl, setDataUrl] = useState('');
@@ -28,21 +30,21 @@ const useDataUrl = () => {
   useEffect(() => {
     async function fetchDataUrl() {
       try {
-        setLoading(true); // Fetch the data and parse as blob
+        setLoading(true);
 
+        // Fetch the data and parse as blob
         const response = await fetch(url);
-        const blob = await response.blob(); // Return a promise that resolves with
+        const blob = await response.blob();
+
+        // Return a promise that resolves with
         // the the result of the blob read as
         // a data URL.
-
         return new Promise((resolve, reject) => {
           const reader = new FileReader();
-
           reader.onloadend = () => resolve({
             result: reader.result,
             blob
           });
-
           reader.onerror = reject;
           reader.readAsDataURL(blob);
         });
@@ -50,13 +52,11 @@ const useDataUrl = () => {
         setError(e);
       }
     }
-
     if (url) {
-      fetchDataUrl().then(_ref => {
-        let {
-          result,
-          blob
-        } = _ref;
+      fetchDataUrl().then(({
+        result,
+        blob
+      }) => {
         setDataUrl(result);
         setDataBlob(blob);
       }).catch(e => {
@@ -72,5 +72,4 @@ const useDataUrl = () => {
     dataBlob
   };
 };
-
 export default useDataUrl;

package/es/rce/plugins/shared/useFilterSettings.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 { useState } from 'react';
 const DEFAULT_FILTER_SETTINGS = {
   contentSubtype: 'all',
@@ -24,12 +25,11 @@ const DEFAULT_FILTER_SETTINGS = {
 };
 export function useFilterSettings(default_settings) {
   const [filterSettings, setFilterSettings] = useState(default_settings || DEFAULT_FILTER_SETTINGS);
-
   function updateFilterSettings(nextSettings) {
-    setFilterSettings({ ...filterSettings,
+    setFilterSettings({
+      ...filterSettings,
       ...nextSettings
     });
   }
-
   return [filterSettings, updateFilterSettings];
 }

package/es/rce/plugins/tinymce-a11y-checker/components/ColorField.js

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -17,20 +16,20 @@ 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'; // @ts-expect-error
 
+import React from 'react';
+// @ts-expect-error
 import contrast from 'wcag-element-contrast';
 import { TextInput } from '@instructure/ui-text-input';
 import { View } from '@instructure/ui-view';
 import ColorPicker from './color-picker';
 import { stringifyRGBA, restrictColorValues, parseRGBA } from '../utils/colors';
 export default class ColorField extends React.Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     this.state = {
       textValue: this.props.value
     };
-
     this.handleTextChange = event => {
       const rgba = parseRGBA(event.target.value.trim());
       const newValue = rgba ? stringifyRGBA(restrictColorValues(rgba)) : this.props.value;
@@ -44,7 +43,6 @@ export default class ColorField extends React.Component {
         }
       });
     };
-
     this.handlePickerChange = color => {
       const newValue = stringifyRGBA(color.rgb);
       this.setState({
@@ -58,7 +56,6 @@ export default class ColorField extends React.Component {
       });
     };
   }
-
   render() {
     return /*#__PURE__*/React.createElement(View, {
       as: "div"
@@ -76,7 +73,6 @@ export default class ColorField extends React.Component {
       onChange: this.handlePickerChange
     }));
   }
-
 }
 ColorField.propTypes = {
   label: _pt.string.isRequired,