@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2018 - 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 formatMessage from '../../../format-message';
 import bridge from '../../../bridge';
 import { isImageEmbed } from '../shared/ContentSelection';
@@ -30,15 +29,13 @@ const USER_PLUGIN_KEY = 'user_images';
 const GROUP_PLUGIN_KEY = 'group_images';
 const trayController = new TrayController();
 
+// @ts-expect-error
 function getMenuItems(ed) {
-  var _ed$settings$canvas_r;
-
-  const contextType = (_ed$settings$canvas_r = ed.settings.canvas_rce_user_context) === null || _ed$settings$canvas_r === void 0 ? void 0 : _ed$settings$canvas_r.type;
+  const contextType = ed.settings.canvas_rce_user_context?.type;
   const items = [{
     text: formatMessage('Upload Image'),
     value: 'instructure_upload_image'
   }];
-
   if (contextType === 'course') {
     items.push({
       text: formatMessage('Course Images'),
@@ -50,7 +47,6 @@ function getMenuItems(ed) {
       value: 'instructure_group_image'
     });
   }
-
   items.push({
     text: formatMessage('User Images'),
     value: 'instructure_user_image'
@@ -58,36 +54,34 @@ function getMenuItems(ed) {
   return items;
 }
 
+// @ts-expect-error
 function doMenuItem(ed, value) {
   switch (value) {
     case 'instructure_upload_image':
       ed.execCommand('mceInstructureImage');
       break;
-
     case 'instructure_course_image':
       ed.focus(true);
       ed.execCommand('instructureTrayForImages', false, COURSE_PLUGIN_KEY);
       break;
-
     case 'instructure_group_image':
       ed.focus(true);
       ed.execCommand('instructureTrayForImages', false, GROUP_PLUGIN_KEY);
       break;
-
     case 'instructure_user_image':
       ed.focus(true);
       ed.execCommand('instructureTrayForImages', false, USER_PLUGIN_KEY);
       break;
   }
 }
-
 tinymce.PluginManager.add('instructure_image', function (editor) {
   // Register commands
   editor.addCommand('mceInstructureImage', () => clickCallback(editor, document));
   editor.addCommand('instructureTrayForImages', (ui, plugin_key) => {
     bridge.showTrayForPlugin(plugin_key, editor.id);
-  }); // Register menu items
+  });
 
+  // Register menu items
   editor.ui.registry.addNestedMenuItem('instructure_image', {
     text: formatMessage('Image'),
     icon: 'image',
@@ -102,8 +96,9 @@ tinymce.PluginManager.add('instructure_image', function (editor) {
         }
       };
     })
-  }); // Register toolbar button
+  });
 
+  // Register toolbar button
   editor.ui.registry.addMenuButton('instructure_image', {
     tooltip: formatMessage('Images'),
     icon: 'image',
@@ -113,37 +108,36 @@ tinymce.PluginManager.add('instructure_image', function (editor) {
       value: item.value,
       onAction: () => doMenuItem(editor, item.value)
     }))),
-
     onSetup(api) {
+      // @ts-expect-error
       function handleNodeChange(_e) {
         api.setDisabled(!isOKToLink(editor.selection.getContent()));
       }
-
       setTimeout(handleNodeChange);
       editor.on('NodeChange', handleNodeChange);
       return () => {
         editor.off('NodeChange', handleNodeChange);
       };
     }
-
   });
+
   /*
    * Register the Image "Options" button that will open the Image Options
    * tray.
    */
 
   function canUpdateImageProps(node) {
-    return !node.classList.contains('equation_image') && isImageEmbed(node) && // don't show for icon maker
+    return !node.classList.contains('equation_image') && isImageEmbed(node) &&
+    // don't show for icon maker
     !node.getAttribute(ICON_MAKER_ATTRIBUTE);
   }
-
   const buttonAriaLabel = formatMessage('Show image options');
   editor.ui.registry.addButton('instructure-image-options', {
-    onAction() {
+    onAction(/* buttonApi */
+    ) {
       // show the tray
       trayController.showTrayForEditor(editor);
     },
-
     text: formatMessage('Image Options'),
     tooltip: buttonAriaLabel
   });

package/es/rce/plugins/instructure_links/clickCallback.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 LinkOptionsDialogController from './components/LinkOptionsDialog/LinkOptionsDialogController';
 const dialogController = new LinkOptionsDialogController();
 export default function (ed, op) {

package/es/rce/plugins/instructure_links/components/AccordionSection.js

@@ -15,20 +15,20 @@
  * 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 { bool, func, node, string } from 'prop-types';
 import formatMessage from '../../../../format-message';
 import { ToggleGroup } from '@instructure/ui-toggle-details';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
-export default function AccordionSection(_ref) {
-  let {
-    collection,
-    children,
-    onToggle,
-    expanded,
-    label
-  } = _ref;
+export default function AccordionSection({
+  collection,
+  children,
+  onToggle,
+  expanded,
+  label
+}) {
   const toggleLabel = expanded ? formatMessage('Collapse to hide {types}', {
     types: label
   }) : formatMessage('Expand to see {types}', {

package/es/rce/plugins/instructure_links/components/CollectionPanel.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 from 'react';
 import { bool, func, string } from 'prop-types';
 import { collectionsShape, linkShape } from './propTypes';
@@ -27,19 +28,16 @@ export default function CollectionPanel(props) {
     expanded: props.selectedAccordionIndex === props.collection,
     label: props.label
   };
-
   function fetchInitialPage() {
     if (props.fetchInitialPage) {
       props.fetchInitialPage(props.collection, props.searchString);
     }
   }
-
   function fetchNextPage() {
     if (props.fetchNextPage) {
       props.fetchNextPage(props.collection, props.searchString);
     }
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "instructure_links-CollectionPanel"
   }, /*#__PURE__*/React.createElement(AccordionSection, accordionProps, /*#__PURE__*/React.createElement(LinkSet, {

package/es/rce/plugins/instructure_links/components/Link.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 { bool, func, oneOf, string } from 'prop-types';
 import { linkShape } from './propTypes';
@@ -31,7 +32,8 @@ import { IconDragHandleLine, IconPublishSolid, IconUnpublishedSolid } from '@ins
 import RCEGlobals from '../../../RCEGlobals';
 import { getIcon } from '../../shared/linkUtils';
 export default function Link(props) {
-  const internalLink = { ...props.link
+  const internalLink = {
+    ...props.link
   };
   const [isHovering, setIsHovering] = useState(false);
   const {
@@ -41,49 +43,41 @@ export default function Link(props) {
     date_type
   } = props.link;
   const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
-  internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
-
+  internalLink['data-course-type'] = type;
+  // Only included published attr if it makes sense for the link type
   const publishable = !['navigation', 'announcements'].includes(type);
   internalLink['data-published'] = publishable ? published : null;
   const Icon = getIcon(type);
   const color = published ? 'success' : 'primary';
   let dateString = null;
-
   if (date) {
     if (date === 'multiple') {
       dateString = formatMessage('Due: Multiple Dates');
     } else {
-      var _RCEGlobals$getConfig;
-
       // Uses user locale and timezone
-      const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
+      const configuredTimezone = RCEGlobals.getConfig()?.timezone;
       const when = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
-
       switch (date_type) {
         case 'todo':
           dateString = formatMessage('To Do: {when}', {
             when
           });
           break;
-
         case 'published':
           dateString = formatMessage('Published: {when}', {
             when
           });
           break;
-
         case 'posted':
           dateString = formatMessage('Posted: {when}', {
             when
           });
           break;
-
         case 'delayed_post':
           dateString = formatMessage('To Be Posted: {when}', {
             when
           });
           break;
-
         case 'due':
         default:
           dateString = formatMessage('Due: {when}', {
@@ -93,40 +87,33 @@ export default function Link(props) {
       }
     }
   }
-
   const publishedMsg = props.link.published ? formatMessage('published') : formatMessage('unpublished');
-
   function handleLinkClick(e) {
     e.preventDefault();
-
     if (props.editing) {
-      props.onEditClick({ ...internalLink,
+      props.onEditClick({
+        ...internalLink,
         type
       });
     } else {
       props.onClick(internalLink);
     }
   }
-
   function handleLinkKey(e) {
     // press the button on enter or space
     if (e.keyCode === 13 || e.keyCode === 32) {
       handleLinkClick(e);
     }
   }
-
   function handleDragStart(e) {
     dragHtml(e, renderLinkHtml(internalLink, internalLink.title));
   }
-
   function handleDragEnd(_e) {
     document.body.click(); // closes the tray
   }
-
   function handleHover(e) {
     setIsHovering(e.type === 'mouseenter');
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "instructure_links-Link",
     draggable: !props.editing,
@@ -137,69 +124,66 @@ export default function Link(props) {
     style: {
       position: 'relative'
     }
-  }, /*#__PURE__*/React.createElement(Focusable, null, _ref => {
-    let {
-      focused
-    } = _ref;
-    return /*#__PURE__*/React.createElement(View, {
-      withFocusOutline: focused,
-      focusPosition: "inset",
-      position: "relative",
-      as: "div",
-      role: "button",
-      tabIndex: 0,
-      background: "primary",
-      display: "block",
-      width: "100%",
-      borderWidth: "0 0 small 0",
-      padding: "x-small",
-      "aria-describedby": props.describedByID,
-      onClick: handleLinkClick,
-      onKeyDown: handleLinkKey,
-      elementRef: props.elementRef
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        pointerEvents: 'none'
-      }
-    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
-      margin: "0 xx-small 0 0",
-      size: "1.125rem"
-    }, isHovering && !props.editing ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
-      size: "x-small",
-      inline: false
-    }) : null), /*#__PURE__*/React.createElement(Flex.Item, {
-      shouldGrow: true,
-      shouldShrink: true
-    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
-      padding: "0 x-small 0 0"
-    }, /*#__PURE__*/React.createElement(Text, {
-      color: color
-    }, /*#__PURE__*/React.createElement(Icon, {
-      size: "x-small",
-      inline: false,
-      "data-type": type
-    }))), /*#__PURE__*/React.createElement(Flex.Item, {
-      padding: "0 x-small 0 0",
-      shouldGrow: true,
-      shouldShrink: true,
-      textAlign: "start"
-    }, /*#__PURE__*/React.createElement(View, {
-      as: "div",
-      margin: "0"
-    }, title, props.isSelected && /*#__PURE__*/React.createElement(ScreenReaderContent, {
-      "data-testid": "selected-link-indicator"
-    }, formatMessage('Selected'))), dateString ? /*#__PURE__*/React.createElement(View, {
-      as: "div"
-    }, dateString) : null), 'published' in props.link && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(AccessibleContent, {
-      alt: publishedMsg
-    }, /*#__PURE__*/React.createElement(Text, {
-      color: color
-    }, published ? /*#__PURE__*/React.createElement(IconPublishSolid, {
-      inline: false
-    }) : /*#__PURE__*/React.createElement(IconUnpublishedSolid, {
-      inline: false
-    })))))))));
-  }));
+  }, /*#__PURE__*/React.createElement(Focusable, null, ({
+    focused
+  }) => /*#__PURE__*/React.createElement(View, {
+    withFocusOutline: focused,
+    focusPosition: "inset",
+    position: "relative",
+    as: "div",
+    role: "button",
+    tabIndex: 0,
+    background: "primary",
+    display: "block",
+    width: "100%",
+    borderWidth: "0 0 small 0",
+    padding: "x-small",
+    "aria-describedby": props.describedByID,
+    onClick: handleLinkClick,
+    onKeyDown: handleLinkKey,
+    elementRef: props.elementRef
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 xx-small 0 0",
+    size: "1.125rem"
+  }, isHovering && !props.editing ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
+    size: "x-small",
+    inline: false
+  }) : null), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    shouldShrink: true
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "0 x-small 0 0"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: color
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: "x-small",
+    inline: false,
+    "data-type": type
+  }))), /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "0 x-small 0 0",
+    shouldGrow: true,
+    shouldShrink: true,
+    textAlign: "start"
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    margin: "0"
+  }, title, props.isSelected && /*#__PURE__*/React.createElement(ScreenReaderContent, {
+    "data-testid": "selected-link-indicator"
+  }, formatMessage('Selected'))), dateString ? /*#__PURE__*/React.createElement(View, {
+    as: "div"
+  }, dateString) : null), 'published' in props.link && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(AccessibleContent, {
+    alt: publishedMsg
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: color
+  }, published ? /*#__PURE__*/React.createElement(IconPublishSolid, {
+    inline: false
+  }) : /*#__PURE__*/React.createElement(IconUnpublishedSolid, {
+    inline: false
+  })))))))))));
 }
 Link.propTypes = {
   link: linkShape.isRequired,

package/es/rce/plugins/instructure_links/components/LinkOptionsDialog/LinkOptionsDialogController.js

@@ -27,81 +27,62 @@ export default class LinkOptionsDialogController {
   constructor() {
     this._dismissDialog = () => {
       this._shouldOpen = false;
-
       this._renderDialog();
     };
-
     this._hasClosed = () => {
       bridge.focusActiveEditor(false);
       this._isOpen = false;
-
       this._editor.focus(false);
-
       this._editor = null;
     };
-
     this._editor = null;
     this._isOpen = false;
     this._shouldOpen = false;
     this._renderId = 0;
   }
-
   get $container() {
     let $container = document.getElementById(CONTAINER_ID);
-
     if ($container == null) {
       $container = document.createElement('div');
       $container.id = CONTAINER_ID;
       document.body.appendChild($container);
     }
-
     return $container;
   }
-
   get isOpen() {
     return this._isOpen;
   }
-
   showDialogForEditor(editor, op) {
     this._editor = editor;
     this._shouldOpen = true;
     this._op = op;
-
     this._renderDialog();
   }
-
   hideDialog() {
     this._dismissDialog();
   }
-
   _applyLinkOptions(linkOptions) {
     this._dismissDialog();
-
     bridge.insertLink(linkOptions);
   }
-
   _renderDialog() {
     let html, onlyText, anchorElm, url, text;
-
     if (this._shouldOpen) {
-      var _anchorElm;
-
       html = this._editor.selection.getContent();
       onlyText = isOnlyTextSelected(html);
       text = onlyText && this._editor.selection.getContent({
         format: 'text'
       });
       anchorElm = getAnchorElement(this._editor, this._editor.selection.getNode());
-      url = (_anchorElm = anchorElm) === null || _anchorElm === void 0 ? void 0 : _anchorElm.getAttribute('href');
+      url = anchorElm?.getAttribute('href');
+
       /*
        * When the dialog is being opened again, it should be rendered fresh
        * (clearing the internal state) so that the currently-selected content
        * can be used for initial options.
        */
-
       this._renderId++;
     }
-
     const element = /*#__PURE__*/React.createElement(LinkOptionsDialog, {
       key: this._renderId,
       size: "medium",
@@ -116,12 +97,10 @@ export default class LinkOptionsDialogController {
       onRequestClose: this._dismissDialog,
       onSave: linkOptions => {
         bridge.focusEditor(this._editor.rceWrapper);
-
         this._applyLinkOptions(linkOptions);
       },
       open: this._shouldOpen
     });
     ReactDOM.render(element, this.$container);
   }
-
 }

package/es/rce/plugins/instructure_links/components/LinkOptionsDialog/index.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, { useEffect, useState } from 'react';
 import { bool, func, oneOf, string } from 'prop-types';
 import { Alert } from '@instructure/ui-alerts';
@@ -25,7 +26,7 @@ import { Modal } from '@instructure/ui-modal';
 import { View } from '@instructure/ui-view';
 import formatMessage from '../../../../../format-message';
 import validateURL from '../../validateURL';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../../util/fullscreenHelpers';
 const CREATE_LINK = 'create';
 const EDIT_LINK = 'edit';
 export default function LinkOptionsDialog(props) {
@@ -43,7 +44,6 @@ export default function LinkOptionsDialog(props) {
       setErr(ex.message);
     }
   }, [url]);
-
   function handleSave(event) {
     event.preventDefault();
     if (!url) return;
@@ -57,22 +57,19 @@ export default function LinkOptionsDialog(props) {
       forceRename: true
     });
   }
-
   function handleTextChange(event) {
     setText(event.target.value);
   }
-
   function handleLinkChange(event) {
     setUrl(event.target.value);
   }
-
   const label = props.operation === CREATE_LINK ? formatMessage('Insert Link') : formatMessage('Edit Link');
   return /*#__PURE__*/React.createElement(Modal, {
     "data-testid": "RCELinkOptionsDialog",
     "data-mce-component": true,
     as: "form",
     label: label,
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     onDismiss: props.onRequestClose,
     onEntered: props.onEntered,
     onExited: props.onExited,