@instructure/canvas-rce 5.10.0 → 5.10.2

package/es/rce/RCEWrapper.js

@@ -1,4 +1,4 @@
-var _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
+var _dec, _class, _class2, _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
 
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
@@ -21,6 +21,7 @@ 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';
 import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
 import { Alert } from '@instructure/ui-alerts';
 import { Spinner } from '@instructure/ui-spinner';
@@ -44,6 +45,7 @@ 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';
 import KeyboardShortcutModal from './KeyboardShortcutModal';
 import AlertMessageArea from './AlertMessageArea';
 import alertHandler from './alertHandler';
@@ -51,6 +53,977 @@ import { isFileLink, isImageEmbed } from './plugins/shared/ContentSelection';
 import { countShouldIgnore } from './plugins/instructure_wordcount/utils/countContent';
 import launchWordcountModal from './plugins/instructure_wordcount/clickCallback';
 import { determineOSDependentKey } from './userOS';
+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) {
@@ -2374,7 +3347,6 @@ import { insertPlaceholder, placeholderInfoFor, removePlaceholder } from '../uti
 import { transformRceContentForEditing } from './transformContent';
 import { IconMoreSolid } from '@instructure/ui-icons/es/svg';
 import EncryptedStorage from '../util/encrypted-storage';
-import buildStyle from './style';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
@@ -2468,8 +3440,7 @@ function renderLoading() {
 }
 
 let alertIdValue = 0;
-
-class RCEWrapper extends React.Component {
+let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = class RCEWrapper extends React.Component {
   static getByEditor(editor) {
     return editorWrappers.get(editor);
   }
@@ -2714,67 +3685,9 @@ class RCEWrapper extends React.Component {
 
       this.checkAccessibility();
       this.fixToolbarKeyboardNavigation();
-      this.forwardPostMessages();
       (_this$props$onInitted = (_this$props = this.props).onInitted) === null || _this$props$onInitted === void 0 ? void 0 : _this$props$onInitted.call(_this$props, editor);
     };
 
-    this.forwardPostMessages = () => {
-      const windowReferences = [];
-      const rceWindow = this.editor.getWin(); // explicitly assign name for reference by parent window
-
-      rceWindow.name = `${RCEWrapper.editorFrameName}_${this.id}`;
-      rceWindow.addEventListener('message', this.forwardPostMessagesHandler(rceWindow, windowReferences));
-    };
-
-    this.forwardPostMessagesHandler = (rceWindow, windowReferences) => e => {
-      let message;
-
-      try {
-        message = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
-      } catch (err) {
-        // unparseable message may not be meant for our handlers
-        return false;
-      } // NOTE: the code to encode/decode `sourceToolInfo` is duplicated in
-      // the ui/features/post_message_forwarding/index.ts, and
-      // cannot be DRY'd because RCE is in a package
-
-
-      if (e.origin === rceWindow.origin) {
-        const {
-          sourceToolInfo,
-          ...messageWithoutSourceToolInfo
-        } = message;
-        const targetOrigin = sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.origin;
-        const targetWindow = windowReferences[sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.windowId];
-
-        if (!targetOrigin || !targetWindow) {
-          return false;
-        }
-
-        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.postMessage(messageWithoutSourceToolInfo, targetOrigin);
-      } else {
-        // message is from tool, forward to Canvas window
-        // We can't forward the whole `e.source` window in the postMessage,
-        // so we keep a list (`windowReferences`) of all windows we've received
-        // messages from, and include the index into that list as `windowId`
-        let windowId = windowReferences.indexOf(e.source);
-
-        if (windowId === -1) {
-          windowReferences.push(e.source);
-          windowId = windowReferences.length - 1;
-        }
-
-        const newMessage = { ...message,
-          sourceToolInfo: {
-            origin: e.origin,
-            windowId
-          },
-          frameName: rceWindow.name
-        };
-        rceWindow.parent.postMessage(newMessage, rceWindow.origin);
-      }
-    };
-
     this.fixToolbarKeyboardNavigation = () => {
       var _this$_elementRef$cur2;
 
@@ -3107,10 +4020,9 @@ class RCEWrapper extends React.Component {
       alertIdValue = 0;
     };
 
-    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
@@ -3873,7 +4785,7 @@ class RCEWrapper extends React.Component {
         addKebabIcon(editor);
         editorWrappers.set(editor, this);
         const trayPropsWithColor = {
-          brandColor: this.style.theme.canvasBrandColor,
+          brandColor: this.theme.canvasBrandColor,
           ...this.props.trayProps
         };
         (_bridge$trayProps = bridge.trayProps) === null || _bridge$trayProps === void 0 ? void 0 : _bridge$trayProps.set(editor, trayPropsWithColor);
@@ -4142,7 +5054,7 @@ class RCEWrapper extends React.Component {
       });
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, this.style.css), /*#__PURE__*/React.createElement(StoreProvider, {
+    return /*#__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,
@@ -4154,7 +5066,7 @@ class RCEWrapper extends React.Component {
 
       return /*#__PURE__*/React.createElement("div", {
         key: this.id,
-        className: `${this.style.classNames.root} rce-wrapper`,
+        className: `${styles.root} rce-wrapper`,
         ref: this._elementRef,
         onFocus: this.handleFocusRCE,
         onBlur: this.handleBlurRCE
@@ -4185,8 +5097,7 @@ class RCEWrapper extends React.Component {
         onFocus: this.handleFocusEditor,
         onBlur: this.handleBlurEditor,
         onNodeChange: this.onNodeChange,
-        onEditorChange: this.onEditorChange,
-        liveRegion: this.props.liveRegion
+        onEditorChange: this.onEditorChange
       })), /*#__PURE__*/React.createElement(StatusBar, {
         id: this._statusBarId,
         rceIsFullscreen: this._isFullscreen(),
@@ -4200,7 +5111,7 @@ class RCEWrapper extends React.Component {
         onKBShortcutModalOpen: this.openKBShortcutModal,
         onA11yChecker: this.onA11yChecker,
         onFullscreen: this.handleClickFullscreen,
-        a11yBadgeColor: this.style.theme.canvasBadgeBackgroundColor,
+        a11yBadgeColor: this.theme.canvasBadgeBackgroundColor,
         a11yErrorsCount: this.state.a11yErrorsCount,
         onWordcountModalOpen: () => launchWordcountModal(this.mceInstance(), document, {
           skipEditorFocus: true
@@ -4234,17 +5145,10 @@ class RCEWrapper extends React.Component {
         screenReaderOnly: true,
         liveRegion: this.props.liveRegion
       }, this.state.announcement));
-    }));
+    });
   }
 
-} // standard: string of tinymce menu commands
-// e.g. 'instructure_links | inserttable instructure_media_embed | hr'
-// custom: a string of tinymce menu commands
-// returns: standard + custom with any duplicate commands removed from custom
-
-
-RCEWrapper.propTypes = rceWrapperPropTypes;
-RCEWrapper.defaultProps = {
+}, _class2.propTypes = rceWrapperPropTypes, _class2.defaultProps = {
   trayProps: null,
   autosave: {
     enabled: false
@@ -4255,9 +5159,10 @@ RCEWrapper.defaultProps = {
   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: ''
-};
-RCEWrapper.skinCssInjected = false;
-RCEWrapper.editorFrameName = 'active_rce_frame';
+}, _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
 
 function mergeMenuItems(standard, custom) {
   var _custom$trim;