@instructure/canvas-rce 5.6.16 → 5.6.18

package/CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 5.6.18 - 2023-12-06
+
+### Changed
+- Allow more fields from Canvas media object creation
+
+## 5.6.17 - 2023-06-27
+
+### Fixed
+- Added some missing media translations
+- Fixed some a11y/usability issues in the 'Edit Course Link' tray
+- Fixed an icon maker bug related to image compression
+- Fixed some issues related to pasting images in Firefox and embedding media
+
+### Changed
+- Removed the `rce_improved_placeholders`, `rce_better_paste`, `rce_show_studio_media_options`, and
+  `buttons_and_icons_cropper` feature flags
+- Improved the accessibility checker's performance
+
 ## 5.6.16 - 2023-05-17
 
 ### Fixed

package/README.md

@@ -1,49 +1,41 @@
 # Canvas Rich Content Editor
 
-The Canvas LMS Rich Content Editor extracted in it's own npm package for use
-across multiple services. In the canvas ecosystem, this npm module is used
-in pair with a running `canvas-rce-api` microservice.
+> The Canvas LMS Rich Content Editor (RCE) extracted in it's own npm package for use across multiple services
 
-Some features require a running instance of the `canvas-rce-api`,
-but you do not need that instance in order to
-do development on `canvas-rce`. (see [docs/development.md](docs/development.md))
+In the Canvas ecosystem, this npm module is used in conjunction with the Rich Content Service (RCS) microservice. The code for the RCS is also open source and lives in the `canvas-rce-api` repository. (see https://github.com/instructure/canvas-rce-api)
 
-The first customer of the `canvas-rce` is the `canvas-lms` LMS so documentation
-and references throughout documentation might reflect and assume the use of
-`canvas-lms`.
+Some features require a running instance of the `canvas-rce-api`, but you do not need an instance in order to do development on `@instructure/canvas-rce`. (see the [Development section](#development))
 
-## Install and setup
+The primary consumer of the `@instructure/canvas-rce` is `canvas-lms`, so documentation
+and references throughout documentation might reflect and assume the use of `canvas-lms`.
 
-As a published npm module, you can add canvas-rce to your node project by doing
+## Install and Setup
+
+As a published npm module, you can add `@instructure/canvas-rce` to your node project by doing
 the following:
 
 ```bash
-npm install canvas-rce --save
+npm install @instructure/canvas-rce --save
 ```
 
-For guidance on how `canvas-rce` is used within canvas, please reference
-the [canvas-lms use of canvas-rce](https://github.com/instructure/canvas-lms/tree/stable/ui/shared/rce)
-to get an idea on how to incorporate it into your project. Pay
+For guidance on how `@instructure/canvas-rce` is used within Canvas, please reference
+the [canvas-lms use of canvas-rce](https://github.com/instructure/canvas-lms/tree/master/ui/shared/rce) to get an idea on how to incorporate it into your project. Pay
 special attention to the `RichContentEditor.js` and `serviceRCELoader.js`.
 
-Outside of canvas, the `CanvasRce` React component is your entry point.
-_Work is ongoing to make the props to `CanvasRce` more rational.
-Please be patient._
+Outside of Canvas, the `CanvasRce` React component is your entry point.
 
 ## Tests
 
-While canvas consumes the es modules build of the rce,
-Jest tests are run against the commonjs build, so make sure you've built the
-commonjs assets before running tests:
+First, build assets. Then you can run the tests:
 
 ```bash
-yarn build:canvas
+yarn build:all
 yarn test:jest
 ```
 
-There are still legacy mocha tests run with `yarn test:mocha`. `yarn test` runs them all.
+There are still legacy mocha tests run with `yarn test:mocha`. The command `yarn test` runs them all.
 
-### test debugging hints
+### Test Debugging Hints
 
 ```
 yarn test:jest:debug path/to/__test__/file.test.js
@@ -62,23 +54,22 @@ while you iterate.
 
 ## Polyfills
 
-This project makes use of modern JavaScript APIs like Promise, Object.assign,
-Array.prototype.includes, etc. which are present in modern
+This project makes use of modern JavaScript APIs like `Promise`, `Object.assign`,
+`Array.prototype.includes`, etc. which are present in modern
 browsers but may not be present in old browsers like IE 11. In order to not
 send unnecessarily large and duplicated code bundles to the browser, consumers
 are expected to have already globally polyfilled those APIs.
-Canvas only supports modern browsers and the rce has not been tested
+Canvas only supports modern browsers and the RCE has not been tested
 in older browsers like IE. If you need suggestions for how to include
-polyfills in your
-own app, you can just put this in your html above the script that includes
-canvas-rce:
+polyfills in your own app, you can put this in your html above the script that includes
+`@instructure/canvas-rce`:
 
 ```
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?rum=0"></script>
 ```
 
-(See: https://polyfill.io/v2/docs/ for more info)
+(See https://polyfill.io/v2/docs/ for more info)
 
 ## Development
 
-See [DEVELOPMENT.md](./DEVELOPMENT.md)
+See [DEVELOPMENT.md](https://github.com/instructure/canvas-lms/blob/master/packages/canvas-rce/DEVELOPMENT.md)

package/es/bridge/Bridge.js

@@ -33,7 +33,7 @@ export default class Bridge {
           range: selection.getRng()
         };
 
-        if (!link.text) {
+        if (!link.text || link.text.trim().length === 0) {
           link.text = link.title || link.href;
         }
 

package/es/rce/RCEWrapper.js

@@ -21,8 +21,7 @@ import React, { Suspense } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import _ from 'lodash';
 import { StoreProvider } from './plugins/shared/StoreContext';
-import themeable from '@instructure/ui-themeable'; // eslint-disable-line  @typescript-eslint/no-unused-vars
-
+import themeable from '@instructure/ui-themeable';
 import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
 import { Alert } from '@instructure/ui-alerts';
 import { Spinner } from '@instructure/ui-spinner';
@@ -46,14 +45,11 @@ import CanvasContentTray from './plugins/shared/CanvasContentTray';
 import StatusBar, { PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW } from './StatusBar';
 import { VIEW_CHANGE } from './customEvents';
 import ShowOnFocusButton from './ShowOnFocusButton';
-import theme from '../skins/theme'; // eslint-disable-line  @typescript-eslint/no-unused-vars
-
-import { isAudio, isImage, isVideo } from './plugins/shared/fileTypeUtils';
+import theme from '../skins/theme';
 import KeyboardShortcutModal from './KeyboardShortcutModal';
 import AlertMessageArea from './AlertMessageArea';
 import alertHandler from './alertHandler';
 import { isFileLink, isImageEmbed } from './plugins/shared/ContentSelection';
-import { AUDIO_PLAYER_SIZE, VIDEO_SIZE_DEFAULT } from './plugins/instructure_record/VideoOptionsTray/TrayController';
 import { countShouldIgnore } from './plugins/instructure_wordcount/utils/countContent';
 import launchWordcountModal from './plugins/instructure_wordcount/clickCallback';
 import { determineOSDependentKey } from './userOS';
@@ -3610,10 +3606,6 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       }
     };
 
-    this.handleExternalClick = () => {
-      debounce(this.checkAccessibility, 1000)();
-    };
-
     this.handleInputChange = () => {
       this.checkAccessibility();
     };
@@ -3628,9 +3620,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       textarea.dataset.rich_text = true; // start with the textarea and tinymce in sync
 
       textarea.value = this.getCode();
-      textarea.style.height = this.state.height; // Capture click events outside the iframe
-
-      document.addEventListener('click', this.handleExternalClick);
+      textarea.style.height = this.state.height;
 
       if (document.body.classList.contains('Underline-All-Links__enabled')) {
         this.iframe.contentDocument.body.classList.add('Underline-All-Links__enabled');
@@ -3835,8 +3825,9 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
         }
 
         this.storage.removeItem(this.autoSaveKey);
-      });
-      this.checkAccessibility();
+      }); // let the content be restored
+
+      debounce(this.checkAccessibility, 1000)();
     };
 
     this.doAutoSave = function (e) {
@@ -3896,7 +3887,12 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     this.onEditorChange = (content, _editor) => {
       var _this$props$onContent, _this$props2;
 
-      (_this$props$onContent = (_this$props2 = this.props).onContentChange) === null || _this$props$onContent === void 0 ? void 0 : _this$props$onContent.call(_this$props2, content);
+      (_this$props$onContent = (_this$props2 = this.props).onContentChange) === null || _this$props$onContent === void 0 ? void 0 : _this$props$onContent.call(_this$props2, content); // check accessibility when clearing the editor,
+      // all other times should be checked by handleInputChange
+
+      if (content === '') {
+        this.checkAccessibility();
+      }
     };
 
     this.onResize = (_e, coordinates) => {
@@ -4112,22 +4108,16 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     const {
       new_math_equation_handling = false,
       rce_ux_improvements = false,
-      rce_better_paste = false,
       rce_new_external_tool_dialog_in_canvas = false,
-      rce_improved_placeholders = false,
       explicit_latex_typesetting = false,
-      rce_show_studio_media_options = false,
       rce_transform_loaded_content = false,
       media_links_use_attachment_id = false
     } = this.props.features;
     return {
       new_math_equation_handling,
       rce_ux_improvements,
-      rce_better_paste,
       rce_new_external_tool_dialog_in_canvas,
-      rce_improved_placeholders,
       explicit_latex_typesetting,
-      rce_show_studio_media_options,
       rce_transform_loaded_content,
       media_links_use_attachment_id
     };
@@ -4137,7 +4127,8 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     return {
       locale: normalizeLocale(this.props.language),
       flashAlertTimeout: this.props.flashAlertTimeout,
-      timezone: this.props.timezone
+      timezone: this.props.timezone,
+      lockedAttachments: this.props.lockedAttachments
     };
   }
 
@@ -4329,88 +4320,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   }
 
   insertImagePlaceholder(fileMetaProps) {
-    var _this$props$features;
-
-    if ((_this$props$features = this.props.features) !== null && _this$props$features !== void 0 && _this$props$features.rce_improved_placeholders) {
-      return insertPlaceholder(this.mceInstance(), fileMetaProps.name, placeholderInfoFor(fileMetaProps));
-    } // wrap this in a promise primarily so specs can await on the placeholder to be in the DOM
-
-
-    const prom = new Promise((resolve, reject) => {
-      let width, height;
-      let align = 'middle';
-
-      if (isImage(fileMetaProps.contentType) && fileMetaProps.displayAs !== 'link') {
-        const image = new Image();
-
-        image.onload = () => {
-          var _window$visualViewpor4;
-
-          width = image.width;
-          height = image.height;
-          if (!fileMetaProps.domObject.preview) URL.revokeObjectURL(image.src); // we constrain the <img> to max-width: 100%, so scale the size down if necessary
-
-          const maxWidth = Math.floor(this.mceInstance().getBody().clientWidth || ((_window$visualViewpor4 = window.visualViewport) === null || _window$visualViewpor4 === void 0 ? void 0 : _window$visualViewpor4.width) || Number.MAX_SAFE_INTEGER);
-
-          if (width > maxWidth) {
-            height = Math.round(maxWidth / width * height);
-            width = maxWidth;
-          }
-
-          width = `${width}px`;
-          height = `${height}px`;
-          insertImagePlaceholderFRD(this.mceInstance(), fileMetaProps.name, width, height, align);
-          resolve();
-        };
-
-        image.onerror = () => {
-          if (!fileMetaProps.domObject.preview) URL.revokeObjectURL(image.src);
-          reject();
-        };
-
-        image.src = fileMetaProps.domObject.preview || URL.createObjectURL(fileMetaProps.domObject);
-      } else {
-        if (isVideo(fileMetaProps.contentType || fileMetaProps.type)) {
-          width = VIDEO_SIZE_DEFAULT.width;
-          height = VIDEO_SIZE_DEFAULT.height;
-          align = 'bottom';
-        } else if (isAudio(fileMetaProps.contentType || fileMetaProps.type)) {
-          width = AUDIO_PLAYER_SIZE.width;
-          height = AUDIO_PLAYER_SIZE.height;
-          align = 'bottom';
-        } else {
-          width = `${fileMetaProps.name.length}rem`;
-          height = '1rem';
-        }
-
-        insertImagePlaceholderFRD(this.mceInstance(), fileMetaProps.name, width, height, align);
-        resolve();
-      }
-
-      function insertImagePlaceholderFRD(editor, imgName, imgWidth, imgHeight, imgAlign) {
-        // if you're wondering, the &nbsp; scatter about in the svg
-        // is because tinymce will strip empty elements
-        const markup = `
-<span
-  aria-label="${formatMessage('Loading')}"
-  data-placeholder-for="${encodeURIComponent(imgName)}"
-  style="width: ${imgWidth}; height: ${imgHeight}; vertical-align: ${imgAlign};"
->
-  <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>`;
-        editor.undoManager.ignore(() => {
-          editor.execCommand('mceInsertContent', false, markup);
-        });
-      }
-    });
-    return prom;
+    return insertPlaceholder(this.mceInstance(), fileMetaProps.name, placeholderInfoFor(fileMetaProps));
   }
 
   insertVideo(video) {
@@ -4431,20 +4341,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   }
 
   removePlaceholders(name) {
-    var _this$props$features2;
-
-    if ((_this$props$features2 = this.props.features) !== null && _this$props$features2 !== void 0 && _this$props$features2.rce_improved_placeholders) {
-      removePlaceholder(this.mceInstance(), name);
-    } else {
-      const placeholder = this.mceInstance().dom.doc.querySelector(`[data-placeholder-for="${encodeURIComponent(name)}"]`);
-
-      if (placeholder) {
-        const editor = this.mceInstance();
-        editor.undoManager.ignore(() => {
-          editor.dom.remove(placeholder);
-        });
-      }
-    }
+    removePlaceholder(this.mceInstance(), name);
   }
 
   insertLink(link) {
@@ -4845,24 +4742,20 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   }
 
   wrapOptions() {
-    var _this$props$trayProps2, _this$props$trayProps3, _this$props$features3, _this$props$features4, _this$props$features5, _this$props$trayProps4, _sanitizePlugins;
+    var _this$props$trayProps2, _this$props$trayProps3, _this$props$features, _this$props$trayProps4, _sanitizePlugins;
 
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const rcsExists = !!((_this$props$trayProps2 = this.props.trayProps) !== null && _this$props$trayProps2 !== void 0 && _this$props$trayProps2.host && (_this$props$trayProps3 = this.props.trayProps) !== null && _this$props$trayProps3 !== void 0 && _this$props$trayProps3.jwt);
     const userLocale = editorLanguage(this.language);
     const setupCallback = options.setup;
     const isOnCanvasDomain = window.origin === this.props.canvasOrigin;
-    const canvasPlugins = rcsExists ? ['instructure_links', 'instructure_image', 'instructure_documents', 'instructure_equation', !isOnCanvasDomain || (_this$props$features3 = this.props.features) !== null && _this$props$features3 !== void 0 && _this$props$features3.rce_new_external_tool_dialog_in_canvas ? 'instructure_rce_external_tools' : 'instructure_external_tools', 'a11y_checker'] : ['instructure_links'];
+    const canvasPlugins = rcsExists ? ['instructure_links', 'instructure_image', 'instructure_documents', 'instructure_equation', !isOnCanvasDomain || (_this$props$features = this.props.features) !== null && _this$props$features !== void 0 && _this$props$features.rce_new_external_tool_dialog_in_canvas ? 'instructure_rce_external_tools' : 'instructure_external_tools', 'a11y_checker'] : ['instructure_links'];
 
     if (rcsExists && !this.props.instRecordDisabled) {
       canvasPlugins.splice(2, 0, 'instructure_record');
     }
 
-    if ((_this$props$features4 = this.props.features) !== null && _this$props$features4 !== void 0 && _this$props$features4.rce_show_studio_media_options) {
-      canvasPlugins.push('instructure_studio_media_options');
-    }
-
-    const pastePlugins = rcsExists && (_this$props$features5 = this.props.features) !== null && _this$props$features5 !== void 0 && _this$props$features5.rce_better_paste ? ['instructure_paste', 'paste'] : ['paste'];
+    const pastePlugins = rcsExists ? ['instructure_paste', 'paste'] : ['paste'];
 
     if (rcsExists && this.props.use_rce_icon_maker && ((_this$props$trayProps4 = this.props.trayProps) === null || _this$props$trayProps4 === void 0 ? void 0 : _this$props$trayProps4.contextType) === 'course') {
       canvasPlugins.push('instructure_icon_maker');
@@ -4964,7 +4857,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       // handles all of that complexity. It that ever changes in the
       // future in an upgraded version, we will have to update the
       // logic in those other places as well.
-      plugins: mergePlugins(['autolink', 'media', 'table', 'link', 'directionality', 'lists', 'textpattern', 'hr', 'instructure-ui-icons', 'instructure_condensed_buttons', 'instructure_links', 'instructure_html_view', 'instructure_media_embed', 'a11y_checker', 'wordcount', 'instructure_wordcount', ...pastePlugins, ...canvasPlugins], // filter out the plugins designated for removal
+      plugins: mergePlugins(['autolink', 'media', 'table', 'link', 'directionality', 'lists', 'textpattern', 'hr', 'instructure-ui-icons', 'instructure_condensed_buttons', 'instructure_links', 'instructure_html_view', 'instructure_media_embed', 'a11y_checker', 'wordcount', 'instructure_wordcount', 'instructure_studio_media_options', ...pastePlugins, ...canvasPlugins], // filter out the plugins designated for removal
       (_sanitizePlugins = sanitizePlugins(options.plugins)) === null || _sanitizePlugins === void 0 ? void 0 : _sanitizePlugins.filter(p => p.length > 0 && p[0] !== '-'), this.pluginsToExclude),
       textpattern_patterns: [{
         start: '* ',

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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);
   });
 }