@instructure/canvas-rce 5.14.2 → 5.15.0

package/es/rce/RCEWrapper.js

@@ -1,4 +1,4 @@
-var _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
+import _pt from "prop-types";
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -21,7 +21,6 @@ import React, { Suspense } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import _ from 'lodash';
 import { StoreProvider } from './plugins/shared/StoreContext';
-import { RCEWrapperInterface } from './types';
 import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
 import { Alert } from '@instructure/ui-alerts';
 import { Spinner } from '@instructure/ui-spinner';
@@ -33,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';
@@ -57,11 +56,13 @@ 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;
@@ -94,24 +95,6 @@ function injectTinySkin() {
   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.
 // see https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
@@ -147,12 +130,37 @@ class RCEWrapper extends React.Component {
     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,
@@ -160,25 +168,34 @@ class RCEWrapper extends React.Component {
       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);
+        this.storage?.setItem?.('rce.htmleditor', newView);
       }
 
       // Emit view change event
@@ -192,18 +209,18 @@ class RCEWrapper extends React.Component {
     };
     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);
@@ -212,36 +229,38 @@ class RCEWrapper extends React.Component {
       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 => {
@@ -249,11 +268,13 @@ class RCEWrapper extends React.Component {
         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();
@@ -277,19 +298,23 @@ class RCEWrapper extends React.Component {
       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
+      // @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
@@ -303,9 +328,11 @@ class RCEWrapper extends React.Component {
       }
 
       // Adds a focusout event listener for handling screen reader navigation focus
-      const header = this._elementRef.current.querySelector('.tox-editor-header');
+      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);
@@ -345,35 +372,36 @@ class RCEWrapper extends React.Component {
       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);
+      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;
         }
@@ -381,6 +409,7 @@ class RCEWrapper extends React.Component {
       editor.on('blur', () => {
         editorHasFocus = false;
         selectionWasReset = false;
+        if (!this.editor) return;
         savedSelection = {
           range: this.editor.selection.getRng().cloneRange(),
           isForward: this.editor.selection.isForward()
@@ -396,16 +425,16 @@ 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();
 
         // 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) {
+        if (selection.startContainer?.nodeName === 'BODY' && selection.startContainer === selection.endContainer && selection.startOffset === 0 && selection.endOffset === 0) {
           selectionWasReset = true;
         }
       });
@@ -414,6 +443,7 @@ class RCEWrapper extends React.Component {
       });
       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(),
@@ -435,14 +465,15 @@ class RCEWrapper extends React.Component {
             // 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);
@@ -450,22 +481,21 @@ 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);
             }
           }
         }
@@ -479,15 +509,15 @@ class RCEWrapper extends React.Component {
         if (ans) {
           editor.setContent(this.state.autoSavedContent, {});
         }
+        // @ts-expect-error
         this.storage.removeItem(this.autoSaveKey);
       });
       // 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();
+    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;
@@ -496,20 +526,21 @@ class RCEWrapper extends React.Component {
           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 => {
@@ -522,14 +553,15 @@ class RCEWrapper extends React.Component {
     };
     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);
+      this.props.onContentChange?.(content);
       // check accessibility when clearing the editor,
       // all other times should be checked by handleInputChange
       if (content === '') {
@@ -542,11 +574,14 @@ class RCEWrapper extends React.Component {
         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
         });
@@ -557,7 +592,7 @@ class RCEWrapper extends React.Component {
     this.onA11yChecker = triggerElementId => {
       const editor = this.mceInstance();
       editor.execCommand('openAccessibilityChecker', false, {
-        mountNode: instuiPopupMountNode,
+        mountNode: instuiPopupMountNodeFn,
         triggerElementId,
         onFixError: errors => {
           this.setState({
@@ -571,6 +606,7 @@ class RCEWrapper extends React.Component {
     this.checkAccessibility = () => {
       const editor = this.mceInstance();
       editor.execCommand('checkAccessibility', false, {
+        // @ts-expect-error
         done: errors => {
           this.setState({
             a11yErrorsCount: errors.length
@@ -583,6 +619,7 @@ class RCEWrapper extends React.Component {
     this.openKBShortcutModal = () => {
       this.setState({
         KBShortcutModalOpen: true,
+        // @ts-expect-error
         KBShortcutFocusReturn: document.activeElement
       });
     };
@@ -595,27 +632,27 @@ class RCEWrapper extends React.Component {
       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);
       });
     };
@@ -628,16 +665,17 @@ class RCEWrapper extends React.Component {
       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 => {
@@ -666,7 +704,7 @@ class RCEWrapper extends React.Component {
     };
     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');
       }
@@ -674,6 +712,7 @@ class RCEWrapper extends React.Component {
     this.handleTextareaChange = () => {
       if (this.isHidden()) {
         this.setCode(this.textareaValue());
+        // @ts-expect-error
         this.doAutoSave();
       }
     };
@@ -717,21 +756,25 @@ class RCEWrapper extends React.Component {
     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();
+    // @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;
+    let _ht = props.editorOptions?.height || DEFAULT_RCE_HEIGHT;
     if (!Number.isNaN(_ht)) {
       _ht = `${_ht}px`;
     }
@@ -747,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,
@@ -758,16 +804,24 @@ 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;
@@ -783,7 +837,6 @@ class RCEWrapper extends React.Component {
     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}`;
@@ -815,7 +868,9 @@ class RCEWrapper extends React.Component {
   getRequiredConfigValues() {
     return {
       locale: normalizeLocale(this.props.language),
+      // @ts-expect-error
       flashAlertTimeout: this.props.flashAlertTimeout,
+      // @ts-expect-error
       timezone: this.props.timezone
     };
   }
@@ -824,7 +879,9 @@ class RCEWrapper extends React.Component {
   }
   getResourceIdentifiers() {
     return {
+      // @ts-expect-error
       resourceType: this.resourceType,
+      // @ts-expect-error
       resourceId: this.resourceId
     };
   }
@@ -834,6 +891,8 @@ class RCEWrapper extends React.Component {
   getCode() {
     return this.isHidden() ? this.textareaValue() : this.mceInstance().getContent();
   }
+
+  // @ts-expect-error
   checkReadyToGetCode(promptFunc) {
     let status = true;
     // Check for remaining placeholders
@@ -843,8 +902,7 @@ class RCEWrapper extends React.Component {
     return status;
   }
   setCode(newContent) {
-    var _this$mceInstance;
-    (_this$mceInstance = this.mceInstance()) === null || _this$mceInstance === void 0 ? void 0 : _this$mceInstance.setContent(newContent);
+    this.mceInstance()?.setContent(newContent);
   }
 
   // This function is called imperatively by the page that renders the RCE.
@@ -865,7 +923,9 @@ class RCEWrapper extends React.Component {
       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));
@@ -889,8 +949,17 @@ class RCEWrapper extends React.Component {
     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) {
@@ -905,15 +974,20 @@ class RCEWrapper extends React.Component {
     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
     // 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);
@@ -964,12 +1038,11 @@ class RCEWrapper extends React.Component {
     }
   }
   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.
-    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 */)) {
+    if (element?.nextSibling?.data?.startsWith('\xA0' /* nbsp */)) {
       element.nextSibling.splitText(1);
       element.nextSibling.remove();
     }
@@ -1027,10 +1100,12 @@ class RCEWrapper extends React.Component {
   }
 
   // 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
@@ -1044,39 +1119,43 @@ class RCEWrapper extends React.Component {
     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() {
@@ -1090,14 +1169,17 @@ class RCEWrapper extends React.Component {
     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() {
@@ -1110,10 +1192,14 @@ class RCEWrapper extends React.Component {
       document[FS_EXIT]();
     }
   }
+
+  // @ts-expect-error
+
   _getStatusBarHeight() {
     // the height prop is the height of the editor and does not include
     // the status bar. we'll need this later.
-    return document.getElementById(this._statusBarId).offsetHeight;
+    const node = document.getElementById(this._statusBarId);
+    return node?.offsetHeight || 0;
   }
   _setHeight(newHeight) {
     const cssHeight = `${newHeight}px`;
@@ -1123,7 +1209,10 @@ class RCEWrapper extends React.Component {
       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
     });
@@ -1131,6 +1220,7 @@ class RCEWrapper extends React.Component {
   focus() {
     this.onTinyMCEInstance('mceFocus');
     // tinymce doesn't always call the focus handler.
+    // @ts-expect-error
     this.handleFocusEditor(new Event('focus', {
       target: this.mceInstance()
     }));
@@ -1138,21 +1228,29 @@ class RCEWrapper extends React.Component {
   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;
   }
 
@@ -1162,6 +1260,7 @@ class RCEWrapper extends React.Component {
   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, {
@@ -1185,10 +1284,12 @@ class RCEWrapper extends React.Component {
   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) {
@@ -1199,27 +1300,29 @@ class RCEWrapper extends React.Component {
     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;
         }
@@ -1231,19 +1334,23 @@ class RCEWrapper extends React.Component {
           }
         }
         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);
   }
 
@@ -1266,10 +1373,12 @@ class RCEWrapper extends React.Component {
    *
    * @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({
@@ -1288,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}', {
@@ -1310,24 +1419,14 @@ class RCEWrapper extends React.Component {
 
   // 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;
@@ -1337,44 +1436,51 @@ class RCEWrapper extends React.Component {
   // 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]) {
@@ -1392,19 +1498,23 @@ class RCEWrapper extends React.Component {
       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') {
@@ -1415,7 +1525,9 @@ 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 || [],
+      // @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
@@ -1424,8 +1536,13 @@ 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
 
@@ -1438,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_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
-      (_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'
@@ -1449,12 +1568,17 @@ class RCEWrapper extends React.Component {
       }]
     };
     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
       };
     }
@@ -1498,15 +1622,15 @@ class RCEWrapper extends React.Component {
         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) {
@@ -1522,10 +1646,12 @@ class RCEWrapper extends React.Component {
   editorReallyDidMount() {
     const myTiny = this.mceInstance();
     this.pendingEventHandlers.forEach(e => {
+      // @ts-expect-error
       myTiny.on(e.name, e.handler);
     });
     this._tagTinymceAuxDiv();
     this.registerTextareaChange();
+    // @ts-expect-error
     this._elementRef.current.addEventListener('keydown', this.handleKey, true);
     // give the textarea its initial size
     this.onResize(null, {
@@ -1538,6 +1664,8 @@ class RCEWrapper extends React.Component {
     }
     bridge.renderEditor(this);
   }
+
+  // @ts-expect-error
   setEditorView(view) {
     switch (view) {
       case WYSIWYG_VIEW:
@@ -1571,24 +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`,
@@ -1598,17 +1731,20 @@ 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'
@@ -1619,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", {
@@ -1631,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,
@@ -1656,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, {
@@ -1665,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,
@@ -1674,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(),
@@ -1706,11 +1862,36 @@ class RCEWrapper extends React.Component {
     }));
   }
 }
-
-// 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,
@@ -1721,83 +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 };