@instructure/canvas-rce 5.6.16 → 5.6.17

package/lib/translated/sv_SE/modules/rce/__tests__/RCEWrapper.test.js

@@ -277,11 +277,8 @@ describe('RCEWrapper', () => {
         expect(rce.checkReadyToGetCode(stub)).toEqual(false);
       });
     });
-    describe('insertImagePlaceholder (new)', () => {
+    describe('insertImagePlaceholder', () => {
       // Full testing of placehodlers can be found in loadingPlaceholder.test.ts
-      beforeEach(() => {
-        rce.props.features.rce_improved_placeholders = true;
-      });
       it('can insert a placeholder', async () => {
         const square = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFElEQVR42mNk+A+ERADGUYX0VQgAXAYT9xTSUocAAAAASUVORK5CYII=';
         const props = {
@@ -297,172 +294,6 @@ describe('RCEWrapper', () => {
         expect(jsdomInnerText(placeholderElem)).toContain('square.png');
       });
     });
-    describe('insertImagePlaceholder (legacy)', () => {
-      function makePlaceholderMarkup(name) {
-        let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '10px';
-        let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '10px';
-        let valign = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'middle';
-        return `
-<span
-  aria-label=\"Loading\"
-  data-placeholder-for=\"${name}\"
-  style=\"width: ${width}; height: ${height}; vertical-align: ${valign};\"
->
-  <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" height=\"100px\" width=\"100px\">
-    <g style=\"stroke-width:.5rem;fill:none;stroke-linecap:round;\">&nbsp;
-      <circle class=\"c1\" cx=\"50%\" cy=\"50%\" r=\"28px\">&nbsp;</circle>
-      <circle class=\"c2\" cx=\"50%\" cy=\"50%\" r=\"28px\">&nbsp;</circle>
-      &nbsp;
-    </g>
-    &nbsp;
-  </svg>
-</span>`;
-      }
-
-      let globalImage;
-
-      function mockImage(props) {
-        // mock enough for RCEWrapper.insertImagePlaceholder
-        globalImage = global.Image;
-
-        global.Image = function () {
-          const img = {
-            _src: null,
-            width: '10',
-            height: '10',
-            ...props,
-
-            get src() {
-              return this._src;
-            },
-
-            // when the src is set, wait a tick then call the onload handler
-            set src(newSrc) {
-              this._src = newSrc;
-              window.setTimeout(() => this.onload(), 1);
-            }
-
-          };
-          return img;
-        };
-      }
-
-      function restoreImage() {
-        global.Image = globalImage;
-      }
-
-      afterEach(() => {
-        restoreImage();
-      });
-      beforeEach(() => {
-        rce.props.features.rce_improved_placeholders = false;
-      });
-      it('inserts a placeholder image with the proper metadata', async () => {
-        mockImage();
-        const greenSquare = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFElEQVR42mNk+A+ERADGUYX0VQgAXAYT9xTSUocAAAAASUVORK5CYII=';
-        const props = {
-          name: 'green_square',
-          domObject: {
-            preview: greenSquare
-          },
-          contentType: 'image/png'
-        };
-        const imageMarkup = makePlaceholderMarkup('green_square');
-        await rce.insertImagePlaceholder(props);
-        expect(editorCommandSpy).toHaveBeenCalledWith('mceInsertContent', false, imageMarkup);
-      });
-      it('inserts a placeholder image with an encoded name to prevent nested quotes', async () => {
-        mockImage();
-        const greenSquare = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFElEQVR42mNk+A+ERADGUYX0VQgAXAYT9xTSUocAAAAASUVORK5CYII=';
-        const props = {
-          name: 'filename "with" quotes',
-          domObject: {
-            preview: greenSquare
-          },
-          contentType: 'image/png'
-        };
-        const imageMarkup = makePlaceholderMarkup('filename%20%22with%22%20quotes');
-        await rce.insertImagePlaceholder(props);
-        expect(editorCommandSpy).toHaveBeenCalledWith('mceInsertContent', false, imageMarkup);
-      }); // jsdom doesn't actually render anything so any query about the size of an element returns 0
-      // this makes this test impossible in jest + jsdom
-      // it('constrains the image placeholder to the width of the rce', async () => {
-      //   mockImage({width: 1000, height: 1000})
-      //   const greenSquare =
-      //     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFElEQVR42mNk+A+ERADGUYX0VQgAXAYT9xTSUocAAAAASUVORK5CYII='
-      //   const props = {
-      //     name: 'green_square',
-      //     domObject: {
-      //       preview: greenSquare,
-      //     },
-      //     contentType: 'image/png',
-      //   }
-      //
-      //   const imageMarkup = `
-      //     <span
-      //       aria-label=\"Loading\"
-      //       data-placeholder-for=\"green_square\"
-      //       style=\"width: 500px; height: 500px; vertical-align: middle;\"
-      //     >
-      //       <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" height=\"100px\" width=\"100px\">
-      //         <g style=\"stroke-width:.5rem;fill:none;stroke-linecap:round;\">&nbsp;
-      //           <circle class=\"c1\" cx=\"50%\" cy=\"50%\" r=\"28px\">&nbsp;</circle>
-      //           <circle class=\"c2\" cx=\"50%\" cy=\"50%\" r=\"28px\">&nbsp;</circle>
-      //           &nbsp;
-      //         </g>
-      //         &nbsp;
-      //       </svg>
-      //     </span>`
-      //   await rce.insertImagePlaceholder(props)
-      //   expect(editorCommandSpy).toHaveBeenCalledWith('mceInsertContent', false, imageMarkup)
-      // })
-
-      it('inserts a text file placeholder image with the proper metadata', async () => {
-        const props = {
-          name: 'file.txt',
-          domObject: {},
-          contentType: 'text/plain'
-        };
-        const imageMarkup = makePlaceholderMarkup('file.txt', '8rem', '1rem');
-        await rce.insertImagePlaceholder(props);
-        expect(editorCommandSpy).toHaveBeenCalledWith('mceInsertContent', false, imageMarkup);
-      });
-      it('inserts a video file placeholder image with the proper metadata', async () => {
-        const props = {
-          name: 'file.mov',
-          domObject: {},
-          contentType: 'video/quicktime'
-        };
-        const imageMarkup = makePlaceholderMarkup('file.mov', '400px', '225px', 'bottom');
-        await rce.insertImagePlaceholder(props);
-        expect(editorCommandSpy).toHaveBeenCalledWith('mceInsertContent', false, imageMarkup);
-      });
-      it('inserts an audio file placeholder image with the proper metadata', async () => {
-        const props = {
-          name: 'file.mp3',
-          domObject: {},
-          contentType: 'audio/mp3'
-        };
-        const imageMarkup = makePlaceholderMarkup('file.mp3', '320px', '14.25rem', 'bottom');
-        await rce.insertImagePlaceholder(props);
-        expect(editorCommandSpy).toHaveBeenCalledWith('mceInsertContent', false, imageMarkup);
-      });
-      it('inserts a little placeholder for images displayed as links', async () => {
-        mockImage();
-        const square = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFElEQVR42mNk+A+ERADGUYX0VQgAXAYT9xTSUocAAAAASUVORK5CYII=';
-        const props = {
-          name: 'square.png',
-          domObject: {
-            preview: square
-          },
-          contentType: 'image/png',
-          displayAs: 'link'
-        };
-        const imageMarkup = makePlaceholderMarkup('square.png', '10rem', '1rem');
-        await rce.insertImagePlaceholder(props);
-        expect(editorCommandSpy).toHaveBeenCalledWith('mceInsertContent', false, imageMarkup);
-      });
-    });
     describe('removePlaceholders', () => {
       it('removes placeholders that match the given name', () => {
         const placeholder = document.createElement('img');
@@ -845,24 +676,6 @@ describe('RCEWrapper', () => {
       const options = wrapper.wrapOptions({});
       expect(options.plugins.indexOf('instructure_record')).toEqual(-1);
     });
-    it('includes instructure_studio_media_options in plugins if feature enabled', () => {
-      const wrapper = createBasicElement({
-        features: {
-          rce_show_studio_media_options: true
-        }
-      });
-      const options = wrapper.wrapOptions({});
-      expect(options.plugins).toContain('instructure_studio_media_options');
-    });
-    it('does not include instructure_studio_media_options in plugins if feature disabled', () => {
-      const wrapper = createBasicElement({
-        features: {
-          rce_show_studio_media_options: false
-        }
-      });
-      const options = wrapper.wrapOptions({});
-      expect(options.plugins).not.toContain('instructure_studio_media_options');
-    });
     it('instructure_rce_external_tools if enabled and rcs available', () => {
       for (const rcsAvailable in [true, false]) {
         for (const flagEnabled in [true, false]) {

package/lib/translated/sv_SE/modules/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/translated/sv_SE/modules/rce/plugins/instructure_image/__tests__/ImageEmbedOptions.test.js

@@ -16,6 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { CUSTOM, EXTRA_LARGE, LARGE, MEDIUM, MIN_WIDTH, MIN_HEIGHT, SMALL, fromImageEmbed, fromVideoEmbed, labelForImageSize, scaleImageForHeight, scaleImageForWidth, scaleToSize } from '../ImageEmbedOptions';
+import RCEGlobals from '../../../RCEGlobals';
 Object.defineProperty(HTMLImageElement.prototype, 'naturalHeight', {
   get() {
     return this._naturalHeight;
@@ -536,5 +537,34 @@ describe('RCE > Plugins > Instructure Image > ImageEmbedOptions', () => {
       expect(getVideoOptions().videoSize).toEqual('custom'); // cuz it's 0x0
     }); // that's all we can unit test because we can't fully setup the video,
     // and the element doesn't have a size in jsdom
+
+    describe('attachmentId', () => {
+      beforeEach(() => {
+        $video.innerHTML = '<iframe allow="fullscreen" allowfullscreen data-media-id="17" data-media-type="video" src="/media_attachments_iframe/17?type=video&embedded=true" style="width:400px;height:225px;display:inline-block;" title="Video player for filename.mov"></iframe>';
+        RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+          media_links_use_attachment_id: true
+        });
+      });
+      afterEach(() => {
+        jest.resetAllMocks();
+      });
+      it('is included', () => {
+        expect(getVideoOptions().attachmentId).toEqual('17');
+      });
+      it('is not included', () => {
+        RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+          media_links_use_attachment_id: false
+        });
+        expect(getVideoOptions().attachmentId).toBeUndefined();
+      });
+      it('is not included due invalid src', () => {
+        $video.innerHTML = '<iframe allow="fullscreen" allowfullscreen data-media-id="17" data-media-type="video" src="/blahblahblah/17?type=video&embedded=true" style="width:400px;height:225px;display:inline-block;" title="Video player for filename.mov"></iframe>';
+        expect(getVideoOptions().attachmentId).toBeUndefined();
+      });
+      it('is not included due non-existent src', () => {
+        $video.innerHTML = '<iframe allow="fullscreen" allowfullscreen data-media-id="17" data-media-type="video" style="width:400px;height:225px;display:inline-block;" title="Video player for filename.mov"></iframe>';
+        expect(getVideoOptions().attachmentId).toBeUndefined();
+      });
+    });
   });
 });

package/lib/translated/sv_SE/modules/rce/plugins/instructure_links/components/LinkOptionsTray/__tests__/LinkOptionsTray.test.js

@@ -143,6 +143,19 @@ describe('RCE "Links" Plugin > LinkOptionsTray', () => {
         expect(props.onSave).toHaveBeenCalledTimes(0);
       });
     });
+    describe('when a Link url is only spaces', () => {
+      beforeEach(() => {
+        props.content.text = '   ';
+        renderComponent();
+      });
+      it('is disabled', () => {
+        expect(tray.$doneButton.disabled).toBe(true);
+      });
+      it('does not call the .onSave prop when clicked', () => {
+        tray.$doneButton.click();
+        expect(props.onSave).toHaveBeenCalledTimes(0);
+      });
+    });
     describe('when clicked', () => {
       it('prevents the default click handler', () => {
         renderComponent();

package/lib/translated/sv_SE/modules/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"
   }, "Done"))))));

package/lib/translated/sv_SE/modules/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: "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/translated/sv_SE/modules/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/translated/sv_SE/modules/rce/plugins/instructure_rce_external_tools/__tests__/ExternalToolsEnv.test.js

@@ -106,17 +106,4 @@ describe('ExternalToolsEnv', () => {
     rceWrapper.props.externalToolsConfig.ltiIframeAllowances = ['c', 'd'];
     expect(editorEnv().ltiIframeAllowPolicy).toEqual('c; d');
   });
-  test('studioMediaOptionsEnabled', () => {
-    expect(nullEnv().studioMediaOptionsEnabled).toEqual(false); // feature off
-
-    rceWrapper.props.features = {
-      rce_show_studio_media_options: false
-    };
-    expect(editorEnv().studioMediaOptionsEnabled).toEqual(false); // feature on
-
-    rceWrapper.props.features = {
-      rce_show_studio_media_options: true
-    };
-    expect(editorEnv().studioMediaOptionsEnabled).toEqual(true);
-  });
 });

package/lib/translated/sv_SE/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/sv_SE/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/sv_SE/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/sv_SE/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];