@instructure/canvas-rce 5.13.6 → 5.14.0

package/CHANGELOG.md

@@ -5,7 +5,21 @@ 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.13.5 - 2024-09-25
+## 5.14.0 - 2024-10-18
+
+### Added
+
+- New optional media player for upload previews
+
+### Fixed
+
+- Keyboard trap when switching to the HTML Editor
+
+### Changed
+
+- Upgraded React to 18
+
+## 5.13.6 - 2024-09-25
 
 ### Fixed
 
@@ -22,7 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added IDs to multiple objects missing IDs
 - Add loading spinners to image uploads
 
-## 5.13.4 - 2024-08-12
+## 5.13.5 - 2024-08-12
 
 ### Fixed
 

package/{es/rce/__mocks__/styleMock.js → __mocks__/@instructure/studio-player/_mockStudioPlayer.js}

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 - present Instructure, Inc.
+ * Copyright (C) 2024 - present Instructure, Inc.
  *
  * This file is part of Canvas.
  *
@@ -15,4 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-module.export = {};
+
+module.exports = {
+  StudioPlayer: () => null
+};

package/es/rce/RCEWrapper.js

@@ -272,10 +272,6 @@ class RCEWrapper extends React.Component {
       this.handleFocus(event);
     };
 
-    this.handleFocusHtmlEditor = event => {
-      this.handleFocus(event);
-    };
-
     this.handleBlurEditor = (event, _editor) => {
       const ifr = this.iframe;
       ifr && ifr.parentElement.classList.remove('active');
@@ -906,7 +902,8 @@ class RCEWrapper extends React.Component {
       rce_transform_loaded_content = false,
       media_links_use_attachment_id = false,
       rce_find_replace = false,
-      file_verifiers_for_quiz_links = false
+      file_verifiers_for_quiz_links = false,
+      consolidated_media_player = false
     } = this.props.features;
     return {
       new_math_equation_handling,
@@ -914,7 +911,8 @@ class RCEWrapper extends React.Component {
       rce_transform_loaded_content,
       media_links_use_attachment_id,
       file_verifiers_for_quiz_links,
-      rce_find_replace
+      rce_find_replace,
+      consolidated_media_player
     };
   }
 
@@ -1314,19 +1312,6 @@ class RCEWrapper extends React.Component {
         break;
 
       case PRETTY_HTML_EDITOR_VIEW:
-        {
-          const cmta = this._elementRef.current.querySelector('.CodeMirror textarea');
-
-          if (cmta) {
-            cmta.focus();
-          } else {
-            window.setTimeout(() => {
-              var _this$_elementRef$cur3;
-
-              (_this$_elementRef$cur3 = this._elementRef.current.querySelector('.CodeMirror textarea')) === null || _this$_elementRef$cur3 === void 0 ? void 0 : _this$_elementRef$cur3.focus();
-            }, 200);
-          }
-        }
         break;
 
       case RAW_HTML_EDITOR_VIEW:
@@ -1400,7 +1385,7 @@ class RCEWrapper extends React.Component {
       // we often need a moment to see if focus comes back
       event && event.persist && event.persist();
       this.blurTimer = window.setTimeout(() => {
-        var _this$_elementRef$cur4, _event$focusedEditor, _event$relatedTarget, _event$relatedTarget$;
+        var _this$_elementRef$cur3, _event$focusedEditor, _event$relatedTarget, _event$relatedTarget$;
 
         this.blurTimer = 0;
 
@@ -1410,7 +1395,7 @@ class RCEWrapper extends React.Component {
           return;
         }
 
-        if ((_this$_elementRef$cur4 = this._elementRef.current) !== null && _this$_elementRef$cur4 !== void 0 && _this$_elementRef$cur4.contains(document.activeElement)) {
+        if ((_this$_elementRef$cur3 = this._elementRef.current) !== null && _this$_elementRef$cur3 !== void 0 && _this$_elementRef$cur3.contains(document.activeElement)) {
           // focus is still somewhere w/in me
           return;
         }
@@ -1763,21 +1748,14 @@ class RCEWrapper extends React.Component {
   }
 
   setEditorView(view) {
-    var _this$_elementRef$cur5;
-
     switch (view) {
-      case RAW_HTML_EDITOR_VIEW:
-        this.mceInstance().hide();
-        break;
-
-      case PRETTY_HTML_EDITOR_VIEW:
-        this.mceInstance().hide();
-        (_this$_elementRef$cur5 = this._elementRef.current.querySelector('.CodeMirror')) === null || _this$_elementRef$cur5 === void 0 ? void 0 : _this$_elementRef$cur5.CodeMirror.setCursor(0, 0);
-        break;
-
       case WYSIWYG_VIEW:
         this.setCode(this.textareaValue());
         this.mceInstance().show();
+        break;
+
+      default:
+        this.mceInstance().hide();
     }
   }
 
@@ -1806,8 +1784,7 @@ class RCEWrapper extends React.Component {
       onChange: value => {
         this.getTextarea().value = value;
         this.handleTextareaChange();
-      },
-      onFocus: this.handleFocusHtmlEditor
+      }
     })));
   }
 

package/es/rce/RceHtmlEditor.js

@@ -18,38 +18,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { func, string } from 'prop-types';
 import formatMessage from '../format-message';
-import { CodeEditor } from '@instructure/ui-code-editor';
+import { SourceCodeEditor } from '@instructure/ui-source-code-editor';
 import beautify from 'js-beautify';
-const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
-  let {
-    onFocus,
-    ...props
-  } = _ref;
+const RceHtmlEditor = /*#__PURE__*/React.forwardRef((props, editorRef) => {
   const [code, setCode] = useState(props.code);
   const label = formatMessage('html code editor');
   const [dir, setDir] = useState(getComputedStyle(document.body, null).direction);
-  const [codeMirrorEditorDiv, setCodeMirrorEditorDiv] = useState(null);
-  useEffect(() => {
-    ;
-
-    (async () => {
-      const p = new Promise(resolve => {
-        const timerid = setInterval(() => {
-          // scoping querySelector to the container div makes sure we're targeting this CodeEditor
-          // The CodeMirror docs (https://codemirror.net/doc/manual.html#styling)
-          // say this is the element we use to set the editor's height
-          const editor = editorRef.current.querySelector('.CodeMirror');
-
-          if (editor) {
-            clearInterval(timerid);
-            setCodeMirrorEditorDiv(editor);
-            resolve();
-          }
-        }, 60);
-      });
-      await p;
-    })();
-  }, [editorRef]);
   useEffect(() => {
     setCode(beautify.html(props.code)); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -78,23 +52,7 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
 
     setDir(getComputedStyle(editorRef.current || document.body, null).direction);
   }, [dir, editorRef]);
-  useEffect(() => {
-    if (codeMirrorEditorDiv) {
-      codeMirrorEditorDiv.CodeMirror.setSize(null, props.height);
-      codeMirrorEditorDiv.style.margin = '0';
-      codeMirrorEditorDiv.style.border = '0';
-    }
-  }, [codeMirrorEditorDiv, props.height]);
-  const isFocused = useRef(false); // move cursor to the top of the html code when the editor is focused for the first time
-
-  const handleFocus = useCallback((editor, event) => {
-    if (!isFocused.current) {
-      editor.setCursor(0, 0);
-      isFocused.current = true;
-    }
-
-    onFocus(event);
-  }, [onFocus]); // setting height on the container keeps the RCE toolbar from jumping
+  const direction = ['ltr', 'rtl'].includes(dir) ? dir : 'ltr'; // setting height on the container keeps the RCE toolbar from jumping
 
   return /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
@@ -104,39 +62,30 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
       overflow: 'hidden',
       textAlign: 'start'
     }
-  }, /*#__PURE__*/React.createElement(CodeEditor, {
+  }, /*#__PURE__*/React.createElement(SourceCodeEditor, {
     label: label,
     language: "html",
-    options: {
-      lineNumbers: true,
-      lineWrapping: true,
-      autofocus: false,
-      spellcheck: true,
-      extraKeys: {
-        Tab: false,
-        'Shift-Tab': false
-      },
-      screenReaderLabel: label,
-      direction: dir,
-      rtlMoveVisually: true
-    },
+    lineNumbers: true,
+    lineWrapping: true,
+    autofocus: true,
+    spellcheck: true,
+    direction: direction,
+    rtlMoveVisually: true,
+    height: props.height,
     value: code,
     onChange: value => {
       setCode(value);
       props.onChange(value);
-    },
-    onFocus: handleFocus
+    }
   }));
 });
 RceHtmlEditor.propTypes = {
   code: string.isRequired,
   height: string,
-  onChange: func,
-  onFocus: func
+  onChange: func
 };
 RceHtmlEditor.defaultProps = {
   height: 'auto',
-  onChange: _value => {},
-  onFocus: () => {}
+  onChange: _value => {}
 };
 export default RceHtmlEditor;

package/es/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -77,7 +77,7 @@ export default class EquationEditorModal extends Component {
         onModalDismiss,
         onEquationSubmit
       } = this.props;
-      const output = this.state.advanced ? this.state.workingFormula : this.mathField.getValue();
+      const output = this.state.advanced ? this.state.workingFormula : this.getMathFiled();
 
       if (output) {
         onEquationSubmit(output);
@@ -99,7 +99,7 @@ export default class EquationEditorModal extends Component {
     this.toggleAdvanced = () => {
       this.setState(state => {
         if (state.advanced) {
-          this.mathField.setValue(state.workingFormula || '');
+          this.setMathField(state.workingFormula || '');
           return {
             advanced: false,
             workingFormula: ''
@@ -107,7 +107,7 @@ export default class EquationEditorModal extends Component {
         } else {
           return {
             advanced: true,
-            workingFormula: this.mathField.getValue()
+            workingFormula: this.getMathFiled()
           };
         }
       });
@@ -281,7 +281,7 @@ export default class EquationEditorModal extends Component {
     this.registerBasicEditorListener();
     this.setPreviewElementContent();
     this.stubMacros();
-    if (!this.state.advanced) this.mathField.setValue(this.state.workingFormula);
+    if (!this.state.advanced) this.setMathField(this.state.workingFormula);
     this.insertNewRange();
   }
 
@@ -303,6 +303,14 @@ export default class EquationEditorModal extends Component {
     });
   }
 
+  setMathField(formula) {
+    this.mathField.setValue(formula);
+  }
+
+  getMathFiled() {
+    return this.mathField.getValue();
+  }
+
 }
 EquationEditorModal.debounceRate = 1000;
 EquationEditorModal.propTypes = {

package/es/rce/plugins/instructure_record/AudioOptionsTray/TrayController.js

@@ -20,6 +20,7 @@ import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
 import { asAudioElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
 import AudioOptionsTray from '.';
+import RCEGlobals from '../../../RCEGlobals';
 export const CONTAINER_ID = 'instructure-audio-options-tray-container';
 export default class TrayController {
   constructor() {
@@ -87,14 +88,17 @@ export default class TrayController {
   }
 
   _applyAudioOptions(audioOptions) {
-    if (!audioOptions.media_object_id || audioOptions.media_object_id === 'undefined') {
+    const hasAttachmentId = RCEGlobals.getFeatures().media_links_use_attachment_id && audioOptions.attachment_id;
+
+    if (!hasAttachmentId && (!audioOptions.media_object_id || audioOptions.media_object_id === 'undefined')) {
       return;
     }
 
     const container = this._audioContainer;
     return audioOptions.updateMediaObject({
       media_object_id: audioOptions.media_object_id,
-      subtitles: audioOptions.subtitles
+      subtitles: audioOptions.subtitles,
+      attachment_id: audioOptions.attachment_id
     }).then(() => container === null || container === void 0 ? void 0 : container.contentWindow.location.reload()).catch(ex => {
       // eslint-disable-next-line no-console
       console.error('Failed updating audio captions', ex);
@@ -109,7 +113,7 @@ export default class TrayController {
     window.addEventListener('message', event => {
       var _event$data;
 
-      if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === "media_tracks_response") {
+      if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === 'media_tracks_response') {
         var _event$data2;
 
         cb(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : _event$data2.payload);

package/es/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -51,6 +51,7 @@ export default function AudioOptionsTray(_ref) {
     onSave({
       media_object_id: audioOptions.id,
       subtitles,
+      attachment_id: audioOptions.attachmentId,
       updateMediaObject: contentProps.updateMediaObject
     });
   };

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

@@ -146,12 +146,15 @@ export default class TrayController {
       // If not, we can't update the MediaObject in the canvas db.
 
 
-      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' && !videoOptions.editLocked) {
+      const hasMediaId = videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' || data.attachment_id && data.attachment_id !== 'undefined';
+
+      if (hasMediaId && !videoOptions.editLocked) {
         videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
             this.$videoContainer.contentWindow.postMessage({
               subject: 'reload_media',
-              media_object_id: videoOptions.media_object_id
+              media_object_id: videoOptions.media_object_id,
+              attachment_id: data.attachment_id
             }, bridge.canvasOrigin);
           }
         }).catch(ex => {
@@ -185,7 +188,7 @@ export default class TrayController {
     window.addEventListener('message', event => {
       var _event$data;
 
-      if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === "media_tracks_response") {
+      if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === 'media_tracks_response') {
         var _event$data2;
 
         cb(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : _event$data2.payload);

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

@@ -79,27 +79,32 @@ export default function (ed, document) {
     };
 
     const trayProps = Bridge.trayProps.get(ed);
-    ReactDOM.render( /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(UploadMedia, {
-      "data-mce-component": true,
-      rcsConfig: {
-        contextType: ed.settings.canvas_rce_user_context.type,
-        contextId: ed.settings.canvas_rce_user_context.id,
-        origin: originFromHost(contentProps.host),
-        headers: headerFor(contentProps.jwt)
-      },
-      userLocale: Bridge.userLocale,
-      mountNode: instuiPopupMountNode,
-      open: true,
-      liveRegion: () => document.getElementById('flash_screenreader_holder'),
-      onStartUpload: fileProps => handleStartUpload(fileProps),
-      onUploadComplete: (err, data) => handleUpload(err, data, contentProps.mediaUploadComplete, uploadBookmark),
-      onDismiss: handleDismiss,
-      tabs: {
-        record: true,
-        upload: true
-      },
-      uploadMediaTranslations: Bridge.uploadMediaTranslations,
-      media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id
-    })), container);
+    ReactDOM.render( /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => {
+      var _RCEGlobals$getFeatur;
+
+      return /*#__PURE__*/React.createElement(UploadMedia, {
+        "data-mce-component": true,
+        rcsConfig: {
+          contextType: ed.settings.canvas_rce_user_context.type,
+          contextId: ed.settings.canvas_rce_user_context.id,
+          origin: originFromHost(contentProps.host),
+          headers: headerFor(contentProps.jwt)
+        },
+        userLocale: Bridge.userLocale,
+        mountNode: instuiPopupMountNode,
+        open: true,
+        liveRegion: () => document.getElementById('flash_screenreader_holder'),
+        onStartUpload: fileProps => handleStartUpload(fileProps),
+        onUploadComplete: (err, data) => handleUpload(err, data, contentProps.mediaUploadComplete, uploadBookmark),
+        onDismiss: handleDismiss,
+        tabs: {
+          record: true,
+          upload: true
+        },
+        uploadMediaTranslations: Bridge.uploadMediaTranslations,
+        media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id,
+        useStudioPlayer: (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) === null || _RCEGlobals$getFeatur === void 0 ? void 0 : _RCEGlobals$getFeatur.consolidated_media_player
+      });
+    }), container);
   });
 }

package/es/rce/plugins/shared/ContentSelection.js

@@ -16,10 +16,12 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedOptions';
-import { isOnlyTextSelected } from '../../contentInsertionUtils';
+import { isOnlyTextSelected } from '../../contentInsertionUtils'; // eslint-disable-next-line import/no-nodejs-modules
+
 import * as url from 'url';
 import formatMessage from '../../../format-message';
 import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
+import RCEGlobals from '../../RCEGlobals';
 const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
 export const LINK_TYPE = 'link';
 export const FILE_LINK_TYPE = 'file-link';
@@ -143,6 +145,15 @@ export function asAudioElement($element) {
     } catch (e) {}
   }
 
+  if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
+    const source = $audioIframe.getAttribute('src');
+    const matches = source === null || source === void 0 ? void 0 : source.match(/\/media_attachments_iframe\/(\d+)/);
+
+    if (matches) {
+      audioOptions.attachmentId = matches[1];
+    }
+  }
+
   return audioOptions;
 }
 
@@ -211,7 +222,7 @@ export function isImageEmbed($element) {
 }
 
 function isMediaElement($element, mediaType) {
-  var _tinymceIframeShim$fi;
+  var _tinymceIframeShim$fi, _tinymceIframeShim$ge;
 
   // the video is hosted in an iframe, but tinymce
   // wraps it in a span with swizzled attribute names
@@ -226,8 +237,9 @@ function isMediaElement($element, mediaType) {
   }
 
   const media_obj_id = tinymceIframeShim.getAttribute('data-mce-p-data-media-id');
+  const is_media_attachment_iframe = (_tinymceIframeShim$ge = tinymceIframeShim.getAttribute('data-mce-p-src')) === null || _tinymceIframeShim$ge === void 0 ? void 0 : _tinymceIframeShim$ge.includes('media_attachments_iframe');
 
-  if (!media_obj_id) {
+  if (!media_obj_id && !is_media_attachment_iframe) {
     return false;
   }
 

package/es/translations/locales/ca.js

@@ -775,7 +775,7 @@ const locale = {
     "message": "Cerca"
   },
   "find_and_replace_6e345933": {
-    "message": "Cerca i substitueix"
+    "message": "Cerca i substituir"
   },
   "finish_bc343002": {
     "message": "Finalitza"

package/es/translations/locales/ga.js

@@ -2037,6 +2037,9 @@ const locale = {
   "submit_a3cc6859": {
     "message": "Cuir isteach"
   },
+  "submitting_b90fac62": {
+    "message": "Á chur isteach..."
+  },
   "subscript_59744f96": {
     "message": "Foscript"
   },

package/jest/jest-setup.js

@@ -19,6 +19,11 @@
 // Several components use aphrodite, which tries to manipulate the dom
 // on a timer which expires after the test completes and the document no longer exists
 import {StyleSheetTestUtils} from 'aphrodite'
+// eslint-disable-next-line import/no-nodejs-modules
+import {TextDecoder, TextEncoder} from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder
 
 /**
  * We want to ensure errors and warnings get appropriate eyes. If
@@ -45,6 +50,15 @@ const ignoredErrors = [
   /You seem to have overlapping act\(\) calls/,
   /A theme registry has already been initialized/,
   /Warning: Failed prop type: Invalid prop `color` of value `secondary` supplied to `CondensedButton`, expected one of \["primary","primary-inverse"\]./,
+  /ReactDOM.render is no longer supported in React 18/,
+  /Warning: Failed %s type: %s%s/,
+  /Warning: %s: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.%s/,
+  /Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead of `react-dom\/test-utils`. See https:\/\/react.dev\/warnings\/react-dom-test-utils for more info./,
+  /Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead of `react-dom\/test-utils`./,
+  /Warning: unmountComponentAtNode is deprecated and will be removed in the next major release. Switch to the createRoot API. Learn more: https:\/\/reactjs.org\/link\/switch-to-createroot/,
+  /Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https:\/\/reactjs.org\/link\/strict-mode-find-node/,
+  /Warning: %s uses the legacy childContextTypes API which is no longer supported and will be removed in the next major release. Use React.createContext\(\) instead/,
+  /Warning: %s uses the legacy contextTypes API which is no longer supported and will be removed in the next major release. Use React.createContext\(\) with static contextType instead./,
 ]
 const globalWarn = global.console.warn
 const ignoredWarnings = [

package/jest.config.js

@@ -34,6 +34,7 @@ module.exports = {
     ],
   ],
   setupFilesAfterEnv: [
+    '@testing-library/jest-dom',
     '<rootDir>/jest/jest-setup-framework.js',
     '<rootDir>/../../jest/stubInstUi.js',
   ],
@@ -48,6 +49,8 @@ module.exports = {
     // mock the tinymce-react Editor component
     '@tinymce/tinymce-react': '<rootDir>/src/rce/__mocks__/tinymceReact.jsx',
     'crypto-es': '<rootDir>/src/rce/__mocks__/_mockCryptoEs.ts',
+    '@instructure/studio-player':
+      '<rootDir>/__mocks__/@instructure/studio-player/_mockStudioPlayer.js',
   },
 
   transform: {
@@ -60,9 +63,7 @@ module.exports = {
           ['@babel/preset-react', {}],
           ['@babel/preset-typescript', {}],
         ],
-        plugins: [
-          ['@babel/plugin-proposal-decorators', {legacy: true}],
-        ],
+        plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]],
       },
     ],
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/canvas-rce",
-  "version": "5.13.6",
+  "version": "5.14.0",
   "description": "A component wrapping Canvas's usage of Tinymce",
   "main": "es/index.js",
   "owner": "LF",
@@ -76,60 +76,60 @@
     "instrument": false
   },
   "dependencies": {
-    "@instructure/canvas-theme": "^8",
+    "@instructure/canvas-theme": "8.56.4",
     "@instructure/canvas-media": "*",
-    "@instructure/debounce": "^8",
-    "@instructure/emotion": "^8.39",
+    "@instructure/debounce": "8.56.4",
+    "@instructure/emotion": "8.56.4",
     "@instructure/k5uploader": "*",
     "@instructure/media-capture": "^9.0.0",
-    "@instructure/theme-registry": "^8",
-    "@instructure/ui-a11y-content": "^8",
-    "@instructure/ui-a11y-utils": "^8",
-    "@instructure/ui-alerts": "^8",
-    "@instructure/ui-avatar": "^8",
-    "@instructure/ui-badge": "^8",
-    "@instructure/ui-billboard": "^8",
-    "@instructure/ui-buttons": "^8",
-    "@instructure/ui-checkbox": "^8",
-    "@instructure/ui-code-editor": "^8",
-    "@instructure/ui-color-utils": "^8",
-    "@instructure/ui-file-drop": "^8",
-    "@instructure/ui-flex": "^8",
-    "@instructure/ui-focusable": "^8",
-    "@instructure/ui-form-field": "^8",
-    "@instructure/ui-grid": "^8",
-    "@instructure/ui-heading": "^8",
-    "@instructure/ui-icons": "^8",
-    "@instructure/ui-img": "^8",
-    "@instructure/ui-link": "^8",
-    "@instructure/ui-list": "^8",
+    "@instructure/theme-registry": "8.56.4",
+    "@instructure/ui-a11y-content": "8.56.4",
+    "@instructure/ui-a11y-utils": "8.56.4",
+    "@instructure/ui-alerts": "8.56.4",
+    "@instructure/ui-avatar": "8.56.4",
+    "@instructure/ui-badge": "8.56.4",
+    "@instructure/ui-billboard": "8.56.4",
+    "@instructure/ui-buttons": "8.56.4",
+    "@instructure/ui-checkbox": "8.56.4",
+    "@instructure/ui-source-code-editor": "8.56.4",
+    "@instructure/ui-color-utils": "8.56.4",
+    "@instructure/ui-file-drop": "8.56.4",
+    "@instructure/ui-flex": "8.56.4",
+    "@instructure/ui-focusable": "8.56.4",
+    "@instructure/ui-form-field": "8.56.4",
+    "@instructure/ui-grid": "8.56.4",
+    "@instructure/ui-heading": "8.56.4",
+    "@instructure/ui-icons": "8.56.4",
+    "@instructure/ui-img": "8.56.4",
+    "@instructure/ui-link": "8.56.4",
+    "@instructure/ui-list": "8.56.4",
     "@instructure/ui-media-player": "^9.0.0",
-    "@instructure/ui-menu": "^8",
-    "@instructure/ui-modal": "^8",
-    "@instructure/ui-motion": "^8",
-    "@instructure/ui-number-input": "^8",
-    "@instructure/ui-overlays": "^8",
-    "@instructure/ui-pagination": "^8",
-    "@instructure/ui-popover": "^8",
-    "@instructure/ui-radio-input": "^8",
-    "@instructure/ui-react-utils": "^8",
-    "@instructure/ui-simple-select": "^8",
-    "@instructure/ui-spinner": "^8",
-    "@instructure/ui-svg-images": "^8",
-    "@instructure/ui-table": "^8",
-    "@instructure/ui-tabs": "^8",
-    "@instructure/ui-text-area": "^8",
-    "@instructure/ui-text-input": "^8",
-    "@instructure/ui-text": "^8",
-    "@instructure/ui-themes": "^8",
-    "@instructure/ui-toggle-details": "^8",
-    "@instructure/ui-tooltip": "^8",
-    "@instructure/ui-tray": "^8",
-    "@instructure/ui-tree-browser": "^8",
-    "@instructure/ui-truncate-text": "^8",
-    "@instructure/ui-utils": "^8",
-    "@instructure/ui-view": "^8",
-    "@instructure/uid": "^8",
+    "@instructure/ui-menu": "8.56.4",
+    "@instructure/ui-modal": "8.56.4",
+    "@instructure/ui-motion": "8.56.4",
+    "@instructure/ui-number-input": "8.56.4",
+    "@instructure/ui-overlays": "8.56.4",
+    "@instructure/ui-pagination": "8.56.4",
+    "@instructure/ui-popover": "8.56.4",
+    "@instructure/ui-radio-input": "8.56.4",
+    "@instructure/ui-react-utils": "8.56.4",
+    "@instructure/ui-simple-select": "8.56.4",
+    "@instructure/ui-spinner": "8.56.4",
+    "@instructure/ui-svg-images": "8.56.4",
+    "@instructure/ui-table": "8.56.4",
+    "@instructure/ui-tabs": "8.56.4",
+    "@instructure/ui-text-area": "8.56.4",
+    "@instructure/ui-text-input": "8.56.4",
+    "@instructure/ui-text": "8.56.4",
+    "@instructure/ui-themes": "8.56.4",
+    "@instructure/ui-toggle-details": "8.56.4",
+    "@instructure/ui-tooltip": "8.56.4",
+    "@instructure/ui-tray": "8.56.4",
+    "@instructure/ui-tree-browser": "8.56.4",
+    "@instructure/ui-truncate-text": "8.56.4",
+    "@instructure/ui-utils": "8.56.4",
+    "@instructure/ui-view": "8.56.4",
+    "@instructure/uid": "8.56.4",
     "@sheerun/mutationobserver-shim": "^0.3.2",
     "@tinymce/tinymce-react": "~3.8.4",
     "aphrodite": "^2",
@@ -149,10 +149,10 @@
     "minimatch": "~3.0.4",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15",
-    "react": "^0.14.8 || ^15.0.0 || ^16",
+    "react": "^18",
     "react-aria-live": "^2",
     "react-color": "^2.13.4",
-    "react-dom": "^0.14.8 || ^15.0.0 || ^16",
+    "react-dom": "^18",
     "react-draggable": "^3.3.0",
     "react-redux": "^5",
     "react-transition-group": "^1",
@@ -178,6 +178,7 @@
     "@testing-library/react": "^12",
     "@testing-library/react-hooks": "^5",
     "@testing-library/user-event": "^14",
+    "@types/testing-library__jest-dom": "^5.0.0",
     "axe-testcafe": "^3",
     "babel-loader": "^9.1.3",
     "babel-plugin-dynamic-import-node": "^2.2.0",

package/es/rce/__mocks__/_mockCryptoEs.js

@@ -1,124 +0,0 @@
-/*
- * Copyright (C) 2023 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-export default {
-  lib: {
-    Base: {},
-    WordArray: {},
-    BufferedBlockAlgorithm: {},
-    Hasher: {},
-    Cipher: {},
-    StreamCipher: {},
-    BlockCipherMode: {},
-    BlockCipher: {},
-    CipherParams: {},
-    SerializableCipher: {},
-    PasswordBasedCipher: {}
-  },
-  x64: {
-    Word: {},
-    WordArray: {}
-  },
-  enc: {
-    Hex: {},
-    Latin1: {},
-    Utf8: {
-      parse: () => {}
-    },
-    Utf16: {},
-    Utf16BE: {},
-    Utf16LE: {},
-    Base64: {},
-    Base64url: {}
-  },
-  algo: {
-    HMAC: {},
-    MD5: {},
-    SHA1: {},
-    SHA224: {},
-    SHA256: {},
-    SHA384: {},
-    SHA512: {},
-    SHA3: {},
-    RIPEMD160: {},
-    PBKDF2: {},
-    EvpKDF: {},
-    AES: {},
-    DES: {},
-    TripleDES: {},
-    Rabbit: {},
-    RabbitLegacy: {},
-    RC4: {},
-    RC4Drop: {},
-    Blowfish: {}
-  },
-  mode: {
-    CBC: {},
-    CFB: {},
-    CTR: {},
-    CTRGladman: {},
-    ECB: {},
-    OFB: {}
-  },
-  pad: {
-    Pkcs7: {},
-    AnsiX923: {},
-    Iso10126: {},
-    Iso97971: {},
-    NoPadding: {},
-    ZeroPadding: {}
-  },
-  format: {
-    OpenSSL: {},
-    Hex: {}
-  },
-  kdf: {
-    OpenSSL: {}
-  },
-  MD5: {},
-  HmacMD5: {},
-  SHA1: {},
-  HmacSHA1: {},
-  SHA224: {},
-  HmacSHA224: {},
-  SHA256: {},
-  HmacSHA256: {},
-  SHA384: {},
-  HmacSHA384: {},
-  SHA512: {},
-  HmacSHA512: {},
-  SHA3: {},
-  HmacSHA3: {},
-  RIPEMD160: {},
-  HmacRIPEMD160: {},
-  PBKDF2: {},
-  EvpKDF: {},
-  AES: {},
-  DES: {},
-  TripleDES: {},
-  Rabbit: {},
-  RabbitLegacy: {},
-  RC4: {
-    encrypt: () => {},
-    decrypt: () => {}
-  },
-  RC4Drop: {
-    encrypt: () => {},
-    decrypt: () => {}
-  },
-  Blowfish: {}
-};

package/es/rce/__mocks__/tinymceReact.js

@@ -1,55 +0,0 @@
-/*
- * Copyright (C) 2021 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-
-/*
- * This is a mock for the @tinymce/tinymce-react Editor component
- * and the inner tinymce editor object
- * jest.config.js moduleNameMapper has jest load this
- * file in response to
- * import {Editor} from '@tinymce/tinymce-react'
- * in RCEWrapper.js
- */
-import React, { useEffect, useRef } from 'react';
-import FakeEditor from '../__tests__/FakeEditor';
-export function Editor(props) {
-  const editorRef = useRef(null);
-  const textareaRef = useRef(null);
-  const tinymceEditor = useRef(new FakeEditor(props));
-  window.tinymce.editors[0] = tinymceEditor.current;
-  useEffect(() => {
-    tinymceEditor.current.on('change', handleChange);
-    props.onInit && props.onInit({}, tinymceEditor.current); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  function handleChange(event) {
-    var _props$onEditorChange;
-
-    (_props$onEditorChange = props.onEditorChange) === null || _props$onEditorChange === void 0 ? void 0 : _props$onEditorChange.call(props, event.target.value);
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: editorRef
-  }, /*#__PURE__*/React.createElement("textarea", {
-    ref: textareaRef,
-    id: props.id,
-    name: props.textareaName,
-    value: props.initialValue,
-    onInput: handleChange,
-    onChange: handleChange
-  }));
-}

package/es/rce/plugins/shared/__mocks__/screenfull.js

@@ -1,24 +0,0 @@
-/*
- * Copyright (C) 2019 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-const screenfull = {
-  on() {},
-
-  off() {}
-
-};
-export default screenfull;

package/es/rce/plugins/tinymce-a11y-checker/rules/__mocks__/index.js

@@ -1,53 +0,0 @@
-/*
- * Copyright (C) 2023 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-export default [{
-  test: jest.fn().mockReturnValue(false),
-  data: jest.fn().mockReturnValue({
-    select: 'a',
-    checkbox: true,
-    color: 'rgba(40, 100, 200, 0.6)',
-    text: 'Text'
-  }),
-  form: jest.fn().mockReturnValue([{
-    label: 'Select Field',
-    dataKey: 'select',
-    options: [['a', 'A'], ['b', 'B']]
-  }, {
-    label: 'Select Field',
-    dataKey: 'checkbox',
-    checkbox: true
-  }, {
-    label: 'Select Field',
-    dataKey: 'color',
-    color: true
-  }, {
-    label: 'Text Field',
-    dataKey: 'text',
-    disabledIf: () => true
-  }, {
-    label: 'Text Area',
-    dataKey: 'textarea',
-    textarea: true
-  }]),
-  rootNode: jest.fn(),
-  update: jest.fn(),
-  message: jest.fn().mockReturnValue('Error Message'),
-  why: jest.fn().mockReturnValue('Why Text'),
-  link: 'http://some-url',
-  linkText: jest.fn().mockReturnValue('Link for learning more')
-}];