@instructure/canvas-rce 7.3.1 → 8.0.0

package/es/rce/RCEWrapper.js

@@ -20,7 +20,7 @@ import _pt from "prop-types";
 import React, { Suspense } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import tinymce from 'tinymce';
-import _ from 'lodash';
+import { uniqBy } from 'es-toolkit/compat';
 import { StoreProvider } from './plugins/shared/StoreContext';
 import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
 import { Alert } from '@instructure/ui-alerts';
@@ -144,7 +144,6 @@ class RCEWrapper extends React.Component {
     this._statusBarId = void 0;
     this._textareaEl = void 0;
     this._effectiveContainingContext = void 0;
-    this.AIToolsTray = void 0;
     this.editor = void 0;
     this.initialContent = void 0;
     this.intersectionObserver = void 0;
@@ -332,6 +331,13 @@ class RCEWrapper extends React.Component {
         tinyapp.setAttribute('aria-label', formatMessage('Rich Content Editor'));
         tinyapp.setAttribute('role', 'document');
         tinyapp.setAttribute('tabIndex', '-1');
+
+        // tinyMCE browser detection is wrong for Edge tinymce.Env.browser.isEdge
+        const isEdge = /edg/i.test(navigator.userAgent);
+        if (isEdge) {
+          // Edge translation service breaks the editor
+          tinyapp.setAttribute('translate', 'no');
+        }
       }
 
       // remove role="aplication" attribute from the iframe body
@@ -512,7 +518,6 @@ class RCEWrapper extends React.Component {
             if (autosavedContent !== editorContent) {
               this.setState({
                 confirmAutoSave: true,
-                // @ts-expect-error
                 autoSavedContent: patchAutosavedContent(autosaved.content)
               });
             } else {
@@ -691,64 +696,6 @@ class RCEWrapper extends React.Component {
         this.state.KBShortcutFocusReturn?.focus();
       }
     };
-    this.handleAIClick = () => {
-      import('./plugins/shared/ai_tools').then(module => {
-        // @ts-expect-error
-        this.AIToolsTray = module.AIToolsTray;
-        this.setState({
-          AIToolsOpen: true,
-          AITToolsFocusReturn: document.activeElement
-        });
-      }).catch(ex => {
-        console.error('Failed loading the AIToolsTray', ex);
-      });
-    };
-    this.closeAITools = () => {
-      this.setState({
-        AIToolsOpen: false
-      });
-    };
-    this.AIToolsExited = () => {
-      if (this.state.AITToolsFocusReturn === this.iframe) {
-        // launched using a kb shortcut
-        // the iframe has focus so we need to forward it on to tinymce editor
-        if (this.editor) {
-          this.editor.focus(false);
-        }
-      } else if (this.state.AITToolsFocusReturn === document.getElementById(`show-on-focus-btn-${this.id}`)) {
-        // launched from showOnFocus button
-        // edge case where focusing KBShortcutFocusReturn doesn't work
-        this._showOnFocusButton?.focus();
-      } else {
-        // launched from kb shortcut button on status bar
-        // @ts-expect-error
-        this.state.AITToolsFocusReturn?.focus();
-      }
-    };
-    this.handleInsertAIContent = content => {
-      const editor = this.mceInstance();
-      contentInsertion.insertContent(editor, content);
-    };
-    this.handleReplaceAIContent = content => {
-      const ed = this.mceInstance();
-      const selection = ed.selection;
-      if (selection.getContent().length > 0) {
-        selection.setContent(content);
-      } else {
-        ed.selection.select(ed.getBody(), true);
-        selection.setContent(content);
-      }
-    };
-    this.getCurrentContentForAI = () => {
-      const selected = this.mceInstance().selection.getContent();
-      return selected ? {
-        type: 'selection',
-        content: selected
-      } : {
-        type: 'full',
-        content: this.mceInstance().getContent()
-      };
-    };
     this.handleTextareaChange = () => {
       if (this.isHidden()) {
         this.setCode(this.textareaValue());
@@ -760,7 +707,7 @@ class RCEWrapper extends React.Component {
       alert.id = alertIdValue++;
       this.setState(state => {
         let messages = state.messages.concat(alert);
-        messages = _.uniqBy(messages, 'text'); // Don't show the same message twice
+        messages = uniqBy(messages, 'text'); // Don't show the same message twice
         return {
           messages
         };
@@ -783,7 +730,7 @@ class RCEWrapper extends React.Component {
       }
       alertIdValue = 0;
     };
-    this.style = buildStyle();
+    this.style = buildStyle(!!props.useHighContrast, props.fontFamily);
 
     // Set up some limited global state that can be referenced
     // as needed in RCE's components and function / plugin definitions
@@ -842,8 +789,7 @@ class RCEWrapper extends React.Component {
         prevHeight: _ht
       },
       a11yErrorsCount: 0,
-      shouldShowEditor: typeof IntersectionObserver === 'undefined' || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs,
-      AIToolsOpen: false
+      shouldShowEditor: typeof IntersectionObserver === 'undefined' || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs
     };
     this._statusBarId = `${this.state.id}_statusbar`;
     this.pendingEventHandlers = [];
@@ -867,7 +813,6 @@ class RCEWrapper extends React.Component {
     this.resizeObserver = new ResizeObserver(() => {
       this._handleFullscreenResize();
     });
-    this.AIToolsTray = undefined;
     this._effectiveContainingContext = normalizeContainingContext(this.props.trayProps?.containingContext);
   }
 
@@ -896,17 +841,17 @@ class RCEWrapper extends React.Component {
       rce_transform_loaded_content = false,
       rce_find_replace = false,
       rce_studio_embed_improvements = false,
-      file_verifiers_for_quiz_links = false,
-      consolidated_media_player = false
+      rce_asr_captioning_improvements = false,
+      file_verifiers_for_quiz_links = false
     } = this.props.features;
     return {
       new_math_equation_handling,
       explicit_latex_typesetting,
       rce_transform_loaded_content,
       rce_studio_embed_improvements,
+      rce_asr_captioning_improvements,
       file_verifiers_for_quiz_links,
-      rce_find_replace,
-      consolidated_media_player
+      rce_find_replace
     };
   }
   getRequiredConfigValues() {
@@ -1744,7 +1689,6 @@ class RCEWrapper extends React.Component {
       });
     }
     const statusBarOptions = {
-      aiTextTools: this.props.ai_text_tools,
       isDesktop: tinymce.Env.deviceType.isDesktop(),
       a11yResizers: !!this.props.features?.rce_a11y_resize
     };
@@ -1834,8 +1778,7 @@ class RCEWrapper extends React.Component {
           skipEditorFocus: true
         }),
         disabledPlugins: this.pluginsToExclude,
-        features: statusBarFeatures,
-        onAI: this.handleAIClick
+        features: statusBarFeatures
       }), this._effectiveContainingContext && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
         mountNode: instuiPopupMountNodeFn,
         key: this.id,
@@ -1853,19 +1796,6 @@ class RCEWrapper extends React.Component {
         onExited: this.KBShortcutModalExited,
         onDismiss: this.closeKBShortcutModal,
         open: this.state.KBShortcutModalOpen
-      }), this.props.ai_text_tools && this.AIToolsTray &&
-      /*#__PURE__*/
-      // @ts-expect-error
-      React.createElement(this.AIToolsTray, {
-        open: this.state.AIToolsOpen,
-        container: document.querySelector('[role="main"]'),
-        mountNode: instuiPopupMountNodeFn,
-        contextId: trayProps.contextId,
-        contextType: trayProps.contextId,
-        currentContent: this.getCurrentContentForAI(),
-        onClose: this.closeAITools,
-        onInsertContent: this.handleInsertAIContent,
-        onReplaceContent: this.handleReplaceAIContent
       }), this.state.confirmAutoSave ? /*#__PURE__*/React.createElement(Suspense, {
         fallback: /*#__PURE__*/React.createElement(Spinner, {
           renderTitle: renderLoading,
@@ -1884,7 +1814,6 @@ class RCEWrapper extends React.Component {
   }
 }
 RCEWrapper.propTypes = {
-  ai_text_tools: _pt.bool,
   autosave: _pt.shape({
     enabled: _pt.bool,
     maxAge: _pt.number
@@ -1910,6 +1839,8 @@ RCEWrapper.propTypes = {
   textareaId: _pt.string,
   tinymce: _pt.any.isRequired,
   use_rce_icon_maker: _pt.bool,
+  useHighContrast: _pt.bool,
+  fontFamily: _pt.string,
   userCacheKey: _pt.string
 };
 RCEWrapper.propTypes = rceWrapperPropTypes;

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/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({