@instructure/canvas-rce 5.14.0 → 5.14.2

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

@@ -1,10 +1,7 @@
 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.
  *
@@ -22,6 +19,7 @@ import _pt from "prop-types";
  * 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 { replaceTags } from '../../helpers/tags';
 import React, { createRef } from 'react';
 import { Alert } from '@instructure/ui-alerts';
@@ -50,44 +48,37 @@ export default class ExternalToolDialog extends React.Component {
     this.beforeInfoAlertRef = /*#__PURE__*/createRef();
     this.afterInfoAlertRef = /*#__PURE__*/createRef();
     this.iframeRef = /*#__PURE__*/createRef();
-
     this.handleBeforeUnload = ev => ev.returnValue = formatMessage('Changes you made may not be saved.');
-
     this.handleExternalContentReady = data => {
-      const env = this.props.env; // a2DataReady listener will insert the data to the editor,
+      const env = this.props.env;
+
+      // a2DataReady listener will insert the data to the editor,
       // So only close the modal is needed, only if assignments_2_student flag is enabled,
       // is readable by current user and it is a student assignment view.
-
       if (env.isA2StudentView) {
         this.close();
         return;
       }
-
       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);
       } else {
         contentItems.forEach(contentData => {
           var _env$rceWrapper2;
-
-          const code = RceLti11ContentItem.fromJSON({ ...contentData,
+          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);
         });
       }
-
       this.close();
     };
-
     this.handlePostedMessage = ev => {
       if (ev.origin === this.resourceSelectionOrigin) {
         const data = ev.data;
-
         if ((data === null || data === void 0 ? void 0 : data.subject) === 'LtiDeepLinkingResponse') {
           processEditorContentItems(ev, this.props.env, this);
         } else if ((data === null || data === void 0 ? void 0 : data.subject) === 'externalContentReady') {
@@ -98,53 +89,43 @@ 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
-
+      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();
     };
-
     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(); // force tinyMCE to redraw sticky toolbar otherwise it never goes away
+      (_this$props$env$edito = this.props.env.editor) === null || _this$props$env$edito === void 0 ? void 0 : _this$props$env$edito.focus();
 
+      // force tinyMCE to redraw sticky toolbar otherwise it never goes away
       window.dispatchEvent(new Event('resize'));
     };
-
     this.handleInfoAlertFocus = ev => this.setState({
       infoAlert: ev.target
     });
-
     this.handleInfoAlertBlur = () => this.setState({
       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) {
         return '100%';
       }
-
       const toolDefinedHeight = (_this$state$button2 = this.state.button) === null || _this$state$button2 === void 0 ? void 0 : _this$state$button2.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';
       const complexHeightWithDVH = `min(${iFrameHeight}px, calc(${modalMaxHeight}dvh - ${modalHeaderHeightWithPadding}))`;
-
       if (CSS.supports('height', complexHeightWithDVH)) {
         return complexHeightWithDVH;
       } else {
@@ -152,10 +133,8 @@ export default class ExternalToolDialog extends React.Component {
       }
     };
   }
-
   open(button) {
     var _env$editorSelection, _env$editorContent;
-
     const {
       env,
       resourceSelectionUrlOverride
@@ -163,12 +142,11 @@ export default class ExternalToolDialog extends React.Component {
     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 : '';
-
     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
-      const contextAssetInfo = env.contextAssetInfo;
 
+      const contextAssetInfo = env.contextAssetInfo;
       if (contextAssetInfo == null) {
         showFlashAlert({
           message: formatMessage('Unable to determine resource selection url'),
@@ -177,7 +155,6 @@ export default class ExternalToolDialog extends React.Component {
         });
         return;
       }
-
       const {
         contextType,
         contextId
@@ -185,7 +162,6 @@ export default class ExternalToolDialog extends React.Component {
       const canvasOrigin = env.canvasOrigin;
       urlStr = `${canvasOrigin}/${contextType}s/${contextId}/external_tools/${encodeURIComponent(button.id)}/resource_selection`;
     }
-
     this.setState({
       open: true,
       button,
@@ -199,7 +175,6 @@ export default class ExternalToolDialog extends React.Component {
     window.addEventListener('beforeunload', this.handleBeforeUnload);
     window.addEventListener('message', this.handlePostedMessage);
   }
-
   close() {
     window.removeEventListener('beforeunload', this.handleBeforeUnload);
     window.removeEventListener('message', this.handlePostedMessage);
@@ -208,22 +183,17 @@ export default class ExternalToolDialog extends React.Component {
       form: EMPTY_FORM
     });
   }
-
   get resourceSelectionOrigin() {
     if (this.props.resourceSelectionUrlOverride) {
       const resourceSelectionUrl = parseUrlOrNull(this.props.resourceSelectionUrlOverride);
-
       if (resourceSelectionUrl != null) {
         return resourceSelectionUrl.origin;
       }
     }
-
     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;
-
     const state = this.state;
     const props = this.props;
     const label = formatMessage('Embed content from External Tool');
@@ -315,7 +285,6 @@ export default class ExternalToolDialog extends React.Component {
       margin: "small"
     }, formatMessage('The preceding content is partner provided')))));
   }
-
 }
 ExternalToolDialog.propTypes = {
   iframeAllowances: _pt.string.isRequired,

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -17,6 +15,7 @@
  * 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 { Heading } from '@instructure/ui-heading';
 import { CloseButton } from '@instructure/ui-buttons';

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

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -17,6 +16,7 @@ import _pt from "prop-types";
  * 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 { Tray } from '@instructure/ui-tray';
 import { View } from '@instructure/ui-view';

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

@@ -1,6 +1,4 @@
 import _pt from "prop-types";
-// @ts-nocheck
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -18,6 +16,7 @@ import _pt from "prop-types";
  * 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, { useState } from 'react';
 import { Modal } from '@instructure/ui-modal';
 import { Button, CloseButton } from '@instructure/ui-buttons';
@@ -32,9 +31,9 @@ import { Alert } from '@instructure/ui-alerts';
 import formatMessage from '../../../../../format-message';
 import ExternalToolSelectionItem from './ExternalToolSelectionItem';
 import { instuiPopupMountNode } 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');
+
 /**
  * Returns a filtered list of items based on the term.
  *
@@ -44,27 +43,21 @@ const getLiveRegion = () => document.getElementById('flash_screenreader_holder')
  * @param items objects to filter
  * @return matching items if a non-blank search term is provided, otherwise a copy of the original list
  */
-
-
 export function filterItemsByTitleSubstring(searchString, items) {
   if (searchString == null || searchString.length === 0) {
     return items;
   }
-
   const lowerTerm = searchString.toLocaleLowerCase();
   return items.filter(item => item.title.toLocaleLowerCase().includes(lowerTerm));
 }
 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);
     setFilteredResults(filterItemsByTitleSubstring(e.target.value, props.ltiButtons));
   };
-
   const filterEmpty = filteredResults.length <= 0;
   return /*#__PURE__*/React.createElement(Modal, {
     "data-mce-component": true,
@@ -125,7 +118,6 @@ export function ExternalToolSelectionDialog(props) {
     onClick: props.onDismiss,
     color: "primary"
   }, formatMessage('Done'))));
-
   function renderTools(ltiButtons) {
     return /*#__PURE__*/React.createElement(List, {
       isUnstyled: true

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

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -17,6 +16,7 @@ import _pt from "prop-types";
  * 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, { useState } from 'react';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
@@ -65,7 +65,6 @@ export default function ExternalToolSelectionItem(props) {
     }),
     weight: "bold"
   }, title))), renderDescription(description));
-
   function renderDescription(desc) {
     if (desc == null || desc === '') return null;
     return /*#__PURE__*/React.createElement(View, {

package/es/rce/plugins/instructure_rce_external_tools/components/util/ExpandoText.js

@@ -15,6 +15,7 @@
  * 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, { useState } from 'react';
 import { css, StyleSheet } from 'aphrodite';
 import { Text } from '@instructure/ui-text';

package/es/rce/plugins/instructure_rce_external_tools/components/util/ToolLaunchIframe.js

@@ -15,14 +15,15 @@
  * 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 formatMessage from '../../../../../format-message';
+
 /**
  * Provide an iframe for launching an LTI tool directly from the frontend.
  * Works just like all existing usages of the LTI <iframe> element, including
  * extracting a ref of the <iframe> directly and setting things on it later.
  */
-
 const ToolLaunchIframe = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement("iframe", Object.assign({
     title: formatMessage('External tool frame'),

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2024 - 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/>.
+ */
+
+/**
+ * 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 parentFrameContextParam = 'parent_frame_context';
+
+/**
+ * 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 *'];

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

@@ -1,29 +1,44 @@
+/*
+ * 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 ReactDOM from 'react-dom';
 import ExternalToolDialog from './components/ExternalToolDialog/ExternalToolDialog';
 import React, { createRef } from 'react';
 const ensureToolDialogContainerId = 'external-tool-dialog-container';
 export function ensureToolDialogContainerElem() {
   let dialogContainer = document.getElementById(ensureToolDialogContainerId);
-
   if (dialogContainer === null) {
     dialogContainer = document.createElement('div');
     dialogContainer.id = ensureToolDialogContainerId;
     document.body.appendChild(dialogContainer);
   }
-
   return dialogContainer;
 }
 export function openToolDialogFor(toolHelper) {
   const dialogRef = /*#__PURE__*/createRef();
   const env = toolHelper.env;
-  ReactDOM.render( /*#__PURE__*/React.createElement(ExternalToolDialog, {
+  ReactDOM.render(/*#__PURE__*/React.createElement(ExternalToolDialog, {
     ref: dialogRef,
     env: env,
     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);
   });
 }

package/es/rce/plugins/instructure_rce_external_tools/helpers/tags.js

@@ -27,7 +27,6 @@ export function replaceOneTag(text, name, value) {
   if (!text) {
     return text;
   }
-
   const strName = name !== null && name !== void 0 ? name : '';
   const strValue = (value !== null && value !== void 0 ? value : '').replace(/\s/g, '+');
   const itemExpression = new RegExp(`(%7B|{){2}[\\s|%20|\+]*${strName}[\\s|%20|\+]*(%7D|}){2}`, 'g');
@@ -42,7 +41,6 @@ export function replaceOneTag(text, name, value) {
  * @param mappingOrName The mapping record or tag name
  * @param maybeValue The value to replace with, if a single tag name was provided
  */
-
 export function replaceTags(text, mappingOrName, maybeValue) {
   if (typeof mappingOrName === 'object') {
     Object.keys(mappingOrName).forEach(name => {