@instructure/canvas-rce 5.12.2 → 5.13.1

package/CHANGELOG.md

@@ -5,6 +5,39 @@ 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).
 
+## 5.13.1 - 2024-06-03
+
+### Changed
+
+- Re-added file verifiers as a stop gap to non-Canvas contexts to allow
+  New Quiz item banks to properly share course files
+
+### Fixed
+
+- A11y checker tray refusing to close in New Quizzes
+- Find and Replace Tray now translated correctly
+
+## 5.13.0 - 2024-05-14
+
+### Added
+
+- Find and Replace Tray
+- Support for Bahasa Indonesia Language and Irish (Gaeilge) Language
+- Support for tools to always be present in toolbar
+- LTI enhancements
+
+### Changed
+
+- Limited list of fonts to self-hosted and websafe
+- Preferred HTML editor stored in localstorage
+- Stopped adding aria-hidden to RCE’s parent label
+
+### Fixed
+
+- Focus properly restored after closing a11y checker
+- Allow non relative video srcs when editing captions
+- Enhanced user content now translated correctly
+
 ## 5.12.2 - 2024-01-31
 
 ### Changed
@@ -36,7 +69,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Show media captions in New Quizzes
 - Bump Instui to 8.49
 
-
 ## 5.11.1 - 2023-10-12
 
 ### Fixed

package/es/common/fileUrl.js

@@ -19,6 +19,7 @@
 // or a base URL makes testing difficult, esp since window.location is "about:blank"
 // in mocha tests.
 import { parse, format } from 'url';
+import RCEGlobals from '../rce/RCEGlobals';
 
 function parseCanvasUrl(url) {
   let canvasOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.origin;
@@ -95,6 +96,8 @@ export function fixupFileUrl(contextType, contextId, fileInfo, canvasOrigin) {
   const key = fileInfo.href ? 'href' : 'url';
 
   if (fileInfo[key]) {
+    var _RCEGlobals$getFeatur;
+
     let parsed = parseCanvasUrl(fileInfo[key], canvasOrigin);
 
     if (!parsed) {
@@ -103,8 +106,9 @@ export function fixupFileUrl(contextType, contextId, fileInfo, canvasOrigin) {
 
     parsed = changeDownloadToWrapParams(parsed);
     parsed = addContext(parsed, contextType, contextId); // if this is a user file, add the verifier
+    // if this is in New Quizzes and the feature flag is enabled, add the verifier
 
-    if (fileInfo.uuid && contextType.includes('user')) {
+    if (fileInfo.uuid && (contextType.includes('user') || !!canvasOrigin && canvasOrigin !== window.location.origin && (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.file_verifiers_for_quiz_links)) {
       delete parsed.search;
       parsed.query.verifier = fileInfo.uuid;
     } else {

package/es/defaultTinymceConfig.js

@@ -50,7 +50,8 @@ const defaultTinymceConfig = {
   content_style: undefined,
   // this will always be provided by the RCE
   convert_urls: false,
-  font_formats: "Lato=lato,Helvetica Neue,Helvetica,Arial,sans-serif; Balsamiq Sans=Balsamiq Sans,lato,Helvetica Neue,Helvetica,Arial,sans-serif; Architect's Daughter=Architects Daughter,lato,Helvetica Neue,Helvetica,Arial,sans-serif; Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats",
+  // fonts specified here need to either be web-safe or self-hosted and loaded in app/stylesheets/bundles/fonts.scss
+  font_formats: "Lato=lato,Helvetica Neue,Helvetica,Arial,sans-serif; Balsamiq Sans=Balsamiq Sans,lato,Helvetica Neue,Helvetica,Arial,sans-serif; Architect's Daughter=Architects Daughter,lato,Helvetica Neue,Helvetica,Arial,sans-serif; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Courier New=courier new,courier; Georgia=georgia,palatino; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva",
   language_load: false,
   language_url: 'none',
   toolbar_mode: 'floating',

package/es/enhance-user-content/enhance_user_content.js

@@ -22,7 +22,8 @@ import { isExternalLink, showFilePreview, youTubeID } from './instructure_helper
 import mediaCommentThumbnail from './media_comment_thumbnail';
 import { addParentFrameContextToUrl } from '../rce/plugins/instructure_rce_external_tools/util/addParentFrameContextToUrl';
 import { MathJaxDirective, Mathml } from './mathml';
-import { makeExternalLinkIcon } from './external_links'; // in jest the es directory doesn't exist so stub the undefined svg
+import { makeExternalLinkIcon } from './external_links';
+import getTranslations from '../getTranslations'; // in jest the es directory doesn't exist so stub the undefined svg
 
 const IconDownloadSVG = (IconDownloadLine === null || IconDownloadLine === void 0 ? void 0 : IconDownloadLine.src) || '<svg></svg>';
 
@@ -110,6 +111,26 @@ function buildUrl(url) {
   }
 }
 
+const addResourceIdentifiersToStudioContent = content => {
+  content.querySelectorAll('iframe.lti-embed').forEach(iframe => {
+    var _userContentContainer, _userContentContainer2;
+
+    const url = buildUrl(iframe.getAttribute('src'));
+
+    if (!url || !url.pathname.includes('external_tools/retrieve') || !url.search.includes('instructuremedia.com') || !url.search.includes('custom_arc_media_id')) {
+      return;
+    }
+
+    const userContentContainer = iframe.closest('.user_content');
+
+    if (userContentContainer !== null && userContentContainer !== void 0 && (_userContentContainer = userContentContainer.dataset) !== null && _userContentContainer !== void 0 && _userContentContainer.resourceType && userContentContainer !== null && userContentContainer !== void 0 && (_userContentContainer2 = userContentContainer.dataset) !== null && _userContentContainer2 !== void 0 && _userContentContainer2.resourceId) {
+      url.searchParams.set('com_instructure_course_canvas_resource_type', userContentContainer.dataset.resourceType);
+      url.searchParams.set('com_instructure_course_canvas_resource_id', userContentContainer.dataset.resourceId);
+      iframe.src = url.href;
+    }
+  });
+};
+
 export function enhanceUserContent() {
   let container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
   let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -132,6 +153,13 @@ export function enhanceUserContent() {
      */
     containingCanvasLtiToolId
   } = opts;
+  getTranslations(locale).then(() => {
+    formatMessage.setup({
+      locale: locale || 'en'
+    });
+  }).catch(_err => {
+    console.error('Failed loading the language file for', locale, '. Falling back to English.');
+  });
   const content = container instanceof HTMLElement && container || document.getElementById('content') || document;
 
   const showFilePreviewEx = event => showFilePreview(event, {
@@ -226,6 +254,7 @@ export function enhanceUserContent() {
       const externalLinkIcon = makeExternalLinkIcon(childLink);
       childLink.appendChild(externalLinkIcon);
     });
+    addResourceIdentifiersToStudioContent(unenhanced_elem);
   });
   content.querySelectorAll('a.instructure_file_link, a.instructure_scribd_file').forEach(file_link => {
     const href = buildUrl(file_link.href); // Don't attempt to enhance links with no href

package/es/getTranslations.js

@@ -140,6 +140,10 @@ export default function getTranslations(locale) {
           p = import('./translations/locales/fr_CA');
           break;
 
+        case 'ga':
+          p = import('./translations/locales/ga');
+          break;
+
         case 'he':
           p = import('./translations/locales/he');
           break;
@@ -336,5 +340,5 @@ export default function getTranslations(locale) {
   return transReadyPromise;
 }
 export function getLocaleList() {
-  return ['ab', 'ar', 'ca', 'cs', 'cs-CZ', 'cy', 'da', 'da-x-k12', 'da-DK', 'de', 'el', 'en', 'en-AU-x-unimelb', 'en-GB-x-ukhe', 'en-AU', 'en-CA', 'en-CY', 'en-GB', 'en-NZ', 'en-SE', 'en-US', 'es', 'es-ES', 'es-GT', 'fa-IR', 'fi', 'fr', 'fr-CA', 'he', 'ht', 'hu', 'hu-HU', 'hy', 'id', 'id-ID', 'is', 'it', 'ja', 'ko', 'ko-KR', 'lt', 'lt-LT', 'mi', 'mn-MN', 'ms', 'nb', 'nb-x-k12', 'nl', 'nl-NL', 'nn', 'pl', 'pt', 'pt-BR', 'ro', 'ru', 'se', 'sl', 'sv', 'sv-x-k12', 'sv-SE', 'tg', 'th', 'th-TH', 'tl-PH', 'tr', 'uk-UA', 'vi', 'vi-VN', 'zh', 'zh-Hans', 'zh-Hant', 'zh-HK', 'zh-TW', 'zh-TW.Big5'];
+  return ['ab', 'ar', 'ca', 'cs', 'cs-CZ', 'cy', 'da', 'da-x-k12', 'da-DK', 'de', 'el', 'en', 'en-AU-x-unimelb', 'en-GB-x-ukhe', 'en-AU', 'en-CA', 'en-CY', 'en-GB', 'en-NZ', 'en-SE', 'en-US', 'es', 'es-ES', 'es-GT', 'fa-IR', 'fi', 'fr', 'fr-CA', 'ga', 'he', 'ht', 'hu', 'hu-HU', 'hy', 'id', 'id-ID', 'is', 'it', 'ja', 'ko', 'ko-KR', 'lt', 'lt-LT', 'mi', 'mn-MN', 'ms', 'nb', 'nb-x-k12', 'nl', 'nl-NL', 'nn', 'pl', 'pt', 'pt-BR', 'ro', 'ru', 'se', 'sl', 'sv', 'sv-x-k12', 'sv-SE', 'tg', 'th', 'th-TH', 'tl-PH', 'tr', 'uk-UA', 'vi', 'vi-VN', 'zh', 'zh-Hans', 'zh-Hant', 'zh-HK', 'zh-TW', 'zh-TW.Big5'];
 }

package/es/rce/RCEWrapper.js

@@ -59,6 +59,7 @@ import { transformRceContentForEditing } from './transformContent';
 import { IconMoreSolid } from '@instructure/ui-icons/es/svg';
 import EncryptedStorage from '../util/encrypted-storage';
 import buildStyle from './style';
+import { externalToolsForToolbar } from './plugins/instructure_rce_external_tools/RceToolWrapper';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
@@ -139,11 +140,6 @@ export function storageAvailable() {
   }
 }
 
-function getHtmlEditorCookie() {
-  const value = getCookie('rce.htmleditor');
-  return value === RAW_HTML_EDITOR_VIEW || value === PRETTY_HTML_EDITOR_VIEW ? value : PRETTY_HTML_EDITOR_VIEW;
-}
-
 function renderLoading() {
   return formatMessage('Loading');
 }
@@ -193,7 +189,9 @@ class RCEWrapper extends React.Component {
       this.checkAccessibility();
 
       if (newView === PRETTY_HTML_EDITOR_VIEW || newView === RAW_HTML_EDITOR_VIEW) {
-        document.cookie = `rce.htmleditor=${newView};path=/;max-age=31536000`;
+        var _this$storage, _this$storage$setItem;
+
+        (_this$storage = this.storage) === null || _this$storage === void 0 ? void 0 : (_this$storage$setItem = _this$storage.setItem) === null || _this$storage$setItem === void 0 ? void 0 : _this$storage$setItem.call(_this$storage, 'rce.htmleditor', newView);
       } // Emit view change event
 
 
@@ -392,7 +390,19 @@ class RCEWrapper extends React.Component {
 
       this.checkAccessibility();
       this.fixToolbarKeyboardNavigation();
-      (_this$props$onInitted = (_this$props = this.props).onInitted) === null || _this$props$onInitted === void 0 ? void 0 : _this$props$onInitted.call(_this$props, editor);
+      (_this$props$onInitted = (_this$props = this.props).onInitted) === null || _this$props$onInitted === void 0 ? void 0 : _this$props$onInitted.call(_this$props, editor); // cleans up highlight artifacts from findreplace plugin
+
+      if (this.getRequiredFeatureStatuses().rce_find_replace) {
+        editor.on('undo redo', e => {
+          var _editor$dom, _editor$dom$doc, _editor$dom$doc$getEl, _editor$dom$doc$getEl2;
+
+          if ((editor === null || editor === void 0 ? void 0 : (_editor$dom = editor.dom) === null || _editor$dom === void 0 ? void 0 : (_editor$dom$doc = _editor$dom.doc) === null || _editor$dom$doc === void 0 ? void 0 : (_editor$dom$doc$getEl = _editor$dom$doc.getElementsByClassName) === null || _editor$dom$doc$getEl === void 0 ? void 0 : (_editor$dom$doc$getEl2 = _editor$dom$doc$getEl.call(_editor$dom$doc, 'mce-match-marker')) === null || _editor$dom$doc$getEl2 === void 0 ? void 0 : _editor$dom$doc$getEl2.length) > 0) {
+            var _editor$plugins, _editor$plugins$searc;
+
+            (_editor$plugins = editor.plugins) === null || _editor$plugins === void 0 ? void 0 : (_editor$plugins$searc = _editor$plugins.searchreplace) === null || _editor$plugins$searc === void 0 ? void 0 : _editor$plugins$searc.done();
+          }
+        });
+      }
     };
 
     this.fixToolbarKeyboardNavigation = () => {
@@ -623,10 +633,11 @@ class RCEWrapper extends React.Component {
       }
     };
 
-    this.onA11yChecker = () => {
+    this.onA11yChecker = triggerElementId => {
       const editor = this.mceInstance();
       editor.execCommand('openAccessibilityChecker', false, {
         mountNode: instuiPopupMountNode,
+        triggerElementId,
         onFixError: errors => {
           this.setState({
             a11yErrorsCount: errors.length
@@ -780,10 +791,11 @@ class RCEWrapper extends React.Component {
       shouldShowEditor: typeof IntersectionObserver === 'undefined' || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs
     };
     this._statusBarId = `${this.state.id}_statusbar`;
-    this.pendingEventHandlers = []; // Get top 2 favorited LTI Tools
-
-    this.ltiToolFavorites = this.props.ltiTools.filter(e => e.favorite).map(e => `instructure_external_button_${e.id}`).slice(0, 2) || [];
+    this.pendingEventHandlers = [];
+    this.ltiToolFavorites = externalToolsForToolbar(this.props.ltiTools).map(e => `instructure_external_button_${e.id}`);
     this.pluginsToExclude = parsePluginsToExclude(((_props$editorOptions2 = props.editorOptions) === null || _props$editorOptions2 === void 0 ? void 0 : _props$editorOptions2.plugins) || []);
+    this.resourceType = props.resourceType;
+    this.resourceId = props.resourceId;
     this.tinymceInitOptions = this.wrapOptions(props.editorOptions);
     alertHandler.alertFunc = this.addAlert;
     this.handleContentTrayClosing = this.handleContentTrayClosing.bind(this);
@@ -821,13 +833,17 @@ 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
+      media_links_use_attachment_id = false,
+      rce_find_replace = false,
+      file_verifiers_for_quiz_links = false
     } = this.props.features;
     return {
       new_math_equation_handling,
       explicit_latex_typesetting,
       rce_transform_loaded_content,
-      media_links_use_attachment_id
+      media_links_use_attachment_id,
+      file_verifiers_for_quiz_links,
+      rce_find_replace
     };
   }
 
@@ -841,6 +857,13 @@ class RCEWrapper extends React.Component {
 
   getCanvasUrl() {
     return this.props.canvasOrigin;
+  }
+
+  getResourceIdentifiers() {
+    return {
+      resourceType: this.resourceType,
+      resourceId: this.resourceId
+    };
   } // getCode and setCode naming comes from tinyMCE
   // kind of strange but want to be consistent
 
@@ -955,6 +978,12 @@ class RCEWrapper extends React.Component {
     this.contentInserted(element);
   }
 
+  replaceCode(code) {
+    if (code !== "" && window.confirm(formatMessage('Content in the editor will be changed. Press Cancel to keep the original content.'))) {
+      this.mceInstance().setContent(code);
+    }
+  }
+
   insertEmbedCode(code) {
     const editor = this.mceInstance(); // don't replace selected text, but embed after
 
@@ -1123,6 +1152,19 @@ class RCEWrapper extends React.Component {
     return this.state.id;
   }
 
+  getHtmlEditorStorage() {
+    var _this$storage2, _this$storage2$getIte, _this$storage2$getIte2;
+
+    const cookieValue = getCookie('rce.htmleditor');
+
+    if (cookieValue) {
+      document.cookie = `rce.htmleditor=${cookieValue};path=/;max-age=0`;
+    }
+
+    const value = cookieValue || ((_this$storage2 = this.storage) === null || _this$storage2 === void 0 ? void 0 : (_this$storage2$getIte = _this$storage2.getItem) === null || _this$storage2$getIte === void 0 ? void 0 : (_this$storage2$getIte2 = _this$storage2$getIte.call(_this$storage2, 'rce.htmleditor')) === null || _this$storage2$getIte2 === void 0 ? void 0 : _this$storage2$getIte2.content);
+    return value === RAW_HTML_EDITOR_VIEW || value === PRETTY_HTML_EDITOR_VIEW ? value : PRETTY_HTML_EDITOR_VIEW;
+  }
+
   _isFullscreen() {
     return !!(this.state.fullscreenState.isTinyFullscreen || document[FS_ELEMENT]);
   }
@@ -1471,6 +1513,11 @@ class RCEWrapper extends React.Component {
       canvasPlugins.push('instructure_fullscreen');
     }
 
+    if (this.getRequiredFeatureStatuses().rce_find_replace) {
+      canvasPlugins.push('searchreplace');
+      canvasPlugins.push('instructure_search_and_replace');
+    }
+
     const possibleNewMenubarItems = this.props.editorOptions.menu ? Object.keys(this.props.editorOptions.menu).join(' ') : undefined;
     const wrappedOpts = { ...defaultTinymceConfig,
       ...options,
@@ -1526,7 +1573,7 @@ class RCEWrapper extends React.Component {
         },
         tools: {
           title: formatMessage('Tools'),
-          items: 'instructure_wordcount lti_tools_menuitem'
+          items: 'instructure_wordcount lti_tools_menuitem instructure_search_and_replace'
         },
         view: {
           title: formatMessage('View'),
@@ -1684,26 +1731,20 @@ class RCEWrapper extends React.Component {
   }
 
   setEditorView(view) {
-    var _this$getTextarea$lab, _this$getTextarea$lab2, _this$getTextarea$lab3, _this$getTextarea$lab4, _this$_elementRef$cur5, _this$getTextarea$lab5, _this$getTextarea$lab6;
+    var _this$_elementRef$cur5;
 
     switch (view) {
       case RAW_HTML_EDITOR_VIEW:
-        this.getTextarea().removeAttribute('aria-hidden');
-        (_this$getTextarea$lab = this.getTextarea().labels) === null || _this$getTextarea$lab === void 0 ? void 0 : (_this$getTextarea$lab2 = _this$getTextarea$lab[0]) === null || _this$getTextarea$lab2 === void 0 ? void 0 : _this$getTextarea$lab2.removeAttribute('aria-hidden');
         this.mceInstance().hide();
         break;
 
       case PRETTY_HTML_EDITOR_VIEW:
-        this.getTextarea().setAttribute('aria-hidden', true);
-        (_this$getTextarea$lab3 = this.getTextarea().labels) === null || _this$getTextarea$lab3 === void 0 ? void 0 : (_this$getTextarea$lab4 = _this$getTextarea$lab3[0]) === null || _this$getTextarea$lab4 === void 0 ? void 0 : _this$getTextarea$lab4.setAttribute('aria-hidden', true);
         this.mceInstance().hide();
         (_this$_elementRef$cur5 = this._elementRef.current.querySelector('.CodeMirror')) === null || _this$_elementRef$cur5 === void 0 ? void 0 : _this$_elementRef$cur5.CodeMirror.setCursor(0, 0);
         break;
 
       case WYSIWYG_VIEW:
         this.setCode(this.textareaValue());
-        this.getTextarea().setAttribute('aria-hidden', true);
-        (_this$getTextarea$lab5 = this.getTextarea().labels) === null || _this$getTextarea$lab5 === void 0 ? void 0 : (_this$getTextarea$lab6 = _this$getTextarea$lab5[0]) === null || _this$getTextarea$lab6 === void 0 ? void 0 : _this$getTextarea$lab6.setAttribute('aria-hidden', true);
         this.mceInstance().show();
     }
   }
@@ -1809,7 +1850,7 @@ class RCEWrapper extends React.Component {
         path: this.state.path,
         wordCount: this.state.wordCount,
         editorView: this.state.editorView,
-        preferredHtmlEditor: getHtmlEditorCookie(),
+        preferredHtmlEditor: this.getHtmlEditorStorage(),
         onResize: this.onResize,
         onKBShortcutModalOpen: this.openKBShortcutModal,
         onA11yChecker: this.onA11yChecker,

package/es/rce/RCEWrapperProps.js

@@ -49,6 +49,7 @@ export const ltiToolsPropType = PropTypes.arrayOf(PropTypes.shape({
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   // is this a favorite tool?
   favorite: PropTypes.bool,
+  always_on: PropTypes.bool,
   name: PropTypes.string,
   description: PropTypes.string,
   icon_url: PropTypes.string,

package/es/rce/StatusBar.js

@@ -174,16 +174,17 @@ export default function StatusBar(props) {
 
   function renderA11yButton() {
     const a11y = formatMessage('Accessibility Checker');
+    const a11yButtonId = 'rce-a11y-btn';
     const button = /*#__PURE__*/React.createElement(IconButton, {
-      "data-btn-id": "rce-a11y-btn",
+      "data-btn-id": a11yButtonId,
       color: "primary",
       title: a11y,
-      tabIndex: tabIndexForBtn('rce-a11y-btn'),
+      tabIndex: tabIndexForBtn(a11yButtonId),
       onClick: event => {
         event.target.focus();
-        props.onA11yChecker();
+        props.onA11yChecker(a11yButtonId);
       },
-      onFocus: () => setFocusedBtnId('rce-a11y-btn'),
+      onFocus: () => setFocusedBtnId(a11yButtonId),
       screenReaderLabel: a11y,
       withBackground: false,
       withBorder: false

package/es/rce/editorLanguage.js

@@ -38,11 +38,13 @@ const mapping = {
   fi: 'fi',
   fr: 'fr_FR',
   'fr-CA': 'fr_FR',
+  ga: 'ga',
   he: 'he_IL',
   ht: undefined,
   // tiny doesn't have Haitian Creole
   hu: 'hu_HU',
   hy: 'hy',
+  id: 'id',
   is: undefined,
   // tiny doesn't have Icelandic
   it: 'it',

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

@@ -131,7 +131,7 @@ export function fromVideoEmbed($element) {
 
   if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
     const source = $videoIframe.getAttribute('src');
-    const matches = source === null || source === void 0 ? void 0 : source.match(/^\/media_attachments_iframe\/(\d+)/);
+    const matches = source === null || source === void 0 ? void 0 : source.match(/\/media_attachments_iframe\/(\d+)/);
 
     if (matches) {
       videoOptions.attachmentId = matches[1];

package/es/rce/plugins/instructure_rce_external_tools/ExternalToolsEnv.js

@@ -157,6 +157,12 @@ export function externalToolsEnvFor(editor) {
       var _this$rceWrapper;
 
       (_this$rceWrapper = this.rceWrapper) === null || _this$rceWrapper === void 0 ? void 0 : _this$rceWrapper.insertCode(code);
+    },
+
+    replaceCode(code) {
+      var _this$rceWrapper2;
+
+      (_this$rceWrapper2 = this.rceWrapper) === null || _this$rceWrapper2 === void 0 ? void 0 : _this$rceWrapper2.replaceCode(code);
     }
 
   };

package/es/rce/plugins/instructure_rce_external_tools/RceToolWrapper.js

@@ -20,10 +20,35 @@ import { simpleCache } from '../../../util/simpleCache';
 import { instUiIconsArray } from '../../../util/instui-icon-helper'; // @ts-ignore
 
 import { IconLtiSolid } from '@instructure/ui-icons/es/svg';
-
+export function externalToolsForToolbar(tools) {
+  const favorited = tools.filter(it => it.favorite).slice(0, 2) || []; // There's no limit to always on apps, but in practice there shouldn't be more than 2 as well.
+
+  const alwaysOn = tools.filter(it => it.always_on) || [];
+  const set = new Map(); // Remove possible overlaps between favorited and alwaysOn, otherwise
+  // we'd have duplicate buttons in the toolbar.
+
+  for (const toolInfo of favorited.concat(alwaysOn)) {
+    set.set(toolInfo.id, toolInfo);
+  }
+
+  return Array.from(set.values()).sort((a, b) => {
+    if (a.always_on && !b.always_on) {
+      return -1;
+    } else if (!a.always_on && b.always_on) {
+      return 1;
+    } else {
+      // This *should* always be a string, but there might be cases where it isn't,
+      // especially when this method is used outside of TypeScript files.
+      return a.id.toString().localeCompare(b.id.toString(), undefined, {
+        numeric: true
+      });
+    }
+  });
+}
 /**
  * Helper class for the connection between an external tool registration and a particular TinyMCE instance.
  */
+
 export class RceToolWrapper {
   static forEditorEnv(env) {
     let toolConfigs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : env.availableRceLtiTools;
@@ -82,6 +107,10 @@ export class RceToolWrapper {
     return this.toolInfo.use_tray;
   }
 
+  get always_on() {
+    return this.toolInfo.always_on;
+  }
+
   asToolbarButton() {
     var _this$iconId;
 

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

@@ -1,5 +1,10 @@
 import _pt from "prop-types";
 
+/* eslint-disable  */
+// @ts-nocheck
+// TODO: we get complaints about <Overlay> because it can be either a Modal or a Tray
+// and they have different props. I don't have time to fix this the right way now.
+
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -197,7 +202,7 @@ export default class ExternalToolDialog extends React.Component {
   }
 
   render() {
-    var _state$button, _state$button$title, _state$button2, _state$button3, _state$button$width, _state$button4, _state$button5, _state$button$height, _state$button6;
+    var _state$button, _props$env$rceWrapper, _props$env$rceWrapper2, _state$button$title, _state$button2, _state$button3, _state$button$width, _state$button4, _state$button5, _state$button$height, _state$button6;
 
     const state = this.state;
     const props = this.props;
@@ -224,6 +229,14 @@ export default class ExternalToolDialog extends React.Component {
       type: "hidden",
       name: "editor_contents",
       value: state.form.contents
+    }), /*#__PURE__*/React.createElement("input", {
+      type: "hidden",
+      name: "com_instructure_course_canvas_resource_type",
+      value: (_props$env$rceWrapper = props.env.rceWrapper) === null || _props$env$rceWrapper === void 0 ? void 0 : _props$env$rceWrapper.getResourceIdentifiers().resourceType
+    }), /*#__PURE__*/React.createElement("input", {
+      type: "hidden",
+      name: "com_instructure_course_canvas_resource_id",
+      value: (_props$env$rceWrapper2 = props.env.rceWrapper) === null || _props$env$rceWrapper2 === void 0 ? void 0 : _props$env$rceWrapper2.getResourceIdentifiers().resourceId
     }), state.form.parent_frame_context != null && /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       name: "parent_frame_context",

package/es/rce/plugins/instructure_rce_external_tools/lti13-content-items/processEditorContentItems.js

@@ -22,7 +22,7 @@ import { showFlashAlert } from '../../../../common/FlashAlert';
 import formatMessage from '../../../../format-message';
 export default function processEditorContentItems(event, env, dialog) {
   try {
-    var _event$data, _event$data$content_i, _event$data2, _event$data3;
+    var _event$data, _event$data$content_i, _event$data2, _event$data4;
 
     const ltiEndpoint = (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.ltiEndpoint;
     const selection = env.editorSelection;
@@ -38,7 +38,13 @@ export default function processEditorContentItems(event, env, dialog) {
       });
 
       if (parsedItem != null) {
-        env.insertCode(parsedItem.toHtmlString());
+        var _event$data3;
+
+        if ((_event$data3 = event.data) !== null && _event$data3 !== void 0 && _event$data3.replaceEditorContents) {
+          env.replaceCode(parsedItem.toHtmlString());
+        } else {
+          env.insertCode(parsedItem.toHtmlString());
+        }
       } else if (!unsupportedItemWarningShown) {
         var _inputItem$type;
 
@@ -54,7 +60,7 @@ export default function processEditorContentItems(event, env, dialog) {
     } // Remove "unsaved changes" warnings and close modal
 
 
-    if ((_event$data3 = event.data) !== null && _event$data3 !== void 0 && _event$data3.content_items) {
+    if ((_event$data4 = event.data) !== null && _event$data4 !== void 0 && _event$data4.content_items) {
       dialog === null || dialog === void 0 ? void 0 : dialog.close();
     }
   } catch (e) {

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

@@ -18,7 +18,7 @@
 import tinymce from 'tinymce';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { RceToolWrapper, buildToolMenuItems } from './RceToolWrapper';
+import { RceToolWrapper, buildToolMenuItems, externalToolsForToolbar } from './RceToolWrapper';
 import formatMessage from '../../../format-message';
 import { ExternalToolSelectionDialog } from './components/ExternalToolSelectionDialog/ExternalToolSelectionDialog';
 import { ensureToolDialogContainerElem } from './dialog-helper';
@@ -63,7 +63,8 @@ function registerAppsMenu(editor) {
 
 
 function registerFavoriteAppsToolbarButtons(editor) {
-  RceToolWrapper.forEditorEnv(externalToolsEnvFor(editor)).filter(it => it.favorite).forEach(toolInfo => editor.ui.registry.addButton(`instructure_external_button_${toolInfo.id}`, toolInfo.asToolbarButton()));
+  const allTools = RceToolWrapper.forEditorEnv(externalToolsEnvFor(editor));
+  externalToolsForToolbar(allTools).forEach(toolInfo => editor.ui.registry.addButton(`instructure_external_button_${toolInfo.id}`, toolInfo.asToolbarButton()));
 }
 
 function registerAppsToolbarButton(editor) {

package/es/rce/plugins/instructure_search_and_replace/clickCallback.js

@@ -0,0 +1,55 @@
+/*
+ * 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/>.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FindReplaceController from './components/FindReplaceTrayController';
+import { getSelectionContext } from './getSelectionContext';
+const CONTAINER_ID = 'instructure-find-replace-tray-container';
+export default function (editor, document) {
+  var _editor$selection, _editor$selection2;
+
+  const plugin = editor.plugins.searchreplace;
+  const initalSelection = (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getContent({
+    format: 'text'
+  });
+  if (initalSelection) (_editor$selection2 = editor.selection) === null || _editor$selection2 === void 0 ? void 0 : _editor$selection2.collapse(true);
+  let container = document.getElementById(CONTAINER_ID);
+
+  if (container == null) {
+    container = document.createElement('div');
+    container.id = CONTAINER_ID;
+    document.body.appendChild(container);
+  }
+
+  const handleDismiss = () => {
+    if (container) ReactDOM.unmountComponentAtNode(container);
+    editor.focus(false);
+  };
+
+  ReactDOM.render( /*#__PURE__*/React.createElement(FindReplaceController, {
+    plugin: plugin,
+    onDismiss: handleDismiss,
+    initialText: initalSelection,
+    undoManager: editor.undoManager,
+    getSelectionContext: () => {
+      const selectedElements = editor.dom.doc.getElementsByClassName('mce-match-marker-selected');
+      if (selectedElements.length > 0) return getSelectionContext(selectedElements);
+      return ['', ''];
+    }
+  }), container);
+}