@instructure/canvas-rce 7.3.0 → 8.0.0

package/es/rce/RCEWrapper.utils.d.ts

@@ -21,4 +21,4 @@ export declare function focusToolbar(el: HTMLElement): void;
 export declare function focusFirstMenuButton(el: HTMLElement): void;
 export declare function isElementWithinTable(node: Element | null): boolean;
 export declare function parsePluginsToExclude(plugins: string[]): string[];
-export declare function patchAutosavedContent(content: string, asText?: boolean): string | null;
+export declare function patchAutosavedContent(content: string, asText?: boolean): string;

package/es/rce/RCEWrapperProps.d.ts

@@ -154,6 +154,8 @@ export declare const rceWrapperPropTypes: {
     }>;
     instRecordDisabled: PropTypes.Requireable<boolean>;
     highContrastCSS: PropTypes.Requireable<(string | null | undefined)[]>;
+    useHighContrast: PropTypes.Requireable<boolean>;
+    fontFamily: PropTypes.Requireable<string>;
     maxInitRenderedRCEs: PropTypes.Requireable<number>;
     use_rce_icon_maker: PropTypes.Requireable<boolean>;
     features: PropTypes.Requireable<{
@@ -169,7 +171,6 @@ export declare const rceWrapperPropTypes: {
         isA2StudentView: PropTypes.Requireable<boolean>;
         maxMruTools: PropTypes.Requireable<number>;
     }>>;
-    ai_text_tools: PropTypes.Requireable<boolean>;
     variant: PropTypes.Requireable<"full" | "lite" | "text-only" | "text-block" | "block-content-editor">;
 };
 export type RCEWrapperProps = PropTypes.InferProps<typeof rceWrapperPropTypes>;

package/es/rce/RCEWrapperProps.js

@@ -126,6 +126,8 @@ export const rceWrapperPropTypes = {
   menu: menuPropType,
   instRecordDisabled: PropTypes.bool,
   highContrastCSS: PropTypes.arrayOf(PropTypes.string),
+  useHighContrast: PropTypes.bool,
+  fontFamily: PropTypes.string,
   maxInitRenderedRCEs: PropTypes.number,
   use_rce_icon_maker: PropTypes.bool,
   features: PropTypes.objectOf(PropTypes.bool),
@@ -133,6 +135,5 @@ export const rceWrapperPropTypes = {
   timezone: PropTypes.string,
   userCacheKey: PropTypes.string,
   externalToolsConfig: externalToolsConfigPropType,
-  ai_text_tools: PropTypes.bool,
   variant: PropTypes.oneOf(RCEVariantValues)
 };

package/es/rce/StatusBar.d.ts

@@ -18,7 +18,6 @@ declare namespace StatusBar {
         export let onWordcountModalOpen: import("prop-types").Validator<(...args: any[]) => any>;
         export let disabledPlugins: import("prop-types").Requireable<(string | null | undefined)[]>;
         export let features: import("prop-types").Requireable<(string | null | undefined)[]>;
-        export { func as onAI };
     }
     namespace defaultProps {
         export let a11yBadgeColor: string;

package/es/rce/StatusBar.js

@@ -32,7 +32,6 @@ import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFull
 import formatMessage from '../format-message';
 import ResizeHandle from './ResizeHandle';
 import { FS_ENABLED } from '../util/fullscreenHelpers';
-import { AIWandSVG } from './plugins/shared/ai_tools';
 export const WYSIWYG_VIEW = 'WYSIWYG';
 export const PRETTY_HTML_EDITOR_VIEW = 'PRETTY';
 export const RAW_HTML_EDITOR_VIEW = 'RAW';
@@ -57,9 +56,7 @@ StatusBar.propTypes = {
   a11yErrorsCount: number,
   onWordcountModalOpen: func.isRequired,
   disabledPlugins: arrayOf(string),
-  features: arrayOf(string),
-  // StatusBarFeature[]
-  onAI: func
+  features: arrayOf(string) // StatusBarFeature[]
 };
 StatusBar.defaultProps = {
   a11yBadgeColor: '#2B7ABC',
@@ -218,36 +215,14 @@ export default function StatusBar(props) {
   }
   function renderIconButtons() {
     if (isHtmlView()) return null;
-    const ai_tools = isFeature('ai_tools');
     const kb_shortcuts = isFeature('keyboard_shortcuts');
     const a11y_checker = isFeature('a11y_checker');
-    if (!(ai_tools || kb_shortcuts || a11y_checker)) return null;
+    if (!(kb_shortcuts || a11y_checker)) return null;
     const kbshortcut = formatMessage('View keyboard shortcuts');
     return /*#__PURE__*/React.createElement(View, {
       display: "inline-block",
       padding: "0 x-small"
-    }, ai_tools && props.onAI && /*#__PURE__*/React.createElement(IconButton, {
-      "data-btn-id": "rce-ai-btn",
-      color: "secondary",
-      "aria-haspopup": "dialog",
-      title: formatMessage('AI Tools'),
-      tabIndex: tabIndexForBtn('rce-ai-btn'),
-      onClick: event => {
-        event.target.focus(); // FF doesn't focus buttons on click
-        props.onAI();
-      },
-      onFocus: () => setFocusedBtnId('rce-ai-btn'),
-      screenReaderLabel: formatMessage('AI Tools'),
-      withBackground: false,
-      withBorder: false
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        color: 'dodgerBlue'
-      }
-    }, /*#__PURE__*/React.createElement(SVGIcon, {
-      src: AIWandSVG,
-      size: "x-small"
-    }))), kb_shortcuts && /*#__PURE__*/React.createElement(IconButton, {
+    }, kb_shortcuts && /*#__PURE__*/React.createElement(IconButton, {
       "data-btn-id": "rce-kbshortcut-btn",
       color: "secondary",
       "aria-haspopup": "dialog",

package/es/rce/plugins/instructure_equation/EquationEditorModal/advancedOnlySyntax.d.ts

@@ -1,2 +1,3 @@
 export const advancedOnlyCommands: string[];
-export const containsAdvancedSyntax: ((latex: any) => boolean) & import("lodash").MemoizedFunction;
+/** @type {(latex: string) => boolean} */
+export const containsAdvancedSyntax: (latex: string) => boolean;

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

@@ -16,12 +16,14 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { memoize } from 'lodash';
+import { memoize } from 'es-toolkit/compat';
 
 // These commands all work fine with MathJax but either don't work, don't work well
 // (bad UX for editing), or look strange when rendered by Mathlive. Add new ones
 // here if you discover anything else or customers report unexpected experiences.
 const advancedOnlyCommands = ['begin', 'end', 'cases', 'cr', 'rm', 'text', 'hbox', 'mbox', 'unicode', 'cal', 'frak', 'it', 'scr', 'sf', '#', 'def', 'newcommand', 'operatorname', 'DeclareMathOperator', 'displaystyle', 'textstyle', 'scriptstyle', 'scriptscriptstyle', 'displaylines', 'abovewithdelims', 'array', 'bmatrix', 'buildrel', 'ddddot', 'dddot', 'eqalign', 'eqalignno', 'gcd', 'genfrac', 'hdashline', 'hfil', 'hfill', 'hfilll', 'hline', 'idotsint', 'iiiint', 'injlim', 'kern', 'label', 'LaTeX', 'leftroot', 'lgroup', 'lower', 'mathchoice', 'mathfrak', 'matrix', 'mit', 'mkern', 'mspace', 'negmedspace', 'negthickspace', 'negthinspace', 'newline', 'nobreakspace', 'oldstyle', 'overset', 'pmatrix', 'raise', 'rgroup', 'rule', 'Rule', 'skew', 'space', 'tag', 'TeX', 'underbrace', 'uproot', 'varinjlim', 'varliminf', 'varlimsup', 'varprojlim', 'vcenter', 'vmatrix'];
 const advancedOnlyRegex = new RegExp(advancedOnlyCommands.join('|'), 'm');
+
+/** @type {(latex: string) => boolean} */
 const containsAdvancedSyntax = memoize(latex => advancedOnlyRegex.test(latex));
 export { advancedOnlyCommands, containsAdvancedSyntax };

package/es/rce/plugins/instructure_equation/EquationEditorModal/index.d.ts

@@ -11,6 +11,7 @@ declare class EquationEditorModal extends React.Component<any, any, any> {
     insertNewRange(): void;
     advancedModeOnly(latex: any): boolean;
     executeCommand: (cmd: any, advancedCmd: any) => void;
+    clearMathFieldBeforeDismiss: () => void;
     handleModalCancel: () => void;
     handleModalDone: () => void;
     renderMathInAdvancedPreview: import("@instructure/debounce").Debounced<() => void>;

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

@@ -68,7 +68,16 @@ export default class EquationEditorModal extends Component {
         });
       }
     };
+    // Clear the math-field before the modal unmounts to prevent XSS.
+    // Mathlive's dispose method sets element.innerHTML = this.model.getValue(),
+    // which would parse any HTML in the formula as real DOM elements.
+    this.clearMathFieldBeforeDismiss = () => {
+      if (this.mathField) {
+        this.setMathField('');
+      }
+    };
     this.handleModalCancel = () => {
+      this.clearMathFieldBeforeDismiss();
       this.props.onModalDismiss();
     };
     this.handleModalDone = () => {
@@ -80,11 +89,12 @@ export default class EquationEditorModal extends Component {
       if (output) {
         onEquationSubmit(output);
       }
+      this.clearMathFieldBeforeDismiss();
       onModalDismiss();
     };
     this.renderMathInAdvancedPreview = debounce(() => {
       if (this.previewElement.current) {
-        this.previewElement.current.innerHTML = String.raw`\(${this.state.workingFormula}\)`;
+        this.previewElement.current.textContent = String.raw`\(${this.state.workingFormula}\)`;
         this.mathml.processNewMathInElem(this.previewElement.current);
       }
     }, EquationEditorModal.debounceRate, {
@@ -257,7 +267,7 @@ export default class EquationEditorModal extends Component {
     if (this.state.workingFormula) {
       this.renderMathInAdvancedPreview();
     } else {
-      this.previewElement.current.innerHTML = '';
+      this.previewElement.current.textContent = '';
     }
   }
   componentDidMount() {

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js

@@ -35,7 +35,7 @@ import { MAX_IMAGE_SIZE_BYTES } from '../../../../shared/compressionUtils';
 import { createCroppedImageSvg } from '../../../../shared/ImageCropper/imageCropUtils';
 import { convertFileToBase64 } from '../../../../shared/fileUtils';
 import { ImageSettingsPropTypes } from './propTypes';
-import _ from 'lodash';
+import { isEqual } from 'es-toolkit/compat';
 const getCompressionMessage = () => formatMessage('Your image has been compressed for Icon Maker. Images less than {size} KB will not be compressed.', {
   size: MAX_IMAGE_SIZE_BYTES / 1024
 });
@@ -99,7 +99,7 @@ export const ImageOptions = ({
 
   // After submitting cropper modal a new embedded image should be generated
   useEffect(() => {
-    if (state.cropperSettings && settings.imageSettings && !_.isEqual(state.cropperSettings, settings.imageSettings?.cropperSettings)) {
+    if (state.cropperSettings && settings.imageSettings && !isEqual(state.cropperSettings, settings.imageSettings?.cropperSettings)) {
       if (state.cropperSettings.shape !== settings.shape) {
         trayDispatch({
           shape: state.cropperSettings.shape

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageSection.js

@@ -17,7 +17,7 @@
  */
 
 import React, { useReducer, useEffect, useRef, Suspense } from 'react';
-import _ from 'lodash';
+import { isEqual } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import formatMessage from '../../../../../../format-message';
 import reducer, { actions, initialState, modes } from '../../../reducers/imageSection';
@@ -161,7 +161,7 @@ export const ImageSection = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.shape]);
   useEffect(() => {
-    if (settings.imageSettings && !isMetadataLoaded.current && !_.isEqual(settings.imageSettings, metadata)) {
+    if (settings.imageSettings && !isMetadataLoaded.current && !isEqual(settings.imageSettings, metadata)) {
       isMetadataLoaded.current = true;
       dispatch({
         type: actions.UPDATE_SETTINGS.type,
@@ -171,7 +171,7 @@ export const ImageSection = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.imageSettings]);
   useEffect(() => {
-    if (!_.isEqual(metadata, settings.imageSettings)) {
+    if (!isEqual(metadata, settings.imageSettings)) {
       onChange({
         type: svgActions.SET_IMAGE_SETTINGS,
         payload: metadata

package/es/rce/plugins/instructure_icon_maker/svg/constants.d.ts

@@ -47,19 +47,34 @@ export namespace DEFAULT_SETTINGS {
     export let error: null;
 }
 export const BASE_SIZE: {
-    [x: string]: number;
+    [Size.ExtraSmall]: number;
+    [Size.Small]: number;
+    [Size.Medium]: number;
+    [Size.Large]: number;
 };
 export const STROKE_WIDTH: {
-    [x: string]: number;
+    [Size.None]: number;
+    [Size.Small]: number;
+    [Size.Medium]: number;
+    [Size.Large]: number;
 };
 export const TEXT_SIZE: {
-    [x: string]: number;
+    [Size.Small]: number;
+    [Size.Medium]: number;
+    [Size.Large]: number;
+    [Size.ExtraLarge]: number;
 };
 export const TEXT_SIZE_FONT_DIFF: {
-    [x: string]: number;
+    [Size.Small]: number;
+    [Size.Medium]: number;
+    [Size.Large]: number;
+    [Size.ExtraLarge]: number;
 };
 export const MAX_CHAR_COUNT: {
-    [x: string]: number;
+    [Size.Small]: number;
+    [Size.Medium]: number;
+    [Size.Large]: number;
+    [Size.ExtraLarge]: number;
 };
 export const MAX_TOTAL_TEXT_CHARS: 32;
 export const TEXT_BACKGROUND_PADDING: 4;

package/es/rce/plugins/instructure_icon_maker/svg/utils.d.ts

@@ -1,3 +1,3 @@
 export function createSvgElement(tag: any, attributes?: {}): any;
 export function splitTextIntoLines(text: any, maxChars: any): string[];
-export function decode(input: any): string | null;
+export function decode(input: any): string;

package/es/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import _ from 'lodash';
+import { isEqual } from 'es-toolkit/compat';
 export class IconMakerFormHasChanges {
   constructor(initSettings, currSettings) {
     this.initialSettings = void 0;
@@ -61,7 +61,7 @@ export class IconMakerFormHasChanges {
     return 'textPosition' in this.currentSettings && this.initialSettings.textPosition !== this.currentSettings.textPosition;
   }
   hasImageSettingsChange() {
-    return 'imageSettings' in this.currentSettings && !_.isEqual(this.initialSettings.imageSettings, this.currentSettings.imageSettings);
+    return 'imageSettings' in this.currentSettings && !isEqual(this.initialSettings.imageSettings, this.currentSettings.imageSettings);
   }
   hasChanges() {
     return this.hasNameChange() || this.hasAltChange() || this.hasShapeNameChange() || this.hasShapeSizeChange() || this.hasColorNameChange() || this.hasOutlineColorChange() || this.hasOutlineSizeChange() || this.hasTextChange() || this.hasTextSizeChange() || this.hasTextColorChange() || this.hasTextBackgroundColorChange() || this.hasTextPositionChange() || this.hasImageSettingsChange();

package/es/rce/plugins/instructure_image/ImageEmbedOptions.d.ts

@@ -42,7 +42,6 @@ export function scaleVideoSize(videoSize: any, naturalWidth: any, naturalHeight:
 export function labelForImageSize(imageSize: any): string;
 export const MIN_HEIGHT: 10;
 export const MIN_WIDTH: 10;
-export const MIN_WIDTH_VIDEO: 320;
 export const MIN_PERCENTAGE: 10;
 export const SMALL: "small";
 export const MEDIUM: "medium";
@@ -50,7 +49,6 @@ export const LARGE: "large";
 export const EXTRA_LARGE: "extra-large";
 export const CUSTOM: "custom";
 export const imageSizes: string[];
-export const videoSizes: string[];
 export const studioPlayerSizes: string[];
 export const MIN_WIDTH_STUDIO_PLAYER: number;
 export const MIN_HEIGHT_STUDIO_PLAYER: number;

package/es/rce/plugins/instructure_image/ImageEmbedOptions.js

@@ -18,10 +18,8 @@
 
 import formatMessage from '../../../format-message';
 import { scaleForHeight, scaleForWidth } from '../shared/DimensionUtils';
-import RCEGlobals from '../../../rce/RCEGlobals';
 export const MIN_HEIGHT = 10;
 export const MIN_WIDTH = 10;
-export const MIN_WIDTH_VIDEO = 320;
 export const MIN_PERCENTAGE = 10;
 export const SMALL = 'small';
 export const MEDIUM = 'medium';
@@ -29,7 +27,6 @@ export const LARGE = 'large';
 export const EXTRA_LARGE = 'extra-large';
 export const CUSTOM = 'custom';
 export const imageSizes = [SMALL, MEDIUM, LARGE, EXTRA_LARGE, CUSTOM];
-export const videoSizes = [MEDIUM, LARGE, EXTRA_LARGE, CUSTOM];
 export const studioPlayerSizes = [SMALL, MEDIUM, LARGE, CUSTOM];
 const sizeByMaximumDimension = {
   200: SMALL,
@@ -137,12 +134,8 @@ export function fromVideoEmbed($element) {
   } catch (_ignore) {
     // bad json?
   }
-  if (RCEGlobals.getFeatures()?.consolidated_media_player) {
-    const width = videoOptions.appliedWidth || videoOptions.naturalWidth;
-    videoOptions.videoSize = [SMALL, MEDIUM, LARGE].find(size => width === studioPlayerDimensions[size].width) || CUSTOM;
-  } else {
-    videoOptions.videoSize = imageSizeFromKnownOptions(videoOptions);
-  }
+  const width = videoOptions.appliedWidth || videoOptions.naturalWidth;
+  videoOptions.videoSize = [SMALL, MEDIUM, LARGE].find(size => width === studioPlayerDimensions[size].width) || CUSTOM;
   const source = $videoIframe.getAttribute('src');
   const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
   if (matches) {

package/es/rce/plugins/instructure_paste/plugin.js

@@ -16,16 +16,19 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { trackPendoEvent } from '@instructure/canvas-media';
 import tinymce from 'tinymce';
 import bridge from '../../../bridge';
-import configureStore from '../../../sidebar/store/configureStore';
+import { showFlashAlert } from '../../../common/FlashAlert';
+import formatMessage from '../../../format-message';
 import { get as getSession } from '../../../sidebar/actions/session';
 import { uploadToMediaFolder } from '../../../sidebar/actions/upload';
-import doFileUpload from '../shared/Upload/doFileUpload';
-import formatMessage from '../../../format-message';
-import { isAudioOrVideo, isImage } from '../shared/fileTypeUtils';
-import { showFlashAlert } from '../../../common/FlashAlert';
+import configureStore from '../../../sidebar/store/configureStore';
+import RCEGlobals from '../../RCEGlobals';
 import { isMicrosoftWordContentInEvent } from '../shared/EventUtils';
+import { isAudioOrVideo } from '../shared/fileTypeUtils';
+import doFileUpload from '../shared/Upload/doFileUpload';
+
 // assume that if there are multiple RCEs on the page,
 // they all talk to the same canvas
 const config = {
@@ -110,13 +113,7 @@ tinymce.PluginManager.add('instructure_paste', function (editor) {
         size: file.size,
         domObject: file
       };
-      let tabContext = 'documents';
-      if (isImage(file.type)) {
-        tabContext = 'images';
-      } else if (isAudioOrVideo(file.type)) {
-        tabContext = 'media';
-      }
-      store.dispatch(uploadToMediaFolder(tabContext, fileMetaProps));
+      store.dispatch(uploadToMediaFolder(fileMetaProps));
       return 'submitted';
     }
   }
@@ -158,6 +155,15 @@ tinymce.PluginManager.add('instructure_paste', function (editor) {
         // Skip audio and video files when disabled
         continue;
       }
+      if (isAudioOrVideo(file.type) && RCEGlobals.getFeatures()?.rce_asr_captioning_improvements) {
+        const trayProps = bridge.trayProps.get(editor);
+        trackPendoEvent('canvas_native_media_embedded', {
+          insertion_method: isPaste ? 'paste_file' : 'drag_drop',
+          media_kind: file.type.startsWith('audio/') ? 'audio' : 'video',
+          resourceType: trayProps?.contextType,
+          resourceId: trayProps?.contextId
+        });
+      }
 
       // This will finish once the dialog is closed, if one was created, putting this in a loop allows us
       // to show a dialog for each file without them conflicting.

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalProps } from '@instructure/ui-modal/types';
+import { type ModalProps } from '@instructure/ui-modal';
 export declare function ExternalToolDialogModal(props: Pick<ModalProps, 'label' | 'open' | 'onOpen' | 'onClose' | 'mountNode'> & {
     onCloseButton: () => void;
     name: string;

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionDialog.d.ts

@@ -1,4 +1,4 @@
-import { RceToolWrapper } from "../../RceToolWrapper";
+import { RceToolWrapper } from '../../RceToolWrapper';
 /**
  * Returns a filtered list of items based on the term.
  *

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionDialog.js

@@ -17,22 +17,22 @@ import _pt from "prop-types";
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useState } from "react";
-import { Modal } from "@instructure/ui-modal";
-import { Button, CloseButton } from "@instructure/ui-buttons";
-import { Heading } from "@instructure/ui-heading";
-import { View } from "@instructure/ui-view";
-import { ScreenReaderContent } from "@instructure/ui-a11y-content";
-import { List } from "@instructure/ui-list";
-import { Flex } from "@instructure/ui-flex";
-import { TextInput } from "@instructure/ui-text-input";
-import { IconSearchLine } from "@instructure/ui-icons";
-import { Alert } from "@instructure/ui-alerts";
-import formatMessage from "../../../../../format-message";
-import ExternalToolSelectionItem from "./ExternalToolSelectionItem";
-import { instuiPopupMountNodeFn } from "../../../../../util/fullscreenHelpers";
+import React, { useState } from 'react';
+import { Modal } from '@instructure/ui-modal';
+import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Heading } from '@instructure/ui-heading';
+import { View } from '@instructure/ui-view';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { List } from '@instructure/ui-list';
+import { Flex } from '@instructure/ui-flex';
+import { TextInput } from '@instructure/ui-text-input';
+import { IconSearchLine } from '@instructure/ui-icons';
+import { Alert } from '@instructure/ui-alerts';
+import formatMessage from '../../../../../format-message';
+import ExternalToolSelectionItem from './ExternalToolSelectionItem';
+import { instuiPopupMountNodeFn } from '../../../../../util/fullscreenHelpers';
 // TODO: we really need a way for the client to pass this to the RCE
-const getLiveRegion = () => document.getElementById("flash_screenreader_holder");
+const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
 
 /**
  * Returns a filtered list of items based on the term.
@@ -51,7 +51,7 @@ export function filterItemsByTitleSubstring(searchString, items) {
   return items.filter(item => item.title.toLocaleLowerCase().includes(lowerTerm));
 }
 export function ExternalToolSelectionDialog(props) {
-  const [filterTerm, setFilterTerm] = useState("");
+  const [filterTerm, setFilterTerm] = useState('');
   const [filteredResults, setFilteredResults] = useState(props.ltiButtons);
   const handleFilterChange = e => {
     setFilterTerm(e.target?.value);
@@ -63,31 +63,31 @@ export function ExternalToolSelectionDialog(props) {
     liveRegion: getLiveRegion,
     size: "medium",
     themeOverride: {
-      mediumMaxWidth: "42rem"
+      mediumMaxWidth: '42rem'
     },
-    label: formatMessage("Apps"),
+    label: formatMessage('Apps'),
     mountNode: instuiPopupMountNodeFn(),
     onDismiss: props.onDismiss,
     open: true,
     shouldCloseOnDocumentClick: false
   }, /*#__PURE__*/React.createElement(Modal.Header, {
     themeOverride: {
-      padding: "0.5rem"
+      padding: '0.5rem'
     }
   }, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     offset: "medium",
     onClick: props.onDismiss,
-    screenReaderLabel: formatMessage("Close")
+    screenReaderLabel: formatMessage('Close')
   }), /*#__PURE__*/React.createElement(Heading, {
     margin: "small"
-  }, formatMessage("All Apps")), /*#__PURE__*/React.createElement(View, {
+  }, formatMessage('All Apps')), /*#__PURE__*/React.createElement(View, {
     as: "div",
     padding: "x-small none x-small medium"
   }, /*#__PURE__*/React.createElement(TextInput, {
     type: "search",
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage("Search")),
-    placeholder: formatMessage("Search"),
+    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Search')),
+    placeholder: formatMessage('Search'),
     renderAfterInput: /*#__PURE__*/React.createElement(IconSearchLine, {
       inline: false
     }),
@@ -105,7 +105,7 @@ export function ExternalToolSelectionDialog(props) {
     liveRegion: getLiveRegion,
     variant: "info",
     screenReaderOnly: !filterEmpty
-  }, filterEmpty && formatMessage("No results found for {filterTerm}", {
+  }, filterEmpty && formatMessage('No results found for {filterTerm}', {
     filterTerm
   }), !filterEmpty && formatMessage(`Found { count, plural,
               =0 {# results}
@@ -116,7 +116,7 @@ export function ExternalToolSelectionDialog(props) {
   })), renderTools(filteredResults)))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
     onClick: props.onDismiss,
     color: "primary"
-  }, formatMessage("Done"))));
+  }, formatMessage('Done'))));
   function renderTools(ltiButtons) {
     return /*#__PURE__*/React.createElement(List, {
       isUnstyled: true

package/es/rce/plugins/instructure_rce_external_tools/components/util/ToolLaunchIframe.d.ts

@@ -3,6 +3,10 @@ import React from 'react';
  * Provide an iframe for launching an LTI tool directly from the frontend.
  * Works just like all existing usages of the LTI <iframe> element, including
  * extracting a ref of the <iframe> directly and setting things on it later.
+ *
+ * TODO: consider moving allow stuff here instead of having it be the
+ * responsibility of the caller, need to check if RCE uses same
+ * iframeAllowances() as elsewhere
  */
 declare const ToolLaunchIframe: React.ForwardRefExoticComponent<React.IframeHTMLAttributes<HTMLIFrameElement> & {
     children?: React.ReactNode | undefined;

package/es/rce/plugins/instructure_rce_external_tools/components/util/ToolLaunchIframe.js

@@ -23,6 +23,10 @@ import formatMessage from '../../../../../format-message';
  * Provide an iframe for launching an LTI tool directly from the frontend.
  * Works just like all existing usages of the LTI <iframe> element, including
  * extracting a ref of the <iframe> directly and setting things on it later.
+ *
+ * TODO: consider moving allow stuff here instead of having it be the
+ * responsibility of the caller, need to check if RCE uses same
+ * iframeAllowances() as elsewhere
  */
 const ToolLaunchIframe = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement("iframe", Object.assign({

package/es/rce/plugins/instructure_record/AudioOptionsTray/TrayController.d.ts

@@ -4,14 +4,23 @@ export default class TrayController {
     _shouldOpen: boolean;
     _editor: any;
     _audioContainer: Element | null;
+    _captionsModified: boolean;
+    requestSubtitlesFromIframe(cb: any): void;
     get container(): HTMLElement;
     get isOpen(): boolean;
     showTrayForEditor(editor: any): void;
+    _isPlayerReady: boolean | undefined;
     hideTrayForEditor(editor: any): void;
+    _listenForPlayerIframeToLoad(currentMediaId: any): void;
+    _iframeLoadingListener: AbortController | undefined;
+    _reloadAudioPlayer(): void;
     _dismissTray(): void;
     _resetController(): Node;
+    _resizeContainer({ height, width }: {
+        height: any;
+        width: any;
+    }): void;
     _applyAudioOptions(audioOptions: any): any;
-    requestSubtitlesFromIframe(cb: any): void;
     _subtitleListener: AbortController | undefined;
-    _renderTray(trayProps: any): void;
+    _renderTray(): void;
 }