@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/RCEWrapper.js

@@ -1,5 +1,4 @@
-var _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
-
+import _pt from "prop-types";
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -17,6 +16,7 @@ var _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { Suspense } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import _ from 'lodash';
@@ -32,12 +32,12 @@ import getCookie from '../common/getCookie';
 import formatMessage from '../format-message';
 import * as contentInsertion from './contentInsertion';
 import indicatorRegion from './indicatorRegion';
-import editorLanguage from './editorLanguage';
+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, instuiPopupMountNode } from '../util/fullscreenHelpers';
+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';
@@ -56,74 +56,50 @@ 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 { externalToolsForToolbar } from './plugins/instructure_rce_external_tools/RceToolWrapper';
 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';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
 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);
-} // Get oxide the default skin injected into the DOM before the overrides loaded by themeable
-
+}
 
+// Get oxide the default skin injected into the DOM before the overrides loaded by themeable
 let inserted = false;
-
 function injectTinySkin() {
   if (inserted) return;
   inserted = true;
   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
+  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
-
   style.appendChild(document.createTextNode(`
       #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]') || // find instui's themeable stylesheet
-  document.head.querySelector('style') || // find any stylesheet
+  const beforeMe = document.head.querySelector('style[data-glamor]') ||
+  // find instui's themeable stylesheet
+  document.head.querySelector('style') ||
+  // find any stylesheet
   document.head.firstElementChild;
   document.head.insertBefore(style, beforeMe);
 }
-
 const editorWrappers = new WeakMap();
 
-function focusToolbar(el) {
-  const $firstToolbarButton = el.querySelector('.tox-tbtn');
-  $firstToolbarButton && $firstToolbarButton.focus();
-}
-
-function focusFirstMenuButton(el) {
-  const $firstMenu = el.querySelector('.tox-mbtn');
-  $firstMenu && $firstMenu.focus();
-}
-
-function isElementWithinTable(node) {
-  let elem = node;
-
-  while (elem) {
-    if (elem.tagName === 'TABLE' || elem.tagName === 'TD' || elem.tagName === 'TH') {
-      return true;
-    }
-
-    elem = elem.parentElement;
-  }
-
-  return false;
-} // determines if localStorage is available for our use.
+// 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;
-
   try {
     storage = window.localStorage;
     const x = '__storage_test__';
@@ -131,163 +107,174 @@ export function storageAvailable() {
     storage.removeItem(x);
     return true;
   } catch (e) {
-    return e instanceof DOMException && ( // everything except Firefox
-    e.code === 22 || // Firefox
-    e.code === 1014 || // test name field too, because code might not be present
+    return e instanceof DOMException && (
     // everything except Firefox
-    e.name === 'QuotaExceededError' || // Firefox
-    e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && // acknowledge QuotaExceededError only if there's something already stored
+    e.code === 22 ||
+    // Firefox
+    e.code === 1014 ||
+    // test name field too, because code might not be present
+    // everything except Firefox
+    e.name === 'QuotaExceededError' ||
+    // Firefox
+    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');
 }
-
 let alertIdValue = 0;
-
 class RCEWrapper extends React.Component {
   static getByEditor(editor) {
     return editorWrappers.get(editor);
   }
-
   constructor(props) {
-    var _this, _window, _window$location, _props$editorOptions, _props$editorOptions2;
-
     super(props);
-    _this = this;
-
+    this._destroyCalled = false;
+    this._editorPlaceholderRef = void 0;
+    this._elementRef = void 0;
+    this._focusRegio = void 0;
+    this._focusRegion = void 0;
+    this._mceSerializedInitialHtmlCached = void 0;
+    this._showOnFocusButton = void 0;
+    this._statusBarId = void 0;
+    this._textareaEl = void 0;
+    this.AIToolsTray = void 0;
+    this.editor = void 0;
+    this.initialContent = void 0;
+    this.intersectionObserver = void 0;
+    this.language = void 0;
+    this.ltiToolFavorites = void 0;
+    this.mutationObserver = void 0;
+    this.pendingEventHandlers = void 0;
+    this.pluginsToExclude = void 0;
+    this.resizeObserver = void 0;
+    this.storage = void 0;
+    this.variant = void 0;
+    this.style = void 0;
+    this.insert_code = void 0;
+    this.get_code = void 0;
+    this.set_code = void 0;
     this.onRemove = () => {
       bridge.detachEditor(this);
-      this.props.onRemove && this.props.onRemove(this);
+      if (this.props.onRemove) {
+        this.props.onRemove(this);
+      }
     };
-
     this.toggleView = newView => {
       // coming from the menubar, we don't have a newView,
-      let newState;
 
+      let newState;
       switch (this.state.editorView) {
         case WYSIWYG_VIEW:
-          newState = {
-            editorView: newView || PRETTY_HTML_EDITOR_VIEW
-          };
-          break;
-
+          {
+            newState = {
+              editorView: newView || PRETTY_HTML_EDITOR_VIEW
+            };
+            break;
+          }
         case PRETTY_HTML_EDITOR_VIEW:
-          newState = {
-            editorView: newView || WYSIWYG_VIEW
-          };
-          break;
-
+          {
+            newState = {
+              editorView: newView || WYSIWYG_VIEW
+            };
+            break;
+          }
         case RAW_HTML_EDITOR_VIEW:
-          newState = {
-            editorView: newView || WYSIWYG_VIEW
-          };
+          {
+            newState = {
+              editorView: newView || WYSIWYG_VIEW
+            };
+            break;
+          }
+        default:
+          return;
       }
-
+      // @ts-expect-error
       this.setState(newState);
       this.checkAccessibility();
-
       if (newView === PRETTY_HTML_EDITOR_VIEW || newView === RAW_HTML_EDITOR_VIEW) {
-        var _this$storage, _this$storage$setItem;
-
-        (_this$storage = this.storage) === null || _this$storage === void 0 ? void 0 : (_this$storage$setItem = _this$storage.setItem) === null || _this$storage$setItem === void 0 ? void 0 : _this$storage$setItem.call(_this$storage, 'rce.htmleditor', newView);
-      } // Emit view change event
-
+        this.storage?.setItem?.('rce.htmleditor', newView);
+      }
 
+      // Emit view change event
       this.mceInstance().fire(VIEW_CHANGE, {
         target: this.editor,
         newView: newState.editorView
       });
     };
-
     this.toggleFullscreen = () => {
       this.handleClickFullscreen();
     };
-
     this._onFullscreenChange = event => {
       if (document[FS_ELEMENT]) {
-        var _window$visualViewpor;
-
+        // @ts-expect-error
         this.resizeObserver.observe(document[FS_ELEMENT]);
-        (_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 ? void 0 : _window$visualViewpor.addEventListener('resize', this._handleFullscreenResize);
-
+        window.visualViewport?.addEventListener('resize', this._handleFullscreenResize);
         this._handleFullscreenResize();
-
+        // @ts-expect-error
         this._focusRegion = FocusRegionManager.activateRegion(document[FS_ELEMENT], {
           shouldContainFocus: true
         });
       } else {
-        var _window$visualViewpor2;
-
         event.target.removeEventListener(FS_CHANGEEVENT, this._onFullscreenChange);
         this.resizeObserver.unobserve(event.target);
-        (_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 ? void 0 : _window$visualViewpor2.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);
         }
       }
-
       this.focusCurrentView();
     };
-
     this._handleFullscreenResize = () => {
-      var _window$visualViewpor3, _document$FS_ELEMENT;
-
-      const ht = ((_window$visualViewpor3 = window.visualViewport) === null || _window$visualViewpor3 === void 0 ? void 0 : _window$visualViewpor3.height) || ((_document$FS_ELEMENT = document[FS_ELEMENT]) === null || _document$FS_ELEMENT === void 0 ? void 0 : _document$FS_ELEMENT.offsetHeight);
-
-      this._setHeight(ht - this._getStatusBarHeight());
+      const ht = window.visualViewport?.height || document[FS_ELEMENT]?.offsetHeight;
+      this._setHeight((ht || 0) - this._getStatusBarHeight());
     };
-
     this.contentTrayClosing = false;
     this.blurTimer = 0;
-
-    this.handleFocusRCE = event => {
-      this.handleFocus(event);
+    this.handleFocusRCE = () => {
+      this.handleFocus();
     };
-
     this.handleBlurRCE = event => {
-      var _this$_elementRef$cur;
-
       if (event.relatedTarget === null) {
         // focus might be moving to tinymce
         this.handleBlur(event);
       }
-
-      if (!((_this$_elementRef$cur = this._elementRef.current) !== null && _this$_elementRef$cur !== void 0 && _this$_elementRef$cur.contains(event.relatedTarget))) {
+      if (!this._elementRef.current?.contains(event.relatedTarget)) {
         this.handleBlur(event);
       }
     };
-
-    this.handleFocusEditor = (event, _editor) => {
+    this.handleFocusEditor = _event => {
       // use .active to put a focus ring around the content area
       // when the editor has focus. This isn't perfect, but it's
       // what we've got for now.
       const ifr = this.iframe;
-      ifr && ifr.parentElement.classList.add('active');
-      this.handleFocus(event);
+      if (ifr?.parentElement) {
+        ifr.parentElement.classList.add('active');
+      }
+      this.handleFocus();
     };
-
-    this.handleBlurEditor = (event, _editor) => {
+    this.handleBlurEditor = event => {
       const ifr = this.iframe;
-      ifr && ifr.parentElement.classList.remove('active');
+      if (ifr?.parentElement) {
+        ifr.parentElement.classList.remove('active');
+      }
       this.handleBlur(event);
     };
-
     this.handleKey = event => {
       if (event.code === 'F9' && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
         this.setFocusAbilityForHeader(true);
+        // @ts-expect-error
         focusFirstMenuButton(this._elementRef.current);
       } else if (event.code === 'F10' && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
         this.setFocusAbilityForHeader(true);
+        // @ts-expect-error
         focusToolbar(this._elementRef.current);
       } else if (event.code === 'F8' && event.altKey) {
         event.preventDefault();
@@ -300,7 +287,6 @@ class RCEWrapper extends React.Component {
         event.stopPropagation();
       }
     };
-
     this.handleClickFullscreen = () => {
       if (this._isFullscreen()) {
         this._exitFullscreen();
@@ -308,127 +294,122 @@ class RCEWrapper extends React.Component {
         this._enterFullscreen();
       }
     };
-
     this.handleInputChange = () => {
       this.checkAccessibility();
     };
-
     this.onInit = (_event, editor) => {
-      var _this$props$onInitted, _this$props;
-
+      // @ts-expect-error
       editor.rceWrapper = this;
       this.editor = editor;
-      const textarea = this.editor.getElement(); // expected by canvas
+      const textarea = this.editor.getElement();
 
-      textarea.dataset.rich_text = true; // start with the textarea and tinymce in sync
+      // expected by canvas
+      // @ts-expect-error
+      textarea.dataset.rich_text = true;
 
+      // start with the textarea and tinymce in sync
+      // @ts-expect-error
       textarea.value = this.getCode();
       textarea.style.height = this.state.height;
-
       if (document.body.classList.contains('Underline-All-Links__enabled')) {
-        this.iframe.contentDocument.body.classList.add('Underline-All-Links__enabled');
+        if (this.iframe?.contentDocument) {
+          this.iframe.contentDocument.body.classList.add('Underline-All-Links__enabled');
+        }
       }
-
-      editor.on('wordCountUpdate', this.onWordCountUpdate); // add an aria-label to the application div that wraps RCE
+      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');
-      } // Adds a focusout event listener for handling screen reader navigation focus
-
-
-      const header = this._elementRef.current.querySelector('.tox-editor-header');
+      }
 
+      // Adds a focusout event listener for handling screen reader navigation focus
+      const header = this._elementRef.current?.querySelector('.tox-editor-header');
       if (header) {
+        // @ts-expect-error
         header.addEventListener('focusout', e => {
+          // @ts-expect-error
           const leavingHeader = !header.contains(e.relatedTarget);
-
           if (leavingHeader) {
             this.setFocusAbilityForHeader(false);
           }
         });
       }
+      this.setFocusAbilityForHeader(false);
 
-      this.setFocusAbilityForHeader(false); // Probably should do this in tinymce.scss, but we only want it in new rce
-
+      // 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); // This propagates click events on the editor out of the iframe to the parent
+      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));
       this.announceContextToolbars(editor);
-
       if (this.isAutoSaving) {
         this.initAutoSave(editor);
-      } // first view
+      }
 
+      // first view
+      this.setEditorView(this.state.editorView);
 
-      this.setEditorView(this.state.editorView); // readonly should have been handled via the init property passed
+      // 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_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.', {
           OSKey: determineOSDependentKey()
         }));
       }
-
       this._setupSelectionSaving(editor);
-
       this.checkAccessibility();
       this.fixToolbarKeyboardNavigation();
-      (_this$props$onInitted = (_this$props = this.props).onInitted) === null || _this$props$onInitted === void 0 ? void 0 : _this$props$onInitted.call(_this$props, editor); // cleans up highlight artifacts from findreplace plugin
+      if (this.props.onInitted) {
+        this.props.onInitted(editor);
+      }
 
+      // cleans up highlight artifacts from findreplace plugin
       if (this.getRequiredFeatureStatuses().rce_find_replace) {
-        editor.on('undo redo', e => {
-          var _editor$dom, _editor$dom$doc, _editor$dom$doc$getEl, _editor$dom$doc$getEl2;
-
-          if ((editor === null || editor === void 0 ? void 0 : (_editor$dom = editor.dom) === null || _editor$dom === void 0 ? void 0 : (_editor$dom$doc = _editor$dom.doc) === null || _editor$dom$doc === void 0 ? void 0 : (_editor$dom$doc$getEl = _editor$dom$doc.getElementsByClassName) === null || _editor$dom$doc$getEl === void 0 ? void 0 : (_editor$dom$doc$getEl2 = _editor$dom$doc$getEl.call(_editor$dom$doc, 'mce-match-marker')) === null || _editor$dom$doc$getEl2 === void 0 ? void 0 : _editor$dom$doc$getEl2.length) > 0) {
-            var _editor$plugins, _editor$plugins$searc;
-
-            (_editor$plugins = editor.plugins) === null || _editor$plugins === void 0 ? void 0 : (_editor$plugins$searc = _editor$plugins.searchreplace) === null || _editor$plugins$searc === void 0 ? void 0 : _editor$plugins$searc.done();
+        editor.on('undo redo', _e => {
+          if (editor?.dom?.doc?.getElementsByClassName?.('mce-match-marker')?.length > 0) {
+            editor.plugins?.searchreplace?.done();
           }
         });
       }
     };
-
     this.fixToolbarKeyboardNavigation = () => {
-      var _this$_elementRef$cur2;
-
       // The keyboard navigation config in tinymce for the expanded toolbar is incorrectly configured,
       // and stops at [data-alloy-tabstop] elements.
       // It should be configured to stop on .tox-toolbar__group elements.
       // 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$cur2 = this._elementRef.current) === null || _this$_elementRef$cur2 === void 0 ? void 0 : _this$_elementRef$cur2.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'));
     };
-
     this._setupSelectionSaving = editor => {
+      // @ts-expect-error
       let savedSelection = null;
       let selectionWasReset = false;
       let editorHasFocus = false;
-
       const restoreSelectionIfNecessary = () => {
-        if (savedSelection && selectionWasReset) {
+        // @ts-expect-error
+        if (this.editor && savedSelection && selectionWasReset) {
           this.editor.selection.setRng(savedSelection.range, savedSelection.isForward);
           selectionWasReset = false;
         }
       };
-
       editor.on('blur', () => {
         editorHasFocus = false;
         selectionWasReset = false;
+        if (!this.editor) return;
         savedSelection = {
           range: this.editor.selection.getRng().cloneRange(),
           isForward: this.editor.selection.isForward()
@@ -444,24 +425,25 @@ class RCEWrapper extends React.Component {
         selectionWasReset = false;
       });
       editor.on('SelectionChange', () => {
-        var _selection$startConta;
-
         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
           return;
         }
+        if (!this.editor) return;
+        const selection = this.editor.selection.normalize();
 
-        const selection = this.editor.selection.normalize(); // Detect a browser-reset selection (e.g. From invoking the Find command)
-
-        if (((_selection$startConta = selection.startContainer) === null || _selection$startConta === void 0 ? void 0 : _selection$startConta.nodeName) === 'BODY' && selection.startContainer === selection.endContainer && selection.startOffset === 0 && selection.endOffset === 0) {
+        // 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) {
           selectionWasReset = true;
         }
       });
       editor.on('BeforeExecCommand', () => {
         restoreSelectionIfNecessary();
       });
-      editor.on('ExecCommand', () => {
+      editor.on('ExecCommand', (/* event */
+      ) => {
+        if (!this.editor) return;
         // Commands may have modified the selection, we need to recapture it
         savedSelection = {
           range: this.editor.selection.getRng().cloneRange(),
@@ -469,35 +451,29 @@ class RCEWrapper extends React.Component {
         };
       });
     };
-
     this.announcing = 0;
-
     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 : '');
-
       if (this.storage) {
         editor.on('change Undo Redo', this.doAutoSave);
         editor.on('blur', this.doAutoSave);
         this.cleanupAutoSave();
-
         try {
           const autosaved = this.getAutoSaved(this.autoSaveKey);
-
           if (autosaved && autosaved.content) {
             // We'll compare just the text of the autosave content, since
             // Canvas is prone to swizzling images and iframes which will
             // make the editor content and autosave content never match up
-            const editorContent = this.patchAutosavedContent(editor.getContent({
+            const editorContent = patchAutosavedContent(editor.getContent({
               no_events: true
             }), true);
-            const autosavedContent = this.patchAutosavedContent(autosaved.content, true);
-
+            const autosavedContent = patchAutosavedContent(autosaved.content, true);
             if (autosavedContent !== editorContent) {
               this.setState({
                 confirmAutoSave: true,
-                autoSavedContent: this.patchAutosavedContent(autosaved.content)
+                // @ts-expect-error
+                autoSavedContent: patchAutosavedContent(autosaved.content)
               });
             } else {
               this.storage.removeItem(this.autoSaveKey);
@@ -505,80 +481,66 @@ class RCEWrapper extends React.Component {
           }
         } catch (ex) {
           // log and ignore
-          // eslint-disable-next-line no-console
+
           console.error('Failed initializing rce autosave', ex);
         }
       }
     };
-
-    this.cleanupAutoSave = function () {
-      let deleteAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-      if (_this.storage) {
-        const expiry = deleteAll ? Date.now() : Date.now() - _this.props.autosave.maxAge;
+    this.cleanupAutoSave = (deleteAll = false) => {
+      if (this.storage) {
+        const expiry = deleteAll ? Date.now() : Date.now() - (this.props.autosave?.maxAge || 0);
         let i = 0;
         let key;
-
-        while (key = _this.storage.key(i++)) {
+        while (key = this.storage.key(i++)) {
           if (/^rceautosave:/.test(key)) {
-            const autosaved = _this.getAutoSaved(key);
-
+            const autosaved = this.getAutoSaved(key);
             if (autosaved && autosaved.autosaveTimestamp < expiry) {
-              _this.storage.removeItem(key);
+              this.storage.removeItem(key);
             }
           }
         }
       }
     };
-
     this.restoreAutoSave = ans => {
       this.setState({
         confirmAutoSave: false
       }, () => {
         const editor = this.mceInstance();
-
         if (ans) {
           editor.setContent(this.state.autoSavedContent, {});
         }
-
+        // @ts-expect-error
         this.storage.removeItem(this.autoSaveKey);
-      }); // let the content be restored
-
+      });
+      // let the content be restored
       debounce(this.checkAccessibility, 1000)();
     };
-
-    this.doAutoSave = function (e) {
-      let retry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-      if (_this.storage) {
-        const editor = _this.mceInstance(); // if the editor is empty don't save
-
-
+    this.doAutoSave = (e, retry = false) => {
+      if (this.storage) {
+        const editor = this.mceInstance();
+        // if the editor is empty don't save
         if (editor.dom.isEmpty(editor.getBody())) {
           return;
         }
-
         const content = editor.getContent({
           no_events: true
         });
-
         try {
-          _this.storage.setItem(_this.autoSaveKey, content);
+          this.storage.setItem(this.autoSaveKey, content);
         } catch (ex) {
           if (!retry) {
             // probably failed because there's not enough space
             // delete up all the other entries and try again
-            _this.cleanupAutoSave(true);
-
-            _this.doAutoSave(e, true);
+            this.cleanupAutoSave(true);
+            this.doAutoSave(e, true);
           } else {
-            console.error('Autosave failed:', ex); // eslint-disable-line no-console
+            console.error('Autosave failed:', ex);
           }
         }
       }
     };
-
     this.onWordCountUpdate = e => {
+      if (!this.editor) return;
       const shouldIgnore = countShouldIgnore(this.editor, 'body', 'words');
       const updatedCount = e.wordCount.words - shouldIgnore;
       this.setState(state => {
@@ -589,51 +551,48 @@ class RCEWrapper extends React.Component {
         } else return null;
       });
     };
-
     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').map(p => p.nodeName.toLowerCase()).reverse();
+      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({
         path
       });
     };
-
     this.onEditorChange = (content, _editor) => {
-      var _this$props$onContent, _this$props2;
-
-      (_this$props$onContent = (_this$props2 = this.props).onContentChange) === null || _this$props$onContent === void 0 ? void 0 : _this$props$onContent.call(_this$props2, content); // check accessibility when clearing the editor,
+      this.props.onContentChange?.(content);
+      // check accessibility when clearing the editor,
       // all other times should be checked by handleInputChange
-
       if (content === '') {
         this.checkAccessibility();
       }
     };
-
     this.onResize = (_e, coordinates) => {
       const editor = this.mceInstance();
-
       if (editor) {
         const container = editor.getContainer();
         if (!container) return;
         const currentContainerHeight = Number.parseInt(container.style.height, 10);
-        if (isNaN(currentContainerHeight)) return; // eslint-disable-line no-restricted-globals
-
+        if (isNaN(currentContainerHeight)) return;
         const modifiedHeight = currentContainerHeight + coordinates.deltaY;
         const newHeight = `${modifiedHeight}px`;
         container.style.height = newHeight;
-        this.getTextarea().style.height = newHeight;
+        const textarea = this.getTextarea();
+        if (textarea) {
+          textarea.style.height = newHeight;
+        }
         this.setState({
           height: newHeight
-        }); // play nice and send the same event that the silver theme would send
-
+        });
+        // play nice and send the same event that the silver theme would send
         editor.fire('ResizeEditor');
       }
     };
-
     this.onA11yChecker = triggerElementId => {
       const editor = this.mceInstance();
       editor.execCommand('openAccessibilityChecker', false, {
-        mountNode: instuiPopupMountNode,
+        mountNode: instuiPopupMountNodeFn,
         triggerElementId,
         onFixError: errors => {
           this.setState({
@@ -644,10 +603,10 @@ class RCEWrapper extends React.Component {
         skip_focus: true
       });
     };
-
     this.checkAccessibility = () => {
       const editor = this.mceInstance();
       editor.execCommand('checkAccessibility', false, {
+        // @ts-expect-error
         done: errors => {
           this.setState({
             a11yErrorsCount: errors.length
@@ -657,86 +616,75 @@ class RCEWrapper extends React.Component {
         skip_focus: true
       });
     };
-
     this.openKBShortcutModal = () => {
       this.setState({
         KBShortcutModalOpen: true,
+        // @ts-expect-error
         KBShortcutFocusReturn: document.activeElement
       });
     };
-
     this.closeKBShortcutModal = () => {
       this.setState({
         KBShortcutModalOpen: false
       });
     };
-
     this.KBShortcutModalExited = () => {
       if (this.state.KBShortcutFocusReturn === this.iframe) {
         // launched using a kb shortcut
         // the iframe has focus so we need to forward it on to tinymce editor
-        this.editor.focus(false);
+        if (this.editor) {
+          this.editor.focus(false);
+        }
       } else if (this.state.KBShortcutFocusReturn === document.getElementById(`show-on-focus-btn-${this.id}`)) {
-        var _this$_showOnFocusBut;
-
         // launched from showOnFocus button
         // edge case where focusing KBShortcutFocusReturn doesn't work
-        (_this$_showOnFocusBut = this._showOnFocusButton) === null || _this$_showOnFocusBut === void 0 ? void 0 : _this$_showOnFocusBut.focus();
+        this._showOnFocusButton?.focus();
       } else {
-        var _this$state$KBShortcu;
-
         // launched from kb shortcut button on status bar
-        (_this$state$KBShortcu = this.state.KBShortcutFocusReturn) === null || _this$state$KBShortcu === void 0 ? void 0 : _this$state$KBShortcu.focus();
+        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 => {
-        // eslint-disable-next-line no-console
         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
-        this.editor.focus(false);
+        if (this.editor) {
+          this.editor.focus(false);
+        }
       } else if (this.state.AITToolsFocusReturn === document.getElementById(`show-on-focus-btn-${this.id}`)) {
-        var _this$_showOnFocusBut2;
-
         // launched from showOnFocus button
         // edge case where focusing KBShortcutFocusReturn doesn't work
-        (_this$_showOnFocusBut2 = this._showOnFocusButton) === null || _this$_showOnFocusBut2 === void 0 ? void 0 : _this$_showOnFocusBut2.focus();
+        this._showOnFocusButton?.focus();
       } else {
-        var _this$state$AITToolsF;
-
         // launched from kb shortcut button on status bar
-        (_this$state$AITToolsF = this.state.AITToolsFocusReturn) === null || _this$state$AITToolsF === void 0 ? void 0 : _this$state$AITToolsF.focus();
+        // @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 {
@@ -744,7 +692,6 @@ class RCEWrapper extends React.Component {
         selection.setContent(content);
       }
     };
-
     this.getCurrentContentForAI = () => {
       const selected = this.mceInstance().selection.getContent();
       return selected ? {
@@ -755,35 +702,30 @@ class RCEWrapper extends React.Component {
         content: this.mceInstance().getContent()
       };
     };
-
     this.setFocusAbilityForHeader = focusable => {
       // Sets aria-hidden to prevent screen readers focus in RCE menus and toolbar
-      const header = this._elementRef.current.querySelector('.tox-editor-header');
-
+      const header = this._elementRef.current?.querySelector('.tox-editor-header');
       if (header) {
         header.setAttribute('aria-hidden', focusable ? 'false' : 'true');
       }
     };
-
     this.handleTextareaChange = () => {
       if (this.isHidden()) {
         this.setCode(this.textareaValue());
+        // @ts-expect-error
         this.doAutoSave();
       }
     };
-
     this.addAlert = alert => {
       alert.id = alertIdValue++;
       this.setState(state => {
         let messages = state.messages.concat(alert);
         messages = _.uniqBy(messages, 'text'); // Don't show the same message twice
-
         return {
           messages
         };
       });
     };
-
     this.removeAlert = messageId => {
       this.setState(state => {
         const messages = state.messages.filter(message => message.id !== messageId);
@@ -792,47 +734,50 @@ 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');
       }
-
       alertIdValue = 0;
     };
+    this.style = buildStyle();
 
-    this.style = buildStyle(); // Set up some limited global state that can be referenced
+    // Set up some limited global state that can be referenced
     // as needed in RCE's components and function / plugin definitions
     // Not intended to be dynamically changed!
-
     RCEGlobals.setFeatures(this.getRequiredFeatureStatuses());
     RCEGlobals.setConfig(this.getRequiredConfigValues());
     this.editor = null; // my tinymce editor instance
+    this.language = normalizeLocale(this.props.language);
 
-    this.language = normalizeLocale(this.props.language); // interface consistent with editorBox
-
+    // interface consistent with editorBox
     this.get_code = this.getCode;
     this.set_code = this.setCode;
-    this.insert_code = this.insertCode; // test override points
+    this.insert_code = this.insertCode;
 
+    // test override points
+    // @ts-expect-error
     this.indicator = false;
     this._elementRef = /*#__PURE__*/React.createRef();
     this._editorPlaceholderRef = /*#__PURE__*/React.createRef();
+    // @ts-expect-error
     this._prettyHtmlEditorRef = /*#__PURE__*/React.createRef();
-    this._showOnFocusButton = null; // Process initial content
+    // @ts-expect-error
+    this._showOnFocusButton = null;
 
+    // Process initial content
+    // @ts-expect-error
     this.initialContent = this.getRequiredFeatureStatuses().rce_transform_loaded_content ? transformRceContentForEditing(this.props.defaultContent, {
-      origin: this.props.canvasOrigin || ((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.origin)
+      origin: this.props.canvasOrigin || window?.location?.origin
     }) : this.props.defaultContent;
-    injectTinySkin(); // FWIW, for historic reaasons, the height does not include the
-    // height of the status bar (which used to be tinymce's)
-
-    let _ht = ((_props$editorOptions = props.editorOptions) === null || _props$editorOptions === void 0 ? void 0 : _props$editorOptions.height) || DEFAULT_RCE_HEIGHT;
+    injectTinySkin();
 
+    // FWIW, for historic reaasons, the height does not include the
+    // height of the status bar (which used to be tinymce's)
+    let _ht = props.editorOptions?.height || DEFAULT_RCE_HEIGHT;
     if (!Number.isNaN(_ht)) {
       _ht = `${_ht}px`;
     }
-
     const currentRCECount = document.querySelectorAll('.rce-wrapper').length;
     const maxInitRenderedRCEs = Number.isNaN(props.maxInitRenderedRCEs) ? RCEWrapper.defaultProps.maxInitRenderedRCEs : props.maxInitRenderedRCEs;
     this.state = {
@@ -845,9 +790,12 @@ class RCEWrapper extends React.Component {
       announcement: null,
       confirmAutoSave: false,
       autoSavedContent: '',
+      // @ts-expect-error
       id: this.props.id || this.props.textareaId || `${uid('rce', 2)}`,
+      // @ts-expect-error
       height: _ht,
       fullscreenState: {
+        // @ts-expect-error
         prevHeight: _ht
       },
       a11yErrorsCount: 0,
@@ -856,45 +804,47 @@ class RCEWrapper extends React.Component {
     };
     this._statusBarId = `${this.state.id}_statusbar`;
     this.pendingEventHandlers = [];
+
+    // @ts-expect-error
     this.ltiToolFavorites = externalToolsForToolbar(this.props.ltiTools).map(e => `instructure_external_button_${e.id}`);
-    this.pluginsToExclude = parsePluginsToExclude(((_props$editorOptions2 = props.editorOptions) === null || _props$editorOptions2 === void 0 ? void 0 : _props$editorOptions2.plugins) || []);
+    this.pluginsToExclude = parsePluginsToExclude(props.editorOptions?.plugins || []);
+
+    // @ts-expect-error
     this.resourceType = props.resourceType;
+    // @ts-expect-error
     this.resourceId = props.resourceId;
+
+    // @ts-expect-error
     this.variant = window.RCE_VARIANT || props.variant; // to facilitate testing
 
+    // @ts-expect-error
     this.tinymceInitOptions = this.wrapOptions(props.editorOptions);
     alertHandler.alertFunc = this.addAlert;
     this.handleContentTrayClosing = this.handleContentTrayClosing.bind(this);
-    this.resizeObserver = new ResizeObserver(_entries => {
+    this.resizeObserver = new ResizeObserver(() => {
       this._handleFullscreenResize();
     });
     this.AIToolsTray = undefined;
-  } // when the RCE is put into fullscreen we need to move the div
+  }
+
+  // when the RCE is put into fullscreen we need to move the div
   // tinymce mounts popup menus into from the body to the rce-wrapper
   // or the menus wind up behind the RCE. I can't find a way to
   // 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');
-
     if (tinyauxlist.length) {
       const myaux = tinyauxlist[tinyauxlist.length - 1];
-
       if (myaux.id) {
-        // eslint-disable-next-line no-console
         console.error('Unexpected ID on my tox-tinymce-aux element');
       }
-
       myaux.id = `tinyaux-${this.id}`;
     }
   }
-
   _myTinymceAuxDiv() {
     return document.getElementById(`tinyaux-${this.id}`);
   }
-
   getRequiredFeatureStatuses() {
     const {
       new_math_equation_handling = false,
@@ -915,57 +865,54 @@ class RCEWrapper extends React.Component {
       consolidated_media_player
     };
   }
-
   getRequiredConfigValues() {
     return {
       locale: normalizeLocale(this.props.language),
+      // @ts-expect-error
       flashAlertTimeout: this.props.flashAlertTimeout,
+      // @ts-expect-error
       timezone: this.props.timezone
     };
   }
-
   getCanvasUrl() {
     return this.props.canvasOrigin;
   }
-
   getResourceIdentifiers() {
     return {
+      // @ts-expect-error
       resourceType: this.resourceType,
+      // @ts-expect-error
       resourceId: this.resourceId
     };
-  } // getCode and setCode naming comes from tinyMCE
-  // kind of strange but want to be consistent
-
+  }
 
+  // getCode and setCode naming comes from tinyMCE
+  // kind of strange but want to be consistent
   getCode() {
     return this.isHidden() ? this.textareaValue() : this.mceInstance().getContent();
   }
 
+  // @ts-expect-error
   checkReadyToGetCode(promptFunc) {
-    let status = true; // Check for remaining placeholders
-
+    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.'));
     }
-
     return status;
   }
-
   setCode(newContent) {
-    var _this$mceInstance;
+    this.mceInstance()?.setContent(newContent);
+  }
 
-    (_this$mceInstance = this.mceInstance()) === null || _this$mceInstance === void 0 ? void 0 : _this$mceInstance.setContent(newContent);
-  } // This function is called imperatively by the page that renders the RCE.
+  // This function is called imperatively by the page that renders the RCE.
   // It should be called when the RCE content is done being edited.
-
-
   RCEClosed() {
     // We want to clear the autosaved content, since the page was legitimately closed.
     if (this.storage) {
       this.storage.removeItem(this.autoSaveKey);
     }
   }
-
   indicateEditor(element) {
     if (document.querySelector('[role="dialog"][data-mce-component]')) {
       // there is a modal open, which zeros out the vertical scroll
@@ -975,42 +922,46 @@ class RCEWrapper extends React.Component {
       }, 100);
       return;
     }
-
     const editor = this.mceInstance();
-
+    // @ts-expect-error
     if (this.indicator) {
+      // @ts-expect-error
       this.indicator(editor, element);
     } else if (!this.isHidden()) {
       indicate(indicatorRegion(editor, element));
     }
   }
-
   contentInserted(element) {
     this.indicateEditor(element);
     this.checkImageLoadError(element);
     this.sizeEditorForContent(element);
-  } // make a attempt at sizing the editor so that the new content fits.
+  }
+
+  // make a attempt at sizing the editor so that the new content fits.
   // works under the assumptions the body's box-sizing is not content-box
   // and that the content is w/in a <p> whose margin is 12px top and bottom
   // (which, in canvas, is set in app/stylesheets/components/_ic-typography.scss)
-
-
   sizeEditorForContent(elem) {
     let height;
-
     if (elem && elem.nodeType === 1) {
       height = elem.clientHeight;
     }
-
     if (height) {
       const ifr = this.iframe;
-
       if (ifr) {
-        const editor_body_style = ifr.contentWindow.getComputedStyle(this.iframe.contentDocument.body);
-        const editor_ht = ifr.contentDocument.body.clientHeight - parseInt(editor_body_style['padding-top'], 10) - parseInt(editor_body_style['padding-bottom'], 10);
+        // @ts-expect-error
+        const editor_body_style = ifr.contentWindow.getComputedStyle(
+        // @ts-expect-error
+        this.iframe.contentDocument.body);
+        const editor_ht =
+        // @ts-expect-error
+        ifr.contentDocument.body.clientHeight -
+        // @ts-expect-error
+        parseInt(editor_body_style['padding-top'], 10) -
+        // @ts-expect-error
+        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) {
           this.onResize(null, {
             deltaY: reserve_ht - editor_ht
@@ -1019,90 +970,82 @@ class RCEWrapper extends React.Component {
       }
     }
   }
-
   checkImageLoadError(element) {
     if (!element || element.tagName !== 'IMG') {
       return;
     }
-
+    // @ts-expect-error
     if (!element.complete) {
+      // @ts-expect-error
       element.onload = () => this.checkImageLoadError(element);
-
       return;
-    } // checking naturalWidth in a future event loop run prevents a race
+    }
+    // checking naturalWidth in a future event loop run prevents a race
     // condition between the onload callback and naturalWidth being set.
-
-
     setTimeout(() => {
+      // @ts-expect-error
       if (element.naturalWidth === 0) {
+        // @ts-expect-error
         element.style.border = '1px solid #000';
+        // @ts-expect-error
         element.style.padding = '2px';
       }
     }, 0);
   }
-
   insertCode(code) {
     const editor = this.mceInstance();
     const element = contentInsertion.insertContent(editor, code);
     this.contentInserted(element);
   }
-
   replaceCode(code) {
     if (code !== '' && window.confirm(formatMessage('Content in the editor will be changed. Press Cancel to keep the original content.'))) {
       this.mceInstance().setContent(code);
     }
   }
-
   insertEmbedCode(code) {
-    const editor = this.mceInstance(); // don't replace selected text, but embed after
+    const editor = this.mceInstance();
+
+    // don't replace selected text, but embed after
+    editor.selection.collapse();
 
-    editor.selection.collapse(); // tinymce treats iframes uniquely, and doesn't like adding attributes
+    // tinymce treats iframes uniquely, and doesn't like adding attributes
     // once it's in the editor, and I'd rather not parse the incomming html
     // string with a regex, so let's create a temp copy, then add a title
     // attribute if one doesn't exist. This will let screenreaders announce
     // 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');
     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'));
       }
-
       code = code_elem.outerHTML;
-    } // inserting an iframe in tinymce (as is often the case with
+    }
+
+    // inserting an iframe in tinymce (as is often the case with
     // embedded content) causes it to wrap it in a span
     // 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');
-
     if (ifr) {
       this.contentInserted(ifr);
     } else {
       this.contentInserted(element);
     }
   }
-
   insertImage(image) {
-    var _element$nextSibling, _element$nextSibling$;
-
     const editor = this.mceInstance();
-    const element = contentInsertion.insertImage(editor, image, this.getCanvasUrl()); // Removes TinyMCE's caret &nbsp; text if exists.
+    const element = contentInsertion.insertImage(editor, image, this.getCanvasUrl());
 
-    if (element !== null && element !== void 0 && (_element$nextSibling = element.nextSibling) !== null && _element$nextSibling !== void 0 && (_element$nextSibling$ = _element$nextSibling.data) !== null && _element$nextSibling$ !== void 0 && _element$nextSibling$.startsWith('\xA0'
-    /* nbsp */
-    )) {
+    // Removes TinyMCE's caret &nbsp; text if exists.
+    if (element?.nextSibling?.data?.startsWith('\xA0' /* nbsp */)) {
       element.nextSibling.splitText(1);
       element.nextSibling.remove();
     }
-
     return {
       imageElem: element,
       loadingPromise: new Promise((resolve, reject) => {
@@ -1114,7 +1057,6 @@ class RCEWrapper extends React.Component {
             this.contentInserted(element);
             resolve();
           };
-
           element.onerror = e => {
             this.checkImageLoadError(element);
             reject(e);
@@ -1123,330 +1065,320 @@ class RCEWrapper extends React.Component {
       })
     };
   }
-
   insertImagePlaceholder(fileMetaProps) {
     return insertPlaceholder(this.mceInstance(), fileMetaProps.name, placeholderInfoFor(fileMetaProps));
   }
-
   insertVideo(video) {
     const editor = this.mceInstance();
     const element = contentInsertion.insertVideo(editor, video, this.getCanvasUrl());
     this.contentInserted(element);
   }
-
   insertAudio(audio) {
     const editor = this.mceInstance();
     const element = contentInsertion.insertAudio(editor, audio, this.getCanvasUrl());
     this.contentInserted(element);
   }
-
   insertMathEquation(tex) {
     const editor = this.mceInstance();
     contentInsertion.insertEquation(editor, tex);
   }
-
   removePlaceholders(name) {
     removePlaceholder(this.mceInstance(), name);
   }
-
   insertLink(link) {
     const editor = this.mceInstance();
     const element = contentInsertion.insertLink(editor, link, this.getCanvasUrl());
     this.contentInserted(element);
   }
-
   existingContentToLink() {
     const editor = this.mceInstance();
     return contentInsertion.existingContentToLink(editor);
   }
-
   existingContentToLinkIsImg() {
     const editor = this.mceInstance();
     return contentInsertion.existingContentToLinkIsImg(editor);
-  } // since we may defer rendering tinymce, queue up any tinymce event handlers
-
+  }
 
+  // since we may defer rendering tinymce, queue up any tinymce event handlers
+  // @ts-expect-error
   tinymceOn(tinymceEventName, handler) {
     if (this.state.shouldShowEditor) {
       this.mceInstance().on(tinymceEventName, handler);
     } else {
+      // @ts-expect-error
       this.pendingEventHandlers.push({
         name: tinymceEventName,
         handler
       });
     }
   }
-
   mceInstance() {
     if (this.editor) {
       return this.editor;
     }
-
     const editors = this.props.tinymce.editors || [];
     return editors.filter(ed => ed.id === this.props.textareaId)[0];
   }
 
-  onTinyMCEInstance(command) {
+  // @ts-expect-error
+  onTinyMCEInstance(command, ...args) {
     const editor = this.mceInstance();
-
     if (editor) {
       if (command === 'mceRemoveEditor') {
         editor.execCommand('mceNewDocument');
       } // makes sure content can't persist past removal
-
-
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
-      }
-
       editor.execCommand(command, false, ...args);
     }
   }
-
   destroy() {
     this._destroyCalled = true;
     this.unhandleTextareaChange();
-    this.props.handleUnmount && this.props.handleUnmount();
+    if (this.props.handleUnmount) {
+      this.props.handleUnmount();
+    }
   }
-
   getTextarea() {
-    return document.getElementById(this.props.textareaId);
+    const node = this.props.textareaId && document.getElementById(this.props.textareaId);
+    if (node instanceof HTMLTextAreaElement) {
+      return node;
+    }
+    return null;
   }
-
   textareaValue() {
-    return this.getTextarea().value;
+    return this.getTextarea()?.value || '';
   }
-
   get id() {
     return this.state.id;
   }
-
   getHtmlEditorStorage() {
-    var _this$storage2, _this$storage2$getIte, _this$storage2$getIte2;
-
     const cookieValue = getCookie('rce.htmleditor');
-
     if (cookieValue) {
       document.cookie = `rce.htmleditor=${cookieValue};path=/;max-age=0`;
     }
-
-    const value = cookieValue || ((_this$storage2 = this.storage) === null || _this$storage2 === void 0 ? void 0 : (_this$storage2$getIte = _this$storage2.getItem) === null || _this$storage2$getIte === void 0 ? void 0 : (_this$storage2$getIte2 = _this$storage2$getIte.call(_this$storage2, 'rce.htmleditor')) === null || _this$storage2$getIte2 === void 0 ? void 0 : _this$storage2$getIte2.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() {
     return !!(this.state.fullscreenState.isTinyFullscreen || document[FS_ELEMENT]);
   }
-
   _enterFullscreen() {
     // tinymce mounts its menus and toolbars in this element, which is in the DOM
     // at the bottom of the body. When we're fullscreen the menus need to be mounted
     // in the fullscreen element or they won't show up. Let's move tinymce's mount point
     // when we go into fullscreen, then put it back when we're finished.
     const tinymenuhost = this._myTinymceAuxDiv();
-
     if (tinymenuhost) {
       tinymenuhost.remove();
-
-      this._elementRef.current.appendChild(tinymenuhost);
+      this._elementRef.current?.appendChild(tinymenuhost);
     }
-
-    this._elementRef.current.addEventListener(FS_CHANGEEVENT, this._onFullscreenChange);
-
-    this.setState({
-      fullscreenState: {
-        prevHeight: this._elementRef.current.offsetHeight - this._getStatusBarHeight()
-      }
-    });
-
+    this._elementRef.current?.addEventListener(FS_CHANGEEVENT, this._onFullscreenChange);
+    if (typeof this._elementRef.current?.offsetHeight === 'number') {
+      this.setState({
+        fullscreenState: {
+          prevHeight: this._elementRef.current.offsetHeight - this._getStatusBarHeight()
+        }
+      });
+    }
+    // @ts-expect-error
     this._elementRef.current[FS_REQUEST]();
   }
-
   _exitFullscreen() {
     if (document[FS_ELEMENT]) {
       const tinymenuhost = this._myTinymceAuxDiv();
-
       if (tinymenuhost) {
         tinymenuhost.remove();
         document.body.appendChild(tinymenuhost);
       }
-
       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.
-    return document.getElementById(this._statusBarId).offsetHeight;
+    const node = document.getElementById(this._statusBarId);
+    return node?.offsetHeight || 0;
   }
-
   _setHeight(newHeight) {
     const cssHeight = `${newHeight}px`;
     const ed = this.mceInstance();
     const container = ed.getContainer();
-
     if (container) {
       container.style.height = cssHeight;
       ed.fire('ResizeEditor');
     }
-
-    this.getTextarea().style.height = cssHeight;
+    const textarea = this.getTextarea();
+    if (textarea) {
+      textarea.style.height = cssHeight;
+    }
     this.setState({
       height: cssHeight
     });
   }
-
   focus() {
-    this.onTinyMCEInstance('mceFocus'); // tinymce doesn't always call the focus handler.
-
+    this.onTinyMCEInstance('mceFocus');
+    // tinymce doesn't always call the focus handler.
+    // @ts-expect-error
     this.handleFocusEditor(new Event('focus', {
       target: this.mceInstance()
     }));
   }
-
   focusCurrentView() {
     switch (this.state.editorView) {
       case WYSIWYG_VIEW:
-        this.mceInstance().focus();
-        break;
-
+        {
+          this.mceInstance().focus();
+          break;
+        }
       case PRETTY_HTML_EDITOR_VIEW:
-        break;
-
+        {
+          break;
+        }
       case RAW_HTML_EDITOR_VIEW:
-        this.getTextarea().focus();
-        break;
+        {
+          const textarea = this.getTextarea();
+          if (textarea) {
+            textarea.focus();
+          }
+          break;
+        }
     }
   }
-
   is_dirty() {
-    var _this$mceInstance2;
-
     if (this.mceInstance().isDirty()) {
       return true;
     }
-
-    const currentHtml = this.isHidden() ? this.textareaValue() : (_this$mceInstance2 = this.mceInstance()) === null || _this$mceInstance2 === void 0 ? void 0 : _this$mceInstance2.getContent();
+    const currentHtml = this.isHidden() ? this.textareaValue() : this.mceInstance()?.getContent();
     return currentHtml !== this._mceSerializedInitialHtml;
   }
+
   /**
    * Holds a copy of the initial content of the editor as serialized by tinyMCE to normalize it.
    */
-
-
   get _mceSerializedInitialHtml() {
     if (!this._mceSerializedInitialHtmlCached) {
       const el = window.document.createElement('div');
+      // @ts-expect-error
       el.innerHTML = this.initialContent;
       const serializer = this.mceInstance().serializer;
       this._mceSerializedInitialHtmlCached = serializer.serialize(el, {
         getInner: true
       });
     }
-
     return this._mceSerializedInitialHtmlCached;
   }
-
   isHtmlView() {
     return this.state.editorView !== WYSIWYG_VIEW;
   }
-
   isHidden() {
     return this.mceInstance().isHidden();
   }
-
   get iframe() {
     return document.getElementById(`${this.props.textareaId}_ifr`);
-  } // these focus and blur event handlers work together so that RCEWrapper
-  // can report focus and blur events from the RCE at-large
-
+  }
 
+  // these focus and blur event handlers work together so that RCEWrapper
+  // can report focus and blur events from the RCE at-large
   get focused() {
     return this === bridge.getEditor();
   }
-
-  handleFocus(_event) {
+  handleFocus() {
     if (!this.focused) {
       bridge.focusEditor(this);
-      this.props.onFocus && this.props.onFocus(this);
+      if (this.props.onFocus) {
+        this.props.onFocus(this);
+      }
     }
   }
-
   handleContentTrayClosing(isClosing) {
     this.contentTrayClosing = isClosing;
   }
-
   handleBlur(event) {
     if (this.blurTimer) return;
-
     if (this.focused) {
       // because the old active element fires blur before the next element gets focus
       // we often need a moment to see if focus comes back
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       event && event.persist && event.persist();
       this.blurTimer = window.setTimeout(() => {
-        var _this$_elementRef$cur3, _event$focusedEditor, _event$relatedTarget, _event$relatedTarget$;
-
         this.blurTimer = 0;
-
         if (this.contentTrayClosing) {
           // the CanvasContentTray is in the process of closing
           // wait until it finishes
           return;
         }
-
-        if ((_this$_elementRef$cur3 = this._elementRef.current) !== null && _this$_elementRef$cur3 !== void 0 && _this$_elementRef$cur3.contains(document.activeElement)) {
+        if (this._elementRef.current?.contains(document.activeElement)) {
           // focus is still somewhere w/in me
           return;
         }
-
         const activeClass = document.activeElement && document.activeElement.getAttribute('class');
-
-        if ((event.focusedEditor === undefined || event.target.id === ((_event$focusedEditor = event.focusedEditor) === null || _event$focusedEditor === void 0 ? void 0 : _event$focusedEditor.id)) && activeClass !== null && activeClass !== void 0 && activeClass.includes('tox-')) {
+        if (
+        // @ts-expect-error
+        (event.focusedEditor === undefined || 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 !== null && event !== void 0 && (_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.getAttribute('class')) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.includes('tox-')) {
+        if (event?.relatedTarget?.getAttribute('class')?.includes('tox-')) {
           // a tinymce popup has focus
           return;
         }
-
         const popups = document.querySelectorAll('[data-mce-component]');
-
         for (const popup of popups) {
           if (popup.contains(document.activeElement)) {
             // one of our popups has focus
             return;
           }
         }
-
         bridge.blurEditor(this);
-        this.props.onBlur && this.props.onBlur(event);
+        if (this.props.onBlur) {
+          this.props.onBlur(event);
+        }
       }, ASYNC_FOCUS_TIMEOUT);
     }
   }
 
-  call(methodName) {
+  // @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?') {
       return true;
     }
-
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
-    }
-
+    // @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', () => {
       const node = editor.selection.getNode();
-
+      // @ts-expect-error
       if (isImageEmbed(node, editor)) {
         if (this.announcing !== 1) {
           this.setState({
@@ -1465,7 +1397,7 @@ class RCEWrapper extends React.Component {
           });
           this.announcing = 2;
         }
-      } else if (isElementWithinTable(node, editor)) {
+      } else if (isElementWithinTable(node)) {
         if (this.announcing !== 3) {
           this.setState({
             announcement: formatMessage('type Control F9 to access table options. {text}', {
@@ -1482,121 +1414,109 @@ class RCEWrapper extends React.Component {
       }
     });
   }
+
   /* ********** autosave support *************** */
 
+  // remove any autosaved value that's too old
 
-  // if a placeholder image shows up in autosaved content, we have to remove it
-  // because the data url gets converted to a blob, which is not valid when restored.
-  // besides, the placeholder is intended to be temporary while the file
-  // is being uploaded
-  patchAutosavedContent(content, asText) {
-    const temp = document.createElement('div');
-    temp.innerHTML = content;
-    temp.querySelectorAll('[data-placeholder-for]').forEach(placeholder => {
-      placeholder.parentElement.removeChild(placeholder);
-    });
-    if (asText) return temp.textContent;
-    return temp.innerHTML;
-  }
+  // @ts-expect-error
 
   getAutoSaved(key) {
     let autosaved = null;
-
     try {
       autosaved = this.storage && this.storage.getItem(key);
     } catch (_ex) {
+      // @ts-expect-error
       this.storage.removeItem(this.autoSaveKey);
     }
-
     return autosaved;
-  } // only autosave if the feature flag is set, and there is only 1 RCE on the page
+  }
+
+  // only autosave if the feature flag is set, and there is only 1 RCE on the page
   // the latter condition is necessary because the popup RestoreAutoSaveModal
   // is lousey UX when there are >1
-
-
   get isAutoSaving() {
+    if (!this.editor) return false;
+
     // If the editor is invisible for some reason, don't show the autosave modal
     // 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() {
-    var _this$props$trayProps;
-
-    const userId = (_this$props$trayProps = this.props.trayProps) === null || _this$props$trayProps === void 0 ? void 0 : _this$props$trayProps.containingContext.userId;
+    // @ts-expect-error
+    const userId = this.props.trayProps?.containingContext.userId;
     return `rceautosave:${userId}${window.location.href}:${this.props.textareaId}`;
   }
 
+  // @ts-expect-error
+
+  /* *********** end autosave support *************** */
+
+  // @ts-expect-error
+
   componentWillUnmount() {
     if (this.state.shouldShowEditor) {
-      var _this$mutationObserve, _this$intersectionObs;
-
       window.clearTimeout(this.blurTimer);
-
       if (!this._destroyCalled) {
         this.destroy();
       }
-
-      this._elementRef.current.removeEventListener('keydown', this.handleKey, true);
-
-      (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 ? void 0 : _this$mutationObserve.disconnect();
-      (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.disconnect();
+      if (this._elementRef.current) {
+        this._elementRef.current.removeEventListener('keydown', this.handleKey, true);
+      }
+      this.mutationObserver?.disconnect();
+      this.intersectionObserver?.disconnect();
     }
   }
-
-  wrapOptions() {
-    var _this$props$trayProps2, _this$props$trayProps3, _this$props$trayProps4, _sanitizePlugins;
-
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const rcsExists = !!((_this$props$trayProps2 = this.props.trayProps) !== null && _this$props$trayProps2 !== void 0 && _this$props$trayProps2.host && (_this$props$trayProps3 = this.props.trayProps) !== null && _this$props$trayProps3 !== void 0 && _this$props$trayProps3.jwt);
+  wrapOptions(options = {}) {
+    const rcsExists = !!(this.props.trayProps?.host && this.props.trayProps?.jwt);
     const userLocale = editorLanguage(this.language);
+
+    // @ts-expect-error
     const setupCallback = options.setup;
     const canvasPlugins = rcsExists ? ['instructure_image', 'instructure_documents', 'instructure_equation'] : [];
-
     if (rcsExists && !this.props.instRecordDisabled) {
       canvasPlugins.splice(2, 0, 'instructure_record');
     }
-
     const pastePlugins = rcsExists ? ['instructure_paste', 'paste'] : ['paste'];
-
-    if (rcsExists && this.props.use_rce_icon_maker && ((_this$props$trayProps4 = this.props.trayProps) === null || _this$props$trayProps4 === void 0 ? void 0 : _this$props$trayProps4.contextType) === 'course') {
+    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');
     }
-
     if (this.getRequiredFeatureStatuses().rce_find_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 wrappedOpts = { ...defaultTinymceConfig,
+    const wrappedOpts = {
+      ...defaultTinymceConfig,
       ...options,
       readonly: this.props.readOnly,
       theme: 'silver',
       // some older code specified 'modern', which doesn't exist any more
+
+      // @ts-expect-error
       height: options.height || DEFAULT_RCE_HEIGHT,
       language: userLocale,
       document_base_url: this.props.canvasOrigin,
-      block_formats: options.block_formats || [`${formatMessage('Heading 2')}=h2`, `${formatMessage('Heading 3')}=h3`, `${formatMessage('Heading 4')}=h4`, `${formatMessage('Preformatted')}=pre`, `${formatMessage('Paragraph')}=p`].join('; '),
+      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('; '),
       setup: editor => {
-        var _bridge$trayProps;
-
         addKebabIcon(editor);
         editorWrappers.set(editor, this);
         const trayPropsWithColor = {
+          // @ts-expect-error
           brandColor: this.style.theme.canvasBrandColor,
           ...this.props.trayProps
         };
-        (_bridge$trayProps = bridge.trayProps) === null || _bridge$trayProps === void 0 ? void 0 : _bridge$trayProps.set(editor, trayPropsWithColor);
+        bridge.trayProps?.set(editor, trayPropsWithColor);
+        // @ts-expect-error
         bridge.userLocale = userLocale;
         bridge.canvasOrigin = this.props.canvasOrigin;
-
         if (typeof setupCallback === 'function') {
           setupCallback(editor);
         }
@@ -1605,8 +1525,10 @@ class RCEWrapper extends React.Component {
       // in the editor matches the styles of the app it will be displayed in when saved.
       // This is just so we inject the helper class names that tinyMCE uses for
       // things like table resizing and stuff.
+      // @ts-expect-error
       content_css: options.content_css || [],
-      content_style: contentCSS,
+      // @ts-expect-error
+      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
@@ -1614,10 +1536,16 @@ class RCEWrapper extends React.Component {
       // since we currently can't effectively paste using the clipboard api anyway.
       // we include all the canvas specific items in the menu and toolbar
       // and rely on tinymce only showing them if the plugin is provided.
+      // @ts-expect-error
       menu: mergeMenu(getMenuForVariant(this.variant), options.menu),
-      toolbar: mergeToolbar(getToolbarForVariant(this.variant, this.ltiToolFavorites), options.toolbar),
+      toolbar: mergeToolbar(
+      // @ts-expect-error
+      getToolbarForVariant(this.variant, this.ltiToolFavorites),
+      // @ts-expect-error
+      options.toolbar),
       contextmenu: '',
       // show the browser's native context menu
+
       toolbar_mode: 'sliding',
       toolbar_sticky: true,
       // In regards to the ability to disable plugins:
@@ -1627,8 +1555,10 @@ 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-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], // filter out the plugins designated for removal
-      (_sanitizePlugins = sanitizePlugins(options.plugins)) === null || _sanitizePlugins === void 0 ? void 0 : _sanitizePlugins.filter(p => p.length > 0 && p[0] !== '-'), this.pluginsToExclude),
+      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],
+      // filter out the plugins designated for removal
+      // @ts-expect-error
+      sanitizePlugins(options.plugins)?.filter(p => p.length > 0 && p[0] !== '-'), this.pluginsToExclude),
       textpattern_patterns: [{
         start: '* ',
         cmd: 'InsertUnorderedList'
@@ -1637,128 +1567,120 @@ class RCEWrapper extends React.Component {
         cmd: 'InsertUnorderedList'
       }]
     };
-
     if (this.props.trayProps) {
+      // @ts-expect-error
       wrappedOpts.canvas_rce_user_context = {
         type: this.props.trayProps.contextType,
         id: this.props.trayProps.contextId
       };
+
+      // @ts-expect-error
       wrappedOpts.canvas_rce_containing_context = {
+        // @ts-expect-error
         type: this.props.trayProps.containingContext.contextType,
+        // @ts-expect-error
         id: this.props.trayProps.containingContext.contextId
       };
     }
-
     return wrappedOpts;
   }
-
   unhandleTextareaChange() {
     if (this._textareaEl) {
       this._textareaEl.removeEventListener('input', this.handleTextareaChange);
     }
   }
-
   registerTextareaChange() {
     const el = this.getTextarea();
-
     if (this._textareaEl !== el) {
       this.unhandleTextareaChange();
-
       if (el) {
         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
           el.classList.add(...this.props.textareaClassName.split(/\s+/));
         }
-
         this._textareaEl = el;
       }
     }
   }
-
   componentDidMount() {
     if (this.state.shouldShowEditor) {
       this.editorReallyDidMount();
     } else {
       this.intersectionObserver = new IntersectionObserver(entries => {
         const entry = entries[0];
-
         if (entry.isIntersecting || entry.intersectionRatio > 0) {
           this.setState({
             shouldShowEditor: true
           });
         }
-      }, // initialize the RCE when it gets close to entering the viewport
+      },
+      // initialize the RCE when it gets close to entering the viewport
       {
         root: null,
         rootMargin: '200px 0px',
         threshold: 0.0
       });
+      // @ts-expect-error
       this.intersectionObserver.observe(this._editorPlaceholderRef.current);
     }
   }
-
   componentDidUpdate(prevProps, prevState) {
     if (this.state.shouldShowEditor) {
       if (!prevState.shouldShowEditor) {
-        var _this$intersectionObs2;
-
         this.editorReallyDidMount();
-        (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.disconnect();
+        this.intersectionObserver?.disconnect();
       } else {
         this.registerTextareaChange();
-
         if (prevState.editorView !== this.state.editorView) {
           this.setEditorView(this.state.editorView);
           this.focusCurrentView();
         }
-
         if (prevProps.readOnly !== this.props.readOnly) {
           this.mceInstance().mode.set(this.props.readOnly ? 'readonly' : 'design');
         }
       }
     }
   }
-
   editorReallyDidMount() {
     const myTiny = this.mceInstance();
     this.pendingEventHandlers.forEach(e => {
+      // @ts-expect-error
       myTiny.on(e.name, e.handler);
     });
-
     this._tagTinymceAuxDiv();
-
     this.registerTextareaChange();
-
-    this._elementRef.current.addEventListener('keydown', this.handleKey, true); // give the textarea its initial size
-
-
+    // @ts-expect-error
+    this._elementRef.current.addEventListener('keydown', this.handleKey, true);
+    // give the textarea its initial size
     this.onResize(null, {
       deltaY: 0
-    }); // Preload the LTI Tools modal
+    });
+    // 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');
     }
-
     bridge.renderEditor(this);
   }
 
+  // @ts-expect-error
   setEditorView(view) {
     switch (view) {
       case WYSIWYG_VIEW:
         this.setCode(this.textareaValue());
         this.mceInstance().show();
         break;
-
       default:
         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, {
@@ -1777,27 +1699,29 @@ class RCEWrapper extends React.Component {
       as: "div",
       borderRadius: "medium",
       borderWidth: "small"
-    }, /*#__PURE__*/React.createElement(RceHtmlEditor, {
+    }, /*#__PURE__*/React.createElement(RceHtmlEditor
+    // @ts-expect-error
+    , {
       ref: this._prettyHtmlEditorRef,
       height: this.state.height,
       code: this.getCode(),
       onChange: value => {
-        this.getTextarea().value = value;
+        const node = this.getTextarea();
+        if (node) {
+          node.value = value;
+        }
         this.handleTextareaChange();
       }
     })));
   }
-
   render() {
-    var _this$props$trayProps5, _this$props$trayProps6, _this$props$trayProps7, _this$props$trayProps8, _this$props$trayProps9;
-
     const {
       trayProps,
       ...mceProps
     } = this.props;
-
     if (!this.state.shouldShowEditor) {
       return /*#__PURE__*/React.createElement("div", {
+        // @ts-expect-error
         ref: this._editorPlaceholderRef,
         style: {
           height: `${this.props.editorOptions.height}px`,
@@ -1805,21 +1729,22 @@ class RCEWrapper extends React.Component {
         }
       });
     }
-
     const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, this.props.ai_text_tools);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, this.style.css), /*#__PURE__*/React.createElement(StoreProvider, {
-      jwt: (_this$props$trayProps5 = this.props.trayProps) === null || _this$props$trayProps5 === void 0 ? void 0 : _this$props$trayProps5.jwt,
-      refreshToken: (_this$props$trayProps6 = this.props.trayProps) === null || _this$props$trayProps6 === void 0 ? void 0 : _this$props$trayProps6.refreshToken,
-      host: (_this$props$trayProps7 = this.props.trayProps) === null || _this$props$trayProps7 === void 0 ? void 0 : _this$props$trayProps7.host,
-      contextType: (_this$props$trayProps8 = this.props.trayProps) === null || _this$props$trayProps8 === void 0 ? void 0 : _this$props$trayProps8.contextType,
-      contextId: (_this$props$trayProps9 = this.props.trayProps) === null || _this$props$trayProps9 === void 0 ? void 0 : _this$props$trayProps9.contextId,
+      jwt: this.props.trayProps?.jwt,
+      refreshToken: this.props.trayProps?.refreshToken,
+      host: this.props.trayProps?.host,
+      contextType: this.props.trayProps?.contextType,
+      contextId: this.props.trayProps?.contextId,
       canvasOrigin: this.props.canvasOrigin
     }, storeProps => {
-      var _this$props$trayProps10;
-
       return /*#__PURE__*/React.createElement("div", {
-        key: this.id,
-        className: `${this.style.classNames.root} rce-wrapper`,
+        key: this.id
+        // @ts-expect-error
+        ,
+        className: `${this.style.classNames.root} rce-wrapper`
+        // @ts-expect-error
+        ,
         ref: this._elementRef,
         style: this.variant === 'full' ? {
           marginBottom: '.5rem'
@@ -1830,10 +1755,14 @@ 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
       }, /*#__PURE__*/React.createElement(IconKeyboardShortcutsLine, null)), /*#__PURE__*/React.createElement(AlertMessageArea, {
-        messages: this.state.messages,
+        messages: this.state.messages
+        // @ts-expect-error
+        ,
         liveRegion: this.props.liveRegion,
         afterDismiss: this.removeAlert
       }), this.state.editorView === PRETTY_HTML_EDITOR_VIEW && this.renderHtmlEditor(), /*#__PURE__*/React.createElement("div", {
@@ -1842,15 +1771,25 @@ class RCEWrapper extends React.Component {
         }
       }, /*#__PURE__*/React.createElement(Editor, {
         id: mceProps.textareaId,
-        textareaName: mceProps.name,
+        textareaName: mceProps.name
+        // @ts-expect-error
+        ,
         init: this.tinymceInitOptions,
-        initialValue: this.initialContent,
+        initialValue: this.initialContent
+        // @ts-expect-error
+        ,
         onInit: this.onInit,
         onClick: this.handleFocusEditor,
-        onKeypress: this.handleFocusEditor,
+        onKeypress: this.handleFocusEditor
+        // @ts-expect-error
+        ,
         onActivate: this.handleFocusEditor,
-        onRemove: this.onRemove,
-        onFocus: this.handleFocusEditor,
+        onRemove: this.onRemove
+        // @ts-expect-error
+        ,
+        onFocus: this.handleFocusEditor
+        // @ts-expect-error
+        ,
         onBlur: this.handleBlurEditor,
         onNodeChange: this.onNodeChange,
         onEditorChange: this.onEditorChange,
@@ -1867,7 +1806,9 @@ class RCEWrapper extends React.Component {
         onResize: this.onResize,
         onKBShortcutModalOpen: this.openKBShortcutModal,
         onA11yChecker: this.onA11yChecker,
-        onFullscreen: this.handleClickFullscreen,
+        onFullscreen: this.handleClickFullscreen
+        // @ts-expect-error
+        ,
         a11yBadgeColor: this.style.theme.canvasBadgeBackgroundColor,
         a11yErrorsCount: this.state.a11yErrorsCount,
         onWordcountModalOpen: () => launchWordcountModal(this.mceInstance(), document, {
@@ -1876,8 +1817,8 @@ class RCEWrapper extends React.Component {
         disabledPlugins: this.pluginsToExclude,
         features: statusBarFeatures,
         onAI: this.handleAIClick
-      }), ((_this$props$trayProps10 = this.props.trayProps) === null || _this$props$trayProps10 === void 0 ? void 0 : _this$props$trayProps10.containingContext) && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
-        mountNode: instuiPopupMountNode,
+      }), this.props.trayProps?.containingContext && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
+        mountNode: instuiPopupMountNodeFn,
         key: this.id,
         canvasOrigin: this.getCanvasUrl(),
         bridge: bridge,
@@ -1885,15 +1826,19 @@ class RCEWrapper extends React.Component {
         onTrayClosing: this.handleContentTrayClosing,
         use_rce_icon_maker: this.props.use_rce_icon_maker
       }, trayProps, {
+        // @ts-expect-error
         storeProps: storeProps
       })), /*#__PURE__*/React.createElement(KeyboardShortcutModal, {
         onExited: this.KBShortcutModalExited,
         onDismiss: this.closeKBShortcutModal,
         open: this.state.KBShortcutModalOpen
-      }), this.props.ai_text_tools && this.AIToolsTray && /*#__PURE__*/React.createElement(this.AIToolsTray, {
+      }), 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: instuiPopupMountNode,
+        mountNode: instuiPopupMountNodeFn,
         contextId: trayProps.contextId,
         contextType: trayProps.contextId,
         currentContent: this.getCurrentContentForAI(),
@@ -1916,13 +1861,37 @@ class RCEWrapper extends React.Component {
       }, this.state.announcement));
     }));
   }
-
-} // standard: string of tinymce menu commands
-// e.g. 'instructure_links | inserttable instructure_media_embed | hr'
-// custom: a string of tinymce menu commands
-// returns: standard + custom with any duplicate commands removed from custom
-
-
+}
+RCEWrapper.propTypes = {
+  ai_text_tools: _pt.bool,
+  autosave: _pt.shape({
+    enabled: _pt.bool,
+    maxAge: _pt.number,
+    interval: _pt.number
+  }),
+  canvasOrigin: _pt.string,
+  defaultContent: _pt.string,
+  editorView: _pt.string,
+  features: _pt.objectOf(_pt.any),
+  handleUnmount: _pt.func,
+  instRecordDisabled: _pt.bool,
+  language: _pt.string,
+  ltiToolFavorites: _pt.arrayOf(_pt.string),
+  maxInitRenderedRCEs: _pt.number,
+  name: _pt.string,
+  onBlur: _pt.func,
+  onContentChange: _pt.func,
+  onFocus: _pt.func,
+  onInitted: _pt.func,
+  onRemove: _pt.func,
+  readOnly: _pt.bool,
+  renderKBShortcutModal: _pt.bool,
+  textareaClassName: _pt.string,
+  textareaId: _pt.string,
+  tinymce: _pt.any.isRequired,
+  use_rce_icon_maker: _pt.bool,
+  userCacheKey: _pt.string
+};
 RCEWrapper.propTypes = rceWrapperPropTypes;
 RCEWrapper.defaultProps = {
   trayProps: null,
@@ -1933,90 +1902,10 @@ RCEWrapper.defaultProps = {
   ltiTools: [],
   maxInitRenderedRCEs: -1,
   features: {},
-  timezone: (_Intl = Intl) === null || _Intl === void 0 ? void 0 : (_Intl$DateTimeFormat = _Intl.DateTimeFormat()) === null || _Intl$DateTimeFormat === void 0 ? void 0 : (_Intl$DateTimeFormat$ = _Intl$DateTimeFormat.resolvedOptions()) === null || _Intl$DateTimeFormat$ === void 0 ? void 0 : _Intl$DateTimeFormat$.timeZone,
+  timezone: Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone,
   canvasOrigin: '',
   variant: 'full'
 };
 RCEWrapper.skinCssInjected = false;
-
-function mergeMenuItems(standard, custom) {
-  var _custom$trim;
-
-  let c = custom === null || custom === void 0 ? void 0 : (_custom$trim = custom.trim) === null || _custom$trim === void 0 ? void 0 : _custom$trim.call(custom);
-  if (!c) return standard;
-  const s = new Set(standard.split(/[\s|]+/)); // remove any duplicates
-
-  c = c.split(/\s+/).filter(m => !s.has(m));
-  c = c.join(' ').replace(/^\s*\|\s*/, '').replace(/\s*\|\s*$/, '');
-  return `${standard} | ${c}`;
-} // standard: the incoming tinymce menu object
-// custom: tinymce menu object to merge into standard
-// returns: the merged result by mutating incoming standard arg.
-// It will add commands to existing menus, or add a new menu
-// if the custom one does not exist
-
-
-function mergeMenu(standard, custom) {
-  if (!custom) return standard;
-  Object.keys(custom).forEach(k => {
-    const curr_m = standard[k];
-
-    if (curr_m) {
-      curr_m.items = mergeMenuItems(curr_m.items, custom[k].items);
-    } else {
-      standard[k] = { ...custom[k]
-      };
-    }
-  });
-  return standard;
-} // standard: incoming tinymce toolbar array
-// custom: tinymce toolbar array to merge into standard
-// returns: the merged result by mutating the incoming standard arg.
-// It will add commands to existing toolbars, or add a new toolbar
-// if the custom one does not exist
-
-
-function mergeToolbar(standard, custom) {
-  if (!custom) return standard; // merge given toolbar data into the default toolbar
-
-  custom.forEach(tb => {
-    const curr_tb = standard.find(t => tb.name && formatMessage(tb.name) === t.name);
-
-    if (curr_tb) {
-      curr_tb.items.splice(curr_tb.items.length, 0, ...tb.items);
-    } else {
-      standard.push(tb);
-    }
-  });
-  return standard;
-} // standard: incoming array of plugin names
-// custom: array of plugin names to merge
-// exclusions: array of plugins to remove
-// returns: the merged result, duplicates and exclusions removed
-
-
-function mergePlugins(standard) {
-  let custom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  let exclusions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  const union = new Set(standard);
-
-  for (const c of custom) {
-    union.add(c);
-  }
-
-  for (const e of exclusions) {
-    union.delete(e);
-  }
-
-  return [...union];
-} // plugins is an array of strings
-// the convention is that plugins starting with '-',
-// i.e. a hyphen, are to be disabled in the RCE instance
-
-
-function parsePluginsToExclude(plugins) {
-  return plugins.filter(plugin => plugin.length > 0 && plugin[0] === '-').map(pluginToIgnore => pluginToIgnore.slice(1));
-}
-
 export default RCEWrapper;
 export { mergeMenuItems, mergeMenu, mergeToolbar, mergePlugins, parsePluginsToExclude };