@instructure/canvas-rce 5.14.0 → 5.14.2

package/es/rce/RCEWrapper.js

@@ -1,5 +1,4 @@
 var _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -17,10 +16,12 @@ 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';
 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';
@@ -65,65 +66,57 @@ const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAuto
 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.
-// see https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
-
+}
 
+// 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,138 +124,113 @@ 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.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
+    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.onRemove = () => {
       bridge.detachEditor(this);
       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;
-
         case PRETTY_HTML_EDITOR_VIEW:
           newState = {
             editorView: newView || WYSIWYG_VIEW
           };
           break;
-
         case RAW_HTML_EDITOR_VIEW:
           newState = {
             editorView: newView || WYSIWYG_VIEW
           };
       }
-
       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
-
+      }
 
+      // 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;
-
         this.resizeObserver.observe(document[FS_ELEMENT]);
         (_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 ? void 0 : _window$visualViewpor.addEventListener('resize', this._handleFullscreenResize);
-
         this._handleFullscreenResize();
-
         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);
-
         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());
     };
-
     this.contentTrayClosing = false;
     this.blurTimer = 0;
-
     this.handleFocusRCE = event => {
       this.handleFocus(event);
     };
-
     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))) {
         this.handleBlur(event);
       }
     };
-
     this.handleFocusEditor = (event, _editor) => {
       // use .active to put a focus ring around the content area
       // when the editor has focus. This isn't perfect, but it's
@@ -271,13 +239,11 @@ class RCEWrapper extends React.Component {
       ifr && ifr.parentElement.classList.add('active');
       this.handleFocus(event);
     };
-
     this.handleBlurEditor = (event, _editor) => {
       const ifr = this.iframe;
       ifr && ifr.parentElement.classList.remove('active');
       this.handleBlur(event);
     };
-
     this.handleKey = event => {
       if (event.code === 'F9' && event.altKey) {
         event.preventDefault();
@@ -300,7 +266,6 @@ class RCEWrapper extends React.Component {
         event.stopPropagation();
       }
     };
-
     this.handleClickFullscreen = () => {
       if (this._isFullscreen()) {
         this._exitFullscreen();
@@ -308,103 +273,93 @@ class RCEWrapper extends React.Component {
         this._enterFullscreen();
       }
     };
-
     this.handleInputChange = () => {
       this.checkAccessibility();
     };
-
     this.onInit = (_event, editor) => {
       var _this$props$onInitted, _this$props;
-
       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
+      textarea.dataset.rich_text = true;
 
+      // start with the textarea and tinymce in sync
       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');
       }
-
-      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
-
+      }
 
+      // Adds a focusout event listener for handling screen reader navigation focus
       const header = this._elementRef.current.querySelector('.tox-editor-header');
-
       if (header) {
         header.addEventListener('focusout', e => {
           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
+      (_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.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();
           }
         });
       }
     };
-
     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.
@@ -413,19 +368,16 @@ class RCEWrapper extends React.Component {
       // 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._setupSelectionSaving = editor => {
       let savedSelection = null;
       let selectionWasReset = false;
       let editorHasFocus = false;
-
       const restoreSelectionIfNecessary = () => {
         if (savedSelection && selectionWasReset) {
           this.editor.selection.setRng(savedSelection.range, savedSelection.isForward);
           selectionWasReset = false;
         }
       };
-
       editor.on('blur', () => {
         editorHasFocus = false;
         selectionWasReset = false;
@@ -445,15 +397,14 @@ class RCEWrapper extends React.Component {
       });
       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;
         }
+        const selection = this.editor.selection.normalize();
 
-        const selection = this.editor.selection.normalize(); // Detect a browser-reset selection (e.g. From invoking the Find command)
-
+        // 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) {
           selectionWasReset = true;
         }
@@ -461,7 +412,8 @@ class RCEWrapper extends React.Component {
       editor.on('BeforeExecCommand', () => {
         restoreSelectionIfNecessary();
       });
-      editor.on('ExecCommand', () => {
+      editor.on('ExecCommand', (/* event */
+      ) => {
         // Commands may have modified the selection, we need to recapture it
         savedSelection = {
           range: this.editor.selection.getRng().cloneRange(),
@@ -469,22 +421,16 @@ 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
@@ -493,7 +439,6 @@ class RCEWrapper extends React.Component {
               no_events: true
             }), true);
             const autosavedContent = this.patchAutosavedContent(autosaved.content, true);
-
             if (autosavedContent !== editorContent) {
               this.setState({
                 confirmAutoSave: true,
@@ -510,19 +455,15 @@ class RCEWrapper extends React.Component {
         }
       }
     };
-
     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;
         let i = 0;
         let key;
-
         while (key = _this.storage.key(i++)) {
           if (/^rceautosave:/.test(key)) {
             const autosaved = _this.getAutoSaved(key);
-
             if (autosaved && autosaved.autosaveTimestamp < expiry) {
               _this.storage.removeItem(key);
             }
@@ -530,38 +471,30 @@ class RCEWrapper extends React.Component {
         }
       }
     };
-
     this.restoreAutoSave = ans => {
       this.setState({
         confirmAutoSave: false
       }, () => {
         const editor = this.mceInstance();
-
         if (ans) {
           editor.setContent(this.state.autoSavedContent, {});
         }
-
         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
-
-
+        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);
         } catch (ex) {
@@ -569,7 +502,6 @@ class RCEWrapper extends React.Component {
             // probably failed because there's not enough space
             // delete up all the other entries and try again
             _this.cleanupAutoSave(true);
-
             _this.doAutoSave(e, true);
           } else {
             console.error('Autosave failed:', ex); // eslint-disable-line no-console
@@ -577,7 +509,6 @@ class RCEWrapper extends React.Component {
         }
       }
     };
-
     this.onWordCountUpdate = e => {
       const shouldIgnore = countShouldIgnore(this.editor, 'body', 'words');
       const updatedCount = e.wordCount.words - shouldIgnore;
@@ -589,7 +520,6 @@ 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();
@@ -597,39 +527,33 @@ class RCEWrapper extends React.Component {
         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$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,
       // 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
-
         const modifiedHeight = currentContainerHeight + coordinates.deltaY;
         const newHeight = `${modifiedHeight}px`;
         container.style.height = newHeight;
         this.getTextarea().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, {
@@ -644,7 +568,6 @@ class RCEWrapper extends React.Component {
         skip_focus: true
       });
     };
-
     this.checkAccessibility = () => {
       const editor = this.mceInstance();
       editor.execCommand('checkAccessibility', false, {
@@ -657,20 +580,17 @@ class RCEWrapper extends React.Component {
         skip_focus: true
       });
     };
-
     this.openKBShortcutModal = () => {
       this.setState({
         KBShortcutModalOpen: true,
         KBShortcutFocusReturn: document.activeElement
       });
     };
-
     this.closeKBShortcutModal = () => {
       this.setState({
         KBShortcutModalOpen: false
       });
     };
-
     this.KBShortcutModalExited = () => {
       if (this.state.KBShortcutFocusReturn === this.iframe) {
         // launched using a kb shortcut
@@ -678,18 +598,15 @@ class RCEWrapper extends React.Component {
         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();
       } 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.handleAIClick = () => {
       import('./plugins/shared/ai_tools').then(module => {
         this.AIToolsTray = module.AIToolsTray;
@@ -702,13 +619,11 @@ class RCEWrapper extends React.Component {
         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
@@ -716,27 +631,22 @@ class RCEWrapper extends React.Component {
         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();
       } 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();
       }
     };
-
     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 +654,6 @@ class RCEWrapper extends React.Component {
         selection.setContent(content);
       }
     };
-
     this.getCurrentContentForAI = () => {
       const selected = this.mceInstance().selection.getContent();
       return selected ? {
@@ -755,35 +664,29 @@ 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');
-
       if (header) {
         header.setAttribute('aria-hidden', focusable ? 'false' : 'true');
       }
     };
-
     this.handleTextareaChange = () => {
       if (this.isHidden()) {
         this.setCode(this.textareaValue());
         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 +695,46 @@ 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
     this.indicator = false;
     this._elementRef = /*#__PURE__*/React.createRef();
     this._editorPlaceholderRef = /*#__PURE__*/React.createRef();
     this._prettyHtmlEditorRef = /*#__PURE__*/React.createRef();
-    this._showOnFocusButton = null; // Process initial content
+    this._showOnFocusButton = null;
 
+    // Process initial content
     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)
     }) : 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)
+    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;
-
     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 = {
@@ -869,32 +771,27 @@ class RCEWrapper extends React.Component {
       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,7 +812,6 @@ class RCEWrapper extends React.Component {
       consolidated_media_player
     };
   }
-
   getRequiredConfigValues() {
     return {
       locale: normalizeLocale(this.props.language),
@@ -923,49 +819,42 @@ class RCEWrapper extends React.Component {
       timezone: this.props.timezone
     };
   }
-
   getCanvasUrl() {
     return this.props.canvasOrigin;
   }
-
   getResourceIdentifiers() {
     return {
       resourceType: this.resourceType,
       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();
   }
-
   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 = 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.
-  // It should be called when the RCE content is done being edited.
-
+  }
 
+  // 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 +864,35 @@ class RCEWrapper extends React.Component {
       }, 100);
       return;
     }
-
     const editor = this.mceInstance();
-
     if (this.indicator) {
       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);
         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,20 +901,16 @@ class RCEWrapper extends React.Component {
       }
     }
   }
-
   checkImageLoadError(element) {
     if (!element || element.tagName !== 'IMG') {
       return;
     }
-
     if (!element.complete) {
       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(() => {
       if (element.naturalWidth === 0) {
         element.style.border = '1px solid #000';
@@ -1040,69 +918,61 @@ class RCEWrapper extends React.Component {
       }
     }, 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 !== 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 */)) {
       element.nextSibling.splitText(1);
       element.nextSibling.remove();
     }
-
     return {
       imageElem: element,
       loadingPromise: new Promise((resolve, reject) => {
@@ -1114,7 +984,6 @@ class RCEWrapper extends React.Component {
             this.contentInserted(element);
             resolve();
           };
-
           element.onerror = e => {
             this.checkImageLoadError(element);
             reject(e);
@@ -1123,49 +992,41 @@ 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
   tinymceOn(tinymceEventName, handler) {
     if (this.state.shouldShowEditor) {
       this.mceInstance().on(tinymceEventName, handler);
@@ -1176,165 +1037,128 @@ class RCEWrapper extends React.Component {
       });
     }
   }
-
   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) {
     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();
   }
-
   getTextarea() {
     return document.getElementById(this.props.textareaId);
   }
-
   textareaValue() {
     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);
     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.addEventListener(FS_CHANGEEVENT, this._onFullscreenChange);
-
     this.setState({
       fullscreenState: {
         prevHeight: this._elementRef.current.offsetHeight - this._getStatusBarHeight()
       }
     });
-
     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]();
     }
   }
-
   _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;
   }
-
   _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;
     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.
     this.handleFocusEditor(new Event('focus', {
       target: this.mceInstance()
     }));
   }
-
   focusCurrentView() {
     switch (this.state.editorView) {
       case WYSIWYG_VIEW:
         this.mceInstance().focus();
         break;
-
       case PRETTY_HTML_EDITOR_VIEW:
         break;
-
       case RAW_HTML_EDITOR_VIEW:
         this.getTextarea().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();
     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');
@@ -1344,109 +1168,108 @@ class RCEWrapper extends React.Component {
         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) {
     if (!this.focused) {
       bridge.focusEditor(this);
       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
       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)) {
           // 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 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-')) {
           // 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);
       }, ASYNC_FOCUS_TIMEOUT);
     }
   }
-
   call(methodName) {
     // 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];
     }
-
     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
+   */
+
   announceContextToolbars(editor) {
     editor.on('NodeChange', () => {
       const node = editor.selection.getNode();
-
       if (isImageEmbed(node, editor)) {
         if (this.announcing !== 1) {
           this.setState({
@@ -1482,8 +1305,10 @@ 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.
@@ -1498,22 +1323,19 @@ class RCEWrapper extends React.Component {
     if (asText) return temp.textContent;
     return temp.innerHTML;
   }
-
   getAutoSaved(key) {
     let autosaved = null;
-
     try {
       autosaved = this.storage && this.storage.getItem(key);
     } catch (_ex) {
       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 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;
@@ -1521,72 +1343,61 @@ class RCEWrapper extends React.Component {
     const editorVisible = this.editor.getContainer().offsetParent;
     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;
     return `rceautosave:${userId}${window.location.href}:${this.props.textareaId}`;
   }
 
+  /* *********** end autosave support *************** */
+
   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();
     }
   }
-
   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);
     const userLocale = editorLanguage(this.language);
     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') {
       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
+
       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('; '),
       setup: editor => {
         var _bridge$trayProps;
-
         addKebabIcon(editor);
         editorWrappers.set(editor, this);
         const trayPropsWithColor = {
@@ -1596,7 +1407,6 @@ class RCEWrapper extends React.Component {
         (_bridge$trayProps = bridge.trayProps) === null || _bridge$trayProps === void 0 ? void 0 : _bridge$trayProps.set(editor, trayPropsWithColor);
         bridge.userLocale = userLocale;
         bridge.canvasOrigin = this.props.canvasOrigin;
-
         if (typeof setupCallback === 'function') {
           setupCallback(editor);
         }
@@ -1606,7 +1416,7 @@ class RCEWrapper extends React.Component {
       // This is just so we inject the helper class names that tinyMCE uses for
       // things like table resizing and stuff.
       content_css: options.content_css || [],
-      content_style: contentCSS,
+      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
@@ -1618,6 +1428,7 @@ class RCEWrapper extends React.Component {
       toolbar: mergeToolbar(getToolbarForVariant(this.variant, this.ltiToolFavorites), 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,7 +1438,7 @@ 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
+      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),
       textpattern_patterns: [{
         start: '* ',
@@ -1637,7 +1448,6 @@ class RCEWrapper extends React.Component {
         cmd: 'InsertUnorderedList'
       }]
     };
-
     if (this.props.trayProps) {
       wrappedOpts.canvas_rce_user_context = {
         type: this.props.trayProps.contextType,
@@ -1648,49 +1458,41 @@ class RCEWrapper extends React.Component {
         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',
@@ -1699,66 +1501,58 @@ class RCEWrapper extends React.Component {
       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();
       } 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 => {
       myTiny.on(e.name, e.handler);
     });
-
     this._tagTinymceAuxDiv();
-
     this.registerTextareaChange();
-
-    this._elementRef.current.addEventListener('keydown', this.handleKey, true); // give the textarea its initial size
-
-
+    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);
   }
-
   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, {
@@ -1787,15 +1581,12 @@ class RCEWrapper extends React.Component {
       }
     })));
   }
-
   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", {
         ref: this._editorPlaceholderRef,
@@ -1805,7 +1596,6 @@ 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,
@@ -1816,7 +1606,6 @@ class RCEWrapper extends React.Component {
       canvasOrigin: this.props.canvasOrigin
     }, storeProps => {
       var _this$props$trayProps10;
-
       return /*#__PURE__*/React.createElement("div", {
         key: this.id,
         className: `${this.style.classNames.root} rce-wrapper`,
@@ -1916,13 +1705,12 @@ class RCEWrapper extends React.Component {
       }, this.state.announcement));
     }));
   }
+}
 
-} // standard: string of tinymce menu commands
+// 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 = rceWrapperPropTypes;
 RCEWrapper.defaultProps = {
   trayProps: null,
@@ -1938,50 +1726,47 @@ RCEWrapper.defaultProps = {
   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
-
+  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
+}
+
+// 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]
+      standard[k] = {
+        ...custom[k]
       };
     }
   });
   return standard;
-} // standard: incoming tinymce toolbar array
+}
+
+// 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
-
+  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 {
@@ -1989,34 +1774,30 @@ function mergeToolbar(standard, custom) {
     }
   });
   return standard;
-} // standard: incoming array of plugin names
+}
+
+// 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
+}
+
+// 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 };