@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -1,10 +1,6 @@
 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 +18,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';
@@ -31,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,
@@ -50,47 +47,42 @@ 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);
+
+        // @ts-expect-error
+        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);
+
+          // @ts-expect-error
+          env.rceWrapper?.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') {
+        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
@@ -98,53 +90,39 @@ 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.');
       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(); // force tinyMCE to redraw sticky toolbar otherwise it never goes away
+      this.props.env.editor?.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) {
+      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';
       const complexHeightWithDVH = `min(${iFrameHeight}px, calc(${modalMaxHeight}dvh - ${modalHeaderHeightWithPadding}))`;
-
       if (CSS.supports('height', complexHeightWithDVH)) {
         return complexHeightWithDVH;
       } else {
@@ -152,23 +130,20 @@ export default class ExternalToolDialog extends React.Component {
       }
     };
   }
-
   open(button) {
     var _env$editorSelection, _env$editorContent;
-
     const {
       env,
       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
-      const contextAssetInfo = env.contextAssetInfo;
 
+      const contextAssetInfo = env.contextAssetInfo;
       if (contextAssetInfo == null) {
         showFlashAlert({
           message: formatMessage('Unable to determine resource selection url'),
@@ -177,7 +152,6 @@ export default class ExternalToolDialog extends React.Component {
         });
         return;
       }
-
       const {
         contextType,
         contextId
@@ -185,7 +159,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 +172,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,26 +180,21 @@ 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;
-
+    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",
@@ -250,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
@@ -292,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'
@@ -315,7 +286,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';
@@ -31,10 +30,10 @@ 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');
+
 /**
  * Returns a filtered list of items based on the term.
  *
@@ -44,27 +43,20 @@ 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);
+    setFilterTerm(e.target?.value);
     setFilteredResults(filterItemsByTitleSubstring(e.target.value, props.ltiButtons));
   };
-
   const filterEmpty = filteredResults.length <= 0;
   return /*#__PURE__*/React.createElement(Modal, {
     "data-mce-component": true,
@@ -74,7 +66,7 @@ export function ExternalToolSelectionDialog(props) {
       mediumMaxWidth: '42rem'
     },
     label: formatMessage('Apps'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn(),
     onDismiss: props.onDismiss,
     open: true,
     shouldCloseOnDocumentClick: false
@@ -125,7 +117,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,43 @@
+/*
+ * 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);
+    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 => {