@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2023 - present Instructure, Inc.
  *
@@ -17,12 +15,10 @@
  * 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 RCEWrapper from '../../RCEWrapper';
+import { fallbackIframeAllowances } from './constants';
 
-/**
- * Fallback iframe allowances used when they aren't provided to the editor.
- */
-export const fallbackIframeAllowances = ['geolocation *', 'microphone *', 'camera *', 'midi *', 'encrypted-media *', 'autoplay *', 'clipboard-write *', 'display-capture *'];
 /**
  * Type of the "editor buttons" that come from Canvas.
  *
@@ -34,48 +30,34 @@ export const fallbackIframeAllowances = ['geolocation *', 'microphone *', 'camer
  */
 export function externalToolsEnvFor(editor) {
   const props = () => {
-    var _ref, _RCEWrapper$getByEdit;
-
-    return (_ref = (_RCEWrapper$getByEdit = RCEWrapper.getByEditor(editor)) === null || _RCEWrapper$getByEdit === void 0 ? void 0 : _RCEWrapper$getByEdit.props) !== null && _ref !== void 0 ? _ref : undefined;
+    var _ref;
+    return (_ref = RCEWrapper.getByEditor(editor)?.props) !== null && _ref !== void 0 ? _ref : undefined;
   };
-
   let cachedCanvasToolId;
-
   function nonNullishArray(arr) {
-    return arr === null || arr === void 0 ? void 0 : arr.filter(it => it != null);
+    return arr?.filter(it => it != null);
   }
-
   return {
     editor: editor !== null && editor !== void 0 ? editor : null,
-
     get rceWrapper() {
-      var _RCEWrapper$getByEdit2;
-
-      return (_RCEWrapper$getByEdit2 = RCEWrapper.getByEditor(editor)) !== null && _RCEWrapper$getByEdit2 !== void 0 ? _RCEWrapper$getByEdit2 : null;
+      var _RCEWrapper$getByEdit;
+      return (_RCEWrapper$getByEdit = RCEWrapper.getByEditor(editor)) !== null && _RCEWrapper$getByEdit !== void 0 ? _RCEWrapper$getByEdit : null;
     },
-
     get availableRceLtiTools() {
-      var _nonNullishArray, _props;
-
-      return (_nonNullishArray = nonNullishArray((_props = props()) === null || _props === void 0 ? void 0 : _props.ltiTools)) !== null && _nonNullishArray !== void 0 ? _nonNullishArray : [];
+      var _nonNullishArray;
+      return (_nonNullishArray = nonNullishArray(props()?.ltiTools)) !== null && _nonNullishArray !== void 0 ? _nonNullishArray : [];
     },
-
     /**
      * Gets information about the context in which the editor is launched.
      */
     get contextAssetInfo() {
-      var _props2;
-
-      const trayProps = (_props2 = props()) === null || _props2 === void 0 ? void 0 : _props2.trayProps;
-
+      const trayProps = props()?.trayProps;
       if (trayProps != null) {
         var _trayProps$containing;
-
         const {
           contextId,
           contextType
         } = (_trayProps$containing = trayProps.containingContext) !== null && _trayProps$containing !== void 0 ? _trayProps$containing : trayProps;
-
         if (contextId != null && contextId.length > 0 && contextType != null && contextType.length > 0) {
           return {
             contextType,
@@ -83,93 +65,63 @@ export function externalToolsEnvFor(editor) {
           };
         }
       }
-
       return null;
     },
-
     get resourceSelectionUrlOverride() {
-      var _props$externalToolsC, _props3, _props3$externalTools;
-
-      return (_props$externalToolsC = (_props3 = props()) === null || _props3 === void 0 ? void 0 : (_props3$externalTools = _props3.externalToolsConfig) === null || _props3$externalTools === void 0 ? void 0 : _props3$externalTools.resourceSelectionUrlOverride) !== null && _props$externalToolsC !== void 0 ? _props$externalToolsC : null;
+      var _props$externalToolsC;
+      return (_props$externalToolsC = props()?.externalToolsConfig?.resourceSelectionUrlOverride) !== null && _props$externalToolsC !== void 0 ? _props$externalToolsC : null;
     },
-
     get ltiIframeAllowPolicy() {
-      var _nonNullishArray2, _props4, _props4$externalTools;
-
-      return ((_nonNullishArray2 = nonNullishArray((_props4 = props()) === null || _props4 === void 0 ? void 0 : (_props4$externalTools = _props4.externalToolsConfig) === null || _props4$externalTools === void 0 ? void 0 : _props4$externalTools.ltiIframeAllowances)) !== null && _nonNullishArray2 !== void 0 ? _nonNullishArray2 : fallbackIframeAllowances).join('; ');
+      var _nonNullishArray2;
+      return ((_nonNullishArray2 = nonNullishArray(props()?.externalToolsConfig?.ltiIframeAllowances)) !== null && _nonNullishArray2 !== void 0 ? _nonNullishArray2 : fallbackIframeAllowances).join('; ');
     },
-
     get isA2StudentView() {
-      var _props$externalToolsC2, _props5, _props5$externalTools;
-
-      return (_props$externalToolsC2 = (_props5 = props()) === null || _props5 === void 0 ? void 0 : (_props5$externalTools = _props5.externalToolsConfig) === null || _props5$externalTools === void 0 ? void 0 : _props5$externalTools.isA2StudentView) !== null && _props$externalToolsC2 !== void 0 ? _props$externalToolsC2 : false;
+      var _props$externalToolsC2;
+      return (_props$externalToolsC2 = props()?.externalToolsConfig?.isA2StudentView) !== null && _props$externalToolsC2 !== void 0 ? _props$externalToolsC2 : false;
     },
-
     get maxMruTools() {
-      var _props$externalToolsC3, _props6, _props6$externalTools;
-
-      return (_props$externalToolsC3 = (_props6 = props()) === null || _props6 === void 0 ? void 0 : (_props6$externalTools = _props6.externalToolsConfig) === null || _props6$externalTools === void 0 ? void 0 : _props6$externalTools.maxMruTools) !== null && _props$externalToolsC3 !== void 0 ? _props$externalToolsC3 : 5;
+      var _props$externalToolsC3;
+      return (_props$externalToolsC3 = props()?.externalToolsConfig?.maxMruTools) !== null && _props$externalToolsC3 !== void 0 ? _props$externalToolsC3 : 5;
     },
-
     get canvasOrigin() {
-      var _props$canvasOrigin, _props7;
-
-      return (_props$canvasOrigin = (_props7 = props()) === null || _props7 === void 0 ? void 0 : _props7.canvasOrigin) !== null && _props$canvasOrigin !== void 0 ? _props$canvasOrigin : window.location.origin;
+      var _props$canvasOrigin;
+      return (_props$canvasOrigin = props()?.canvasOrigin) !== null && _props$canvasOrigin !== void 0 ? _props$canvasOrigin : window.location.origin;
     },
-
     /**
      * Gets the context id that should be used when launching LTI iframes.
      */
     get containingCanvasLtiToolId() {
-      var _props8, _props8$externalTools;
-
-      const propsToolId = (_props8 = props()) === null || _props8 === void 0 ? void 0 : (_props8$externalTools = _props8.externalToolsConfig) === null || _props8$externalTools === void 0 ? void 0 : _props8$externalTools.containingCanvasLtiToolId;
-
+      const propsToolId = props()?.externalToolsConfig?.containingCanvasLtiToolId;
       if (typeof propsToolId === 'string') {
         return propsToolId;
       }
-
       try {
         if (cachedCanvasToolId === undefined) {
           // Fall back on localStorage until NQ implements
           cachedCanvasToolId = window.localStorage.getItem('canvas_tool_id');
         }
-
         return cachedCanvasToolId;
       } catch {
         return null;
       }
     },
-
     get editorSelection() {
-      var _editor$selection$get, _editor$selection;
-
-      return (_editor$selection$get = editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getContent()) !== null && _editor$selection$get !== void 0 ? _editor$selection$get : null;
+      var _editor$selection$get;
+      return (_editor$selection$get = editor?.selection?.getContent()) !== null && _editor$selection$get !== void 0 ? _editor$selection$get : null;
     },
-
     get editorContent() {
       var _editor$getContent;
-
-      return (_editor$getContent = editor === null || editor === void 0 ? void 0 : editor.getContent()) !== null && _editor$getContent !== void 0 ? _editor$getContent : null;
+      return (_editor$getContent = editor?.getContent()) !== null && _editor$getContent !== void 0 ? _editor$getContent : null;
     },
-
     insertCode(code) {
-      var _this$rceWrapper;
-
-      (_this$rceWrapper = this.rceWrapper) === null || _this$rceWrapper === void 0 ? void 0 : _this$rceWrapper.insertCode(code);
+      if (this.rceWrapper?.insertCode) {
+        this.rceWrapper.insertCode(code);
+      }
     },
-
     replaceCode(code) {
-      var _this$rceWrapper2;
-
-      (_this$rceWrapper2 = this.rceWrapper) === null || _this$rceWrapper2 === void 0 ? void 0 : _this$rceWrapper2.replaceCode(code);
+      if (this.rceWrapper?.replaceCode) {
+        this.rceWrapper.replaceCode(code);
+      }
     }
-
   };
-}
-/**
- * Name of the parameter used to indicate to Canvas that it is being loaded in an iframe inside of an
- * LTI tool. It should be set to the global id of the containing tool.
- */
-
-export const PARENT_FRAME_CONTEXT_PARAM = 'parent_frame_context';
+}

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

@@ -15,105 +15,63 @@
  * 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 { openToolDialogFor } from './dialog-helper';
 import { simpleCache } from '../../../util/simpleCache';
-import { instUiIconsArray } from '../../../util/instui-icon-helper'; // @ts-ignore
+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() {
     return this.env.editor;
   }
-
   constructor(env, toolInfo, mruToolIds) {
-    this.env = env;
-    this.toolInfo = toolInfo;
     this.iconId = void 0;
     this.isMruTool = void 0;
+    this.env = env;
+    this.toolInfo = toolInfo;
     this.iconId = registerToolIcon(env, toolInfo);
     this.isMruTool = mruToolIds.includes(String(toolInfo.id));
   }
-
   get id() {
     return String(this.toolInfo.id);
   }
-
   get title() {
     var _this$toolInfo$name;
-
     return (_this$toolInfo$name = this.toolInfo.name) !== null && _this$toolInfo$name !== void 0 ? _this$toolInfo$name : `Unknown tool (${String(this.toolInfo.id)})`;
   }
-
   get description() {
     return this.toolInfo.description;
   }
-
   get favorite() {
     var _this$toolInfo$favori;
-
     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;
   }
-
   get height() {
     return this.toolInfo.height;
   }
-
   get use_tray() {
     return this.toolInfo.use_tray;
   }
-
   get on_by_default() {
     return this.toolInfo.on_by_default;
   }
-
   asToolbarButton() {
     var _this$iconId;
-
     return {
       type: 'button',
       icon: (_this$iconId = this.iconId) !== null && _this$iconId !== void 0 ? _this$iconId : undefined,
@@ -121,10 +79,8 @@ export class RceToolWrapper {
       onAction: () => this.openDialog()
     };
   }
-
   asMenuItem() {
     var _this$iconId2;
-
     return {
       type: 'menuitem',
       text: this.title,
@@ -132,48 +88,44 @@ export class RceToolWrapper {
       onAction: () => this.openDialog()
     };
   }
-
   openDialog() {
     addMruToolId(this.id, this.env);
     openToolDialogFor(this);
   }
-
 }
 export function parseIconValueFor(toolInfo) {
   const result = {};
-  const canvasIconClass = toolInfo.canvas_icon_class; // URL embedded in canvas_icon_class, which happens in some cases (see MAT-1354)
+  const canvasIconClass = toolInfo.canvas_icon_class;
 
+  // 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;
     }
-  } // URL at the top level takes precedence
-
+  }
 
+  // URL at the top level takes precedence
   if (typeof toolInfo.icon_url === 'string' && toolInfo.icon_url !== '') {
     result.iconUrl = toolInfo.icon_url;
-  } // Icon class as string
-
+  }
 
+  // Icon class as string
   if (typeof canvasIconClass === 'string' && canvasIconClass !== '') {
     result.canvasIconClass = canvasIconClass;
   }
-
   return result;
 }
-
 function registerToolIcon(env, toolInfo) {
   if (env.editor == null) return undefined;
   const iconId = 'lti_tool_' + String(toolInfo.id);
   const {
     iconUrl,
     canvasIconClass
-  } = parseIconValueFor(toolInfo); // We need to strip off the icon- or icon_ prefix from the icon class name to match instui icons
+  } = parseIconValueFor(toolInfo);
 
+  // We need to strip off the icon- or icon_ prefix from the icon class name to match instui icons
   const iconGlyphName = (canvasIconClass !== null && canvasIconClass !== void 0 ? canvasIconClass : '').replace(/^icon[-_]/, '');
-
   if (iconUrl != null && iconUrl.length > 0) {
     // Icon image provided
     env.editor.ui.registry.addIcon(iconId, svgImageCache.get(iconUrl));
@@ -181,18 +133,16 @@ function registerToolIcon(env, toolInfo) {
   } else if (iconGlyphName != null && iconGlyphName.length > 0) {
     // InstUI icon used
     const instUiIcon = instUiIconsArray.find(it => it.variant === 'Line' && it.glyphName === iconGlyphName);
-
     if (instUiIcon != null) {
       env.editor.ui.registry.addIcon(iconId, instUiIcon.src);
       return iconId;
     }
-  } // Fallback to default icon
-
+  }
 
+  // Fallback to default icon
   env.editor.ui.registry.addIcon(iconId, IconLtiSolid.src);
   return iconId;
 }
-
 const svgImageCache = simpleCache(imageUrl => {
   // Sanitize input against XSS
   const svg = document.createElement('svg');
@@ -206,47 +156,38 @@ const svgImageCache = simpleCache(imageUrl => {
   svg.appendChild(image);
   return svg.outerHTML;
 });
+
 /**
  * Loads the list of most recently used external tool ids.
  */
-
 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)) : [];
 }
+
 /**
  * Loads the list of most recently used external tool ids.
  */
-
 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);
   }
 }
 export function addMruToolId(toolId, env) {
   const initialMruToolIds = loadMruToolIds();
-
   if (!initialMruToolIds.includes(toolId)) {
     const newToolIds = [toolId, ...initialMruToolIds.slice(0, env.maxMruTools - 1)];
     storeMruToolIds(newToolIds);
     return newToolIds;
   }
-
   return initialMruToolIds;
 }
 export function buildToolMenuItems(availableTools, viewAllItem) {