@instructure/canvas-rce 5.14.2 → 5.15.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 5.15.0 - 2025-02-12
+
+- Lazy load iframe and images by default
+- Improve TypeScript coverage
+- Use Biome for formatting
+- Upgrade ESLint
+- Remove jQuery dependency
+- Remove some node.js dependencies
+- Replace some ReactDOM.render usage with createRoot
+
 ## 5.14.2 - 2024-11-26
 
 - Added an icon to find and replace tray error

package/DEVELOPMENT.md

@@ -79,7 +79,7 @@ or anything else that gets mounted in a react portal comes with 2 requirements
 
 1. Include the attribute `data-mce-component={true}` on the `<Modal>` or ` <Tray>`. This tells the RCE
    that the modal is part of the RCE and not to fire a `blur` event when it closes and loses focus.
-1. Include `mountNode={instuPopupMountNode}` on thew `<Modal>` or `<Tray>`. The `instuiPopupMountNode`
+1. Include `mountNode={instuiPopupMountNodeFn}` on thew `<Modal>` or `<Tray>`. The `instuiPopupMountNodeFn`
    function is imported from `src/util/fullscreenHelpers` within the `canvas-rce` package or `@instructure/canvs-rce` from outside. This function will mount modals in the `<div class="rce-wrapper">` when the RCE is fullscreen, where it will not be hidden behind the RCE.
 
 ## Upgrading TinyMCE

package/es/bridge/Bridge.js

@@ -16,15 +16,15 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import K5Uploader from '@instructure/k5uploader';
+import { K5Uploader } from '@instructure/k5uploader';
 import { fileEmbed } from '../common/mimeClass';
+import mediaTranslations from '../rce/plugins/instructure_record/mediaTranslations';
 
 /* eslint no-console: 0 */
 export default class Bridge {
   constructor() {
     this.insertLink = link => {
       if (this.focusedEditor) {
-        var _this$controller;
         const {
           selection
         } = this.focusedEditor.props.tinymce.get(this.focusedEditor.props.textareaId);
@@ -36,7 +36,7 @@ export default class Bridge {
           link.text = link.title || link.href;
         }
         this.focusedEditor.insertLink(link);
-        (_this$controller = this.controller(this.focusedEditor.id)) === null || _this$controller === void 0 ? void 0 : _this$controller.hideTray();
+        this.controller(this.focusedEditor.id)?.hideTray();
       } else {
         console.warn('clicked sidebar link without a focused editor');
       }
@@ -77,16 +77,14 @@ export default class Bridge {
     };
     this.insertVideo = video => {
       if (this.focusedEditor) {
-        var _this$controller2;
         this.focusedEditor.insertVideo(video);
-        (_this$controller2 = this.controller(this.focusedEditor.id)) === null || _this$controller2 === void 0 ? void 0 : _this$controller2.hideTray();
+        this.controller(this.focusedEditor.id)?.hideTray();
       }
     };
     this.insertAudio = audio => {
       if (this.focusedEditor) {
-        var _this$controller3;
         this.focusedEditor.insertAudio(audio);
-        (_this$controller3 = this.controller(this.focusedEditor.id)) === null || _this$controller3 === void 0 ? void 0 : _this$controller3.hideTray();
+        this.controller(this.focusedEditor.id)?.hideTray();
       }
     };
     this.focusedEditor = null; // the RCEWrapper, not tinymce
@@ -121,10 +119,8 @@ export default class Bridge {
       this.focusedEditor = null;
     }
   }
-  focusActiveEditor() {
-    var _this$focusedEditor, _this$focusedEditor$m, _this$focusedEditor$m2;
-    let skipFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    (_this$focusedEditor = this.focusedEditor) === null || _this$focusedEditor === void 0 ? void 0 : (_this$focusedEditor$m = _this$focusedEditor.mceInstance) === null || _this$focusedEditor$m === void 0 ? void 0 : (_this$focusedEditor$m2 = _this$focusedEditor$m.call(_this$focusedEditor)) === null || _this$focusedEditor$m2 === void 0 ? void 0 : _this$focusedEditor$m2.focus(skipFocus);
+  focusActiveEditor(skipFocus = false) {
+    this.focusedEditor?.mceInstance?.()?.focus(skipFocus);
   }
   get mediaServerSession() {
     return this._mediaServerSession;
@@ -152,8 +148,7 @@ export default class Bridge {
   // are in English
   get uploadMediaTranslations() {
     if (!this._uploadMediaTranslations) {
-      const module = require('../rce/plugins/instructure_record/mediaTranslations');
-      this._uploadMediaTranslations = module.default;
+      this._uploadMediaTranslations = mediaTranslations;
     }
     return this._uploadMediaTranslations;
   }
@@ -178,8 +173,7 @@ export default class Bridge {
     delete this._controller[editorId];
   }
   showTrayForPlugin(plugin, editorId) {
-    var _this$_controller$edi;
-    (_this$_controller$edi = this._controller[editorId]) === null || _this$_controller$edi === void 0 ? void 0 : _this$_controller$edi.showTrayForPlugin(plugin);
+    this._controller[editorId]?.showTrayForPlugin(plugin);
   }
   hideTrays() {
     Object.keys(this._controller).forEach(eid => {
@@ -204,9 +198,8 @@ export default class Bridge {
 
   insertImage(image) {
     if (this.focusedEditor) {
-      var _this$controller4;
       const result = this.focusedEditor.insertImage(image);
-      (_this$controller4 = this.controller(this.focusedEditor.id)) === null || _this$controller4 === void 0 ? void 0 : _this$controller4.hideTray();
+      this.controller(this.focusedEditor.id)?.hideTray();
       return result;
     }
   }

package/es/canvasFileBrowser/FileBrowser.js

@@ -29,9 +29,7 @@ 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,
@@ -44,12 +42,11 @@ class FileBrowser extends React.Component {
         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, {
+          const collection = this.formatFolderInfo(folder, {
             ...opts,
             searchString: props.searchString
           });
@@ -58,7 +55,7 @@ class FileBrowser extends React.Component {
           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 {
@@ -198,8 +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,
@@ -213,8 +209,7 @@ class FileBrowser extends React.Component {
       }
     });
   }
-  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);
@@ -224,11 +219,10 @@ class FileBrowser extends React.Component {
   // 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 => {
@@ -265,9 +259,7 @@ class FileBrowser extends React.Component {
     }
     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,
@@ -275,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,
@@ -313,8 +305,7 @@ class FileBrowser extends React.Component {
       containerRef
     };
   }
-  formatFileInfo(apiFile) {
-    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  formatFileInfo(apiFile, opts = {}) {
     const {
       collections
     } = this.state;

package/es/common/FlashAlert.js

@@ -178,13 +178,12 @@ 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();
@@ -201,8 +200,7 @@ export function showFlashAlert(_ref) {
     return alertContainer;
   }
   function renderAlert(parent) {
-    var _RCEGlobals$getConfig;
-    const configuredTimeout = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.flashAlertTimeout;
+    const configuredTimeout = RCEGlobals.getConfig()?.flashAlertTimeout;
     ReactDOM.render(/*#__PURE__*/React.createElement(FlashAlert, {
       message: message,
       timeout: Number.isNaN(parseInt(configuredTimeout, 10)) ? TIMEOUT : configuredTimeout,
@@ -226,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/fileUrl.js

@@ -21,8 +21,7 @@
 // in mocha tests.
 
 import RCEGlobals from '../rce/RCEGlobals';
-function parseCanvasUrl(url) {
-  let canvasOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.origin;
+function parseCanvasUrl(url, canvasOrigin = window.location.origin) {
   if (!url) {
     return null;
   }
@@ -57,8 +56,7 @@ function parseCanvasUrl(url) {
 function formatUrl(parsed) {
   try {
     // Format query string while preserving original encoding
-    const queryPairs = Object.entries(parsed.query || {}).map(_ref => {
-      let [key, value] = _ref;
+    const queryPairs = Object.entries(parsed.query || {}).map(([key, value]) => {
       // Use encodeURIComponent to preserve %20 encoding
       return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
     });
@@ -135,7 +133,6 @@ export function fixupFileUrl(
 contextType, contextId, fileInfo, canvasOrigin) {
   const key = fileInfo.href ? 'href' : 'url';
   if (fileInfo[key]) {
-    var _RCEGlobals$getFeatur, _fileInfo$key, _fileInfo$key2;
     const currentOrigin = canvasOrigin || window.location.origin;
     let parsed = parseCanvasUrl(fileInfo[key], currentOrigin);
     if (!parsed) {
@@ -146,7 +143,7 @@ contextType, contextId, fileInfo, canvasOrigin) {
     // if this is a user file, add the verifier
     // if this is in New Quizzes and the feature flag is enabled, add the verifier
 
-    if (fileInfo.uuid && (contextType.includes('user') || !!canvasOrigin && canvasOrigin !== window.location.origin && (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.file_verifiers_for_quiz_links)) {
+    if (fileInfo.uuid && (contextType.includes('user') || !!canvasOrigin && canvasOrigin !== window.location.origin && RCEGlobals.getFeatures()?.file_verifiers_for_quiz_links)) {
       parsed.search = null;
       parsed.query.verifier = fileInfo.uuid;
     } else {
@@ -155,8 +152,8 @@ contextType, contextId, fileInfo, canvasOrigin) {
     const formattedUrl = formatUrl(parsed);
 
     // Keep absolute URLs if they match the canvas origin and input was absolute
-    const isAbsoluteUrl = (_fileInfo$key = fileInfo[key]) === null || _fileInfo$key === void 0 ? void 0 : _fileInfo$key.startsWith('http');
-    const matchesCanvasOrigin = (_fileInfo$key2 = fileInfo[key]) === null || _fileInfo$key2 === void 0 ? void 0 : _fileInfo$key2.startsWith(currentOrigin);
+    const isAbsoluteUrl = fileInfo[key]?.startsWith('http');
+    const matchesCanvasOrigin = fileInfo[key]?.startsWith(currentOrigin);
     fileInfo[key] = isAbsoluteUrl && matchesCanvasOrigin ? formattedUrl : absoluteToRelativeUrl(formattedUrl, currentOrigin);
   }
   return fileInfo;
@@ -167,8 +164,7 @@ contextType, contextId, fileInfo, canvasOrigin) {
 // This is appropriate for images in some rce content.
 // Remove wrap=1 to indicate we want the file downloaded
 // (which is necessary to show in an <img> tag), not viewed
-export function prepEmbedSrc(url) {
-  let canvasOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.origin;
+export function prepEmbedSrc(url, canvasOrigin = window.location.origin) {
   const parsed = parseCanvasUrl(url, canvasOrigin);
   if (!parsed) {
     return url;

package/es/common/incremental-loading/LoadMoreButton.js

@@ -21,10 +21,9 @@ import { func, shape } from 'prop-types';
 import { Button } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import formatMessage from '../../format-message';
-export default function LoadMoreButton(_ref) {
-  let {
-    loader
-  } = _ref;
+export default function LoadMoreButton({
+  loader
+}) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     padding: "small",

package/es/common/incremental-loading/LoadingStatus.js

@@ -17,13 +17,11 @@
  */
 
 import React from 'react';
-import { number, shape } from 'prop-types';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import formatMessage from '../../format-message';
-export default function LoadingStatus(_ref) {
-  let {
-    loader
-  } = _ref;
+export default function LoadingStatus({
+  loader
+}) {
   let itemsLoadedText = null;
   if (loader.lastRecordsLoaded > 0) {
     itemsLoadedText = formatMessage(`{
@@ -38,9 +36,4 @@ export default function LoadingStatus(_ref) {
     "aria-live": "polite",
     "aria-relevant": "text additions"
   }, itemsLoadedText);
-}
-LoadingStatus.propTypes = {
-  loader: shape({
-    lastRecordsLoaded: number.isRequired
-  }).isRequired
-};
+}

package/es/common/indicate.js

@@ -22,8 +22,7 @@ import { StyleSheet, css } from 'aphrodite';
 const MARGIN = 3;
 
 // show the indicator over the target with specified margin
-export default function indicate(region) {
-  let margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MARGIN;
+export default function indicate(region, margin = MARGIN) {
   const el = document.createElement('div');
 
   // add margin to region and lift it in front

package/es/defaultTinymceConfig.js

@@ -74,7 +74,7 @@ const defaultTinymceConfig = {
   //
   // this list needs to be kept in sync with the list in gems/canvas_sanitize/lib/canvas_sanitize/canvas_sanitize.rb
   valid_elements: '@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|role],a[rel|rev|charset|hreflang|tabindex|accesskey|type|name|href|target|title|class|data-old-link],strong/b,em/i,strike/s,u,#p,-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|src|border|alt|title|hspace|vspace|width|height|align|role|data-old-link],-sub,-sup,-blockquote[cite],-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width|height|src|*],map[name],area[shape|coords|href|alt|target],bdo,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|valign|width],dfn,kbd,q[cite],samp,small,tt,var,big,figure,figcaption,source[media|width|height|sizes|src|srcset|type|data-old-link],track,mark,article,aside,details,footer,header,nav,section,summary,time',
-  extended_valid_elements: '@[id|accesskey|class|dir|lang|style|tabindex|title|contenteditable|contextmenu|draggable|dropzone|hidden|longdesc|spellcheck|translate|align|role|aria-labelledby|aria-atomic|aria-busy|aria-controls|aria-describedby|aria-disabled|aria-dropeffect|aria-flowto|aria-grabbed|aria-haspopup|aria-hidden|aria-invalid|aria-label|aria-labelledby|aria-live|aria-owns|aria-relevant|aria-autocomplete|aria-checked|aria-disabled|aria-expanded|aria-haspopup|aria-hidden|aria-invalid|aria-label|aria-level|aria-multiline|aria-multiselectable|aria-orientation|aria-pressed|aria-readonly|aria-required|aria-selected|aria-sort|aria-valuemax|aria-valuemin|aria-valuenow|aria-valuetext],iframe[id|data-media-type|title|src|width|height|name|align|style|class|sandbox|allowfullscreen|webkitallowfullscreen|mozallowfullscreen|allow|data-old-link],i[iclass],a[hidden|href|target|rel|media|hreflang|type|charset|name|rev|shape|coords|download|alt],#p,li[value],-ol[reversed|start|type|compact],pre[width],table[border|summary|width|frame|rules|cellspacing|cellpadding|bgcolor],tbody[char|charoff|valign],td[colspan|rowspan|headers|abbr|axis|scope|align|char|charoff|valign|nowrap|bgcolor|width|height],tfoot[char|charoff|valign],th[colspan|rowspan|headers|scope|abbr|axis|align|char|charoff|valign|nowrap|bgcolor|width|height],thead[char|charoff|valign],tr[char|charoff|valign|bgcolor],-ul[compact],video[name|src|allowfullscreen|muted|poster|width|height|controls|playsinline],audio[name|src|muted|controls],annotation[href|xref|definitionURL|encoding|cd|name|src],annotation-xml[href|xref|definitionURL|encoding|cd|name|src],maction[href|xref|mathcolor|mathbackground|actiontype|selection],maligngroup[href|xref|mathcolor|mathbackground|groupalign],malignmark[href|xref|mathcolor|mathbackground|edge],math[xmlns|href|xref|display|maxwidth|overflow|altimg|altimg-width|altimg-height|altimg-valign|alttext|cdgroup|mathcolor|mathbackground|scriptlevel|displaystyle|scriptsizemultiplier|scriptminsize|infixlinebreakstyle|decimalpoint|mathvariant|mathsize|width|height|valign|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast|depth|lquote|rquote|linethickness|munalign|denomalign|bevelled|voffset|open|close|separators|notation|subscriptshift|superscriptshift|accentunder|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|side|minlabelspacing|rowspan|columnspan|edge|stackalign|charalign|charspacing|longdivstyle|position|shift|location|crossout|length|leftoverhang|rightoverhang|mslinethickness|selection],menclose[href|xref|mathcolor|mathbackground|notation],merror[href|xref|mathcolor|mathbackground],mfenced[href|xref|mathcolor|mathbackground|open|close|separators],mfrac[href|xref|mathcolor|mathbackground|linethickness|munalign|denomalign|bevelled],mglyph[href|xref|mathcolor|mathbackground|src|alt|width|height|valign],mi[href|xref|mathcolor|mathbackground|mathvariant|mathsize],mlabeledtr[href|xref|mathcolor|mathbackground],mlongdiv[href|xref|mathcolor|mathbackground|longdivstyle|align|stackalign|charalign|charspacing],mmultiscripts[href|xref|mathcolor|mathbackground|subscriptshift|superscriptshift],mn[href|xref|mathcolor|mathbackground|mathvariant|mathsize],mo[href|xref|mathcolor|mathbackground|mathvariant|mathsize|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast],mover[href|xref|mathcolor|mathbackground|accent|align],mpadded[href|xref|mathcolor|mathbackground|height|depth|width|lspace|voffset],mphantom[href|xref|mathcolor|mathbackground],mprescripts[href|xref|mathcolor|mathbackground],mroot[href|xref|mathcolor|mathbackground],mrow[href|xref|mathcolor|mathbackground],ms[href|xref|mathcolor|mathbackground|mathvariant|mathsize|lquote|rquote],mscarries[href|xref|mathcolor|mathbackground|position|location|crossout|scriptsizemultiplier],mscarry[href|xref|mathcolor|mathbackground|location|crossout],msgroup[href|xref|mathcolor|mathbackground|position|shift],msline[href|xref|mathcolor|mathbackground|position|length|leftoverhang|rightoverhang|mslinethickness],mspace[href|xref|mathcolor|mathbackground|mathvariant|mathsize],msqrt[href|xref|mathcolor|mathbackground],msrow[href|xref|mathcolor|mathbackground|position],mstack[href|xref|mathcolor|mathbackground|align|stackalign|charalign|charspacing],mstyle[href|xref|mathcolor|mathbackground|scriptlevel|displaystyle|scriptsizemultiplier|scriptminsize|infixlinebreakstyle|decimalpoint|mathvariant|mathsize|width|height|valign|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast|depth|lquote|rquote|linethickness|munalign|denomalign|bevelled|voffset|open|close|separators|notation|subscriptshift|superscriptshift|accentunder|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|side|minlabelspacing|rowspan|columnspan|edge|stackalign|charalign|charspacing|longdivstyle|position|shift|location|crossout|length|leftoverhang|rightoverhang|mslinethickness|selection],msub[href|xref|mathcolor|mathbackground|subscriptshift],msubsup[href|xref|mathcolor|mathbackground|subscriptshift|superscriptshift],msup[href|xref|mathcolor|mathbackground|superscriptshift],mtable[href|xref|mathcolor|mathbackground|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|width|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|displaystyle|side|minlabelspacing],mtd[href|xref|mathcolor|mathbackground|rowspan|columnspan|rowalign|columnalign|groupalign],mtext[href|xref|mathcolor|mathbackground|mathvariant|mathsize|width|height|depth|linebreak],mtr[href|xref|mathcolor|mathbackground|rowalign|columnalign|groupalign],munder[href|xref|mathcolor|mathbackground|accentunder|align],munderover[href|xref|mathcolor|mathbackground|accent|accentunder|align],none[href|xref|mathcolor|mathbackground],semantics[href|xref|definitionURL|encoding],picture,ruby,rp,rt,wbr' +
+  extended_valid_elements: '@[id|accesskey|class|dir|lang|style|tabindex|title|contenteditable|contextmenu|draggable|dropzone|hidden|longdesc|spellcheck|translate|align|role|aria-labelledby|aria-atomic|aria-busy|aria-controls|aria-describedby|aria-disabled|aria-dropeffect|aria-flowto|aria-grabbed|aria-haspopup|aria-hidden|aria-invalid|aria-label|aria-labelledby|aria-live|aria-owns|aria-relevant|aria-autocomplete|aria-checked|aria-disabled|aria-expanded|aria-haspopup|aria-hidden|aria-invalid|aria-label|aria-level|aria-multiline|aria-multiselectable|aria-orientation|aria-pressed|aria-readonly|aria-required|aria-selected|aria-sort|aria-valuemax|aria-valuemin|aria-valuenow|aria-valuetext],iframe[id|data-media-type|title|src|width|height|name|align|style|class|sandbox|loading|allowfullscreen|webkitallowfullscreen|mozallowfullscreen|allow|data-old-link],i[iclass],a[hidden|href|target|rel|media|hreflang|type|charset|name|rev|shape|coords|download|alt],#p,li[value],-ol[reversed|start|type|compact],pre[width],table[border|summary|width|frame|rules|cellspacing|cellpadding|bgcolor],tbody[char|charoff|valign],td[colspan|rowspan|headers|abbr|axis|scope|align|char|charoff|valign|nowrap|bgcolor|width|height],tfoot[char|charoff|valign],th[colspan|rowspan|headers|scope|abbr|axis|align|char|charoff|valign|nowrap|bgcolor|width|height],thead[char|charoff|valign],tr[char|charoff|valign|bgcolor],-ul[compact],video[name|src|allowfullscreen|muted|poster|width|height|controls|playsinline],audio[name|src|muted|controls],annotation[href|xref|definitionURL|encoding|cd|name|src],annotation-xml[href|xref|definitionURL|encoding|cd|name|src],maction[href|xref|mathcolor|mathbackground|actiontype|selection],maligngroup[href|xref|mathcolor|mathbackground|groupalign],malignmark[href|xref|mathcolor|mathbackground|edge],math[xmlns|href|xref|display|maxwidth|overflow|altimg|altimg-width|altimg-height|altimg-valign|alttext|cdgroup|mathcolor|mathbackground|scriptlevel|displaystyle|scriptsizemultiplier|scriptminsize|infixlinebreakstyle|decimalpoint|mathvariant|mathsize|width|height|valign|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast|depth|lquote|rquote|linethickness|munalign|denomalign|bevelled|voffset|open|close|separators|notation|subscriptshift|superscriptshift|accentunder|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|side|minlabelspacing|rowspan|columnspan|edge|stackalign|charalign|charspacing|longdivstyle|position|shift|location|crossout|length|leftoverhang|rightoverhang|mslinethickness|selection],menclose[href|xref|mathcolor|mathbackground|notation],merror[href|xref|mathcolor|mathbackground],mfenced[href|xref|mathcolor|mathbackground|open|close|separators],mfrac[href|xref|mathcolor|mathbackground|linethickness|munalign|denomalign|bevelled],mglyph[href|xref|mathcolor|mathbackground|src|alt|width|height|valign],mi[href|xref|mathcolor|mathbackground|mathvariant|mathsize],mlabeledtr[href|xref|mathcolor|mathbackground],mlongdiv[href|xref|mathcolor|mathbackground|longdivstyle|align|stackalign|charalign|charspacing],mmultiscripts[href|xref|mathcolor|mathbackground|subscriptshift|superscriptshift],mn[href|xref|mathcolor|mathbackground|mathvariant|mathsize],mo[href|xref|mathcolor|mathbackground|mathvariant|mathsize|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast],mover[href|xref|mathcolor|mathbackground|accent|align],mpadded[href|xref|mathcolor|mathbackground|height|depth|width|lspace|voffset],mphantom[href|xref|mathcolor|mathbackground],mprescripts[href|xref|mathcolor|mathbackground],mroot[href|xref|mathcolor|mathbackground],mrow[href|xref|mathcolor|mathbackground],ms[href|xref|mathcolor|mathbackground|mathvariant|mathsize|lquote|rquote],mscarries[href|xref|mathcolor|mathbackground|position|location|crossout|scriptsizemultiplier],mscarry[href|xref|mathcolor|mathbackground|location|crossout],msgroup[href|xref|mathcolor|mathbackground|position|shift],msline[href|xref|mathcolor|mathbackground|position|length|leftoverhang|rightoverhang|mslinethickness],mspace[href|xref|mathcolor|mathbackground|mathvariant|mathsize],msqrt[href|xref|mathcolor|mathbackground],msrow[href|xref|mathcolor|mathbackground|position],mstack[href|xref|mathcolor|mathbackground|align|stackalign|charalign|charspacing],mstyle[href|xref|mathcolor|mathbackground|scriptlevel|displaystyle|scriptsizemultiplier|scriptminsize|infixlinebreakstyle|decimalpoint|mathvariant|mathsize|width|height|valign|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast|depth|lquote|rquote|linethickness|munalign|denomalign|bevelled|voffset|open|close|separators|notation|subscriptshift|superscriptshift|accentunder|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|side|minlabelspacing|rowspan|columnspan|edge|stackalign|charalign|charspacing|longdivstyle|position|shift|location|crossout|length|leftoverhang|rightoverhang|mslinethickness|selection],msub[href|xref|mathcolor|mathbackground|subscriptshift],msubsup[href|xref|mathcolor|mathbackground|subscriptshift|superscriptshift],msup[href|xref|mathcolor|mathbackground|superscriptshift],mtable[href|xref|mathcolor|mathbackground|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|width|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|displaystyle|side|minlabelspacing],mtd[href|xref|mathcolor|mathbackground|rowspan|columnspan|rowalign|columnalign|groupalign],mtext[href|xref|mathcolor|mathbackground|mathvariant|mathsize|width|height|depth|linebreak],mtr[href|xref|mathcolor|mathbackground|rowalign|columnalign|groupalign],munder[href|xref|mathcolor|mathbackground|accentunder|align],munderover[href|xref|mathcolor|mathbackground|accent|accentunder|align],none[href|xref|mathcolor|mathbackground],semantics[href|xref|definitionURL|encoding],picture,ruby,rp,rt,wbr' +
   // the svg necessary for the uploading placeholder's spinner
   'svg[*],g[*],circle[*]',
   non_empty_elements: 'td th iframe video audio object script a i area base basefont br col frame hr img input isindex link meta param embed source wbr track ruby',

package/es/enhance-user-content/doc_previews.js

@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import formatMessage from '../format-message';
 import { Spinner } from '@instructure/ui-spinner';
 import { getData, setData } from './jqueryish_funcs';
@@ -39,8 +39,7 @@ export function isPreviewable(mimeType) {
 //
 // $link: the DOM node that serves as the reference for locating the spinner
 // position: one of 'adjacent' or 'centered'
-export function showLoadingImage($link) {
-  let position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'adjacent';
+export function showLoadingImage($link, position = 'adjacent') {
   const dir = $link && window.getComputedStyle($link).direction || 'ltr';
   const boundingBox = $link.getBoundingClientRect();
   const offsetLeft = boundingBox.left + (position === 'adjacent' ? dir === 'ltr' ? boundingBox.width : -24 : boundingBox.width / 2);
@@ -64,18 +63,22 @@ export function showLoadingImage($link) {
     $imageHolder.setAttribute('style', `z-index:${zIndex}; position: absolute; top: ${top}; left: ${left}; margin-inline-start:${imageMarginInlineStart}; margin-top: ${imageMarginTop}`);
     $link.appendChild($imageHolder);
   }
-  ReactDOM.render(/*#__PURE__*/React.createElement(Spinner, {
+  const root = createRoot($imageHolder);
+  root.render(/*#__PURE__*/React.createElement(Spinner, {
     size: "x-small",
     renderTitle: formatMessage('Loading')
-  }), $imageHolder);
+  }));
   return $link;
 }
 export function removeLoadingImage($link) {
-  var _$link$querySelector;
-  (_$link$querySelector = $link.querySelector('.loading_image')) === null || _$link$querySelector === void 0 ? void 0 : _$link$querySelector.remove();
+  $link.querySelector('.loading_image')?.remove();
   const list = getData($link, 'loading_images') || [];
   list.forEach(item => {
     if (item) {
+      const root = item._reactRoot;
+      if (root) {
+        root.unmount();
+      }
       item.remove();
     }
   });
@@ -174,7 +177,6 @@ export function loadDocPreview($container, options) {
         }
       }
       showLoadingImage($container, 'centered');
-      // eslint-disable-next-line promise/catch-or-return
       fetch(url).then(response => {
         if (!response.ok) throw new Error(`${response.status}: ${response.statusText}`);
         return response;
@@ -187,7 +189,6 @@ export function loadDocPreview($container, options) {
           loadGooglePreview();
         }
       }).catch(ex => {
-        // eslint-disable-next-line no-console
         console.error(ex);
       }).finally(() => {
         removeLoadingImage($container);
@@ -214,7 +215,6 @@ export function sanitizeUrl(url) {
   const defaultUrl = 'about:blank';
   try {
     const parsedUrl = new URL(url, window.location.origin);
-    // eslint-disable-next-line no-script-url
     if (parsedUrl.protocol === 'javascript:') {
       return defaultUrl;
     }

package/es/enhance-user-content/enhance_user_content.js

@@ -27,7 +27,7 @@ import { makeExternalLinkIcon } from './external_links';
 import getTranslations from '../getTranslations';
 
 // in jest the es directory doesn't exist so stub the undefined svg
-const IconDownloadSVG = (IconDownloadLine === null || IconDownloadLine === void 0 ? void 0 : IconDownloadLine.src) || '<svg></svg>';
+const IconDownloadSVG = IconDownloadLine?.src || '<svg></svg>';
 function makeDownloadButton(download_url, filename) {
   const a = document.createElement('a');
   a.setAttribute('class', 'file_download_btn');
@@ -109,22 +109,19 @@ function buildUrl(url) {
 }
 const addResourceIdentifiersToStudioContent = content => {
   content.querySelectorAll('iframe.lti-embed').forEach(iframe => {
-    var _userContentContainer, _userContentContainer2;
     const url = buildUrl(iframe.getAttribute('src'));
     if (!url || !url.pathname.includes('external_tools/retrieve') || !url.search.includes('instructuremedia.com') || !url.search.includes('custom_arc_media_id')) {
       return;
     }
     const userContentContainer = iframe.closest('.user_content');
-    if (userContentContainer !== null && userContentContainer !== void 0 && (_userContentContainer = userContentContainer.dataset) !== null && _userContentContainer !== void 0 && _userContentContainer.resourceType && userContentContainer !== null && userContentContainer !== void 0 && (_userContentContainer2 = userContentContainer.dataset) !== null && _userContentContainer2 !== void 0 && _userContentContainer2.resourceId) {
+    if (userContentContainer?.dataset?.resourceType && userContentContainer?.dataset?.resourceId) {
       url.searchParams.set('com_instructure_course_canvas_resource_type', userContentContainer.dataset.resourceType);
       url.searchParams.set('com_instructure_course_canvas_resource_id', userContentContainer.dataset.resourceId);
       iframe.src = url.href;
     }
   });
 };
-export function enhanceUserContent() {
-  let container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-  let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+export function enhanceUserContent(container = document, opts = {}) {
   const {
     customEnhanceFunc,
     canvasOrigin,
@@ -330,7 +327,7 @@ export function enhanceUserContent() {
   unenhanced_anchors.forEach($anchor => {
     $anchor.querySelectorAll('img.media_comment_thumbnail').forEach($thumbnail => {
       const a = closest($thumbnail, 'a', content);
-      a === null || a === void 0 ? void 0 : a.classList.add('instructure_inline_media_comment');
+      a?.classList.add('instructure_inline_media_comment');
     });
     if ($anchor.matches('.instructure_inline_media_comment')) {
       $anchor.classList.remove('no-underline');

package/es/enhance-user-content/external_links.js

@@ -19,7 +19,7 @@
 import { IconExternalLinkLine } from '@instructure/ui-icons/es/svg';
 import { getTld } from './instructure_helper';
 import formatMessage from '../format-message';
-const IconExternalLinkSVG = (IconExternalLinkLine === null || IconExternalLinkLine === void 0 ? void 0 : IconExternalLinkLine.src) || '<svg></svg>';
+const IconExternalLinkSVG = IconExternalLinkLine?.src || '<svg></svg>';
 export function makeExternalLinkIcon(forLink) {
   const dir = forLink && window.getComputedStyle(forLink).direction || 'ltr';
   const $icon = document.createElement('span');

package/es/enhance-user-content/instructure_helper.js

@@ -35,8 +35,7 @@ export function getTld(hostname) {
     length = parts.length;
   return (length > 1 ? [parts[length - 2], parts[length - 1]] : parts).join('.');
 }
-export function isExternalLink(element) {
-  let canvasOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.origin;
+export function isExternalLink(element, canvasOrigin = window.location.origin) {
   let canvasHost;
   try {
     canvasHost = new URL(canvasOrigin).hostname;
@@ -47,9 +46,7 @@ export function isExternalLink(element) {
   // if a browser doesnt support <a>.hostname then just dont mark anything as external, better to not get false positives.
   return !!(href && href.length && !href.match(/^(mailto\:|javascript\:)/) && element.hostname && getTld(element.hostname) !== getTld(canvasHost));
 }
-export function showFilePreview(event) {
-  var _event$target, _event$currentTarget;
-  let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+export function showFilePreview(event, opts = {}) {
   event.stopPropagation();
   const {
     canvasOrigin,
@@ -58,9 +55,9 @@ export function showFilePreview(event) {
     ...opts
   };
   let target = null;
-  if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.href) {
+  if (event.target?.href) {
     target = event.target;
-  } else if ((_event$currentTarget = event.currentTarget) !== null && _event$currentTarget !== void 0 && _event$currentTarget.href) {
+  } else if (event.currentTarget?.href) {
     target = event.currentTarget;
   } else {
     return;
@@ -75,14 +72,13 @@ export function showFilePreview(event) {
   }
 }
 export function showFilePreviewInOverlay(event, canvasOrigin) {
-  var _event$target2, _event$currentTarget2, _target;
   let target = null;
-  if ((_event$target2 = event.target) !== null && _event$target2 !== void 0 && _event$target2.href) {
+  if (event.target?.href) {
     target = event.target;
-  } else if ((_event$currentTarget2 = event.currentTarget) !== null && _event$currentTarget2 !== void 0 && _event$currentTarget2.href) {
+  } else if (event.currentTarget?.href) {
     target = event.currentTarget;
   }
-  const matches = (_target = target) === null || _target === void 0 ? void 0 : _target.href.match(/\/files\/(\d+~\d+|\d+)/);
+  const matches = target?.href.match(/\/files\/(\d+~\d+|\d+)/);
   if (matches) {
     if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
       // if any modifier keys are pressed, do the browser default thing
@@ -90,9 +86,9 @@ export function showFilePreviewInOverlay(event, canvasOrigin) {
     }
     event.preventDefault();
     const url = new URL(target.href);
-    const verifier = url === null || url === void 0 ? void 0 : url.searchParams.get('verifier');
-    const access_token = url === null || url === void 0 ? void 0 : url.searchParams.get('access_token');
-    const instfs_id = url === null || url === void 0 ? void 0 : url.searchParams.get('instfs_id');
+    const verifier = url?.searchParams.get('verifier');
+    const access_token = url?.searchParams.get('access_token');
+    const instfs_id = url?.searchParams.get('instfs_id');
     const file_id = matches[1];
     const params = {
       subject: 'preview_file',
@@ -144,8 +140,7 @@ export function showFilePreviewInline(event, canvasOrigin, disableGooglePreviews
     if (attachment && (!disableGooglePreviews && isPreviewable(attachment.content_type) || canvadoc_session_url)) {
       $link.setAttribute('aria-expanded', 'true');
       if (canvasOrigin && canvadoc_session_url !== null) {
-        var _parseUrlOrNull;
-        canvadoc_session_url = (_parseUrlOrNull = parseUrlOrNull(canvadoc_session_url, canvasOrigin)) === null || _parseUrlOrNull === void 0 ? void 0 : _parseUrlOrNull.toString();
+        canvadoc_session_url = parseUrlOrNull(canvadoc_session_url, canvasOrigin)?.toString();
       }
       const $div = document.querySelector(`[id="${$link.getAttribute('aria-controls')}"]`);
       $div.style.display = 'block';
@@ -177,7 +172,6 @@ export function showFilePreviewInline(event, canvasOrigin, disableGooglePreviews
       message: formatMessage('Failed getting file contents'),
       type: 'error'
     });
-    // eslint-disable-next-line no-console
     console.error(ex);
     resetInlinePreview($link);
     removeLoadingImage($link);