@instructure/canvas-rce 5.10.0 → 5.11.1

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

@@ -216,8 +216,16 @@ export function enhanceUserContent() {
           iframeElem.setAttribute('src', addParentFrameContextToUrl(src, containingCanvasLtiToolId));
         }
       });
-    }
+    } // tell LTI tools that they are launching from within the active RCE
+
+
+    unenhanced_elem.querySelectorAll('iframe[src]').forEach(iframeElem => {
+      const src = iframeElem.getAttribute('src');
 
+      if (src.startsWith(canvasOrigin)) {
+        iframeElem.setAttribute('src', src.replace('display=in_rce', 'display=borderless'));
+      }
+    });
     unenhanced_elem.querySelectorAll('a:not(.not_external, .external)').forEach(childLink => {
       if (!isExternalLink(childLink, canvasOrigin)) return;
       if (childLink.tagName === 'IMG' || childLink.querySelectorAll('img').length > 0) return;

package/lib/getThemeVars.js

@@ -15,8 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { ThemeRegistry } from '@instructure/ui-themeable'; // ^^ at InstUI 8, just directly import getRegistry directly from @instructure/theme-registry
-
+import { getRegistry } from '@instructure/theme-registry';
 import { merge, cloneDeep } from 'lodash'; // The running theme is the running theme for this page load, and it never
 // changes, so there's no point in doing the work more than once.
 
@@ -28,13 +27,13 @@ function getThemeVars() {
     defaultThemeKey,
     overrides,
     themes
-  } = ThemeRegistry.getRegistry(); // Just assume the "canvas" theme if the default key is null. This will
+  } = getRegistry(); // Just assume the "canvas" theme if the default key is null. This will
   // never happen in the live app because one way or another a theme gets
   // used, but unit tests don't always do that.
   // Also we have to cloneDeep this because the merge below is about to
   // mutate the whole thing.
 
-  const variables = cloneDeep(themes[defaultThemeKey !== null && defaultThemeKey !== void 0 ? defaultThemeKey : 'canvas'].variables);
+  const variables = cloneDeep(themes[defaultThemeKey !== null && defaultThemeKey !== void 0 ? defaultThemeKey : 'canvas']);
   merge(variables, overrides);
   memoizedVariables = {
     variables,

package/lib/rce/RCE.js

@@ -1,5 +1,3 @@
-var _process, _process$env;
-
 // @ts-nocheck
 
 /*
@@ -29,7 +27,7 @@ import tinyRCE from './tinyRCE';
 import getTranslations from '../getTranslations';
 import '@instructure/canvas-theme';
 
-if (!((_process = process) !== null && _process !== void 0 && (_process$env = _process.env) !== null && _process$env !== void 0 && _process$env.BUILD_LOCALE)) {
+if (!process || !process.env || !undefined) {
   formatMessage.setup({
     locale: 'en',
     generateId: require('format-message-generate-id/underscored_crc32'),

package/lib/rce/RCEWrapper.js

@@ -2714,67 +2714,9 @@ class RCEWrapper extends React.Component {
 
       this.checkAccessibility();
       this.fixToolbarKeyboardNavigation();
-      this.forwardPostMessages();
       (_this$props$onInitted = (_this$props = this.props).onInitted) === null || _this$props$onInitted === void 0 ? void 0 : _this$props$onInitted.call(_this$props, editor);
     };
 
-    this.forwardPostMessages = () => {
-      const windowReferences = [];
-      const rceWindow = this.editor.getWin(); // explicitly assign name for reference by parent window
-
-      rceWindow.name = `${RCEWrapper.editorFrameName}_${this.id}`;
-      rceWindow.addEventListener('message', this.forwardPostMessagesHandler(rceWindow, windowReferences));
-    };
-
-    this.forwardPostMessagesHandler = (rceWindow, windowReferences) => e => {
-      let message;
-
-      try {
-        message = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
-      } catch (err) {
-        // unparseable message may not be meant for our handlers
-        return false;
-      } // NOTE: the code to encode/decode `sourceToolInfo` is duplicated in
-      // the ui/features/post_message_forwarding/index.ts, and
-      // cannot be DRY'd because RCE is in a package
-
-
-      if (e.origin === rceWindow.origin) {
-        const {
-          sourceToolInfo,
-          ...messageWithoutSourceToolInfo
-        } = message;
-        const targetOrigin = sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.origin;
-        const targetWindow = windowReferences[sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.windowId];
-
-        if (!targetOrigin || !targetWindow) {
-          return false;
-        }
-
-        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.postMessage(messageWithoutSourceToolInfo, targetOrigin);
-      } else {
-        // message is from tool, forward to Canvas window
-        // We can't forward the whole `e.source` window in the postMessage,
-        // so we keep a list (`windowReferences`) of all windows we've received
-        // messages from, and include the index into that list as `windowId`
-        let windowId = windowReferences.indexOf(e.source);
-
-        if (windowId === -1) {
-          windowReferences.push(e.source);
-          windowId = windowReferences.length - 1;
-        }
-
-        const newMessage = { ...message,
-          sourceToolInfo: {
-            origin: e.origin,
-            windowId
-          },
-          frameName: rceWindow.name
-        };
-        rceWindow.parent.postMessage(newMessage, rceWindow.origin);
-      }
-    };
-
     this.fixToolbarKeyboardNavigation = () => {
       var _this$_elementRef$cur2;
 
@@ -3200,19 +3142,15 @@ class RCEWrapper extends React.Component {
   getRequiredFeatureStatuses() {
     const {
       new_math_equation_handling = false,
-      rce_ux_improvements = false,
       explicit_latex_typesetting = false,
       rce_transform_loaded_content = false,
-      media_links_use_attachment_id = false,
-      improved_no_results_messaging = false
+      media_links_use_attachment_id = false
     } = this.props.features;
     return {
       new_math_equation_handling,
-      rce_ux_improvements,
       explicit_latex_typesetting,
       rce_transform_loaded_content,
-      media_links_use_attachment_id,
-      improved_no_results_messaging
+      media_links_use_attachment_id
     };
   }
 
@@ -3220,8 +3158,7 @@ class RCEWrapper extends React.Component {
     return {
       locale: normalizeLocale(this.props.language),
       flashAlertTimeout: this.props.flashAlertTimeout,
-      timezone: this.props.timezone,
-      lockedAttachments: this.props.lockedAttachments
+      timezone: this.props.timezone
     };
   }
 
@@ -4257,7 +4194,6 @@ RCEWrapper.defaultProps = {
   canvasOrigin: ''
 };
 RCEWrapper.skinCssInjected = false;
-RCEWrapper.editorFrameName = 'active_rce_frame';
 
 function mergeMenuItems(standard, custom) {
   var _custom$trim;

package/lib/rce/RceHtmlEditor.js

@@ -28,6 +28,28 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
   const [code, setCode] = useState(props.code);
   const label = formatMessage('html code editor');
   const [dir, setDir] = useState(getComputedStyle(document.body, null).direction);
+  const [codeMirrorEditorDiv, setCodeMirrorEditorDiv] = useState(null);
+  useEffect(() => {
+    ;
+
+    (async () => {
+      const p = new Promise(resolve => {
+        const timerid = setInterval(() => {
+          // scoping querySelector to the container div makes sure we're targeting this CodeEditor
+          // The CodeMirror docs (https://codemirror.net/doc/manual.html#styling)
+          // say this is the element we use to set the editor's height
+          const editor = editorRef.current.querySelector('.CodeMirror');
+
+          if (editor) {
+            clearInterval(timerid);
+            setCodeMirrorEditorDiv(editor);
+            resolve();
+          }
+        }, 60);
+      });
+      await p;
+    })();
+  }, [editorRef]);
   useEffect(() => {
     setCode(beautify.html(props.code)); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -57,14 +79,12 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
     setDir(getComputedStyle(editorRef.current || document.body, null).direction);
   }, [dir, editorRef]);
   useEffect(() => {
-    // scoping querySelector to the container div makes sure we're targeting this CodeEditor
-    // The CodeMirror docs (https://codemirror.net/doc/manual.html#styling)
-    // say this is the element we use to set the editor's height
-    const editor = editorRef.current.querySelector('.CodeMirror');
-    editor.CodeMirror.setSize(null, props.height);
-    editor.style.margin = '0';
-    editor.style.border = '0';
-  }, [props.height, editorRef]);
+    if (codeMirrorEditorDiv) {
+      codeMirrorEditorDiv.CodeMirror.setSize(null, props.height);
+      codeMirrorEditorDiv.style.margin = '0';
+      codeMirrorEditorDiv.style.border = '0';
+    }
+  }, [codeMirrorEditorDiv, props.height]);
   const isFocused = useRef(false); // move cursor to the top of the html code when the editor is focused for the first time
 
   const handleFocus = useCallback((editor, event) => {

package/lib/rce/plugins/instructure_links/components/Link.js

@@ -31,8 +31,6 @@ import { IconDragHandleLine, IconPublishSolid, IconUnpublishedSolid } from '@ins
 import RCEGlobals from '../../../RCEGlobals';
 import { getIcon } from '../../shared/linkUtils';
 export default function Link(props) {
-  var _RCEGlobals$getFeatur;
-
   const internalLink = { ...props.link
   };
   const [isHovering, setIsHovering] = useState(false);
@@ -43,14 +41,10 @@ export default function Link(props) {
     date_type
   } = props.link;
   const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
+  internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
 
-  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.rce_ux_improvements) {
-    internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
-
-    const publishable = !['navigation', 'announcements'].includes(type);
-    internalLink['data-published'] = publishable ? published : null;
-  }
-
+  const publishable = !['navigation', 'announcements'].includes(type);
+  internalLink['data-published'] = publishable ? published : null;
   const Icon = getIcon(type);
   const color = published ? 'success' : 'primary';
   let dateString = null;

package/lib/rce/plugins/instructure_links/components/LinkSet.js

@@ -113,7 +113,7 @@ class LinkSet extends Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, {
       id: this.describedByID
     }, formatMessage('Click to insert a link into the editor.')), /*#__PURE__*/React.createElement(List, {
-      variant: "unstyled",
+      isUnstyled: true,
       as: "ul",
       margin: "0"
     }, this.props.collection.links.map((link, index, array) => {
@@ -137,18 +137,14 @@ class LinkSet extends Component {
   }
 
   renderEmptyIndicator() {
-    var _RCEGlobals$getFeatur, _this$props$searchStr;
+    var _this$props$searchStr;
 
-    return (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.improved_no_results_messaging ? /*#__PURE__*/React.createElement(NoResults, {
+    return /*#__PURE__*/React.createElement(NoResults, {
       contextType: this.props.contextType,
       contextId: this.props.contextId,
       collectionType: this.props.type,
       isSearchResult: ((_this$props$searchStr = this.props.searchString) === null || _this$props$searchStr === void 0 ? void 0 : _this$props$searchStr.length) >= 3
-    }) : /*#__PURE__*/React.createElement(View, {
-      as: "div",
-      role: "alert",
-      padding: "medium"
-    }, formatMessage('No results.'));
+    });
   }
 
   renderLoadingError() {

package/lib/rce/plugins/instructure_links/components/NoResults.js

@@ -23,11 +23,7 @@ import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import formatMessage from '../../../../format-message';
-import { getIcon } from '../../shared/linkUtils'; // Doing this to avoid TS2339 errors-- remove once we're on InstUI 8
-
-const {
-  Item: FlexItem
-} = Flex;
+import { getIcon } from '../../shared/linkUtils';
 export function buildUrl(contextType, contextId, collectionType) {
   var _typeMap$collectionTy;
 
@@ -72,15 +68,14 @@ export const NoResults = _ref => {
     justifyItems: "center",
     alignItems: "center",
     direction: "column"
-  }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Icon, {
     size: "large",
     color: "secondary",
     padding: "large"
-  })), /*#__PURE__*/React.createElement(FlexItem, {
+  })), /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "small 0 0"
-  }, /*#__PURE__*/React.createElement(Text, null, getMessage(collectionType, isSearchResult))), !isSearchResult && /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Link, {
-    href: buildUrl(contextType, contextId, collectionType) // @ts-expect-error
-    ,
+  }, /*#__PURE__*/React.createElement(Text, null, getMessage(collectionType, isSearchResult))), !isSearchResult && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Link, {
+    href: buildUrl(contextType, contextId, collectionType),
     target: "_blank"
   }, formatMessage('Add one!')))));
 };

package/lib/rce/plugins/instructure_links/plugin.js

@@ -68,20 +68,14 @@ import bridge from '../../../bridge';
 import { getAnchorElement, isOKToLink } from '../../contentInsertionUtils';
 import LinkOptionsTrayController from './components/LinkOptionsTray/LinkOptionsTrayController';
 import { CREATE_LINK, EDIT_LINK } from './components/LinkOptionsDialog/LinkOptionsDialogController';
-import RCEGlobals from '../../RCEGlobals';
 import tinymce from 'tinymce';
 const trayController = new LinkOptionsTrayController();
 const COURSE_PLUGIN_KEY = 'course_links';
 const GROUP_PLUGIN_KEY = 'group_links';
 
 function getCommandName(selectedNode) {
-  var _RCEGlobals$getFeatur;
-
-  // show the Course Tray if it's a course link and the ux improvement flag is on,
-  // otherwise show the default Link Tray
-  const showCourseLinkTray = !!((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.rce_ux_improvements);
   const isCourseLink = selectedNode.getAttribute('data-course-type');
-  return showCourseLinkTray && isCourseLink ? 'instructureTrayForCourseLinks' : 'instructureTrayToEditLink';
+  return isCourseLink ? 'instructureTrayForCourseLinks' : 'instructureTrayToEditLink';
 }
 
 function selectedAnchorCount(ed) {

package/lib/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialog.js

@@ -31,7 +31,6 @@ import { ExternalToolDialogTray } from './ExternalToolDialogTray';
 import { ExternalToolDialogModal } from './ExternalToolDialogModal';
 import { showFlashAlert } from '../../../../../common/FlashAlert';
 import { parseUrlOrNull } from '../../../../../util/url-util';
-const FlexItem = Flex.Item;
 export default class ExternalToolDialog extends React.Component {
   constructor() {
     super(...arguments);
@@ -246,7 +245,7 @@ export default class ExternalToolDialog extends React.Component {
     }, formatMessage('The following content is partner provided'))), !state.iframeLoaded && /*#__PURE__*/React.createElement(Flex, {
       alignItems: "center",
       justifyItems: "center"
-    }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Spinner, {
+    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
       renderTitle: formatMessage('Loading External Tool'),
       size: "large",
       margin: "0 0 0 medium"

package/lib/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogTray.js

@@ -1,3 +1,5 @@
+import _pt from "prop-types";
+
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -16,14 +18,12 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Tray } from '@instructure/ui-tray';
 import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
 import { CloseButton } from '@instructure/ui-buttons';
 import formatMessage from 'format-message';
-const FlexItem = Flex.Item;
 export function ExternalToolDialogTray(props) {
   const {
     label,
@@ -56,9 +56,9 @@ export function ExternalToolDialogTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     padding: "small"
-  }, /*#__PURE__*/React.createElement(FlexItem, {
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
     shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onCloseButton,
     size: "small",
     screenReaderLabel: formatMessage('Close')
@@ -74,12 +74,6 @@ export function ExternalToolDialogTray(props) {
   }, children)))));
 }
 ExternalToolDialogTray.propTypes = {
-  open: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  mountNode: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  onOpen: PropTypes.func,
-  onClose: PropTypes.func,
-  onCloseButton: PropTypes.func,
-  name: PropTypes.string.isRequired,
-  children: PropTypes.node
+  onCloseButton: _pt.func,
+  name: _pt.string.isRequired
 };

package/lib/rce/plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionDialog.js

@@ -70,7 +70,7 @@ export function ExternalToolSelectionDialog(props) {
     "data-mce-component": true,
     liveRegion: getLiveRegion,
     size: "medium",
-    theme: {
+    themeOverride: {
       mediumMaxWidth: '42rem'
     },
     label: formatMessage('Apps'),
@@ -79,7 +79,7 @@ export function ExternalToolSelectionDialog(props) {
     open: true,
     shouldCloseOnDocumentClick: false
   }, /*#__PURE__*/React.createElement(Modal.Header, {
-    theme: {
+    themeOverride: {
       padding: '0.5rem'
     }
   }, /*#__PURE__*/React.createElement(CloseButton, {

package/lib/rce/plugins/instructure_rce_external_tools/lti13-content-items/models/ResourceLinkContentItem.js

@@ -35,7 +35,7 @@ export default class ResourceLinkContentItem extends BaseLinkContentItem {
 
   buildUrl() {
     return addQueryParamsToUrl(this.context.ltiEndpoint, {
-      display: 'borderless',
+      display: 'in_rce',
       resource_link_lookup_uuid: this.lookup_uuid,
       [PARENT_FRAME_CONTEXT_PARAM]: this.context.containingCanvasLtiToolId
     });

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

@@ -146,7 +146,7 @@ export default class TrayController {
       // If not, we can't update the MediaObject in the canvas db.
 
 
-      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' && !videoOptions.isLocked) {
+      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined') {
         videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
             this.$videoContainer.contentWindow.postMessage({
@@ -181,10 +181,15 @@ export default class TrayController {
     let vo = {};
 
     if (this._shouldOpen) {
+      /*
+       * When the tray is being opened again, it should be rendered fresh
+       * (clearing the internal state) so that the currently-selected video can
+       * be used for initial video options.
+       */
       this._renderId++;
+      vo = asVideoElement(this.$videoContainer) || {};
     }
 
-    vo = asVideoElement(this.$videoContainer) || {};
     const element = /*#__PURE__*/React.createElement(VideoOptionsTray, {
       id: "video-options-tray",
       key: this._renderId,

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

@@ -38,13 +38,10 @@ import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInpu
 import { getTrayHeight } from '../../shared/trayUtils';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
-import RCEGlobals from '../../../RCEGlobals';
 
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
 
 export default function VideoOptionsTray(_ref) {
-  var _RCEGlobals$getConfig;
-
   let {
     videoOptions,
     onRequestClose,
@@ -71,9 +68,7 @@ export default function VideoOptionsTray(_ref) {
   const [minWidth] = useState(MIN_WIDTH_VIDEO);
   const [minHeight] = useState(Math.round(videoHeight / videoWidth * MIN_WIDTH_VIDEO));
   const [minPercentage] = useState(MIN_PERCENTAGE);
-  const lock_statuses = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.lockedAttachments;
   const isStudio = !!studioOptions;
-  const isLocked = !!lock_statuses && !!lock_statuses[videoOptions.attachmentId];
   const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
   const showSizeControls = !isStudio || studioOptions.resizable;
   const dimensionsState = useDimensionsState(videoOptions, {
@@ -129,8 +124,7 @@ export default function VideoOptionsTray(_ref) {
       appliedWidth,
       displayAs,
       subtitles,
-      updateMediaObject,
-      isLocked
+      updateMediaObject
     });
   }
 
@@ -213,7 +207,7 @@ export default function VideoOptionsTray(_ref) {
     shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
-  }, !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, isStudio ? /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
@@ -272,7 +266,7 @@ export default function VideoOptionsTray(_ref) {
     minWidth: minWidth,
     minPercentage: minPercentage,
     hidePercentage: true
-  }))), !isStudio && !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
+  }))), !isStudio && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
     description: formatMessage('Closed Captions/Subtitles')

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

@@ -24,41 +24,33 @@ 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'; // Doing this to avoid TS2339 errors -- TODO: remove once we're on InstUI 8
-
-const {
-  Head,
-  Row,
-  ColHeader,
-  Body,
-  Cell
-} = Table;
+import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 
 const renderBody = (headers, rows) => {
   return /*#__PURE__*/React.createElement(Table, {
     caption: formatMessage('Word Count')
-  }, /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement(Row, null, headers.map(_ref => {
+  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, headers.map(_ref => {
     let {
       id,
       getLabel
     } = _ref;
-    return /*#__PURE__*/React.createElement(ColHeader, {
+    return /*#__PURE__*/React.createElement(Table.ColHeader, {
       key: id,
       id: id
     }, getLabel());
-  }))), /*#__PURE__*/React.createElement(Body, null, rows.map(_ref2 => {
+  }))), /*#__PURE__*/React.createElement(Table.Body, null, rows.map(_ref2 => {
     let {
       label,
       documentCount,
       selectionCount
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Row, {
+    return /*#__PURE__*/React.createElement(Table.Row, {
       key: label
-    }, /*#__PURE__*/React.createElement(Cell, {
+    }, /*#__PURE__*/React.createElement(Table.Cell, {
       key: "label"
-    }, label), /*#__PURE__*/React.createElement(Cell, {
+    }, label), /*#__PURE__*/React.createElement(Table.Cell, {
       key: "document"
-    }, documentCount), /*#__PURE__*/React.createElement(Cell, {
+    }, documentCount), /*#__PURE__*/React.createElement(Table.Cell, {
       key: "selection"
     }, selectionCount));
   })));

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

@@ -241,6 +241,7 @@ export default function CanvasContentTray(props) {
   const [hidingTrayOnAction, setHidingTrayOnAction] = useState(true);
   const trayRef = useRef(null);
   const scrollingAreaRef = useRef(null);
+  const closeButtonRef = useRef(null);
   const [filterSettings, setFilterSettings] = useFilterSettings();
   const [isEditTray, setIsEditTray] = useState(false);
   const [link, setLink] = useState(null);
@@ -267,6 +268,8 @@ export default function CanvasContentTray(props) {
   useEffect(() => {
     const controller = {
       showTrayForPlugin(plugin) {
+        var _closeButtonRef$curre;
+
         // increment a counter that's used as the key when rendering
         // this gets us a new instance everytime, which is necessary
         // to get the queries run so we have up to date data.
@@ -294,6 +297,8 @@ export default function CanvasContentTray(props) {
         } else {
           setIsEditTray(false);
         }
+
+        (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
       },
 
       hideTray(forceClose) {
@@ -474,7 +479,8 @@ export default function CanvasContentTray(props) {
     offset: "medium",
     onClick: handleDismissTray,
     "data-testid": "CloseButton_ContentTray",
-    screenReaderLabel: formatMessage('Close')
+    screenReaderLabel: formatMessage('Close'),
+    elementRef: el => closeButtonRef.current = el
   })), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
     linkText: linkText,
     placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,

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

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { parse } from 'url';
+import { format, parse } from 'url';
 import { absoluteToRelativeUrl } from '../../../common/fileUrl';
 import { IconAudioLine, IconDocumentLine, IconMsExcelLine, IconMsPptLine, IconMsWordLine, IconPdfLine, IconVideoLine } from '@instructure/ui-icons';
 import RCEGlobals from '../../RCEGlobals';
@@ -94,13 +94,21 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   const type = content_type.replace(/\/.*$/, '');
 
   if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
-    if (!file.url && !file.href) {
-      return `/media_attachments_iframe/${file.id}?type=${type}&embedded=true`;
+    const url = parse(`/media_attachments_iframe/${file.id}`, true);
+    url.query.type = type;
+    url.query.embedded = true;
+
+    if (file.uuid && file.contextType == 'User') {
+      url.query.verifier = file.uuid;
+    } else if (file.url || file.href) {
+      const parsed_url = parse(file.url || file.href, true);
+
+      if (parsed_url.query.verifier) {
+        url.query.verifier = parsed_url.query.verifier;
+      }
     }
 
-    const parsed_url = parse(file.url || file.href, true);
-    const verifier = parsed_url.query.verifier ? `&verifier=${parsed_url.query.verifier}` : '';
-    return `/media_attachments_iframe/${file.id}?type=${type}${verifier}&embedded=true`;
+    return format(url);
   }
 
   if (file.embedded_iframe_url) {