@instructure/canvas-rce 6.0.0 → 7.0.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 7.0.0 - 2025-03-31
+
+### Fixed
+
+- Screen readers for RCE toolbar on mobile platform
+- Axios CSRF vulnerability
+- Mailto link insertion 
+
+### Changed
+
+- Upgraded Instui to v10
+- Refactored deprecated plugins to prepare for tinymce upgrade
+- Removed media_links_use_attachment_id feature flag
+
 ## 6.0.0 - 2025-03-20
 
 ### Changed

package/es/common/browser.js

@@ -31,8 +31,8 @@ export function reset() {
   });
 }
 export function set(env) {
-  isIE = !!env.ie;
-  isEdge = isIE && !!(env.edge || env.ie == 12);
+  isIE = env.browser.isIE();
+  isEdge = env.browser.isEdge();
 }
 export function ie() {
   return isIE;

package/es/common/fileUrl.js

@@ -21,18 +21,28 @@
 // in mocha tests.
 
 import RCEGlobals from '../rce/RCEGlobals';
+const CONTACT_PROTOCOLS = ['mailto:', 'tel:', 'skype:'];
+function parseUrl(url, canvasOrigin = window.location.origin) {
+  try {
+    // If the URL is already absolute, use it as-is
+    return new URL(url);
+  } catch {
+    return new URL(`${canvasOrigin}${url.startsWith('/') ? '' : '/'}${url}`);
+  }
+}
 function parseCanvasUrl(url, canvasOrigin = window.location.origin) {
   if (!url) {
     return null;
   }
   try {
-    // For absolute URLs
-    const fullUrl = url.startsWith('http') ? url : `${canvasOrigin}${url.startsWith('/') ? '' : '/'}${url}`;
-    const parsed = new URL(fullUrl);
+    const parsed = parseUrl(url, canvasOrigin);
     const canvasUrl = new URL(canvasOrigin);
     if (parsed.host && canvasUrl.host !== parsed.host) {
       return null;
     }
+    if (CONTACT_PROTOCOLS.includes(parsed.protocol)) {
+      return null;
+    }
 
     // Convert URLSearchParams to query object
     const query = {};

package/es/rce/RCEGlobals.d.ts

@@ -1,12 +1,10 @@
 export default instance;
 export type Features = {
-    media_links_use_attachment_id: boolean;
     file_verifiers_for_quiz_links: boolean;
 };
 declare const instance: RCEGlobals;
 /**
  * @typedef {Object} Features
- * @property {boolean} media_links_use_attachment_id
  * @property {boolean} file_verifiers_for_quiz_links
  */
 declare class RCEGlobals {

package/es/rce/RCEGlobals.js

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

package/es/rce/RCEVariants.d.ts

@@ -13,5 +13,5 @@ export type RCEVariant = (typeof RCEVariantValues)[number];
 export declare function getMenubarForVariant(variant: RCEVariant): MenuBarSpec;
 export declare function getMenuForVariant(variant: RCEVariant): MenusSpec;
 export declare function getToolbarForVariant(variant: RCEVariant, ltiToolFavorites?: string[]): ToolbarGroupSetting[];
-export declare function getStatusBarFeaturesForVariant(variant: RCEVariant, ai_text_tools?: boolean): StatusBarFeature[];
+export declare function getStatusBarFeaturesForVariant(variant: RCEVariant, aiTextTools?: boolean, isDesktop?: boolean): StatusBarFeature[];
 export {};

package/es/rce/RCEVariants.js

@@ -121,16 +121,16 @@ export function getToolbarForVariant(variant, ltiToolFavorites = []) {
     items: ['removeformat', 'table', 'instructure_equation', 'instructure_media_embed']
   }];
 }
-export function getStatusBarFeaturesForVariant(variant, ai_text_tools = false) {
-  if (variant === 'lite' || variant === 'text-only') {
-    return ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
-  }
+const DESKTOP_FEATURES = ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
+const MOBILE_FEATURES = ['a11y_checker', 'word_count'];
+const EXTENDED_FEATURES = ['html_view', 'fullscreen', 'resize_handle'];
+export function getStatusBarFeaturesForVariant(variant, aiTextTools = false, isDesktop = true) {
   if (variant === 'text-block') {
     return [];
   }
-  const full_features = ['keyboard_shortcuts', 'a11y_checker', 'word_count', 'html_view', 'fullscreen', 'resize_handle'];
-  if (ai_text_tools) {
-    full_features.push('ai_tools');
+  const platformFeatures = isDesktop ? DESKTOP_FEATURES : MOBILE_FEATURES;
+  if (variant === 'lite' || variant === 'text-only') {
+    return platformFeatures;
   }
-  return full_features;
+  return [...platformFeatures, ...EXTENDED_FEATURES, ...(aiTextTools ? ['ai_tools'] : [])];
 }

package/es/rce/RCEWrapper.d.ts

@@ -214,7 +214,6 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
         new_math_equation_handling: unknown;
         explicit_latex_typesetting: unknown;
         rce_transform_loaded_content: unknown;
-        media_links_use_attachment_id: unknown;
         file_verifiers_for_quiz_links: unknown;
         rce_find_replace: unknown;
         consolidated_media_player: unknown;
@@ -348,7 +347,6 @@ declare class RCEWrapper extends React.Component<RCEWrapperProps, RCEWrapperStat
         type: string;
         content: string;
     };
-    setFocusAbilityForHeader: (focusable: boolean) => void;
     componentWillUnmount(): void;
     wrapOptions(options?: {}): {
         readonly: boolean | undefined;

package/es/rce/RCEWrapper.js

@@ -19,6 +19,7 @@ import _pt from "prop-types";
 
 import React, { Suspense } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
+import tinymce from 'tinymce';
 import _ from 'lodash';
 import { StoreProvider } from './plugins/shared/StoreContext';
 import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
@@ -268,13 +269,11 @@ class RCEWrapper extends React.Component {
       if (event.code === 'F9' && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
-        this.setFocusAbilityForHeader(true);
         // @ts-expect-error
         focusFirstMenuButton(this._elementRef.current);
       } else if (event.code === 'F10' && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
-        this.setFocusAbilityForHeader(true);
         // @ts-expect-error
         focusToolbar(this._elementRef.current);
       } else if (event.code === 'F8' && event.altKey) {
@@ -329,20 +328,6 @@ class RCEWrapper extends React.Component {
         tinyapp.setAttribute('tabIndex', '-1');
       }
 
-      // Adds a focusout event listener for handling screen reader navigation focus
-      const header = this._elementRef.current?.querySelector('.tox-editor-header');
-      if (header) {
-        // @ts-expect-error
-        header.addEventListener('focusout', e => {
-          // @ts-expect-error
-          const leavingHeader = !header.contains(e.relatedTarget);
-          if (leavingHeader) {
-            this.setFocusAbilityForHeader(false);
-          }
-        });
-      }
-      this.setFocusAbilityForHeader(false);
-
       // Probably should do this in tinymce.scss, but we only want it in new rce
       textarea.style.resize = 'none';
       editor.on('keydown', this.handleKey);
@@ -705,13 +690,6 @@ class RCEWrapper extends React.Component {
         content: this.mceInstance().getContent()
       };
     };
-    this.setFocusAbilityForHeader = focusable => {
-      // Sets aria-hidden to prevent screen readers focus in RCE menus and toolbar
-      const header = this._elementRef.current?.querySelector('.tox-editor-header');
-      if (header) {
-        header.setAttribute('aria-hidden', focusable ? 'false' : 'true');
-      }
-    };
     this.handleTextareaChange = () => {
       if (this.isHidden()) {
         this.setCode(this.textareaValue());
@@ -853,7 +831,6 @@ class RCEWrapper extends React.Component {
       new_math_equation_handling = false,
       explicit_latex_typesetting = false,
       rce_transform_loaded_content = false,
-      media_links_use_attachment_id = false,
       rce_find_replace = false,
       file_verifiers_for_quiz_links = false,
       consolidated_media_player = false
@@ -862,7 +839,6 @@ class RCEWrapper extends React.Component {
       new_math_equation_handling,
       explicit_latex_typesetting,
       rce_transform_loaded_content,
-      media_links_use_attachment_id,
       file_verifiers_for_quiz_links,
       rce_find_replace,
       consolidated_media_player
@@ -1732,7 +1708,7 @@ class RCEWrapper extends React.Component {
         }
       });
     }
-    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, this.props.ai_text_tools);
+    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, this.props.ai_text_tools, tinymce.Env.deviceType.isDesktop());
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, this.style.css), /*#__PURE__*/React.createElement(StoreProvider, {
       jwt: this.props.trayProps?.jwt,
       refreshToken: this.props.trayProps?.refreshToken,
@@ -1754,7 +1730,7 @@ class RCEWrapper extends React.Component {
         } : undefined,
         onFocus: this.handleFocusRCE,
         onBlur: this.handleBlurRCE
-      }, this.state.shouldShowOnFocusButton && /*#__PURE__*/React.createElement(ShowOnFocusButton, {
+      }, this.state.shouldShowOnFocusButton && tinymce.Env.deviceType.isDesktop() && /*#__PURE__*/React.createElement(ShowOnFocusButton, {
         id: `show-on-focus-btn-${this.id}`,
         onClick: this.openKBShortcutModal,
         margin: "xx-small",

package/es/rce/plugins/instructure_equation/EquationEditorModal/index.d.ts

@@ -13,7 +13,7 @@ declare class EquationEditorModal extends React.Component<any, any, any> {
     executeCommand: (cmd: any, advancedCmd: any) => void;
     handleModalCancel: () => void;
     handleModalDone: () => void;
-    renderMathInAdvancedPreview: import("@instructure/debounce").Debounced;
+    renderMathInAdvancedPreview: import("@instructure/debounce").Debounced<() => void>;
     setPreviewElementContent(): void;
     toggleAdvanced: () => void;
     toggleAndUpdatePreference: () => void;

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

@@ -18,7 +18,6 @@
 
 import formatMessage from '../../../format-message';
 import { scaleForHeight, scaleForWidth } from '../shared/DimensionUtils';
-import RCEGlobals from '../../RCEGlobals';
 export const MIN_HEIGHT = 10;
 export const MIN_WIDTH = 10;
 export const MIN_WIDTH_VIDEO = 320;
@@ -117,12 +116,10 @@ export function fromVideoEmbed($element) {
     // bad json?
   }
   videoOptions.videoSize = imageSizeFromKnownOptions(videoOptions);
-  if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
-    const source = $videoIframe.getAttribute('src');
-    const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
-    if (matches) {
-      videoOptions.attachmentId = matches[1];
-    }
+  const source = $videoIframe.getAttribute('src');
+  const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
+  if (matches) {
+    videoOptions.attachmentId = matches[1];
   }
   return videoOptions;
 }

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

@@ -21,7 +21,6 @@ import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
 import { asAudioElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
 import AudioOptionsTray from '.';
-import RCEGlobals from '../../../RCEGlobals';
 export const CONTAINER_ID = 'instructure-audio-options-tray-container';
 export default class TrayController {
   constructor() {
@@ -74,7 +73,7 @@ export default class TrayController {
     return elem.parentNode.removeChild(elem);
   }
   _applyAudioOptions(audioOptions) {
-    const hasAttachmentId = RCEGlobals.getFeatures().media_links_use_attachment_id && audioOptions.attachment_id;
+    const hasAttachmentId = audioOptions.attachment_id;
     if (!hasAttachmentId && (!audioOptions.media_object_id || audioOptions.media_object_id === 'undefined')) {
       return;
     }

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

@@ -118,11 +118,9 @@ export default class TrayController {
       const data = {
         media_object_id: videoOptions.media_object_id,
         title: videoOptions.titleText,
-        subtitles: videoOptions.subtitles
+        subtitles: videoOptions.subtitles,
+        attachment_id: videoOptions.attachment_id
       };
-      if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
-        data.attachment_id = videoOptions.attachment_id;
-      }
 
       // If the video just edited came from a file uploaded to canvas
       // and not notorious, we probably don't have a media_object_id.

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

@@ -20,7 +20,6 @@ import { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedO
 import { isOnlyTextSelected } from '../../contentInsertionUtils';
 import formatMessage from '../../../format-message';
 import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
-import RCEGlobals from '../../RCEGlobals';
 import { parseUrlPath } from '../../../util/url-util';
 const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
 export const LINK_TYPE = 'link';
@@ -124,12 +123,10 @@ export function asAudioElement($element) {
       // eslint-disable-next-line no-empty
     } catch (e) {}
   }
-  if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
-    const source = $audioIframe.getAttribute('src');
-    const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
-    if (matches) {
-      audioOptions.attachmentId = matches[1];
-    }
+  const source = $audioIframe.getAttribute('src');
+  const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
+  if (matches) {
+    audioOptions.attachmentId = matches[1];
   }
   return audioOptions;
 }

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

@@ -83,7 +83,7 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   if (typeof content_type !== 'string') throw new Error('Invalid content type');
   const type = content_type.replace(/\/.*$/, '');
   const baseOrigin = canvasOrigin !== null && canvasOrigin !== void 0 ? canvasOrigin : window.location.origin;
-  if (RCEGlobals.getFeatures()?.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
+  if (isAudioOrVideo(content_type) && file.id) {
     const url = new URL(`/media_attachments_iframe/${file.id}`, baseOrigin);
     url.searchParams.set('type', type);
     url.searchParams.set('embedded', 'true');

package/es/rce/plugins/tinymce-a11y-checker/plugin.js

@@ -27,60 +27,58 @@ const pendingInstanceCallbacks = [];
 const container = document.createElement('div');
 container.className = 'tinymce-a11y-checker-container';
 document.body.appendChild(container);
-tinymce.create('tinymce.plugins.AccessibilityChecker', {
-  init(ed) {
-    ed.addCommand('openAccessibilityChecker', function (ui, {
-      done,
-      config,
-      additionalRules,
-      mountNode,
-      triggerElementId,
-      onFixError
-    }) {
-      if (!isCheckerOpen) {
-        ReactDOM.render(/*#__PURE__*/React.createElement(Checker, {
-          getBody: ed.getBody.bind(ed),
-          editor: ed,
-          additionalRules: additionalRules,
-          mountNode: mountNode,
-          onClose: () => {
-            isCheckerOpen = false;
-            if (triggerElementId) {
-              const button = document.querySelectorAll(`[data-btn-id=${triggerElementId}]`);
-              button[0]?.focus();
-            }
-          },
-          onFixError: onFixError
-        }), container, function () {
-          // this is a workaround for react 16 since ReactDOM.render is not
-          // guaranteed to return the instance synchronously (especially if called
-          // within another component's lifecycle method eg: componentDidMount). see:
-          // https://github.com/facebook/react/issues/10309#issuecomment-318434635
-          instance = this;
-          if (config) getInstance(instance => instance.setConfig(config));
-          pendingInstanceCallbacks.forEach(cb => cb(instance));
-          instance.check(done);
-        });
-        isCheckerOpen = true;
-      }
-    });
-    ed.addCommand('checkAccessibility', function (ui, {
-      done,
-      config,
-      additionalRules
-    }) {
-      checkNode(ed.getBody(), done, config, additionalRules);
-    });
-    ed.ui.registry.addButton('check_a11y', {
-      title: formatMessage('Check Accessibility'),
-      onAction: _ => ed.execCommand('openAccessibilityChecker'),
-      icon: 'a11y'
-    });
-  }
-});
+const AccessibilityChecker = function (ed) {
+  ed.addCommand('openAccessibilityChecker', function (ui, {
+    done,
+    config,
+    additionalRules,
+    mountNode,
+    triggerElementId,
+    onFixError
+  }) {
+    if (!isCheckerOpen) {
+      ReactDOM.render(/*#__PURE__*/React.createElement(Checker, {
+        getBody: ed.getBody.bind(ed),
+        editor: ed,
+        additionalRules: additionalRules,
+        mountNode: mountNode,
+        onClose: () => {
+          isCheckerOpen = false;
+          if (triggerElementId) {
+            const button = document.querySelectorAll(`[data-btn-id=${triggerElementId}]`);
+            button[0]?.focus();
+          }
+        },
+        onFixError: onFixError
+      }), container, function () {
+        // this is a workaround for react 16 since ReactDOM.render is not
+        // guaranteed to return the instance synchronously (especially if called
+        // within another component's lifecycle method eg: componentDidMount). see:
+        // https://github.com/facebook/react/issues/10309#issuecomment-318434635
+        instance = this;
+        if (config) getInstance(instance => instance.setConfig(config));
+        pendingInstanceCallbacks.forEach(cb => cb(instance));
+        instance.check(done);
+      });
+      isCheckerOpen = true;
+    }
+  });
+  ed.addCommand('checkAccessibility', function (ui, {
+    done,
+    config,
+    additionalRules
+  }) {
+    checkNode(ed.getBody(), done, config, additionalRules);
+  });
+  ed.ui.registry.addButton('check_a11y', {
+    title: formatMessage('Check Accessibility'),
+    onAction: _ => ed.execCommand('openAccessibilityChecker'),
+    icon: 'a11y'
+  });
+};
 
 // Register plugin
-tinymce.PluginManager.add('a11y_checker', tinymce.plugins.AccessibilityChecker);
+tinymce.PluginManager.add('a11y_checker', AccessibilityChecker);
 export function getInstance(cb) {
   if (instance != null) {
     return cb(instance);

package/es/rce/style.js

@@ -62,44 +62,44 @@ export default function buildStyle() {
       break;
     case 'canvas-a11y':
     case 'canvas-high-contrast':
-      themeCanvasButtonBackground = variables.colors.backgroundLight;
-      themeCanvasSecondaryButtonBorderColor = variables.colors.borderMedium;
+      themeCanvasButtonBackground = variables.colors.contrasts.grey1111;
+      themeCanvasSecondaryButtonBorderColor = variables.colors.contrasts.grey1214;
       themeCanvasLinkDecoration = 'underline';
-      themeCanvasFocusBorderColor = variables.colors.borderBrand;
+      themeCanvasFocusBorderColor = variables.colors.contrasts.blue4570;
       themeCanvasFocusBoxShadow = `0 0 0 2px ${variables.colors.brand}`;
       themeCanvasBrandColor = variables.colors.brand;
       break;
     default:
       themeCanvasLinkColor = variables.colors.link;
       themeCanvasLinkDecoration = 'none';
-      themeCanvasTextColor = variables.colors.textDarkest;
+      themeCanvasTextColor = variables.colors.contrasts.grey125125;
       themeCanvasBrandColor = variables.colors.brand;
       themeCanvasFocusBorderColor = variables.borders.brand;
       themeCanvasFocusBoxShadow = `0 0 0 2px ${variables.colors.brand}`;
       themeCanvasEnabledColor = variables.borders.brand;
-      themeCanvasPrimaryButtonBackground = variables.colors.backgroundBrand;
-      themeCanvasPrimaryButtonColor = variables.colors.textLightest;
-      themeCanvasPrimaryButtonHoverBackground = darken(variables.colors.backgroundBrand, 10);
-      themeActiveMenuItemBackground = variables.colors.backgroundBrand;
-      themeActiveMenuItemLabelColor = variables.colors.textLightest;
+      themeCanvasPrimaryButtonBackground = variables.colors.contrasts.blue4570;
+      themeCanvasPrimaryButtonColor = variables.colors.contrasts.white1010;
+      themeCanvasPrimaryButtonHoverBackground = darken(variables.colors.contrasts.blue4570, 10);
+      themeActiveMenuItemBackground = variables.colors.contrasts.blue4570;
+      themeActiveMenuItemLabelColor = variables.colors.contrasts.white1010;
       themeTableSelectorHighlightColor = alpha(lighten(variables.colors.brand, 10), 50);
-      themeCanvasButtonBackground = variables.colors.backgroundLightest;
-      themeCanvasSecondaryButtonBorderColor = darken(variables.colors.backgroundLight, 10);
+      themeCanvasButtonBackground = variables.colors.contrasts.white1010;
+      themeCanvasSecondaryButtonBorderColor = darken(variables.colors.contrasts.grey1111, 10);
       break;
   }
   const classNames = {
     root: 'canvas-rce__skins--root'
   };
-  const toolbarButtonHoverBackgroundConst = darken(variables.colors.backgroundLightest, 5);
+  const toolbarButtonHoverBackgroundConst = darken(variables.colors.contrasts.white1010, 5);
   const tinySplitButtonChevronHoverBackgroundConst = darken(toolbarButtonHoverBackgroundConst, 10);
   const theme = {
     canvasBackgroundColor: variables.colors.white,
     canvasTextColor: themeCanvasTextColor,
-    canvasErrorColor: variables.colors.textDanger,
-    canvasWarningColor: variables.colors.textWarning,
-    canvasInfoColor: variables.colors.textInfo,
-    canvasSuccessColor: variables.colors.textSuccess,
-    canvasBorderColor: variables.colors.borderMedium,
+    canvasErrorColor: variables.colors.contrasts.red4570,
+    canvasWarningColor: variables.colors.contrasts.orange4570,
+    canvasInfoColor: variables.colors.contrasts.blue4570,
+    canvasSuccessColor: variables.colors.contrasts.green4570,
+    canvasBorderColor: variables.colors.contrasts.grey1214,
     toolbarButtonHoverBackground: toolbarButtonHoverBackgroundConst,
     // copied from INSTUI "light" Button
     tinySplitButtonChevronHoverBackground: tinySplitButtonChevronHoverBackgroundConst,
@@ -112,10 +112,10 @@ export default function buildStyle() {
     // the instui default button
     canvasButtonBackground: themeCanvasButtonBackground,
     canvasButtonBorderColor: 'transparent',
-    canvasButtonColor: variables.colors.textDarkest,
-    canvasButtonHoverBackground: variables.colors.backgroundLightest,
+    canvasButtonColor: variables.colors.contrasts.grey125125,
+    canvasButtonHoverBackground: variables.colors.contrasts.white1010,
     canvasButtonHoverColor: variables.colors.brand,
-    canvasButtonActiveBackground: variables.colors.backgroundLightest,
+    canvasButtonActiveBackground: variables.colors.contrasts.white1010,
     canvasButtonFontWeight: variables.typography.fontWeightNormal,
     canvasButtonFontSize: variables.typography.fontSizeMedium,
     canvasButtonLineHeight: variables.forms.inputHeightMedium,
@@ -125,19 +125,19 @@ export default function buildStyle() {
     canvasPrimaryButtonColor: themeCanvasPrimaryButtonColor,
     canvasPrimaryButtonBorderColor: 'transparent',
     canvasPrimaryButtonHoverBackground: themeCanvasPrimaryButtonHoverBackground,
-    canvasPrimaryButtonHoverColor: variables.colors.textLightest,
+    canvasPrimaryButtonHoverColor: variables.colors.contrasts.white1010,
     // the instui secondary button
-    canvasSecondaryButtonBackground: variables.colors.backgroundLight,
-    canvasSecondaryButtonColor: variables.colors.textDarkest,
+    canvasSecondaryButtonBackground: variables.colors.contrasts.grey1111,
+    canvasSecondaryButtonColor: variables.colors.contrasts.grey125125,
     canvasSecondaryButtonBorderColor: themeCanvasSecondaryButtonBorderColor,
-    canvasSecondaryButtonHoverBackground: darken(variables.colors.backgroundLight, 10),
-    canvasSecondaryButtonHoverColor: variables.colors.textDarkest,
+    canvasSecondaryButtonHoverBackground: darken(variables.colors.contrasts.grey1111, 10),
+    canvasSecondaryButtonHoverColor: variables.colors.contrasts.grey125125,
     canvasFocusBorderColor: themeCanvasFocusBorderColor,
     canvasFocusBorderWidth: variables.borders.widthSmall,
     // canvas really uses widthMedium
     canvasFocusBoxShadow: themeCanvasFocusBoxShadow,
     canvasEnabledColor: themeCanvasEnabledColor,
-    canvasEnabledBoxShadow: `inset 0 0 0.1875rem 0.0625rem ${darken(variables.colors.borderLightest, 25)}`,
+    canvasEnabledBoxShadow: `inset 0 0 0.1875rem 0.0625rem ${darken(variables.colors.contrasts.white1010, 25)}`,
     canvasFontFamily: variables.typography.fontFamily,
     canvasFontSize: '1rem',
     canvasFontSizeSmall: variables.typography.fontSizeSmall,
@@ -148,14 +148,14 @@ export default function buildStyle() {
     canvasModalHeadingFontWeight: variables.typography.fontWeightNormal,
     canvasModalBodyPadding: variables.spacing.medium,
     canvasModalFooterPadding: variables.spacing.small,
-    canvasModalFooterBackground: variables.colors.backgroundLight,
+    canvasModalFooterBackground: variables.colors.contrasts.grey1111,
     canvasFormElementMargin: `0 0 ${variables.spacing.medium} 0`,
-    canvasFormElementLabelColor: variables.colors.textDarkest,
+    canvasFormElementLabelColor: variables.colors.contrasts.grey125125,
     canvasFormElementLabelMargin: `0 0 ${variables.spacing.small} 0`,
     canvasFormElementLabelFontSize: variables.typography.fontSizeMedium,
     canvasFormElementLabelFontWeight: variables.typography.fontWeightBold,
     // a11y button badge
-    canvasBadgeBackgroundColor: variables.colors.textInfo
+    canvasBadgeBackgroundColor: variables.colors.contrasts.blue4570
   };
   const css = `
   .${classNames.root} {

package/es/rcs/api.d.ts

@@ -63,7 +63,10 @@ declare class RceApiSource {
         bookmark: any;
         files: any;
     }>;
-    fetchMedia(props: any): Promise<any>;
+    fetchMedia(props: any): Promise<{
+        bookmark: any;
+        files: any;
+    }>;
     fetchFiles(uri: any): Promise<{
         bookmark: any;
         files: any;

package/es/rcs/api.js

@@ -21,7 +21,6 @@ import { saveClosedCaptions, saveClosedCaptionsForAttachment, CONSTANTS } from '
 import { downloadToWrap, fixupFileUrl } from '../common/fileUrl';
 import alertHandler from '../rce/alertHandler';
 import buildError from './buildError';
-import RCEGlobals from '../rce/RCEGlobals';
 import { parseUrlPath } from '../util/url-util';
 export function headerFor(jwt) {
   return {
@@ -164,18 +163,15 @@ class RceApiSource {
   fetchMedia(props) {
     const media = props.media[props.contextType];
     const uri = media.bookmark || this.uriFor('media', props);
-    if (RCEGlobals.getFeatures()?.media_links_use_attachment_id) {
-      return this.apiFetch(uri, headerFor(this.jwt)).then(({
+    return this.apiFetch(uri, headerFor(this.jwt)).then(({
+      bookmark,
+      files
+    }) => {
+      return {
         bookmark,
-        files
-      }) => {
-        return {
-          bookmark,
-          files: files.map(f => fixupFileUrl(props.contextType, props.contextId, f, this.canvasOrigin))
-        };
-      });
-    }
-    return this.apiFetch(uri, headerFor(this.jwt));
+        files: files.map(f => fixupFileUrl(props.contextType, props.contextId, f, this.canvasOrigin))
+      };
+    });
   }
   fetchFiles(uri) {
     return this.fetchPage(uri).then(({
@@ -219,7 +215,7 @@ class RceApiSource {
     title,
     attachment_id
   }) {
-    const uri = RCEGlobals.getFeatures()?.media_links_use_attachment_id && attachment_id ? `${this.baseUri('media_attachments', apiProps.host)}/${attachment_id}?user_entered_title=${encodeURIComponent(title)}` : `${this.baseUri('media_objects', apiProps.host)}/${media_object_id}?user_entered_title=${encodeURIComponent(title)}`;
+    const uri = attachment_id ? `${this.baseUri('media_attachments', apiProps.host)}/${attachment_id}?user_entered_title=${encodeURIComponent(title)}` : `${this.baseUri('media_objects', apiProps.host)}/${media_object_id}?user_entered_title=${encodeURIComponent(title)}`;
     return this.apiPost(uri, headerFor(this.jwt), null, 'PUT');
   }
 

package/es/translations/locales/en.js

@@ -1123,6 +1123,9 @@ const locale = {
   "intersection_cd4590e4": {
     "message": "Intersection"
   },
+  "invalid_description_991e23bb": {
+    "message": "Invalid description"
+  },
   "invalid_entry_f7d2a0f5": {
     "message": "Invalid entry."
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/canvas-rce",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "A component wrapping Canvas's usage of Tinymce",
   "main": "es/index.js",
   "types": "es/index.d.ts",
@@ -36,7 +36,7 @@
     "build:canvas": "yarn run build",
     "build:watch": "yarn clean:es && yarn build:es --watch",
     "build:cafe": "wp --config webpack.testcafe.config.js",
-    "prepublishOnly": "yarn build",
+    "prepublishOnly": "yarn build && yarn test",
     "fmt:check": "biome check",
     "fmt:fix": "biome format --write",
     "clean": "rm -rf lib && yarn clean:es && rm -rf coverage && yarn demo:clean",
@@ -71,66 +71,66 @@
     "instrument": false
   },
   "dependencies": {
-    "@instructure/canvas-theme": "9.10.1",
+    "@instructure/canvas-theme": "10.11.0",
     "@instructure/canvas-media": "*",
-    "@instructure/debounce": "9.10.1",
-    "@instructure/emotion": "9.10.1",
+    "@instructure/debounce": "10.11.0",
+    "@instructure/emotion": "10.11.0",
     "@instructure/k5uploader": "*",
     "@instructure/media-capture": "^9.0.0",
-    "@instructure/theme-registry": "9.10.1",
-    "@instructure/ui-a11y-content": "9.10.1",
-    "@instructure/ui-a11y-utils": "9.10.1",
-    "@instructure/ui-alerts": "9.10.1",
-    "@instructure/ui-avatar": "9.10.1",
-    "@instructure/ui-badge": "9.10.1",
-    "@instructure/ui-billboard": "9.10.1",
-    "@instructure/ui-buttons": "9.10.1",
-    "@instructure/ui-checkbox": "9.10.1",
-    "@instructure/ui-source-code-editor": "9.10.1",
-    "@instructure/ui-color-picker": "8.56.4",
-    "@instructure/ui-color-utils": "9.10.1",
-    "@instructure/ui-file-drop": "9.10.1",
-    "@instructure/ui-flex": "9.10.1",
-    "@instructure/ui-focusable": "9.10.1",
-    "@instructure/ui-form-field": "9.10.1",
-    "@instructure/ui-grid": "9.10.1",
-    "@instructure/ui-heading": "9.10.1",
-    "@instructure/ui-icons": "9.10.1",
-    "@instructure/ui-img": "9.10.1",
-    "@instructure/ui-link": "9.10.1",
-    "@instructure/ui-list": "9.10.1",
+    "@instructure/theme-registry": "10.11.0",
+    "@instructure/ui-a11y-content": "10.11.0",
+    "@instructure/ui-a11y-utils": "10.11.0",
+    "@instructure/ui-alerts": "10.11.0",
+    "@instructure/ui-avatar": "10.11.0",
+    "@instructure/ui-badge": "10.11.0",
+    "@instructure/ui-billboard": "10.11.0",
+    "@instructure/ui-buttons": "10.11.0",
+    "@instructure/ui-checkbox": "10.11.0",
+    "@instructure/ui-source-code-editor": "10.11.0",
+    "@instructure/ui-color-picker": "10.11.0",
+    "@instructure/ui-color-utils": "10.11.0",
+    "@instructure/ui-file-drop": "10.11.0",
+    "@instructure/ui-flex": "10.11.0",
+    "@instructure/ui-focusable": "10.11.0",
+    "@instructure/ui-form-field": "10.11.0",
+    "@instructure/ui-grid": "10.11.0",
+    "@instructure/ui-heading": "10.11.0",
+    "@instructure/ui-icons": "10.11.0",
+    "@instructure/ui-img": "10.11.0",
+    "@instructure/ui-link": "10.11.0",
+    "@instructure/ui-list": "10.11.0",
     "@instructure/ui-media-player": "^9.0.0",
-    "@instructure/ui-menu": "9.10.1",
-    "@instructure/ui-modal": "9.10.1",
-    "@instructure/ui-motion": "9.10.1",
-    "@instructure/ui-number-input": "9.10.1",
-    "@instructure/ui-overlays": "9.10.1",
-    "@instructure/ui-pagination": "9.10.1",
-    "@instructure/ui-pill": "9.10.1",
-    "@instructure/ui-popover": "9.10.1",
-    "@instructure/ui-radio-input": "9.10.1",
-    "@instructure/ui-simple-select": "9.10.1",
-    "@instructure/ui-spinner": "9.10.1",
-    "@instructure/ui-svg-images": "9.10.1",
-    "@instructure/ui-table": "9.10.1",
-    "@instructure/ui-tabs": "9.10.1",
-    "@instructure/ui-text-area": "9.10.1",
-    "@instructure/ui-text-input": "9.10.1",
-    "@instructure/ui-text": "9.10.1",
-    "@instructure/ui-themes": "9.10.1",
-    "@instructure/ui-toggle-details": "9.10.1",
-    "@instructure/ui-tooltip": "9.10.1",
-    "@instructure/ui-tray": "9.10.1",
-    "@instructure/ui-tree-browser": "9.10.1",
-    "@instructure/ui-truncate-text": "9.10.1",
-    "@instructure/ui-utils": "9.10.1",
-    "@instructure/ui-view": "9.10.1",
-    "@instructure/uid": "9.10.1",
+    "@instructure/ui-menu": "10.11.0",
+    "@instructure/ui-modal": "10.11.0",
+    "@instructure/ui-motion": "10.11.0",
+    "@instructure/ui-number-input": "10.11.0",
+    "@instructure/ui-overlays": "10.11.0",
+    "@instructure/ui-pagination": "10.11.0",
+    "@instructure/ui-pill": "10.11.0",
+    "@instructure/ui-popover": "10.11.0",
+    "@instructure/ui-radio-input": "10.11.0",
+    "@instructure/ui-simple-select": "10.11.0",
+    "@instructure/ui-spinner": "10.11.0",
+    "@instructure/ui-svg-images": "10.11.0",
+    "@instructure/ui-table": "10.11.0",
+    "@instructure/ui-tabs": "10.11.0",
+    "@instructure/ui-text-area": "10.11.0",
+    "@instructure/ui-text-input": "10.11.0",
+    "@instructure/ui-text": "10.11.0",
+    "@instructure/ui-themes": "10.11.0",
+    "@instructure/ui-toggle-details": "10.11.0",
+    "@instructure/ui-tooltip": "10.11.0",
+    "@instructure/ui-tray": "10.11.0",
+    "@instructure/ui-tree-browser": "10.11.0",
+    "@instructure/ui-truncate-text": "10.11.0",
+    "@instructure/ui-utils": "10.11.0",
+    "@instructure/ui-view": "10.11.0",
+    "@instructure/uid": "10.11.0",
     "@sheerun/mutationobserver-shim": "^0.3.2",
     "@types/tinycolor2": "^1.4.6",
     "@tinymce/tinymce-react": "~3.8.4",
     "aphrodite": "^2",
-    "axios": "^0.21.1",
+    "axios": "^0.28.0",
     "bloody-offset": "0.0.0",
     "crypto-es": "^2.0.4",
     "classnames": "^2.2.5",