@instructure/canvas-rce 5.6.16 → 5.7.0

package/lib/rce/StatusBar.js

@@ -24,7 +24,7 @@ import { Button, IconButton, CondensedButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Badge } from '@instructure/ui-badge';
-import { ApplyTheme } from '@instructure/ui-themeable';
+import { InstUISettingsProvider } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
 import { SVGIcon } from '@instructure/ui-svg-images';
 import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine } from '@instructure/ui-icons';
@@ -190,10 +190,12 @@ export default function StatusBar(props) {
       return button;
     }
 
-    return /*#__PURE__*/React.createElement(ApplyTheme, {
+    return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
       theme: {
-        [Badge.theme]: {
-          colorPrimary: props.a11yBadgeColor
+        componentOverrides: {
+          Badge: {
+            colorPrimary: props.a11yBadgeColor
+          }
         }
       }
     }, /*#__PURE__*/React.createElement(Badge, {

package/lib/rce/plugins/instructure_image/ImageEmbedOptions.js

@@ -17,6 +17,7 @@
  */
 import formatMessage from '../../../format-message';
 import { scaleForHeight, scaleForWidth } from '../shared/DimensionUtils';
+import RCEGlobals from '../../RCEGlobals';
 export const MIN_HEIGHT = 10;
 export const MIN_WIDTH = 10;
 export const MIN_WIDTH_VIDEO = 320;
@@ -127,6 +128,16 @@ export function fromVideoEmbed($element) {
   }
 
   videoOptions.videoSize = imageSizeFromKnownOptions(videoOptions);
+
+  if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
+    const source = $videoIframe.getAttribute('src');
+    const matches = source === null || source === void 0 ? void 0 : source.match(/^\/media_attachments_iframe\/(\d+)/);
+
+    if (matches) {
+      videoOptions.attachmentId = matches[1];
+    }
+  }
+
   return videoOptions;
 }
 export function scaleImageForHeight(naturalWidth, naturalHeight, targetHeight) {

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

@@ -17,7 +17,7 @@
  */
 import React from 'react';
 import { bool, func, string } from 'prop-types';
-import { collectionsShape } from './propTypes';
+import { collectionsShape, linkShape } from './propTypes';
 import AccordionSection from './AccordionSection';
 import LinkSet from './LinkSet';
 export default function CollectionPanel(props) {
@@ -52,7 +52,8 @@ export default function CollectionPanel(props) {
     contextType: props.contextType,
     searchString: props.searchString,
     editing: props.editing,
-    onEditClick: props.onEditClick
+    onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink
   })));
 }
 CollectionPanel.propTypes = {
@@ -72,7 +73,8 @@ CollectionPanel.propTypes = {
   onChangeAccordion: func.isRequired,
   selectedAccordionIndex: string,
   editing: bool,
-  onEditClick: func
+  onEditClick: func,
+  selectedLink: linkShape
 };
 CollectionPanel.defaultProps = {
   renderNewPageLink: false,

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

@@ -22,7 +22,7 @@ import formatMessage from '../../../../format-message';
 import { renderLink as renderLinkHtml } from '../../../contentRendering';
 import dragHtml from '../../../../sidebar/dragHtml';
 import { applyTimezoneOffsetToDate } from '../../shared/dateUtils';
-import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
@@ -192,7 +192,9 @@ export default function Link(props) {
     }, /*#__PURE__*/React.createElement(View, {
       as: "div",
       margin: "0"
-    }, title), dateString ? /*#__PURE__*/React.createElement(View, {
+    }, title, props.isSelected && /*#__PURE__*/React.createElement(ScreenReaderContent, {
+      "data-testid": "selected-link-indicator"
+    }, formatMessage('Selected'))), dateString ? /*#__PURE__*/React.createElement(View, {
       as: "div"
     }, dateString) : null), 'published' in props.link && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(AccessibleContent, {
       alt: publishedMsg
@@ -212,5 +214,6 @@ Link.propTypes = {
   describedByID: string.isRequired,
   elementRef: func,
   editing: bool,
-  onEditClick: func
+  onEditClick: func,
+  isSelected: bool
 };

package/lib/rce/plugins/instructure_links/components/LinkOptionsTray/index.js

@@ -212,7 +212,7 @@ export default function LinkOptionsTray(props) {
     padding: "small medium",
     textAlign: "end"
   }, /*#__PURE__*/React.createElement(Button, {
-    disabled: showText && !text || !(url && isValidURL),
+    disabled: showText && text.trim().length === 0 || !(url && isValidURL),
     onClick: handleSave,
     color: "primary"
   }, formatMessage('Done')))))));

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

@@ -17,7 +17,7 @@
  */
 import React, { Component, useRef } from 'react';
 import { bool, func, string } from 'prop-types';
-import { linksShape, linkType } from './propTypes';
+import { linkShape, linksShape, linkType } from './propTypes';
 import formatMessage from '../../../../format-message';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { List } from '@instructure/ui-list';
@@ -89,6 +89,13 @@ class LinkSet extends Component {
     return !this.hasLinks(props) && !props.collection.hasMore && !props.collection.isLoading;
   }
 
+  compareURLs() {
+    let url1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let url2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    if (url1 === '' || url2 === '') return false;
+    return url1.split('?')[0] === url2.split('?')[0];
+  }
+
   renderLinks(lastItemRef) {
     function refFor(index, array) {
       if (!lastItemRef || index !== array.length - 1) {
@@ -107,19 +114,24 @@ class LinkSet extends Component {
       variant: "unstyled",
       as: "ul",
       margin: "0"
-    }, this.props.collection.links.map((link, index, array) => /*#__PURE__*/React.createElement(List.Item, {
-      key: link.href,
-      spacing: "none",
-      padding: "0"
-    }, /*#__PURE__*/React.createElement(Link, {
-      link: link,
-      type: this.props.type,
-      onClick: this.props.onLinkClick,
-      describedByID: this.describedByID,
-      elementRef: refFor(index, array),
-      editing: this.props.editing,
-      onEditClick: this.props.onEditClick
-    })))));
+    }, this.props.collection.links.map((link, index, array) => {
+      var _this$props$selectedL;
+
+      return /*#__PURE__*/React.createElement(List.Item, {
+        key: link.href,
+        spacing: "none",
+        padding: "0"
+      }, /*#__PURE__*/React.createElement(Link, {
+        link: link,
+        type: this.props.type,
+        onClick: this.props.onLinkClick,
+        describedByID: this.describedByID,
+        elementRef: refFor(index, array),
+        editing: this.props.editing,
+        onEditClick: this.props.onEditClick,
+        isSelected: this.compareURLs((_this$props$selectedL = this.props.selectedLink) === null || _this$props$selectedL === void 0 ? void 0 : _this$props$selectedL.href, link.href)
+      }));
+    })));
   }
 
   renderEmptyIndicator() {
@@ -171,6 +183,7 @@ LinkSet.propTypes = {
   suppressRenderEmpty: bool,
   searchString: string,
   editing: bool,
-  onEditClick: func
+  onEditClick: func,
+  selectedLink: linkShape
 };
 export default LinkSet;

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

@@ -18,7 +18,7 @@
 import React from 'react';
 import { bool, func, string } from 'prop-types';
 import formatMessage from '../../../../format-message';
-import { collectionsShape } from './propTypes';
+import { collectionsShape, linkShape } from './propTypes';
 import NavigationPanel from './NavigationPanel';
 import CollectionPanel from './CollectionPanel';
 import { View } from '@instructure/ui-view';
@@ -34,31 +34,37 @@ function LinksPanel(props) {
   }, (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "wikiPages",
     label: formatMessage('Pages')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "assignments",
     label: formatMessage('Assignments')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "quizzes",
     label: formatMessage('Quizzes')
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "announcements",
     label: formatMessage('Announcements')
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "discussions",
     label: formatMessage('Discussions')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "modules",
     label: formatMessage('Modules')
   })), /*#__PURE__*/React.createElement(NavigationPanel, {
@@ -84,7 +90,8 @@ LinksPanel.propTypes = {
   onLinkClick: func,
   canCreatePages: bool,
   editing: bool,
-  onEditClick: func
+  onEditClick: func,
+  selectedLink: linkShape
 };
 LinksPanel.defaultProps = {
   selectedAccordionIndex: '',

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

@@ -129,8 +129,9 @@ tinymce.PluginManager.add('instructure_paste', function (editor) {
   async function handlePasteOrDrop(event) {
     var _bridge$activeEditor, _bridge$activeEditor$, _editor$rceWrapper;
 
-    const dataTransfer = event.type === 'paste' ? event.clipboardData : event.dataTransfer;
-    const files = (dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files) || [];
+    const isPaste = event.type === 'paste';
+    const dataTransfer = isPaste ? event.clipboardData : event.dataTransfer;
+    const files = Array.from((dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files) || []);
     const types = (dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) || [];
     const isAudioVideoDisabled = (_bridge$activeEditor = bridge.activeEditor()) === null || _bridge$activeEditor === void 0 ? void 0 : (_bridge$activeEditor$ = _bridge$activeEditor.props) === null || _bridge$activeEditor$ === void 0 ? void 0 : _bridge$activeEditor$.instRecordDisabled; // delegate to tiny if there aren't any files to handle
 
@@ -143,9 +144,19 @@ tinymce.PluginManager.add('instructure_paste', function (editor) {
     event.preventDefault(); // Ensure the editor has focus, because downstream code requires that it does, and drag-n-drop
     // events can be started when the editor doesn't have focus.
 
-    if (!editor.hasFocus()) (_editor$rceWrapper = editor.rceWrapper) === null || _editor$rceWrapper === void 0 ? void 0 : _editor$rceWrapper.focus();
+    if (!editor.hasFocus()) (_editor$rceWrapper = editor.rceWrapper) === null || _editor$rceWrapper === void 0 ? void 0 : _editor$rceWrapper.focus(); // Checking if we've encountered an issue with file processing for paste events in the browser
+    // Specifically implementing due to this bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1699743
+    // However, there could be other issues that cause this condition so it's a nice safety net regardless
 
-    for (const file of Array.from(files)) {
+    if (isPaste && files.some(file => file.size === 0)) {
+      showFlashAlert({
+        message: formatMessage('One or more files failed to paste. Please try uploading or dragging and dropping files.'),
+        type: 'error'
+      });
+      return;
+    }
+
+    for (const file of files) {
       if (isAudioVideoDisabled && isAudioOrVideo(file.type)) {
         // Skip audio and video files when disabled
         continue;

package/lib/rce/plugins/instructure_rce_external_tools/ExternalToolsEnv.js

@@ -115,19 +115,13 @@ export function externalToolsEnvFor(editor) {
       return (_props$canvasOrigin = (_props7 = props()) === null || _props7 === void 0 ? void 0 : _props7.canvasOrigin) !== null && _props$canvasOrigin !== void 0 ? _props$canvasOrigin : window.location.origin;
     },
 
-    get studioMediaOptionsEnabled() {
-      var _props$features$rce_s, _props8, _props8$features;
-
-      return (_props$features$rce_s = (_props8 = props()) === null || _props8 === void 0 ? void 0 : (_props8$features = _props8.features) === null || _props8$features === void 0 ? void 0 : _props8$features.rce_show_studio_media_options) !== null && _props$features$rce_s !== void 0 ? _props$features$rce_s : false;
-    },
-
     /**
      * Gets the context id that should be used when launching LTI iframes.
      */
     get containingCanvasLtiToolId() {
-      var _props9, _props9$externalTools;
+      var _props8, _props8$externalTools;
 
-      const propsToolId = (_props9 = props()) === null || _props9 === void 0 ? void 0 : (_props9$externalTools = _props9.externalToolsConfig) === null || _props9$externalTools === void 0 ? void 0 : _props9$externalTools.containingCanvasLtiToolId;
+      const propsToolId = (_props8 = props()) === null || _props8 === void 0 ? void 0 : (_props8$externalTools = _props8.externalToolsConfig) === null || _props8$externalTools === void 0 ? void 0 : _props8$externalTools.containingCanvasLtiToolId;
 
       if (typeof propsToolId === 'string') {
         return propsToolId;

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

@@ -31,6 +31,7 @@ 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);
@@ -245,7 +246,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(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
+    }, /*#__PURE__*/React.createElement(FlexItem, 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

@@ -23,6 +23,7 @@ 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,
@@ -55,9 +56,9 @@ export function ExternalToolDialogTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     padding: "small"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, /*#__PURE__*/React.createElement(FlexItem, {
     shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onCloseButton,
     size: "small",
     screenReaderLabel: formatMessage('Close')

package/lib/rce/plugins/instructure_rce_external_tools/lti11-content-items/RceLti11ContentItem.js

@@ -104,16 +104,16 @@ export class RceLti11ContentItem {
   }
 
   generateCodePayloadIframe() {
-    var _this$env, _this$env2, _this$contentItem$cla, _this$contentItem$pla4, _this$contentItem$pla5, _this$contentItem$pla6, _this$contentItem$pla7, _this$contentItem$pla8, _this$contentItem$pla9, _this$contentItem$pla10, _this$contentItem$pla11;
+    var _this$env, _this$contentItem$cla, _this$contentItem$pla4, _this$contentItem$pla5, _this$contentItem$pla6, _this$contentItem$pla7, _this$contentItem$pla8, _this$contentItem$pla9, _this$contentItem$pla10, _this$contentItem$pla11;
 
-    const studioAttributes = (_this$env = this.env) !== null && _this$env !== void 0 && _this$env.studioMediaOptionsEnabled && isStudioContentItemCustomJson(this.contentItem.custom) ? studioAttributesFrom(this.contentItem.custom) : null;
+    const studioAttributes = isStudioContentItemCustomJson(this.contentItem.custom) ? studioAttributesFrom(this.contentItem.custom) : null;
     return $('<div/>').append($('<iframe/>', {
       src: addParentFrameContextToUrl(this.url, this.containingCanvasLtiToolId),
       title: this.contentItem.title,
       allowfullscreen: 'true',
       webkitallowfullscreen: 'true',
       mozallowfullscreen: 'true',
-      allow: (_this$env2 = this.env) === null || _this$env2 === void 0 ? void 0 : _this$env2.ltiIframeAllowPolicy,
+      allow: (_this$env = this.env) === null || _this$env === void 0 ? void 0 : _this$env.ltiIframeAllowPolicy,
       ...studioAttributes
     }).addClass((_this$contentItem$cla = this.contentItem.class) !== null && _this$contentItem$cla !== void 0 ? _this$contentItem$cla : '').css({
       width: (_this$contentItem$pla4 = (_this$contentItem$pla5 = this.contentItem.placementAdvice) === null || _this$contentItem$pla5 === void 0 ? void 0 : _this$contentItem$pla5.displayWidth) !== null && _this$contentItem$pla4 !== void 0 ? _this$contentItem$pla4 : '',

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

@@ -21,6 +21,7 @@ import bridge from '../../../../bridge';
 import { asVideoElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
 import VideoOptionsTray from '.';
 import { isStudioEmbeddedMedia, parseStudioOptions } from '../../shared/StudioLtiSupportUtils';
+import RCEGlobals from '../../../RCEGlobals';
 export const CONTAINER_ID = 'instructure-video-options-tray-container';
 export const VIDEO_SIZE_DEFAULT = {
   height: '225px',
@@ -130,17 +131,23 @@ export default class TrayController {
         this._editor.selection.select(link);
 
         this.$videoContainer = null;
+      }
+
+      const data = {
+        media_object_id: videoOptions.media_object_id,
+        title: videoOptions.titleText,
+        subtitles: videoOptions.subtitles
+      };
+
+      if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
+        data.attachment_id = videoOptions.attachment_id;
       } // If the video just edited came from a file uploaded to canvas
       // and not notorious, we probably don't have a media_object_id.
       // If not, we can't update the MediaObject in the canvas db.
 
 
-      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined') {
-        videoOptions.updateMediaObject({
-          media_object_id: videoOptions.media_object_id,
-          title: videoOptions.titleText,
-          subtitles: videoOptions.subtitles
-        }).then(_r => {
+      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' && !videoOptions.isLocked) {
+        videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
             this.$videoContainer.contentWindow.postMessage({
               subject: 'reload_media',
@@ -174,15 +181,10 @@ 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,10 +38,13 @@ 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,
@@ -68,7 +71,9 @@ 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, {
@@ -118,12 +123,14 @@ export default function VideoOptionsTray(_ref) {
 
     onSave({
       media_object_id: videoOptions.id,
+      attachment_id: videoOptions.attachmentId,
       titleText,
       appliedHeight,
       appliedWidth,
       displayAs,
       subtitles,
-      updateMediaObject
+      updateMediaObject,
+      isLocked
     });
   }
 
@@ -206,7 +213,7 @@ export default function VideoOptionsTray(_ref) {
     shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, isStudio ? /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
@@ -263,8 +270,9 @@ export default function VideoOptionsTray(_ref) {
     disabled: displayAs !== 'embed',
     minHeight: minHeight,
     minWidth: minWidth,
-    minPercentage: minPercentage
-  }))), !isStudio && /*#__PURE__*/React.createElement(Flex.Item, {
+    minPercentage: minPercentage,
+    hidePercentage: true
+  }))), !isStudio && !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
     description: formatMessage('Closed Captions/Subtitles')
@@ -294,7 +302,7 @@ export default function VideoOptionsTray(_ref) {
 }
 VideoOptionsTray.propTypes = {
   videoOptions: shape({
-    titleText: string.isRequired,
+    titleText: string,
     appliedHeight: number,
     appliedWidth: number,
     naturalHeight: number.isRequired,

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

@@ -22,6 +22,7 @@ import { StoreProvider } from '../shared/StoreContext';
 import formatMessage from '../../../format-message';
 import { headerFor, originFromHost } from '../../../rcs/api';
 import { instuiPopupMountNode } from '../../../util/fullscreenHelpers';
+import RCEGlobals from '../../RCEGlobals';
 export const handleUpload = (error, uploadData, onUploadComplete, uploadBookmark) => {
   let err_msg = error && Bridge.uploadMediaTranslations.UploadMediaStrings.UPLOADING_ERROR;
 
@@ -97,7 +98,8 @@ export default function (ed, document) {
         record: true,
         upload: true
       },
-      uploadMediaTranslations: Bridge.uploadMediaTranslations
+      uploadMediaTranslations: Bridge.uploadMediaTranslations,
+      media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id
     })), container);
   });
 }

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

@@ -40,12 +40,12 @@ const renderBody = (headers, rows) => {
   }, /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement(Row, null, headers.map(_ref => {
     let {
       id,
-      label
+      getLabel
     } = _ref;
     return /*#__PURE__*/React.createElement(ColHeader, {
       key: id,
       id: id
-    }, label);
+    }, getLabel());
   }))), /*#__PURE__*/React.createElement(Body, null, rows.map(_ref2 => {
     let {
       label,

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

@@ -19,20 +19,20 @@ import { countContent } from './countContent';
 import formatMessage from '../../../../format-message';
 export const HEADERS = [{
   id: 'count',
-  label: formatMessage('Count')
+  getLabel: () => formatMessage('Count')
 }, {
   id: 'document',
-  label: formatMessage('Document')
+  getLabel: () => formatMessage('Document')
 }, {
   id: 'selection',
-  label: formatMessage('Selection')
+  getLabel: () => formatMessage('Selection')
 }];
-const ROW_LABELS = [['words', formatMessage('Words')], ['chars-no-spaces', formatMessage('Characters (no spaces)')], ['chars', formatMessage('Characters')]];
+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, label] = _ref;
+    let [category, getLabel] = _ref;
     return {
-      label,
+      label: getLabel(),
       documentCount: countContent(ed, 'body', category),
       selectionCount: countContent(ed, 'selection', category)
     };

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

@@ -29,8 +29,8 @@ import Filter, { useFilterSettings } from './Filter';
 import { getTrayHeight } from './trayUtils';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { getLinkContentFromEditor } from './ContentSelection';
-import { getIcon } from './linkUtils';
 import { LinkDisplay } from './LinkDisplay';
+import { showFlashAlert } from '../../../common/FlashAlert';
 /**
  * Returns the translated tray label
  * @param {string} contentType - The type of content showing on tray
@@ -245,7 +245,6 @@ export default function CanvasContentTray(props) {
   const [link, setLink] = useState(null);
   const [linkText, setLinkText] = useState(null);
   const [placeholderText, setPlaceholderText] = useState(null);
-  const Icon = getIcon(link === null || link === void 0 ? void 0 : link.type);
   const {
     bridge,
     editor,
@@ -290,7 +289,7 @@ export default function CanvasContentTray(props) {
             published
           });
           setLinkText(text);
-          setPlaceholderText(text);
+          setPlaceholderText(fileName);
         } else {
           setIsEditTray(false);
         }
@@ -347,6 +346,9 @@ export default function CanvasContentTray(props) {
   }
 
   function handleCloseTray() {
+    // clear the store's saved search string so the tray doesn't
+    // reopen with a previous tray instance's search results
+    storeProps.onChangeSearchString('');
     setHasOpened(false);
     onTrayClosing && onTrayClosing(false); // tell RCEWrapper we're closed
   }
@@ -355,9 +357,14 @@ export default function CanvasContentTray(props) {
     handleDismissTray();
     const newLink = { ...link,
       forceRename: true,
-      text: linkText || placeholderText
+      text: linkText
     };
     bridge.insertLink(newLink);
+    showFlashAlert({
+      message: formatMessage('Updated link'),
+      type: 'success',
+      srOnly: true
+    });
   }
 
   function renderFooter() {
@@ -367,6 +374,7 @@ export default function CanvasContentTray(props) {
       padding: "small medium",
       textAlign: "end"
     }, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "cancel-replace-button",
       onClick: handleDismissTray
     }, formatMessage('Cancel')), /*#__PURE__*/React.createElement(Button, {
       margin: "0 0 0 x-small",
@@ -470,11 +478,11 @@ export default function CanvasContentTray(props) {
     screenReaderLabel: formatMessage('Close')
   }))), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
     linkText: linkText,
-    Icon: Icon,
-    placeholderText: placeholderText,
+    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,
-    handleTextChange: setLinkText
+    handleTextChange: setLinkText,
+    linkType: link === null || link === void 0 ? void 0 : link.type
   }), /*#__PURE__*/React.createElement(Filter, Object.assign({}, filterSettings, {
     mountNode: props.mountNode,
     userContextType: props.contextType,
@@ -510,7 +518,8 @@ export default function CanvasContentTray(props) {
       id: props.contextId
     },
     editing: isEditTray,
-    onEditClick: setLink
+    onEditClick: setLink,
+    selectedLink: link
   }, storeProps)))), isEditTray && renderFooter()))) : null);
 }
 CanvasContentTray.globalOpenCount = 0;