@instructure/canvas-rce 5.13.7 → 5.14.1

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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.14.1 - 2024-10-28
+
+### Changed
+
+- Forward along access token and inst_ui parameters from file URLs.
+
+## 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.7 - 2024-10-28
 
@@ -45,7 +64,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/__mocks__/@instructure/studio-player/_mockStudioPlayer.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2024 - 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/>.
+ */
+
+module.exports = {
+  StudioPlayer: () => null
+};

package/build.sh

@@ -1,23 +1,23 @@
 #!/bin/bash
 export COMPOSE_FILE=./docker-compose.yml
 
-docker-compose build
-docker-compose up -d
+docker compose build
+docker compose up -d
 
 # run unit tests
-docker-compose exec -T module npm run test-cov
+docker compose exec -T module npm run test-cov
 unit_status=$?
-docker cp $(docker-compose ps -q module):/usr/src/app/coverage coverage
+docker cp $(docker compose ps -q module):/usr/src/app/coverage coverage
 
 # check code formatting
-docker-compose exec -T module npm run fmt:check
+docker compose exec -T module npm run fmt:check
 fmt_status=$?
 
 # lint all the things
-docker-compose exec -T module npm run lint
+docker compose exec -T module npm run lint
 lint_status=$?
 
-docker-compose stop
+docker compose stop
 
 # jenkins uses the exit code to decide whether you passed or not
 ((unit_status)) && exit $unit_status

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/__mocks__/_mockStudioPlayer.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2024 - 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/>.
+ */
+module.exports = {
+  StudioPlayer: () => null
+};

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/CanvasContentTray.js

@@ -88,7 +88,7 @@ export default function CanvasContentTray(props) {
   const [hidingTrayOnAction, setHidingTrayOnAction] = useState(true);
   const trayRef = useRef(null);
   const scrollingAreaRef = useRef(null);
-  const closeButtonRef = useRef(null);
+  const [closeButtonRef, setCloseButtonRef] = useState(null);
   const [filterSettings, setFilterSettings] = useFilterSettings();
   const [isEditTray, setIsEditTray] = useState(false);
   const [link, setLink] = useState(null);
@@ -111,12 +111,17 @@ export default function CanvasContentTray(props) {
     onTrayClosing && onTrayClosing(CanvasContentTray.globalOpenCount); // tell RCEWrapper we're closing if we're open
 
     setIsOpen(false);
-  }, [bridge, onTrayClosing]);
+  }, [bridge, onTrayClosing]); // this shouldn't be necessary, but INSTUI isn't focusing the close button
+  // like it should.
+
+  useEffect(() => {
+    if (isOpen && closeButtonRef) {
+      closeButtonRef.focus();
+    }
+  }, [closeButtonRef, isOpen]);
   useEffect(() => {
     const controller = {
       showTrayForPlugin(plugin) {
-        var _closeButtonRef$curre;
-
         // increment a counter that's used as the key when rendering
         // this gets us a new instance everytime, which is necessary
         // to get the queries run so we have up to date data.
@@ -144,8 +149,6 @@ export default function CanvasContentTray(props) {
         } else {
           setIsEditTray(false);
         }
-
-        (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
       },
 
       hideTray(forceClose) {
@@ -290,6 +293,17 @@ export default function CanvasContentTray(props) {
     return isEditTray ? formatMessage('Edit Course Link') : formatMessage('Add');
   }
 
+  function renderLinkDisplay() {
+    return isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
+      linkText: linkText,
+      placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
+      linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
+      published: (link === null || link === void 0 ? void 0 : link.published) || false,
+      handleTextChange: setLinkText,
+      linkType: link === null || link === void 0 ? void 0 : link.type
+    });
+  }
+
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
     "data-testid": "CanvasContentTray",
@@ -306,7 +320,7 @@ export default function CanvasContentTray(props) {
     onExit: handleExitTray,
     onOpen: handleOpenTray,
     contentRef: el => trayRef.current = el
-  }, isOpen && hasOpened ? /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column",
     as: "div",
     height: getTrayHeight(),
@@ -327,15 +341,8 @@ export default function CanvasContentTray(props) {
     onClick: handleDismissTray,
     "data-testid": "CloseButton_ContentTray",
     screenReaderLabel: formatMessage('Close'),
-    elementRef: el => closeButtonRef.current = el
-  })), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
-    linkText: linkText,
-    placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
-    linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
-    published: (link === null || link === void 0 ? void 0 : link.published) || false,
-    handleTextChange: setLinkText,
-    linkType: link === null || link === void 0 ? void 0 : link.type
-  }), /*#__PURE__*/React.createElement(Filter, Object.assign({}, filterSettings, {
+    elementRef: el => setCloseButtonRef(el)
+  })), renderLinkDisplay(), /*#__PURE__*/React.createElement(Filter, Object.assign({}, filterSettings, {
     mountNode: props.mountNode,
     userContextType: props.contextType,
     containingContextType: props.containingContext.contextType,
@@ -344,7 +351,7 @@ export default function CanvasContentTray(props) {
     },
     isContentLoading: isLoading(storeProps),
     use_rce_icon_maker: props.use_rce_icon_maker
-  }))), /*#__PURE__*/React.createElement(Flex.Item, {
+  }))), isOpen && hasOpened ? /*#__PURE__*/React.createElement(Flex.Item, {
     shouldGrow: true,
     shouldShrink: true,
     margin: "xx-small xxx-small 0",
@@ -372,7 +379,7 @@ export default function CanvasContentTray(props) {
     editing: isEditTray,
     onEditClick: setLink,
     selectedLink: link
-  }, storeProps)))), isEditTray && renderFooter()))) : null);
+  }, storeProps)))), isEditTray && renderFooter())) : null));
 }
 CanvasContentTray.globalOpenCount = 0;
 

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.7",
+  "version": "5.14.1",
   "description": "A component wrapping Canvas's usage of Tinymce",
   "main": "es/index.js",
   "owner": "LF",
@@ -32,7 +32,7 @@
     "demo": "scripts/demo.sh",
     "demo:clean": "rm -f github-pages/dist/*",
     "demo:build": "wp -c ./webpack.demo.config.js",
-    "demo:dev": "yarn demo:clean && mkdir -p ./github-pages/dist &&  cp ./github-pages/index.html ./github-pages/dist && wp -c ./webpack.dev.config.js",
+    "demo:dev": "yarn demo:clean && mkdir -p ./github-pages/dist && cp ./github-pages/index.html ./github-pages/dist && wp -c ./webpack.dev.config.js",
     "installTranslations": "scripts/installTranslations.js",
     "commitTranslations": "scripts/commitTranslations.sh",
     "build:all": "scripts/build.js",
@@ -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/common/components/FileTree/File.js

@@ -1,64 +0,0 @@
-/*
- * Copyright (C) 2018 - 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/>.
- */
-import React, { Component } from 'react';
-import { number, string, shape, func } from 'prop-types';
-import { css } from 'aphrodite';
-import styles from './styles';
-import { IconDocumentLine } from '@instructure/ui-icons';
-export default class File extends Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleSelect = () => {
-      const {
-        onSelect,
-        file
-      } = this.props;
-
-      if (onSelect) {
-        onSelect(file.id);
-      }
-    };
-  }
-
-  icon() {
-    switch (this.props.file.type) {
-      default:
-        return /*#__PURE__*/React.createElement(IconDocumentLine, null);
-    }
-  }
-
-  render() {
-    const {
-      name
-    } = this.props.file;
-    return /*#__PURE__*/React.createElement("button", {
-      className: css(styles.button, styles.file),
-      onClick: this.handleSelect
-    }, this.icon(), " ", name);
-  }
-
-}
-File.propTypes = {
-  file: shape({
-    id: number,
-    name: string,
-    type: string
-  }).isRequired,
-  onSelect: func
-};

package/es/common/components/FileTree/Folder.js

@@ -1,110 +0,0 @@
-/*
- * Copyright (C) 2018 - 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/>.
- */
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import File from './File';
-import Loading from '../Loading';
-import { css } from 'aphrodite';
-import styles from './styles';
-import { IconMiniArrowDownLine, IconMiniArrowEndLine, IconFolderLine } from '@instructure/ui-icons';
-export default class Folder extends Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleToggle = () => {
-      const {
-        onToggle,
-        folder
-      } = this.props;
-
-      if (onToggle) {
-        onToggle(folder.id);
-      }
-    };
-  }
-
-  files() {
-    return this.props.folder.fileIds.map(id => this.props.files[id]).filter(file => file != null);
-  }
-
-  subFolders() {
-    return this.props.folder.folderIds.map(id => this.props.folders[id]).filter(folder => folder != null);
-  }
-
-  toggleIcon() {
-    const {
-      expanded
-    } = this.props.folder;
-    return expanded ? /*#__PURE__*/React.createElement(IconMiniArrowDownLine, null) : /*#__PURE__*/React.createElement(IconMiniArrowEndLine, null);
-  }
-
-  render() {
-    const {
-      folders,
-      folder,
-      files,
-      onSelect,
-      onToggle
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles.node)
-    }, /*#__PURE__*/React.createElement("button", {
-      className: css(styles.button),
-      onClick: this.handleToggle,
-      "aria-expanded": !!folder.expanded
-    }, this.toggleIcon(), " ", /*#__PURE__*/React.createElement(IconFolderLine, null), " ", folder.name), folder.expanded && /*#__PURE__*/React.createElement("ul", {
-      className: css(styles.list)
-    }, this.subFolders().map(folder => /*#__PURE__*/React.createElement("li", {
-      key: `folder-${folder.id}`,
-      className: css(styles.node)
-    }, /*#__PURE__*/React.createElement(Folder, {
-      folders: folders,
-      files: files,
-      folder: folder,
-      onToggle: onToggle,
-      onSelect: onSelect
-    }))), this.files().map(file => /*#__PURE__*/React.createElement("li", {
-      key: `file-${file.id}`,
-      className: css(styles.node)
-    }, /*#__PURE__*/React.createElement(File, {
-      onSelect: onSelect,
-      file: file
-    })))), folder.expanded && folder.loading && /*#__PURE__*/React.createElement(Loading, {
-      className: css(styles.loading)
-    }));
-  }
-
-}
-const folderPropType = PropTypes.shape({
-  id: PropTypes.number,
-  name: PropTypes.string,
-  loading: PropTypes.bool,
-  fileIds: PropTypes.arrayOf(PropTypes.number),
-  folderIds: PropTypes.arrayOf(PropTypes.number)
-});
-Folder.propTypes = {
-  folders: PropTypes.objectOf(folderPropType),
-  files: PropTypes.objectOf(File.propTypes.file),
-  folder: folderPropType.isRequired,
-  onToggle: PropTypes.func,
-  onSelect: File.propTypes.onSelect
-};
-Folder.defaultProps = {
-  files: [],
-  folders: []
-};

package/es/common/components/FileTree/index.js

@@ -1,84 +0,0 @@
-/*
- * Copyright (C) 2018 - 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/>.
- */
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Folder from './Folder';
-import { css } from 'aphrodite';
-import styles from './styles';
-const DOWN_KEY = 40;
-const UP_KEY = 38;
-const J_KEY = 74;
-const K_KEY = 75;
-export default class FileTree extends Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleKeyDown = event => {
-      switch (event.keyCode) {
-        case DOWN_KEY:
-        case J_KEY:
-          this.moveFocus(1);
-          break;
-
-        case UP_KEY:
-        case K_KEY:
-          this.moveFocus(-1);
-          break;
-
-        default:
-          return;
-      }
-
-      event.stopPropagation();
-    };
-  }
-
-  navigableNodes() {
-    return Array.from(this.containerNode.querySelectorAll('button'));
-  }
-
-  moveFocus(delta) {
-    const nodes = this.navigableNodes();
-    const active = nodes.indexOf(window.document.activeElement);
-    let next = active + delta;
-
-    if (next < 0) {
-      next = 0;
-    } else if (next >= nodes.length) {
-      next = nodes.length - 1;
-    }
-
-    nodes[next].focus();
-  }
-
-  render() {
-    const inlineStyles = {
-      maxHeight: this.props.maxHeight
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles.container),
-      ref: c => this.containerNode = c,
-      onKeyDown: this.handleKeyDown,
-      style: inlineStyles
-    }, /*#__PURE__*/React.createElement(Folder, this.props));
-  }
-
-}
-FileTree.propTypes = { ...Folder.propTypes,
-  maxHeight: PropTypes.string
-};

package/es/common/components/FileTree/styles.js

@@ -1,72 +0,0 @@
-/*
- * Copyright (C) 2018 - 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/>.
- */
-import { StyleSheet } from 'aphrodite';
-export default StyleSheet.create({
-  container: {
-    marginBottom: '1em',
-    overflow: 'auto'
-  },
-  list: {
-    margin: '0 0 0 .8em',
-    padding: '0 0 0 .2em',
-    borderLeft: '1px dotted #ccc',
-    listStyle: 'none outside',
-    flex: 1
-  },
-  node: {
-    margin: 0,
-    padding: 0,
-    display: 'block'
-  },
-  loading: {
-    marginLeft: '.8em',
-    borderLeft: '1px dotted #ccc',
-    padding: '.5em .7em'
-  },
-  button: {
-    display: 'block',
-    padding: '.3em',
-    borderRadius: '.3em',
-    backgroundColor: 'transparent',
-    textAlign: 'left',
-    margin: 0,
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    flex: 1,
-    width: '100%',
-    boxSizing: 'border-box',
-    border: '1px solid transparent',
-    transition: 'background-color 0.3s',
-    wordBreak: 'break-all',
-    ':hover': {
-      backgroundColor: '#eee'
-    },
-    ':focus': {
-      border: '1px solid #000',
-      outline: 0
-    },
-    ':active': {
-      backgroundColor: '#ddd'
-    }
-  },
-  file: {
-    ':active': {
-      backgroundColor: '#008a14'
-    }
-  }
-});

package/es/common/components/Loading.js

@@ -1,83 +0,0 @@
-/*
- * Copyright (C) 2018 - 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/>.
- */
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import formatMessage from '../../format-message';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { StyleSheet, css } from 'aphrodite';
-
-function Loading(props) {
-  const className = (css(styles.loading) + ' ' + props.className).trim();
-  return /*#__PURE__*/React.createElement("span", {
-    className: className
-  }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Loading...')), /*#__PURE__*/React.createElement("span", {
-    className: css(styles.dot, styles.dot0)
-  }), /*#__PURE__*/React.createElement("span", {
-    className: css(styles.dot, styles.dot1)
-  }), /*#__PURE__*/React.createElement("span", {
-    className: css(styles.dot, styles.dot2)
-  }));
-}
-
-Loading.propTypes = {
-  className: PropTypes.string
-};
-Loading.defaultProps = {
-  className: ''
-};
-const opacityKeyframes = {
-  '0%': {
-    opacity: 0
-  },
-  '50%': {
-    opacity: 1
-  },
-  '100%': {
-    opacity: 0
-  }
-};
-const styles = StyleSheet.create({
-  loading: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'space-around',
-    width: '48px',
-    height: '10px'
-  },
-  dot: {
-    animationName: [opacityKeyframes],
-    animationDuration: '1.95s',
-    animationIterationCount: 'infinite',
-    animationDirection: 'linear',
-    background: '#666',
-    borderRadius: '8px',
-    width: '10px',
-    height: '10px',
-    flex: 'none'
-  },
-  dot0: {
-    animationDelay: '-1.8s'
-  },
-  dot1: {
-    animationDelay: '-1.6s'
-  },
-  dot2: {
-    animationDelay: '-1.4s'
-  }
-});
-export default Loading;