@instructure/canvas-rce 7.3.1 → 8.1.0

package/es/rce/plugins/instructure_record/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function mapStudioEmbedOptions(embedOptions: Record<string, boolean>): string[];
+export declare function readViewerRestrictions(viewerRestrictions: Record<string, boolean>): string[];
+export declare function mapViewerRestrictions(viewerRestrictions: string[]): Record<string, boolean>;

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2026 - 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 function mapStudioEmbedOptions(embedOptions) {
+  return embedOptions ? Object.entries(embedOptions).filter(([, v]) => v).map(([k]) => k) : [];
+}
+const VIEWER_RESTRICTIONS = ['show_rolling_transcript'];
+export function readViewerRestrictions(viewerRestrictions) {
+  return viewerRestrictions ? Object.keys(viewerRestrictions).filter(k => viewerRestrictions[k]) : [];
+}
+export function mapViewerRestrictions(viewerRestrictions) {
+  return VIEWER_RESTRICTIONS.reduce((acc, restriction) => {
+    acc[restriction] = viewerRestrictions.includes(restriction);
+    return acc;
+  }, {});
+}

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

@@ -17,19 +17,29 @@
  */
 
 import tinymce from 'tinymce';
-import { isStudioEmbeddedMedia, handleBeforeObjectSelected, notifyStudioEmbedTypeChange, updateStudioIframeDimensions, isValidDimension, isValidEmbedType, isValidResizable } from '../shared/StudioLtiSupportUtils';
+import { isStudioEmbeddedMedia, isImprovedStudioEmbed, handleBeforeObjectSelected, notifyStudioEmbedTypeChange, updateStudioIframeDimensions, validateStudioEmbedTypeChangeResponse } 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);
+  // can be extended in the future to handle more message types from Studio LTI
+  switch (e.data?.subject) {
+    case 'studio.embedTypeChanged.response':
+      if (validateStudioEmbedTypeChangeResponse(e.data)) {
+        updateStudioIframeDimensions(tinymce.activeEditor, e.data);
+      }
+      break;
+    default:
+      return;
   }
 };
+const isEmbedButtonActive = (buttonName, currentSelectedElement) => {
+  return (currentSelectedElement.getAttribute('data-mce-p-src') || '').includes(buttonName);
+};
+const isImprovedStudioEmbeddedMedia = element => isStudioEmbeddedMedia(element) && isImprovedStudioEmbed(element);
+const isNonImprovedStudioEmbeddedMedia = element => isStudioEmbeddedMedia(element) && !isImprovedStudioEmbed(element);
 tinymce.PluginManager.add('instructure_studio_media_options', function (ed) {
   if (RCEGlobals.getFeatures().rce_studio_embed_improvements) {
     window.addEventListener('message', handleStudioMessage);
@@ -48,6 +58,16 @@ tinymce.PluginManager.add('instructure_studio_media_options', function (ed) {
           background-color: #2B7ABC;
           color: white;
         }
+
+        .tox .tox-pop .tox-tbtn.tox-tbtn--enabled {
+          background-color: #6A7883;
+          color: white;
+        }
+
+        .tox .tox-pop .tox-tbtn.tox-tbtn--enabled:hover {
+          background-color: #2B7ABC;
+          color: white;
+        }
       `;
         document.head.appendChild(style);
       }
@@ -57,39 +77,66 @@ tinymce.PluginManager.add('instructure_studio_media_options', function (ed) {
     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', {
+    ed.ui.registry.addToggleButton('thumbnail-view', {
+      onSetup: buttonApi => {
+        buttonApi.setActive(isEmbedButtonActive('thumbnail_embed', ed.selection.getNode()));
+        const editorEventCallback = eventApi => {
+          buttonApi.setActive(isEmbedButtonActive('thumbnail_embed', eventApi.element));
+        };
+        ed.on('NodeChange', editorEventCallback);
+        return () => ed.off('NodeChange', editorEventCallback);
+      },
       onAction() {
         notifyStudioEmbedTypeChange(ed, 'thumbnail_embed');
       },
       icon: 'thumbnail-view-icon',
-      text: formatMessage('Thumbnail'),
-      tooltip: formatMessage('Thumbnail')
+      text: formatMessage('Thumbnail')
     });
-    ed.ui.registry.addButton('learn-view', {
+    ed.ui.registry.addToggleButton('learn-view', {
+      onSetup: buttonApi => {
+        buttonApi.setActive(isEmbedButtonActive('learn_embed', ed.selection.getNode()));
+        const editorEventCallback = eventApi => {
+          buttonApi.setActive(isEmbedButtonActive('learn_embed', eventApi.element));
+        };
+        ed.on('NodeChange', editorEventCallback);
+        return () => ed.off('NodeChange', editorEventCallback);
+      },
       onAction() {
         notifyStudioEmbedTypeChange(ed, 'learn_embed');
       },
       icon: 'learn-view-icon',
-      text: formatMessage('Learn'),
-      tooltip: formatMessage('Learn')
+      text: formatMessage('Learn')
     });
-    ed.ui.registry.addButton('collab-view', {
+    ed.ui.registry.addToggleButton('collab-view', {
+      onSetup: buttonApi => {
+        buttonApi.setActive(isEmbedButtonActive('collaboration_embed', ed.selection.getNode()));
+        const editorEventCallback = eventApi => {
+          buttonApi.setActive(isEmbedButtonActive('collaboration_embed', eventApi.element));
+        };
+        ed.on('NodeChange', editorEventCallback);
+        return () => ed.off('NodeChange', editorEventCallback);
+      },
       onAction() {
         notifyStudioEmbedTypeChange(ed, 'collaboration_embed');
       },
       icon: 'collab-view-icon',
-      text: formatMessage('Collab'),
-      tooltip: formatMessage('Collab')
+      text: formatMessage('Collab')
     });
+    const openStudioTray = () => {
+      if (!studioTrayController.isOpen) {
+        studioTrayController.showTrayForEditor(ed);
+        ed.focus();
+      }
+    };
     ed.ui.registry.addButton('studio-media-options', {
-      onAction() {
-        if (!studioTrayController.isOpen) {
-          studioTrayController.showTrayForEditor(ed);
-        }
-      },
+      onAction: openStudioTray,
+      icon: 'options-icon',
+      text: formatMessage('Options')
+    });
+    ed.ui.registry.addButton('studio-media-options-basic', {
+      onAction: openStudioTray,
       icon: 'options-icon',
-      text: formatMessage('Options'),
-      tooltip: formatMessage('Options')
+      text: formatMessage('Studio Media Options')
     });
     ed.ui.registry.addButton('remove-studio-media', {
       onAction() {
@@ -108,22 +155,31 @@ tinymce.PluginManager.add('instructure_studio_media_options', function (ed) {
         }
       },
       icon: 'remove-icon',
-      text: formatMessage('Remove'),
-      tooltip: formatMessage('Remove Studio Media')
+      text: formatMessage('Remove')
     });
     ed.ui.registry.addContextToolbar('studio-extra-toolbar', {
       items: 'thumbnail-view | learn-view | collab-view | studio-media-options | remove-studio-media',
       position: 'node',
-      predicate: isStudioEmbeddedMedia,
+      predicate: isImprovedStudioEmbeddedMedia,
+      scope: 'node'
+    });
+    ed.ui.registry.addContextToolbar('studio-basic-toolbar', {
+      items: 'studio-media-options-basic | remove-studio-media',
+      position: 'node',
+      predicate: isNonImprovedStudioEmbeddedMedia,
       scope: 'node'
     });
+    ed.on('NodeChange', () => {
+      if (studioTrayController.isOpen) {
+        studioTrayController.hideTrayForEditor(ed, true);
+      }
+    });
   } else {
     ed.ui.registry.addButton('studio-media-options', {
       onAction() {
         studioTrayController.showTrayForEditor(ed);
       },
-      text: formatMessage('Studio Media Options'),
-      tooltip: formatMessage('Show Studio media options')
+      text: formatMessage('Studio Media Options')
     });
     ed.ui.registry.addContextToolbar('studio-media-options-toolbar', {
       items: 'studio-media-options',

package/es/rce/plugins/shared/ContentSelection.d.ts

@@ -23,10 +23,11 @@ export function asLink($element: any, editor: any): {
     fileName: any;
     published: boolean;
 } | null;
-export function asVideoElement($element: any): {
+export function asVideoElement($element: any, isStudioVideo?: boolean): {
     $element: any;
     type: string;
     id: string | null;
+    viewerRestrictions: any;
     titleText: any;
     appliedHeight: any;
     appliedWidth: any;
@@ -37,6 +38,10 @@ export function asVideoElement($element: any): {
 export function asAudioElement($element: any): {
     titleText: any;
     id: any;
+    containerDimensions: {
+        width: any;
+        height: any;
+    };
 } | null;
 export function getContentFromElement($element: any, editor: any): {
     $element: any;

package/es/rce/plugins/shared/ContentSelection.js

@@ -16,12 +16,12 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedOptions';
-import { isOnlyTextSelected } from '../../contentInsertionUtils';
 import formatMessage from '../../../format-message';
-import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
 import { parseUrlPath } from '../../../util/url-util';
+import { isOnlyTextSelected } from '../../contentInsertionUtils';
+import { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedOptions';
 import { findMediaPlayerIframe } from './iframeUtils';
+import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
 const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
 export const LINK_TYPE = 'link';
 export const FILE_LINK_TYPE = 'file-link';
@@ -91,7 +91,8 @@ export function asLink($element, editor) {
 // and it's attributes, even though this could change with future
 // tinymce releases.
 // see https://github.com/tinymce/tinymce/issues/5181
-export function asVideoElement($element) {
+export function asVideoElement($element, isStudioVideo = false) {
+  var _$videoElem$contentWi;
   const $videoElem = findMediaPlayerIframe($element);
   if (!isVideoElement($videoElem) && !isStudioEmbeddedMedia($videoElem)) {
     return null;
@@ -100,19 +101,26 @@ export function asVideoElement($element) {
     ...fromVideoEmbed($videoElem),
     $element,
     type: VIDEO_EMBED_TYPE,
-    id: $videoElem.parentElement?.getAttribute('data-mce-p-data-media-id') || $videoElem.getAttribute('data-mce-p-data-media-id')
+    id: $videoElem.parentElement?.getAttribute('data-mce-p-data-media-id') || $videoElem.getAttribute('data-mce-p-data-media-id'),
+    viewerRestrictions: isStudioVideo ? {} : (_$videoElem$contentWi = $videoElem.contentWindow?.['env'.toUpperCase()]?.media_object?.viewer_restrictions) !== null && _$videoElem$contentWi !== void 0 ? _$videoElem$contentWi : {}
   };
 }
 export function asAudioElement($element) {
+  var _$audioIframe$content;
   if (!$element) {
     return null;
   }
   const $audioIframe = $element.tagName === 'IFRAME' ? $element : $element.firstElementChild;
   const $tinymceIframeShim = $audioIframe.parentElement;
   const title = ($audioIframe.getAttribute('title') || $tinymceIframeShim.getAttribute('data-mce-p-title') || '').replace(formatMessage('Video player for '), '');
+  const containerRect = $element.getBoundingClientRect();
   const audioOptions = {
     titleText: title,
-    id: $element.parentElement?.getAttribute('data-mce-p-data-media-id') || $element.getAttribute('data-mce-p-data-media-id')
+    id: $element.parentElement?.getAttribute('data-mce-p-data-media-id') || $element.getAttribute('data-mce-p-data-media-id'),
+    containerDimensions: {
+      width: containerRect.width,
+      height: containerRect.height
+    }
   };
   if ($audioIframe.tagName === 'IFRAME') {
     const audioDoc = $audioIframe.contentDocument;
@@ -129,6 +137,7 @@ export function asAudioElement($element) {
   if (matches) {
     audioOptions.attachmentId = matches[1];
   }
+  audioOptions.viewerRestrictions = (_$audioIframe$content = $audioIframe.contentWindow?.['env'.toUpperCase()]?.media_object?.viewer_restrictions) !== null && _$audioIframe$content !== void 0 ? _$audioIframe$content : {};
   return audioOptions;
 }
 function asText($element, editor) {

package/es/rce/plugins/shared/DimensionsInput/DimensionInput.js

@@ -18,7 +18,6 @@
 
 import React from 'react';
 import { func, shape, string, object } from 'prop-types';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { NumberInput } from '@instructure/ui-number-input';
 export default function DimensionInput(props) {
   const {
@@ -43,7 +42,7 @@ export default function DimensionInput(props) {
   }
   return /*#__PURE__*/React.createElement(NumberInput, {
     allowStringValue: true,
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, label),
+    renderLabel: label,
     onChange: handleChange,
     onDecrement: handleDecrement,
     onIncrement: handleIncrement,

package/es/rce/plugins/shared/DimensionsInput/index.js

@@ -17,13 +17,13 @@
  */
 
 import React from 'react';
-import { bool, func, number, shape, string, object } from 'prop-types';
+import { bool, func, number, object, shape, string } from 'prop-types';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Flex } from '@instructure/ui-flex';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { IconLockLine, IconWarningSolid } from '@instructure/ui-icons';
-import { Flex } from '@instructure/ui-flex';
-import { Text } from '@instructure/ui-text';
 import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
+import { Text } from '@instructure/ui-text';
 import formatMessage from '../../../../format-message';
 import DimensionInput from './DimensionInput';
 export { default as useDimensionsState } from './useDimensionsState';
@@ -39,8 +39,9 @@ const errorMessage = message => {
   }, message));
 };
 const getMessage = (dimensionsState, minWidth, minHeight, minPercentage) => {
+  const baseHint = formatMessage('Aspect ratio will be preserved');
   let result = {
-    text: formatMessage('Aspect ratio will be preserved'),
+    text: baseHint,
     type: 'hint'
   };
   if (dimensionsState.usePercentageUnits) {
@@ -102,11 +103,9 @@ export default function DimensionsInput(props) {
   };
   return /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, !hidePercentage && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
-  }, hidePercentage ? /*#__PURE__*/React.createElement(Text, {
-    weight: "bold"
-  }, formatMessage('Custom width and height (Pixels)')) : /*#__PURE__*/React.createElement(RadioInputGroup, {
+  }, /*#__PURE__*/React.createElement(RadioInputGroup, {
     "data-testid": "dimension-type",
     name: "dimension-type",
     description: formatMessage('Dimension Type'),
@@ -119,11 +118,11 @@ export default function DimensionsInput(props) {
     label: formatMessage('Pixels'),
     value: "pixels"
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
+    overflowX: "hidden"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
-    description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Dimensions'))
+    description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Custom Dimensions'))
   }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "start",
+    alignItems: "end",
     direction: "row",
     "data-testid": "input-number-container"
   }, dimensionsState.usePercentageUnits ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
@@ -145,7 +144,7 @@ export default function DimensionsInput(props) {
     messages: [secondaryMessage],
     dimensionsRef: dimensionsRef
   })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "x-small small"
+    padding: "0 x-small small"
   }, /*#__PURE__*/React.createElement(IconLockLine, null)), /*#__PURE__*/React.createElement(Flex.Item, {
     shouldShrink: true
   }, /*#__PURE__*/React.createElement(DimensionInput, {

package/es/rce/plugins/shared/DimensionsInput/useDimensionsState.d.ts

@@ -1,4 +1,4 @@
-export default function useDimensionsState(initialDimensions: any, constraints: any): {
+export default function useDimensionsState(initialDimensions: any, constraints: any, options?: {}): {
     widthState: {
         inputValue: string;
         addOffset(offset: any): void;

package/es/rce/plugins/shared/DimensionsInput/useDimensionsState.js

@@ -34,7 +34,8 @@ function parseAsInteger(inputString) {
 function inputValueFor(initialNumber) {
   return Number.isFinite(initialNumber) ? `${initialNumber}` : '';
 }
-export default function useDimensionsState(initialDimensions, constraints) {
+export default function useDimensionsState(initialDimensions, constraints, options = {}) {
+  var _options$scaleFns$hei, _options$scaleFns$wid;
   const {
     appliedHeight,
     appliedWidth,
@@ -73,8 +74,8 @@ export default function useDimensionsState(initialDimensions, constraints) {
     percentage: minPercentage
   };
   const dimensionScaleFns = {
-    height: scaleForHeight,
-    width: scaleForWidth
+    height: (_options$scaleFns$hei = options.scaleFns?.height) !== null && _options$scaleFns$hei !== void 0 ? _options$scaleFns$hei : scaleForHeight,
+    width: (_options$scaleFns$wid = options.scaleFns?.width) !== null && _options$scaleFns$wid !== void 0 ? _options$scaleFns$wid : scaleForWidth
   };
   function updateDimensions(attributes) {
     setDimensions({

package/es/rce/plugins/shared/StudioLtiSupportUtils.d.ts

@@ -18,14 +18,29 @@ export interface StudioMediaOptionsAttributes {
 export declare const parsedStudioOptionsPropType: import("prop-types").Requireable<import("prop-types").InferProps<{
     resizable: import("prop-types").Validator<boolean>;
     convertibleToLink: import("prop-types").Validator<boolean>;
+    isImprovedEmbed: import("prop-types").Validator<boolean>;
 }>>;
 export type ParsedStudioOptions = {
     resizable: boolean;
     convertibleToLink: boolean;
+    isImprovedEmbed: boolean;
+    embedOptions: StudioEmbedOptions;
+};
+type ValidStudioEmbedType = 'thumbnail_embed' | 'learn_embed' | 'collaboration_embed';
+export type StudioEmbedTypeChangedResponse = {
+    subject: 'studio.embedTypeChanged.response';
+    width: number;
+    height: number;
+    embedType: ValidStudioEmbedType;
+    resizable?: boolean;
 };
 export declare function isStudioContentItemCustomJson(input: any): input is StudioContentItemCustomJson;
+export declare const isValidEmbedType: (embedType: any) => embedType is ValidStudioEmbedType;
+export declare const isValidDimension: (value: any) => value is number;
+export declare const isValidResizable: (value: any) => value is boolean;
 export declare function studioAttributesFrom(customJson: StudioContentItemCustomJson): StudioMediaOptionsAttributes;
 export declare function displayStyleFrom(studioAttributes: StudioMediaOptionsAttributes | null): 'inline-block' | '';
+export declare function isImprovedStudioEmbed(element: Element): boolean;
 export declare function isStudioEmbeddedMedia(element: Element): boolean;
 export declare function parseStudioOptions(element: Element | null): ParsedStudioOptions;
 /**
@@ -36,11 +51,17 @@ export declare function parseStudioOptions(element: Element | null): ParsedStudi
  */
 export declare function handleBeforeObjectSelected(e: EditorEvent<Events.ObjectSelectedEvent>): void;
 export declare function findStudioLtiIframeFromSelection(selectedNode: Node): HTMLIFrameElement | null;
-export declare const notifyStudioEmbedTypeChange: (editor: Editor, embedType: "thumbnail_embed" | "learn_embed" | "collaboration_embed") => void;
 export type EmbedType = 'thumbnail_embed' | 'learn_embed' | 'collaboration_embed';
-export declare const updateStudioIframeDimensions: (editor: Editor, width: number, height: number, embedType: EmbedType, resizable?: boolean) => void;
-type ValidStudioEmbedType = 'thumbnail_embed' | 'learn_embed' | 'collaboration_embed';
-export declare const isValidEmbedType: (embedType: any) => embedType is ValidStudioEmbedType;
-export declare const isValidDimension: (value: any) => value is number;
-export declare const isValidResizable: (value: any) => value is boolean;
+export declare const notifyStudioEmbedTypeChange: (editor: Editor, embedType: EmbedType) => void;
+export declare const validateStudioEmbedTypeChangeResponse: (data: any) => data is StudioEmbedTypeChangedResponse;
+export declare const updateStudioIframeDimensions: (editor: Editor, data: StudioEmbedTypeChangedResponse) => void;
+export type StudioEmbedOptions = {
+    enableMediaDownload: boolean;
+    enableTranscriptDownload: boolean;
+    lockSpeed: boolean;
+    isExternal: boolean;
+    showRollingTranscript: boolean;
+};
+export declare function validateStudioEmbedOptions(input: any): input is StudioEmbedOptions;
+export declare function updateStudioEmbedOptions(editor: Editor, embedOptions: StudioEmbedOptions, videoContainer: Element | null): void;
 export {};

package/es/rce/plugins/shared/StudioLtiSupportUtils.js

@@ -28,11 +28,21 @@ import { findMediaPlayerIframe } from './iframeUtils';
 
 export const parsedStudioOptionsPropType = shape({
   resizable: bool.isRequired,
-  convertibleToLink: bool.isRequired
+  convertibleToLink: bool.isRequired,
+  isImprovedEmbed: bool.isRequired
 });
 export function isStudioContentItemCustomJson(input) {
   return typeof input === 'object' && input.source === 'studio';
 }
+export const isValidEmbedType = embedType => {
+  return typeof embedType === 'string' && ['thumbnail_embed', 'learn_embed', 'collaboration_embed'].includes(embedType);
+};
+export const isValidDimension = value => {
+  return typeof value === 'number' && !isNaN(value) && isFinite(value) && value > 0;
+};
+export const isValidResizable = value => {
+  return typeof value === 'boolean';
+};
 export function studioAttributesFrom(customJson) {
   var _customJson$resizable, _customJson$enableMed;
   return {
@@ -45,6 +55,10 @@ export function displayStyleFrom(studioAttributes) {
   if (!studioAttributes) return '';
   return studioAttributes['data-studio-resizable'] || studioAttributes['data-studio-tray-enabled'] ? 'inline-block' : '';
 }
+export function isImprovedStudioEmbed(element) {
+  const src = element.getAttribute('data-mce-p-src') || '';
+  return src.includes('thumbnail_embed') || src.includes('learn_embed') || src.includes('collaboration_embed');
+}
 export function isStudioEmbeddedMedia(element) {
   // Borrowing this structure from isMediaElement in ContentSelection.js
   const tinymceIframeShim = element?.tagName === 'IFRAME' ? element?.parentElement : element;
@@ -55,9 +69,26 @@ export function isStudioEmbeddedMedia(element) {
 }
 export function parseStudioOptions(element) {
   const tinymceIframeShim = element?.tagName === 'IFRAME' ? element?.parentElement : element;
+  const embedOptions = {};
+  const href = tinymceIframeShim?.getAttribute('data-mce-p-src');
+  if (href) {
+    // parse out embed options from url params
+    const urlMatch = href.match(/url=([^&]*)$/);
+    if (urlMatch) {
+      const url = new URL(decodeURIComponent(urlMatch[1]));
+      const params = url.searchParams;
+      embedOptions['enableMediaDownload'] = params.get('custom_arc_display_download') === 'true';
+      embedOptions['enableTranscriptDownload'] = params.get('custom_arc_transcript_downloadable') === 'true';
+      embedOptions['showRollingTranscript'] = params.get('custom_arc_show_rolling_transcript') === 'true';
+      embedOptions['lockSpeed'] = params.get('custom_arc_lock_speed') === 'true';
+      embedOptions['isExternal'] = params.get('custom_arc_is_external') === 'true';
+    }
+  }
   return {
     resizable: tinymceIframeShim?.getAttribute('data-mce-p-data-studio-resizable') === 'true',
-    convertibleToLink: tinymceIframeShim?.getAttribute('data-mce-p-data-studio-convertible-to-link') === 'true'
+    convertibleToLink: tinymceIframeShim?.getAttribute('data-mce-p-data-studio-convertible-to-link') === 'true',
+    isImprovedEmbed: tinymceIframeShim ? isImprovedStudioEmbed(tinymceIframeShim) : false,
+    embedOptions
   };
 }
 
@@ -123,14 +154,23 @@ export const notifyStudioEmbedTypeChange = (editor, embedType) => {
     }, '*');
   }
 };
-export const updateStudioIframeDimensions = (editor, width, height, embedType, resizable) => {
+export const validateStudioEmbedTypeChangeResponse = data => {
+  return isValidDimension(data.width) && isValidDimension(data.height) && isValidEmbedType(data.embedType);
+};
+export const updateStudioIframeDimensions = (editor, data) => {
+  const {
+    width,
+    height,
+    embedType,
+    resizable
+  } = data;
   const selectedNode = editor.selection.getNode();
   const videoContainer = findMediaPlayerIframe(selectedNode);
   if (videoContainer?.tagName !== 'IFRAME') {
     return;
   }
   const tinymceIframeShim = videoContainer.parentElement;
-  if (!tinymceIframeShim) {
+  if (!tinymceIframeShim || !videoContainer) {
     return;
   }
   editor.dom.setStyles(tinymceIframeShim, {
@@ -141,7 +181,7 @@ export const updateStudioIframeDimensions = (editor, width, height, embedType, r
     width: `${width}px`,
     height: `${height}px`
   });
-  if (resizable !== undefined) {
+  if (resizable !== undefined && isValidResizable(resizable)) {
     // Update both the actual attribute and the TinyMCE prefixed version
     // This ensures they stay in sync when content is saved and reloaded
     editor.dom.setAttrib(tinymceIframeShim, 'data-studio-resizable', String(resizable));
@@ -172,12 +212,41 @@ export const updateStudioIframeDimensions = (editor, width, height, embedType, r
     height
   });
 };
-export const isValidEmbedType = embedType => {
-  return typeof embedType === 'string' && ['thumbnail_embed', 'learn_embed', 'collaboration_embed'].includes(embedType);
+const embedOptionsKeyMap = {
+  enableMediaDownload: 'custom_arc_display_download',
+  enableTranscriptDownload: 'custom_arc_transcript_downloadable',
+  showRollingTranscript: 'custom_arc_show_rolling_transcript',
+  lockSpeed: 'custom_arc_lock_speed',
+  isExternal: 'custom_arc_is_external'
 };
-export const isValidDimension = value => {
-  return typeof value === 'number' && !isNaN(value) && isFinite(value) && value > 0;
-};
-export const isValidResizable = value => {
-  return typeof value === 'boolean';
-};
+export function validateStudioEmbedOptions(input) {
+  return typeof input === 'object' && (Object.keys(input).length === 0 || typeof input.isExternal === 'boolean' || typeof input.enableMediaDownload === 'boolean' || typeof input.enableTranscriptDownload === 'boolean' || typeof input.showRollingTranscript === 'boolean' || typeof input.lockSpeed === 'boolean');
+}
+export function updateStudioEmbedOptions(editor, embedOptions, videoContainer) {
+  if (videoContainer?.tagName !== 'IFRAME') {
+    return;
+  }
+  const tinymceIframeShim = videoContainer.parentElement;
+  if (!tinymceIframeShim) {
+    return;
+  }
+  const href = editor.dom.getAttrib(tinymceIframeShim, 'data-mce-p-src');
+  if (!href) {
+    return;
+  }
+  const urlMatch = href.match(/url=([^&]*)$/);
+  const url = new URL(decodeURIComponent(urlMatch ? urlMatch[1] : ''));
+  const params = url.searchParams;
+  for (const param of Object.values(embedOptionsKeyMap)) {
+    params.delete(param);
+  }
+  if (embedOptions) {
+    for (const [option, param] of Object.entries(embedOptionsKeyMap)) {
+      if (embedOptions[option]) {
+        params.set(param, 'true');
+      }
+    }
+  }
+  const newHref = href.replace(/(url=)(.*)$/, `$1${encodeURIComponent(url.toString())}`);
+  editor.dom.setAttrib(tinymceIframeShim, 'data-mce-p-src', newHref);
+}

package/es/rce/plugins/shared/Upload/UploadFile.js

@@ -21,7 +21,6 @@ import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { px } from '@instructure/ui-utils';
 import indicatorRegion from '../../../indicatorRegion';
-import { isAudioOrVideo, isImage } from '../fileTypeUtils';
 import indicate from '../../../../common/indicate';
 import { StoreProvider } from '../StoreContext';
 import Bridge from '../../../../bridge';
@@ -63,13 +62,7 @@ _source, afterInsert = () => undefined) => {
           displayAs,
           usageRights: uploadData?.usageRights?.usageRight === 'choose' ? undefined : uploadData?.usageRights
         };
-        let tabContext = 'documents';
-        if (isImage(theFile.type)) {
-          tabContext = 'images';
-        } else if (isAudioOrVideo(theFile.type)) {
-          tabContext = 'media';
-        }
-        storeProps.startMediaUpload(tabContext, fileMetaData);
+        storeProps.startMediaUpload(fileMetaData);
         break;
       }
     case 'URL':

package/es/rce/style.d.ts

@@ -1,4 +1,5 @@
-export default function buildStyle(): {
+/** @param {boolean} useHighContrast @param {string} [fontFamily] */
+export default function buildStyle(useHighContrast?: boolean, fontFamily?: string): {
     css: string;
     classNames: {
         root: string;