@instructure/canvas-rce 5.14.2 → 5.15.1

package/es/rce/plugins/instructure_record/AudioOptionsTray/TrayController.js

@@ -83,25 +83,21 @@ export default class TrayController {
       media_object_id: audioOptions.media_object_id,
       subtitles: audioOptions.subtitles,
       attachment_id: audioOptions.attachment_id
-    }).then(() => container === null || container === void 0 ? void 0 : container.contentWindow.location.reload()).catch(ex => {
-      // eslint-disable-next-line no-console
+    }).then(() => container?.contentWindow.location.reload()).catch(ex => {
       console.error('Failed updating audio captions', ex);
     });
   }
   requestSubtitlesFromIframe(cb) {
-    var _this$_audioContainer, _this$_audioContainer2;
     if (!bridge.canvasOrigin) return;
     this._subtitleListener = new AbortController();
     window.addEventListener('message', event => {
-      var _event$data;
-      if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === 'media_tracks_response') {
-        var _event$data2;
-        cb(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : _event$data2.payload);
+      if (event?.data?.subject === 'media_tracks_response') {
+        cb(event?.data?.payload);
       }
     }, {
       signal: this._subtitleListener.signal
     });
-    (_this$_audioContainer = this._audioContainer) === null || _this$_audioContainer === void 0 ? void 0 : (_this$_audioContainer2 = _this$_audioContainer.contentWindow) === null || _this$_audioContainer2 === void 0 ? void 0 : _this$_audioContainer2.postMessage({
+    this._audioContainer?.contentWindow?.postMessage({
       subject: 'media_tracks_request'
     }, bridge.canvasOrigin);
   }
@@ -113,10 +109,9 @@ export default class TrayController {
         this._isOpen = true;
       },
       onExited: () => {
-        var _this$_subtitleListen;
         bridge.focusActiveEditor(false);
         this._isOpen = false;
-        (_this$_subtitleListen = this._subtitleListener) === null || _this$_subtitleListen === void 0 ? void 0 : _this$_subtitleListen.abort();
+        this._subtitleListener?.abort();
       },
       onSave: options => {
         this._applyAudioOptions(options);

package/es/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -27,20 +27,19 @@ import { StoreProvider } from '../../shared/StoreContext';
 import Bridge from '../../../../bridge';
 import formatMessage from '../../../../format-message';
 import { getTrayHeight } from '../../shared/trayUtils';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 import { Heading } from '@instructure/ui-heading';
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
-export default function AudioOptionsTray(_ref) {
-  let {
-    open,
-    onEntered,
-    onExited,
-    onDismiss,
-    onSave,
-    trayProps,
-    audioOptions,
-    requestSubtitlesFromIframe
-  } = _ref;
+export default function AudioOptionsTray({
+  open,
+  onEntered,
+  onExited,
+  onDismiss,
+  onSave,
+  trayProps,
+  audioOptions,
+  requestSubtitlesFromIframe
+}) {
   const [subtitles, setSubtitles] = useState(audioOptions.tracks || []);
   useEffect(() => {
     if (subtitles.length === 0) requestSubtitlesFromIframe(setSubtitles);
@@ -57,7 +56,7 @@ export default function AudioOptionsTray(_ref) {
     key: "audio-options-tray",
     "data-mce-component": true,
     label: formatMessage('Audio Options Tray'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     onDismiss: onDismiss,
     onEntered: onEntered,
     onExited: onExited,

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -68,15 +68,13 @@ export default class TrayController {
     }
   }
   _applyVideoOptions(videoOptions) {
-    var _this$$videoContainer;
-    if (((_this$$videoContainer = this.$videoContainer) === null || _this$$videoContainer === void 0 ? void 0 : _this$$videoContainer.tagName) === 'IFRAME') {
+    if (this.$videoContainer?.tagName === 'IFRAME') {
       const $tinymceIframeShim = this.$videoContainer.parentElement;
       if (videoOptions.displayAs === 'embed') {
-        var _videoOptions$subtitl;
         const isVertical = videoOptions.appliedHeight > videoOptions.appliedWidth;
         // player v5 requires more space for the CC button
         // TODO: remove when using v7
-        const minWidth = (_videoOptions$subtitl = videoOptions.subtitles) !== null && _videoOptions$subtitl !== void 0 && _videoOptions$subtitl.length ? 400 : 320;
+        const minWidth = videoOptions.subtitles?.length ? 400 : 320;
         const styl = {
           height: `${videoOptions.appliedHeight}px`,
           width: `${Math.max(minWidth, isVertical ? videoOptions.appliedHeight : videoOptions.appliedWidth)}px`
@@ -130,7 +128,7 @@ export default class TrayController {
             }, bridge.canvasOrigin);
           }
         }).catch(ex => {
-          console.error('failed updating video captions', ex); // eslint-disable-line no-console
+          console.error('failed updating video captions', ex);
         });
       }
     }
@@ -138,27 +136,23 @@ export default class TrayController {
   }
   _dismissTray() {
     if (this.$videoContainer) {
-      var _this$_editor, _this$_editor$selecti;
-      (_this$_editor = this._editor) === null || _this$_editor === void 0 ? void 0 : (_this$_editor$selecti = _this$_editor.selection) === null || _this$_editor$selecti === void 0 ? void 0 : _this$_editor$selecti.select(this.$videoContainer);
+      this._editor?.selection?.select(this.$videoContainer);
     }
     this._shouldOpen = false;
     this._renderTray();
     this._editor = null;
   }
   requestSubtitlesFromIframe(cb) {
-    var _this$$videoContainer2, _this$$videoContainer3;
     if (!bridge.canvasOrigin) return;
     this._subtitleListener = new AbortController();
     window.addEventListener('message', event => {
-      var _event$data;
-      if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === 'media_tracks_response') {
-        var _event$data2;
-        cb(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : _event$data2.payload);
+      if (event?.data?.subject === 'media_tracks_response') {
+        cb(event?.data?.payload);
       }
     }, {
       signal: this._subtitleListener.signal
     });
-    (_this$$videoContainer2 = this.$videoContainer) === null || _this$$videoContainer2 === void 0 ? void 0 : (_this$$videoContainer3 = _this$$videoContainer2.contentWindow) === null || _this$$videoContainer3 === void 0 ? void 0 : _this$$videoContainer3.postMessage({
+    this.$videoContainer?.contentWindow?.postMessage({
       subject: 'media_tracks_request'
     }, bridge.canvasOrigin);
   }
@@ -181,10 +175,9 @@ export default class TrayController {
         this._isOpen = true;
       },
       onExited: () => {
-        var _this$_subtitleListen;
         bridge.focusActiveEditor(false);
         this._isOpen = false;
-        (_this$_subtitleListen = this._subtitleListener) === null || _this$_subtitleListen === void 0 ? void 0 : _this$_subtitleListen.abort();
+        this._subtitleListener?.abort();
       },
       onSave: videoOptions => {
         this._applyVideoOptions(videoOptions);

package/es/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -38,23 +38,22 @@ import RceApiSource from '../../../../rcs/api';
 import formatMessage from '../../../../format-message';
 import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInput';
 import { getTrayHeight } from '../../shared/trayUtils';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
-export default function VideoOptionsTray(_ref) {
-  let {
-    videoOptions,
-    onRequestClose,
-    onSave,
-    open,
-    trayProps,
-    requestSubtitlesFromIframe = () => {},
-    onEntered = null,
-    onExited = null,
-    id = 'video-options-tray',
-    studioOptions = null,
-    forBlockEditorUse = false
-  } = _ref;
+export default function VideoOptionsTray({
+  videoOptions,
+  onRequestClose,
+  onSave,
+  open,
+  trayProps,
+  requestSubtitlesFromIframe = () => {},
+  onEntered = null,
+  onExited = null,
+  id = 'video-options-tray',
+  studioOptions = null,
+  forBlockEditorUse = false
+}) {
   const {
     naturalHeight,
     naturalWidth
@@ -86,7 +85,7 @@ export default function VideoOptionsTray(_ref) {
       api.getFile(videoOptions.attachmentId, {
         include: ['blueprint_course_status']
       }).then(response => {
-        setEditLocked((response === null || response === void 0 ? void 0 : response.restricted_by_master_course) && (response === null || response === void 0 ? void 0 : response.is_master_course_child_content));
+        setEditLocked(response?.restricted_by_master_course && response?.is_master_course_child_content);
         setLoading(false);
       }).catch(error => {
         setLoading(false);
@@ -175,7 +174,7 @@ export default function VideoOptionsTray(_ref) {
     key: "video-options-tray",
     "data-mce-component": true,
     label: isStudio ? formatMessage('Studio Media Options Tray') : formatMessage('Video Options Tray'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     onDismiss: onRequestClose,
     onEntered: onEntered,
     onExited: onExited,
@@ -207,7 +206,7 @@ export default function VideoOptionsTray(_ref) {
     margin: "xx-large",
     padding: "xx-large"
   }, /*#__PURE__*/React.createElement(Spinner, {
-    renderTitle: formatMessage("Loading")
+    renderTitle: formatMessage('Loading')
   })) : /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     shouldGrow: true,
@@ -261,7 +260,7 @@ export default function VideoOptionsTray(_ref) {
     padding: "small small xx-small small"
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     id: `${id}-size`,
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     disabled: displayAs !== 'embed',
     renderLabel: formatMessage('Size'),
     messages: messagesForSize,
@@ -298,7 +297,7 @@ export default function VideoOptionsTray(_ref) {
     userLocale: Bridge.userLocale,
     updateSubtitles: handleUpdateSubtitles,
     liveRegion: getLiveRegion,
-    mountNode: instuiPopupMountNode
+    mountNode: instuiPopupMountNodeFn
   }))))), /*#__PURE__*/React.createElement(Flex.Item, {
     background: "secondary",
     borderWidth: "small none none none",

package/es/rce/plugins/instructure_record/clickCallback.js

@@ -22,11 +22,11 @@ import Bridge from '../../../bridge';
 import { StoreProvider } from '../shared/StoreContext';
 import formatMessage from '../../../format-message';
 import { headerFor, originFromHost } from '../../../rcs/api';
-import { instuiPopupMountNode } from '../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../util/fullscreenHelpers';
 import RCEGlobals from '../../RCEGlobals';
 export const handleUpload = (error, uploadData, onUploadComplete, uploadBookmark) => {
   let err_msg = error && Bridge.uploadMediaTranslations.UploadMediaStrings.UPLOADING_ERROR;
-  if ((error === null || error === void 0 ? void 0 : error.name) === 'FileSizeError') {
+  if (error?.name === 'FileSizeError') {
     err_msg = formatMessage('Size of caption file is greater than the maximum {max} kb allowed file size.', {
       max: error.maxBytes / 1000
     });
@@ -64,39 +64,35 @@ export default function (ed, document) {
     // but it also does the upload. We need to separate them if we
     // want to stay within the redux approach
     const handleStartUpload = fileProps => {
-      var _editorComponent$edit;
       Bridge.focusEditor(ed.rceWrapper);
       const editorComponent = Bridge.activeEditor();
-      uploadBookmark = editorComponent === null || editorComponent === void 0 ? void 0 : (_editorComponent$edit = editorComponent.editor) === null || _editorComponent$edit === void 0 ? void 0 : _editorComponent$edit.selection.getBookmark(2, true);
+      uploadBookmark = editorComponent?.editor?.selection.getBookmark(2, true);
       Bridge.insertImagePlaceholder(fileProps);
       handleDismiss();
     };
     const trayProps = Bridge.trayProps.get(ed);
-    ReactDOM.render(/*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => {
-      var _RCEGlobals$getFeatur;
-      return /*#__PURE__*/React.createElement(UploadMedia, {
-        "data-mce-component": true,
-        rcsConfig: {
-          contextType: ed.settings.canvas_rce_user_context.type,
-          contextId: ed.settings.canvas_rce_user_context.id,
-          origin: originFromHost(contentProps.host),
-          headers: headerFor(contentProps.jwt)
-        },
-        userLocale: Bridge.userLocale,
-        mountNode: instuiPopupMountNode,
-        open: true,
-        liveRegion: () => document.getElementById('flash_screenreader_holder'),
-        onStartUpload: fileProps => handleStartUpload(fileProps),
-        onUploadComplete: (err, data) => handleUpload(err, data, contentProps.mediaUploadComplete, uploadBookmark),
-        onDismiss: handleDismiss,
-        tabs: {
-          record: true,
-          upload: true
-        },
-        uploadMediaTranslations: Bridge.uploadMediaTranslations,
-        media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id,
-        useStudioPlayer: (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) === null || _RCEGlobals$getFeatur === void 0 ? void 0 : _RCEGlobals$getFeatur.consolidated_media_player
-      });
-    }), container);
+    ReactDOM.render(/*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(UploadMedia, {
+      "data-mce-component": true,
+      rcsConfig: {
+        contextType: ed.settings.canvas_rce_user_context.type,
+        contextId: ed.settings.canvas_rce_user_context.id,
+        origin: originFromHost(contentProps.host),
+        headers: headerFor(contentProps.jwt)
+      },
+      userLocale: Bridge.userLocale,
+      mountNode: instuiPopupMountNodeFn,
+      open: true,
+      liveRegion: () => document.getElementById('flash_screenreader_holder'),
+      onStartUpload: fileProps => handleStartUpload(fileProps),
+      onUploadComplete: (err, data) => handleUpload(err, data, contentProps.mediaUploadComplete, uploadBookmark),
+      onDismiss: handleDismiss,
+      tabs: {
+        record: true,
+        upload: true
+      },
+      uploadMediaTranslations: Bridge.uploadMediaTranslations,
+      media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id,
+      useStudioPlayer: RCEGlobals.getFeatures()?.consolidated_media_player
+    })), container);
   });
 }

package/es/rce/plugins/instructure_search_and_replace/clickCallback.js

@@ -22,12 +22,11 @@ import FindReplaceController from './components/FindReplaceTrayController';
 import { getSelectionContext } from './getSelectionContext';
 const CONTAINER_ID = 'instructure-find-replace-tray-container';
 export default function (editor, document) {
-  var _editor$selection, _editor$selection2;
   const plugin = editor.plugins.searchreplace;
-  const initalSelection = (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getContent({
+  const initalSelection = editor.selection?.getContent({
     format: 'text'
   });
-  if (initalSelection) (_editor$selection2 = editor.selection) === null || _editor$selection2 === void 0 ? void 0 : _editor$selection2.collapse(true);
+  if (initalSelection) editor.selection?.collapse(true);
   let container = document.getElementById(CONTAINER_ID);
   if (container == null) {
     container = document.createElement('div');

package/es/rce/plugins/instructure_search_and_replace/components/FindReplaceTray.js

@@ -24,25 +24,24 @@ import { Heading } from '@instructure/ui-heading';
 import { IconWarningSolid } from '@instructure/ui-icons';
 import { getTrayHeight } from '../../shared/trayUtils';
 import { View } from '@instructure/ui-view';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 import formatMessage from '../../../../format-message';
 import { Tray } from '@instructure/ui-tray';
 import { TextInput } from '@instructure/ui-text-input';
 import { Text } from '@instructure/ui-text';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
-export default function FindReplaceTray(_ref) {
-  let {
-    onNext,
-    onPrevious,
-    onFind,
-    onRequestClose,
-    onReplace,
-    index,
-    max,
-    initialText = '',
-    selectionContext = ['', '']
-  } = _ref;
+export default function FindReplaceTray({
+  onNext,
+  onPrevious,
+  onFind,
+  onRequestClose,
+  onReplace,
+  index,
+  max,
+  initialText = '',
+  selectionContext = ['', '']
+}) {
   const [findText, setFindText] = useState(initialText);
   const [replaceText, setReplaceText] = useState('');
   const [hasOpened, setHasOpened] = useState(false);
@@ -54,13 +53,12 @@ export default function FindReplaceTray(_ref) {
   const srDupKey = useRef(0);
   // moves RCE when tray opens/closes, copied from CanvasContentTray
   useEffect(() => {
-    var _trayRef$current;
     if (!hasOpened) return;
     let c = document.querySelector('[role="main"]');
     let target_w = 0;
     if (!c) return;
     const margin = window.getComputedStyle(c).direction === 'ltr' ? document.body.getBoundingClientRect().right - c.getBoundingClientRect().right : c.getBoundingClientRect().left;
-    target_w = c.offsetWidth - ((_trayRef$current = trayRef.current) === null || _trayRef$current === void 0 ? void 0 : _trayRef$current.offsetWidth) + margin;
+    target_w = c.offsetWidth - trayRef.current?.offsetWidth + margin;
     if (target_w >= 320 && target_w < c.offsetWidth) {
       c.style.boxSizing = 'border-box';
       c.style.width = `${target_w}px`;
@@ -214,7 +212,7 @@ export default function FindReplaceTray(_ref) {
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
     label: formatMessage('Find and Replace'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn(),
     onDismiss: onRequestClose,
     open: true,
     placement: "end",

package/es/rce/plugins/instructure_search_and_replace/components/FindReplaceTrayController.js

@@ -19,14 +19,13 @@ import _pt from "prop-types";
 
 import React, { useState } from 'react';
 import FindReplaceTray from './FindReplaceTray';
-export default function FindReplaceTrayController(_ref) {
-  let {
-    plugin,
-    onDismiss,
-    initialText = '',
-    undoManager,
-    getSelectionContext
-  } = _ref;
+export default function FindReplaceTrayController({
+  plugin,
+  onDismiss,
+  initialText = '',
+  undoManager,
+  getSelectionContext
+}) {
   // this component really just exists to make the index easier to track
   const [findIndex, setFindIndex] = useState(0);
   const [findCount, setFindCount] = useState(0);
@@ -83,11 +82,9 @@ export default function FindReplaceTrayController(_ref) {
       updateSelectionContext();
     }
   };
-  const handleReplace = function (text) {
-    let forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    let all = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const handleReplace = (text, forward = true, all = false) => {
     if (!text) return;
-    undoManager === null || undoManager === void 0 ? void 0 : undoManager.add();
+    undoManager?.add();
     plugin.replace(text, forward, all);
     if (findCount === 1 || all) {
       done();

package/es/rce/plugins/instructure_search_and_replace/plugin.js

@@ -20,9 +20,8 @@ import tinymce from 'tinymce';
 import formatMessage from '../../../format-message';
 import clickCallback from './clickCallback';
 tinymce.PluginManager.add('instructure_search_and_replace', function (editor) {
-  var _editor$plugins;
   // We use the searchreplace plugins API
-  if (!((_editor$plugins = editor.plugins) !== null && _editor$plugins !== void 0 && _editor$plugins.searchreplace)) return;
+  if (!editor.plugins?.searchreplace) return;
   const launchFindModal = ed => () => {
     clickCallback(ed, document);
   };

package/es/rce/plugins/instructure_wordcount/clickCallback.js

@@ -21,10 +21,9 @@ import ReactDOM from 'react-dom';
 import { generateRows, HEADERS } from './utils/tableContent';
 const MODAL_ID = 'canvas-rce-wordcount-container';
 export default function (ed, document, options) {
-  return import('./components/WordCountModal').then(_ref => {
-    let {
-      WordCountModal
-    } = _ref;
+  return import('./components/WordCountModal').then(({
+    WordCountModal
+  }) => {
     let container = document.querySelector(`#${MODAL_ID}`);
     if (!container) {
       container = document.createElement('div');

package/es/rce/plugins/instructure_wordcount/components/WordCountModal.js

@@ -23,45 +23,38 @@ import { BaseButton, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { Table } from '@instructure/ui-table';
 import formatMessage from '../../../../format-message';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 const renderBody = (headers, rows) => {
   return /*#__PURE__*/React.createElement(Table, {
     caption: formatMessage('Word Count')
-  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, headers.map(_ref => {
-    let {
-      id,
-      getLabel
-    } = _ref;
-    return /*#__PURE__*/React.createElement(Table.ColHeader, {
-      key: id,
-      id: id
-    }, getLabel());
-  }))), /*#__PURE__*/React.createElement(Table.Body, null, rows.map(_ref2 => {
-    let {
-      label,
-      documentCount,
-      selectionCount
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(Table.Row, {
-      key: label
-    }, /*#__PURE__*/React.createElement(Table.Cell, {
-      key: "label"
-    }, label), /*#__PURE__*/React.createElement(Table.Cell, {
-      key: "document"
-    }, documentCount), /*#__PURE__*/React.createElement(Table.Cell, {
-      key: "selection"
-    }, selectionCount));
-  })));
+  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, headers.map(({
+    id,
+    getLabel
+  }) => /*#__PURE__*/React.createElement(Table.ColHeader, {
+    key: id,
+    id: id
+  }, getLabel())))), /*#__PURE__*/React.createElement(Table.Body, null, rows.map(({
+    label,
+    documentCount,
+    selectionCount
+  }) => /*#__PURE__*/React.createElement(Table.Row, {
+    key: label
+  }, /*#__PURE__*/React.createElement(Table.Cell, {
+    key: "label"
+  }, label), /*#__PURE__*/React.createElement(Table.Cell, {
+    key: "document"
+  }, documentCount), /*#__PURE__*/React.createElement(Table.Cell, {
+    key: "selection"
+  }, selectionCount)))));
 };
-export const WordCountModal = _ref3 => {
-  let {
-    headers,
-    rows,
-    onDismiss
-  } = _ref3;
+export const WordCountModal = ({
+  headers,
+  rows,
+  onDismiss
+}) => {
   return /*#__PURE__*/React.createElement(Modal, {
     label: formatMessage('Word Count'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn(),
     open: true,
     "data-mce-component": true
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {

package/es/rce/plugins/instructure_wordcount/utils/countContent.js

@@ -19,19 +19,19 @@
 export const IGNORE_WORDCOUNT_ATTRIBUTE = 'data-ignore-wordcount';
 export const countWords = node => {
   if (node.getAttribute(IGNORE_WORDCOUNT_ATTRIBUTE) === 'chars-only') return 0;
-  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const textContent = node?.innerText || '';
   const trimmedTextContent = textContent.trim();
   if (trimmedTextContent.length === 0) return 0;
   return trimmedTextContent.split(/\s+/).length;
 };
 export const countCharsNoSpaces = node => {
-  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const textContent = node?.innerText || '';
   const matches = textContent.match(/ /g); // a single space
   const spaces = matches ? matches.length : 0;
   return countChars(node) - spaces;
 };
 export const countChars = node => {
-  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const textContent = node?.innerText || '';
   const iterator = textContent[Symbol.iterator]();
   let count = 0;
   while (!iterator.next().done) {

package/es/rce/plugins/instructure_wordcount/utils/tableContent.js

@@ -30,12 +30,9 @@ export const HEADERS = [{
 }];
 const ROW_LABELS = [['words', () => formatMessage('Words')], ['chars-no-spaces', () => formatMessage('Characters (no spaces)')], ['chars', () => formatMessage('Characters')]];
 export const generateRows = ed => {
-  return ROW_LABELS.map(_ref => {
-    let [category, getLabel] = _ref;
-    return {
-      label: getLabel(),
-      documentCount: countContent(ed, 'body', category),
-      selectionCount: countContent(ed, 'selection', category)
-    };
-  });
+  return ROW_LABELS.map(([category, getLabel]) => ({
+    label: getLabel(),
+    documentCount: countContent(ed, 'body', category),
+    selectionCount: countContent(ed, 'selection', category)
+  }));
 };

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

@@ -163,13 +163,12 @@ export default function CanvasContentTray(props) {
     }
   }, [hasOpened]);
   useEffect(() => {
-    var _trayRef$current;
     if (!hasOpened) return;
     let c = document.querySelector('[role="main"]');
     let target_w = 0;
     if (!c) return;
     const margin = window.getComputedStyle(c).direction === 'ltr' ? document.body.getBoundingClientRect().right - c.getBoundingClientRect().right : c.getBoundingClientRect().left;
-    target_w = c.offsetWidth - ((_trayRef$current = trayRef.current) === null || _trayRef$current === void 0 ? void 0 : _trayRef$current.offsetWidth) + margin;
+    target_w = c.offsetWidth - trayRef.current?.offsetWidth + margin;
     if (target_w >= 320 && target_w < c.offsetWidth) {
       c.style.boxSizing = 'border-box';
       c.style.width = `${target_w}px`;
@@ -271,11 +270,11 @@ export default function CanvasContentTray(props) {
   function renderLinkDisplay() {
     return isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
       linkText: linkText,
-      placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
-      linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
-      published: (link === null || link === void 0 ? void 0 : link.published) || false,
+      placeholderText: link?.title || placeholderText,
+      linkFileName: link?.title || '',
+      published: link?.published || false,
       handleTextChange: setLinkText,
-      linkType: link === null || link === void 0 ? void 0 : link.type
+      linkType: link?.type
     });
   }
   return /*#__PURE__*/React.createElement(Tray, {
@@ -356,11 +355,6 @@ export default function CanvasContentTray(props) {
   }, storeProps)))), isEditTray && renderFooter())) : null));
 }
 CanvasContentTray.globalOpenCount = 0;
-function requiredWithoutSource(props, propName, componentName) {
-  if (props.source == null && props[propName] == null) {
-    throw new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`${props[propName]}\`.`);
-  }
-}
 
 // Changes made here may need to be reflected in the trayProps type in CanvasContentPanel
 const trayPropsMap = {
@@ -375,8 +369,8 @@ const trayPropsMap = {
     userId: string.isRequired
   }),
   filesTabDisabled: bool,
-  host: requiredWithoutSource,
-  jwt: requiredWithoutSource,
+  host: string,
+  jwt: string,
   refreshToken: func,
   source: shape({
     fetchImages: func.isRequired
@@ -397,12 +391,11 @@ CanvasContentTray.propTypes = {
 };
 
 // the way we define trayProps, eslint doesn't recognize the following as props
-/* eslint-disable react/default-props-match-prop-types */
+
 CanvasContentTray.defaultProps = {
   canUploadFiles: false,
   filesTabDisabled: false,
   refreshToken: null,
   source: null,
   themeUrl: null
-};
-/* eslint-enable react/default-props-match-prop-types */
+};