@instructure/canvas-rce 7.0.0 → 7.3.0

package/es/rce/RCEWrapperProps.d.ts

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

package/es/rce/ShowOnFocusButton/index.js

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

package/es/rce/StatusBar.js

@@ -28,7 +28,7 @@ import { Badge } from '@instructure/ui-badge';
 import { InstUISettingsProvider } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
 import { SVGIcon } from '@instructure/ui-svg-images';
-import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine } from '@instructure/ui-icons';
+import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine, IconAddLine, IconCheckMarkIndeterminateLine } from '@instructure/ui-icons';
 import formatMessage from '../format-message';
 import ResizeHandle from './ResizeHandle';
 import { FS_ENABLED } from '../util/fullscreenHelpers';
@@ -62,7 +62,7 @@ StatusBar.propTypes = {
   onAI: func
 };
 StatusBar.defaultProps = {
-  a11yBadgeColor: '#0374B5',
+  a11yBadgeColor: '#2B7ABC',
   a11yErrorsCount: 0,
   disabledPlugins: []
 };
@@ -80,16 +80,15 @@ function renderPathString({
 }
 function emptyTagIcon() {
   return /*#__PURE__*/React.createElement(SVGIcon, {
-    viewBox: "0 0 24 24",
-    fontSize: "24px"
+    viewBox: "0 0 1920 1920",
+    width: "1em",
+    height: "1em"
   }, /*#__PURE__*/React.createElement("g", {
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("text", {
-    textAnchor: "middle",
-    x: "12px",
-    y: "18px",
-    fontSize: "16"
-  }, "</>")));
+    role: "presentation",
+    transform: "scale(28.7) translate(0, 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 29.61L0 25.51L23.71 15.50L23.71 19.87L4.91 27.59L23.71 35.38L23.71 39.75L0 29.61ZM26.46 45.87L36.84 8.86L40.36 8.86L30.00 45.87L26.46 45.87ZM66.80 29.61L43.09 39.75L43.09 35.38L61.87 27.59L43.09 19.87L43.09 15.50L66.80 25.51L66.80 29.61Z"
+  })));
 }
 function findFocusable(el) {
   // eslint-disable-next-line react/no-find-dom-node
@@ -287,10 +286,15 @@ export default function StatusBar(props) {
       title: formatMessage('View word and character counts')
     }, wordCount)));
   }
-  function renderSection3(html_view, fullscreen, resize_handle) {
+  function renderSection3({
+    html_view,
+    fullscreen,
+    resize_handle,
+    a11y_resize_handlers
+  }) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: css(styles.separator)
-    }), html_view && renderToggleHtml(), fullscreen && renderFullscreen(), resize_handle && renderResizeHandle());
+    }), html_view && renderToggleHtml(), a11y_resize_handlers && renderAccessibleResizeHandle(), fullscreen && renderFullscreen(), resize_handle && renderResizeHandle());
   }
   function descMsg() {
     return preferredHtmlEditor() === RAW_HTML_EDITOR_VIEW ? formatMessage('Shift-O to open the pretty html editor.') : formatMessage('The pretty html editor is not keyboard accessible. Press Shift O to open the raw html editor.');
@@ -351,7 +355,11 @@ export default function StatusBar(props) {
       screenReaderLabel: fullscreen,
       withBackground: false,
       withBorder: false
-    }, props.rceIsFullscreen ? /*#__PURE__*/React.createElement(IconExitFullScreenLine, null) : /*#__PURE__*/React.createElement(IconFullScreenLine, null));
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: '0.9rem'
+      }
+    }, props.rceIsFullscreen ? /*#__PURE__*/React.createElement(IconExitFullScreenLine, null) : /*#__PURE__*/React.createElement(IconFullScreenLine, null)));
   }
   function renderResizeHandle() {
     if (props.rceIsFullscreen) return null;
@@ -364,10 +372,43 @@ export default function StatusBar(props) {
       }
     });
   }
+  function renderAccessibleResizeHandle() {
+    if (props.rceIsFullscreen) return null;
+    const increaseBtnId = 'rce-resize-increase-btn';
+    const decreaseBtnId = 'rce-resize-decrease-btn';
+    const handleResize = deltaY => {
+      props.onResize(null, {
+        deltaY,
+        deltaX: 0
+      });
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
+      "data-btn-id": increaseBtnId,
+      "data-testid": increaseBtnId,
+      color: "secondary",
+      title: formatMessage('Increase Rich Content Area'),
+      tabIndex: tabIndexForBtn(increaseBtnId),
+      onFocus: () => setFocusedBtnId(increaseBtnId),
+      withBackground: false,
+      withBorder: false,
+      onClick: () => handleResize(5)
+    }, /*#__PURE__*/React.createElement(IconAddLine, null)), /*#__PURE__*/React.createElement(IconButton, {
+      "data-btn-id": decreaseBtnId,
+      "data-testid": decreaseBtnId,
+      color: "secondary",
+      title: formatMessage('Decrease Rich Content Area'),
+      tabIndex: tabIndexForBtn(decreaseBtnId),
+      onFocus: () => setFocusedBtnId(decreaseBtnId),
+      withBackground: false,
+      withBorder: false,
+      onClick: () => handleResize(-5)
+    }, /*#__PURE__*/React.createElement(IconCheckMarkIndeterminateLine, null)));
+  }
   const flexJustify = isHtmlView() ? 'end' : 'start';
   const html_view = isFeature('html_view') && isAvailable('instructure_html_view');
   const fullscreen = isFeature('fullscreen') && isAvailable('instructure_fullscreen');
   const resize_handle = isFeature('resize_handle');
+  const a11y_resize_handlers = isFeature('a11y_resize_handlers');
   return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
     theme: {
       componentOverrides: {
@@ -388,7 +429,12 @@ export default function StatusBar(props) {
   }, isHtmlView() ? renderHtmlEditorMessage() : renderPath()), /*#__PURE__*/React.createElement(Flex.Item, {
     role: "toolbar",
     title: formatMessage('Editor Status Bar')
-  }, renderIconButtons(), isFeature('word_count') && isAvailable('instructure_wordcount') && renderWordCount(), (html_view || fullscreen || resize_handle) && renderSection3(html_view, fullscreen, resize_handle))));
+  }, renderIconButtons(), isFeature('word_count') && isAvailable('instructure_wordcount') && renderWordCount(), (html_view || fullscreen || resize_handle) && renderSection3({
+    html_view,
+    fullscreen,
+    resize_handle,
+    a11y_resize_handlers
+  }))));
 }
 const styles = StyleSheet.create({
   separator: {

package/es/rce/alertHandler.js

@@ -24,6 +24,12 @@
  */
 export class AlertHandler {
   constructor(alertFunc) {
+    /**
+     * Calls the registered alertFunc assuming one has been set, otherwise
+     * it throws.
+     *
+     * @memberof AlertHandler
+     */
     this.handleAlert = alert => {
       if (this.alertFunc == null) {
         throw new Error('Tried to alert without alertFunc being set first');
@@ -32,12 +38,5 @@ export class AlertHandler {
     };
     this.alertFunc = alertFunc;
   }
-
-  /**
-   * Calls the registered alertFunc assuming one has been set, otherwise
-   * it throws.
-   *
-   * @memberof AlertHandler
-   */
 }
 export default new AlertHandler();

package/es/rce/plugins/instructure-ui-icons/plugin.js

@@ -112,13 +112,13 @@ tinymce.PluginManager.add('instructure-ui-icons', function (editor) {
     embed: {
       src: `<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="M13.7647 5.21417C13.6694 5.21417 13.5773 5.23988 13.482 5.24631C12.8329 3.36281 11.0795 2 9 2C6.53506 2 4.52435 3.91029 4.28294 6.34234C4.09341 6.31127 3.90176 6.28556 3.70588 6.28556C1.66235 6.28556 0 7.96764 0 10.0354C0 12.1032 1.66235 13.7853 3.70588 13.7853L5 13.7853V12.7139L3.70588 12.7139C2.24682 12.7139 1.05882 11.5129 1.05882 10.0354C1.05882 8.55798 2.24682 7.35695 3.70588 7.35695C4.40259 7.35695 5.06012 7.62908 5.55882 8.12192L6.29894 7.35588C6.00565 7.0666 5.66788 6.84483 5.30894 6.66912C5.38941 4.67419 7.00835 3.07139 9 3.07139C11.0435 3.07139 12.7059 4.75347 12.7059 6.82126C12.7059 7.1491 12.6635 7.47266 12.582 7.78658L13.6059 8.06085C13.7107 7.65801 13.7647 7.24124 13.7647 6.82126C13.7647 6.64019 13.7308 6.4677 13.7118 6.29199C13.7298 6.29199 13.7467 6.28556 13.7647 6.28556C15.516 6.28556 16.9412 7.72765 16.9412 9.49973C16.9412 11.2718 15.516 12.7139 13.7647 12.7139L13 12.7139V13.7853L13.7647 13.7853C16.1005 13.7853 18 11.8632 18 9.49973C18 7.13624 16.1005 5.21417 13.7647 5.21417Z" fill="#2B3B46"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.72039 10.6479L8.3603 11.1813L6.75882 13.1025L8.36029 15.0239L7.72038 15.5573L5.6748 13.1024L7.72039 10.6479ZM10.2802 10.6479L12.3258 13.1024L10.2802 15.5573L9.64031 15.0239L11.2418 13.1025L9.6403 11.1813L10.2802 10.6479Z" fill="#2D3B45"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.72039 10.6479L8.3603 11.1813L6.75882 13.1025L8.36029 15.0239L7.72038 15.5573L5.6748 13.1024L7.72039 10.6479ZM10.2802 10.6479L12.3258 13.1024L10.2802 15.5573L9.64031 15.0239L11.2418 13.1025L9.6403 11.1813L10.2802 10.6479Z" fill="#273540"/>
       </svg>`
     },
     buttons: {
       src: `
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-          <g fill="#2D3B45" clip-path="url(#clip0)">
+          <g fill="#273540" clip-path="url(#clip0)">
             <path fill-rule="evenodd" d="M.999993 11l.000001 6H6.99999v-6H.999993zm-.99999933 7H7.99999v-8H-.00000668l3.5e-7 8zM4 7c1.65685 0 3-1.34315 3-3S5.65685 1 4 1 1 2.34315 1 4s1.34315 3 3 3zm0 1c2.20914 0 4-1.79086 4-4S6.20914 0 4 0-3e-7 1.79086-3e-7 4 1.79086 8 4 8z" clip-rule="evenodd"/>
             <path d="M12.5 10h1v8h-1v-8z"/>
             <path d="M17 13.5v1H9v-1h8z"/>

package/es/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -49,6 +49,9 @@ export default class EquationEditorModal extends Component {
     };
     this.previewElement = /*#__PURE__*/React.createRef();
     this.advancedEditor = /*#__PURE__*/React.createRef();
+    // ********* //
+    // Callbacks //
+    // ********* //
     this.executeCommand = (cmd, advancedCmd) => {
       if (this.state.advanced) {
         const insertionText = advancedCmd || cmd;
@@ -123,6 +126,9 @@ export default class EquationEditorModal extends Component {
     this.handleFieldRef = node => {
       this.mathField = node;
     };
+    // ******************* //
+    // Rendering functions //
+    // ******************* //
     this.renderFooter = () => {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
         "data-testid": "equation-editor-modal-cancel",
@@ -247,11 +253,6 @@ export default class EquationEditorModal extends Component {
     const normalizedLatex = latex.replace(/\s+/, '');
     return containsAdvancedSyntax(normalizedLatex);
   }
-
-  // ********* //
-  // Callbacks //
-  // ********* //
-
   setPreviewElementContent() {
     if (this.state.workingFormula) {
       this.renderMathInAdvancedPreview();
@@ -259,11 +260,6 @@ export default class EquationEditorModal extends Component {
       this.previewElement.current.innerHTML = '';
     }
   }
-
-  // ******************* //
-  // Rendering functions //
-  // ******************* //
-
   componentDidMount() {
     this.registerBasicEditorListener();
     this.setPreviewElementContent();

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.d.ts

@@ -1,9 +1,9 @@
 export default Course;
-declare function Course({ dispatch, onChange, onLoading, onLoaded, canvasOrigin }: {
-    dispatch: any;
-    onChange: any;
-    onLoading: any;
-    onLoaded: any;
+declare function Course({ dispatch, onChange, onLoading, onLoaded, canvasOrigin, }: {
+    dispatch?: (() => void) | undefined;
+    onChange?: (() => void) | undefined;
+    onLoading?: (() => void) | undefined;
+    onLoaded?: (() => void) | undefined;
     canvasOrigin: any;
 }): React.JSX.Element;
 declare namespace Course {
@@ -14,16 +14,6 @@ declare namespace Course {
         let onLoaded: PropTypes.Requireable<(...args: any[]) => any>;
         let canvasOrigin: PropTypes.Validator<string>;
     }
-    namespace defaultProps {
-        export function dispatch_1(): void;
-        export { dispatch_1 as dispatch };
-        export function onChange_1(): void;
-        export { onChange_1 as onChange };
-        export function onLoading_1(): void;
-        export { onLoading_1 as onLoading };
-        export function onLoaded_1(): void;
-        export { onLoaded_1 as onLoaded };
-    }
 }
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js

@@ -80,10 +80,10 @@ const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
   });
 };
 const Course = ({
-  dispatch,
-  onChange,
-  onLoading,
-  onLoaded,
+  dispatch = () => {},
+  onChange = () => {},
+  onLoading = () => {},
+  onLoaded = () => {},
   canvasOrigin
 }) => {
   const storeProps = useStoreProps();
@@ -161,10 +161,4 @@ Course.propTypes = {
   onLoaded: PropTypes.func,
   canvasOrigin: PropTypes.string.isRequired
 };
-Course.defaultProps = {
-  dispatch: () => {},
-  onChange: () => {},
-  onLoading: () => {},
-  onLoaded: () => {}
-};
 export default Course;

package/es/rce/plugins/instructure_image/ImageEmbedOptions.d.ts

@@ -35,6 +35,10 @@ export function scaleToSize(imageSize: any, naturalWidth: any, naturalHeight: an
     width: any;
     height: any;
 };
+export function scaleVideoSize(videoSize: any, naturalWidth: any, naturalHeight: any): {
+    width: any;
+    height: any;
+};
 export function labelForImageSize(imageSize: any): string;
 export const MIN_HEIGHT: 10;
 export const MIN_WIDTH: 10;
@@ -47,3 +51,6 @@ export const EXTRA_LARGE: "extra-large";
 export const CUSTOM: "custom";
 export const imageSizes: string[];
 export const videoSizes: string[];
+export const studioPlayerSizes: string[];
+export const MIN_WIDTH_STUDIO_PLAYER: number;
+export const MIN_HEIGHT_STUDIO_PLAYER: number;

package/es/rce/plugins/instructure_image/ImageEmbedOptions.js

@@ -18,6 +18,7 @@
 
 import formatMessage from '../../../format-message';
 import { scaleForHeight, scaleForWidth } from '../shared/DimensionUtils';
+import RCEGlobals from '../../../rce/RCEGlobals';
 export const MIN_HEIGHT = 10;
 export const MIN_WIDTH = 10;
 export const MIN_WIDTH_VIDEO = 320;
@@ -29,12 +30,29 @@ export const EXTRA_LARGE = 'extra-large';
 export const CUSTOM = 'custom';
 export const imageSizes = [SMALL, MEDIUM, LARGE, EXTRA_LARGE, CUSTOM];
 export const videoSizes = [MEDIUM, LARGE, EXTRA_LARGE, CUSTOM];
+export const studioPlayerSizes = [SMALL, MEDIUM, LARGE, CUSTOM];
 const sizeByMaximumDimension = {
   200: SMALL,
   320: MEDIUM,
   400: LARGE,
   640: EXTRA_LARGE
 };
+const studioPlayerDimensions = {
+  [SMALL]: {
+    width: 320,
+    height: 254
+  },
+  [MEDIUM]: {
+    width: 480,
+    height: 300
+  },
+  [LARGE]: {
+    width: 700,
+    height: 441
+  }
+};
+export const MIN_WIDTH_STUDIO_PLAYER = studioPlayerDimensions[SMALL].width;
+export const MIN_HEIGHT_STUDIO_PLAYER = studioPlayerDimensions[SMALL].height;
 function parsedOrNull($element, attribute) {
   // when the image is first inserted into the rce, it's size
   // is constrained by a style attribute with max-width, max-height.
@@ -49,6 +67,9 @@ function imageSizeFromKnownOptions(imageOptions) {
   const largestDimension = Math.max(intendedWidth, intendedHeight);
   return sizeByMaximumDimension[largestDimension] || CUSTOM;
 }
+function hasHeightAndWidth($element) {
+  return $element.hasAttribute('width') && $element.hasAttribute('height');
+}
 function getPercentageUnitsFromAttributes($element) {
   const getAttribute = attribute => $element.hasAttribute(attribute) ? $element.getAttribute(attribute) : $element[attribute];
   const widthValue = getAttribute('width');
@@ -65,7 +86,8 @@ export function fromImageEmbed($element) {
     naturalWidth: $element.naturalWidth,
     naturalHeight: $element.naturalHeight,
     appliedPercentage: percentageUnits || 100,
-    usePercentageUnits: !!percentageUnits,
+    // by default use percentage units
+    usePercentageUnits: hasHeightAndWidth($element) ? !!percentageUnits : true,
     altText: altText || '',
     isDecorativeImage: altText !== null && altText.replace(/\s/g, '') === '',
     url: $element.src
@@ -115,7 +137,12 @@ export function fromVideoEmbed($element) {
   } catch (_ignore) {
     // bad json?
   }
-  videoOptions.videoSize = imageSizeFromKnownOptions(videoOptions);
+  if (RCEGlobals.getFeatures()?.consolidated_media_player) {
+    const width = videoOptions.appliedWidth || videoOptions.naturalWidth;
+    videoOptions.videoSize = [SMALL, MEDIUM, LARGE].find(size => width === studioPlayerDimensions[size].width) || CUSTOM;
+  } else {
+    videoOptions.videoSize = imageSizeFromKnownOptions(videoOptions);
+  }
   const source = $videoIframe.getAttribute('src');
   const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
   if (matches) {
@@ -151,6 +178,22 @@ export function scaleToSize(imageSize, naturalWidth, naturalHeight) {
     width: Math.round(naturalWidth * scaleFactor)
   };
 }
+export function scaleVideoSize(videoSize, naturalWidth, naturalHeight) {
+  if (videoSize === CUSTOM) {
+    return {
+      width: naturalWidth,
+      height: naturalHeight
+    };
+  }
+  const {
+    width,
+    height
+  } = studioPlayerDimensions[videoSize];
+  return {
+    width,
+    height
+  };
+}
 export function labelForImageSize(imageSize) {
   switch (imageSize) {
     case SMALL:

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/ExternalToolDialog/ExternalToolDialog.d.ts

@@ -10,29 +10,22 @@ export default class ExternalToolDialog extends React.Component<ExternalToolDial
     static defaultProps: Partial<ExternalToolDialogProps>;
     state: ExternalToolDialogState;
     formRef: React.RefObject<HTMLFormElement>;
-    beforeInfoAlertRef: React.RefObject<HTMLDivElement>;
-    afterInfoAlertRef: React.RefObject<HTMLDivElement>;
     iframeRef: React.RefObject<HTMLIFrameElement>;
     open(button: RceToolWrapper): void;
     close(): void;
     handleBeforeUnload: (ev: Event) => string;
     private handleExternalContentReady;
     get resourceSelectionOrigin(): string;
-    handlePostedMessage: (ev: Pick<MessageEvent, "origin" | "data">) => void;
+    handlePostedMessage: (ev: Pick<MessageEvent, "origin" | "data" | "source">) => void;
     handleClose: () => void;
     handleOpen: () => void;
     handleRemove: () => void;
-    handleInfoAlertFocus: (ev: {
-        target: Element;
-    }) => void;
-    handleInfoAlertBlur: () => void;
     calcIFrameHeight: () => string;
     render(): React.JSX.Element;
 }
 interface ExternalToolDialogState {
     open: boolean;
     button: RceToolWrapper | null;
-    infoAlert: Element | null;
     form: ExternalToolDialogForm;
     iframeLoaded: boolean;
 }

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

@@ -21,7 +21,6 @@ import _pt from "prop-types";
 
 import { replaceTags } from '../../helpers/tags';
 import React, { createRef } from 'react';
-import { Alert } from '@instructure/ui-alerts';
 import { Spinner } from '@instructure/ui-spinner';
 import { Flex } from '@instructure/ui-flex';
 import ToolLaunchIframe from '../util/ToolLaunchIframe';
@@ -39,13 +38,10 @@ export default class ExternalToolDialog extends React.Component {
     this.state = {
       open: false,
       button: null,
-      infoAlert: null,
       form: EMPTY_FORM,
       iframeLoaded: false
     };
     this.formRef = /*#__PURE__*/createRef();
-    this.beforeInfoAlertRef = /*#__PURE__*/createRef();
-    this.afterInfoAlertRef = /*#__PURE__*/createRef();
     this.iframeRef = /*#__PURE__*/createRef();
     this.handleBeforeUnload = ev => ev.returnValue = formatMessage('Changes you made may not be saved.');
     this.handleExternalContentReady = data => {
@@ -78,6 +74,7 @@ export default class ExternalToolDialog extends React.Component {
       this.close();
     };
     this.handlePostedMessage = ev => {
+      // messages from Canvas in the tool launch frame
       if (ev.origin === this.resourceSelectionOrigin) {
         const data = ev.data;
         if (data?.subject === 'LtiDeepLinkingResponse') {
@@ -89,6 +86,16 @@ export default class ExternalToolDialog extends React.Component {
           this.handleExternalContentReady(ev.data);
         }
       }
+      // messages from the tool
+      const data = ev.data;
+      if (data?.subject === 'lti.close') {
+        // Note we currently don't support this message from the forwarder
+        // iframe as it's not required by 1EdTech spec and requires more
+        // complicated source checking here (see INTEROP-9213)
+        if (ev.source === this.iframeRef?.current?.contentWindow) {
+          this.handleClose();
+        }
+      }
     };
     this.handleClose = () => {
       const msg = formatMessage('Are you sure you want to cancel? Changes you made may not be saved.');
@@ -108,12 +115,6 @@ export default class ExternalToolDialog extends React.Component {
       // force tinyMCE to redraw sticky toolbar otherwise it never goes away
       window.dispatchEvent(new Event('resize'));
     };
-    this.handleInfoAlertFocus = ev => this.setState({
-      infoAlert: ev.target
-    });
-    this.handleInfoAlertBlur = () => this.setState({
-      infoAlert: null
-    });
     this.calcIFrameHeight = () => {
       if (this.state.button?.use_tray) {
         return '100%';
@@ -239,16 +240,7 @@ export default class ExternalToolDialog extends React.Component {
       onClose: this.handleRemove,
       onCloseButton: this.handleClose,
       name: (_state$button$title = state.button?.title) !== null && _state$button$title !== void 0 ? _state$button$title : ' '
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: this.beforeInfoAlertRef,
-      tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      onFocus: this.handleInfoAlertFocus,
-      onBlur: this.handleInfoAlertBlur,
-      className: this.beforeInfoAlertRef.current != null && state.infoAlert === this.beforeInfoAlertRef.current ? '' : 'screenreader-only'
-    }, /*#__PURE__*/React.createElement(Alert, {
-      margin: "small"
-    }, formatMessage('The following content is partner provided'))), !state.iframeLoaded && /*#__PURE__*/React.createElement(Flex, {
+    }, !state.iframeLoaded && /*#__PURE__*/React.createElement(Flex, {
       alignItems: "center",
       justifyItems: "center"
     }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
@@ -272,19 +264,7 @@ export default class ExternalToolDialog extends React.Component {
       onLoad: () => this.setState({
         iframeLoaded: true
       })
-    }), /*#__PURE__*/React.createElement("div", {
-      ref: this.afterInfoAlertRef,
-      tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      onFocus: this.handleInfoAlertFocus,
-      onBlur: this.handleInfoAlertBlur,
-      style: this.afterInfoAlertRef.current != null && state.infoAlert === this.afterInfoAlertRef.current ? {} : {
-        bottom: '0'
-      },
-      className: this.afterInfoAlertRef.current != null && state.infoAlert === this.afterInfoAlertRef.current ? '' : 'screenreader-only'
-    }, /*#__PURE__*/React.createElement(Alert, {
-      margin: "small"
-    }, formatMessage('The preceding content is partner provided')))));
+    })));
   }
 }
 ExternalToolDialog.propTypes = {

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogModal.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ReactNodeLike } from 'prop-types';
 import { ModalProps } from '@instructure/ui-modal/types';
 export declare function ExternalToolDialogModal(props: Pick<ModalProps, 'label' | 'open' | 'onOpen' | 'onClose' | 'mountNode'> & {
     onCloseButton: () => void;
     name: string;
-    children: ReactNodeLike;
+    children: React.ReactNode;
 }): React.JSX.Element;

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogModal.js

@@ -30,7 +30,8 @@ export function ExternalToolDialogModal(props) {
     open: props.open,
     onOpen: props.onOpen,
     onClose: props.onClose,
-    mountNode: props.mountNode
+    mountNode: props.mountNode,
+    shouldCloseOnDocumentClick: false
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Heading, null, props.name), /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     offset: "medium",