@instructure/canvas-rce 5.6.0-beta.0 → 5.6.0

package/lib/rce/plugins/shared/Upload/ComputerPanel.js

@@ -25,9 +25,9 @@ import { StyleSheet, css } from 'aphrodite';
 import { FileDrop } from '@instructure/ui-file-drop';
 import { Billboard } from '@instructure/ui-billboard';
 import { Alert } from '@instructure/ui-alerts';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { px } from '@instructure/ui-utils';
-import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { PresentationContent } from '@instructure/ui-a11y-content';
 import { IconTrashLine } from '@instructure/ui-icons';
 import { Img } from '@instructure/ui-img';
 import { Text } from '@instructure/ui-text';
@@ -188,7 +188,7 @@ export default function ComputerPanel(_ref) {
           }),
           src: preview.preview,
           constrain: "contain",
-          inline: false
+          display: "block"
         });
       } else if (isText(theFile.type)) {
         return /*#__PURE__*/React.createElement(View, {
@@ -227,6 +227,7 @@ export default function ComputerPanel(_ref) {
   }
 
   if (theFile) {
+    const filename = theFile.name;
     return /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'relative'
@@ -235,8 +236,8 @@ export default function ComputerPanel(_ref) {
     }, /*#__PURE__*/React.createElement(Flex, {
       direction: "row-reverse",
       margin: "none none medium"
-    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
-      buttonRef: el => {
+    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
+      elementRef: el => {
         clearButtonRef.current = el;
       },
       onClick: () => {
@@ -247,13 +248,16 @@ export default function ComputerPanel(_ref) {
           error: null
         });
       },
-      icon: IconTrashLine
-    }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Clear selected file: {filename}', {
-      filename: theFile.name
-    })))), /*#__PURE__*/React.createElement(Flex.Item, {
+      renderIcon: IconTrashLine,
+      withBackground: false,
+      withBorder: false,
+      screenReaderLabel: formatMessage('Clear selected file: {filename}', {
+        filename
+      })
+    })), /*#__PURE__*/React.createElement(Flex.Item, {
       grow: true,
       shrink: true
-    }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Text, null, theFile.name)))), /*#__PURE__*/React.createElement(View, {
+    }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Text, null, filename)))), /*#__PURE__*/React.createElement(View, {
       as: "div",
       width: `${width}px`,
       height: `${height}px`,

package/lib/rce/plugins/shared/Upload/UnsplashPanel.js

@@ -150,7 +150,8 @@ function Attribution(_ref) {
     href: profileUrl,
     target: "_blank",
     rel: "noopener",
-    fluidWidth: true
+    display: "block",
+    textAlign: "start"
   }, name)));
 }
 
@@ -239,7 +240,8 @@ export default function UnsplashPanel(_ref2) {
     key: resultImage.id
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "link",
-    fluidWidth: true,
+    display: "block",
+    textAlign: "start",
     theme: {
       mediumPaddingHorizontal: '0'
     },

package/lib/rce/plugins/shared/Upload/UploadFileModal.js

@@ -23,7 +23,6 @@ import { Heading } from '@instructure/ui-heading';
 import { Spinner } from '@instructure/ui-spinner';
 import { Tabs } from '@instructure/ui-tabs';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { Text } from '@instructure/ui-text';
 import formatMessage from '../../../../format-message';
 import RceApiSource from '../../../../rcs/api';
 import ImageOptionsForm from '../ImageOptionsForm';
@@ -158,8 +157,9 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onDismiss,
     offset: "small",
-    placement: "end"
-  }, formatMessage('Close')), /*#__PURE__*/React.createElement(Heading, null, label)), /*#__PURE__*/React.createElement(Modal.Body, {
+    placement: "end",
+    screenReaderLabel: formatMessage('Close')
+  }), /*#__PURE__*/React.createElement(Heading, null, label)), /*#__PURE__*/React.createElement(Modal.Body, {
     ref: ref
   }, /*#__PURE__*/React.createElement(Tabs, {
     onRequestTabChange: (event, _ref3) => {
@@ -176,7 +176,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           renderTitle: function () {
             return formatMessage('Computer');
           },
-          selected: selectedPanel === 'COMPUTER'
+          isSelected: selectedPanel === 'COMPUTER'
         }, /*#__PURE__*/React.createElement(Suspense, {
           fallback: /*#__PURE__*/React.createElement(Spinner, {
             renderTitle: formatMessage('Loading'),
@@ -201,7 +201,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           renderTitle: function () {
             return 'Unsplash';
           },
-          selected: selectedPanel === 'UNSPLASH'
+          isSelected: selectedPanel === 'UNSPLASH'
         }, /*#__PURE__*/React.createElement(Suspense, {
           fallback: /*#__PURE__*/React.createElement(Spinner, {
             renderTitle: formatMessage('Loading'),
@@ -221,7 +221,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           renderTitle: function () {
             return formatMessage('URL');
           },
-          selected: selectedPanel === 'URL'
+          isSelected: selectedPanel === 'URL'
         }, /*#__PURE__*/React.createElement(Suspense, {
           fallback: /*#__PURE__*/React.createElement(Spinner, {
             renderTitle: formatMessage('Loading'),

package/lib/rce/plugins/shared/linkUtils.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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 from 'react';
+import { SVGIcon } from '@instructure/ui-svg-images';
+import { IconAssignmentLine, IconDiscussionLine, IconModuleLine, IconQuizLine, IconQuizSolid as IconNewQuiz, IconAnnouncementLine, IconDocumentLine } from '@instructure/ui-icons';
+export const IconBlank = props => {
+  return /*#__PURE__*/React.createElement(SVGIcon, Object.assign({
+    name: "IconBlank",
+    viewBox: "0 0 1920 1920"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    role: "presentation"
+  }));
+};
+export const getIcon = type => {
+  switch (type) {
+    case 'assignments':
+      return IconAssignmentLine;
+
+    case 'discussions':
+      return IconDiscussionLine;
+
+    case 'modules':
+      return IconModuleLine;
+
+    case 'quizzes':
+      return IconQuizLine;
+
+    case 'quizzes.next':
+      return IconNewQuiz;
+
+    case 'announcements':
+      return IconAnnouncementLine;
+
+    case 'wikiPages':
+      return IconDocumentLine;
+
+    case 'navigation':
+      return IconBlank;
+
+    default:
+      return IconDocumentLine;
+  }
+};

package/lib/rce/plugins/shared/useDataUrl.js

@@ -22,6 +22,7 @@ import { useState, useEffect } from 'react'; // Given a URL to some resource (li
 const useDataUrl = () => {
   const [url, setUrl] = useState('');
   const [dataUrl, setDataUrl] = useState('');
+  const [dataBlob, setDataBlob] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   useEffect(() => {
@@ -37,7 +38,10 @@ const useDataUrl = () => {
         return new Promise((resolve, reject) => {
           const reader = new FileReader();
 
-          reader.onloadend = () => resolve(reader.result);
+          reader.onloadend = () => resolve({
+            result: reader.result,
+            blob
+          });
 
           reader.onerror = reject;
           reader.readAsDataURL(blob);
@@ -47,9 +51,14 @@ const useDataUrl = () => {
       }
     }
 
-    if (!!url) {
-      fetchDataUrl().then(result => {
+    if (url) {
+      fetchDataUrl().then(_ref => {
+        let {
+          result,
+          blob
+        } = _ref;
         setDataUrl(result);
+        setDataBlob(blob);
       }).catch(e => {
         setError(e);
       }).finally(() => setLoading(false));
@@ -59,7 +68,8 @@ const useDataUrl = () => {
     setUrl,
     dataUrl,
     dataLoading: loading,
-    dataError: error
+    dataError: error,
+    dataBlob
   };
 };
 

package/lib/rce/userOS.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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/>.
+ */
+export const determineUserOS = () => {
+  const rawOS = navigator.userAgent;
+  if (rawOS.indexOf('Mac') !== -1) return 'Mac';else if (rawOS.indexOf('Win') !== -1) return 'Windows';else return 'Other';
+};
+export const determineOSDependentKey = () => {
+  switch (determineUserOS()) {
+    case 'Mac':
+      return 'OPTION';
+
+    case 'Windows':
+    default:
+      return 'ALT';
+  }
+};

package/lib/translated/ar/modules/canvasFileBrowser/FlashAlert.js

@@ -49,10 +49,11 @@ import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Transition } from '@instructure/ui-motion';
+import RCEGlobals from '../rce/RCEGlobals';
 const messageHolderId = 'flashalert_message_holder'; // specs fail if I reuse jquery's elements
 
 const screenreaderMessageHolderId = 'flash_screenreader_holder';
-const timeout = 10000; // An Alert with a message and "Details" button which surfaces
+const TIMEOUT = 10000; // An Alert with a message and "Details" button which surfaces
 // more info about the error when pressed.
 // Is displayed at the top of the document, and will close itself after a while
 
@@ -187,7 +188,7 @@ FlashAlert.propTypes = {
 FlashAlert.defaultProps = {
   error: null,
   variant: 'info',
-  timeout,
+  timeout: TIMEOUT,
   screenReaderOnly: false
 };
 export function showFlashAlert(_ref) {
@@ -218,13 +219,15 @@ export function showFlashAlert(_ref) {
   }
 
   function renderAlert(parent) {
+    var _RCEGlobals$getConfig;
+
+    const configuredTimeout = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.flashAlertTimeout;
     ReactDOM.render( /*#__PURE__*/React.createElement(FlashAlert, {
       message: message,
-      timeout: Number.isNaN(parseInt(ENV.flashAlertTimeout, 10)) ? timeout : ENV.flashAlertTimeout,
+      timeout: Number.isNaN(parseInt(configuredTimeout, 10)) ? TIMEOUT : configuredTimeout,
       error: err,
       variant: type,
-      onClose: closeAlert.bind(null, parent) // eslint-disable-line react/jsx-no-bind
-      ,
+      onClose: closeAlert.bind(null, parent),
       screenReaderOnly: srOnly
     }), parent);
   }

package/lib/translated/ar/modules/common/components/LoadMore.js

@@ -68,7 +68,8 @@ class LoadMore extends Component {
     }, /*#__PURE__*/React.createElement(Button, {
       variant: "link",
       onClick: this.loadMore,
-      fluidWidth: true
+      display: "block",
+      textAlign: "start"
     }, "\u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u0632\u064A\u062F \u0645\u0646 \u0627\u0644\u0646\u062A\u0627\u0626\u062C")), hasChildren && this.props.hasMore && /*#__PURE__*/React.createElement("div", {
       "aria-hidden": !this.props.isLoading,
       className: css(styles.loader),

package/lib/translated/ar/modules/rce/KeyboardShortcutModal.js

@@ -24,7 +24,9 @@ import { Modal } from '@instructure/ui-modal';
 import { CloseButton } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import formatMessage from '../format-message';
+import { determineOSDependentKey } from './userOS';
 export default function KeyboardShortcutModal(props) {
+  const OSKey = determineOSDependentKey();
   return /*#__PURE__*/React.createElement(Modal, {
     "data-testid": "RCE_KeyboardShortcutModal",
     "data-mce-component": true,
@@ -39,22 +41,23 @@ export default function KeyboardShortcutModal(props) {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     offset: "medium",
-    variant: "icon",
-    onClick: props.onDismiss
-  }, "\u0625\u063A\u0644\u0627\u0642"), /*#__PURE__*/React.createElement(Heading, null, "\u0627\u062E\u062A\u0635\u0627\u0631\u0627\u062A \u0644\u0648\u062D\u0629 \u0627\u0644\u0645\u0641\u0627\u062A\u064A\u062D")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(View, {
+    color: "primary",
+    onClick: props.onDismiss,
+    screenReaderLabel: "\u0625\u063A\u0644\u0627\u0642"
+  }), /*#__PURE__*/React.createElement(Heading, null, "\u0627\u062E\u062A\u0635\u0627\u0631\u0627\u062A \u0644\u0648\u062D\u0629 \u0627\u0644\u0645\u0641\u0627\u062A\u064A\u062D")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(View, {
     as: "div",
     margin: "small"
   }, /*#__PURE__*/React.createElement(List, {
-    variant: "unstyled"
+    isUnstyled: true
   }, /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
-  }, "ALT+F8/ALT+0"), ' ', "\u0627\u0641\u062A\u062D \u0645\u0631\u0628\u0639 \u062D\u0648\u0627\u0631 \u0627\u062E\u062A\u0635\u0627\u0631\u0627\u062A \u0644\u0648\u062D\u0629 \u0627\u0644\u0645\u0641\u0627\u062A\u064A\u062D \u0647\u0630\u0627"), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
+  }, OSKey, "+F8/", OSKey, "+0"), ' ', "\u0627\u0641\u062A\u062D \u0645\u0631\u0628\u0639 \u062D\u0648\u0627\u0631 \u0627\u062E\u062A\u0635\u0627\u0631\u0627\u062A \u0644\u0648\u062D\u0629 \u0627\u0644\u0645\u0641\u0627\u062A\u064A\u062D \u0647\u0630\u0627"), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
   }, "CTRL+F9"), " ", "\u0634\u0631\u064A\u0637 \u0623\u062F\u0648\u0627\u062A \u062E\u064A\u0627\u0631\u0627\u062A \u0639\u0646\u0635\u0631 \u0627\u0644\u062A\u0631\u0643\u064A\u0632"), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
-  }, "ALT+F9"), " ", "\u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0649 \u0634\u0631\u064A\u0637 \u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u062E\u0627\u0635 \u0628\u0627\u0644\u0645\u062D\u0631\u0631"), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
+  }, OSKey, "+F9"), " ", "\u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0649 \u0634\u0631\u064A\u0637 \u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u062E\u0627\u0635 \u0628\u0627\u0644\u0645\u062D\u0631\u0631"), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
-  }, "ALT+F10"), " ", "\u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0649 \u0634\u0631\u064A\u0637 \u0627\u0644\u0623\u062F\u0648\u0627\u062A \u0627\u0644\u062E\u0627\u0635 \u0628\u0627\u0644\u0645\u062D\u0631\u0631"), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
+  }, OSKey, "+F10"), " ", "\u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0649 \u0634\u0631\u064A\u0637 \u0627\u0644\u0623\u062F\u0648\u0627\u062A \u0627\u0644\u062E\u0627\u0635 \u0628\u0627\u0644\u0645\u062D\u0631\u0631"), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
   }, "ESC"), ' ', "\u0625\u063A\u0644\u0627\u0642 \u0642\u0627\u0626\u0645\u0629 \u0623\u0648 \u0645\u0631\u0628\u0639 \u062D\u0648\u0627\u0631. \u064A\u0639\u064A\u062F\u0643 \u0623\u064A\u0636\u064B\u0627 \u0625\u0644\u0649 \u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u0645\u062D\u0631\u0631"), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"

package/lib/translated/ar/modules/rce/RCE.js

@@ -59,6 +59,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     textareaClassName,
     rcsProps,
     use_rce_icon_maker,
+    features,
     onFocus,
     onBlur,
     onInit,
@@ -97,6 +98,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
       textareaClassName,
       trayProps: rcsProps,
       use_rce_icon_maker,
+      features,
       editorOptions: Object.assign(editorOptions, {
         selector: `#${textareaId}`,
         height,
@@ -186,6 +188,12 @@ RCE.propTypes = {
   rcsProps: trayPropTypes,
   // enable the custom icon maker feature (temporary until the feature is forced on)
   use_rce_icon_maker: bool,
+  // record of feature statuses from containing page
+  features: objectOf(bool),
+  // configurable default timeout value for flash alerts
+  flashAlertTimeout: number,
+  // user's timezone
+  timezone: string.isRequired,
   // event handlers
   onFocus: func,
   // f(RCEWrapper component)

package/lib/translated/ar/modules/rce/RCEGlobals.js

@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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/>.
+ */
+const isEmpty = obj => Object.keys(obj).length === 0;
+
+class RCEGlobals {
+  constructor() {
+    if (!RCEGlobals.instance) {
+      RCEGlobals.instance = this;
+      this._data = {
+        features: {},
+        config: {}
+      };
+    }
+
+    return RCEGlobals.instance;
+  }
+
+  getFeatures() {
+    return this._data.features;
+  }
+
+  setFeatures(features) {
+    // Set only once
+    if (isEmpty(this._data.features)) {
+      this._data.features = { ...features
+      };
+      Object.freeze(this._data.features);
+    }
+  }
+
+  getConfig() {
+    return this._data.config;
+  }
+
+  setConfig(config) {
+    // Set only once
+    if (isEmpty(this._data.config)) {
+      this._data.config = { ...config
+      };
+      Object.freeze(this._data.config);
+    }
+  }
+
+}
+
+const instance = new RCEGlobals();
+export default instance;

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

@@ -37,6 +37,7 @@ import editorLanguage from './editorLanguage';
 import normalizeLocale from './normalizeLocale';
 import { sanitizePlugins } from './sanitizePlugins';
 import { getCanvasUrl } from './getCanvasUrl';
+import RCEGlobals from './RCEGlobals';
 import indicate from '../common/indicate';
 import bridge from '../bridge';
 import CanvasContentTray, { trayPropTypes } from './plugins/shared/CanvasContentTray';
@@ -3658,7 +3659,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       // 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.top.document.body.click(), true);
+      editor.on('click', () => window.document.body.click(), true);
       editor.on('Cut Paste Change input Undo Redo', debounce(this.handleInputChange, 1000));
       this.announceContextToolbars(editor);
 
@@ -3681,27 +3682,24 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     };
 
     this._toggleFullscreen = event => {
+      const isTinyFullscreen = event.state;
+      const fullscreenState = {
+        isTinyFullscreen
+      };
       const header = document.getElementById('header');
 
       if (header) {
-        if (event.state) {
-          this.setState({
-            fullscreenState: {
-              headerDisp: header.style.display,
-              isTinyFullscreen: true
-            }
-          });
+        if (isTinyFullscreen) {
+          fullscreenState.headerDisp = header.style.display;
           header.style.display = 'none';
         } else {
           header.style.display = this.state.fullscreenState.headerDisp;
-          this.setState({
-            fullscreenState: {
-              isTinyFullscreen: false
-            }
-          });
         }
-      } // if we're leaving fullscreen, remove event listeners on the fullscreen element
+      }
 
+      this.setState({
+        fullscreenState
+      }); // if we're leaving fullscreen, remove event listeners on the fullscreen element
 
       if (!document[FS_ELEMENT] && this.state.fullscreenElem) {
         this.state.fullscreenElem.removeEventListener('fullscreenchange', this._toggleFullscreen);
@@ -3995,6 +3993,11 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       alertIdValue = 0;
     };
 
+    // 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); // interface consistent with editorBox
@@ -4051,6 +4054,27 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     });
   }
 
+  getRequiredFeatureStatuses() {
+    const {
+      new_equation_editor,
+      new_math_equation_handling,
+      rce_ux_improvements
+    } = this.props.features;
+    return {
+      new_equation_editor,
+      new_math_equation_handling,
+      rce_ux_improvements
+    };
+  }
+
+  getRequiredConfigValues() {
+    return {
+      locale: normalizeLocale(this.props.language),
+      flashAlertTimeout: this.props.flashAlertTimeout,
+      timezone: this.props.timezone
+    };
+  }
+
   getCanvasUrl() {
     if (!this.canvasUrl) this.canvasUrl = getCanvasUrl(this.props.trayProps);
     return this.canvasUrl.then(url => {
@@ -5086,7 +5110,10 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   instRecordDisabled: PropTypes.bool,
   highContrastCSS: PropTypes.arrayOf(PropTypes.string),
   maxInitRenderedRCEs: PropTypes.number,
-  use_rce_icon_maker: PropTypes.bool
+  use_rce_icon_maker: PropTypes.bool,
+  features: PropTypes.objectOf(PropTypes.bool),
+  flashAlertTimeout: PropTypes.number,
+  timezone: PropTypes.string.isRequired
 }, _class2.defaultProps = {
   trayProps: null,
   languages: [{

package/lib/translated/ar/modules/rce/RestoreAutoSaveModal.js

@@ -41,9 +41,10 @@ export default function RestoreAutoSaveModal(props) {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     offset: "medium",
-    variant: "icon",
-    onClick: props.onNo
-  }, "\u0625\u063A\u0644\u0627\u0642"), /*#__PURE__*/React.createElement(Heading, null, "\u062A\u0645 \u0627\u0644\u0639\u062B\u0648\u0631 \u0639\u0644\u0649 \u0645\u062D\u062A\u0648\u0649 \u0645\u062D\u0641\u0648\u0638 \u062A\u0644\u0642\u0627\u0626\u064A\u0627\u064B")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(View, {
+    color: "primary",
+    onClick: props.onNo,
+    screenReaderLabel: "\u0625\u063A\u0644\u0627\u0642"
+  }), /*#__PURE__*/React.createElement(Heading, null, "\u062A\u0645 \u0627\u0644\u0639\u062B\u0648\u0631 \u0639\u0644\u0649 \u0645\u062D\u062A\u0648\u0649 \u0645\u062D\u0641\u0648\u0638 \u062A\u0644\u0642\u0627\u0626\u064A\u0627\u064B")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(View, {
     as: "div",
     margin: "small"
   }, /*#__PURE__*/React.createElement(Alert, {

package/lib/translated/ar/modules/rce/__tests__/RCE.test.js

@@ -19,6 +19,14 @@ import React, { createRef } from 'react';
 import { render, waitFor } from '@testing-library/react';
 import RCE from '../RCE';
 import bridge from '../../bridge';
+const requiredProps = {
+  features: {
+    new_equation_editor: true,
+    new_math_equation_handling: true,
+    rce_ux_improvements: true
+  },
+  timezone: 'America/Denver'
+};
 describe('RCE', () => {
   let target;
   beforeEach(() => {
@@ -33,18 +41,18 @@ describe('RCE', () => {
     bridge.focusEditor(null);
   });
   it('bridges newly rendered editors', async () => {
-    render( /*#__PURE__*/React.createElement(RCE, {
+    render( /*#__PURE__*/React.createElement(RCE, Object.assign({
       textareaId: "textarea3"
-    }), target);
+    }, requiredProps)), target);
     await waitFor(() => expect(bridge.activeEditor().constructor.displayName).toEqual('RCEWrapper'));
   });
   it('supports getCode() and setCode() on its ref', async () => {
     const rceRef = /*#__PURE__*/createRef(null);
-    render( /*#__PURE__*/React.createElement(RCE, {
+    render( /*#__PURE__*/React.createElement(RCE, Object.assign({
       ref: rceRef,
       textareaId: "textarea3",
       defaultContent: "Hello RCE!"
-    }), target);
+    }, requiredProps)), target);
     await waitFor(() => expect(rceRef.current).not.toBeNull());
     expect(rceRef.current.getCode()).toEqual('Hello RCE!');
     rceRef.current.setCode('How sweet.');