@instructure/canvas-rce 7.2.0 → 7.3.0

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_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionDialog.d.ts

@@ -1,4 +1,4 @@
-import { RceToolWrapper } from '../../RceToolWrapper';
+import { RceToolWrapper } from "../../RceToolWrapper";
 /**
  * Returns a filtered list of items based on the term.
  *

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionDialog.js

@@ -17,22 +17,22 @@ import _pt from "prop-types";
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useState } from 'react';
-import { Modal } from '@instructure/ui-modal';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { View } from '@instructure/ui-view';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { List } from '@instructure/ui-list';
-import { Flex } from '@instructure/ui-flex';
-import { TextInput } from '@instructure/ui-text-input';
-import { IconSearchLine } from '@instructure/ui-icons';
-import { Alert } from '@instructure/ui-alerts';
-import formatMessage from '../../../../../format-message';
-import ExternalToolSelectionItem from './ExternalToolSelectionItem';
-import { instuiPopupMountNodeFn } from '../../../../../util/fullscreenHelpers';
+import React, { useState } from "react";
+import { Modal } from "@instructure/ui-modal";
+import { Button, CloseButton } from "@instructure/ui-buttons";
+import { Heading } from "@instructure/ui-heading";
+import { View } from "@instructure/ui-view";
+import { ScreenReaderContent } from "@instructure/ui-a11y-content";
+import { List } from "@instructure/ui-list";
+import { Flex } from "@instructure/ui-flex";
+import { TextInput } from "@instructure/ui-text-input";
+import { IconSearchLine } from "@instructure/ui-icons";
+import { Alert } from "@instructure/ui-alerts";
+import formatMessage from "../../../../../format-message";
+import ExternalToolSelectionItem from "./ExternalToolSelectionItem";
+import { instuiPopupMountNodeFn } from "../../../../../util/fullscreenHelpers";
 // TODO: we really need a way for the client to pass this to the RCE
-const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
+const getLiveRegion = () => document.getElementById("flash_screenreader_holder");
 
 /**
  * Returns a filtered list of items based on the term.
@@ -51,7 +51,7 @@ export function filterItemsByTitleSubstring(searchString, items) {
   return items.filter(item => item.title.toLocaleLowerCase().includes(lowerTerm));
 }
 export function ExternalToolSelectionDialog(props) {
-  const [filterTerm, setFilterTerm] = useState('');
+  const [filterTerm, setFilterTerm] = useState("");
   const [filteredResults, setFilteredResults] = useState(props.ltiButtons);
   const handleFilterChange = e => {
     setFilterTerm(e.target?.value);
@@ -63,31 +63,31 @@ export function ExternalToolSelectionDialog(props) {
     liveRegion: getLiveRegion,
     size: "medium",
     themeOverride: {
-      mediumMaxWidth: '42rem'
+      mediumMaxWidth: "42rem"
     },
-    label: formatMessage('Apps'),
+    label: formatMessage("Apps"),
     mountNode: instuiPopupMountNodeFn(),
     onDismiss: props.onDismiss,
     open: true,
     shouldCloseOnDocumentClick: false
   }, /*#__PURE__*/React.createElement(Modal.Header, {
     themeOverride: {
-      padding: '0.5rem'
+      padding: "0.5rem"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     offset: "medium",
     onClick: props.onDismiss,
-    screenReaderLabel: formatMessage('Close')
+    screenReaderLabel: formatMessage("Close")
   }), /*#__PURE__*/React.createElement(Heading, {
     margin: "small"
-  }, formatMessage('All Apps')), /*#__PURE__*/React.createElement(View, {
+  }, formatMessage("All Apps")), /*#__PURE__*/React.createElement(View, {
     as: "div",
     padding: "x-small none x-small medium"
   }, /*#__PURE__*/React.createElement(TextInput, {
     type: "search",
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Search')),
-    placeholder: formatMessage('Search'),
+    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage("Search")),
+    placeholder: formatMessage("Search"),
     renderAfterInput: /*#__PURE__*/React.createElement(IconSearchLine, {
       inline: false
     }),
@@ -105,7 +105,7 @@ export function ExternalToolSelectionDialog(props) {
     liveRegion: getLiveRegion,
     variant: "info",
     screenReaderOnly: !filterEmpty
-  }, filterEmpty && formatMessage('No results found for {filterTerm}', {
+  }, filterEmpty && formatMessage("No results found for {filterTerm}", {
     filterTerm
   }), !filterEmpty && formatMessage(`Found { count, plural,
               =0 {# results}
@@ -116,7 +116,7 @@ export function ExternalToolSelectionDialog(props) {
   })), renderTools(filteredResults)))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
     onClick: props.onDismiss,
     color: "primary"
-  }, formatMessage('Done'))));
+  }, formatMessage("Done"))));
   function renderTools(ltiButtons) {
     return /*#__PURE__*/React.createElement(List, {
       isUnstyled: true

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,119 @@
  */
 
 import tinymce from 'tinymce';
-import { isStudioEmbeddedMedia, handleBeforeObjectSelected } from '../shared/StudioLtiSupportUtils';
+import { isStudioEmbeddedMedia, handleBeforeObjectSelected, notifyStudioEmbedTypeChange, updateStudioIframeDimensions, isValidDimension, isValidEmbedType } 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)) {
+    updateStudioIframeDimensions(tinymce.activeEditor, e.data.width, e.data.height, e.data.embedType);
+  }
+};
 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);

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_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,11 @@ 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) => 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 {};