@instructure/canvas-rce 5.6.16 → 5.7.0

package/lib/translated/cy/modules/rce/RCEWrapper.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2, _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
+var _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
 
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
@@ -21,8 +21,6 @@ import React, { Suspense } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import _ from 'lodash';
 import { StoreProvider } from './plugins/shared/StoreContext';
-import themeable from '@instructure/ui-themeable'; // eslint-disable-line  @typescript-eslint/no-unused-vars
-
 import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
 import { Alert } from '@instructure/ui-alerts';
 import { Spinner } from '@instructure/ui-spinner';
@@ -46,988 +44,13 @@ import CanvasContentTray from './plugins/shared/CanvasContentTray';
 import StatusBar, { PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW } from './StatusBar';
 import { VIEW_CHANGE } from './customEvents';
 import ShowOnFocusButton from './ShowOnFocusButton';
-import theme from '../skins/theme'; // eslint-disable-line  @typescript-eslint/no-unused-vars
-
-import { isAudio, isImage, isVideo } from './plugins/shared/fileTypeUtils';
 import KeyboardShortcutModal from './KeyboardShortcutModal';
 import AlertMessageArea from './AlertMessageArea';
 import alertHandler from './alertHandler';
 import { isFileLink, isImageEmbed } from './plugins/shared/ContentSelection';
-import { AUDIO_PLAYER_SIZE, VIDEO_SIZE_DEFAULT } from './plugins/instructure_record/VideoOptionsTray/TrayController';
 import { countShouldIgnore } from './plugins/instructure_wordcount/utils/countContent';
 import launchWordcountModal from './plugins/instructure_wordcount/clickCallback';
 import { determineOSDependentKey } from './userOS';
-const styles = {
-  componentId: 'empSX',
-  template: function (theme) {
-    return `
-
-
-
-
-.canvas-rce__skins--root {
-  background-color: ${theme.canvasBackgroundColor || 'inherit'};
-}
-
-
-
-.rce-wrapper textarea {
-    width: 100%;
-    box-sizing: border-box;
-    min-height: auto;
-  }
-
-.tox,
-  .tox *:not(svg) {
-    color: inherit;
-    font-family: inherit;
-  }
-
-
-
-[dir='rtl'] .tox :not(svg) {
-    direction: rtl;
-  }
-
-.tox:not(.tox-tinymce-inline) .tox-editor-header {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-  }
-
-.tox.tox-tinymce .screenreader-only {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    transform: translatez(0);
-  }
-
-.tox-tinymce-aux {
-    font-family: ${theme.canvasFontFamily || 'inherit'};
-  }
-
-
-
-.tox.tox-tinymce-aux {
-    z-index: 10000;
-  }
-
-.tox .tox-button {
-    background-color: ${theme.canvasPrimaryButtonHoverBackground || 'inherit'};
-    font-family: ${theme.canvasFontFamily || 'inherit'};
-    font-weight: ${theme.canvasButtonFontWeight || 'inherit'};
-    font-size: ${theme.canvasButtonFontSize || 'inherit'};
-    color: ${theme.canvasPrimaryButtonColor || 'inherit'};
-    border-color: ${theme.canvasPrimaryButtonBorderColor || 'inherit'};
-    line-height: calc(${theme.canvasButtonLineHeight || 'inherit'} - 2px);
-    padding: ${theme.canvasButtonPadding || 'inherit'};
-  }
-
-.tox .tox-button[disabled] {
-    opacity: 0.5;
-    border-color: inherit;
-    color: inherit;
-  }
-
-.tox .tox-button:focus:not(:disabled) {
-    background-color: ${theme.canvasPrimaryButtonBackground || 'inherit'};
-    color: ${theme.canvasPrimaryButtonColor || 'inherit'};
-    border-color: ${theme.canvasBackgroundColor || 'inherit'};
-    box-shadow: ${theme.canvasFocusBoxShadow || 'inherit'};
-  }
-
-.tox .tox-button:hover:not(:disabled) {
-    background-color: ${theme.canvasPrimaryButtonHoverBackground || 'inherit'};
-    color: ${theme.canvasPrimaryButtonHoverColor || 'inherit'};
-  }
-
-.tox .tox-button:active:not(:disabled) {
-    background-color: ${theme.canvasPrimaryButtonBackground || 'inherit'};
-    border-color: ${theme.canvasPrimaryButtonBorderColor || 'inherit'};
-    color: ${theme.canvasPrimaryButtonColor || 'inherit'};
-  }
-
-.tox .tox-button--secondary {
-    background-color: ${theme.canvasSecondaryButtonBackground || 'inherit'};
-    border-color: ${theme.canvasSecondaryButtonBorderColor || 'inherit'};
-    color: ${theme.canvasSecondaryButtonColor || 'inherit'};
-  }
-
-.tox .tox-button--secondary[disabled] {
-    background-color: inherit;
-    border-color: ${theme.canvasSecondaryButtonBorderColor || 'inherit'};
-    color: inherit;
-    opacity: 0.5;
-  }
-
-.tox .tox-button--secondary:focus:not(:disabled) {
-    background-color: inherit;
-    border-color: ${theme.canvasFocusBorderColor || 'inherit'};
-    color: inherit;
-  }
-
-.tox .tox-button--secondary:hover:not(:disabled) {
-    background-color: ${theme.canvasSecondaryButtonHoverBackground || 'inherit'};
-    border-color: ${theme.canvasSecondaryButtonBorderColor || 'inherit'};
-    color: ${theme.canvasSecondaryButtonHoverColor || 'inherit'};
-  }
-
-.tox .tox-button--secondary:active:not(:disabled) {
-    background-color: inherit;
-    border-color: ${theme.canvasSecondaryButtonBorderColor || 'inherit'};
-    color: inherit;
-  }
-
-.tox .tox-button-link {
-    font-family: ${theme.canvasFontFamily || 'inherit'};
-  }
-
-.tox .tox-button--naked {
-    background: ${theme.canvasButtonBackground || 'inherit'};
-    border-color: ${theme.canvasButtonBorderColor || 'inherit'};
-    color: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox .tox-button--naked:hover:not(:disabled) {
-    background-color: ${theme.canvasButtonHoverBackground || 'inherit'};
-    border-color: ${theme.canvasButtonBorderColor || 'inherit'};
-    color: ${theme.canvasButtonHoverColor || 'inherit'};
-  }
-
-.tox .tox-button--naked:focus:not(:disabled) {
-    background-color: ${theme.canvasButtonBackground || 'inherit'};
-    color: ${theme.canvasButtonColor || 'inherit'};
-    border-color: ${theme.canvasBackgroundColor || 'inherit'};
-    box-shadow: ${theme.canvasFocusBoxShadow || 'inherit'};
-  }
-
-.tox .tox-button--naked:active:not(:disabled) {
-    background-color: inherit;
-    color: inherit;
-  }
-
-.tox .tox-button--naked.tox-button--icon {
-    color: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
-    background: ${theme.canvasButtonHoverBackground || 'inherit'};
-    color: ${theme.canvasButtonHoverColor || 'inherit'};
-  }
-
-.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
-    fill: rgba(45, 59, 69, 0.3);
-  }
-
-.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
-    fill: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
-    fill: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
-    box-shadow: ${theme.canvasFocusBoxShadow || 'inherit'};
-  }
-
-.tox .tox-collection--list .tox-collection__group {
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-collection__group-heading {
-    background-color: #e3e6e8;
-    color: rgba(45, 59, 69, 0.6);
-  }
-
-.tox .tox-collection__item {
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-collection__item--state-disabled {
-    background-color: unset;
-    opacity: 0.5;
-    cursor: default;
-  }
-
-.tox .tox-collection--list .tox-collection__item--enabled {
-    color: contrast(inherit, ${theme.canvasTextColor || 'inherit'}, #fff);
-  }
-
-.tox .tox-collection--list .tox-collection__item--active {
-    background-color: ${theme.activeMenuItemBackground || 'inherit'};
-    color: ${theme.activeMenuItemLabelColor || 'inherit'};
-  }
-
-.tox
-    .tox-collection--list
-    .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
-    background-color: ${theme.activeMenuItemBackground || 'inherit'};
-    color: ${theme.activeMenuItemLabelColor || 'inherit'};
-  }
-
-.tox .tox-collection--toolbar .tox-collection__item--enabled {
-    background-color: #cbced1;
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-collection--toolbar .tox-collection__item--active {
-    background-color: #e0e2e3;
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-collection--grid .tox-collection__item--enabled {
-    background-color: #cbced1;
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-collection--grid .tox-collection__item--active {
-    background-color: #e0e2e3;
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-collection--list .tox-collection__item-icon:first-child {
-    margin-right: 8px;
-  }
-
-.tox .tox-collection__item-accessory {
-    color: rgba(45, 59, 69, 0.6);
-  }
-
-.tox .tox-sv-palette {
-    border: 1px solid black;
-    box-sizing: border-box;
-  }
-
-.tox .tox-hue-slider {
-    border: 1px solid black;
-  }
-
-.tox .tox-rgb-form input.tox-invalid {
-    
-    border-color: ${theme.canvasErrorColor || 'inherit'} !important;
-  }
-
-.tox .tox-rgb-form {
-    padding: 2px; 
-  }
-
-.tox .tox-swatches__picker-btn:hover {
-    background: #e0e2e3;
-  }
-
-.tox .tox-comment-thread {
-    background: ${theme.canvasBackgroundColor || 'inherit'};
-  }
-
-.tox .tox-comment {
-    background: ${theme.canvasBackgroundColor || 'inherit'};
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-    box-shadow: 0 4px 8px 0 rgba(45, 59, 69, 0.1);
-  }
-
-.tox .tox-comment__header {
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-comment__date {
-    color: rgba(45, 59, 69, 0.6);
-  }
-
-.tox .tox-comment__body {
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-comment__expander p {
-    color: rgba(45, 59, 69, 0.6);
-  }
-
-.tox .tox-comment-thread__overlay::after {
-    background: ${theme.canvasBackgroundColor || 'inherit'};
-  }
-
-.tox .tox-comment__overlay {
-    background: ${theme.canvasBackgroundColor || 'inherit'};
-  }
-
-.tox .tox-comment__loading-text {
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-comment__overlaytext p {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-comment__busy-spinner {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-  }
-
-.tox .tox-user__avatar svg {
-    fill: rgba(45, 59, 69, 0.6);
-  }
-
-.tox .tox-user__name {
-    color: rgba(45, 59, 69, 0.6);
-  }
-
-.tox .tox-dialog-wrap__backdrop {
-    background-color: rgba(255, 255, 255, 0.75);
-  }
-
-.tox .tox-dialog {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-    box-shadow: ${theme.canvasModalShadow || 'inherit'};
-  }
-
-.tox .tox-dialog__header {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    color: ${theme.canvasTextColor || 'inherit'};
-    border-bottom: 1px solid ${theme.canvasBorderColor || 'inherit'};
-    padding: ${theme.canvasModalHeadingPadding || 'inherit'};
-    margin: 0;
-  }
-
-.tox .tox-dialog__title {
-    font-family: ${theme.canvasFontFamily || 'inherit'};
-    font-size: ${theme.canvasModalHeadingFontSize || 'inherit'};
-    font-weight: ${theme.canvasModalHeadingFontWeight || 'inherit'};
-  }
-
-.tox .tox-dialog__body {
-    color: ${theme.canvasTextColor || 'inherit'};
-    padding: ${theme.canvasModalBodyPadding || 'inherit'};
-  }
-
-.tox .tox-dialog__body-nav-item {
-    color: rgba(45, 59, 69, 0.75);
-  }
-
-.tox .tox-dialog__body-nav-item:focus {
-      box-shadow: ${theme.canvasFocusBoxShadow || 'inherit'};
-    }
-
-.tox .tox-dialog__body-nav-item--active {
-    border-bottom-color: ${theme.canvasBrandColor || 'inherit'};
-    color: ${theme.canvasBrandColor || 'inherit'};
-  }
-
-.tox .tox-dialog__footer {
-    background-color: ${theme.canvasModalFooterBackground || 'inherit'};
-    border-top: 1px solid ${theme.canvasBorderColor || 'inherit'};
-    padding: ${theme.canvasModalFooterPadding || 'inherit'};
-    margin: 0;
-  }
-
-.tox .tox-dialog__table tbody tr {
-    border-bottom-color: ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-dropzone {
-    background: ${theme.canvasBackgroundColor || 'inherit'};
-    border: 2px dashed ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-dropzone p {
-    color: rgba(45, 59, 69, 0.6);
-  }
-
-.tox .tox-edit-area {
-    border: 1px solid ${theme.canvasBorderColor || 'inherit'};
-    border-radius: 3px;
-  }
-
-.tox .tox-edit-area__iframe {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    border: ${theme.canvasFocusBorderWidth || 'inherit'} solid transparent;
-  }
-
-.tox.tox-inline-edit-area {
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-form__group {
-    padding: 2px;
-  }
-
-.tox .tox-control-wrap .tox-textfield {
-    padding-right: 32px;
-  }
-
-.tox .tox-control-wrap__status-icon-invalid svg {
-    fill: ${theme.canvasErrorColor || 'inherit'};
-  }
-
-.tox .tox-control-wrap__status-icon-unknown svg {
-    fill: ${theme.canvasWarningColor || 'inherit'};
-  }
-
-.tox .tox-control-wrap__status-icon-valid svg {
-    fill: ${theme.canvasSuccessColor || 'inherit'};
-  }
-
-.tox .tox-color-input span {
-    border-color: rgba(45, 59, 69, 0.2);
-  }
-
-.tox .tox-color-input span:focus {
-    border-color: ${theme.canvasBrandColor || 'inherit'};
-  }
-
-.tox .tox-label,
-  .tox .tox-toolbar-label {
-    color: rgba(45, 59, 69, 0.6);
-  }
-
-.tox .tox-form__group {
-    margin: ${theme.canvasFormElementMargin || 'inherit'};
-  }
-
-.tox .tox-form__group:last-child {
-    margin: 0;
-  }
-
-.tox .tox-form__group .tox-label {
-    color: ${theme.canvasFormElementLabelColor || 'inherit'};
-    margin: ${theme.canvasFormElementLabelMargin || 'inherit'};
-    font-size: ${theme.canvasFormElementLabelFontSize || 'inherit'};
-    font-weight: ${theme.canvasFormElementLabelFontWeight || 'inherit'};
-  }
-
-.tox .tox-form__group--error {
-    color: ${theme.canvasErrorColor || 'inherit'};
-  }
-
-.tox .tox-textfield,
-  .tox .tox-selectfield select,
-  .tox .tox-textarea,
-  .tox .tox-toolbar-textfield {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-    color: ${theme.canvasTextColor || 'inherit'};
-    font-family: ${theme.canvasFontFamily || 'inherit'};
-  }
-
-.tox .tox-textfield:focus,
-  .tox .tox-selectfield select:focus,
-  .tox .tox-textarea:focus {
-    
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-    box-shadow: ${theme.canvasFocusBoxShadow || 'inherit'};
-  }
-
-.tox .tox-naked-btn {
-    color: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox .tox-naked-btn svg {
-    fill: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox .tox-insert-table-picker > div {
-    border-color: #cccccc;
-  }
-
-.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
-    background-color: ${theme.tableSelectorHighlightColor || 'inherit'};
-    border-color: ${theme.tableSelectorHighlightColor || 'inherit'};
-  }
-
-.tox-selected-menu .tox-insert-table-picker {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-  }
-
-.tox .tox-insert-table-picker__label {
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-menu {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-menubar {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-  }
-
-.tox .tox-mbtn {
-    color: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox .tox-mbtn[disabled] {
-    opacity: 0.5;
-  }
-
-.tox .tox-mbtn:hover:not(:disabled) {
-    background: ${theme.toolbarButtonHoverBackground || 'inherit'};
-    color: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox .tox-mbtn:focus:not(:disabled) {
-    background-color: transparent;
-    color: ${theme.canvasButtonColor || 'inherit'};
-    border-color: ${theme.canvasBackgroundColor || 'inherit'};
-    box-shadow: ${theme.canvasFocusBoxShadow || 'inherit'};
-  }
-
-.tox .tox-mbtn--active {
-    background: ${theme.toolbarButtonHoverBackground || 'inherit'};
-    color: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox .tox-notification {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    border-color: #c5c5c5;
-  }
-
-.tox .tox-notification--success {
-    background-color: #dff0d8;
-    border-color: ${theme.canvasSuccessColor || 'inherit'};
-  }
-
-.tox .tox-notification--error {
-    background-color: #f2dede;
-    border-color: ${theme.canvasErrorColor || 'inherit'};
-  }
-
-.tox .tox-notification--warn {
-    background-color: #fcf8e3;
-    border-color: ${theme.canvasWarningColor || 'inherit'};
-  }
-
-.tox .tox-notification--info {
-    background-color: #d9edf7;
-    border-color: ${theme.canvasInfoColor || 'inherit'};
-  }
-
-.tox .tox-notification__body {
-    color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-pop__dialog {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-pop.tox-pop--bottom::before {
-    border-color: ${theme.canvasBorderColor || 'inherit'} transparent transparent transparent;
-  }
-
-.tox .tox-pop.tox-pop--top::before {
-    border-color: transparent transparent ${theme.canvasBorderColor || 'inherit'} transparent;
-  }
-
-.tox .tox-pop.tox-pop--left::before {
-    border-color: transparent ${theme.canvasBorderColor || 'inherit'} transparent transparent;
-  }
-
-.tox .tox-pop.tox-pop--right::before {
-    border-color: transparent transparent transparent ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-slider {
-    width: 100%;
-  }
-
-.tox .tox-slider__rail {
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-slider__handle {
-    background-color: ${theme.canvasBrandColor || 'inherit'};
-  }
-
-.tox .tox-spinner > div {
-    background-color: rgba(45, 59, 69, 0.6);
-  }
-
-
-
-.tox .tox-tbtn {
-    border-style: none;
-    color: ${theme.canvasButtonColor || 'inherit'};
-    position: relative;
-  }
-
-.tox .tox-tbtn svg {
-    fill: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox .tox-tbtn.tox-tbtn--enabled {
-    background: inherit;
-  }
-
-.tox .tox-tbtn:focus,
-  .tox .tox-split-button:focus {
-    background: ${theme.canvasBackgroundColor || 'inherit'};
-    color: ${theme.canvasButtonColor || 'inherit'};
-    box-shadow: ${theme.canvasFocusBoxShadow || 'inherit'};
-  }
-
-.tox .tox-tbtn:hover,
-  .tox .tox-split-button:hover,
-  .tox .tox-tbtn.tox-tbtn--enabled:hover,
-  .tox .tox-split-button .tox-tbtn.tox-split-button__chevron:hover {
-    background: ${theme.toolbarButtonHoverBackground || 'inherit'};
-    color: ${theme.canvasButtonColor || 'inherit'};
-  }
-
-.tox-tbtn.tox-split-button__chevron {
-    position: relative;
-  }
-
-
-
-.tox .tox-tbtn.tox-tbtn--enabled::after {
-    position: absolute;
-    top: -3px;
-    content: '\\25BC';
-    text-align: center;
-    height: 8px;
-    font-size: 8px;
-    width: 100%;
-    color: ${theme.canvasEnabledColor || 'inherit'};
-  }
-
-[dir="ltr"] .tox .tox-tbtn.tox-tbtn--enabled::after {
-    text-align: center;
-  }
-
-[dir="rtl"] .tox .tox-tbtn.tox-tbtn--enabled::after {
-    text-align: center;
-  }
-
-
-
-.tox .tox-tbtn.tox-tbtn--enabled.tox-tbtn--select::after {
-    text-align: left;
-    padding-left: 18px;
-  }
-
-[dir="ltr"] .tox .tox-tbtn.tox-tbtn--enabled.tox-tbtn--select::after {
-    text-align: left;
-  }
-
-[dir="rtl"] .tox .tox-tbtn.tox-tbtn--enabled.tox-tbtn--select::after {
-    text-align: left;
-  }
-
-
-
-.tox-tbtn.tox-split-button__chevron.tox-tbtn--enabled::after {
-    display: none;
-  }
-
-.tox .tox-tbtn--disabled,
-  .tox .tox-tbtn--disabled:hover,
-  .tox .tox-tbtn:disabled,
-  .tox .tox-tbtn:disabled:hover {
-    opacity: 0.5;
-  }
-
-.tox .tox-tbtn--disabled svg,
-  .tox .tox-tbtn--disabled:hover svg,
-  .tox .tox-tbtn:disabled svg,
-  .tox .tox-tbtn:disabled:hover svg {
-    
-    opacity: 0.5;
-  }
-
-.tox .tox-tbtn__select-chevron svg {
-    fill: ${theme.canvasButtonColor || 'inherit'};
-    width: 10px;
-    height: 10px;
-  }
-
-.tox .tox-split-button__chevron svg {
-    fill: ${theme.canvasButtonColor || 'inherit'};
-    width: 10px;
-    height: 10px;
-  }
-
-.tox .tox-split-button.tox-tbtn--disabled:hover,
-  .tox .tox-split-button.tox-tbtn--disabled:focus,
-  .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
-  .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
-    opacity: 0.5;
-  }
-
-.tox .tox-toolbar {
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-    border-top: 1px solid ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-toolbar__group:not(:last-of-type) {
-    border-right: 1px solid ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-tooltip__body {
-    background-color: ${theme.canvasTextColor || 'inherit'};
-    box-shadow: 0 2px 4px rgba(45, 59, 69, 0.3);
-    color: rgba(255, 255, 255, 0.75);
-  }
-
-.tox .tox-tooltip--down .tox-tooltip__arrow {
-    border-top-color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-tooltip--up .tox-tooltip__arrow {
-    border-bottom-color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-tooltip--right .tox-tooltip__arrow {
-    border-left-color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-tooltip--left .tox-tooltip__arrow {
-    border-right-color: ${theme.canvasTextColor || 'inherit'};
-  }
-
-.tox .tox-well {
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox .tox-custom-editor {
-    border-color: ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox a {
-    color: ${theme.canvasLinkColor || 'inherit'};
-  }
-
-.tox.tox-tinymce {
-    border-style: none;
-  }
-
-
-
-.tox-editor-container .tox-toolbar,
-  .tox-editor-container .tox-toolbar-overlord {
-    background-image: none;
-    margin-bottom: 5px;
-  }
-
-.tox-editor-container .tox-toolbar__primary {
-    background-image: none;
-  }
-
-
-
-.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
-    border-style: none;
-  }
-
-.tox .tox-toolbar .tox-toolbar__group,
-  .tox .tox-toolbar-overlord .tox-toolbar__group,
-  .tox-toolbar__overflow .tox-toolbar__group,
-  .tox:not([dir='rtl']) .tox-toolbar__group:not(:last-of-type),
-  .tox[dir='rtl'] .tox-toolbar__group:not(:last-of-type) {
-    border-style: none;
-  }
-
-.tox-toolbar .tox-toolbar__group::after, 
-  .tox-toolbar-overlord .tox-toolbar__group::after, 
-  .tox-toolbar__overflow .tox-toolbar__group::after, 
-  .tox-tinymce-aux .tox-toolbar .tox-toolbar__group::after {
-    
-    content: '';
-    display: inline-block;
-    box-sizing: border-box;
-    border-inline-end: 1px solid ${theme.canvasBorderColor || 'inherit'};
-    width: 8px;
-    height: 24px;
-  }
-
-[dir="ltr"] .tox-toolbar .tox-toolbar__group::after,
-[dir="ltr"] .tox-toolbar-overlord .tox-toolbar__group::after,
-[dir="ltr"] .tox-toolbar__overflow .tox-toolbar__group::after,
-[dir="ltr"] .tox-tinymce-aux .tox-toolbar .tox-toolbar__group::after {
-    border-right: 1px solid ${theme.canvasBorderColor || 'inherit'};
-  }
-
-[dir="rtl"] .tox-toolbar .tox-toolbar__group::after,
-[dir="rtl"] .tox-toolbar-overlord .tox-toolbar__group::after,
-[dir="rtl"] .tox-toolbar__overflow .tox-toolbar__group::after,
-[dir="rtl"] .tox-tinymce-aux .tox-toolbar .tox-toolbar__group::after {
-    border-left: 1px solid ${theme.canvasBorderColor || 'inherit'};
-  }
-
-.tox-toolbar .tox-toolbar__group:last-child::after,
-  .tox-toolbar-overlord .tox-toolbar__group:last-child::after,
-  .tox-toolbar__overflow .tox-toolbar__group:last-child::after,
-  .tox-tinymce-aux .tox-toolbar .tox-toolbar__group:last-child::after {
-    border-inline-end-width: 0;
-    padding-inline-start: 0;
-    width: 0;
-  }
-
-[dir="ltr"] .tox-toolbar .tox-toolbar__group:last-child::after,
-[dir="ltr"] .tox-toolbar-overlord .tox-toolbar__group:last-child::after,
-[dir="ltr"] .tox-toolbar__overflow .tox-toolbar__group:last-child::after,
-[dir="ltr"] .tox-tinymce-aux .tox-toolbar .tox-toolbar__group:last-child::after {
-    border-right-width: 0;
-    padding-left: 0;
-  }
-
-[dir="rtl"] .tox-toolbar .tox-toolbar__group:last-child::after,
-[dir="rtl"] .tox-toolbar-overlord .tox-toolbar__group:last-child::after,
-[dir="rtl"] .tox-toolbar__overflow .tox-toolbar__group:last-child::after,
-[dir="rtl"] .tox-tinymce-aux .tox-toolbar .tox-toolbar__group:last-child::after {
-    border-left-width: 0;
-    padding-right: 0;
-  }
-
-.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
-    width: auto;
-    padding-inline-end: 0;
-  }
-
-[dir="ltr"] .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
-    padding-right: 0;
-  }
-
-[dir="rtl"] .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
-    padding-left: 0;
-  }
-
-.tox .tox-tbtn {
-    box-sizing: border-box;
-  }
-
-.tox .tox-tbtn,
-  .tox .tox-split-button,
-  .tox .tox-tbtn--select {
-    border-style: none;
-    margin: 2px 2px 3px;
-  }
-
-.tox .tox-split-button .tox-tbtn {
-    margin-inline-end: 0;
-  }
-
-[dir="ltr"] .tox .tox-split-button .tox-tbtn {
-    margin-right: 0;
-  }
-
-[dir="rtl"] .tox .tox-split-button .tox-tbtn {
-    margin-left: 0;
-  }
-
-.tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
-    margin-inline-start: 0;
-  }
-
-[dir="ltr"] .tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
-    margin-left: 0;
-  }
-
-[dir="rtl"] .tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
-    margin-right: 0;
-  }
-
-.tox .tox-edit-area.active,
-  .tox .tox-edit-area.active iframe {
-    border-color: ${theme.canvasFocusBorderColor || 'inherit'};
-  }
-
-.tox .tox-split-button .tox-tbtn {
-    margin-inline-end: 0;
-  }
-
-[dir="ltr"] .tox .tox-split-button .tox-tbtn {
-    margin-right: 0;
-  }
-
-[dir="rtl"] .tox .tox-split-button .tox-tbtn {
-    margin-left: 0;
-  }
-
-.tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
-    margin-inline-start: -6px;
-    background-color: ${theme.canvasBackgroundColor || 'inherit'};
-
-    
-    width: 30px;
-  }
-
-[dir="ltr"] .tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
-    margin-left: -6px;
-  }
-
-[dir="rtl"] .tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
-    margin-right: -6px;
-  }
-
-.tox .tox-split-button:hover {
-    box-shadow: none;
-  }
-
-.tox .tox-split-button:hover .tox-split-button__chevron {
-    background: ${theme.canvasBackgroundColor || 'inherit'};
-    color: ${theme.canvasButtonColor || 'inherit'};
-    box-shadow: none;
-  }
-
-.tox .tox-tbtn:hover.tox-split-button__chevron,
-  .tox .tox-tbtn:focus.tox-split-button__chevron {
-    box-shadow: none;
-  }
-
-.tox .tox-toolbar__primary {
-    border-width: 0;
-  }
-
-.tox-tbtn.tox-tbtn--select .tox-icon.tox-tbtn__icon-wrap {
-    margin-inline-end: 4px;
-  }
-
-[dir="ltr"] .tox-tbtn.tox-tbtn--select .tox-icon.tox-tbtn__icon-wrap {
-    margin-right: 4px;
-  }
-
-[dir="rtl"] .tox-tbtn.tox-tbtn--select .tox-icon.tox-tbtn__icon-wrap {
-    margin-left: 4px;
-  }
-
-
-
-.tox .tox-icon svg:not([height]),
-  .tox .tox-collection__item-icon svg:not([height]) {
-    height: 16px;
-  }
-
-
-
-.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
-    height: 30px;
-    width: 30px;
-  }
-
-
-
-.tox-selectfield__icon-js svg {
-    width: 10px;
-    height: 10px;
-  }
-
-
-
-[data-canvascontenttray-content]:focus {
-    outline-color: ${theme.canvasFocusBorderColor || 'inherit'};
-  }
-
-.tox .tox-toolbar-overlord .tox-toolbar__overflow {
-    
-    background: none;
-  }
-`;
-  },
-  'root': 'canvas-rce__skins--root'
-};
 const skinCSSBinding = {
   componentId: 'djgIv',
   template: function (theme) {
@@ -3350,6 +2373,7 @@ import { rceWrapperPropTypes } from './RCEWrapperProps';
 import { insertPlaceholder, placeholderInfoFor, removePlaceholder } from '../util/loadingPlaceholder';
 import { transformRceContentForEditing } from './transformContent';
 import { IconMoreSolid } from '@instructure/ui-icons/es/svg';
+import buildStyle from './style';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
@@ -3443,7 +2467,8 @@ function renderLoading() {
 }
 
 let alertIdValue = 0;
-let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = class RCEWrapper extends React.Component {
+
+class RCEWrapper extends React.Component {
   static getByEditor(editor) {
     return editorWrappers.get(editor);
   }
@@ -3610,10 +2635,6 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       }
     };
 
-    this.handleExternalClick = () => {
-      debounce(this.checkAccessibility, 1000)();
-    };
-
     this.handleInputChange = () => {
       this.checkAccessibility();
     };
@@ -3628,9 +2649,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       textarea.dataset.rich_text = true; // start with the textarea and tinymce in sync
 
       textarea.value = this.getCode();
-      textarea.style.height = this.state.height; // Capture click events outside the iframe
-
-      document.addEventListener('click', this.handleExternalClick);
+      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');
@@ -3833,8 +2852,9 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
         }
 
         this.storage.removeItem(this.autoSaveKey);
-      });
-      this.checkAccessibility();
+      }); // let the content be restored
+
+      debounce(this.checkAccessibility, 1000)();
     };
 
     this.doAutoSave = function (e) {
@@ -3894,7 +2914,12 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     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$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) => {
@@ -3921,7 +2946,12 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     this.onA11yChecker = () => {
       const editor = this.mceInstance();
       editor.execCommand('openAccessibilityChecker', false, {
-        mountNode: instuiPopupMountNode
+        mountNode: instuiPopupMountNode,
+        onFixError: errors => {
+          this.setState({
+            a11yErrorsCount: errors.length
+          });
+        }
       }, {
         skip_focus: true
       });
@@ -4017,9 +3047,10 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       alertIdValue = 0;
     };
 
-    // Set up some limited global state that can be referenced
+    this.style = buildStyle(); // 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
@@ -4110,22 +3141,14 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     const {
       new_math_equation_handling = false,
       rce_ux_improvements = false,
-      rce_better_paste = false,
-      rce_new_external_tool_dialog_in_canvas = false,
-      rce_improved_placeholders = false,
       explicit_latex_typesetting = false,
-      rce_show_studio_media_options = false,
       rce_transform_loaded_content = false,
       media_links_use_attachment_id = false
     } = this.props.features;
     return {
       new_math_equation_handling,
       rce_ux_improvements,
-      rce_better_paste,
-      rce_new_external_tool_dialog_in_canvas,
-      rce_improved_placeholders,
       explicit_latex_typesetting,
-      rce_show_studio_media_options,
       rce_transform_loaded_content,
       media_links_use_attachment_id
     };
@@ -4135,7 +3158,8 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     return {
       locale: normalizeLocale(this.props.language),
       flashAlertTimeout: this.props.flashAlertTimeout,
-      timezone: this.props.timezone
+      timezone: this.props.timezone,
+      lockedAttachments: this.props.lockedAttachments
     };
   }
 
@@ -4327,88 +3351,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   }
 
   insertImagePlaceholder(fileMetaProps) {
-    var _this$props$features;
-
-    if ((_this$props$features = this.props.features) !== null && _this$props$features !== void 0 && _this$props$features.rce_improved_placeholders) {
-      return insertPlaceholder(this.mceInstance(), fileMetaProps.name, placeholderInfoFor(fileMetaProps));
-    } // wrap this in a promise primarily so specs can await on the placeholder to be in the DOM
-
-
-    const prom = new Promise((resolve, reject) => {
-      let width, height;
-      let align = 'middle';
-
-      if (isImage(fileMetaProps.contentType) && fileMetaProps.displayAs !== 'link') {
-        const image = new Image();
-
-        image.onload = () => {
-          var _window$visualViewpor4;
-
-          width = image.width;
-          height = image.height;
-          if (!fileMetaProps.domObject.preview) URL.revokeObjectURL(image.src); // we constrain the <img> to max-width: 100%, so scale the size down if necessary
-
-          const maxWidth = Math.floor(this.mceInstance().getBody().clientWidth || ((_window$visualViewpor4 = window.visualViewport) === null || _window$visualViewpor4 === void 0 ? void 0 : _window$visualViewpor4.width) || Number.MAX_SAFE_INTEGER);
-
-          if (width > maxWidth) {
-            height = Math.round(maxWidth / width * height);
-            width = maxWidth;
-          }
-
-          width = `${width}px`;
-          height = `${height}px`;
-          insertImagePlaceholderFRD(this.mceInstance(), fileMetaProps.name, width, height, align);
-          resolve();
-        };
-
-        image.onerror = () => {
-          if (!fileMetaProps.domObject.preview) URL.revokeObjectURL(image.src);
-          reject();
-        };
-
-        image.src = fileMetaProps.domObject.preview || URL.createObjectURL(fileMetaProps.domObject);
-      } else {
-        if (isVideo(fileMetaProps.contentType || fileMetaProps.type)) {
-          width = VIDEO_SIZE_DEFAULT.width;
-          height = VIDEO_SIZE_DEFAULT.height;
-          align = 'bottom';
-        } else if (isAudio(fileMetaProps.contentType || fileMetaProps.type)) {
-          width = AUDIO_PLAYER_SIZE.width;
-          height = AUDIO_PLAYER_SIZE.height;
-          align = 'bottom';
-        } else {
-          width = `${fileMetaProps.name.length}rem`;
-          height = '1rem';
-        }
-
-        insertImagePlaceholderFRD(this.mceInstance(), fileMetaProps.name, width, height, align);
-        resolve();
-      }
-
-      function insertImagePlaceholderFRD(editor, imgName, imgWidth, imgHeight, imgAlign) {
-        // if you're wondering, the &nbsp; scatter about in the svg
-        // is because tinymce will strip empty elements
-        const markup = `
-<span
-  aria-label="${"Wrthi\u2019n llwytho"}"
-  data-placeholder-for="${encodeURIComponent(imgName)}"
-  style="width: ${imgWidth}; height: ${imgHeight}; vertical-align: ${imgAlign};"
->
-  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
-    <g style="stroke-width:.5rem;fill:none;stroke-linecap:round;">&nbsp;
-      <circle class="c1" cx="50%" cy="50%" r="28px">&nbsp;</circle>
-      <circle class="c2" cx="50%" cy="50%" r="28px">&nbsp;</circle>
-      &nbsp;
-    </g>
-    &nbsp;
-  </svg>
-</span>`;
-        editor.undoManager.ignore(() => {
-          editor.execCommand('mceInsertContent', false, markup);
-        });
-      }
-    });
-    return prom;
+    return insertPlaceholder(this.mceInstance(), fileMetaProps.name, placeholderInfoFor(fileMetaProps));
   }
 
   insertVideo(video) {
@@ -4429,20 +3372,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   }
 
   removePlaceholders(name) {
-    var _this$props$features2;
-
-    if ((_this$props$features2 = this.props.features) !== null && _this$props$features2 !== void 0 && _this$props$features2.rce_improved_placeholders) {
-      removePlaceholder(this.mceInstance(), name);
-    } else {
-      const placeholder = this.mceInstance().dom.doc.querySelector(`[data-placeholder-for="${encodeURIComponent(name)}"]`);
-
-      if (placeholder) {
-        const editor = this.mceInstance();
-        editor.undoManager.ignore(() => {
-          editor.dom.remove(placeholder);
-        });
-      }
-    }
+    removePlaceholder(this.mceInstance(), name);
   }
 
   insertLink(link) {
@@ -4837,24 +3767,19 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   }
 
   wrapOptions() {
-    var _this$props$trayProps2, _this$props$trayProps3, _this$props$features3, _this$props$features4, _this$props$features5, _this$props$trayProps4, _sanitizePlugins;
+    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 isOnCanvasDomain = window.origin === this.props.canvasOrigin;
-    const canvasPlugins = rcsExists ? ['instructure_links', 'instructure_image', 'instructure_documents', 'instructure_equation', !isOnCanvasDomain || (_this$props$features3 = this.props.features) !== null && _this$props$features3 !== void 0 && _this$props$features3.rce_new_external_tool_dialog_in_canvas ? 'instructure_rce_external_tools' : 'instructure_external_tools', 'a11y_checker'] : ['instructure_links'];
+    const canvasPlugins = rcsExists ? ['instructure_links', 'instructure_image', 'instructure_documents', 'instructure_equation', 'instructure_rce_external_tools', 'a11y_checker'] : ['instructure_links'];
 
     if (rcsExists && !this.props.instRecordDisabled) {
       canvasPlugins.splice(2, 0, 'instructure_record');
     }
 
-    if ((_this$props$features4 = this.props.features) !== null && _this$props$features4 !== void 0 && _this$props$features4.rce_show_studio_media_options) {
-      canvasPlugins.push('instructure_studio_media_options');
-    }
-
-    const pastePlugins = rcsExists && (_this$props$features5 = this.props.features) !== null && _this$props$features5 !== void 0 && _this$props$features5.rce_better_paste ? ['instructure_paste', 'paste'] : ['paste'];
+    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');
@@ -4880,7 +3805,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
         addKebabIcon(editor);
         editorWrappers.set(editor, this);
         const trayPropsWithColor = {
-          brandColor: this.theme.canvasBrandColor,
+          brandColor: this.style.theme.canvasBrandColor,
           ...this.props.trayProps
         };
         (_bridge$trayProps = bridge.trayProps) === null || _bridge$trayProps === void 0 ? void 0 : _bridge$trayProps.set(editor, trayPropsWithColor);
@@ -4956,7 +3881,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       // 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', ...pastePlugins, ...canvasPlugins], // filter out the plugins designated for removal
+      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', ...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: '* ',
@@ -5149,7 +4074,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       });
     }
 
-    return /*#__PURE__*/React.createElement(StoreProvider, {
+    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,
@@ -5161,7 +4086,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
 
       return /*#__PURE__*/React.createElement("div", {
         key: this.id,
-        className: `${styles.root} rce-wrapper`,
+        className: `${this.style.classNames.root} rce-wrapper`,
         ref: this._elementRef,
         onFocus: this.handleFocusRCE,
         onBlur: this.handleBlurRCE
@@ -5206,7 +4131,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
         onKBShortcutModalOpen: this.openKBShortcutModal,
         onA11yChecker: this.onA11yChecker,
         onFullscreen: this.handleClickFullscreen,
-        a11yBadgeColor: this.theme.canvasBadgeBackgroundColor,
+        a11yBadgeColor: this.style.theme.canvasBadgeBackgroundColor,
         a11yErrorsCount: this.state.a11yErrorsCount,
         onWordcountModalOpen: () => launchWordcountModal(this.mceInstance(), document, {
           skipEditorFocus: true
@@ -5240,10 +4165,17 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
         screenReaderOnly: true,
         liveRegion: this.props.liveRegion
       }, this.state.announcement));
-    });
+    }));
   }
 
-}, _class2.propTypes = rceWrapperPropTypes, _class2.defaultProps = {
+} // 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,
   autosave: {
     enabled: false
@@ -5254,10 +4186,8 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   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,
   canvasOrigin: ''
-}, _class2.skinCssInjected = false, _class2)) || _class); // 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.skinCssInjected = false;
 
 function mergeMenuItems(standard, custom) {
   var _custom$trim;