@instructure/canvas-rce 7.0.0 → 7.2.0

package/es/enhance-user-content/youtube_overlay.js

@@ -0,0 +1,87 @@
+import _pt from "prop-types";
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Text } from '@instructure/ui-text';
+import { View } from '@instructure/ui-view';
+import { Flex } from '@instructure/ui-flex';
+import { CondensedButton } from '@instructure/ui-buttons';
+import { IconPlayLine } from '@instructure/ui-icons';
+import formatMessage from '../format-message';
+const YoutubeEmbedOverlay = ({
+  iframeElement,
+  height,
+  width
+}) => {
+  const [showOverlay, setShowOverlay] = useState(true);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (containerRef.current && iframeElement) {
+      if (width) {
+        containerRef.current.style.width = `${width}px`;
+      }
+      if (height) {
+        containerRef.current.style.height = `${height}px`;
+      }
+      containerRef.current.appendChild(iframeElement);
+    }
+  }, [height, iframeElement, width]);
+  const handleCloseOverlay = useCallback(() => {
+    setShowOverlay(false);
+  }, [setShowOverlay]);
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    position: "relative",
+    display: "inline-block"
+  }, showOverlay && /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    background: "primary",
+    themeOverride: {
+      backgroundPrimary: 'rgba(10, 71, 91, 0.65)'
+    },
+    overflowY: "hidden"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "center",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldShrink: true,
+    shouldGrow: true,
+    textAlign: "center"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "center",
+    margin: "0 0 small"
+  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
+    color: "secondary-inverse",
+    weight: "bold"
+  }, formatMessage('This video may display YouTube ads.')))), /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "center",
+    margin: "0 0 medium"
+  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CondensedButton, {
+    "data-test-id": "youtube-migration-close-overlay",
+    color: "primary-inverse",
+    onClick: handleCloseOverlay
+  }, /*#__PURE__*/React.createElement(IconPlayLine, null), "\xA0", formatMessage('Continue to YouTube content'))))))), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }));
+};
+YoutubeEmbedOverlay.propTypes = {
+  height: _pt.number.isRequired,
+  width: _pt.number.isRequired
+};
+export const createOverlay = iframes => {
+  iframes.forEach(iframe => {
+    const iframeElement = iframe;
+    const height = iframeElement.offsetHeight;
+    const width = iframeElement.offsetWidth;
+    const container = document.createElement('div');
+    container.setAttribute('data-test-id', 'youtube-migration-container');
+    iframe.replaceWith(container);
+    createRoot(container).render(/*#__PURE__*/React.createElement(YoutubeEmbedOverlay, {
+      iframeElement: iframeElement,
+      height: height,
+      width: width
+    }));
+  });
+};

package/es/format-message.d.js

@@ -0,0 +1 @@
+export {};

package/es/format-message.js

@@ -17,7 +17,12 @@
  */
 
 import formatMessage from 'format-message';
+import generateId from 'format-message-generate-id/underscored_crc32';
 const ns = formatMessage.namespace();
+ns.setup({
+  generateId,
+  missingTranslation: 'ignore'
+});
 ns.addLocale = translations => {
   ns.setup({
     translations: {

package/es/index.d.ts

@@ -16,6 +16,7 @@ export declare const defaultConfiguration: {
     menubar: undefined;
     menu: undefined;
     toolbar: undefined;
+    color_map: string[];
     plugins: undefined;
     branding: boolean;
     browser_spellcheck: boolean;
@@ -25,7 +26,6 @@ export declare const defaultConfiguration: {
     language_load: boolean;
     language_url: string;
     toolbar_mode: string;
-    toolbar_ticky: boolean;
     mobile: {
         theme: string;
     };

package/es/rce/RCE.d.ts

@@ -16,7 +16,6 @@ export interface RCEPropTypes {
     autosave?: {
         enabled?: boolean;
         maxAge?: number;
-        interval?: number;
     };
     /**
      * the protocol://domain:port for this RCE's canvas

package/es/rce/RCE.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import formatMessage from '../format-message';
 import RCEWrapper from './RCEWrapper';
 import { editorLanguage } from './editorLanguage';
@@ -69,15 +69,10 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
       locale: normalizeLocale(props.language)
     });
   });
-  const [translations, setTranslations] = useState(() => {
+  const [isTranslationLoading, setIsTranslationLoading] = useState(true);
+  useEffect(() => {
     const locale = normalizeLocale(props.language);
-    const p = getTranslations(locale).then(() => {
-      setTranslations(true);
-    }).catch(err => {
-      console.error('Failed loading the language file for', locale, '\n Cause:', err);
-      setTranslations(false);
-    });
-    return p;
+    getTranslations(locale).catch(err => console.error('Failed loading the language file for', locale, '\n Cause:', err)).finally(() => setIsTranslationLoading(false));
   });
 
   // some properties are only used on initialization
@@ -111,7 +106,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     wrapInitCb(mirroredAttrs || {}, iProps.editorOptions);
     return iProps;
   });
-  if (typeof translations !== 'boolean') {
+  if (isTranslationLoading) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage('Loading...'));
   } else {
     return /*#__PURE__*/React.createElement(RCEWrapper, Object.assign({

package/es/rce/RCEVariants.d.ts

@@ -7,11 +7,16 @@ interface ToolbarGroupSetting {
     name: string;
     items: string[];
 }
-type StatusBarFeature = 'ai_tools' | 'keyboard_shortcuts' | 'a11y_checker' | 'word_count' | 'html_view' | 'fullscreen' | 'resize_handle';
-export declare const RCEVariantValues: readonly ["full", "lite", "text-only", "text-block"];
+type StatusBarFeature = 'ai_tools' | 'keyboard_shortcuts' | 'a11y_checker' | 'word_count' | 'html_view' | 'fullscreen' | 'resize_handle' | 'a11y_resize_handlers';
+export declare const RCEVariantValues: readonly ["full", "lite", "text-only", "text-block", "block-content-editor"];
 export type RCEVariant = (typeof RCEVariantValues)[number];
+export type StatusBarOptions = {
+    aiTextTools?: boolean;
+    isDesktop?: boolean;
+    a11yResizers?: boolean;
+};
 export declare function getMenubarForVariant(variant: RCEVariant): MenuBarSpec;
 export declare function getMenuForVariant(variant: RCEVariant): MenusSpec;
 export declare function getToolbarForVariant(variant: RCEVariant, ltiToolFavorites?: string[]): ToolbarGroupSetting[];
-export declare function getStatusBarFeaturesForVariant(variant: RCEVariant, aiTextTools?: boolean, isDesktop?: boolean): StatusBarFeature[];
+export declare function getStatusBarFeaturesForVariant(variant: RCEVariant, options?: StatusBarOptions): StatusBarFeature[];
 export {};

package/es/rce/RCEVariants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 - present Instructure, Inc.
+ * Copyright (C) 2025 - present Instructure, Inc.
  *
  * This file is part of Canvas.
  *
@@ -21,7 +21,7 @@ import formatMessage from '../format-message';
 
 // copied from node_modules/tinymce/tinymce.d.ts:1187
 
-export const RCEVariantValues = ['full', 'lite', 'text-only', 'text-block'];
+export const RCEVariantValues = ['full', 'lite', 'text-only', 'text-block', 'block-content-editor'];
 export function getMenubarForVariant(variant) {
   if (variant === 'full') {
     return 'edit view insert format tools table';
@@ -101,6 +101,24 @@ export function getToolbarForVariant(variant, ltiToolFavorites = []) {
       items: ['removeformat', 'instructure_equation']
     }];
   }
+  if (variant === 'block-content-editor') {
+    return [{
+      name: formatMessage('Styles'),
+      items: ['fontsizeselect', 'formatselect']
+    }, {
+      name: formatMessage('Formatting'),
+      items: ['bold', 'italic', 'underline', 'instructure_color', 'inst_subscript', 'inst_superscript']
+    }, {
+      name: formatMessage('Content'),
+      items: ['instructure_links', 'instructure_documents']
+    }, {
+      name: formatMessage('Alignment and Lists'),
+      items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
+    }, {
+      name: formatMessage('Miscellaneous'),
+      items: ['removeformat', 'instructure_equation']
+    }];
+  }
   return [{
     name: formatMessage('Styles'),
     items: ['fontsizeselect', 'formatselect']
@@ -124,13 +142,21 @@ export function getToolbarForVariant(variant, ltiToolFavorites = []) {
 const DESKTOP_FEATURES = ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
 const MOBILE_FEATURES = ['a11y_checker', 'word_count'];
 const EXTENDED_FEATURES = ['html_view', 'fullscreen', 'resize_handle'];
-export function getStatusBarFeaturesForVariant(variant, aiTextTools = false, isDesktop = true) {
+const A11Y_RESIZERS = ['a11y_resize_handlers'];
+export function getStatusBarFeaturesForVariant(variant, options = {
+  aiTextTools: false,
+  isDesktop: true,
+  a11yResizers: false
+}) {
   if (variant === 'text-block') {
     return [];
   }
-  const platformFeatures = isDesktop ? DESKTOP_FEATURES : MOBILE_FEATURES;
+  if (variant === 'block-content-editor') {
+    return ['keyboard_shortcuts', 'word_count'];
+  }
+  const platformFeatures = options.isDesktop ? DESKTOP_FEATURES : MOBILE_FEATURES;
   if (variant === 'lite' || variant === 'text-only') {
     return platformFeatures;
   }
-  return [...platformFeatures, ...EXTENDED_FEATURES, ...(aiTextTools ? ['ai_tools'] : [])];
+  return [...platformFeatures, ...EXTENDED_FEATURES, ...(options.a11yResizers ? A11Y_RESIZERS : []), ...(options.aiTextTools ? ['ai_tools'] : [])];
 }

package/es/rce/RCEWrapper.d.ts

@@ -13,7 +13,6 @@ interface RCEWrapperProps {
     autosave?: {
         enabled?: boolean;
         maxAge?: number;
-        interval?: number;
     };
     canvasOrigin: string;
     defaultContent?: string;
@@ -75,6 +74,7 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
     _showOnFocusButton?: HTMLElement;
     _statusBarId: string;
     _textareaEl?: HTMLTextAreaElement;
+    _effectiveContainingContext: RCETrayProps['containingContext'];
     AIToolsTray?: ReactNode;
     editor: TinyMCEEditor | null;
     initialContent?: string;
@@ -191,7 +191,7 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
             maxMruTools: import("prop-types").Requireable<number>;
         }>>;
         ai_text_tools: import("prop-types").Requireable<boolean>;
-        variant: import("prop-types").Requireable<"full" | "lite" | "text-only" | "text-block">;
+        variant: import("prop-types").Requireable<"full" | "lite" | "text-only" | "text-block" | "block-content-editor">;
     };
     static defaultProps: {
         trayProps: null;
@@ -377,13 +377,13 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
         auto_focus: boolean;
         body_class: string;
         directionality: string;
+        color_map: string[];
         branding: boolean;
         browser_spellcheck: boolean;
         convert_urls: boolean;
         font_formats: string;
         language_load: boolean;
         language_url: string;
-        toolbar_ticky: boolean;
         mobile: {
             theme: string;
         };

package/es/rce/RCEWrapper.js

@@ -65,6 +65,7 @@ import { getMenubarForVariant, getMenuForVariant, getToolbarForVariant, getStatu
 import { focusFirstMenuButton, focusToolbar, isElementWithinTable, mergeMenu, mergeMenuItems, mergePlugins, mergeToolbar, parsePluginsToExclude, patchAutosavedContent } from './RCEWrapper.utils';
 import { externalToolsForToolbar } from './plugins/instructure_rce_external_tools/util/externalToolsForToolbar';
 import { initScreenreaderOnFormat } from './screenreaderOnFormat';
+import { normalizeContainingContext } from '../util/contextHelper';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
@@ -142,6 +143,7 @@ class RCEWrapper extends React.Component {
     this._showOnFocusButton = void 0;
     this._statusBarId = void 0;
     this._textareaEl = void 0;
+    this._effectiveContainingContext = void 0;
     this.AIToolsTray = void 0;
     this.editor = void 0;
     this.initialContent = void 0;
@@ -209,6 +211,7 @@ class RCEWrapper extends React.Component {
     this.toggleFullscreen = () => {
       this.handleClickFullscreen();
     };
+    // @ts-expect-error
     this._onFullscreenChange = event => {
       if (document[FS_ELEMENT]) {
         // @ts-expect-error
@@ -239,6 +242,7 @@ class RCEWrapper extends React.Component {
     this.handleFocusRCE = () => {
       this.handleFocus();
     };
+    // @ts-expect-error
     this.handleBlurRCE = event => {
       if (event.relatedTarget === null) {
         // focus might be moving to tinymce
@@ -373,6 +377,12 @@ class RCEWrapper extends React.Component {
         });
       }
     };
+    /**
+     * Fix keyboard navigation in the expanded toolbar
+     *
+     * NOTE: This is a workaround for https://github.com/tinymce/tinymce/issues/8618
+     *       and should be removed once that issue is resolved and the tinymce dependency is updated to include it.
+     */
     this.fixToolbarKeyboardNavigation = () => {
       // The keyboard navigation config in tinymce for the expanded toolbar is incorrectly configured,
       // and stops at [data-alloy-tabstop] elements.
@@ -382,6 +392,19 @@ class RCEWrapper extends React.Component {
       // in https://github.com/tinymce/tinymce/blob/develop/modules/alloy/src/main/ts/ephox/alloy/ui/schema/SplitSlidingToolbarSchema.ts
       this._elementRef.current?.querySelectorAll('.tox-toolbar-overlord button[data-alloy-tabstop]').forEach(it => it.removeAttribute('data-alloy-tabstop'));
     };
+    /**
+     * Sets up selection saving and restoration logic.
+     *
+     * There are certain actions a user can take when the RCE is not focused that clear the selection inside the
+     * editor, such as invoking the Find feature of the browser. If the user then tries to insert content without
+     * going back to the editor, the content would be inserted at the top of the RCE, instead of where their cursor
+     * was.
+     *
+     * This method adds logic that saves and restores the selection to work around the issue.
+     *
+     * @private
+     */
+    // @ts-expect-error
     this._setupSelectionSaving = editor => {
       // @ts-expect-error
       let savedSelection = null;
@@ -440,6 +463,7 @@ class RCEWrapper extends React.Component {
       });
     };
     this.announcing = 0;
+    /* ********** autosave support *************** */
     this.initAutoSave = editor => {
       var _this$props$userCache;
       this.storage = new EncryptedStorage((_this$props$userCache = this.props.userCacheKey) !== null && _this$props$userCache !== void 0 ? _this$props$userCache : '');
@@ -474,6 +498,7 @@ class RCEWrapper extends React.Component {
         }
       }
     };
+    // remove any autosaved value that's too old
     this.cleanupAutoSave = (deleteAll = false) => {
       if (this.storage) {
         const expiry = deleteAll ? Date.now() : Date.now() - (this.props.autosave?.maxAge || 0);
@@ -489,6 +514,7 @@ class RCEWrapper extends React.Component {
         }
       }
     };
+    // @ts-expect-error
     this.restoreAutoSave = ans => {
       this.setState({
         confirmAutoSave: false
@@ -503,6 +529,7 @@ class RCEWrapper extends React.Component {
       // let the content be restored
       debounce(this.checkAccessibility, 1000)();
     };
+    // @ts-expect-error
     this.doAutoSave = (e, retry = false) => {
       if (this.storage) {
         const editor = this.mceInstance();
@@ -527,6 +554,7 @@ class RCEWrapper extends React.Component {
         }
       }
     };
+    /* *********** end autosave support *************** */
     this.onWordCountUpdate = e => {
       if (!this.editor) return;
       const shouldIgnore = countShouldIgnore(this.editor, 'body', 'words');
@@ -539,6 +567,7 @@ class RCEWrapper extends React.Component {
         } else return null;
       });
     };
+    // @ts-expect-error
     this.onNodeChange = e => {
       // This is basically copied out of the tinymce silver theme code for the status bar
       const path = e.parents.filter(p => p.nodeName !== 'BR' && !p.getAttribute('data-mce-bogus') && p.getAttribute('data-mce-type') !== 'bookmark')
@@ -574,7 +603,9 @@ class RCEWrapper extends React.Component {
           height: newHeight
         });
         // play nice and send the same event that the silver theme would send
-        editor.fire('ResizeEditor');
+        editor.fire('ResizeEditor', {
+          deltaY: coordinates.deltaY
+        });
       }
     };
     this.onA11yChecker = triggerElementId => {
@@ -715,6 +746,9 @@ class RCEWrapper extends React.Component {
         };
       });
     };
+    /**
+     * Used for reseting the value during tests
+     */
     this.resetAlertId = () => {
       if (this.state.messages.length > 0) {
         throw new Error('There are messages currently, you cannot reset when they are non-zero');
@@ -806,6 +840,7 @@ class RCEWrapper extends React.Component {
       this._handleFullscreenResize();
     });
     this.AIToolsTray = undefined;
+    this._effectiveContainingContext = normalizeContainingContext(this.props.trayProps?.containingContext);
   }
 
   // when the RCE is put into fullscreen we need to move the div
@@ -1095,8 +1130,7 @@ class RCEWrapper extends React.Component {
     if (this.editor) {
       return this.editor;
     }
-    const editors = this.props.tinymce.editors || [];
-    return editors.filter(ed => ed.id === this.props.textareaId)[0];
+    return this.props.tinymce.get(this.props.textareaId);
   }
 
   // @ts-expect-error
@@ -1171,9 +1205,6 @@ class RCEWrapper extends React.Component {
       document[FS_EXIT]();
     }
   }
-
-  // @ts-expect-error
-
   _getStatusBarHeight() {
     // the height prop is the height of the editor and does not include
     // the status bar. we'll need this later.
@@ -1319,9 +1350,6 @@ class RCEWrapper extends React.Component {
       }, ASYNC_FOCUS_TIMEOUT);
     }
   }
-
-  // @ts-expect-error
-
   // @ts-expect-error
   call(methodName, ...args) {
     // since exists? has a ? and cant be a regular function just return true
@@ -1332,28 +1360,6 @@ class RCEWrapper extends React.Component {
     // @ts-expect-error
     return this[methodName](...args);
   }
-
-  /**
-   * Fix keyboard navigation in the expanded toolbar
-   *
-   * NOTE: This is a workaround for https://github.com/tinymce/tinymce/issues/8618
-   *       and should be removed once that issue is resolved and the tinymce dependency is updated to include it.
-   */
-
-  /**
-   * Sets up selection saving and restoration logic.
-   *
-   * There are certain actions a user can take when the RCE is not focused that clear the selection inside the
-   * editor, such as invoking the Find feature of the browser. If the user then tries to insert content without
-   * going back to the editor, the content would be inserted at the top of the RCE, instead of where their cursor
-   * was.
-   *
-   * This method adds logic that saves and restores the selection to work around the issue.
-   *
-   * @private
-   */
-  // @ts-expect-error
-
   announceContextToolbars(editor) {
     editor.on('NodeChange', () => {
       const node = editor.selection.getNode();
@@ -1392,14 +1398,21 @@ class RCEWrapper extends React.Component {
         this.announcing = 0;
       }
     });
+    editor.on('ResizeEditor', ({
+      deltaY
+    }) => {
+      if (!deltaY) return;
+      if (deltaY < 0) {
+        this.setState({
+          announcement: formatMessage('The height of Rich Content Area is decreased.')
+        });
+      } else {
+        this.setState({
+          announcement: formatMessage('The height of Rich Content Area is increased.')
+        });
+      }
+    });
   }
-
-  /* ********** autosave support *************** */
-
-  // remove any autosaved value that's too old
-
-  // @ts-expect-error
-
   getAutoSaved(key) {
     let autosaved = null;
     try {
@@ -1424,17 +1437,9 @@ class RCEWrapper extends React.Component {
     return this.props.autosave?.enabled && editorVisible && document.querySelectorAll('.rce-wrapper').length === 1 && storageAvailable();
   }
   get autoSaveKey() {
-    // @ts-expect-error
-    const userId = this.props.trayProps?.containingContext.userId;
+    const userId = this._effectiveContainingContext?.userId || '-';
     return `rceautosave:${userId}${window.location.href}:${this.props.textareaId}`;
   }
-
-  // @ts-expect-error
-
-  /* *********** end autosave support *************** */
-
-  // @ts-expect-error
-
   componentWillUnmount() {
     if (this.state.shouldShowEditor) {
       window.clearTimeout(this.blurTimer);
@@ -1655,11 +1660,6 @@ class RCEWrapper extends React.Component {
         this.mceInstance().hide();
     }
   }
-
-  /**
-   * Used for reseting the value during tests
-   */
-
   renderHtmlEditor() {
     // the div keeps the editor from collapsing while the code editor is downloaded
     return /*#__PURE__*/React.createElement(Suspense, {
@@ -1708,7 +1708,12 @@ class RCEWrapper extends React.Component {
         }
       });
     }
-    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, this.props.ai_text_tools, tinymce.Env.deviceType.isDesktop());
+    const statusBarOptions = {
+      aiTextTools: this.props.ai_text_tools,
+      isDesktop: tinymce.Env.deviceType.isDesktop(),
+      a11yResizers: !!this.props.features?.rce_a11y_resize
+    };
+    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, statusBarOptions);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, this.style.css), /*#__PURE__*/React.createElement(StoreProvider, {
       jwt: this.props.trayProps?.jwt,
       refreshToken: this.props.trayProps?.refreshToken,
@@ -1796,7 +1801,7 @@ class RCEWrapper extends React.Component {
         disabledPlugins: this.pluginsToExclude,
         features: statusBarFeatures,
         onAI: this.handleAIClick
-      }), this.props.trayProps?.containingContext && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
+      }), this._effectiveContainingContext && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
         mountNode: instuiPopupMountNodeFn,
         key: this.id,
         canvasOrigin: this.getCanvasUrl(),
@@ -1805,7 +1810,9 @@ class RCEWrapper extends React.Component {
         onTrayClosing: this.handleContentTrayClosing,
         use_rce_icon_maker: this.props.use_rce_icon_maker
       }, trayProps, {
+        containingContext: this._effectiveContainingContext
         // @ts-expect-error
+        ,
         storeProps: storeProps
       })), /*#__PURE__*/React.createElement(KeyboardShortcutModal, {
         onExited: this.KBShortcutModalExited,
@@ -1834,7 +1841,10 @@ class RCEWrapper extends React.Component {
         open: this.state.confirmAutoSave,
         onNo: () => this.restoreAutoSave(false),
         onYes: () => this.restoreAutoSave(true)
-      })) : null, /*#__PURE__*/React.createElement(Alert, {
+      })) : null, this.state.announcement &&
+      /*#__PURE__*/
+      // @ts-expect-error
+      React.createElement(Alert, {
         screenReaderOnly: true,
         liveRegion: this.props.liveRegion
       }, this.state.announcement));
@@ -1845,8 +1855,7 @@ RCEWrapper.propTypes = {
   ai_text_tools: _pt.bool,
   autosave: _pt.shape({
     enabled: _pt.bool,
-    maxAge: _pt.number,
-    interval: _pt.number
+    maxAge: _pt.number
   }),
   canvasOrigin: _pt.string,
   defaultContent: _pt.string,

package/es/rce/RCEWrapperProps.d.ts

@@ -170,6 +170,6 @@ export declare const rceWrapperPropTypes: {
         maxMruTools: PropTypes.Requireable<number>;
     }>>;
     ai_text_tools: PropTypes.Requireable<boolean>;
-    variant: PropTypes.Requireable<"full" | "lite" | "text-only" | "text-block">;
+    variant: PropTypes.Requireable<"full" | "lite" | "text-only" | "text-block" | "block-content-editor">;
 };
 export type RCEWrapperProps = PropTypes.InferProps<typeof rceWrapperPropTypes>;

package/es/rce/ShowOnFocusButton/index.js

@@ -26,8 +26,10 @@ import React, { Component } from 'react';
 import { func, node, oneOfType, string } from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
 const hideStyle = {
-  position: 'absolute',
-  left: '-9999px'
+  opacity: 0,
+  width: 0,
+  height: 0,
+  overflow: 'hidden'
 };
 export default class ShowOnFocusButton extends Component {
   constructor(...args) {