@instructure/canvas-rce 7.2.0 → 7.3.1

package/es/rce/plugins/instructure_studio_media_options/studioToolbarIcons.d.ts

@@ -0,0 +1,5 @@
+export declare const thumbnailViewIcon = "<svg width=\"24\" height=\"17\" viewBox=\"0 0 24 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_1209_167295)\"><path d=\"M24 17H0V0H24V17ZM1.10983 1.10569V15.8943H22.8902V1.10569H1.10983Z\" fill=\"currentColor\"/><path d=\"M21.7804 14.7887H2.21973V2.21143H21.7804V14.7887ZM9.84978 11.4716L14.5665 8.63826L9.84978 5.80492V11.4716Z\" fill=\"currentColor\"/></g><defs><clipPath id=\"clip0_1209_167295\"><rect width=\"24\" height=\"17\" fill=\"white\"/></clipPath></defs></svg>";
+export declare const learnViewIcon = "<svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_93_30328)\"><path d=\"M31 22H0V0H31V22ZM1.43353 1.43089V20.5691H29.5665V1.43089H1.43353Z\" fill=\"currentColor\"/><path d=\"M27.9537 3.04102H19.7109V18.9597H27.9537V3.04102Z\" fill=\"currentColor\"/><path d=\"M18.2781 18.9597H3.04688V3.04102H18.2781V18.9597ZM8.02537 14.7989L14.3165 11.0907L8.02537 7.38244V14.7989Z\" fill=\"currentColor\"/></g><defs><clipPath id=\"clip0_93_30328\"><rect width=\"31\" height=\"22\" fill=\"white\"/></clipPath></defs></svg>";
+export declare const collabViewIcon = "<svg width=\"24\" height=\"17\" viewBox=\"0 0 24 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_1209_167302)\"><path d=\"M24 17H0V0H24V17ZM1.10983 1.10569V15.8943H22.8902V1.10569H1.10983Z\" fill=\"currentColor\"/><path d=\"M21.6416 2.34961H17.3411V8.15449H21.6416V2.34961Z\" fill=\"currentColor\"/><path d=\"M16.2312 8.15449H2.3584V2.34961H16.2312V8.15449ZM8.60117 7.18701L11.7919 5.39026L8.60117 3.59351V7.18701Z\" fill=\"currentColor\"/><path d=\"M21.6415 12.5771H4.99414V13.4064H21.6415V12.5771Z\" fill=\"currentColor\"/><path d=\"M21.6415 13.8213H4.99414V14.6506H21.6415V13.8213Z\" fill=\"currentColor\"/><path d=\"M3.39886 14.6503C3.97349 14.6503 4.43932 14.1862 4.43932 13.6137C4.43932 13.0412 3.97349 12.5771 3.39886 12.5771C2.82423 12.5771 2.3584 13.0412 2.3584 13.6137C2.3584 14.1862 2.82423 14.6503 3.39886 14.6503Z\" fill=\"currentColor\"/><path d=\"M21.6415 9.39844H4.99414V10.2277H21.6415V9.39844Z\" fill=\"currentColor\"/><path d=\"M21.6415 10.6421H4.99414V11.4714H21.6415V10.6421Z\" fill=\"currentColor\"/><path d=\"M3.39886 11.4716C3.97349 11.4716 4.43932 11.0075 4.43932 10.435C4.43932 9.86253 3.97349 9.39844 3.39886 9.39844C2.82423 9.39844 2.3584 9.86253 2.3584 10.435C2.3584 11.0075 2.82423 11.4716 3.39886 11.4716Z\" fill=\"currentColor\"/></g><defs><clipPath id=\"clip0_1209_167302\"><rect width=\"24\" height=\"17\" fill=\"white\"/></clipPath></defs></svg>";
+export declare const optionsIcon = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_1217_47603)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.46326 3.85039H0V2.65039H2.46326C2.7388 1.36449 3.88181 0.400391 5.24999 0.400391C6.61818 0.400391 7.76119 1.36449 8.03673 2.65039H18V3.85039H8.03673C7.76119 5.13629 6.61818 6.10039 5.24999 6.10039C3.88181 6.10039 2.7388 5.13629 2.46326 3.85039ZM3.59999 3.25039C3.59999 2.33912 4.33872 1.60039 5.24999 1.60039C6.16126 1.60039 6.89999 2.33912 6.89999 3.25039C6.89999 4.16166 6.16126 4.90039 5.24999 4.90039C4.33872 4.90039 3.59999 4.16166 3.59999 3.25039Z\" fill=\"currentColor\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 8.40039H9.46326C9.7388 7.11449 10.8818 6.15039 12.25 6.15039C13.6182 6.15039 14.7612 7.11449 15.0367 8.40039H18V9.60039H15.0367C14.7612 10.8863 13.6182 11.8504 12.25 11.8504C10.8818 11.8504 9.7388 10.8863 9.46326 9.60039H0V8.40039ZM12.25 7.35039C11.3387 7.35039 10.6 8.08912 10.6 9.00039C10.6 9.91166 11.3387 10.6504 12.25 10.6504C13.1613 10.6504 13.9 9.91166 13.9 9.00039C13.9 8.08912 13.1613 7.35039 12.25 7.35039Z\" fill=\"currentColor\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.24999 17.6004C6.61818 17.6004 7.76119 16.6363 8.03673 15.3504H18V14.1504H8.03673C7.76119 12.8645 6.61818 11.9004 5.24999 11.9004C3.88181 11.9004 2.7388 12.8645 2.46326 14.1504H0V15.3504H2.46326C2.7388 16.6363 3.88181 17.6004 5.24999 17.6004ZM5.24999 13.1004C4.33872 13.1004 3.59999 13.8391 3.59999 14.7504C3.59999 15.6617 4.33872 16.4004 5.24999 16.4004C6.16126 16.4004 6.89999 15.6617 6.89999 14.7504C6.89999 13.8391 6.16126 13.1004 5.24999 13.1004Z\" fill=\"currentColor\"/></g><defs><clipPath id=\"clip0_1217_47603\"><rect width=\"18\" height=\"18\" fill=\"white\"/></clipPath></defs></svg>";
+export declare const removeIcon = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.8234 16.4118C14.8234 16.7029 14.5852 16.9412 14.294 16.9412H3.70577C3.41459 16.9412 3.17636 16.7029 3.17636 16.4118V5.29412H2.11753V16.4118C2.11753 17.2874 2.83012 18 3.70577 18H14.294C15.1697 18 15.8822 17.2874 15.8822 16.4118V5.29412H14.8234V16.4118ZM6.35284 14.8235H7.41166V6.35294H6.35284V14.8235ZM10.5881 14.8235H11.6469V6.35294H10.5881V14.8235ZM12.5682 3.17647L11.4099 0H6.51176L5.35553 3.17647H0V4.23529H18V3.17647H12.5682ZM6.48105 3.17647L7.25293 1.05882H10.6698L11.4416 3.17647H6.48105Z\" fill=\"currentColor\"/></svg>";

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2023 - 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 thumbnailViewIcon = '<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1209_167295)"><path d="M24 17H0V0H24V17ZM1.10983 1.10569V15.8943H22.8902V1.10569H1.10983Z" fill="currentColor"/><path d="M21.7804 14.7887H2.21973V2.21143H21.7804V14.7887ZM9.84978 11.4716L14.5665 8.63826L9.84978 5.80492V11.4716Z" fill="currentColor"/></g><defs><clipPath id="clip0_1209_167295"><rect width="24" height="17" fill="white"/></clipPath></defs></svg>';
+export const learnViewIcon = '<svg width="31" height="22" viewBox="0 0 31 22" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_93_30328)"><path d="M31 22H0V0H31V22ZM1.43353 1.43089V20.5691H29.5665V1.43089H1.43353Z" fill="currentColor"/><path d="M27.9537 3.04102H19.7109V18.9597H27.9537V3.04102Z" fill="currentColor"/><path d="M18.2781 18.9597H3.04688V3.04102H18.2781V18.9597ZM8.02537 14.7989L14.3165 11.0907L8.02537 7.38244V14.7989Z" fill="currentColor"/></g><defs><clipPath id="clip0_93_30328"><rect width="31" height="22" fill="white"/></clipPath></defs></svg>';
+export const collabViewIcon = '<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1209_167302)"><path d="M24 17H0V0H24V17ZM1.10983 1.10569V15.8943H22.8902V1.10569H1.10983Z" fill="currentColor"/><path d="M21.6416 2.34961H17.3411V8.15449H21.6416V2.34961Z" fill="currentColor"/><path d="M16.2312 8.15449H2.3584V2.34961H16.2312V8.15449ZM8.60117 7.18701L11.7919 5.39026L8.60117 3.59351V7.18701Z" fill="currentColor"/><path d="M21.6415 12.5771H4.99414V13.4064H21.6415V12.5771Z" fill="currentColor"/><path d="M21.6415 13.8213H4.99414V14.6506H21.6415V13.8213Z" fill="currentColor"/><path d="M3.39886 14.6503C3.97349 14.6503 4.43932 14.1862 4.43932 13.6137C4.43932 13.0412 3.97349 12.5771 3.39886 12.5771C2.82423 12.5771 2.3584 13.0412 2.3584 13.6137C2.3584 14.1862 2.82423 14.6503 3.39886 14.6503Z" fill="currentColor"/><path d="M21.6415 9.39844H4.99414V10.2277H21.6415V9.39844Z" fill="currentColor"/><path d="M21.6415 10.6421H4.99414V11.4714H21.6415V10.6421Z" fill="currentColor"/><path d="M3.39886 11.4716C3.97349 11.4716 4.43932 11.0075 4.43932 10.435C4.43932 9.86253 3.97349 9.39844 3.39886 9.39844C2.82423 9.39844 2.3584 9.86253 2.3584 10.435C2.3584 11.0075 2.82423 11.4716 3.39886 11.4716Z" fill="currentColor"/></g><defs><clipPath id="clip0_1209_167302"><rect width="24" height="17" fill="white"/></clipPath></defs></svg>';
+export const optionsIcon = '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1217_47603)"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.46326 3.85039H0V2.65039H2.46326C2.7388 1.36449 3.88181 0.400391 5.24999 0.400391C6.61818 0.400391 7.76119 1.36449 8.03673 2.65039H18V3.85039H8.03673C7.76119 5.13629 6.61818 6.10039 5.24999 6.10039C3.88181 6.10039 2.7388 5.13629 2.46326 3.85039ZM3.59999 3.25039C3.59999 2.33912 4.33872 1.60039 5.24999 1.60039C6.16126 1.60039 6.89999 2.33912 6.89999 3.25039C6.89999 4.16166 6.16126 4.90039 5.24999 4.90039C4.33872 4.90039 3.59999 4.16166 3.59999 3.25039Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 8.40039H9.46326C9.7388 7.11449 10.8818 6.15039 12.25 6.15039C13.6182 6.15039 14.7612 7.11449 15.0367 8.40039H18V9.60039H15.0367C14.7612 10.8863 13.6182 11.8504 12.25 11.8504C10.8818 11.8504 9.7388 10.8863 9.46326 9.60039H0V8.40039ZM12.25 7.35039C11.3387 7.35039 10.6 8.08912 10.6 9.00039C10.6 9.91166 11.3387 10.6504 12.25 10.6504C13.1613 10.6504 13.9 9.91166 13.9 9.00039C13.9 8.08912 13.1613 7.35039 12.25 7.35039Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.24999 17.6004C6.61818 17.6004 7.76119 16.6363 8.03673 15.3504H18V14.1504H8.03673C7.76119 12.8645 6.61818 11.9004 5.24999 11.9004C3.88181 11.9004 2.7388 12.8645 2.46326 14.1504H0V15.3504H2.46326C2.7388 16.6363 3.88181 17.6004 5.24999 17.6004ZM5.24999 13.1004C4.33872 13.1004 3.59999 13.8391 3.59999 14.7504C3.59999 15.6617 4.33872 16.4004 5.24999 16.4004C6.16126 16.4004 6.89999 15.6617 6.89999 14.7504C6.89999 13.8391 6.16126 13.1004 5.24999 13.1004Z" fill="currentColor"/></g><defs><clipPath id="clip0_1217_47603"><rect width="18" height="18" fill="white"/></clipPath></defs></svg>';
+export const removeIcon = '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.8234 16.4118C14.8234 16.7029 14.5852 16.9412 14.294 16.9412H3.70577C3.41459 16.9412 3.17636 16.7029 3.17636 16.4118V5.29412H2.11753V16.4118C2.11753 17.2874 2.83012 18 3.70577 18H14.294C15.1697 18 15.8822 17.2874 15.8822 16.4118V5.29412H14.8234V16.4118ZM6.35284 14.8235H7.41166V6.35294H6.35284V14.8235ZM10.5881 14.8235H11.6469V6.35294H10.5881V14.8235ZM12.5682 3.17647L11.4099 0H6.51176L5.35553 3.17647H0V4.23529H18V3.17647H12.5682ZM6.48105 3.17647L7.25293 1.05882H10.6698L11.4416 3.17647H6.48105Z" fill="currentColor"/></svg>';

package/es/rce/plugins/instructure_wordcount/components/WordCountModal.js

@@ -56,6 +56,7 @@ export const WordCountModal = ({
     label: formatMessage('Word Count'),
     mountNode: instuiPopupMountNodeFn(),
     open: true,
+    onDismiss: onDismiss,
     "data-mce-component": true
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",

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

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

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

@@ -0,0 +1,75 @@
+/*
+ * 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 tinymce from 'tinymce';
+import formatMessage from '../../../format-message';
+import { debounce } from '@instructure/debounce';
+const clickCallbackPromise = import('../instructure_wordcount/clickCallback');
+const TOOLTIP_MESSAGE = formatMessage('View word and character counts');
+const UPDATE_DEBOUNCE_MS = 100;
+function formatWordCount(count) {
+  return formatMessage(`{count, plural,
+       =0 {0 words}
+      one {1 word}
+    other {# words}
+  }`, {
+    count
+  });
+}
+tinymce.PluginManager.add('instructure_wordcount_header', function (ed) {
+  function updateWordCountDisplay() {
+    const count = ed.plugins.wordcount.body.getWordCount();
+    const button = ed.getContainer()?.querySelector(`[title*="${TOOLTIP_MESSAGE}"]`);
+    if (!button) {
+      return;
+    }
+    const textSpan = button.querySelector('.tox-tbtn__select-label');
+    if (textSpan) {
+      textSpan.textContent = formatWordCount(count);
+    }
+    const tooltip = `${TOOLTIP_MESSAGE} - ${formatWordCount(count)}`;
+    button.setAttribute('title', tooltip);
+    button.setAttribute('aria-label', tooltip);
+  }
+  ed.addCommand('instructureWordCountHeader', () => {
+    clickCallbackPromise.then(module => module.default(ed, document, {
+      skipEditorFocus: false
+    }));
+  });
+  ed.ui.registry.addButton('instructure_wordcount_header', {
+    text: formatWordCount(0),
+    tooltip: TOOLTIP_MESSAGE,
+    onAction: () => ed.execCommand('instructureWordCountHeader')
+  });
+  ed.on('PostRender', () => {
+    updateWordCountDisplay();
+  });
+  const debouncedUpdate = debounce(updateWordCountDisplay, UPDATE_DEBOUNCE_MS, {
+    trailing: true
+  });
+  ed.on('NodeChange', debouncedUpdate);
+  ed.on('KeyUp', debouncedUpdate);
+  ed.on('SetContent', debouncedUpdate);
+  ed.on('Change', debouncedUpdate);
+  ed.on('Undo', debouncedUpdate);
+  ed.on('Redo', debouncedUpdate);
+  ed.on('Paste', debouncedUpdate);
+  ed.on('init', () => {
+    updateWordCountDisplay();
+  });
+});

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

@@ -26,7 +26,7 @@ export function asLink($element: any, editor: any): {
 export function asVideoElement($element: any): {
     $element: any;
     type: string;
-    id: any;
+    id: string | null;
     titleText: any;
     appliedHeight: any;
     appliedWidth: any;
@@ -62,7 +62,6 @@ export function isFileLink($element: any, editor: any): boolean;
 export function isImageEmbed($element: any): boolean;
 export function isVideoElement($element: any): boolean;
 export function isAudioElement($element: any): boolean;
-export function findMediaPlayerIframe(elem: any): any;
 export const LINK_TYPE: "link";
 export const FILE_LINK_TYPE: "file-link";
 export const IMAGE_EMBED_TYPE: "image-embed";

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

@@ -21,6 +21,7 @@ import { isOnlyTextSelected } from '../../contentInsertionUtils';
 import formatMessage from '../../../format-message';
 import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
 import { parseUrlPath } from '../../../util/url-util';
+import { findMediaPlayerIframe } from './iframeUtils';
 const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
 export const LINK_TYPE = 'link';
 export const FILE_LINK_TYPE = 'file-link';
@@ -208,22 +209,4 @@ export function isVideoElement($element) {
 }
 export function isAudioElement($element) {
   return isMediaElement($element, 'audio');
-}
-export function findMediaPlayerIframe(elem) {
-  if (!elem) return null;
-  if (elem.tagName === 'IFRAME') {
-    // we have the iframe
-    return elem;
-  }
-  if (elem.firstElementChild?.tagName === 'IFRAME') {
-    // we have the shim tinymce puts around the iframe
-    return elem.firstElementChild;
-  }
-  if (elem.classList.contains('mce-shim')) {
-    // tinymce puts a <span class='mce-shin'> after the iframe (since v5, I think)
-    if (elem.previousSibling?.tagName === 'IFRAME') {
-      return elem.previousSibling;
-    }
-  }
-  return null;
 }

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

@@ -1,4 +1,4 @@
-import { EditorEvent, Events } from 'tinymce';
+import { Editor, EditorEvent, Events } from 'tinymce';
 /**
  * Interface for content item's 'custom' field, specifically for what is expected to come from Studio
  *
@@ -35,3 +35,12 @@ export declare function parseStudioOptions(element: Element | null): ParsedStudi
  * underlying iframe has a `data-studio-resizable='false'`
  */
 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 {};

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

@@ -17,6 +17,7 @@
  */
 
 import PropTypes, { bool, shape } from 'prop-types';
+import { findMediaPlayerIframe } from './iframeUtils';
 
 /**
  * Interface for content item's 'custom' field, specifically for what is expected to come from Studio
@@ -71,4 +72,112 @@ export function handleBeforeObjectSelected(e) {
   if (targetElement.getAttribute('data-mce-p-data-studio-resizable') === 'false') {
     targetElement.setAttribute('data-mce-resize', 'false');
   }
-}
+}
+export function findStudioLtiIframeFromSelection(selectedNode) {
+  let outerIframe = null;
+
+  // First, find the outer iframe
+  if (selectedNode.nodeName === 'IFRAME') {
+    outerIframe = selectedNode;
+  } else if (selectedNode.nodeType === Node.ELEMENT_NODE) {
+    // Look for iframe inside the selected element (the span)
+    outerIframe = selectedNode.querySelector('iframe');
+  }
+  if (!outerIframe) {
+    console.error('No outer iframe found');
+    return null;
+  }
+
+  // Now try to access the content document of the outer iframe
+  try {
+    const outerIframeDoc = outerIframe.contentDocument || outerIframe.contentWindow?.document;
+    if (!outerIframeDoc) {
+      return outerIframe; // Return outer iframe as fallback
+    }
+
+    // Search for nested iframe with data-lti-launch attribute
+    const nestedIframe = outerIframeDoc.querySelector('iframe[data-lti-launch="true"]');
+    if (nestedIframe) {
+      return nestedIframe;
+    } else {
+      // Try to find any iframe inside
+      const anyNestedIframe = outerIframeDoc.querySelector('iframe');
+      if (anyNestedIframe) {
+        return anyNestedIframe;
+      }
+    }
+  } catch (error) {
+    console.error('>> Cannot access outer iframe content (cross-origin):', error);
+    // Return the outer iframe as fallback since we can't access its contents
+    return outerIframe;
+  }
+  return outerIframe;
+}
+export const notifyStudioEmbedTypeChange = (editor, embedType) => {
+  const studioIframe = findStudioLtiIframeFromSelection(editor.selection.getNode());
+  if (studioIframe && studioIframe.contentWindow) {
+    studioIframe.contentWindow.postMessage({
+      subject: 'studio.embedTypeChanged',
+      embedType: embedType,
+      timestamp: Date.now()
+    }, '*');
+  }
+};
+export const updateStudioIframeDimensions = (editor, width, height, embedType, resizable) => {
+  const selectedNode = editor.selection.getNode();
+  const videoContainer = findMediaPlayerIframe(selectedNode);
+  if (videoContainer?.tagName !== 'IFRAME') {
+    return;
+  }
+  const tinymceIframeShim = videoContainer.parentElement;
+  if (!tinymceIframeShim) {
+    return;
+  }
+  editor.dom.setStyles(tinymceIframeShim, {
+    width: `${width}px`,
+    height: `${height}px`
+  });
+  editor.dom.setStyles(videoContainer, {
+    width: `${width}px`,
+    height: `${height}px`
+  });
+  if (resizable !== undefined) {
+    // 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));
+    editor.dom.setAttrib(tinymceIframeShim, 'data-mce-p-data-studio-resizable', String(resizable));
+
+    // Force TinyMCE to update the overlay by setting/removing data-mce-resize
+    if (!resizable) {
+      tinymceIframeShim.setAttribute('data-mce-resize', 'false');
+    } else {
+      tinymceIframeShim.removeAttribute('data-mce-resize');
+    }
+  }
+  const href = editor.dom.getAttrib(tinymceIframeShim, 'data-mce-p-src');
+  if (href && embedType) {
+    if (embedType) {
+      // Replace thumbnail_embed, learn_embed, or collaboration_embed with the new embed type
+      const updatedHref = href.replace(/(thumbnail_embed|learn_embed|collaboration_embed)/g, embedType);
+
+      // updating only mce-p-src as in we only want to update the real src whenever we step out of the editor or save it
+      editor.dom.setAttrib(tinymceIframeShim, 'data-mce-p-src', updatedHref);
+      editor.nodeChanged();
+    }
+  }
+  editor.fire('ObjectResized', {
+    // @ts-expect-error - needed for aligning tooltip with new iframe size
+    target: videoContainer,
+    width,
+    height
+  });
+};
+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';
+};

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

@@ -238,7 +238,7 @@ export default function ComputerPanel({
         });
       },
       renderIcon: IconTrashLine,
-      screenReaderLabel: formatMessage('Clear selected file: {filename}', {
+      screenReaderLabel: formatMessage('Remove {filename}', {
         filename
       })
     })), /*#__PURE__*/React.createElement(Flex.Item, {

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

@@ -31,9 +31,11 @@ import ImageOptionsForm from '../ImageOptionsForm';
 import UsageRightsSelectBox from './UsageRightsSelectBox';
 import { View } from '@instructure/ui-view';
 import { UploadCanvasPanelIds, CanvasPanelTitles } from '../canvasContentUtils';
+import { validateVideoUrl } from './videoValidationUtils';
 const CanvasContentPanel = /*#__PURE__*/React.lazy(() => import('./CanvasContentPanel'));
 const ComputerPanel = /*#__PURE__*/React.lazy(() => import('./ComputerPanel'));
 const UrlPanel = /*#__PURE__*/React.lazy(() => import('./UrlPanel'));
+const VideoUrlPanel = /*#__PURE__*/React.lazy(() => import('./VideoUrlPanel'));
 function shouldBeDisabled({
   fileUrl,
   theFile,
@@ -46,6 +48,7 @@ function shouldBeDisabled({
     case 'COMPUTER':
       return !theFile || theFile.error;
     case 'URL':
+    case 'VIDEO_URL':
       return !fileUrl;
     default:
       if (UploadCanvasPanelIds.includes(selectedPanel)) return !fileUrl;
@@ -133,8 +136,17 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef(({
       if (submitDisabled || uploading) {
         return false;
       }
+      let finalFileUrl = fileUrl;
+      if (selectedPanel === 'VIDEO_URL' && finalFileUrl) {
+        const validation = validateVideoUrl(finalFileUrl);
+        if (!validation.isValid) {
+          setError('Invalid video URL');
+          return false;
+        }
+        finalFileUrl = validation.embedUrl;
+      }
       onSubmit(editor, accept, selectedPanel, {
-        fileUrl,
+        fileUrl: finalFileUrl,
         theFile,
         imageOptions: {
           altText,
@@ -155,7 +167,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef(({
   }), /*#__PURE__*/React.createElement(Heading, null, label)), /*#__PURE__*/React.createElement(Modal.Body, {
     ref: ref
   }, /*#__PURE__*/React.createElement(Tabs, {
-    onRequestTabChange: (event, {
+    onRequestTabChange: (_event, {
       index
     }) => handleRequestTabChange(index)
   }, panels.map(panel => {
@@ -197,7 +209,28 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef(({
           })
         }, /*#__PURE__*/React.createElement(UrlPanel, {
           fileUrl: fileUrl,
-          setFileUrl: setFileUrl
+          setFileUrl: setFileUrl,
+          urlHasError: !!error
+        })));
+      case 'VIDEO_URL':
+        return /*#__PURE__*/React.createElement(Tabs.Panel, {
+          key: panel,
+          renderTitle: function () {
+            return formatMessage('Video URL');
+          },
+          isSelected: selectedPanel === 'VIDEO_URL'
+        }, /*#__PURE__*/React.createElement(Suspense, {
+          fallback: /*#__PURE__*/React.createElement(Spinner, {
+            renderTitle: formatMessage('Loading'),
+            size: "large"
+          })
+        }, /*#__PURE__*/React.createElement(VideoUrlPanel, {
+          fileUrl: fileUrl,
+          setFileUrl: url => {
+            setError(null);
+            setFileUrl(url);
+          },
+          urlHasError: !!error
         })));
       default:
         if (UploadCanvasPanelIds.includes(panel)) {
@@ -274,7 +307,7 @@ UploadFileModal.propTypes = {
   canvasOrigin: string,
   onSubmit: func,
   onDismiss: func.isRequired,
-  panels: arrayOf(oneOf(['COMPUTER', 'URL', ...UploadCanvasPanelIds])),
+  panels: arrayOf(oneOf(['COMPUTER', 'URL', 'VIDEO_URL', ...UploadCanvasPanelIds])),
   label: string.isRequired,
   accept: oneOfType([arrayOf(string), string]),
   modalBodyWidth: number,

package/es/rce/plugins/shared/Upload/VideoUrlPanel.d.ts

@@ -0,0 +1,15 @@
+declare function VideoUrlPanel({ fileUrl, setFileUrl, urlHasError }: {
+    fileUrl: any;
+    setFileUrl: any;
+    urlHasError: any;
+}): React.JSX.Element;
+declare namespace VideoUrlPanel {
+    namespace propTypes {
+        export let fileUrl: import("prop-types").Validator<string>;
+        export let setFileUrl: import("prop-types").Validator<(...args: any[]) => any>;
+        export { bool as urlHasError };
+    }
+}
+export default VideoUrlPanel;
+import React from 'react';
+import { bool } from 'prop-types';

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

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2025 - 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 { string, func, bool } from 'prop-types';
+import { TextInput } from '@instructure/ui-text-input';
+import formatMessage from '../../../../format-message';
+export default function VideoUrlPanel({
+  fileUrl,
+  setFileUrl,
+  urlHasError
+}) {
+  const handleChange = (_e, val) => {
+    setFileUrl(val);
+  };
+  const getErrorMessage = () => {
+    if (!urlHasError) return [];
+    return [{
+      text: formatMessage('Please enter a valid video URL from a supported platform.'),
+      type: 'newError'
+    }];
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, {
+    name: "video-url",
+    renderLabel: formatMessage('YouTube embed URL'),
+    type: "text",
+    value: fileUrl,
+    onChange: handleChange,
+    messages: getErrorMessage()
+  }));
+}
+VideoUrlPanel.propTypes = {
+  fileUrl: string.isRequired,
+  setFileUrl: func.isRequired,
+  urlHasError: bool
+};

package/es/rce/plugins/shared/Upload/videoValidationUtils.d.ts

@@ -0,0 +1,7 @@
+export function validateVideoUrl(input: any): {
+    isValid: boolean;
+    embedUrl: null;
+} | {
+    isValid: boolean;
+    embedUrl: string;
+};

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

@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2020 - 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/>.
+ */
+
+function validateAndExtractYouTubeUrl(input) {
+  if (!input || typeof input !== 'string') {
+    return {
+      isValid: false,
+      embedUrl: null
+    };
+  }
+  const trimmedInput = input.trim();
+  const patterns = [/^(?:https?:\/\/)?(?:www\.|m\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)(?:[&?][^\s]*)?$/, /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/embed\/([a-zA-Z0-9_-]+)(?:[?][^\s]*)?$/, /<iframe[^>]*src=["'](?:https?:\/\/)?(?:www\.)?youtube\.com\/embed\/([a-zA-Z0-9_-]+)[^"']*["'][^>]*>/];
+  for (const pattern of patterns) {
+    const match = trimmedInput.match(pattern);
+    if (match && match[1]) {
+      const videoId = match[1];
+      return {
+        isValid: true,
+        embedUrl: `https://www.youtube.com/embed/${videoId}`
+      };
+    }
+  }
+  return {
+    isValid: false,
+    embedUrl: null
+  };
+}
+export function validateVideoUrl(input) {
+  if (!input || typeof input !== 'string') {
+    return {
+      isValid: false,
+      embedUrl: null
+    };
+  }
+  const youTubeRegexp = /(?:https?:\/\/)?(?:www\.|m\.)?(?:youtube\.com|youtu\.be)/i;
+  if (youTubeRegexp.test(input)) {
+    return validateAndExtractYouTubeUrl(input);
+  }
+  return {
+    isValid: false,
+    embedUrl: null
+  };
+}

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

@@ -0,0 +1 @@
+export declare function findMediaPlayerIframe(elem: Element | null): Element | null;

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

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2025 - 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 findMediaPlayerIframe(elem) {
+  if (!elem) return null;
+  if (elem.tagName === 'IFRAME') {
+    // we have the iframe
+    return elem;
+  }
+  if (elem.firstElementChild?.tagName === 'IFRAME') {
+    // we have the shim tinymce puts around the iframe
+    return elem.firstElementChild;
+  }
+  if (elem.classList.contains('mce-shim')) {
+    // tinymce puts a <span class='mce-shin'> after the iframe (since v5, I think)
+    const prevSibling = elem.previousSibling;
+    if (prevSibling && 'tagName' in prevSibling && prevSibling.tagName === 'IFRAME') {
+      return prevSibling;
+    }
+  }
+  return null;
+}

package/es/rce/tinyRCE.js

@@ -55,6 +55,8 @@ import './plugins/instructure_html_view/plugin';
 import './plugins/instructure_media_embed/plugin';
 import './plugins/instructure_icon_maker/plugin';
 import './plugins/instructure_wordcount/plugin';
+import './plugins/instructure_wordcount_header/plugin';
+import './plugins/instructure_keyboard_shortcuts_header/plugin';
 import './plugins/instructure_paste/plugin';
 import './plugins/instructure_fullscreen/plugin';
 import './plugins/instructure_studio_media_options/plugin';

package/es/sidebar/actions/upload.d.ts

@@ -91,6 +91,7 @@ export function fetchFolders(bookmark: any): (dispatch: any, getState: any) => a
 export function mediaUploadComplete(error: any, uploadData: any): (dispatch: any, _getState: any) => void;
 export function createMediaServerSession(): (dispatch: any, getState: any) => any;
 export function uploadToIconMakerFolder(svg: any, uploadSettings?: {}): (_dispatch: any, getState: any) => any;
+export function uploadToMediaFolderWithoutEditor(fileMetaProps: any): (_: any, getState: any) => any;
 export function uploadToMediaFolder(tabContext: any, fileMetaProps: any): (dispatch: any, getState: any) => any;
 export function setUsageRights(source: any, fileMetaProps: any, results: any): any;
 export function getFileUrlIfMissing(source: any, results: any): any;