@instructure/canvas-rce 5.14.2 → 5.15.0

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

@@ -20,41 +20,14 @@ import { openToolDialogFor } from './dialog-helper';
 import { simpleCache } from '../../../util/simpleCache';
 import { instUiIconsArray } from '../../../util/instui-icon-helper';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { IconLtiSolid } from '@instructure/ui-icons/es/svg';
-export function externalToolsForToolbar(tools) {
-  // Limit of not on_by_default but favorited tools is 2
-  const favorited = tools.filter(it => it.favorite && !it.on_by_default).slice(0, 2) || [];
-  const onByDefault = tools.filter(it => it.on_by_default && it.favorite) || [];
-  const set = new Map();
-
-  // Remove possible overlaps between favorited and onByDefault, otherwise
-  // we'd have duplicate buttons in the toolbar.
-  for (const toolInfo of favorited.concat(onByDefault)) {
-    set.set(toolInfo.id, toolInfo);
-  }
-  return Array.from(set.values()).sort((a, b) => {
-    if (a.on_by_default && !b.on_by_default) {
-      return -1;
-    } else if (!a.on_by_default && b.on_by_default) {
-      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;
-    let mruIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : loadMruToolIds();
+  static forEditorEnv(env, toolConfigs = env.availableRceLtiTools, mruIds = loadMruToolIds()) {
     return toolConfigs.map(it => new RceToolWrapper(env, it, mruIds));
   }
   get editor() {
@@ -83,8 +56,7 @@ export class RceToolWrapper {
     return (_this$toolInfo$favori = this.toolInfo.favorite) !== null && _this$toolInfo$favori !== void 0 ? _this$toolInfo$favori : false;
   }
   get image() {
-    var _parseIconValueFor;
-    return (_parseIconValueFor = parseIconValueFor(this.toolInfo)) === null || _parseIconValueFor === void 0 ? void 0 : _parseIconValueFor.iconUrl;
+    return parseIconValueFor(this.toolInfo)?.iconUrl;
   }
   get width() {
     return this.toolInfo.width;
@@ -127,7 +99,7 @@ export function parseIconValueFor(toolInfo) {
 
   // URL embedded in canvas_icon_class, which happens in some cases (see MAT-1354)
   if (typeof canvasIconClass === 'object') {
-    const iconUrl = canvasIconClass === null || canvasIconClass === void 0 ? void 0 : canvasIconClass.icon_url;
+    const iconUrl = canvasIconClass?.icon_url;
     if (typeof iconUrl === 'string' && iconUrl !== '') {
       result.iconUrl = iconUrl;
     }
@@ -191,10 +163,9 @@ const svgImageCache = simpleCache(imageUrl => {
 export function loadMruToolIds() {
   let list;
   try {
-    var _window$localStorage$, _window$localStorage;
-    list = JSON.parse((_window$localStorage$ = (_window$localStorage = window.localStorage) === null || _window$localStorage === void 0 ? void 0 : _window$localStorage.getItem('ltimru')) !== null && _window$localStorage$ !== void 0 ? _window$localStorage$ : '[]');
+    var _window$localStorage$;
+    list = JSON.parse((_window$localStorage$ = window.localStorage?.getItem('ltimru')) !== null && _window$localStorage$ !== void 0 ? _window$localStorage$ : '[]');
   } catch (ex) {
-    // eslint-disable-next-line no-console
     console.warn('Found bad LTI MRU data', ex.message);
   }
   return Array.isArray(list) ? list.filter(it => it != null).map(it => String(it)) : [];
@@ -205,10 +176,8 @@ export function loadMruToolIds() {
  */
 export function storeMruToolIds(toolIds) {
   try {
-    var _window$localStorage2;
-    (_window$localStorage2 = window.localStorage) === null || _window$localStorage2 === void 0 ? void 0 : _window$localStorage2.setItem('ltimru', JSON.stringify(toolIds));
+    window.localStorage?.setItem('ltimru', JSON.stringify(toolIds));
   } catch (ex) {
-    // eslint-disable-next-line no-console
     console.warn('Cannot save LTI MRU list', ex.message);
   }
 }

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

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-// @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.
 /*
@@ -29,14 +28,14 @@ import ToolLaunchIframe from '../util/ToolLaunchIframe';
 import processEditorContentItems from '../../lti13-content-items/processEditorContentItems';
 import { RceLti11ContentItem } from '../../lti11-content-items/RceLti11ContentItem';
 import formatMessage from '../../../../../format-message';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../../util/fullscreenHelpers';
 import { ExternalToolDialogTray } from './ExternalToolDialogTray';
 import { ExternalToolDialogModal } from './ExternalToolDialogModal';
 import { showFlashAlert } from '../../../../../common/FlashAlert';
 import { parseUrlOrNull } from '../../../../../util/url-util';
 export default class ExternalToolDialog extends React.Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     this.state = {
       open: false,
       button: null,
@@ -61,17 +60,19 @@ export default class ExternalToolDialog extends React.Component {
       }
       const contentItems = data.contentItems;
       if (contentItems.length === 1 && contentItems[0]['@type'] === 'lti_replace') {
-        var _env$rceWrapper;
         const code = contentItems[0].text;
-        (_env$rceWrapper = env.rceWrapper) === null || _env$rceWrapper === void 0 ? void 0 : _env$rceWrapper.setCode(code);
+
+        // @ts-expect-error
+        env.rceWrapper?.setCode(code);
       } else {
         contentItems.forEach(contentData => {
-          var _env$rceWrapper2;
           const code = RceLti11ContentItem.fromJSON({
             ...contentData,
             class: 'lti-embed'
           }, env).codePayload;
-          (_env$rceWrapper2 = env.rceWrapper) === null || _env$rceWrapper2 === void 0 ? void 0 : _env$rceWrapper2.insertCode(code);
+
+          // @ts-expect-error
+          env.rceWrapper?.insertCode(code);
         });
       }
       this.close();
@@ -79,9 +80,9 @@ export default class ExternalToolDialog extends React.Component {
     this.handlePostedMessage = ev => {
       if (ev.origin === this.resourceSelectionOrigin) {
         const data = ev.data;
-        if ((data === null || data === void 0 ? void 0 : data.subject) === 'LtiDeepLinkingResponse') {
+        if (data?.subject === 'LtiDeepLinkingResponse') {
           processEditorContentItems(ev, this.props.env, this);
-        } else if ((data === null || data === void 0 ? void 0 : data.subject) === 'externalContentReady') {
+        } else if (data?.subject === 'externalContentReady') {
           // 'externalContentReady' is EXTERNAL_CONTENT_READY in
           // ui/shared/external-tools/externalContentEvents.ts
           // where events are also described/used
@@ -91,21 +92,18 @@ export default class ExternalToolDialog extends React.Component {
     };
     this.handleClose = () => {
       const msg = formatMessage('Are you sure you want to cancel? Changes you made may not be saved.');
-      // eslint-disable-next-line no-alert
       if (window.confirm(msg)) {
         this.close();
       }
     };
     this.handleOpen = () => {
-      var _this$formRef$current;
-      if (this.state.open) (_this$formRef$current = this.formRef.current) === null || _this$formRef$current === void 0 ? void 0 : _this$formRef$current.submit();
+      if (this.state.open) this.formRef.current?.submit();
     };
     this.handleRemove = () => {
-      var _this$props$env$edito;
       this.setState({
         button: null
       });
-      (_this$props$env$edito = this.props.env.editor) === null || _this$props$env$edito === void 0 ? void 0 : _this$props$env$edito.focus();
+      this.props.env.editor?.focus();
 
       // force tinyMCE to redraw sticky toolbar otherwise it never goes away
       window.dispatchEvent(new Event('resize'));
@@ -117,11 +115,10 @@ export default class ExternalToolDialog extends React.Component {
       infoAlert: null
     });
     this.calcIFrameHeight = () => {
-      var _this$state$button, _this$state$button2;
-      if ((_this$state$button = this.state.button) !== null && _this$state$button !== void 0 && _this$state$button.use_tray) {
+      if (this.state.button?.use_tray) {
         return '100%';
       }
-      const toolDefinedHeight = (_this$state$button2 = this.state.button) === null || _this$state$button2 === void 0 ? void 0 : _this$state$button2.height;
+      const toolDefinedHeight = this.state.button?.height;
       const iFrameHeight = toolDefinedHeight !== null && toolDefinedHeight !== void 0 ? toolDefinedHeight : Math.max(Math.min(window.innerHeight - 100, 550), 100);
       const modalMaxHeight = '95';
       const modalHeaderHeightWithPadding = '5.5rem';
@@ -140,8 +137,8 @@ export default class ExternalToolDialog extends React.Component {
       resourceSelectionUrlOverride
     } = this.props;
     let urlStr = replaceTags(resourceSelectionUrlOverride, 'id', button.id);
-    const selection = (_env$editorSelection = env === null || env === void 0 ? void 0 : env.editorSelection) !== null && _env$editorSelection !== void 0 ? _env$editorSelection : '';
-    const contents = (_env$editorContent = env === null || env === void 0 ? void 0 : env.editorContent) !== null && _env$editorContent !== void 0 ? _env$editorContent : '';
+    const selection = (_env$editorSelection = env?.editorSelection) !== null && _env$editorSelection !== void 0 ? _env$editorSelection : '';
+    const contents = (_env$editorContent = env?.editorContent) !== null && _env$editorContent !== void 0 ? _env$editorContent : '';
     if (urlStr == null) {
       // if we don't have a url on the page, build one using the current context.
       // url should look like: /courses/2/external_tools/15/resource_selection?editor=1
@@ -193,11 +190,11 @@ export default class ExternalToolDialog extends React.Component {
     return this.props.env.canvasOrigin;
   }
   render() {
-    var _state$button, _props$env$rceWrapper, _props$env$rceWrapper2, _state$button$title, _state$button2, _state$button3, _state$button$width, _state$button4;
+    var _state$button$title, _state$button$width;
     const state = this.state;
     const props = this.props;
     const label = formatMessage('Embed content from External Tool');
-    const Overlay = (_state$button = state.button) !== null && _state$button !== void 0 && _state$button.use_tray ? ExternalToolDialogTray : ExternalToolDialogModal;
+    const Overlay = state.button?.use_tray ? ExternalToolDialogTray : ExternalToolDialogModal;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
       ref: this.formRef,
       method: "POST",
@@ -220,24 +217,28 @@ export default class ExternalToolDialog extends React.Component {
       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
+      name: "com_instructure_course_canvas_resource_type"
+      // @ts-expect-error
+      ,
+      value: 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
+      name: "com_instructure_course_canvas_resource_id"
+      // @ts-expect-error
+      ,
+      value: props.env.rceWrapper?.getResourceIdentifiers().resourceId
     }), state.form.parent_frame_context != null && /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       name: "parent_frame_context",
       value: state.form.parent_frame_context
     })), /*#__PURE__*/React.createElement(Overlay, {
       open: state.open,
-      mountNode: instuiPopupMountNode,
+      mountNode: instuiPopupMountNodeFn(),
       label: label,
       onOpen: this.handleOpen,
       onClose: this.handleRemove,
       onCloseButton: this.handleClose,
-      name: (_state$button$title = (_state$button2 = state.button) === null || _state$button2 === void 0 ? void 0 : _state$button2.title) !== null && _state$button$title !== void 0 ? _state$button$title : ' '
+      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
@@ -262,7 +263,7 @@ export default class ExternalToolDialog extends React.Component {
       id: "external_tool_button_frame",
       style: {
         height: this.calcIFrameHeight(),
-        width: (_state$button3 = state.button) !== null && _state$button3 !== void 0 && _state$button3.use_tray ? '100%' : (_state$button$width = (_state$button4 = state.button) === null || _state$button4 === void 0 ? void 0 : _state$button4.width) !== null && _state$button$width !== void 0 ? _state$button$width : 800,
+        width: state.button?.use_tray ? '100%' : (_state$button$width = state.button?.width) !== null && _state$button$width !== void 0 ? _state$button$width : 800,
         border: '0',
         display: 'block',
         visibility: state.iframeLoaded ? 'visible' : 'hidden'

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

@@ -30,7 +30,7 @@ import { IconSearchLine } from '@instructure/ui-icons';
 import { Alert } from '@instructure/ui-alerts';
 import formatMessage from '../../../../../format-message';
 import ExternalToolSelectionItem from './ExternalToolSelectionItem';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../../util/fullscreenHelpers';
 // TODO: we really need a way for the client to pass this to the RCE
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
 
@@ -54,8 +54,7 @@ export function ExternalToolSelectionDialog(props) {
   const [filterTerm, setFilterTerm] = useState('');
   const [filteredResults, setFilteredResults] = useState(props.ltiButtons);
   const handleFilterChange = e => {
-    var _e$target;
-    setFilterTerm((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+    setFilterTerm(e.target?.value);
     setFilteredResults(filterItemsByTitleSubstring(e.target.value, props.ltiButtons));
   };
   const filterEmpty = filteredResults.length <= 0;
@@ -67,7 +66,7 @@ export function ExternalToolSelectionDialog(props) {
       mediumMaxWidth: '42rem'
     },
     label: formatMessage('Apps'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn(),
     onDismiss: props.onDismiss,
     open: true,
     shouldCloseOnDocumentClick: false

package/es/rce/plugins/instructure_rce_external_tools/dialog-helper.js

@@ -38,7 +38,6 @@ export function openToolDialogFor(toolHelper) {
     iframeAllowances: env.ltiIframeAllowPolicy,
     resourceSelectionUrlOverride: env.resourceSelectionUrlOverride
   }), ensureToolDialogContainerElem(), () => {
-    var _dialogRef$current;
-    (_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 ? void 0 : _dialogRef$current.open(toolHelper);
+    dialogRef.current?.open(toolHelper);
   });
 }

package/es/rce/plugins/instructure_rce_external_tools/jquery/jquery.dropdownList.js

@@ -41,7 +41,7 @@
   // @ts-expect-error
   function (options) {
     if (this.length) {
-      var _this$offset, _this$outerHeight, _$div$offset$left, _$div$offset, _$div$width, _$$width;
+      var _this$offset, _this$outerHeight, _$div$offset$left, _$div$width, _$$width;
       let $div = $('#instructure_dropdown_list');
       if (options === 'hide' || options === 'remove' || $div.data('current_dropdown_initiator') === this[0]) {
         $div.remove().data('current_dropdown_initiator', null);
@@ -70,9 +70,8 @@
               if ($current.length && $current.prev().length) {
                 $current.removeClass('ui-state-hover ui-state-active').addClass('minimal').prev().addClass('ui-state-hover').removeClass('minimal').find('span').focus();
               } else {
-                var _$item;
                 ;
-                (_$item = window.$item) === null || _$item === void 0 ? void 0 : _$item.focus();
+                window.$item?.focus();
               }
               return false;
             } else if (event.keyCode === 40) {
@@ -147,7 +146,7 @@
       }).hide().show();
 
       // this is a fix so that if the dropdown ends up being off the page then move it back in so that it is on the page.
-      if (((_$div$offset$left = (_$div$offset = $div.offset()) === null || _$div$offset === void 0 ? void 0 : _$div$offset.left) !== null && _$div$offset$left !== void 0 ? _$div$offset$left : 0) + ((_$div$width = $div.width()) !== null && _$div$width !== void 0 ? _$div$width : 0) > ((_$$width = $(window).width()) !== null && _$$width !== void 0 ? _$$width : 0)) {
+      if (((_$div$offset$left = $div.offset()?.left) !== null && _$div$offset$left !== void 0 ? _$div$offset$left : 0) + ((_$div$width = $div.width()) !== null && _$div$width !== void 0 ? _$div$width : 0) > ((_$$width = $(window).width()) !== null && _$$width !== void 0 ? _$$width : 0)) {
         $div.css({
           left: '',
           right: 0

package/es/rce/plugins/instructure_rce_external_tools/lti11-content-items/RceLti11ContentItem.js

@@ -30,12 +30,10 @@ function maybeAddPx(value) {
   return strVal;
 }
 export class RceLti11ContentItem {
-  static fromJSON(contentItem) {
-    let env = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : externalToolsEnvFor(tinymce.activeEditor);
+  static fromJSON(contentItem, env = externalToolsEnvFor(tinymce.activeEditor)) {
     return new RceLti11ContentItem(contentItem, env);
   }
-  constructor(contentItem) {
-    let env = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : externalToolsEnvFor(tinymce.activeEditor);
+  constructor(contentItem, env = externalToolsEnvFor(tinymce.activeEditor)) {
     this.contentItem = void 0;
     this.env = void 0;
     this.contentItem = contentItem;
@@ -49,35 +47,30 @@ export class RceLti11ContentItem {
     return LTI_MIME_TYPES.includes((_this$contentItem$med = this.contentItem.mediaType) !== null && _this$contentItem$med !== void 0 ? _this$contentItem$med : '');
   }
   get isOverriddenForThumbnail() {
-    var _this$contentItem$pla;
-    return this.isLTI && this.contentItem.thumbnail && ((_this$contentItem$pla = this.contentItem.placementAdvice) === null || _this$contentItem$pla === void 0 ? void 0 : _this$contentItem$pla.presentationDocumentTarget) === 'iframe';
+    return this.isLTI && this.contentItem.thumbnail && this.contentItem.placementAdvice?.presentationDocumentTarget === 'iframe';
   }
   get isImage() {
-    var _this$contentItem$med2, _this$contentItem$med3;
-    return ((_this$contentItem$med2 = this.contentItem.mediaType) === null || _this$contentItem$med2 === void 0 ? void 0 : (_this$contentItem$med3 = _this$contentItem$med2.startsWith) === null || _this$contentItem$med3 === void 0 ? void 0 : _this$contentItem$med3.call(_this$contentItem$med2, 'image')) === true;
+    return this.contentItem.mediaType?.startsWith?.('image') === true;
   }
   get linkClassName() {
     return this.isOverriddenForThumbnail ? 'lti-thumbnail-launch' : '';
   }
   get url() {
-    var _ref;
-    return (_ref = this.isLTI ? this.contentItem.canvasURL : this.contentItem.url) === null || _ref === void 0 ? void 0 : _ref.replace(/^(data:text\/html|javascript:)/, '#$1');
+    return (this.isLTI ? this.contentItem.canvasURL : this.contentItem.url)?.replace(/^(data:text\/html|javascript:)/, '#$1');
   }
   get linkTarget() {
-    var _this$contentItem, _this$contentItem$pla2, _this$contentItem$pla3;
     if (this.isOverriddenForThumbnail) {
       return JSON.stringify(this.contentItem.placementAdvice);
     }
-    return ((_this$contentItem = this.contentItem) === null || _this$contentItem === void 0 ? void 0 : (_this$contentItem$pla2 = _this$contentItem.placementAdvice) === null || _this$contentItem$pla2 === void 0 ? void 0 : (_this$contentItem$pla3 = _this$contentItem$pla2.presentationDocumentTarget) === null || _this$contentItem$pla3 === void 0 ? void 0 : _this$contentItem$pla3.toLowerCase()) === 'window' ? '_blank' : null;
+    return this.contentItem?.placementAdvice?.presentationDocumentTarget?.toLowerCase() === 'window' ? '_blank' : null;
   }
   get docTarget() {
-    var _this$contentItem2, _this$contentItem2$pl, _this$contentItem3, _this$contentItem3$pl, _this$contentItem3$pl2;
-    if (((_this$contentItem2 = this.contentItem) === null || _this$contentItem2 === void 0 ? void 0 : (_this$contentItem2$pl = _this$contentItem2.placementAdvice) === null || _this$contentItem2$pl === void 0 ? void 0 : _this$contentItem2$pl.presentationDocumentTarget) === 'embed' && !this.isImage) {
+    if (this.contentItem?.placementAdvice?.presentationDocumentTarget === 'embed' && !this.isImage) {
       return 'text';
     } else if (this.isOverriddenForThumbnail) {
       return 'link';
     }
-    return (_this$contentItem3 = this.contentItem) === null || _this$contentItem3 === void 0 ? void 0 : (_this$contentItem3$pl = _this$contentItem3.placementAdvice) === null || _this$contentItem3$pl === void 0 ? void 0 : (_this$contentItem3$pl2 = _this$contentItem3$pl.presentationDocumentTarget) === null || _this$contentItem3$pl2 === void 0 ? void 0 : _this$contentItem3$pl2.toLowerCase();
+    return this.contentItem?.placementAdvice?.presentationDocumentTarget?.toLowerCase();
   }
   get codePayload() {
     switch (this.docTarget) {
@@ -98,14 +91,14 @@ export class RceLti11ContentItem {
     return this.env.editorSelection;
   }
   generateCodePayloadIframe() {
-    var _addParentFrameContex, _this$contentItem$tit, _this$env, _this$contentItem$pla4, _this$contentItem$pla5, _this$contentItem$pla6, _this$contentItem$pla7;
+    var _addParentFrameContex, _this$contentItem$tit, _this$contentItem$pla, _this$contentItem$pla2;
     const iframe = document.createElement('iframe');
     iframe.src = (_addParentFrameContex = addParentFrameContextToUrl(this.url, this.containingCanvasLtiToolId)) !== null && _addParentFrameContex !== void 0 ? _addParentFrameContex : '';
     iframe.title = (_this$contentItem$tit = this.contentItem.title) !== null && _this$contentItem$tit !== void 0 ? _this$contentItem$tit : '';
     iframe.setAttribute('allowfullscreen', 'true');
     iframe.setAttribute('webkitallowfullscreen', 'true');
     iframe.setAttribute('mozallowfullscreen', 'true');
-    if (((_this$env = this.env) === null || _this$env === void 0 ? void 0 : _this$env.ltiIframeAllowPolicy) !== undefined) {
+    if (this.env?.ltiIframeAllowPolicy !== undefined) {
       iframe.setAttribute('allow', this.env.ltiIframeAllowPolicy);
     } else if (this.isLTI) {
       iframe.setAttribute('allow', 'microphone; camera; midi');
@@ -113,8 +106,8 @@ export class RceLti11ContentItem {
     if (this.contentItem.class) {
       iframe.className = this.contentItem.class;
     }
-    const w = maybeAddPx((_this$contentItem$pla4 = (_this$contentItem$pla5 = this.contentItem.placementAdvice) === null || _this$contentItem$pla5 === void 0 ? void 0 : _this$contentItem$pla5.displayWidth) !== null && _this$contentItem$pla4 !== void 0 ? _this$contentItem$pla4 : undefined);
-    const h = maybeAddPx((_this$contentItem$pla6 = (_this$contentItem$pla7 = this.contentItem.placementAdvice) === null || _this$contentItem$pla7 === void 0 ? void 0 : _this$contentItem$pla7.displayHeight) !== null && _this$contentItem$pla6 !== void 0 ? _this$contentItem$pla6 : undefined);
+    const w = maybeAddPx((_this$contentItem$pla = this.contentItem.placementAdvice?.displayWidth) !== null && _this$contentItem$pla !== void 0 ? _this$contentItem$pla : undefined);
+    const h = maybeAddPx((_this$contentItem$pla2 = this.contentItem.placementAdvice?.displayHeight) !== null && _this$contentItem$pla2 !== void 0 ? _this$contentItem$pla2 : undefined);
     if (w) {
       iframe.style.width = w;
       iframe.setAttribute('width', w.replace('px', ''));
@@ -139,12 +132,12 @@ export class RceLti11ContentItem {
     return div.innerHTML;
   }
   generateCodePayloadEmbed() {
-    var _this$contentItem$pla8, _this$contentItem$pla9, _this$contentItem$pla10, _this$contentItem$pla11;
+    var _this$contentItem$pla3, _this$contentItem$pla4;
     const img = document.createElement('img');
     if (this.url) img.src = this.url;
     if (this.text) img.alt = this.text;
-    const w = maybeAddPx((_this$contentItem$pla8 = (_this$contentItem$pla9 = this.contentItem.placementAdvice) === null || _this$contentItem$pla9 === void 0 ? void 0 : _this$contentItem$pla9.displayWidth) !== null && _this$contentItem$pla8 !== void 0 ? _this$contentItem$pla8 : undefined);
-    const h = maybeAddPx((_this$contentItem$pla10 = (_this$contentItem$pla11 = this.contentItem.placementAdvice) === null || _this$contentItem$pla11 === void 0 ? void 0 : _this$contentItem$pla11.displayHeight) !== null && _this$contentItem$pla10 !== void 0 ? _this$contentItem$pla10 : undefined);
+    const w = maybeAddPx((_this$contentItem$pla3 = this.contentItem.placementAdvice?.displayWidth) !== null && _this$contentItem$pla3 !== void 0 ? _this$contentItem$pla3 : undefined);
+    const h = maybeAddPx((_this$contentItem$pla4 = this.contentItem.placementAdvice?.displayHeight) !== null && _this$contentItem$pla4 !== void 0 ? _this$contentItem$pla4 : undefined);
     if (w) img.style.width = w;
     if (h) img.style.height = h;
     const div = document.createElement('div');
@@ -184,8 +177,8 @@ export class RceLti11ContentItem {
     return div.innerHTML;
   }
   generateLinkHtml() {
-    var _ref2, _emptyAsNull, _this$contentItem$tex, _this$contentItem4, _this$contentItem4$ti;
-    return (_ref2 = (_emptyAsNull = emptyAsNull(this.currentTinyMceSelection)) !== null && _emptyAsNull !== void 0 ? _emptyAsNull : emptyAsNull((_this$contentItem$tex = this.contentItem.text) === null || _this$contentItem$tex === void 0 ? void 0 : _this$contentItem$tex.trim())) !== null && _ref2 !== void 0 ? _ref2 : (_this$contentItem4 = this.contentItem) === null || _this$contentItem4 === void 0 ? void 0 : (_this$contentItem4$ti = _this$contentItem4.title) === null || _this$contentItem4$ti === void 0 ? void 0 : _this$contentItem4$ti.trim();
+    var _ref, _emptyAsNull;
+    return (_ref = (_emptyAsNull = emptyAsNull(this.currentTinyMceSelection)) !== null && _emptyAsNull !== void 0 ? _emptyAsNull : emptyAsNull(this.contentItem.text?.trim())) !== null && _ref !== void 0 ? _ref : this.contentItem?.title?.trim();
   }
 }
 const LTI_MIME_TYPES = ['application/vnd.ims.lti.v1.ltilink', 'application/vnd.ims.lti.v1.launch+json'];

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
@@ -88,7 +89,6 @@ export class RceLti13ContentItem {
     return anchorTag.outerHTML;
   }
   get safeUrl() {
-    var _this$buildUrl;
-    return ((_this$buildUrl = this.buildUrl()) === null || _this$buildUrl === void 0 ? void 0 : _this$buildUrl.replace(/^(data:text\/html|javascript:)/, '#$1')) || '';
+    return this.buildUrl()?.replace(/^(data:text\/html|javascript:)/, '#$1') || '';
   }
 }

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

@@ -20,17 +20,16 @@ import { RceLti13ContentItem } from '../RceLti13ContentItem';
 // Base content item type
 export default class BaseLinkContentItem extends RceLti13ContentItem {
   toHtmlString() {
-    var _this$iframe;
-    if (((_this$iframe = this.iframe) === null || _this$iframe === void 0 ? void 0 : _this$iframe.src) != null) {
+    if (this.iframe?.src != null) {
       return this.iframeTag();
     } else {
       return this.anchorTag(this.linkBody());
     }
   }
   linkText() {
-    var _this$buildText$trim, _this$buildText, _this$buildTitle$trim, _this$buildTitle;
-    const text = (_this$buildText$trim = (_this$buildText = this.buildText()) === null || _this$buildText === void 0 ? void 0 : _this$buildText.trim()) !== null && _this$buildText$trim !== void 0 ? _this$buildText$trim : '';
-    const title = (_this$buildTitle$trim = (_this$buildTitle = this.buildTitle()) === null || _this$buildTitle === void 0 ? void 0 : _this$buildTitle.trim()) !== null && _this$buildTitle$trim !== void 0 ? _this$buildTitle$trim : '';
+    var _this$buildText$trim, _this$buildTitle$trim;
+    const text = (_this$buildText$trim = this.buildText()?.trim()) !== null && _this$buildText$trim !== void 0 ? _this$buildText$trim : '';
+    const title = (_this$buildTitle$trim = this.buildTitle()?.trim()) !== null && _this$buildTitle$trim !== void 0 ? _this$buildTitle$trim : '';
     return text.length > 0 ? text : title.length > 0 ? title : undefined;
   }
   linkBody() {

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

@@ -21,10 +21,10 @@ 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$data4, _event$data5, _event$data6;
-    const ltiEndpoint = (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.ltiEndpoint;
+    var _event$data$content_i;
+    const ltiEndpoint = event.data?.ltiEndpoint;
     const selection = env.editorSelection;
-    const eventContentItems = (_event$data$content_i = (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : _event$data2.content_items) !== null && _event$data$content_i !== void 0 ? _event$data$content_i : [];
+    const eventContentItems = (_event$data$content_i = event.data?.content_items) !== null && _event$data$content_i !== void 0 ? _event$data$content_i : [];
     let unsupportedItemWarningShown = false;
     for (const inputItem of eventContentItems) {
       const parsedItem = rceLti13ContentItemFromJson(inputItem, {
@@ -34,8 +34,7 @@ export default function processEditorContentItems(event, env, dialog) {
         ltiIframeAllowPolicy: env.ltiIframeAllowPolicy
       });
       if (parsedItem != null) {
-        var _event$data3;
-        if ((_event$data3 = event.data) !== null && _event$data3 !== void 0 && _event$data3.replaceEditorContents) {
+        if (event.data?.replaceEditorContents) {
           env.replaceCode(parsedItem.toHtmlString());
         } else {
           env.insertCode(parsedItem.toHtmlString());
@@ -54,17 +53,17 @@ export default function processEditorContentItems(event, env, dialog) {
     }
 
     // Remove "unsaved changes" warnings and close modal
-    if ((_event$data4 = event.data) !== null && _event$data4 !== void 0 && _event$data4.content_items) {
-      dialog === null || dialog === void 0 ? void 0 : dialog.close();
+    if (event.data?.content_items) {
+      dialog?.close();
     }
-    if (((_event$data5 = event.data) === null || _event$data5 === void 0 ? void 0 : _event$data5.msg) !== undefined) {
+    if (event.data?.msg !== undefined) {
       // @ts-expect-error
       showFlashAlert({
         message: event.data.msg.toString()
       });
     }
     // @ts-expect-error
-    if (((_event$data6 = event.data) === null || _event$data6 === void 0 ? void 0 : _event$data6.errormsg) !== undefined) {
+    if (event.data?.errormsg !== undefined) {
       // @ts-expect-error
       showFlashAlert({
         message: event.data.errormsg.toString(),

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

@@ -32,7 +32,6 @@ import ResourceLinkContentItem from './models/ResourceLinkContentItem';
 export function rceLti13ContentItemFromJson(itemJson, context) {
   if (!itemJson.type) return null;
   const clazz = typeRegistry[itemJson.type];
-  // eslint-disable-next-line new-cap
   return clazz ? new clazz(itemJson, context) : null;
 }
 

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

@@ -19,12 +19,12 @@
 import tinymce from 'tinymce';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { RceToolWrapper, buildToolMenuItems, externalToolsForToolbar } from './RceToolWrapper';
+import { RceToolWrapper, buildToolMenuItems } from './RceToolWrapper';
 import formatMessage from '../../../format-message';
 import { ExternalToolSelectionDialog } from './components/ExternalToolSelectionDialog/ExternalToolSelectionDialog';
 import { ensureToolDialogContainerElem } from './dialog-helper';
 import { externalToolsEnvFor } from './ExternalToolsEnv';
-
+import { externalToolsForToolbar } from './util/externalToolsForToolbar';
 // Register plugin
 tinymce.PluginManager.add('instructure_rce_external_tools', initExternalToolsLocalPlugin);
 
@@ -78,8 +78,8 @@ function registerAppsToolbarButton(editor) {
     },
     onSetup(_api) {
       const e = document.querySelector("button[title='apps-temp']");
-      e === null || e === void 0 ? void 0 : e.setAttribute('title', formatMessage('Apps'));
-      e === null || e === void 0 ? void 0 : e.setAttribute('id', 'plug-apps-button');
+      e?.setAttribute('title', formatMessage('Apps'));
+      e?.setAttribute('id', 'plug-apps-button');
       return () => undefined;
     }
   });

package/es/rce/plugins/instructure_rce_external_tools/util/externalToolsForToolbar.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2025 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export function externalToolsForToolbar(tools) {
+  // Limit of not on_by_default but favorited tools is 2
+  const favorited = tools.filter(it => it.favorite && !it.on_by_default).slice(0, 2) || [];
+  const onByDefault = tools.filter(it => it.on_by_default && it.favorite) || [];
+  const set = new Map();
+  // Remove possible overlaps between favorited and onByDefault, otherwise
+  // we'd have duplicate buttons in the toolbar.
+  for (const toolInfo of favorited.concat(onByDefault)) {
+    set.set(toolInfo.id, toolInfo);
+  }
+  return Array.from(set.values()).sort((a, b) => {
+    if (a.on_by_default && !b.on_by_default) {
+      return -1;
+    } else if (!a.on_by_default && b.on_by_default) {
+      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
+      });
+    }
+  });
+}