@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/canvasFileBrowser/FileBrowser.js

@@ -13,6 +13,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 formatMessage from '../format-message';
 import _ from 'lodash';
@@ -26,13 +27,9 @@ import { getIconFromType, isImage } from '../rce/plugins/shared/fileTypeUtils';
 import { showFlashError } from '../common/FlashAlert';
 import natcompare from '../common/natcompare';
 export const PENDING_MEDIA_ENTRY_ID = 'maybe';
-
 class FileBrowser extends React.Component {
   constructor(_props2) {
-    var _this;
-
     super(_props2);
-    _this = this;
     this.fetchSubFolders = _.memoize(id => {
       this.source.fetchBookmarkedData(this.source.fetchSubFolders.bind(this.source), {
         folderId: id,
@@ -41,31 +38,24 @@ class FileBrowser extends React.Component {
         this.populateCollectionsList(result.folders);
       }, error => {
         this.props.onLoading(false);
-        /* eslint-disable no-console */
-
         console.error('Error fetching data from API');
         console.error(error);
       });
     });
-
-    this.populateCollectionsList = function (folderList) {
-      let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-      _this.setState((state, props) => {
+    this.populateCollectionsList = (folderList, opts = {}) => {
+      this.setState((state, props) => {
         const newCollections = _.cloneDeep(state.collections);
-
         folderList.forEach(folder => {
-          const collection = _this.formatFolderInfo(folder, { ...opts,
+          const collection = this.formatFolderInfo(folder, {
+            ...opts,
             searchString: props.searchString
           });
-
           newCollections[collection.id] = collection;
           const parentId = folder.parentId || 0;
           const collectionCollections = newCollections[parentId].collections;
-
           if (!collectionCollections.includes(collection.id)) {
             collectionCollections.push(collection.id);
-            newCollections[parentId].collections = _this.orderedIdsFromList(newCollections, collectionCollections);
+            newCollections[parentId].collections = this.orderedIdsFromList(newCollections, collectionCollections);
           }
         });
         return {
@@ -73,20 +63,16 @@ class FileBrowser extends React.Component {
         };
       });
     };
-
     this.populateItemsList = fileList => {
       this.setState((state, _props) => {
         const newItems = _.cloneDeep(state.items);
-
         const newCollections = _.cloneDeep(state.collections);
-
         fileList.forEach(file => {
           if (this.contentTypeIsAllowed(file.type)) {
             const item = this.formatFileInfo(file);
             newItems[item.id] = item;
             const folder_id = file.folderId;
             const collectionItems = newCollections[folder_id].items;
-
             if (!collectionItems.includes(item.id)) {
               collectionItems.push(item.id);
               newCollections[folder_id].items = this.orderedIdsFromList(newItems, collectionItems);
@@ -99,7 +85,6 @@ class FileBrowser extends React.Component {
         };
       });
     };
-
     this.onFolderToggle = folder => {
       const folderId = folder.id;
       this.setState((state, _props) => {
@@ -109,7 +94,6 @@ class FileBrowser extends React.Component {
         const {
           openFolders
         } = state;
-
         if (!collection.locked && openFolders.includes(folderId)) {
           newFolders = newFolders.concat(openFolders.filter(id => id !== folderId));
         } else if (!collection.locked) {
@@ -118,7 +102,6 @@ class FileBrowser extends React.Component {
           newCollections = _.cloneDeep(state.collections);
           newCollections[folderId] = collection;
         }
-
         return {
           openFolders: newFolders,
           uploadFolder: folderId,
@@ -127,24 +110,20 @@ class FileBrowser extends React.Component {
       }, () => {
         if (this.state.openFolders.includes(folderId)) {
           const collection = this.state.collections[folderId];
-
           if (!collection.locked) {
             this.getFolderData(folderId);
           }
         }
       });
     };
-
     this.onFileClick = file => {
       const selectedItem = this.state.items[file.id];
       if (selectedItem.isDisabled) return;
       this.props.selectFile(selectedItem);
     };
-
     this.setFailureMessage = message => {
       showFlashError(message)();
     };
-
     this.state = {
       collections: {
         0: {
@@ -159,11 +138,9 @@ class FileBrowser extends React.Component {
     this.source = _props2.source;
     this.updatePropsWithThumbnailOrIcon = this.updatePropsWithThumbnailOrIcon.bind(this);
   }
-
   componentDidMount() {
     this.getRootFolders();
   }
-
   componentDidUpdate() {
     this.state.openFolders.forEach(fid => {
       if (this.props.searchString !== this.state.collections[fid].searchString) {
@@ -171,7 +148,6 @@ class FileBrowser extends React.Component {
       }
     });
   }
-
   getContextName(contextType) {
     if (contextType === 'course') {
       return formatMessage('Course files');
@@ -179,34 +155,28 @@ class FileBrowser extends React.Component {
       return formatMessage('Group files');
     }
   }
-
   getRootFolders() {
     if (this.props.useContextAssets) {
       this.getContextFolders();
     }
-
     this.getUserFolders();
   }
-
   getUserFolders() {
     this.getRootFolderData('user', 'self', {
       name: formatMessage('My files')
     });
   }
-
   getContextFolders() {
     const {
       type,
       id
     } = this.props.context;
-
     if (type && id) {
       this.getRootFolderData(type, id, {
         name: this.getContextName(type)
       });
     }
   }
-
   increaseLoadingCount() {
     let {
       loadingCount
@@ -216,7 +186,6 @@ class FileBrowser extends React.Component {
       loadingCount
     });
   }
-
   decreaseLoadingCount() {
     let {
       loadingCount
@@ -226,9 +195,7 @@ class FileBrowser extends React.Component {
       loadingCount
     });
   }
-
-  getRootFolderData(context, contextId) {
-    let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  getRootFolderData(context, contextId, opts = {}) {
     this.increaseLoadingCount();
     this.source.fetchRootFolder({
       contextType: context,
@@ -237,29 +204,25 @@ class FileBrowser extends React.Component {
       this.populateRootFolder(result.folders[0], opts);
     }).catch(error => {
       this.decreaseLoadingCount();
-
       if (error.response && error.response.status !== 401) {
         this.setFailureMessage(formatMessage('Something went wrong'));
       }
     });
   }
-
-  populateRootFolder(data) {
-    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  populateRootFolder(data, opts = {}) {
     this.decreaseLoadingCount();
     this.populateCollectionsList([data], opts);
     this.getFolderData(data.id);
-  } // Memoized function to fetch all subfolders
-  // of the given folder ID, handing pagination
+  }
 
+  // Memoized function to fetch all subfolders
+  // of the given folder ID, handing pagination
 
   fetchFiles(id) {
-    var _this$state$collectio, _this$state$collectio2;
-
     this.source.fetchBookmarkedData(this.source.fetchFilesForFolder.bind(this.source), {
       searchString: this.props.searchString,
       perPage: 50,
-      filesUrl: (_this$state$collectio = this.state.collections[id]) === null || _this$state$collectio === void 0 ? void 0 : (_this$state$collectio2 = _this$state$collectio.api) === null || _this$state$collectio2 === void 0 ? void 0 : _this$state$collectio2.filesUrl
+      filesUrl: this.state.collections[id]?.api?.filesUrl
     }, result => {
       this.populateItemsList(result.files);
     }, error => {
@@ -267,13 +230,14 @@ class FileBrowser extends React.Component {
       console.error(error);
     });
   }
-
   getFolderData(id) {
     if (!this.state.collections[id].locked) {
       this.setState((state, _props) => {
-        const collections = { ...state.collections
+        const collections = {
+          ...state.collections
         };
-        const collection = { ...collections[id]
+        const collection = {
+          ...collections[id]
         };
         collection.items = [];
         collection.searchString = this.props.searchString;
@@ -287,21 +251,15 @@ class FileBrowser extends React.Component {
       });
     }
   }
-
   contentTypeIsAllowed(contentType) {
     for (const pattern of this.props.contentTypes) {
       if (minimatch(contentType, pattern)) {
         return true;
       }
     }
-
     return false;
   }
-
-  formatFolderInfo(apiFolder) {
-    var _apiFolder$contextTyp;
-
-    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  formatFolderInfo(apiFolder, opts = {}) {
     const descriptor = apiFolder.lockedForUser ? formatMessage('Locked') : null;
     const folder = {
       api: apiFolder,
@@ -309,7 +267,7 @@ class FileBrowser extends React.Component {
       collections: [],
       items: [],
       name: apiFolder.name,
-      context: `/${(_apiFolder$contextTyp = apiFolder.contextType) === null || _apiFolder$contextTyp === void 0 ? void 0 : _apiFolder$contextTyp.toLowerCase()}s/${apiFolder.contextId}`,
+      context: `/${apiFolder.contextType?.toLowerCase()}s/${apiFolder.contextId}`,
       canUpload: apiFolder.canUpload,
       locked: apiFolder.lockedForUser,
       descriptor,
@@ -322,14 +280,12 @@ class FileBrowser extends React.Component {
     });
     return folder;
   }
-
   updatePropsWithThumbnailOrIcon(props) {
     const {
       id
     } = props;
     const file = this.state.items[id].api;
     let thumbnail, itemIcon;
-
     if (isImage(file.type)) {
       if (file.thumbnailUrl) {
         thumbnail = file.thumbnailUrl;
@@ -339,20 +295,17 @@ class FileBrowser extends React.Component {
     } else {
       itemIcon = getIconFromType(file.type);
     }
-
     const containerRef = node => {
       if (node && !node.title && props.name) node.title = props.name;
     };
-
-    return { ...props,
+    return {
+      ...props,
       thumbnail,
       itemIcon,
       containerRef
     };
   }
-
-  formatFileInfo(apiFile) {
-    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  formatFileInfo(apiFile, opts = {}) {
     const {
       collections
     } = this.state;
@@ -367,19 +320,15 @@ class FileBrowser extends React.Component {
       alt: apiFile.name,
       ...opts
     };
-
     if (apiFile.iframeUrl) {
       // it's a media_object
       file.src = apiFile.iframeUrl;
     }
-
     if (isMediaPending) {
       file.descriptor = formatMessage('Media file is processing. Please try again later.');
     }
-
     return file;
   }
-
   orderedIdsFromList(list, ids) {
     try {
       const sortedIds = ids.sort((a, b) => natcompare.strings(list[a].name, list[b].name));
@@ -389,7 +338,6 @@ class FileBrowser extends React.Component {
       return ids;
     }
   }
-
   findFolderForFile(file) {
     const {
       collections
@@ -400,7 +348,6 @@ class FileBrowser extends React.Component {
     });
     return collections[folderKey];
   }
-
   renderLoading() {
     if (this.state.loadingCount > 0) {
       return /*#__PURE__*/React.createElement(Spinner, {
@@ -411,7 +358,6 @@ class FileBrowser extends React.Component {
       return null;
     }
   }
-
   render() {
     const element = /*#__PURE__*/React.createElement("div", {
       className: "file-browser__container"
@@ -434,9 +380,7 @@ class FileBrowser extends React.Component {
     }), this.renderLoading()));
     return element;
   }
-
 }
-
 FileBrowser.propTypes = {
   allowUpload: PropTypes.bool,
   selectFile: PropTypes.func.isRequired,

package/es/canvasFileBrowser/en-US.js

@@ -15,28 +15,25 @@
  * 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/>.
  */
+
 Date.CultureInfo = {
   /* Culture Name */
   name: 'en-US',
   englishName: 'English (United States)',
   nativeName: 'English (United States)',
-
   /* Day Name Strings */
   dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
   abbreviatedDayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
   shortestDayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   firstLetterDayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-
   /* Month Name Strings */
   monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   abbreviatedMonthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-
   /* AM/PM Designators */
   amDesignator: 'AM',
   pmDesignator: 'PM',
   firstDayOfWeek: 0,
   twoDigitYearMax: 2029,
-
   /**
      * The dateElementOrder is based on the order of the 
      * format specifiers in the formatPatterns.DatePattern. 
@@ -55,7 +52,6 @@ Date.CultureInfo = {
      * string being parsed.
      */
   dateElementOrder: 'mdy',
-
   /* Standard date and time format patterns */
   formatPatterns: {
     shortDate: 'M/d/yyyy',
@@ -69,7 +65,6 @@ Date.CultureInfo = {
     monthDay: 'MMMM dd',
     yearMonth: 'MMMM, yyyy'
   },
-
   /**
    * NOTE: If a string format is not parsing correctly, but
    * you would expect it parse, the problem likely lies below.
@@ -97,6 +92,7 @@ Date.CultureInfo = {
    *
    * As well, please review the list of "Future Strings" section below.
    */
+
   regexPatterns: {
     jan: /^jan(uary)?/i,
     feb: /^feb(ruary)?/i,
@@ -171,6 +167,7 @@ Date.CultureInfo = {
     offset: '-0700'
   }]
 };
+
 /** ******************
  ** Future Strings **
  ********************

package/es/common/FlashAlert.js

@@ -40,6 +40,7 @@
  *  type: one of ['info', 'success', 'warning', 'error']
  *        default is 'info' unless an error object is passed in, else is 'error'
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
@@ -51,32 +52,27 @@ import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-c
 import { Transition } from '@instructure/ui-motion';
 import RCEGlobals from '../rce/RCEGlobals';
 const messageHolderId = 'flashalert_message_holder'; // specs fail if I reuse jquery's elements
-
 const screenreaderMessageHolderId = 'flash_screenreader_holder';
 const TIMEOUT = 10000;
-
 function getLiveRegion() {
   // return element where flash screenreader messages go.
   // create if necessary
   let liveRegion = document.getElementById(screenreaderMessageHolderId);
-
   if (!liveRegion) {
     liveRegion = document.createElement('div');
     liveRegion.id = screenreaderMessageHolderId;
     liveRegion.setAttribute('role', 'alert');
     document.body.appendChild(liveRegion);
   }
-
   return liveRegion;
-} // An Alert with a message and "Details" button which surfaces
+}
+
+// An Alert with a message and "Details" button which surfaces
 // more info about the error when pressed.
 // Is displayed at the top of the document, and will close itself after a while
-
-
 export default class FlashAlert extends React.Component {
   constructor(props) {
     super(props);
-
     this.showDetails = () => {
       this.setState({
         showDetails: true
@@ -84,7 +80,6 @@ export default class FlashAlert extends React.Component {
       clearTimeout(this.timerId);
       this.timerId = setTimeout(() => this.closeAlert(), this.props.timeout);
     };
-
     this.closeAlert = () => {
       this.setState({
         isOpen: false
@@ -95,19 +90,16 @@ export default class FlashAlert extends React.Component {
         }, 500);
       });
     };
-
     this.state = {
       showDetails: false,
       isOpen: true
     };
     this.timerId = 0;
   }
-
   findDetailMessage() {
     const err = this.props.error;
     let a = err.message;
     let b;
-
     if (err.response) {
       if (err.response.data) {
         try {
@@ -125,13 +117,11 @@ export default class FlashAlert extends React.Component {
         }
       }
     }
-
     return {
       a,
       b
     };
   }
-
   renderDetailMessage() {
     const {
       a,
@@ -142,10 +132,8 @@ export default class FlashAlert extends React.Component {
       fontStyle: "italic"
     }, /*#__PURE__*/React.createElement(Text, null, a), b ? /*#__PURE__*/React.createElement("br", null) : null, b ? /*#__PURE__*/React.createElement(Text, null, b) : null);
   }
-
   render() {
     let details = null;
-
     if (this.props.error) {
       if (this.state.showDetails) {
         details = this.renderDetailMessage();
@@ -156,7 +144,6 @@ export default class FlashAlert extends React.Component {
         }, formatMessage('Details'))), /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.renderDetailMessage()));
       }
     }
-
     return /*#__PURE__*/React.createElement(Transition, {
       transitionOnMount: true,
       in: this.state.isOpen,
@@ -176,7 +163,6 @@ export default class FlashAlert extends React.Component {
       }
     }, this.props.message), details)));
   }
-
 }
 FlashAlert.propTypes = {
   onClose: PropTypes.func.isRequired,
@@ -192,22 +178,18 @@ FlashAlert.defaultProps = {
   timeout: TIMEOUT,
   screenReaderOnly: false
 };
-export function showFlashAlert(_ref) {
-  let {
-    message,
-    err,
-    type = err ? 'error' : 'info',
-    srOnly = false
-  } = _ref;
-
+export function showFlashAlert({
+  message,
+  err,
+  type = err ? 'error' : 'info',
+  srOnly = false
+}) {
   function closeAlert(atNode) {
     ReactDOM.unmountComponentAtNode(atNode);
     atNode.remove();
   }
-
   function getAlertContainer() {
     let alertContainer = document.getElementById(messageHolderId);
-
     if (!alertContainer) {
       alertContainer = document.createElement('div');
       alertContainer.classList.add('clickthrough-container');
@@ -215,15 +197,11 @@ export function showFlashAlert(_ref) {
       alertContainer.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 100%; z-index: 100000;');
       document.body.appendChild(alertContainer);
     }
-
     return alertContainer;
   }
-
   function renderAlert(parent) {
-    var _RCEGlobals$getConfig;
-
-    const configuredTimeout = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.flashAlertTimeout;
-    ReactDOM.render( /*#__PURE__*/React.createElement(FlashAlert, {
+    const configuredTimeout = RCEGlobals.getConfig()?.flashAlertTimeout;
+    ReactDOM.render(/*#__PURE__*/React.createElement(FlashAlert, {
       message: message,
       timeout: Number.isNaN(parseInt(configuredTimeout, 10)) ? TIMEOUT : configuredTimeout,
       error: err,
@@ -233,9 +211,8 @@ export function showFlashAlert(_ref) {
       screenReaderOnly: srOnly
     }), parent);
   }
-
-  const div = document.createElement('div'); // div.setAttribute('class', styles.flashMessage)
-
+  const div = document.createElement('div');
+  // div.setAttribute('class', styles.flashMessage)
   div.setAttribute('style', 'max-width:50em;margin:1rem auto;');
   div.setAttribute('class', 'flashalert-message');
   getAlertContainer().appendChild(div);
@@ -247,8 +224,7 @@ export function destroyContainer() {
   if (container) container.remove();
   if (liveRegion) liveRegion.remove();
 }
-export function showFlashError() {
-  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : formatMessage('An error occurred making a network request');
+export function showFlashError(message = formatMessage('An error occurred making a network request')) {
   return err => showFlashAlert({
     message,
     err,

package/es/common/browser.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/>.
  */
+
 let isIE = false;
-let isEdge = false; // expected to be called as setFromTinymce(window.tinymce) at some point where
-// window.tinymce is available
+let isEdge = false;
 
+// expected to be called as setFromTinymce(window.tinymce) at some point where
+// window.tinymce is available
 export function setFromTinymce(tinymce) {
   set(tinymce.Env);
 }