@instructure/canvas-rce 7.0.0 → 7.3.0

package/es/rce/RCEWrapper.js

@@ -17,62 +17,63 @@ import _pt from "prop-types";
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { Suspense } from 'react';
-import { Editor } from '@tinymce/tinymce-react';
-import tinymce from 'tinymce';
-import _ from 'lodash';
-import { StoreProvider } from './plugins/shared/StoreContext';
-import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
-import { Alert } from '@instructure/ui-alerts';
-import { Spinner } from '@instructure/ui-spinner';
-import { View } from '@instructure/ui-view';
-import { debounce } from '@instructure/debounce';
-import { uid } from '@instructure/uid';
-import { FocusRegionManager } from '@instructure/ui-a11y-utils';
-import getCookie from '../common/getCookie';
-import formatMessage from '../format-message';
-import * as contentInsertion from './contentInsertion';
-import indicatorRegion from './indicatorRegion';
-import { editorLanguage } from './editorLanguage';
-import normalizeLocale from './normalizeLocale';
-import { sanitizePlugins } from './sanitizePlugins';
-import RCEGlobals from './RCEGlobals';
-import defaultTinymceConfig from '../defaultTinymceConfig';
-import { FS_CHANGEEVENT, FS_ELEMENT, FS_ENABLED, FS_EXIT, FS_REQUEST, instuiPopupMountNodeFn } from '../util/fullscreenHelpers';
-import indicate from '../common/indicate';
-import bridge from '../bridge';
-import CanvasContentTray from './plugins/shared/CanvasContentTray';
-import StatusBar, { PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW } from './StatusBar';
-import { VIEW_CHANGE } from './customEvents';
-import ShowOnFocusButton from './ShowOnFocusButton';
-import KeyboardShortcutModal from './KeyboardShortcutModal';
-import AlertMessageArea from './AlertMessageArea';
-import alertHandler from './alertHandler';
-import { isFileLink, isImageEmbed } from './plugins/shared/ContentSelection';
-import { countShouldIgnore } from './plugins/instructure_wordcount/utils/countContent';
-import launchWordcountModal from './plugins/instructure_wordcount/clickCallback';
-import { determineOSDependentKey } from './userOS';
-import skinCSS from './tinymce.oxide.skin.min.css';
-import contentCSS from './tinymce.oxide.content.min.css';
-import { rceWrapperPropTypes } from './RCEWrapperProps';
-import { insertPlaceholder, placeholderInfoFor, removePlaceholder } from '../util/loadingPlaceholder';
-import { transformRceContentForEditing } from './transformContent';
+import React, { Suspense } from "react";
+import { Editor } from "@tinymce/tinymce-react";
+import tinymce from "tinymce";
+import _ from "lodash";
+import { StoreProvider } from "./plugins/shared/StoreContext";
+import { IconKeyboardShortcutsLine } from "@instructure/ui-icons";
+import { Alert } from "@instructure/ui-alerts";
+import { Spinner } from "@instructure/ui-spinner";
+import { View } from "@instructure/ui-view";
+import { debounce } from "@instructure/debounce";
+import { uid } from "@instructure/uid";
+import { FocusRegionManager } from "@instructure/ui-a11y-utils";
+import getCookie from "../common/getCookie";
+import formatMessage from "../format-message";
+import * as contentInsertion from "./contentInsertion";
+import indicatorRegion from "./indicatorRegion";
+import { editorLanguage } from "./editorLanguage";
+import normalizeLocale from "./normalizeLocale";
+import { sanitizePlugins } from "./sanitizePlugins";
+import RCEGlobals from "./RCEGlobals";
+import defaultTinymceConfig from "../defaultTinymceConfig";
+import { FS_CHANGEEVENT, FS_ELEMENT, FS_ENABLED, FS_EXIT, FS_REQUEST, instuiPopupMountNodeFn } from "../util/fullscreenHelpers";
+import indicate from "../common/indicate";
+import bridge from "../bridge";
+import CanvasContentTray from "./plugins/shared/CanvasContentTray";
+import StatusBar, { PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW } from "./StatusBar";
+import { VIEW_CHANGE } from "./customEvents";
+import ShowOnFocusButton from "./ShowOnFocusButton";
+import KeyboardShortcutModal from "./KeyboardShortcutModal";
+import AlertMessageArea from "./AlertMessageArea";
+import alertHandler from "./alertHandler";
+import { isFileLink, isImageEmbed } from "./plugins/shared/ContentSelection";
+import { countShouldIgnore } from "./plugins/instructure_wordcount/utils/countContent";
+import launchWordcountModal from "./plugins/instructure_wordcount/clickCallback";
+import { determineOSDependentKey } from "./userOS";
+import skinCSS from "./tinymce.oxide.skin.min.css";
+import contentCSS from "./tinymce.oxide.content.min.css";
+import { rceWrapperPropTypes } from "./RCEWrapperProps";
+import { insertPlaceholder, placeholderInfoFor, removePlaceholder } from "../util/loadingPlaceholder";
+import { transformRceContentForEditing } from "./transformContent";
 // @ts-expect-error
-import { IconMoreSolid } from '@instructure/ui-icons/es/svg';
-import EncryptedStorage from '../util/encrypted-storage';
-import buildStyle from './style';
-import { getMenubarForVariant, getMenuForVariant, getToolbarForVariant, getStatusBarFeaturesForVariant } from './RCEVariants';
-import { focusFirstMenuButton, focusToolbar, isElementWithinTable, mergeMenu, mergeMenuItems, mergePlugins, mergeToolbar, parsePluginsToExclude, patchAutosavedContent } from './RCEWrapper.utils';
-import { externalToolsForToolbar } from './plugins/instructure_rce_external_tools/util/externalToolsForToolbar';
-import { initScreenreaderOnFormat } from './screenreaderOnFormat';
-const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
-const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
+import { IconMoreSolid } from "@instructure/ui-icons/es/svg";
+import EncryptedStorage from "../util/encrypted-storage";
+import buildStyle from "./style";
+import { getMenubarForVariant, getMenuForVariant, getToolbarForVariant, getStatusBarFeaturesForVariant } from "./RCEVariants";
+import { focusFirstMenuButton, focusToolbar, isElementWithinTable, mergeMenu, mergeMenuItems, mergePlugins, mergeToolbar, parsePluginsToExclude, patchAutosavedContent } from "./RCEWrapper.utils";
+import { externalToolsForToolbar } from "./plugins/instructure_rce_external_tools/util/externalToolsForToolbar";
+import { initScreenreaderOnFormat } from "./screenreaderOnFormat";
+import { normalizeContainingContext } from "../util/contextHelper";
+const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import("./RestoreAutoSaveModal"));
+const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import("./RceHtmlEditor"));
 const ASYNC_FOCUS_TIMEOUT = 250;
-const DEFAULT_RCE_HEIGHT = '400px';
+const DEFAULT_RCE_HEIGHT = "400px";
 function addKebabIcon(editor) {
   // This has to be done here instead of of in plugins/instructure-ui-icons/plugin.ts
   // presumably because the toolbar gets created before that plugin is loaded?
-  editor.ui.registry.addIcon('more-drawer', IconMoreSolid.src);
+  editor.ui.registry.addIcon("more-drawer", IconMoreSolid.src);
 }
 
 // Get oxide the default skin injected into the DOM before the overrides loaded by themeable
@@ -80,8 +81,8 @@ let inserted = false;
 function injectTinySkin() {
   if (inserted) return;
   inserted = true;
-  const style = document.createElement('style');
-  style.setAttribute('data-skin', 'tiny oxide skin');
+  const style = document.createElement("style");
+  style.setAttribute("data-skin", "tiny oxide skin");
   style.appendChild(document.createTextNode(skinCSS));
   // there's CSS from discussions that turns the instui Selectors bold
   // and in classic quizzes that also mucks with padding
@@ -89,9 +90,9 @@ function injectTinySkin() {
       #discussion-edit-view .rce-wrapper input[readonly] {font-weight: normal;}
       #quiz_edit_wrapper .rce-wrapper input[readonly] {font-weight: normal; padding-left: .75rem;}
     `));
-  const beforeMe = document.head.querySelector('style[data-glamor]') ||
+  const beforeMe = document.head.querySelector("style[data-glamor]") ||
   // find instui's themeable stylesheet
-  document.head.querySelector('style') ||
+  document.head.querySelector("style") ||
   // find any stylesheet
   document.head.firstElementChild;
   document.head.insertBefore(style, beforeMe);
@@ -101,10 +102,10 @@ const editorWrappers = new WeakMap();
 // determines if localStorage is available for our use.
 // see https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
 export function storageAvailable() {
-  let storage;
+  let storage = null;
   try {
     storage = window.localStorage;
-    const x = '__storage_test__';
+    const x = "__storage_test__";
     storage.setItem(x, x);
     storage.removeItem(x);
     return true;
@@ -116,15 +117,15 @@ export function storageAvailable() {
     e.code === 1014 ||
     // test name field too, because code might not be present
     // everything except Firefox
-    e.name === 'QuotaExceededError' ||
+    e.name === "QuotaExceededError" ||
     // Firefox
-    e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+    e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
     // acknowledge QuotaExceededError only if there's something already stored
     storage && storage.length !== 0;
   }
 }
 function renderLoading() {
-  return formatMessage('Loading');
+  return formatMessage("Loading");
 }
 let alertIdValue = 0;
 class RCEWrapper extends React.Component {
@@ -142,6 +143,7 @@ class RCEWrapper extends React.Component {
     this._showOnFocusButton = void 0;
     this._statusBarId = void 0;
     this._textareaEl = void 0;
+    this._effectiveContainingContext = void 0;
     this.AIToolsTray = void 0;
     this.editor = void 0;
     this.initialContent = void 0;
@@ -197,7 +199,7 @@ class RCEWrapper extends React.Component {
       this.setState(newState);
       this.checkAccessibility();
       if (newView === PRETTY_HTML_EDITOR_VIEW || newView === RAW_HTML_EDITOR_VIEW) {
-        this.storage?.setItem?.('rce.htmleditor', newView);
+        this.storage?.setItem?.("rce.htmleditor", newView);
       }
 
       // Emit view change event
@@ -209,20 +211,23 @@ class RCEWrapper extends React.Component {
     this.toggleFullscreen = () => {
       this.handleClickFullscreen();
     };
+    // @ts-expect-error
     this._onFullscreenChange = event => {
       if (document[FS_ELEMENT]) {
         // @ts-expect-error
         this.resizeObserver.observe(document[FS_ELEMENT]);
-        window.visualViewport?.addEventListener('resize', this._handleFullscreenResize);
+        window.visualViewport?.addEventListener("resize", this._handleFullscreenResize);
         this._handleFullscreenResize();
         // @ts-expect-error
-        this._focusRegion = FocusRegionManager.activateRegion(document[FS_ELEMENT], {
+        this._focusRegion = FocusRegionManager.activateRegion(
+        // @ts-expect-error
+        document[FS_ELEMENT], {
           shouldContainFocus: true
         });
       } else {
         event.target.removeEventListener(FS_CHANGEEVENT, this._onFullscreenChange);
         this.resizeObserver.unobserve(event.target);
-        window.visualViewport?.removeEventListener('resize', this._handleFullscreenResize);
+        window.visualViewport?.removeEventListener("resize", this._handleFullscreenResize);
         this._setHeight(this.state.fullscreenState.prevHeight);
         if (this._focusRegion) {
           FocusRegionManager.blurRegion(event.target, this._focusRegion.id);
@@ -239,6 +244,7 @@ class RCEWrapper extends React.Component {
     this.handleFocusRCE = () => {
       this.handleFocus();
     };
+    // @ts-expect-error
     this.handleBlurRCE = event => {
       if (event.relatedTarget === null) {
         // focus might be moving to tinymce
@@ -254,35 +260,35 @@ class RCEWrapper extends React.Component {
       // what we've got for now.
       const ifr = this.iframe;
       if (ifr?.parentElement) {
-        ifr.parentElement.classList.add('active');
+        ifr.parentElement.classList.add("active");
       }
       this.handleFocus();
     };
     this.handleBlurEditor = event => {
       const ifr = this.iframe;
       if (ifr?.parentElement) {
-        ifr.parentElement.classList.remove('active');
+        ifr.parentElement.classList.remove("active");
       }
       this.handleBlur(event);
     };
     this.handleKey = event => {
-      if (event.code === 'F9' && event.altKey) {
+      if (event.code === "F9" && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
         // @ts-expect-error
         focusFirstMenuButton(this._elementRef.current);
-      } else if (event.code === 'F10' && event.altKey) {
+      } else if (event.code === "F10" && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
         // @ts-expect-error
         focusToolbar(this._elementRef.current);
-      } else if (event.code === 'F8' && event.altKey) {
+      } else if (event.code === "F8" && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
         this.openKBShortcutModal();
-      } else if (event.code === 'Escape') {
+      } else if (event.code === "Escape") {
         bridge.hideTrays();
-      } else if (['n', 'N', 'd', 'D'].indexOf(event.key) !== -1) {
+      } else if (["n", "N", "d", "D"].indexOf(event.key) !== -1) {
         // Prevent key events from bubbling up on touch screen device
         event.stopPropagation();
       }
@@ -311,32 +317,32 @@ class RCEWrapper extends React.Component {
       // @ts-expect-error
       textarea.value = this.getCode();
       textarea.style.height = this.state.height;
-      textarea.removeAttribute('aria-hidden');
-      if (document.body.classList.contains('Underline-All-Links__enabled')) {
+      textarea.removeAttribute("aria-hidden");
+      if (document.body.classList.contains("Underline-All-Links__enabled")) {
         if (this.iframe?.contentDocument) {
-          this.iframe.contentDocument.body.classList.add('Underline-All-Links__enabled');
+          this.iframe.contentDocument.body.classList.add("Underline-All-Links__enabled");
         }
       }
-      editor.on('wordCountUpdate', this.onWordCountUpdate);
+      editor.on("wordCountUpdate", this.onWordCountUpdate);
       // add an aria-label to the application div that wraps RCE
       // and change role from "application" to "document" to ensure
       // the editor gets properly picked up by screen readers
       const tinyapp = document.querySelector('.tox-tinymce[role="application"]');
       if (tinyapp) {
-        tinyapp.setAttribute('aria-label', formatMessage('Rich Content Editor'));
-        tinyapp.setAttribute('role', 'document');
-        tinyapp.setAttribute('tabIndex', '-1');
+        tinyapp.setAttribute("aria-label", formatMessage("Rich Content Editor"));
+        tinyapp.setAttribute("role", "document");
+        tinyapp.setAttribute("tabIndex", "-1");
       }
 
       // Probably should do this in tinymce.scss, but we only want it in new rce
-      textarea.style.resize = 'none';
-      editor.on('keydown', this.handleKey);
-      editor.on('FullscreenStateChanged', this._onFullscreenChange);
+      textarea.style.resize = "none";
+      editor.on("keydown", this.handleKey);
+      editor.on("FullscreenStateChanged", this._onFullscreenChange);
       // This propagates click events on the editor out of the iframe to the parent
       // document. We need this so that click events get captured properly by instui
       // focus-trapping components, so they properly ignore trapping focus on click.
-      editor.on('click', () => window.document.body.click(), true);
-      editor.on('Cut Change input Undo Redo', debounce(this.handleInputChange, 1000));
+      editor.on("click", () => window.document.body.click(), true);
+      editor.on("Cut Change input Undo Redo", debounce(this.handleInputChange, 1000));
       initScreenreaderOnFormat(editor);
       this.announceContextToolbars(editor);
       if (this.isAutoSaving) {
@@ -348,12 +354,12 @@ class RCEWrapper extends React.Component {
 
       // readonly should have been handled via the init property passed
       // to <Editor>, but it's not.
-      editor.mode.set(this.props.readOnly ? 'readonly' : 'design');
+      editor.mode.set(this.props.readOnly ? "readonly" : "design");
 
       // Not using iframe_aria_text because compatibility issues.
       // Not using iframe_attrs because library overwriting.
       if (this.iframe) {
-        this.iframe.setAttribute('title', formatMessage('Rich Text Area. Press {OSKey}+F8 for Rich Content Editor shortcuts.', {
+        this.iframe.setAttribute("title", formatMessage("Rich Text Area. Press {OSKey}+F8 for Rich Content Editor shortcuts.", {
           OSKey: determineOSDependentKey()
         }));
       }
@@ -366,13 +372,19 @@ class RCEWrapper extends React.Component {
 
       // cleans up highlight artifacts from findreplace plugin
       if (this.getRequiredFeatureStatuses().rce_find_replace) {
-        editor.on('undo redo', _e => {
-          if (editor?.dom?.doc?.getElementsByClassName?.('mce-match-marker')?.length > 0) {
+        editor.on("undo redo", _e => {
+          if (editor?.dom?.doc?.getElementsByClassName?.("mce-match-marker")?.length > 0) {
             editor.plugins?.searchreplace?.done();
           }
         });
       }
     };
+    /**
+     * Fix keyboard navigation in the expanded toolbar
+     *
+     * NOTE: This is a workaround for https://github.com/tinymce/tinymce/issues/8618
+     *       and should be removed once that issue is resolved and the tinymce dependency is updated to include it.
+     */
     this.fixToolbarKeyboardNavigation = () => {
       // The keyboard navigation config in tinymce for the expanded toolbar is incorrectly configured,
       // and stops at [data-alloy-tabstop] elements.
@@ -380,8 +392,21 @@ class RCEWrapper extends React.Component {
       // This workaround removes attribute, thusly causing navigation to work correctly again.
       // For the correct solution, Keying.config should have { selector: '.tox-toolbar__group' }
       // in https://github.com/tinymce/tinymce/blob/develop/modules/alloy/src/main/ts/ephox/alloy/ui/schema/SplitSlidingToolbarSchema.ts
-      this._elementRef.current?.querySelectorAll('.tox-toolbar-overlord button[data-alloy-tabstop]').forEach(it => it.removeAttribute('data-alloy-tabstop'));
+      this._elementRef.current?.querySelectorAll(".tox-toolbar-overlord button[data-alloy-tabstop]").forEach(it => it.removeAttribute("data-alloy-tabstop"));
     };
+    /**
+     * Sets up selection saving and restoration logic.
+     *
+     * There are certain actions a user can take when the RCE is not focused that clear the selection inside the
+     * editor, such as invoking the Find feature of the browser. If the user then tries to insert content without
+     * going back to the editor, the content would be inserted at the top of the RCE, instead of where their cursor
+     * was.
+     *
+     * This method adds logic that saves and restores the selection to work around the issue.
+     *
+     * @private
+     */
+    // @ts-expect-error
     this._setupSelectionSaving = editor => {
       // @ts-expect-error
       let savedSelection = null;
@@ -394,7 +419,7 @@ class RCEWrapper extends React.Component {
           selectionWasReset = false;
         }
       };
-      editor.on('blur', () => {
+      editor.on("blur", () => {
         editorHasFocus = false;
         selectionWasReset = false;
         if (!this.editor) return;
@@ -403,7 +428,7 @@ class RCEWrapper extends React.Component {
           isForward: this.editor.selection.isForward()
         };
       });
-      editor.on('focus', () => {
+      editor.on("focus", () => {
         // We need to restore the selection when the editor regains focus because sometimes the editor regains
         // focus without the user setting the selection themselves (such as when they interact with the toolbar)
         // and if we didn't, we would end up saving the reset selection before a user managed to actually insert
@@ -412,7 +437,7 @@ class RCEWrapper extends React.Component {
         editorHasFocus = true;
         selectionWasReset = false;
       });
-      editor.on('SelectionChange', () => {
+      editor.on("SelectionChange", () => {
         if (editorHasFocus) {
           // We don't care if a selection reset occurs when the editor has focus, the user probably intended that
           // At least they will see the effect
@@ -422,14 +447,14 @@ class RCEWrapper extends React.Component {
         const selection = this.editor.selection.normalize();
 
         // Detect a browser-reset selection (e.g. From invoking the Find command)
-        if (selection.startContainer?.nodeName === 'BODY' && selection.startContainer === selection.endContainer && selection.startOffset === 0 && selection.endOffset === 0) {
+        if (selection.startContainer?.nodeName === "BODY" && selection.startContainer === selection.endContainer && selection.startOffset === 0 && selection.endOffset === 0) {
           selectionWasReset = true;
         }
       });
-      editor.on('BeforeExecCommand', () => {
+      editor.on("BeforeExecCommand", () => {
         restoreSelectionIfNecessary();
       });
-      editor.on('ExecCommand', (/* event */
+      editor.on("ExecCommand", (/* event */
       ) => {
         if (!this.editor) return;
         // Commands may have modified the selection, we need to recapture it
@@ -440,12 +465,14 @@ class RCEWrapper extends React.Component {
       });
     };
     this.announcing = 0;
+    this._isMounted = false;
+    /* ********** autosave support *************** */
     this.initAutoSave = editor => {
       var _this$props$userCache;
-      this.storage = new EncryptedStorage((_this$props$userCache = this.props.userCacheKey) !== null && _this$props$userCache !== void 0 ? _this$props$userCache : '');
+      this.storage = new EncryptedStorage((_this$props$userCache = this.props.userCacheKey) !== null && _this$props$userCache !== void 0 ? _this$props$userCache : "");
       if (this.storage) {
-        editor.on('change Undo Redo', this.doAutoSave);
-        editor.on('blur', this.doAutoSave);
+        editor.on("change Undo Redo", this.doAutoSave);
+        editor.on("blur", this.doAutoSave);
         this.cleanupAutoSave();
         try {
           const autosaved = this.getAutoSaved(this.autoSaveKey);
@@ -470,10 +497,11 @@ class RCEWrapper extends React.Component {
         } catch (ex) {
           // log and ignore
 
-          console.error('Failed initializing rce autosave', ex);
+          console.error("Failed initializing rce autosave", ex);
         }
       }
     };
+    // remove any autosaved value that's too old
     this.cleanupAutoSave = (deleteAll = false) => {
       if (this.storage) {
         const expiry = deleteAll ? Date.now() : Date.now() - (this.props.autosave?.maxAge || 0);
@@ -489,6 +517,7 @@ class RCEWrapper extends React.Component {
         }
       }
     };
+    // @ts-expect-error
     this.restoreAutoSave = ans => {
       this.setState({
         confirmAutoSave: false
@@ -503,6 +532,7 @@ class RCEWrapper extends React.Component {
       // let the content be restored
       debounce(this.checkAccessibility, 1000)();
     };
+    // @ts-expect-error
     this.doAutoSave = (e, retry = false) => {
       if (this.storage) {
         const editor = this.mceInstance();
@@ -522,14 +552,15 @@ class RCEWrapper extends React.Component {
             this.cleanupAutoSave(true);
             this.doAutoSave(e, true);
           } else {
-            console.error('Autosave failed:', ex);
+            console.error("Autosave failed:", ex);
           }
         }
       }
     };
+    /* *********** end autosave support *************** */
     this.onWordCountUpdate = e => {
       if (!this.editor) return;
-      const shouldIgnore = countShouldIgnore(this.editor, 'body', 'words');
+      const shouldIgnore = countShouldIgnore(this.editor, "body", "words");
       const updatedCount = e.wordCount.words - shouldIgnore;
       this.setState(state => {
         if (updatedCount !== state.wordCount) {
@@ -539,9 +570,10 @@ class RCEWrapper extends React.Component {
         } else return null;
       });
     };
+    // @ts-expect-error
     this.onNodeChange = e => {
       // This is basically copied out of the tinymce silver theme code for the status bar
-      const path = e.parents.filter(p => p.nodeName !== 'BR' && !p.getAttribute('data-mce-bogus') && p.getAttribute('data-mce-type') !== 'bookmark')
+      const path = e.parents.filter(p => p.nodeName !== "BR" && !p.getAttribute("data-mce-bogus") && p.getAttribute("data-mce-type") !== "bookmark")
       // @ts-expect-error
       .map(p => p.nodeName.toLowerCase()).reverse();
       this.setState({
@@ -552,7 +584,7 @@ class RCEWrapper extends React.Component {
       this.props.onContentChange?.(content);
       // check accessibility when clearing the editor,
       // all other times should be checked by handleInputChange
-      if (content === '') {
+      if (content === "") {
         this.checkAccessibility();
       }
     };
@@ -574,12 +606,14 @@ class RCEWrapper extends React.Component {
           height: newHeight
         });
         // play nice and send the same event that the silver theme would send
-        editor.fire('ResizeEditor');
+        editor.fire("ResizeEditor", {
+          deltaY: coordinates.deltaY
+        });
       }
     };
     this.onA11yChecker = triggerElementId => {
       const editor = this.mceInstance();
-      editor.execCommand('openAccessibilityChecker', false, {
+      editor.execCommand("openAccessibilityChecker", false, {
         mountNode: instuiPopupMountNodeFn,
         triggerElementId,
         onFixError: errors => {
@@ -593,7 +627,7 @@ class RCEWrapper extends React.Component {
     };
     this.checkAccessibility = () => {
       const editor = this.mceInstance();
-      editor.execCommand('checkAccessibility', false, {
+      editor.execCommand("checkAccessibility", false, {
         // @ts-expect-error
         done: errors => {
           this.setState({
@@ -633,7 +667,7 @@ class RCEWrapper extends React.Component {
       }
     };
     this.handleAIClick = () => {
-      import('./plugins/shared/ai_tools').then(module => {
+      import("./plugins/shared/ai_tools").then(module => {
         // @ts-expect-error
         this.AIToolsTray = module.AIToolsTray;
         this.setState({
@@ -641,7 +675,7 @@ class RCEWrapper extends React.Component {
           AITToolsFocusReturn: document.activeElement
         });
       }).catch(ex => {
-        console.error('Failed loading the AIToolsTray', ex);
+        console.error("Failed loading the AIToolsTray", ex);
       });
     };
     this.closeAITools = () => {
@@ -683,10 +717,10 @@ class RCEWrapper extends React.Component {
     this.getCurrentContentForAI = () => {
       const selected = this.mceInstance().selection.getContent();
       return selected ? {
-        type: 'selection',
+        type: "selection",
         content: selected
       } : {
-        type: 'full',
+        type: "full",
         content: this.mceInstance().getContent()
       };
     };
@@ -701,7 +735,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
         };
@@ -715,9 +749,12 @@ class RCEWrapper extends React.Component {
         };
       });
     };
+    /**
+     * Used for reseting the value during tests
+     */
     this.resetAlertId = () => {
       if (this.state.messages.length > 0) {
-        throw new Error('There are messages currently, you cannot reset when they are non-zero');
+        throw new Error("There are messages currently, you cannot reset when they are non-zero");
       }
       alertIdValue = 0;
     };
@@ -759,7 +796,7 @@ class RCEWrapper extends React.Component {
     if (!Number.isNaN(_ht)) {
       _ht = `${_ht}px`;
     }
-    const currentRCECount = document.querySelectorAll('.rce-wrapper').length;
+    const currentRCECount = document.querySelectorAll(".rce-wrapper").length;
     const maxInitRenderedRCEs = Number.isNaN(props.maxInitRenderedRCEs) ? RCEWrapper.defaultProps.maxInitRenderedRCEs : props.maxInitRenderedRCEs;
     this.state = {
       path: [],
@@ -770,9 +807,9 @@ class RCEWrapper extends React.Component {
       messages: [],
       announcement: null,
       confirmAutoSave: false,
-      autoSavedContent: '',
+      autoSavedContent: "",
       // @ts-expect-error
-      id: this.props.id || this.props.textareaId || `${uid('rce', 2)}`,
+      id: this.props.id || this.props.textareaId || `${uid("rce", 2)}`,
       // @ts-expect-error
       height: _ht,
       fullscreenState: {
@@ -780,7 +817,7 @@ class RCEWrapper extends React.Component {
         prevHeight: _ht
       },
       a11yErrorsCount: 0,
-      shouldShowEditor: typeof IntersectionObserver === 'undefined' || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs,
+      shouldShowEditor: typeof IntersectionObserver === "undefined" || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs,
       AIToolsOpen: false
     };
     this._statusBarId = `${this.state.id}_statusbar`;
@@ -806,6 +843,7 @@ class RCEWrapper extends React.Component {
       this._handleFullscreenResize();
     });
     this.AIToolsTray = undefined;
+    this._effectiveContainingContext = normalizeContainingContext(this.props.trayProps?.containingContext);
   }
 
   // when the RCE is put into fullscreen we need to move the div
@@ -814,11 +852,11 @@ class RCEWrapper extends React.Component {
   // configure tinymce to say where that div is mounted, do this
   // is a bit of a hack to tag the div that is this RCE's
   _tagTinymceAuxDiv() {
-    const tinyauxlist = document.querySelectorAll('.tox-tinymce-aux');
+    const tinyauxlist = document.querySelectorAll(".tox-tinymce-aux");
     if (tinyauxlist.length) {
       const myaux = tinyauxlist[tinyauxlist.length - 1];
       if (myaux.id) {
-        console.error('Unexpected ID on my tox-tinymce-aux element');
+        console.error("Unexpected ID on my tox-tinymce-aux element");
       }
       myaux.id = `tinyaux-${this.id}`;
     }
@@ -832,6 +870,7 @@ class RCEWrapper extends React.Component {
       explicit_latex_typesetting = false,
       rce_transform_loaded_content = false,
       rce_find_replace = false,
+      rce_studio_embed_improvements = false,
       file_verifiers_for_quiz_links = false,
       consolidated_media_player = false
     } = this.props.features;
@@ -839,6 +878,7 @@ class RCEWrapper extends React.Component {
       new_math_equation_handling,
       explicit_latex_typesetting,
       rce_transform_loaded_content,
+      rce_studio_embed_improvements,
       file_verifiers_for_quiz_links,
       rce_find_replace,
       consolidated_media_player
@@ -876,7 +916,7 @@ class RCEWrapper extends React.Component {
     let status = true;
     // Check for remaining placeholders
     if (this.mceInstance().dom.doc.querySelector(`[data-placeholder-for]`)) {
-      status = promptFunc(formatMessage('Content is still being uploaded, if you continue it will not be embedded properly.'));
+      status = promptFunc(formatMessage("Content is still being uploaded, if you continue it will not be embedded properly."));
     }
     return status;
   }
@@ -936,9 +976,9 @@ class RCEWrapper extends React.Component {
         // @ts-expect-error
         ifr.contentDocument.body.clientHeight -
         // @ts-expect-error
-        parseInt(editor_body_style['padding-top'], 10) -
+        parseInt(editor_body_style["padding-top"], 10) -
         // @ts-expect-error
-        parseInt(editor_body_style['padding-bottom'], 10);
+        parseInt(editor_body_style["padding-bottom"], 10);
         const para_margin_ht = 24;
         const reserve_ht = Math.ceil(height + para_margin_ht);
         if (reserve_ht > editor_ht) {
@@ -950,7 +990,7 @@ class RCEWrapper extends React.Component {
     }
   }
   checkImageLoadError(element) {
-    if (!element || element.tagName !== 'IMG') {
+    if (!element || element.tagName !== "IMG") {
       return;
     }
     // @ts-expect-error
@@ -965,9 +1005,9 @@ class RCEWrapper extends React.Component {
       // @ts-expect-error
       if (element.naturalWidth === 0) {
         // @ts-expect-error
-        element.style.border = '1px solid #000';
+        element.style.border = "1px solid #000";
         // @ts-expect-error
-        element.style.padding = '2px';
+        element.style.padding = "2px";
       }
     }, 0);
   }
@@ -977,7 +1017,7 @@ class RCEWrapper extends React.Component {
     this.contentInserted(element);
   }
   replaceCode(code) {
-    if (code !== '' && window.confirm(formatMessage('Content in the editor will be changed. Press Cancel to keep the original content.'))) {
+    if (code !== "" && window.confirm(formatMessage("Content in the editor will be changed. Press Cancel to keep the original content."))) {
       this.mceInstance().setContent(code);
     }
   }
@@ -994,12 +1034,12 @@ class RCEWrapper extends React.Component {
     // that there's some embedded content helper
     // From what I've read, "title" is more reliable than "aria-label" for
     // elements like iframes and embeds.
-    const temp = document.createElement('div');
+    const temp = document.createElement("div");
     temp.innerHTML = code;
     const code_elem = temp.firstElementChild;
     if (code_elem) {
-      if (!code_elem.hasAttribute('title') && !code_elem.hasAttribute('aria-label')) {
-        code_elem.setAttribute('title', formatMessage('embedded content'));
+      if (!code_elem.hasAttribute("title") && !code_elem.hasAttribute("aria-label")) {
+        code_elem.setAttribute("title", formatMessage("embedded content"));
       }
       code = code_elem.outerHTML;
     }
@@ -1009,7 +1049,7 @@ class RCEWrapper extends React.Component {
     // and it's often inserted into a <p> on top of that.  Find the
     // iframe and use it to flash the indicator.
     const element = contentInsertion.insertContent(editor, code);
-    const ifr = element && element.querySelector && element.querySelector('iframe');
+    const ifr = element && element.querySelector && element.querySelector("iframe");
     if (ifr) {
       this.contentInserted(ifr);
     } else {
@@ -1021,7 +1061,7 @@ class RCEWrapper extends React.Component {
     const element = contentInsertion.insertImage(editor, image, this.getCanvasUrl());
 
     // Removes TinyMCE's caret &nbsp; text if exists.
-    if (element?.nextSibling?.data?.startsWith('\xA0' /* nbsp */)) {
+    if (element?.nextSibling?.data?.startsWith("\xA0" /* nbsp */)) {
       element.nextSibling.splitText(1);
       element.nextSibling.remove();
     }
@@ -1095,16 +1135,15 @@ class RCEWrapper extends React.Component {
     if (this.editor) {
       return this.editor;
     }
-    const editors = this.props.tinymce.editors || [];
-    return editors.filter(ed => ed.id === this.props.textareaId)[0];
+    return this.props.tinymce.get(this.props.textareaId);
   }
 
   // @ts-expect-error
   onTinyMCEInstance(command, ...args) {
     const editor = this.mceInstance();
     if (editor) {
-      if (command === 'mceRemoveEditor') {
-        editor.execCommand('mceNewDocument');
+      if (command === "mceRemoveEditor") {
+        editor.execCommand("mceNewDocument");
       } // makes sure content can't persist past removal
       editor.execCommand(command, false, ...args);
     }
@@ -1124,17 +1163,17 @@ class RCEWrapper extends React.Component {
     return null;
   }
   textareaValue() {
-    return this.getTextarea()?.value || '';
+    return this.getTextarea()?.value || "";
   }
   get id() {
     return this.state.id;
   }
   getHtmlEditorStorage() {
-    const cookieValue = getCookie('rce.htmleditor');
+    const cookieValue = getCookie("rce.htmleditor");
     if (cookieValue) {
       document.cookie = `rce.htmleditor=${cookieValue};path=/;max-age=0`;
     }
-    const value = cookieValue || this.storage?.getItem?.('rce.htmleditor')?.content;
+    const value = cookieValue || this.storage?.getItem?.("rce.htmleditor")?.content;
     return value === RAW_HTML_EDITOR_VIEW || value === PRETTY_HTML_EDITOR_VIEW ? value : PRETTY_HTML_EDITOR_VIEW;
   }
   _isFullscreen() {
@@ -1151,7 +1190,7 @@ class RCEWrapper extends React.Component {
       this._elementRef.current?.appendChild(tinymenuhost);
     }
     this._elementRef.current?.addEventListener(FS_CHANGEEVENT, this._onFullscreenChange);
-    if (typeof this._elementRef.current?.offsetHeight === 'number') {
+    if (typeof this._elementRef.current?.offsetHeight === "number") {
       this.setState({
         fullscreenState: {
           prevHeight: this._elementRef.current.offsetHeight - this._getStatusBarHeight()
@@ -1171,9 +1210,6 @@ class RCEWrapper extends React.Component {
       document[FS_EXIT]();
     }
   }
-
-  // @ts-expect-error
-
   _getStatusBarHeight() {
     // the height prop is the height of the editor and does not include
     // the status bar. we'll need this later.
@@ -1186,7 +1222,7 @@ class RCEWrapper extends React.Component {
     const container = ed.getContainer();
     if (container) {
       container.style.height = cssHeight;
-      ed.fire('ResizeEditor');
+      ed.fire("ResizeEditor");
     }
     const textarea = this.getTextarea();
     if (textarea) {
@@ -1197,10 +1233,10 @@ class RCEWrapper extends React.Component {
     });
   }
   focus() {
-    this.onTinyMCEInstance('mceFocus');
+    this.onTinyMCEInstance("mceFocus");
     // tinymce doesn't always call the focus handler.
     // @ts-expect-error
-    this.handleFocusEditor(new Event('focus', {
+    this.handleFocusEditor(new Event("focus", {
       target: this.mceInstance()
     }));
   }
@@ -1238,7 +1274,7 @@ class RCEWrapper extends React.Component {
    */
   get _mceSerializedInitialHtml() {
     if (!this._mceSerializedInitialHtmlCached) {
-      const el = window.document.createElement('div');
+      const el = window.document.createElement("div");
       // @ts-expect-error
       el.innerHTML = this.initialContent;
       const serializer = this.mceInstance().serializer;
@@ -1292,20 +1328,22 @@ class RCEWrapper extends React.Component {
           // focus is still somewhere w/in me
           return;
         }
-        const activeClass = document.activeElement && document.activeElement.getAttribute('class');
+        const activeClass = document.activeElement?.getAttribute("class");
         if (
         // @ts-expect-error
-        (event.focusedEditor === undefined || event.target.id === event.focusedEditor?.id) && activeClass?.includes('tox-')) {
+        (event.focusedEditor === undefined ||
+        // @ts-expect-error
+        event.target.id === event.focusedEditor?.id) && activeClass?.includes("tox-")) {
           // if a toolbar button has focus, then the user clicks on the "more" button
           // focus jumps to the body, then eventually to the popped up toolbar. This
           // catches that case.
           return;
         }
-        if (event?.relatedTarget?.getAttribute('class')?.includes('tox-')) {
+        if (event?.relatedTarget?.getAttribute("class")?.includes("tox-")) {
           // a tinymce popup has focus
           return;
         }
-        const popups = document.querySelectorAll('[data-mce-component]');
+        const popups = document.querySelectorAll("[data-mce-component]");
         for (const popup of popups) {
           if (popup.contains(document.activeElement)) {
             // one of our popups has focus
@@ -1319,50 +1357,26 @@ class RCEWrapper extends React.Component {
       }, ASYNC_FOCUS_TIMEOUT);
     }
   }
-
-  // @ts-expect-error
-
   // @ts-expect-error
   call(methodName, ...args) {
     // since exists? has a ? and cant be a regular function just return true
     // rather than calling as a fn on the editor
-    if (methodName === 'exists?') {
+    if (methodName === "exists?") {
       return true;
     }
     // @ts-expect-error
     return this[methodName](...args);
   }
-
-  /**
-   * Fix keyboard navigation in the expanded toolbar
-   *
-   * NOTE: This is a workaround for https://github.com/tinymce/tinymce/issues/8618
-   *       and should be removed once that issue is resolved and the tinymce dependency is updated to include it.
-   */
-
-  /**
-   * Sets up selection saving and restoration logic.
-   *
-   * There are certain actions a user can take when the RCE is not focused that clear the selection inside the
-   * editor, such as invoking the Find feature of the browser. If the user then tries to insert content without
-   * going back to the editor, the content would be inserted at the top of the RCE, instead of where their cursor
-   * was.
-   *
-   * This method adds logic that saves and restores the selection to work around the issue.
-   *
-   * @private
-   */
-  // @ts-expect-error
-
   announceContextToolbars(editor) {
-    editor.on('NodeChange', () => {
+    editor.on("NodeChange", () => {
+      if (!this._isMounted) return;
       const node = editor.selection.getNode();
       // @ts-expect-error
       if (isImageEmbed(node, editor)) {
         if (this.announcing !== 1) {
           this.setState({
-            announcement: formatMessage('type Control F9 to access image options. {text}', {
-              text: node.getAttribute('alt')
+            announcement: formatMessage("type Control F9 to access image options. {text}", {
+              text: node.getAttribute("alt")
             })
           });
           this.announcing = 1;
@@ -1370,7 +1384,7 @@ class RCEWrapper extends React.Component {
       } else if (isFileLink(node, editor)) {
         if (this.announcing !== 2) {
           this.setState({
-            announcement: formatMessage('type Control F9 to access link options. {text}', {
+            announcement: formatMessage("type Control F9 to access link options. {text}", {
               text: node.textContent
             })
           });
@@ -1379,7 +1393,7 @@ class RCEWrapper extends React.Component {
       } else if (isElementWithinTable(node)) {
         if (this.announcing !== 3) {
           this.setState({
-            announcement: formatMessage('type Control F9 to access table options. {text}', {
+            announcement: formatMessage("type Control F9 to access table options. {text}", {
               text: node.textContent
             })
           });
@@ -1392,14 +1406,21 @@ class RCEWrapper extends React.Component {
         this.announcing = 0;
       }
     });
+    editor.on("ResizeEditor", ({
+      deltaY
+    }) => {
+      if (!this._isMounted || !deltaY) return;
+      if (deltaY < 0) {
+        this.setState({
+          announcement: formatMessage("The height of Rich Content Area is decreased.")
+        });
+      } else {
+        this.setState({
+          announcement: formatMessage("The height of Rich Content Area is increased.")
+        });
+      }
+    });
   }
-
-  /* ********** autosave support *************** */
-
-  // remove any autosaved value that's too old
-
-  // @ts-expect-error
-
   getAutoSaved(key) {
     let autosaved = null;
     try {
@@ -1421,28 +1442,21 @@ class RCEWrapper extends React.Component {
     // This doesn't apply if the editor is off-screen or has visibility:hidden;
     // only if it isn't rendered or has display:none;
     const editorVisible = this.editor.getContainer().offsetParent;
-    return this.props.autosave?.enabled && editorVisible && document.querySelectorAll('.rce-wrapper').length === 1 && storageAvailable();
+    return this.props.autosave?.enabled && editorVisible && document.querySelectorAll(".rce-wrapper").length === 1 && storageAvailable();
   }
   get autoSaveKey() {
-    // @ts-expect-error
-    const userId = this.props.trayProps?.containingContext.userId;
+    const userId = this._effectiveContainingContext?.userId || "-";
     return `rceautosave:${userId}${window.location.href}:${this.props.textareaId}`;
   }
-
-  // @ts-expect-error
-
-  /* *********** end autosave support *************** */
-
-  // @ts-expect-error
-
   componentWillUnmount() {
+    this._isMounted = false;
     if (this.state.shouldShowEditor) {
       window.clearTimeout(this.blurTimer);
       if (!this._destroyCalled) {
         this.destroy();
       }
       if (this._elementRef.current) {
-        this._elementRef.current.removeEventListener('keydown', this.handleKey, true);
+        this._elementRef.current.removeEventListener("keydown", this.handleKey, true);
       }
       this.mutationObserver?.disconnect();
       this.intersectionObserver?.disconnect();
@@ -1454,27 +1468,27 @@ class RCEWrapper extends React.Component {
 
     // @ts-expect-error
     const setupCallback = options.setup;
-    const canvasPlugins = rcsExists ? ['instructure_image', 'instructure_documents', 'instructure_equation'] : [];
+    const canvasPlugins = rcsExists ? ["instructure_image", "instructure_documents", "instructure_equation"] : [];
     if (rcsExists && !this.props.instRecordDisabled) {
-      canvasPlugins.splice(2, 0, 'instructure_record');
+      canvasPlugins.splice(2, 0, "instructure_record");
     }
-    const pastePlugins = rcsExists ? ['instructure_paste', 'paste'] : ['paste'];
-    if (rcsExists && this.props.use_rce_icon_maker && this.props.trayProps?.contextType === 'course') {
-      canvasPlugins.push('instructure_icon_maker');
+    const pastePlugins = rcsExists ? ["instructure_paste", "paste"] : ["paste"];
+    if (rcsExists && this.props.use_rce_icon_maker && this.props.trayProps?.contextType === "course") {
+      canvasPlugins.push("instructure_icon_maker");
     }
     if (document[FS_ENABLED]) {
-      canvasPlugins.push('instructure_fullscreen');
+      canvasPlugins.push("instructure_fullscreen");
     }
     if (this.getRequiredFeatureStatuses().rce_find_replace) {
-      canvasPlugins.push('searchreplace');
-      canvasPlugins.push('instructure_search_and_replace');
+      canvasPlugins.push("searchreplace");
+      canvasPlugins.push("instructure_search_and_replace");
     }
-    const possibleNewMenubarItems = this.props.editorOptions.menu ? Object.keys(this.props.editorOptions.menu).join(' ') : undefined;
+    const possibleNewMenubarItems = this.props.editorOptions.menu ? Object.keys(this.props.editorOptions.menu).join(" ") : undefined;
     const wrappedOpts = {
       ...defaultTinymceConfig,
       ...options,
       readonly: this.props.readOnly,
-      theme: 'silver',
+      theme: "silver",
       // some older code specified 'modern', which doesn't exist any more
 
       // @ts-expect-error
@@ -1483,7 +1497,7 @@ class RCEWrapper extends React.Component {
       document_base_url: this.props.canvasOrigin,
       block_formats:
       // @ts-expect-error
-      options.block_formats || [`${formatMessage('Heading 2')}=h2`, `${formatMessage('Heading 3')}=h3`, `${formatMessage('Heading 4')}=h4`, `${formatMessage('Preformatted')}=pre`, `${formatMessage('Paragraph')}=p`].join('; '),
+      options.block_formats || [`${formatMessage("Heading 2")}=h2`, `${formatMessage("Heading 3")}=h3`, `${formatMessage("Heading 4")}=h4`, `${formatMessage("Preformatted")}=pre`, `${formatMessage("Paragraph")}=p`].join("; "),
       setup: editor => {
         addKebabIcon(editor);
         editorWrappers.set(editor, this);
@@ -1496,7 +1510,7 @@ class RCEWrapper extends React.Component {
         // @ts-expect-error
         bridge.userLocale = userLocale;
         bridge.canvasOrigin = this.props.canvasOrigin;
-        if (typeof setupCallback === 'function') {
+        if (typeof setupCallback === "function") {
           setupCallback(editor);
         }
       },
@@ -1507,7 +1521,7 @@ class RCEWrapper extends React.Component {
       // @ts-expect-error
       content_css: options.content_css || [],
       // @ts-expect-error
-      content_style: contentCSS + (options.content_style || ''),
+      content_style: contentCSS + (options.content_style || ""),
       menubar: mergeMenuItems(getMenubarForVariant(this.variant), possibleNewMenubarItems),
       // default menu options listed at https://www.tiny.cloud/docs/configure/editor-appearance/#menu
       // tinymce's default edit and table menus are fine
@@ -1522,10 +1536,10 @@ class RCEWrapper extends React.Component {
       getToolbarForVariant(this.variant, this.ltiToolFavorites),
       // @ts-expect-error
       options.toolbar),
-      contextmenu: '',
+      contextmenu: "",
       // show the browser's native context menu
 
-      toolbar_mode: 'sliding',
+      toolbar_mode: "sliding",
       toolbar_sticky: true,
       // In regards to the ability to disable plugins:
       // we only have to explicitly manage the removal of plugins
@@ -1534,16 +1548,16 @@ class RCEWrapper extends React.Component {
       // handles all of that complexity. It that ever changes in the
       // future in an upgraded version, we will have to update the
       // logic in those other places as well.
-      plugins: mergePlugins(['autolink', 'media', 'table', 'link', 'directionality', 'lists', 'textpattern', 'hr', 'instructure_color', 'instructure-ui-icons', 'instructure_condensed_buttons', 'instructure_links', 'instructure_html_view', 'instructure_media_embed', 'a11y_checker', 'wordcount', 'instructure_wordcount', 'instructure_studio_media_options', 'instructure_rce_external_tools', ...pastePlugins, ...canvasPlugins],
+      plugins: mergePlugins(["autolink", "media", "table", "link", "directionality", "lists", "textpattern", "hr", "instructure_color", "instructure-ui-icons", "instructure_condensed_buttons", "instructure_links", "instructure_html_view", "instructure_media_embed", "a11y_checker", "wordcount", "instructure_wordcount", "instructure_wordcount_header", "instructure_keyboard_shortcuts_header", "instructure_studio_media_options", "instructure_rce_external_tools", ...pastePlugins, ...canvasPlugins],
       // filter out the plugins designated for removal
       // @ts-expect-error
-      sanitizePlugins(options.plugins)?.filter(p => p.length > 0 && p[0] !== '-'), this.pluginsToExclude),
+      sanitizePlugins(options.plugins)?.filter(p => p.length > 0 && p[0] !== "-"), this.pluginsToExclude),
       textpattern_patterns: [{
-        start: '* ',
-        cmd: 'InsertUnorderedList'
+        start: "* ",
+        cmd: "InsertUnorderedList"
       }, {
-        start: '- ',
-        cmd: 'InsertUnorderedList'
+        start: "- ",
+        cmd: "InsertUnorderedList"
       }]
     };
     if (this.props.trayProps) {
@@ -1565,7 +1579,7 @@ class RCEWrapper extends React.Component {
   }
   unhandleTextareaChange() {
     if (this._textareaEl) {
-      this._textareaEl.removeEventListener('input', this.handleTextareaChange);
+      this._textareaEl.removeEventListener("input", this.handleTextareaChange);
     }
   }
   registerTextareaChange() {
@@ -1573,7 +1587,7 @@ class RCEWrapper extends React.Component {
     if (this._textareaEl !== el) {
       this.unhandleTextareaChange();
       if (el) {
-        el.addEventListener('input', this.handleTextareaChange);
+        el.addEventListener("input", this.handleTextareaChange);
         if (this.props.textareaClassName) {
           // split the string on whitespace because classList doesn't let you add multiple
           // space seperated classes at a time but does let you add an array of them
@@ -1584,6 +1598,7 @@ class RCEWrapper extends React.Component {
     }
   }
   componentDidMount() {
+    this._isMounted = true;
     if (this.state.shouldShowEditor) {
       this.editorReallyDidMount();
     } else {
@@ -1598,7 +1613,7 @@ class RCEWrapper extends React.Component {
       // initialize the RCE when it gets close to entering the viewport
       {
         root: null,
-        rootMargin: '200px 0px',
+        rootMargin: "200px 0px",
         threshold: 0.0
       });
       // @ts-expect-error
@@ -1617,7 +1632,7 @@ class RCEWrapper extends React.Component {
           this.focusCurrentView();
         }
         if (prevProps.readOnly !== this.props.readOnly) {
-          this.mceInstance().mode.set(this.props.readOnly ? 'readonly' : 'design');
+          this.mceInstance().mode.set(this.props.readOnly ? "readonly" : "design");
         }
       }
     }
@@ -1631,7 +1646,7 @@ class RCEWrapper extends React.Component {
     this._tagTinymceAuxDiv();
     this.registerTextareaChange();
     // @ts-expect-error
-    this._elementRef.current.addEventListener('keydown', this.handleKey, true);
+    this._elementRef.current.addEventListener("keydown", this.handleKey, true);
     // give the textarea its initial size
     this.onResize(null, {
       deltaY: 0
@@ -1639,7 +1654,7 @@ class RCEWrapper extends React.Component {
     // Preload the LTI Tools modal
     // This helps with loading the favorited external tools
     if (this.ltiToolFavorites.length > 0) {
-      import('./plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionDialog');
+      import("./plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionDialog");
     }
     bridge.renderEditor(this);
   }
@@ -1655,20 +1670,15 @@ class RCEWrapper extends React.Component {
         this.mceInstance().hide();
     }
   }
-
-  /**
-   * Used for reseting the value during tests
-   */
-
   renderHtmlEditor() {
     // the div keeps the editor from collapsing while the code editor is downloaded
     return /*#__PURE__*/React.createElement(Suspense, {
       fallback: /*#__PURE__*/React.createElement("div", {
         style: {
           height: this.state.height,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center'
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
         }
       }, /*#__PURE__*/React.createElement(Spinner, {
         renderTitle: renderLoading,
@@ -1704,11 +1714,16 @@ class RCEWrapper extends React.Component {
         ref: this._editorPlaceholderRef,
         style: {
           height: `${this.props.editorOptions.height}px`,
-          border: '1px solid grey'
+          border: "1px solid grey"
         }
       });
     }
-    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, this.props.ai_text_tools, tinymce.Env.deviceType.isDesktop());
+    const statusBarOptions = {
+      aiTextTools: this.props.ai_text_tools,
+      isDesktop: tinymce.Env.deviceType.isDesktop(),
+      a11yResizers: !!this.props.features?.rce_a11y_resize
+    };
+    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, statusBarOptions);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, this.style.css), /*#__PURE__*/React.createElement(StoreProvider, {
       jwt: this.props.trayProps?.jwt,
       refreshToken: this.props.trayProps?.refreshToken,
@@ -1725,8 +1740,8 @@ class RCEWrapper extends React.Component {
         // @ts-expect-error
         ,
         ref: this._elementRef,
-        style: this.variant === 'full' ? {
-          marginBottom: '.5rem'
+        style: this.variant === "full" ? {
+          marginBottom: ".5rem"
         } : undefined,
         onFocus: this.handleFocusRCE,
         onBlur: this.handleBlurRCE
@@ -1734,7 +1749,7 @@ class RCEWrapper extends React.Component {
         id: `show-on-focus-btn-${this.id}`,
         onClick: this.openKBShortcutModal,
         margin: "xx-small",
-        screenReaderLabel: formatMessage('View keyboard shortcuts')
+        screenReaderLabel: formatMessage("View keyboard shortcuts")
         // @ts-expect-error
         ,
         ref: el => this._showOnFocusButton = el
@@ -1746,7 +1761,7 @@ class RCEWrapper extends React.Component {
         afterDismiss: this.removeAlert
       }), this.state.editorView === PRETTY_HTML_EDITOR_VIEW && this.renderHtmlEditor(), /*#__PURE__*/React.createElement("div", {
         style: {
-          display: this.state.editorView === PRETTY_HTML_EDITOR_VIEW ? 'none' : 'block'
+          display: this.state.editorView === PRETTY_HTML_EDITOR_VIEW ? "none" : "block"
         }
       }, /*#__PURE__*/React.createElement(Editor, {
         id: mceProps.textareaId,
@@ -1796,7 +1811,7 @@ class RCEWrapper extends React.Component {
         disabledPlugins: this.pluginsToExclude,
         features: statusBarFeatures,
         onAI: this.handleAIClick
-      }), this.props.trayProps?.containingContext && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
+      }), this._effectiveContainingContext && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
         mountNode: instuiPopupMountNodeFn,
         key: this.id,
         canvasOrigin: this.getCanvasUrl(),
@@ -1805,7 +1820,9 @@ class RCEWrapper extends React.Component {
         onTrayClosing: this.handleContentTrayClosing,
         use_rce_icon_maker: this.props.use_rce_icon_maker
       }, trayProps, {
+        containingContext: this._effectiveContainingContext
         // @ts-expect-error
+        ,
         storeProps: storeProps
       })), /*#__PURE__*/React.createElement(KeyboardShortcutModal, {
         onExited: this.KBShortcutModalExited,
@@ -1837,7 +1854,7 @@ class RCEWrapper extends React.Component {
       })) : null, /*#__PURE__*/React.createElement(Alert, {
         screenReaderOnly: true,
         liveRegion: this.props.liveRegion
-      }, this.state.announcement));
+      }, this.state.announcement || null));
     }));
   }
 }
@@ -1845,8 +1862,7 @@ RCEWrapper.propTypes = {
   ai_text_tools: _pt.bool,
   autosave: _pt.shape({
     enabled: _pt.bool,
-    maxAge: _pt.number,
-    interval: _pt.number
+    maxAge: _pt.number
   }),
   canvasOrigin: _pt.string,
   defaultContent: _pt.string,
@@ -1882,8 +1898,8 @@ RCEWrapper.defaultProps = {
   maxInitRenderedRCEs: -1,
   features: {},
   timezone: Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone,
-  canvasOrigin: '',
-  variant: 'full'
+  canvasOrigin: "",
+  variant: "full"
 };
 RCEWrapper.skinCssInjected = false;
 export default RCEWrapper;