@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -1,5 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -17,25 +17,24 @@
  * 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 { isContentItemIframeJson, isContentItemThumbnailJson } from './Lti13ContentItemJson';
 import { addParentFrameContextToUrl } from '../util/addParentFrameContextToUrl';
+
 /**
  * Represents an LTI 1.3 Deep Linking Content Item for purposes related to the Rich Content Editor.
  *
  * Use rceLti13ContentItemFromJson to create instances of this class.
  */
-
 export class RceLti13ContentItem {
   constructor(type, json, context) {
     this.type = type;
     this.json = json;
     this.context = context;
   }
-
   get untypedJson() {
     return this.json;
   }
-
   linkThumbnail() {
     if (isContentItemThumbnailJson(this.untypedJson.thumbnail)) {
       const {
@@ -48,51 +47,39 @@ export class RceLti13ContentItem {
       return this.imageTag(this.untypedJson.thumbnail);
     }
   }
-
   iframeTag() {
     const iframeInfo = this.untypedJson.iframe;
-
     if (isContentItemIframeJson(iframeInfo)) {
       var _addParentFrameContex, _this$context$ltiIfra;
-
       const iframeTag = document.createElement('iframe');
       iframeTag.setAttribute('src', (_addParentFrameContex = addParentFrameContextToUrl(iframeInfo.src, this.context.containingCanvasLtiToolId)) !== null && _addParentFrameContex !== void 0 ? _addParentFrameContex : '');
       iframeTag.setAttribute('title', this.buildTitle() || '');
       iframeTag.setAttribute('allowfullscreen', 'true');
       iframeTag.setAttribute('allow', (_this$context$ltiIfra = this.context.ltiIframeAllowPolicy) !== null && _this$context$ltiIfra !== void 0 ? _this$context$ltiIfra : '');
-
       if (iframeInfo.width) {
         iframeTag.style.width = `${iframeInfo.width}px`;
       }
-
       if (iframeInfo.height) {
         iframeTag.style.height = `${iframeInfo.height}px`;
       }
-
       return iframeTag.outerHTML;
     }
   }
-
   imageTag(src, width, height) {
     const imgTag = document.createElement('img');
     imgTag.setAttribute('src', src);
     const text = this.buildText();
-
     if (text != null) {
       imgTag.setAttribute('alt', text);
     }
-
     if (width) {
       imgTag.setAttribute('width', width.toString());
     }
-
     if (height) {
       imgTag.setAttribute('height', height.toString());
     }
-
     return imgTag.outerHTML;
   }
-
   anchorTag(innerHTML) {
     const anchorTag = document.createElement('a');
     anchorTag.setAttribute('href', this.safeUrl);
@@ -101,11 +88,7 @@ export class RceLti13ContentItem {
     anchorTag.innerHTML = innerHTML || '';
     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

@@ -15,65 +15,51 @@
  * 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 { 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() {
     if (this.thumbnail) {
       return this.linkThumbnail();
     }
-
     return this.linkText();
   }
-
   buildText() {
     return this.context.selection || this.json.text;
   }
-
   buildUrl() {
     return this.json.url;
   }
-
   buildTitle() {
     return this.json.title;
   }
-
   get icon() {
     return this.json.icon;
   }
-
   get thumbnail() {
     return this.json.thumbnail;
   }
-
   get iframe() {
     return this.json.iframe;
   }
-
   get custom() {
     return this.json.custom;
   }
-
   get lookup_uuid() {
     return this.json.lookup_uuid;
   }
-
 }

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

@@ -15,33 +15,28 @@
  * 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 { RceLti13ContentItem } from '../RceLti13ContentItem';
 export default class HtmlFragmentContentItem extends RceLti13ContentItem {
   constructor(json, context) {
     super(HtmlFragmentContentItem.type, json, context);
   }
-
   get html() {
     return this.json.html;
   }
-
   buildTitle() {
     return this.json.title;
   }
-
   buildText() {
     return this.json.text;
   }
-
   buildUrl() {
     return undefined;
   }
-
   toHtmlString() {
     // TinyMCE takes care of sanitizing this HTML string.
     // If using a target other than TinyMCE be sure to sanitize.
     return this.html;
   }
-
 }
 HtmlFragmentContentItem.type = 'html';

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

@@ -15,43 +15,35 @@
  * 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 { RceLti13ContentItem } from '../RceLti13ContentItem';
 export default class ImageContentItem extends RceLti13ContentItem {
   constructor(json, context) {
     super(ImageContentItem.type, json, context);
   }
-
   buildUrl() {
     return this.json.url;
   }
-
   buildTitle() {
     return this.json.title;
   }
-
   get thumbnail() {
     return this.json.thumbnail;
   }
-
   buildText() {
     return this.json.text;
   }
-
   get width() {
     return this.json.width;
   }
-
   get height() {
     return this.json.height;
   }
-
   toHtmlString() {
     if (this.thumbnail) {
       return this.anchorTag(this.linkThumbnail());
     }
-
     return this.imageTag(this.safeUrl, this.width, this.height);
   }
-
 }
 ImageContentItem.type = 'image';

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

@@ -15,12 +15,12 @@
  * 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 BaseLinkContentItem from './BaseLinkContentItem';
 // Base content item type
 export default class LinkContentItem extends BaseLinkContentItem {
   constructor(json, context) {
     super(LinkContentItem.type, json, context);
   }
-
 }
 LinkContentItem.type = 'link';

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

@@ -15,14 +15,14 @@
  * 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 BaseLinkContentItem from './BaseLinkContentItem';
 import { addQueryParamsToUrl } from '../../../../../util/url-util';
-import { PARENT_FRAME_CONTEXT_PARAM } from '../../ExternalToolsEnv';
+import { parentFrameContextParam } from '../../constants';
 export default class ResourceLinkContentItem extends BaseLinkContentItem {
   constructor(json, context) {
     super(ResourceLinkContentItem.type, json, context);
   }
-
   toHtmlString() {
     if (this.iframe != null) {
       // The iframe src must always be the Canvas launch endpoint
@@ -32,16 +32,14 @@ export default class ResourceLinkContentItem extends BaseLinkContentItem {
       return this.anchorTag(this.linkBody());
     }
   }
-
   buildUrl() {
     // iframed launches need canvas wrapped around them for postMessages to work
     const display = this.iframe != null ? 'in_rce' : 'borderless';
     return addQueryParamsToUrl(this.context.ltiEndpoint, {
       display,
       resource_link_lookup_uuid: this.lookup_uuid,
-      [PARENT_FRAME_CONTEXT_PARAM]: this.context.containingCanvasLtiToolId
+      [parentFrameContextParam]: this.context.containingCanvasLtiToolId
     });
   }
-
 }
 ResourceLinkContentItem.type = 'ltiResourceLink';

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -17,18 +15,17 @@
  * 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 { rceLti13ContentItemFromJson } from './rceLti13ContentItemFromJson';
 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;
-
-    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, {
         ltiEndpoint: ltiEndpoint !== null && ltiEndpoint !== void 0 ? ltiEndpoint : null,
@@ -36,18 +33,14 @@ export default function processEditorContentItems(event, env, dialog) {
         containingCanvasLtiToolId: env.containingCanvasLtiToolId,
         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());
         }
       } else if (!unsupportedItemWarningShown) {
         var _inputItem$type;
-
         showFlashAlert({
           message: formatMessage('Could not insert content: "{itemType}" items are not currently supported in Canvas.', {
             itemType: (_inputItem$type = inputItem.type) !== null && _inputItem$type !== void 0 ? _inputItem$type : 'unknown'
@@ -57,11 +50,25 @@ export default function processEditorContentItems(event, env, dialog) {
         });
         unsupportedItemWarningShown = true;
       }
-    } // 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();
+    // Remove "unsaved changes" warnings and close modal
+    if (event.data?.content_items) {
+      dialog?.close();
+    }
+    if (event.data?.msg !== undefined) {
+      // @ts-expect-error
+      showFlashAlert({
+        message: event.data.msg.toString()
+      });
+    }
+    // @ts-expect-error
+    if (event.data?.errormsg !== undefined) {
+      // @ts-expect-error
+      showFlashAlert({
+        message: event.data.errormsg.toString(),
+        type: 'error'
+      });
     }
   } catch (e) {
     showFlashAlert({

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

@@ -15,11 +15,11 @@
  * 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 HtmlFragmentContentItem from './models/HtmlFragmentContentItem';
 import ImageContentItem from './models/ImageContentItem';
 import LinkContentItem from './models/LinkContentItem';
 import ResourceLinkContentItem from './models/ResourceLinkContentItem';
-
 /**
  * Creates an RceLti13ContentItem from the given JSON, or null if the type isn't supported.
  *
@@ -31,15 +31,14 @@ 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
-
+  const clazz = typeRegistry[itemJson.type];
   return clazz ? new clazz(itemJson, context) : null;
 }
+
 /*
  * Type safe registry of implementation of RceLti13ContentItem. Adding additional types to the Lti13ContentItemJson
  * union will cause a compiler error if the implementations aren't added here as well.
  */
-
 const typeRegistry = {
   html: HtmlFragmentContentItem,
   image: ImageContentItem,

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

@@ -15,16 +15,19 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import tinymce from 'tinymce';
 import 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'; // Register plugin
-
+import { externalToolsEnvFor } from './ExternalToolsEnv';
+import { externalToolsForToolbar } from './util/externalToolsForToolbar';
+// Register plugin
 tinymce.PluginManager.add('instructure_rce_external_tools', initExternalToolsLocalPlugin);
+
 /**
  * This plugin adds the "Apps" toolbar button and the "Apps" menu item. It is a rewrite of 'instructure_external_tools'
  * to live fully in the canvas-rce package. It supports running in an iframe as part of an LTI tool, such as
@@ -32,20 +35,18 @@ tinymce.PluginManager.add('instructure_rce_external_tools', initExternalToolsLoc
  *
  * @param editor
  */
-
 export function initExternalToolsLocalPlugin(editor) {
   if (RceToolWrapper.forEditorEnv(externalToolsEnvFor(editor)).length === 0) {
     return;
   }
-
   registerFavoriteAppsToolbarButtons(editor);
   registerAppsToolbarButton(editor);
   registerAppsMenu(editor);
 }
+
 /**
  * Add the "Apps" toolbar button with "View all" and MRU buttons
  */
-
 function registerAppsMenu(editor) {
   editor.ui.registry.addNestedMenuItem('lti_tools_menuitem', {
     text: formatMessage('Apps'),
@@ -57,16 +58,14 @@ function registerAppsMenu(editor) {
     }
   });
 }
+
 /**
  * Registers toolbar buttons for favorite apps
  */
-
-
 function registerFavoriteAppsToolbarButtons(editor) {
   const allTools = RceToolWrapper.forEditorEnv(externalToolsEnvFor(editor));
   externalToolsForToolbar(allTools).forEach(toolInfo => editor.ui.registry.addButton(`instructure_external_button_${toolInfo.id}`, toolInfo.asToolbarButton()));
 }
-
 function registerAppsToolbarButton(editor) {
   const tooltip = 'apps-temp';
   editor.ui.registry.addMenuButton('lti_mru_button', {
@@ -77,40 +76,32 @@ function registerAppsToolbarButton(editor) {
       const toolMenuItems = buildToolMenuItems(availableTools, makeViewAllItem(editor));
       callback(toolMenuItems);
     },
-
     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;
     }
-
   });
 }
-
 function openToolSelectionDialog(editor) {
   const availableTools = RceToolWrapper.forEditorEnv(externalToolsEnvFor(editor));
   const container = ensureToolDialogContainerElem();
-
   const handleDismiss = () => {
     ReactDOM.unmountComponentAtNode(container);
     editor.focus();
   };
-
-  ReactDOM.render( /*#__PURE__*/React.createElement(ExternalToolSelectionDialog, {
+  ReactDOM.render(/*#__PURE__*/React.createElement(ExternalToolSelectionDialog, {
     onDismiss: handleDismiss,
     ltiButtons: availableTools
   }), ensureToolDialogContainerElem());
 }
-
 function makeViewAllItem(editor) {
   return {
     type: 'menuitem',
     text: formatMessage('View All'),
-
     onAction() {
       openToolSelectionDialog(editor);
     }
-
   };
 }

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

@@ -15,12 +15,12 @@
  * 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 { addQueryParamsToUrl } from '../../../../util/url-util';
 export function addParentFrameContextToUrl(inputUrlStr, containingCanvasLtiToolId) {
   if (containingCanvasLtiToolId == null || containingCanvasLtiToolId.length === 0) {
     return inputUrlStr !== null && inputUrlStr !== void 0 ? inputUrlStr : null;
   }
-
   return addQueryParamsToUrl(inputUrlStr, {
     parent_frame_context: containingCanvasLtiToolId
   });

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
+      });
+    }
+  });
+}