@instructure/canvas-rce 5.6.16 → 5.6.17

package/lib/translated/zh-Hans/modules/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/translated/zh-Hans/modules/rce/plugins/instructure_rce_external_tools/lti11-content-items/__tests__/RceLti11ContentItem.test.js

@@ -162,54 +162,31 @@ describe('RceLti11ContentItem File Item', () => {
   });
 });
 describe('Studio LTI content items', () => {
-  describe('when the rce_show_studio_media_options flag is off', () => {
-    it('does not decorate studio iframes with studio attributes', () => {
-      const itemData = { ...exampleLti11ContentItems.lti_iframe,
-        ...{
-          custom: {
-            source: 'studio',
-            resizable: true,
-            enableMediaOptions: true
-          }
+  it('with custom params set to false', () => {
+    const itemData = { ...exampleLti11ContentItems.lti_iframe,
+      ...{
+        custom: {
+          source: 'studio',
+          resizable: false,
+          enableMediaOptions: false
         }
-      };
-      const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy({}, {
-        studioMediaOptionsEnabled: false
-      }));
-      equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px;" width="800" height="600"></iframe>`);
-    });
-  });
-  describe('when the rce_show_studio_media_options flag is on', () => {
-    it('with custom params set to false', () => {
-      const itemData = { ...exampleLti11ContentItems.lti_iframe,
-        ...{
-          custom: {
-            source: 'studio',
-            resizable: false,
-            enableMediaOptions: false
-          }
+      }
+    };
+    const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy());
+    equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe data-studio-convertible-to-link="true" data-studio-resizable="false" data-studio-tray-enabled="false" src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px;" width="800" height="600"></iframe>`);
+  });
+  it('with custom params set to true', () => {
+    const itemData = { ...exampleLti11ContentItems.lti_iframe,
+      ...{
+        custom: {
+          source: 'studio',
+          resizable: true,
+          enableMediaOptions: true
         }
-      };
-      const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy({}, {
-        studioMediaOptionsEnabled: true
-      }));
-      equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe data-studio-convertible-to-link="true" data-studio-resizable="false" data-studio-tray-enabled="false" src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px;" width="800" height="600"></iframe>`);
-    });
-    it('with custom params set to true', () => {
-      const itemData = { ...exampleLti11ContentItems.lti_iframe,
-        ...{
-          custom: {
-            source: 'studio',
-            resizable: true,
-            enableMediaOptions: true
-          }
-        }
-      };
-      const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy({}, {
-        studioMediaOptionsEnabled: true
-      }));
-      equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe data-studio-convertible-to-link="true" data-studio-resizable="true" data-studio-tray-enabled="true" src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px; display: inline-block;" width="800" height="600"></iframe>`);
-    });
+      }
+    };
+    const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy());
+    equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe data-studio-convertible-to-link="true" data-studio-resizable="true" data-studio-tray-enabled="true" src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px; display: inline-block;" width="800" height="600"></iframe>`);
   });
 });
 

package/lib/translated/zh-Hans/modules/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/translated/zh-Hans/modules/rce/plugins/instructure_record/VideoOptionsTray/__tests__/TrayController.test.js

@@ -20,6 +20,7 @@ import TrayController, { CONTAINER_ID } from '../TrayController';
 import FakeEditor from '../../../../__tests__/FakeEditor';
 import VideoOptionsTrayDriver from './VideoOptionsTrayDriver';
 import * as contentSelection from '../../../shared/ContentSelection';
+import RCEGlobals from '../../../../RCEGlobals';
 const mockVideoPlayers = [{
   titleText: 'video title 0',
   appliedWidth: 400,
@@ -158,6 +159,14 @@ describe('RCE "Videos" Plugin > VideoOptionsTray > TrayController', () => {
     });
   });
   describe('#_applyVideoOptions', () => {
+    beforeEach(() => {
+      RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+        media_links_use_attachment_id: false
+      });
+    });
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
     it('updates the video', () => {
       const updateMediaObject = jest.fn().mockResolvedValue();
       trayController.showTrayForEditor(editors[0]);
@@ -181,6 +190,49 @@ describe('RCE "Videos" Plugin > VideoOptionsTray > TrayController', () => {
       expect(videoContainer.style.width).toBe('321px');
       expect(updateMediaObject).toHaveBeenCalled();
     });
+    it('calls updateMediaObject with correct params', () => {
+      const updateMediaObject = jest.fn().mockResolvedValue();
+      trayController.showTrayForEditor(editors[0]);
+
+      trayController._applyVideoOptions({
+        displayAs: 'embed',
+        appliedHeight: '101',
+        appliedWidth: '321',
+        titleText: 'new title',
+        media_object_id: 'm_somevideo',
+        updateMediaObject
+      });
+
+      expect(updateMediaObject).toHaveBeenCalledWith({
+        media_object_id: 'm_somevideo',
+        subtitles: undefined,
+        title: 'new title'
+      });
+    });
+    it('calls updateMediaObject with correct params with media_links_use_attachment_id', () => {
+      RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+        media_links_use_attachment_id: true
+      });
+      const updateMediaObject = jest.fn().mockResolvedValue();
+      trayController.showTrayForEditor(editors[0]);
+
+      trayController._applyVideoOptions({
+        displayAs: 'embed',
+        appliedHeight: '101',
+        appliedWidth: '321',
+        titleText: 'new title',
+        media_object_id: 'm_somevideo',
+        attachment_id: '123',
+        updateMediaObject
+      });
+
+      expect(updateMediaObject).toHaveBeenCalledWith({
+        attachment_id: '123',
+        media_object_id: 'm_somevideo',
+        subtitles: undefined,
+        title: 'new title'
+      });
+    });
     it('does not updates the video w/o a media_object_id', () => {
       const updateMediaObject = jest.fn().mockResolvedValue();
       trayController.showTrayForEditor(editors[0]);
@@ -204,6 +256,18 @@ describe('RCE "Videos" Plugin > VideoOptionsTray > TrayController', () => {
       expect(videoContainer.style.width).toBe('321px');
       expect(updateMediaObject).not.toHaveBeenCalled();
     });
+    it('does not try to save data to the db on a locked media attachment', () => {
+      const updateMediaObject = jest.fn().mockResolvedValue();
+      trayController.showTrayForEditor(editors[0]);
+
+      trayController._applyVideoOptions({
+        isLocked: true,
+        media_object_id: 'm_somevideo',
+        updateMediaObject
+      });
+
+      expect(updateMediaObject).not.toHaveBeenCalled();
+    });
     it('replaces the video with a link', () => {
       const updateMediaObject = jest.fn().mockResolvedValue();
       const ed = editors[0];

package/lib/translated/zh-Hans/modules/rce/plugins/instructure_record/VideoOptionsTray/__tests__/VideoOptionsTray.test.js

@@ -19,6 +19,7 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import VideoOptionsTray from '..';
 import VideoOptionsTrayDriver from './VideoOptionsTrayDriver';
+import RCEGlobals from '../../../../RCEGlobals';
 jest.useFakeTimers();
 describe('RCE "Videos" Plugin > VideoOptionsTray', () => {
   let props;
@@ -216,6 +217,40 @@ describe('RCE "Videos" Plugin > VideoOptionsTray', () => {
       });
     });
   });
+  describe('Attachment Media Options Tray', () => {
+    it('does not have closed caption controls or title input for locked attachments', () => {
+      RCEGlobals.getConfig = jest.fn().mockReturnValue({
+        lockedAttachments: {
+          10: true
+        }
+      });
+      props.videoOptions = {
+        attachmentId: 10
+      };
+      const {
+        queryByText
+      } = render( /*#__PURE__*/React.createElement(VideoOptionsTray, props));
+      expect(queryByText('Closed Captions/Subtitles')).not.toBeInTheDocument();
+      expect(queryByText('Title')).not.toBeInTheDocument();
+    });
+    it('shows closed caption controls and title input for unlocked attachments', async () => {
+      RCEGlobals.getConfig = jest.fn().mockReturnValue({
+        lockedAttachments: {
+          9: true
+        }
+      });
+      props.videoOptions = {
+        attachmentId: 10
+      };
+      renderComponent();
+      await waitFor(() => {
+        expect(tray.$closedCaptionPanel).toBeInTheDocument();
+      });
+      await waitFor(() => {
+        expect(tray.$titleTextField).toBeInTheDocument();
+      });
+    });
+  });
   describe('Studio Media Options Tray', () => {
     beforeEach(() => {
       props.studioOptions = {

package/lib/translated/zh-Hans/modules/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
     });
   }
 
@@ -203,7 +210,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"
@@ -260,8 +267,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: "\u5173\u95ED\u4E86\u5B57\u5E55/\u8BF4\u660E"
@@ -291,7 +299,7 @@ export default function VideoOptionsTray(_ref) {
 }
 VideoOptionsTray.propTypes = {
   videoOptions: shape({
-    titleText: string.isRequired,
+    titleText: string,
     appliedHeight: number,
     appliedWidth: number,
     naturalHeight: number.isRequired,

package/lib/translated/zh-Hans/modules/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;
 
@@ -95,7 +96,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/translated/zh-Hans/modules/rce/plugins/shared/CanvasContentTray.js

@@ -29,7 +29,6 @@ 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';
 /**
  * Returns the translated tray label
@@ -245,7 +244,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 +288,7 @@ export default function CanvasContentTray(props) {
             published
           });
           setLinkText(text);
-          setPlaceholderText(text);
+          setPlaceholderText(fileName);
         } else {
           setIsEditTray(false);
         }
@@ -347,6 +345,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,7 +356,7 @@ export default function CanvasContentTray(props) {
     handleDismissTray();
     const newLink = { ...link,
       forceRename: true,
-      text: linkText || placeholderText
+      text: linkText
     };
     bridge.insertLink(newLink);
   }
@@ -367,6 +368,7 @@ export default function CanvasContentTray(props) {
       padding: "small medium",
       textAlign: "end"
     }, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "cancel-replace-button",
       onClick: handleDismissTray
     }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
       margin: "0 0 0 x-small",
@@ -470,11 +472,11 @@ export default function CanvasContentTray(props) {
     screenReaderLabel: "\u5173\u95ED"
   }))), 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,

package/lib/translated/zh-Hans/modules/rce/plugins/shared/DimensionsInput/__tests__/DimensionsInput.test.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import DimensionsInput, { useDimensionsState } from '..';
 import DimensionsInputDriver from './DimensionsInputDriver';
 const W_AND_H_NAN_ERROR = 'Width and height must be numbers';
@@ -43,7 +43,8 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
     props = {
       minWidth: 30,
       minHeight: 60,
-      minPercentage: 10
+      minPercentage: 10,
+      hidePercentage: false
     };
   });
   afterEach(() => {
@@ -1149,4 +1150,49 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
       });
     });
   });
+  describe('When hidePercentage is false', () => {
+    let percentageRadio;
+    let pixelsRadio;
+    beforeEach(() => {
+      initialState.usePercentageUnits = true;
+      renderComponent();
+      const container = screen.getByTestId('dimension-type');
+      percentageRadio = within(container).getByLabelText('Percentage');
+      pixelsRadio = within(container).getByLabelText('Pixels');
+    });
+    it('The radio input group for Percentage and Pixels is displayed', () => {
+      const radioInputGroup = screen.getByRole('group', {
+        name: /Dimension Type/i
+      });
+      expect(radioInputGroup).toBeVisible();
+    });
+    it('The "Percentage" radio input is checked', () => {
+      expect(percentageRadio).toBeChecked();
+      expect(pixelsRadio).not.toBeChecked();
+    });
+    it('The dimension input for width is not rendered', () => {
+      const widthInput = screen.queryByLabelText('Width');
+      expect(widthInput).not.toBeInTheDocument();
+    });
+    it('The dimension input for height is not rendered', () => {
+      const heightInput = screen.queryByLabelText('Height');
+      expect(heightInput).not.toBeInTheDocument();
+    });
+  });
+  describe('When hidePercentage is true', () => {
+    beforeEach(() => {
+      props.hidePercentage = true;
+      renderComponent();
+    });
+    it('The radio input group for Percentage and Pixels is not displayed', () => {
+      const radioInputGroup = screen.queryByRole('group', {
+        name: /Dimension Type/i
+      });
+      expect(radioInputGroup).toBeNull();
+    });
+    it('The custom text description is displayed', () => {
+      const label = screen.getByText('Custom width and height (Pixels)');
+      expect(label).toBeVisible();
+    });
+  });
 });

package/lib/translated/zh-Hans/modules/rce/plugins/shared/DimensionsInput/index.js

@@ -21,6 +21,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { IconLockLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
+import { Text } from '@instructure/ui-text';
 import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
 import formatMessage from '../../../../format-message';
 import DimensionInput from './DimensionInput';
@@ -64,7 +65,8 @@ export default function DimensionsInput(props) {
     dimensionsState,
     minHeight,
     minWidth,
-    minPercentage
+    minPercentage,
+    hidePercentage
   } = props;
 
   const handleDimensionTypeChange = e => {
@@ -76,7 +78,9 @@ export default function DimensionsInput(props) {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
-  }, /*#__PURE__*/React.createElement(RadioInputGroup, {
+  }, hidePercentage ? /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, "\u81EA\u5B9A\u4E49\u5BBD\u5EA6\u548C\u9AD8\u5EA6\uFF08\u50CF\u7D20\uFF09") : /*#__PURE__*/React.createElement(RadioInputGroup, {
     "data-testid": "dimension-type",
     name: "dimension-type",
     description: "\u7EF4\u5EA6\u7C7B\u578B",
@@ -144,5 +148,9 @@ DimensionsInput.propTypes = {
   }),
   minHeight: number.isRequired,
   minWidth: number.isRequired,
-  minPercentage: number.isRequired
+  minPercentage: number.isRequired,
+  hidePercentage: bool
+};
+DimensionsInput.defaultProps = {
+  hidePercentage: false
 };

package/lib/translated/zh-Hans/modules/rce/plugins/shared/LinkDisplay.js

@@ -22,15 +22,17 @@ import { Flex } from '@instructure/ui-flex';
 import { TextInput } from '@instructure/ui-text-input';
 import formatMessage from '../../../format-message';
 import { showFlashAlert } from '../../../common/FlashAlert';
-const EDIT_MESSAGE = "\u5982\u679C\u94FE\u63A5\u4E3A\u7A7A\uFF0C\u6587\u672C\u5C06\u663E\u793A\u4E3A\u8BFE\u7A0B\u94FE\u63A5\u540D\u79F0";
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { getIcon, getFriendlyLinkType } from './linkUtils';
+const EDIT_MESSAGE = "\u5982\u679C\u4E0D\u586B\uFF0C\u94FE\u63A5\u6587\u672C\u5C06\u663E\u793A\u4E3A\u8BFE\u7A0B\u94FE\u63A5\u540D\u79F0";
 export const LinkDisplay = _ref => {
   let {
     linkText,
-    Icon,
     placeholderText,
     linkFileName,
     published,
-    handleTextChange
+    handleTextChange,
+    linkType
   } = _ref;
   useEffect(() => {
     showFlashAlert({
@@ -39,14 +41,18 @@ export const LinkDisplay = _ref => {
       srOnly: true
     });
   }, [linkFileName]);
+  const Icon = getIcon(linkType);
+  const linkTypeMessage = getFriendlyLinkType(linkType);
+  const publishedMessage = published ? "\u5DF2\u53D1\u5E03" : "\u53D6\u6D88\u53D1\u5E03";
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     "data-testid": "LinkDisplay"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div"
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(TextInput, {
+    "data-testId": "link-text-input",
     renderLabel: () => "\u6587\u672C\uFF08\u53EF\u9009\uFF09",
-    onChange: (e, value) => handleTextChange(value),
+    onChange: (_e, value) => handleTextChange(value),
     value: linkText,
     placeholder: placeholderText,
     messages: [{
@@ -78,5 +84,7 @@ export const LinkDisplay = _ref => {
     as: "div"
   }, /*#__PURE__*/React.createElement("span", {
     "data-testid": "selected-link-name"
-  }, linkFileName))))));
+  }, linkFileName), linkType && /*#__PURE__*/React.createElement(ScreenReaderContent, {
+    "data-testid": "screenreader_content"
+  }, "link type: " + linkTypeMessage, linkType !== 'navigation' && publishedMessage))))));
 };

package/lib/translated/zh-Hans/modules/rce/plugins/shared/RceFileBrowser.js

@@ -69,7 +69,7 @@ export default function RceFileBrowser(props) {
       title: fileInfo.name,
       href: url,
       embedded_iframe_url,
-      media_id: (_fileInfo$api$embed = fileInfo.api.embed) === null || _fileInfo$api$embed === void 0 ? void 0 : _fileInfo$api$embed.id,
+      media_id: ((_fileInfo$api$embed = fileInfo.api.embed) === null || _fileInfo$api$embed === void 0 ? void 0 : _fileInfo$api$embed.id) || fileInfo.api.mediaEntryId,
       target: '_blank',
       content_type
     };