@instructure/canvas-rce 7.3.0 → 8.0.0

package/es/rce/RCEWrapper.js

@@ -17,63 +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 { uniqBy } from 'es-toolkit/compat';
+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";
-import { normalizeContainingContext } from "../util/contextHelper";
-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
@@ -81,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
@@ -90,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);
@@ -105,7 +105,7 @@ export function storageAvailable() {
   let storage = null;
   try {
     storage = window.localStorage;
-    const x = "__storage_test__";
+    const x = '__storage_test__';
     storage.setItem(x, x);
     storage.removeItem(x);
     return true;
@@ -117,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 {
@@ -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;
@@ -199,7 +198,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
@@ -216,7 +215,7 @@ class RCEWrapper extends React.Component {
       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(
@@ -227,7 +226,7 @@ class RCEWrapper extends React.Component {
       } 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);
@@ -260,35 +259,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();
       }
@@ -317,32 +316,64 @@ 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');
+
+        // 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
+      // tinymce adds this when the editor is wrapped in an iframe
+      // which makes RCE input fields inaccessible to screen readers
+      const iframe = tinyapp?.querySelector('iframe');
+      const body = iframe?.contentDocument?.body;
+      if (body) {
+        const observer = new MutationObserver(() => {
+          try {
+            if (body && body.getAttribute('role') === 'application') {
+              body.removeAttribute('role');
+            }
+          } catch (_) {
+            /* pass */
+          }
+        });
+        observer.observe(body, {
+          attributes: true,
+          childList: false,
+          subtree: false
+        });
+        body.setAttribute('data-role-checked', 'true'); // to trigger observer
+
+        setTimeout(() => observer.disconnect(), 10000);
       }
 
       // 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) {
@@ -354,12 +385,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()
         }));
       }
@@ -372,8 +403,8 @@ 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();
           }
         });
@@ -392,7 +423,7 @@ 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.
@@ -419,7 +450,7 @@ class RCEWrapper extends React.Component {
           selectionWasReset = false;
         }
       };
-      editor.on("blur", () => {
+      editor.on('blur', () => {
         editorHasFocus = false;
         selectionWasReset = false;
         if (!this.editor) return;
@@ -428,7 +459,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
@@ -437,7 +468,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
@@ -447,14 +478,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
@@ -469,10 +500,10 @@ class RCEWrapper extends React.Component {
     /* ********** 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);
@@ -487,7 +518,6 @@ class RCEWrapper extends React.Component {
             if (autosavedContent !== editorContent) {
               this.setState({
                 confirmAutoSave: true,
-                // @ts-expect-error
                 autoSavedContent: patchAutosavedContent(autosaved.content)
               });
             } else {
@@ -497,7 +527,7 @@ class RCEWrapper extends React.Component {
         } catch (ex) {
           // log and ignore
 
-          console.error("Failed initializing rce autosave", ex);
+          console.error('Failed initializing rce autosave', ex);
         }
       }
     };
@@ -552,7 +582,7 @@ class RCEWrapper extends React.Component {
             this.cleanupAutoSave(true);
             this.doAutoSave(e, true);
           } else {
-            console.error("Autosave failed:", ex);
+            console.error('Autosave failed:', ex);
           }
         }
       }
@@ -560,7 +590,7 @@ class RCEWrapper extends React.Component {
     /* *********** 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) {
@@ -573,7 +603,7 @@ class RCEWrapper extends React.Component {
     // @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({
@@ -584,7 +614,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();
       }
     };
@@ -606,14 +636,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 => {
@@ -627,7 +657,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({
@@ -666,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());
@@ -735,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
         };
@@ -754,11 +726,11 @@ class RCEWrapper extends React.Component {
      */
     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;
     };
-    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
@@ -796,7 +768,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: [],
@@ -807,9 +779,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: {
@@ -817,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 = [];
@@ -842,7 +813,6 @@ class RCEWrapper extends React.Component {
     this.resizeObserver = new ResizeObserver(() => {
       this._handleFullscreenResize();
     });
-    this.AIToolsTray = undefined;
     this._effectiveContainingContext = normalizeContainingContext(this.props.trayProps?.containingContext);
   }
 
@@ -852,11 +822,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}`;
     }
@@ -871,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() {
@@ -916,7 +886,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;
   }
@@ -976,9 +946,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) {
@@ -990,7 +960,7 @@ class RCEWrapper extends React.Component {
     }
   }
   checkImageLoadError(element) {
-    if (!element || element.tagName !== "IMG") {
+    if (!element || element.tagName !== 'IMG') {
       return;
     }
     // @ts-expect-error
@@ -1005,9 +975,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);
   }
@@ -1017,7 +987,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);
     }
   }
@@ -1034,12 +1004,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;
     }
@@ -1049,7 +1019,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 {
@@ -1061,7 +1031,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();
     }
@@ -1142,8 +1112,8 @@ class RCEWrapper extends React.Component {
   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);
     }
@@ -1163,17 +1133,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() {
@@ -1190,7 +1160,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()
@@ -1222,7 +1192,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) {
@@ -1233,10 +1203,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()
     }));
   }
@@ -1274,7 +1244,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;
@@ -1328,22 +1298,22 @@ class RCEWrapper extends React.Component {
           // focus is still somewhere w/in me
           return;
         }
-        const activeClass = document.activeElement?.getAttribute("class");
+        const activeClass = document.activeElement?.getAttribute('class');
         if (
         // @ts-expect-error
         (event.focusedEditor === undefined ||
         // @ts-expect-error
-        event.target.id === event.focusedEditor?.id) && activeClass?.includes("tox-")) {
+        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
@@ -1361,22 +1331,22 @@ class RCEWrapper extends React.Component {
   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);
   }
   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;
@@ -1384,7 +1354,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
             })
           });
@@ -1393,7 +1363,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
             })
           });
@@ -1406,17 +1376,17 @@ class RCEWrapper extends React.Component {
         this.announcing = 0;
       }
     });
-    editor.on("ResizeEditor", ({
+    editor.on('ResizeEditor', ({
       deltaY
     }) => {
       if (!this._isMounted || !deltaY) return;
       if (deltaY < 0) {
         this.setState({
-          announcement: formatMessage("The height of Rich Content Area is decreased.")
+          announcement: formatMessage('The height of Rich Content Area is decreased.')
         });
       } else {
         this.setState({
-          announcement: formatMessage("The height of Rich Content Area is increased.")
+          announcement: formatMessage('The height of Rich Content Area is increased.')
         });
       }
     });
@@ -1442,10 +1412,10 @@ 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() {
-    const userId = this._effectiveContainingContext?.userId || "-";
+    const userId = this._effectiveContainingContext?.userId || '-';
     return `rceautosave:${userId}${window.location.href}:${this.props.textareaId}`;
   }
   componentWillUnmount() {
@@ -1456,7 +1426,7 @@ class RCEWrapper extends React.Component {
         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();
@@ -1468,27 +1438,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
@@ -1497,7 +1467,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);
@@ -1510,7 +1480,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);
         }
       },
@@ -1521,7 +1491,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
@@ -1536,10 +1506,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
@@ -1548,16 +1518,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_wordcount_header", "instructure_keyboard_shortcuts_header", "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) {
@@ -1579,7 +1549,7 @@ class RCEWrapper extends React.Component {
   }
   unhandleTextareaChange() {
     if (this._textareaEl) {
-      this._textareaEl.removeEventListener("input", this.handleTextareaChange);
+      this._textareaEl.removeEventListener('input', this.handleTextareaChange);
     }
   }
   registerTextareaChange() {
@@ -1587,7 +1557,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
@@ -1613,7 +1583,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
@@ -1632,7 +1602,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');
         }
       }
     }
@@ -1646,7 +1616,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
@@ -1654,7 +1624,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);
   }
@@ -1676,9 +1646,9 @@ class RCEWrapper extends React.Component {
       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,
@@ -1714,12 +1684,11 @@ class RCEWrapper extends React.Component {
         ref: this._editorPlaceholderRef,
         style: {
           height: `${this.props.editorOptions.height}px`,
-          border: "1px solid grey"
+          border: '1px solid grey'
         }
       });
     }
     const statusBarOptions = {
-      aiTextTools: this.props.ai_text_tools,
       isDesktop: tinymce.Env.deviceType.isDesktop(),
       a11yResizers: !!this.props.features?.rce_a11y_resize
     };
@@ -1740,8 +1709,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
@@ -1749,7 +1718,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
@@ -1761,7 +1730,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,
@@ -1809,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,
@@ -1828,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,
@@ -1859,7 +1814,6 @@ class RCEWrapper extends React.Component {
   }
 }
 RCEWrapper.propTypes = {
-  ai_text_tools: _pt.bool,
   autosave: _pt.shape({
     enabled: _pt.bool,
     maxAge: _pt.number
@@ -1885,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;
@@ -1898,8 +1854,8 @@ RCEWrapper.defaultProps = {
   maxInitRenderedRCEs: -1,
   features: {},
   timezone: Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone,
-  canvasOrigin: "",
-  variant: "full"
+  canvasOrigin: '',
+  variant: 'full'
 };
 RCEWrapper.skinCssInjected = false;
 export default RCEWrapper;