@instructure/canvas-rce 5.6.16 → 5.6.17

package/canvas/package.json

@@ -0,0 +1,189 @@
+{
+  "name": "@instructure/canvas-rce",
+  "version": "5.1.1",
+  "description": "A component wrapping canvas's common tinymce usage",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "i18n:extract": "format-message extract \"src*/**/*.js\" -g underscored_crc32 -o locales/en.json",
+    "integration-test": "nightwatch --env integration",
+    "lint": "eslint \"src/**/*.js\" \"test/**/*.js\"",
+    "lint:fix": "eslint --fix \"src/**/*.js\" \"test/**/*.js\"",
+    "_test": "Test cafe will be added back to test as part of CORE-2995",
+    "test": "yarn test:mocha && yarn test:jest",
+    "test:mocha": "BABEL_ENV=test-node mocha 'test/**/*.test.js' --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
+    "test:mocha:one": "BABEL_ENV=test-node mocha --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
+    "test:mocha:debug": "BABEL_ENV=test-node mocha --inspect-brk --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
+    "test:jest": "jest --color --runInBand",
+    "test:cafe": "yarn build:cafe && yarn test:cafe:only",
+    "test:cafe:only": "testcafe chrome testcafe/**/*.test.js",
+    "test:cafe:one": "testcafe chrome testcafe/**/*.test.js --test ",
+    "test:cafe:all": "yarn build:cafe && testcafe chrome,firefox,safari testcafe/**/*.test.js",
+    "test:cafe:debug": "testcafe --inspect-brk chrome testcafe/**/*.test.js",
+    "test:watch": "BABEL_ENV=test-node mocha 'test/**/*.test.js' --require @instructure/canvas-theme --require ./babel-register.js --watch",
+    "test:coverage": "cross-env BABEL_ENV=test-node nyc -r html -r json node_modules/.bin/mocha -r jsdom-global/register 'test/**/*.test.js'",
+    "test:jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "debug": "BABEL_ENV=test-node inspect _mocha --no-timeouts --debug-brk 'test/**/*.test.js' --require @instructure/canvas-theme --require ./babel-register.js",
+    "demo": "scripts/demo.sh",
+    "demo:clean": "rm -f github-pages/dist/*",
+    "demo:build": "webpack -c ./webpack.demo.config.js",
+    "demo:dev": "yarn demo:clean && mkdir -p ./github-pages/dist &&  cp ./github-pages/index.html ./github-pages/dist && webpack -c ./webpack.dev.config.js",
+    "installTranslations": "scripts/installTranslations.js",
+    "build:all": "scripts/build.js",
+    "build:canvas": "scripts/build-canvas",
+    "build:watch": "rm -rf es &&  ./node_modules/.bin/babel --out-dir es src --watch",
+    "build:cafe": "webpack --config webpack.testcafe.config.js",
+    "prepublishOnly": "yarn build:all && yarn test",
+    "fmt:check": "prettier -l '**/*.js'",
+    "fmt:fix": "prettier --write '**/*.js'",
+    "clean": "rm -rf lib && rm -rf es && rm -rf coverage && yarn demo:clean"
+  },
+  "author": "Instructure, Inc",
+  "license": "AGPL-3.0",
+  "browserslist": [
+    "extends @instructure/browserslist-config-canvas-lms"
+  ],
+  "nyc": {
+    "include": [
+      "shared/**/*.js",
+      "src/**/*.js"
+    ],
+    "exclude": [],
+    "require": [
+      "@babel/register",
+      "@instructure/canvas-theme"
+    ],
+    "sourceMap": false,
+    "instrument": false
+  },
+  "dependencies": {
+    "@instructure/canvas-media": ">=1.0.0",
+    "@instructure/canvas-theme": "7",
+    "@instructure/k5uploader": ">=1",
+    "@instructure/media-capture": "~8.0.1-rc.11",
+    "@instructure/ui-a11y-content": "7",
+    "@instructure/ui-alerts": "7",
+    "@instructure/ui-avatar": "7",
+    "@instructure/ui-badge": "7",
+    "@instructure/ui-billboard": "7",
+    "@instructure/ui-buttons": "7",
+    "@instructure/ui-checkbox": "7",
+    "@instructure/ui-code-editor": "7.3.0",
+    "@instructure/ui-color-utils": "7",
+    "@instructure/ui-file-drop": "7",
+    "@instructure/ui-flex": "7",
+    "@instructure/ui-focusable": "7",
+    "@instructure/ui-form-field": "7",
+    "@instructure/ui-heading": "7",
+    "@instructure/ui-icons": "7",
+    "@instructure/ui-img": "7",
+    "@instructure/ui-link": "7",
+    "@instructure/ui-list": "7",
+    "@instructure/ui-media-player": "7",
+    "@instructure/ui-modal": "7",
+    "@instructure/ui-motion": "7",
+    "@instructure/ui-overlays": "7",
+    "@instructure/ui-pagination": "7",
+    "@instructure/ui-popover": "7",
+    "@instructure/ui-radio-input": "7",
+    "@instructure/ui-react-utils": "7",
+    "@instructure/ui-simple-select": "7",
+    "@instructure/ui-spinner": "7",
+    "@instructure/ui-svg-images": "7",
+    "@instructure/ui-tabs": "7",
+    "@instructure/ui-text": "7",
+    "@instructure/ui-text-area": "7",
+    "@instructure/ui-text-input": "7",
+    "@instructure/ui-themeable": "7",
+    "@instructure/ui-themes": "7",
+    "@instructure/ui-toggle-details": "7",
+    "@instructure/ui-tooltip": "7",
+    "@instructure/ui-tray": "7",
+    "@instructure/ui-tree-browser": "7",
+    "@instructure/ui-truncate-text": "7",
+    "@instructure/ui-utils": "7",
+    "@instructure/ui-view": "7",
+    "@instructure/uid": "7",
+    "@sheerun/mutationobserver-shim": "^0.3.2",
+    "@tinymce/tinymce-react": "~3.8.4",
+    "aphrodite": "^2",
+    "axios": "^0.21.1",
+    "bloody-offset": "0.0.0",
+    "classnames": "^2.2.5",
+    "format-message": "^6",
+    "format-message-generate-id": "^6",
+    "get-cookie": "1",
+    "i18n-js": "^3",
+    "i18nliner": "~0.2.0",
+    "isomorphic-fetch": "2.2.1",
+    "jquery": "https://github.com/instructure/jquery.git#1.7.2-with-AMD-and-CommonJS",
+    "js-beautify": "1",
+    "keycode": "^2",
+    "lodash": "^4",
+    "minimatch": "~3.0.4",
+    "prop-types": "^15",
+    "react": "^0.14.8 || ^15.0.0 || ^16",
+    "react-dom": "^0.14.8 || ^15.0.0 || ^16",
+    "react-draggable": "^3.3.0",
+    "react-redux": "^5",
+    "react-transition-group": "^1",
+    "redux": "^4",
+    "redux-batch-middleware": "^0.2.0",
+    "redux-thunk": "^2",
+    "scroll-into-view": "https://github.com/bkirkby/scroll-into-view.git#588b0ced98eeecf84e6fb2074aa076e80b7cffab",
+    "tinymce": "^5",
+    "tinymce-a11y-checker": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7",
+    "@babel/core": "^7",
+    "@babel/register": "7",
+    "@instructure/browserslist-config-canvas-lms": ">=2",
+    "@instructure/translations": ">=1",
+    "@instructure/ui-babel-preset": "7",
+    "@testing-library/dom": "^7",
+    "@testing-library/jest-dom": "^5",
+    "@testing-library/react": "^11",
+    "@testing-library/user-event": "^12",
+    "axe-testcafe": "^3",
+    "babel-loader": "^8.0.0",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-inline-json-import": "^0.2.0",
+    "babel-plugin-minify-constant-folding": "^0.5.0",
+    "babel-plugin-minify-dead-code-elimination": "^0.5.0",
+    "babel-plugin-minify-guarded-expressions": "^0.4.3",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
+    "cross-env": "^5.0.0",
+    "eslint-plugin-mocha": "^6",
+    "eslint-plugin-testcafe": "^0.2.1",
+    "fetch-mock": "^6",
+    "format-message-cli": "^6",
+    "format-message-parse": "^6",
+    "jest": "^24",
+    "jest-canvas-mock": "^2",
+    "jest-environment-jsdom-fourteen": "^0.1.0",
+    "jest-junit": "^7",
+    "jsdom": "^13.0.0",
+    "jsdom-global": "^3.0.2",
+    "jsdomify": "^3",
+    "mocha": "^6",
+    "mocha-junit-reporter": "^1.18.0",
+    "mocha-multi-reporters": "^1.1.7",
+    "moxios": "^0.4",
+    "nyc": "^13",
+    "prettier": "^2.2.1",
+    "proxyquire": "1.7.4",
+    "shelljs": "^0.8.3",
+    "sinon": "^7",
+    "skin-deep": "^1",
+    "testcafe": "^1.9.0",
+    "testcafe-react-selectors": "^3.3.0",
+    "webpack": "^4",
+    "webpack-merge": "^5",
+    "webpack-nano": "^1",
+    "webpack-plugin-serve": "^1"
+  },
+  "resolutions": {
+    "format-message-estree-util": "../packages/format-message-estree-util"
+  }
+}

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,