@instructure/canvas-rce 7.2.0 → 7.3.1

package/CHANGELOG.md

@@ -5,6 +5,47 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 7.3.1 - 2025-11-11
+
+### Fixed
+- WordCountModal not closing with keyboard navigation
+- Accessibility issue for RCE's file preview
+- Assessment questions preview path
+- Formatting in Biome configuration for RCE package
+
+### Changed
+- Updated TinyMCE shortcut link text
+
+### Localization
+- Updated RCE translations
+
+## 7.3.0 - 2025-10-16
+
+### Added
+- Block Content Editor (BCE) support and improvements
+- Media Embed by URL functionality
+- A11y checker for block editor
+- User choices to improved Studio toolbar options
+- Feature flag for upcoming Studio embed improvements
+
+### Changed
+- Upgrade to InstUI 10.26.2
+- Unify image upload buttons
+- Adjust the text block footer
+- Remove documents from RCE's toolbar for BCE
+
+### Fixed
+- Prevent setState from TinyMCE events after unmount
+- Image upload modal for BCE
+- Revert Alert conditional rendering
+- Revert axios version upgrade
+
+### Removed
+- Remove crocodoc from canvas
+
+### Localization
+- Updated RCE translations for multiple locales
+
 ## 7.2.0 - 2025-08-21
 
 ### Added

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

@@ -106,20 +106,10 @@ export function loadDocPreview($container, options) {
       });
     }
   }
-  if (opts.crocodoc_session_url) {
-    const sanitizedUrl = sanitizeUrl(opts.crocodoc_session_url);
-    const iframe = document.createElement('iframe');
-    iframe.setAttribute('src', sanitizedUrl);
-    iframe.setAttribute('width', opts.width);
-    iframe.setAttribute('height', opts.height);
-    iframe.setAttribute('allowfullscreen', '1');
-    iframe.id = opts.id;
-    $container.appendChild(iframe);
-    iframe.load(() => {
-      tellAppIViewedThisInline('crocodoc');
-      if (typeof opts.ready === 'function') opts.ready();
-    });
-  } else if (opts.canvadoc_session_url) {
+  const iframeAriaLabel = opts.attachment_name ? formatMessage('File preview for {fileName}', {
+    fileName: opts.attachment_name
+  }) : formatMessage('File preview');
+  if (opts.canvadoc_session_url) {
     const canvadocWrapper = document.createElement('div');
     canvadocWrapper.setAttribute('style', 'overflow: auto; resize: vertical; border: 1px solid transparent; height: 100%;');
     $container.appendChild(canvadocWrapper);
@@ -130,6 +120,7 @@ export function loadDocPreview($container, options) {
       tellAppIViewedThisInline('canvadocs');
       if (typeof opts.ready === 'function') opts.ready();
     });
+    iframe.setAttribute('aria-label', iframeAriaLabel);
     iframe.setAttribute('src', sanitizedUrl);
     iframe.setAttribute('width', opts.width);
     iframe.setAttribute('allowfullscreen', '1');
@@ -155,6 +146,7 @@ export function loadDocPreview($container, options) {
         iframe.setAttribute('src', googleDocPreviewUrl);
         iframe.setAttribute('height', opts.height);
         iframe.setAttribute('width', '100%');
+        iframe.setAttribute('aria-label', iframeAriaLabel);
         $container.appendChild(iframe);
       }
     };

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

@@ -269,7 +269,7 @@ export function enhanceUserContent(container = document, opts = {}) {
 
     // Don't attempt to enhance links with no href
     if (!href) return;
-    const matchesCanvasFile = href.pathname.match(/(?:\/(courses|groups|users)\/\d+)?\/files\/([\d~]+)(?=[!*'();:@&=+$,/?#\[\]]|$)/);
+    const matchesCanvasFile = href.pathname.match(/(?:\/(courses|groups|users|assessment_questions)\/\d+)?\/files\/([\d~]+)(?=[!*'();:@&=+$,/?#\[\]]|$)/);
     if (!matchesCanvasFile) {
       // a bug in the new RCE added instructure_file_link class name to all links
       // only proceed if this is a canvas file link

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

@@ -157,6 +157,7 @@ export function showFilePreviewInline(event, canvasOrigin, disableGooglePreviews
         mimeType: attachment.content_type,
         public_url: attachment.public_url,
         attachment_preview_processing: attachment.workflow_state === 'pending_upload' || attachment.workflow_state === 'processing',
+        attachment_name: attachment.display_name,
         disableGooglePreviews
       });
       const $minimizeLink = document.createElement('a');

package/es/index.d.ts

@@ -57,3 +57,4 @@ export declare function getRCSAuthenticationHeaders(jwt: string): {
     Authorization: string;
 };
 export declare function getRCSOriginFromHost(host: string): any;
+export { default as checkNode } from './rce/plugins/tinymce-a11y-checker/node-checker';

package/es/index.js

@@ -50,4 +50,5 @@ export function getRCSAuthenticationHeaders(jwt) {
 }
 export function getRCSOriginFromHost(host) {
   return originFromHost(host);
-}
+}
+export { default as checkNode } from './rce/plugins/tinymce-a11y-checker/node-checker';

package/es/rce/AlertMessageArea.js

@@ -29,9 +29,7 @@ export default function AlertMessageArea({
   return /*#__PURE__*/React.createElement("div", null, messages.map(message => /*#__PURE__*/React.createElement(Alert, {
     key: message.id,
     variant: message.variant || 'info',
-    timeout: 10000
-    // @ts-expect-error
-    ,
+    timeout: 10000,
     liveRegion: liveRegion,
     onDismiss: () => afterDismiss(message.id)
   }, message.text)));

package/es/rce/KeyboardShortcutModal.js

@@ -79,7 +79,7 @@ export default function KeyboardShortcutModal(props) {
   }, formatMessage('Other editor shortcuts may be found at'), ' ', /*#__PURE__*/React.createElement("a", {
     href: "https://www.tiny.cloud/docs/advanced/keyboard-shortcuts/",
     target: "rcekbshortcut"
-  }, "https://www.tiny.cloud/docs/advanced/keyboard-shortcuts/")))));
+  }, "TinyMCE Keyboard Shortcuts")))));
 }
 KeyboardShortcutModal.propTypes = {
   open: bool.isRequired,

package/es/rce/RCEGlobals.d.ts

@@ -1,11 +1,13 @@
 export default instance;
 export type Features = {
     file_verifiers_for_quiz_links: boolean;
+    rce_studio_embed_improvements: boolean;
 };
 declare const instance: RCEGlobals;
 /**
  * @typedef {Object} Features
  * @property {boolean} file_verifiers_for_quiz_links
+ * @property {boolean} rce_studio_embed_improvements
  */
 declare class RCEGlobals {
     _data: {

package/es/rce/RCEGlobals.js

@@ -21,6 +21,7 @@ const isEmpty = obj => Object.keys(obj).length === 0;
 /**
  * @typedef {Object} Features
  * @property {boolean} file_verifiers_for_quiz_links
+ * @property {boolean} rce_studio_embed_improvements
  */
 
 class RCEGlobals {

package/es/rce/RCEVariants.js

@@ -110,13 +110,13 @@ export function getToolbarForVariant(variant, ltiToolFavorites = []) {
       items: ['bold', 'italic', 'underline', 'instructure_color', 'inst_subscript', 'inst_superscript']
     }, {
       name: formatMessage('Content'),
-      items: ['instructure_links', 'instructure_documents']
+      items: ['instructure_links']
     }, {
       name: formatMessage('Alignment and Lists'),
       items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
     }, {
       name: formatMessage('Miscellaneous'),
-      items: ['removeformat', 'instructure_equation']
+      items: ['removeformat', 'instructure_equation', 'instructure_keyboard_shortcuts_header', 'instructure_wordcount_header']
     }];
   }
   return [{
@@ -152,7 +152,7 @@ export function getStatusBarFeaturesForVariant(variant, options = {
     return [];
   }
   if (variant === 'block-content-editor') {
-    return ['keyboard_shortcuts', 'word_count'];
+    return [];
   }
   const platformFeatures = options.isDesktop ? DESKTOP_FEATURES : MOBILE_FEATURES;
   if (variant === 'lite' || variant === 'text-only') {

package/es/rce/RCEWrapper.d.ts

@@ -7,7 +7,7 @@ import EncryptedStorage from '../util/encrypted-storage';
 import { RCEVariant } from './RCEVariants';
 import { mergeMenu, mergeMenuItems, mergePlugins, mergeToolbar, parsePluginsToExclude } from './RCEWrapper.utils';
 import { AlertMessage, EditorOptions, RCETrayProps } from './types';
-export declare function storageAvailable(): boolean | undefined;
+export declare function storageAvailable(): boolean | null;
 interface RCEWrapperProps {
     ai_text_tools?: boolean;
     autosave?: {
@@ -214,6 +214,7 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
         new_math_equation_handling: unknown;
         explicit_latex_typesetting: unknown;
         rce_transform_loaded_content: unknown;
+        rce_studio_embed_improvements: unknown;
         file_verifiers_for_quiz_links: unknown;
         rce_find_replace: unknown;
         consolidated_media_player: unknown;
@@ -315,6 +316,7 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
      */
     _setupSelectionSaving: (editor: any) => void;
     announcing: number;
+    _isMounted: boolean;
     announceContextToolbars(editor: TinyMCEEditor): void;
     initAutoSave: (editor: TinyMCEEditor) => void;
     cleanupAutoSave: (deleteAll?: boolean) => void;

package/es/rce/RCEWrapper.js

@@ -102,7 +102,7 @@ const editorWrappers = new WeakMap();
 // determines if localStorage is available for our use.
 // see https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
 export function storageAvailable() {
-  let storage;
+  let storage = null;
   try {
     storage = window.localStorage;
     const x = '__storage_test__';
@@ -219,7 +219,9 @@ class RCEWrapper extends React.Component {
         window.visualViewport?.addEventListener('resize', this._handleFullscreenResize);
         this._handleFullscreenResize();
         // @ts-expect-error
-        this._focusRegion = FocusRegionManager.activateRegion(document[FS_ELEMENT], {
+        this._focusRegion = FocusRegionManager.activateRegion(
+        // @ts-expect-error
+        document[FS_ELEMENT], {
           shouldContainFocus: true
         });
       } else {
@@ -332,6 +334,31 @@ class RCEWrapper extends React.Component {
         tinyapp.setAttribute('tabIndex', '-1');
       }
 
+      // remove role="aplication" attribute from the iframe body
+      // tinymce adds this when the editor is wrapped in an iframe
+      // which makes RCE input fields inaccessible to screen readers
+      const iframe = tinyapp?.querySelector('iframe');
+      const body = iframe?.contentDocument?.body;
+      if (body) {
+        const observer = new MutationObserver(() => {
+          try {
+            if (body && body.getAttribute('role') === 'application') {
+              body.removeAttribute('role');
+            }
+          } catch (_) {
+            /* pass */
+          }
+        });
+        observer.observe(body, {
+          attributes: true,
+          childList: false,
+          subtree: false
+        });
+        body.setAttribute('data-role-checked', 'true'); // to trigger observer
+
+        setTimeout(() => observer.disconnect(), 10000);
+      }
+
       // Probably should do this in tinymce.scss, but we only want it in new rce
       textarea.style.resize = 'none';
       editor.on('keydown', this.handleKey);
@@ -463,6 +490,7 @@ class RCEWrapper extends React.Component {
       });
     };
     this.announcing = 0;
+    this._isMounted = false;
     /* ********** autosave support *************** */
     this.initAutoSave = editor => {
       var _this$props$userCache;
@@ -867,6 +895,7 @@ class RCEWrapper extends React.Component {
       explicit_latex_typesetting = false,
       rce_transform_loaded_content = false,
       rce_find_replace = false,
+      rce_studio_embed_improvements = false,
       file_verifiers_for_quiz_links = false,
       consolidated_media_player = false
     } = this.props.features;
@@ -874,6 +903,7 @@ class RCEWrapper extends React.Component {
       new_math_equation_handling,
       explicit_latex_typesetting,
       rce_transform_loaded_content,
+      rce_studio_embed_improvements,
       file_verifiers_for_quiz_links,
       rce_find_replace,
       consolidated_media_player
@@ -1323,10 +1353,12 @@ class RCEWrapper extends React.Component {
           // focus is still somewhere w/in me
           return;
         }
-        const activeClass = document.activeElement && document.activeElement.getAttribute('class');
+        const activeClass = document.activeElement?.getAttribute('class');
         if (
         // @ts-expect-error
-        (event.focusedEditor === undefined || event.target.id === event.focusedEditor?.id) && activeClass?.includes('tox-')) {
+        (event.focusedEditor === undefined ||
+        // @ts-expect-error
+        event.target.id === event.focusedEditor?.id) && activeClass?.includes('tox-')) {
           // if a toolbar button has focus, then the user clicks on the "more" button
           // focus jumps to the body, then eventually to the popped up toolbar. This
           // catches that case.
@@ -1362,6 +1394,7 @@ class RCEWrapper extends React.Component {
   }
   announceContextToolbars(editor) {
     editor.on('NodeChange', () => {
+      if (!this._isMounted) return;
       const node = editor.selection.getNode();
       // @ts-expect-error
       if (isImageEmbed(node, editor)) {
@@ -1401,7 +1434,7 @@ class RCEWrapper extends React.Component {
     editor.on('ResizeEditor', ({
       deltaY
     }) => {
-      if (!deltaY) return;
+      if (!this._isMounted || !deltaY) return;
       if (deltaY < 0) {
         this.setState({
           announcement: formatMessage('The height of Rich Content Area is decreased.')
@@ -1441,6 +1474,7 @@ class RCEWrapper extends React.Component {
     return `rceautosave:${userId}${window.location.href}:${this.props.textareaId}`;
   }
   componentWillUnmount() {
+    this._isMounted = false;
     if (this.state.shouldShowEditor) {
       window.clearTimeout(this.blurTimer);
       if (!this._destroyCalled) {
@@ -1539,7 +1573,7 @@ class RCEWrapper extends React.Component {
       // handles all of that complexity. It that ever changes in the
       // future in an upgraded version, we will have to update the
       // logic in those other places as well.
-      plugins: mergePlugins(['autolink', 'media', 'table', 'link', 'directionality', 'lists', 'textpattern', 'hr', 'instructure_color', 'instructure-ui-icons', 'instructure_condensed_buttons', 'instructure_links', 'instructure_html_view', 'instructure_media_embed', 'a11y_checker', 'wordcount', 'instructure_wordcount', 'instructure_studio_media_options', 'instructure_rce_external_tools', ...pastePlugins, ...canvasPlugins],
+      plugins: mergePlugins(['autolink', 'media', 'table', 'link', 'directionality', 'lists', 'textpattern', 'hr', 'instructure_color', 'instructure-ui-icons', 'instructure_condensed_buttons', 'instructure_links', 'instructure_html_view', 'instructure_media_embed', 'a11y_checker', 'wordcount', 'instructure_wordcount', 'instructure_wordcount_header', 'instructure_keyboard_shortcuts_header', 'instructure_studio_media_options', 'instructure_rce_external_tools', ...pastePlugins, ...canvasPlugins],
       // filter out the plugins designated for removal
       // @ts-expect-error
       sanitizePlugins(options.plugins)?.filter(p => p.length > 0 && p[0] !== '-'), this.pluginsToExclude),
@@ -1589,6 +1623,7 @@ class RCEWrapper extends React.Component {
     }
   }
   componentDidMount() {
+    this._isMounted = true;
     if (this.state.shouldShowEditor) {
       this.editorReallyDidMount();
     } else {
@@ -1841,13 +1876,10 @@ class RCEWrapper extends React.Component {
         open: this.state.confirmAutoSave,
         onNo: () => this.restoreAutoSave(false),
         onYes: () => this.restoreAutoSave(true)
-      })) : null, this.state.announcement &&
-      /*#__PURE__*/
-      // @ts-expect-error
-      React.createElement(Alert, {
+      })) : null, /*#__PURE__*/React.createElement(Alert, {
         screenReaderOnly: true,
         liveRegion: this.props.liveRegion
-      }, this.state.announcement));
+      }, this.state.announcement || null));
     }));
   }
 }

package/es/rce/plugins/instructure_keyboard_shortcuts_header/clickCallback.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from 'tinymce';
+export default function (ed: Editor, document: Document): Promise<void>;

package/es/rce/plugins/instructure_keyboard_shortcuts_header/clickCallback.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2024 - 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 ReactDOM from 'react-dom';
+const MODAL_ID = 'canvas-rce-keyboard-shortcuts-container';
+export default function (ed, document) {
+  return import('../../KeyboardShortcutModal').then(({
+    default: KeyboardShortcutModal
+  }) => {
+    let container = document.querySelector(`#${MODAL_ID}`);
+    if (!container) {
+      container = document.createElement('div');
+      container.id = MODAL_ID;
+      document.body.appendChild(container);
+    }
+    const handleDismiss = () => {
+      if (container) {
+        ReactDOM.unmountComponentAtNode(container);
+      }
+      ed.focus();
+    };
+    ReactDOM.render(/*#__PURE__*/React.createElement(KeyboardShortcutModal, {
+      open: true,
+      onClose: handleDismiss,
+      onDismiss: handleDismiss,
+      onExited: handleDismiss
+    }), container);
+  });
+}

package/es/rce/plugins/instructure_keyboard_shortcuts_header/plugin.d.ts

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

package/es/rce/plugins/instructure_keyboard_shortcuts_header/plugin.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2024 - 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 formatMessage from '../../../format-message';
+// @ts-expect-error
+import { IconKeyboardShortcutsLine } from '@instructure/ui-icons/es/svg';
+
+// Dynamically import the callback to avoid module resolution issues
+const clickCallbackPromise = import('./clickCallback');
+
+// @ts-expect-error: tinymce is available as a global variable
+tinymce.PluginManager.add('instructure_keyboard_shortcuts_header', function (ed) {
+  // Register custom icon
+  ed.ui.registry.addIcon('keyboard-shortcuts', IconKeyboardShortcutsLine.src);
+  ed.addCommand('instructureKeyboardShortcuts', () => {
+    clickCallbackPromise.then(module => module.default(ed, document));
+  });
+  ed.ui.registry.addButton('instructure_keyboard_shortcuts_header', {
+    icon: 'keyboard-shortcuts',
+    tooltip: formatMessage('View keyboard shortcuts'),
+    onAction: () => ed.execCommand('instructureKeyboardShortcuts')
+  });
+  ed.ui.registry.addMenuItem('instructure_keyboard_shortcuts_header', {
+    icon: 'keyboard-shortcuts',
+    text: formatMessage('Keyboard Shortcuts'),
+    onAction: () => ed.execCommand('instructureKeyboardShortcuts')
+  });
+});

package/es/rce/plugins/instructure_record/AudioOptionsTray/TrayController.d.ts

@@ -3,7 +3,7 @@ export default class TrayController {
     _isOpen: boolean;
     _shouldOpen: boolean;
     _editor: any;
-    _audioContainer: any;
+    _audioContainer: Element | null;
     get container(): HTMLElement;
     get isOpen(): boolean;
     showTrayForEditor(editor: any): void;

package/es/rce/plugins/instructure_record/AudioOptionsTray/TrayController.js

@@ -19,7 +19,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
-import { asAudioElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
+import { asAudioElement } from '../../shared/ContentSelection';
+import { findMediaPlayerIframe } from '../../shared/iframeUtils';
 import AudioOptionsTray from '.';
 export const CONTAINER_ID = 'instructure-audio-options-tray-container';
 export default class TrayController {

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.d.ts

@@ -27,7 +27,7 @@ export default class TrayController {
     get $container(): HTMLElement;
     get isOpen(): boolean;
     showTrayForEditor(editor: any): void;
-    $videoContainer: any;
+    $videoContainer: Element | null | undefined;
     hideTrayForEditor(editor: any): void;
     _applyVideoOptions(videoOptions: any): void;
     _dismissTray(): void;

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -19,7 +19,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
-import { asVideoElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
+import { asVideoElement } from '../../shared/ContentSelection';
+import { findMediaPlayerIframe } from '../../shared/iframeUtils';
 import VideoOptionsTray from '.';
 import { isStudioEmbeddedMedia, parseStudioOptions } from '../../shared/StudioLtiSupportUtils';
 import RCEGlobals from '../../../RCEGlobals';

package/es/rce/plugins/instructure_record/mediaTranslations.js

@@ -24,7 +24,7 @@ import formatMessage from '../../../format-message';
 const uploadMediaTranslations = {
   UploadMediaStrings: {
     ADD_CLOSED_CAPTIONS_OR_SUBTITLES: formatMessage('Add CC/Subtitles'),
-    CLEAR_FILE_TEXT: formatMessage('Clear selected file'),
+    CLEAR_FILE_TEXT: formatMessage('Remove'),
     CLOSE_TEXT: formatMessage('Close'),
     CLOSED_CAPTIONS_CHOOSE_FILE: formatMessage('Choose caption file'),
     CLOSED_CAPTIONS_SELECT_LANGUAGE: formatMessage('Select Language'),

package/es/rce/plugins/instructure_studio_media_options/plugin.js

@@ -17,24 +17,121 @@
  */
 
 import tinymce from 'tinymce';
-import { isStudioEmbeddedMedia, handleBeforeObjectSelected } from '../shared/StudioLtiSupportUtils';
+import { isStudioEmbeddedMedia, handleBeforeObjectSelected, notifyStudioEmbedTypeChange, updateStudioIframeDimensions, isValidDimension, isValidEmbedType, isValidResizable } from '../shared/StudioLtiSupportUtils';
 import VideoTrayController from '../instructure_record/VideoOptionsTray/TrayController';
 import formatMessage from '../../../format-message';
+import RCEGlobals from '../../RCEGlobals';
+import { thumbnailViewIcon, learnViewIcon, collabViewIcon, optionsIcon, removeIcon } from './studioToolbarIcons';
 const studioTrayController = new VideoTrayController();
+const handleStudioMessage = e => {
+  if (e.data && e.data.subject === 'studio.embedTypeChanged.response' && isValidDimension(e.data.width) && isValidDimension(e.data.height) && isValidEmbedType(e.data.embedType)) {
+    // resizable is optional - only pass it if it's a valid boolean
+    const resizable = isValidResizable(e.data.resizable) ? e.data.resizable : undefined;
+    updateStudioIframeDimensions(tinymce.activeEditor, e.data.width, e.data.height, e.data.embedType, resizable);
+  }
+};
 tinymce.PluginManager.add('instructure_studio_media_options', function (ed) {
-  ed.ui.registry.addButton('studio-media-options', {
-    onAction() {
-      studioTrayController.showTrayForEditor(ed);
-    },
-    text: formatMessage('Studio Media Options'),
-    tooltip: formatMessage('Show Studio media options')
-  });
-  ed.ui.registry.addContextToolbar('studio-media-options-toolbar', {
-    items: 'studio-media-options',
-    position: 'node',
-    predicate: isStudioEmbeddedMedia,
-    scope: 'node'
-  });
+  if (RCEGlobals.getFeatures().rce_studio_embed_improvements) {
+    window.addEventListener('message', handleStudioMessage);
+    ed.on('init', () => {
+      const existingStyle = document.getElementById('studio-toolbar-styles');
+      if (!existingStyle) {
+        const style = document.createElement('style');
+        style.id = 'studio-toolbar-styles';
+        style.textContent = `
+        .tox .tox-pop .tox-tbtn {
+          font-size: 16px;
+          border-radius: 0;
+        }
+
+        .tox .tox-pop .tox-tbtn:hover {
+          background-color: #2B7ABC;
+          color: white;
+        }
+      `;
+        document.head.appendChild(style);
+      }
+    });
+    ed.ui.registry.addIcon('thumbnail-view-icon', thumbnailViewIcon);
+    ed.ui.registry.addIcon('learn-view-icon', learnViewIcon);
+    ed.ui.registry.addIcon('collab-view-icon', collabViewIcon);
+    ed.ui.registry.addIcon('options-icon', optionsIcon);
+    ed.ui.registry.addIcon('remove-icon', removeIcon);
+    ed.ui.registry.addButton('thumbnail-view', {
+      onAction() {
+        notifyStudioEmbedTypeChange(ed, 'thumbnail_embed');
+      },
+      icon: 'thumbnail-view-icon',
+      text: formatMessage('Thumbnail'),
+      tooltip: formatMessage('Thumbnail')
+    });
+    ed.ui.registry.addButton('learn-view', {
+      onAction() {
+        notifyStudioEmbedTypeChange(ed, 'learn_embed');
+      },
+      icon: 'learn-view-icon',
+      text: formatMessage('Learn'),
+      tooltip: formatMessage('Learn')
+    });
+    ed.ui.registry.addButton('collab-view', {
+      onAction() {
+        notifyStudioEmbedTypeChange(ed, 'collaboration_embed');
+      },
+      icon: 'collab-view-icon',
+      text: formatMessage('Collab'),
+      tooltip: formatMessage('Collab')
+    });
+    ed.ui.registry.addButton('studio-media-options', {
+      onAction() {
+        if (!studioTrayController.isOpen) {
+          studioTrayController.showTrayForEditor(ed);
+        }
+      },
+      icon: 'options-icon',
+      text: formatMessage('Options'),
+      tooltip: formatMessage('Options')
+    });
+    ed.ui.registry.addButton('remove-studio-media', {
+      onAction() {
+        const selectedElement = ed.selection.getNode();
+        if (selectedElement && isStudioEmbeddedMedia(selectedElement)) {
+          studioTrayController.hideTrayForEditor(ed);
+
+          // Hide toolbar, reset selection
+          ed.fire('hidecontexttoolbar');
+          ed.dom.remove(selectedElement);
+          ed.nodeChanged();
+          ed.selection.select(ed.getBody());
+
+          // Force focus back to editor
+          ed.focus();
+        }
+      },
+      icon: 'remove-icon',
+      text: formatMessage('Remove'),
+      tooltip: formatMessage('Remove Studio Media')
+    });
+    ed.ui.registry.addContextToolbar('studio-extra-toolbar', {
+      items: 'thumbnail-view | learn-view | collab-view | studio-media-options | remove-studio-media',
+      position: 'node',
+      predicate: isStudioEmbeddedMedia,
+      scope: 'node'
+    });
+  } else {
+    ed.ui.registry.addButton('studio-media-options', {
+      onAction() {
+        studioTrayController.showTrayForEditor(ed);
+      },
+      text: formatMessage('Studio Media Options'),
+      tooltip: formatMessage('Show Studio media options')
+    });
+    ed.ui.registry.addContextToolbar('studio-media-options-toolbar', {
+      items: 'studio-media-options',
+      position: 'node',
+      predicate: isStudioEmbeddedMedia,
+      scope: 'node'
+    });
+  }
   ed.on('BeforeObjectSelected', handleBeforeObjectSelected);
   ed.on('remove', editor => {
     studioTrayController.hideTrayForEditor(editor);