@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/instructure_links/components/LinkOptionsTray/LinkOptionsTrayController.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 ReactDOM from 'react-dom';
 import bridge from '../../../../../bridge';
@@ -29,28 +30,22 @@ export default class LinkOptionsTrayController {
     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;
   }
-
   showTrayForEditor(editor) {
     this._editor = editor;
     this._shouldOpen = true;
     const selectedElm = editor.selection.getNode();
-
     if (editor.selection.isCollapsed() && selectedElm.nodeName === 'A') {
       // expand the selection to include the whole <a>
       editor.selection.select(editor.selection.getNode());
@@ -58,40 +53,31 @@ export default class LinkOptionsTrayController {
       const anchorElm = getAnchorElement(editor, selectedElm);
       editor.selection.select(anchorElm);
     }
-
     if (bridge.focusedEditor) {
       // Dismiss any content trays that may already be open
       bridge.hideTrays();
     }
-
     this._renderTray();
   }
-
   hideTrayForEditor(editor) {
     if (this._editor === editor) {
       this._dismissTray();
     }
   }
-
   _applyLinkOptions(linkOptions) {
     this._dismissTray();
-
-    bridge.insertLink({ ...linkOptions,
+    bridge.insertLink({
+      ...linkOptions,
       userText: true
     });
   }
-
   _dismissTray() {
     this._shouldOpen = false;
-
     this._renderTray();
-
     this._editor = null;
   }
-
   _renderTray() {
     let content = {};
-
     if (this._shouldOpen) {
       content = getLinkContentFromEditor(this._editor);
       /*
@@ -99,10 +85,8 @@ export default class LinkOptionsTrayController {
        * (clearing the internal state) so that the currently-selected content
        * can be used for initial options.
        */
-
       this._renderId++;
     }
-
     const element = /*#__PURE__*/React.createElement(LinkOptionsTray, {
       content: content,
       key: this._renderId,
@@ -121,5 +105,4 @@ export default class LinkOptionsTrayController {
     });
     ReactDOM.render(element, this.$container);
   }
-
 }

package/es/rce/plugins/instructure_links/components/LinkOptionsTray/index.js

@@ -31,7 +31,7 @@ import validateURL from '../../validateURL';
 import formatMessage from '../../../../../format-message';
 import { DISPLAY_AS_LINK, DISPLAY_AS_EMBED, DISPLAY_AS_EMBED_DISABLED, DISPLAY_AS_DOWNLOAD_LINK } from '../../../shared/ContentSelection';
 import { getTrayHeight } from '../../../shared/trayUtils';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../../util/fullscreenHelpers';
 export default function LinkOptionsTray(props) {
   const content = props.content || {};
   const textToLink = content.text || '';
@@ -53,7 +53,6 @@ export default function LinkOptionsTray(props) {
       setErr(ex.message);
     }
   }, [url]);
-
   function handleSave(event) {
     event.preventDefault();
     const embedType = content.isPreviewable ? 'scribd' : null;
@@ -68,11 +67,9 @@ export default function LinkOptionsTray(props) {
       href: url,
       id: content.id || null,
       forceRename: true // A change to "text" should always update the link's text
-
     };
     props.onSave(linkAttrs);
   }
-
   function initialPreviewSelection(previewContent) {
     if (previewContent.displayAs === DISPLAY_AS_DOWNLOAD_LINK) {
       return 'disable';
@@ -82,33 +79,26 @@ export default function LinkOptionsTray(props) {
       return 'overlay';
     }
   }
-
   function handleTextChange(event) {
     setText(event.target.value);
   }
-
   function handleLinkChange(event) {
     setUrl(event.target.value);
   }
-
   function handlePreviewChange(event) {
     setAutoOpenPreview(event.target.checked);
   }
-
   function handlePreviewOptionChange(_event, value) {
     setDisableInlinePreview(value === 'overlay' || value === 'disable');
     setDisplayOptionSelection(value);
   }
-
   function renderDisplayOptions() {
     return /*#__PURE__*/React.createElement(FormFieldGroup, {
       description: formatMessage('Display Options'),
       layout: "stacked",
       rowSpacing: "small"
     }, /*#__PURE__*/React.createElement(RadioInputGroup, {
-      description: " "
-      /* the FormFieldGroup is providing the label */
-      ,
+      description: " " /* the FormFieldGroup is providing the label */,
       name: "preview_option",
       onChange: handlePreviewOptionChange,
       value: displayOptionSelection
@@ -134,12 +124,11 @@ export default function LinkOptionsTray(props) {
       checked: autoOpenPreview
     })));
   }
-
   return /*#__PURE__*/React.createElement(Tray, {
     "data-testid": "RCELinkOptionsTray",
     "data-mce-component": true,
     label: formatMessage('Link Options'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     onDismiss: props.onRequestClose,
     onEntered: props.onEntered,
     onExited: props.onExited,

package/es/rce/plugins/instructure_links/components/LinkSet.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, { Component, useRef } from 'react';
 import { bool, func, string } from 'prop-types';
 import { linkShape, linksShape, linkType } from './propTypes';
@@ -27,10 +28,10 @@ import { LoadMoreButton, LoadingIndicator, LoadingStatus, useIncrementalLoading
 import Link from './Link';
 import RCEGlobals from '../../../RCEGlobals';
 import { NoResults } from './NoResults';
+
 /*
  * This is needed only as long as `LinkSet` is a class component.
  */
-
 function IncrementalLoader(props) {
   const {
     children,
@@ -57,17 +58,14 @@ function IncrementalLoader(props) {
     },
     // not actually used in the query, but a required param
     searchString,
-
     onLoadInitial() {
       if (fetchInitialPage) {
         fetchInitialPage();
       }
     },
-
     onLoadMore() {
       fetchNextPage();
     },
-
     records: links
   });
   return children({
@@ -75,78 +73,62 @@ function IncrementalLoader(props) {
     lastItemRef
   });
 }
-
 class LinkSet extends Component {
   constructor(props) {
     super(props);
     this.describedByID = `rce-LinkSet-describedBy-${uid()}`;
     this.loadMoreButtonRef = null;
   }
-
   hasLinks(props) {
     return props.collection.links.length > 0;
   }
-
   isEmpty(props) {
     return !this.hasLinks(props) && !props.collection.hasMore && !props.collection.isLoading;
   }
-
-  compareURLs() {
-    let url1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let url2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  compareURLs(url1 = '', url2 = '') {
     if (url1 === '' || url2 === '') return false;
     return url1.split('?')[0] === url2.split('?')[0];
   }
-
   renderLinks(lastItemRef) {
     function refFor(index, array) {
       if (!lastItemRef || index !== array.length - 1) {
         return null;
-      } // Return a compatible callback ref for InstUI
-
+      }
 
+      // Return a compatible callback ref for InstUI
       return ref => {
         lastItemRef.current = ref;
       };
     }
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, {
       id: this.describedByID
     }, formatMessage('Click to insert a link into the editor.')), /*#__PURE__*/React.createElement(List, {
       isUnstyled: true,
       as: "ul",
       margin: "0"
-    }, this.props.collection.links.map((link, index, array) => {
-      var _this$props$selectedL;
-
-      return /*#__PURE__*/React.createElement(List.Item, {
-        key: link.href,
-        spacing: "none",
-        padding: "0"
-      }, /*#__PURE__*/React.createElement(Link, {
-        link: link,
-        type: this.props.type,
-        onClick: this.props.onLinkClick,
-        describedByID: this.describedByID,
-        elementRef: refFor(index, array),
-        editing: this.props.editing,
-        onEditClick: this.props.onEditClick,
-        isSelected: this.compareURLs((_this$props$selectedL = this.props.selectedLink) === null || _this$props$selectedL === void 0 ? void 0 : _this$props$selectedL.href, link.href)
-      }));
-    })));
+    }, this.props.collection.links.map((link, index, array) => /*#__PURE__*/React.createElement(List.Item, {
+      key: link.href,
+      spacing: "none",
+      padding: "0"
+    }, /*#__PURE__*/React.createElement(Link, {
+      link: link,
+      type: this.props.type,
+      onClick: this.props.onLinkClick,
+      describedByID: this.describedByID,
+      elementRef: refFor(index, array),
+      editing: this.props.editing,
+      onEditClick: this.props.onEditClick,
+      isSelected: this.compareURLs(this.props.selectedLink?.href, link.href)
+    })))));
   }
-
   renderEmptyIndicator() {
-    var _this$props$searchStr;
-
     return /*#__PURE__*/React.createElement(NoResults, {
       contextType: this.props.contextType,
       contextId: this.props.contextId,
       collectionType: this.props.type,
-      isSearchResult: ((_this$props$searchStr = this.props.searchString) === null || _this$props$searchStr === void 0 ? void 0 : _this$props$searchStr.length) >= 3
+      isSearchResult: this.props.searchString?.length >= 3
     });
   }
-
   renderLoadingError() {
     if (this.props.collection.lastError) {
       return /*#__PURE__*/React.createElement("span", {
@@ -154,30 +136,23 @@ class LinkSet extends Component {
         role: "alert"
       }, formatMessage('Loading failed...'));
     }
-
     return null;
   }
-
   render() {
-    return /*#__PURE__*/React.createElement(IncrementalLoader, this.props, _ref => {
-      let {
-        loader,
-        lastItemRef
-      } = _ref;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        "data-testid": "instructure_links-LinkSet"
-      }, this.hasLinks(this.props) && this.renderLinks(lastItemRef), this.renderLoadingError(), loader.isLoading && /*#__PURE__*/React.createElement(LoadingIndicator, {
-        loader: loader
-      }), !loader.isLoading && loader.hasMore && /*#__PURE__*/React.createElement(LoadMoreButton, {
-        loader: loader
-      }), this.isEmpty(this.props) && !this.props.suppressRenderEmpty && this.renderEmptyIndicator()), /*#__PURE__*/React.createElement(LoadingStatus, {
-        loader: loader
-      }));
-    });
+    return /*#__PURE__*/React.createElement(IncrementalLoader, this.props, ({
+      loader,
+      lastItemRef
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      "data-testid": "instructure_links-LinkSet"
+    }, this.hasLinks(this.props) && this.renderLinks(lastItemRef), this.renderLoadingError(), loader.isLoading && /*#__PURE__*/React.createElement(LoadingIndicator, {
+      loader: loader
+    }), !loader.isLoading && loader.hasMore && /*#__PURE__*/React.createElement(LoadMoreButton, {
+      loader: loader
+    }), this.isEmpty(this.props) && !this.props.suppressRenderEmpty && this.renderEmptyIndicator()), /*#__PURE__*/React.createElement(LoadingStatus, {
+      loader: loader
+    })));
   }
-
 }
-
 LinkSet.propTypes = {
   type: linkType.isRequired,
   collection: linksShape.isRequired,

package/es/rce/plugins/instructure_links/components/LinksPanel.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 formatMessage from '../../../../format-message';
@@ -22,46 +23,58 @@ import { collectionsShape, linkShape } from './propTypes';
 import NavigationPanel from './NavigationPanel';
 import CollectionPanel from './CollectionPanel';
 import { View } from '@instructure/ui-view';
-import { pickProps } from '@instructure/ui-react-utils';
-
 function LinksPanel(props) {
   const isCourse = props.contextType === 'course';
   const isGroup = props.contextType === 'group';
-  const collectionProps = pickProps(props, CollectionPanel.propTypes);
+  const commonCollectionProps = {
+    collections: props.collections,
+    contextId: props.contextId,
+    contextType: props.contextType,
+    fetchInitialPage: props.fetchInitialPage,
+    fetchNextPage: props.fetchNextPage,
+    newPageLinkExpanded: props.newPageLinkExpanded,
+    onChangeAccordion: props.onChangeAccordion,
+    onLinkClick: props.onLinkClick,
+    renderNewPageLink: props.renderNewPageLink,
+    searchString: props.searchString,
+    selectedAccordionIndex: props.selectedAccordionIndex,
+    suppressRenderEmpty: props.suppressRenderEmpty,
+    toggleNewPageForm: props.toggleNewPageForm
+  };
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     "data-testid": "instructure_links-LinksPanel"
-  }, (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+  }, (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, commonCollectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
     selectedLink: props.selectedLink,
     collection: "wikiPages",
     label: formatMessage('Pages')
-  })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+  })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, commonCollectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
     selectedLink: props.selectedLink,
     collection: "assignments",
     label: formatMessage('Assignments')
-  })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+  })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, commonCollectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
     selectedLink: props.selectedLink,
     collection: "quizzes",
     label: formatMessage('Quizzes')
-  })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+  })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, commonCollectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
     selectedLink: props.selectedLink,
     collection: "announcements",
     label: formatMessage('Announcements')
-  })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+  })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, commonCollectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
     selectedLink: props.selectedLink,
     collection: "discussions",
     label: formatMessage('Discussions')
-  })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+  })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, commonCollectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
     selectedLink: props.selectedLink,
@@ -77,7 +90,6 @@ function LinksPanel(props) {
     onEditClick: props.onEditClick
   }));
 }
-
 LinksPanel.propTypes = {
   selectedAccordionIndex: string,
   onChangeAccordion: func,

package/es/rce/plugins/instructure_links/components/NavigationPanel.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 { bool, func, string } from 'prop-types';
 import React from 'react';
 import LinkSet from './LinkSet';
 import formatMessage from '../../../../format-message';
 import AccordionSection from './AccordionSection';
-
 function typeCollection(contextId, contextType) {
   switch (contextType) {
     case 'course':
@@ -52,21 +52,23 @@ function typeCollection(contextId, contextType) {
         }, {
           href: `/courses/${contextId}/assignments/syllabus`,
           title: formatMessage('Syllabus')
-        }, // outcomes
+        },
+        // outcomes
         {
           href: `/courses/${contextId}/quizzes`,
           title: formatMessage('Quizzes')
         }, {
           href: `/courses/${contextId}/modules`,
           title: formatMessage('Modules')
-        }, // conferences
+        },
+        // conferences
         {
           href: `/courses/${contextId}/collaborations`,
           title: formatMessage('Collaborations')
-        } // settings
+        }
+        // settings
         ]
       };
-
     case 'group':
       return {
         links: [{
@@ -89,7 +91,6 @@ function typeCollection(contextId, contextType) {
           title: formatMessage('People')
         }]
       };
-
     default:
       // user, TODO
       return {
@@ -100,11 +101,9 @@ function typeCollection(contextId, contextType) {
       };
   }
 }
-
 export default function NavigationPanel(props) {
   const collection = typeCollection(props.contextId, props.contextType);
   let navigationSummary = '';
-
   if (props.contextType === 'course') {
     navigationSummary = formatMessage('Course Navigation');
   } else if (props.contextType === 'group') {
@@ -112,7 +111,6 @@ export default function NavigationPanel(props) {
   } else {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "instructure_links-NavigationPanel"
   }, /*#__PURE__*/React.createElement(AccordionSection, {

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

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2023 - 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 { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
@@ -26,7 +26,6 @@ import formatMessage from '../../../../format-message';
 import { getIcon } from '../../shared/linkUtils';
 export function buildUrl(contextType, contextId, collectionType) {
   var _typeMap$collectionTy;
-
   const typeMap = {
     wikiPages: 'pages',
     discussions: 'discussion_topics'
@@ -37,30 +36,24 @@ export function getMessage(collectionType, isSearchResult) {
   switch (collectionType) {
     case 'wikiPages':
       return isSearchResult ? formatMessage('No pages found.') : formatMessage('No pages created yet.');
-
     case 'assignments':
       return isSearchResult ? formatMessage('No assignments found.') : formatMessage('No assignments created yet.');
-
     case 'quizzes':
       return isSearchResult ? formatMessage('No quizzes found.') : formatMessage('No quizzes created yet.');
-
     case 'announcements':
       return isSearchResult ? formatMessage('No announcements found.') : formatMessage('No announcements created yet.');
-
     case 'discussions':
       return isSearchResult ? formatMessage('No discussions found.') : formatMessage('No discussions created yet.');
-
     case 'modules':
       return isSearchResult ? formatMessage('No modules found.') : formatMessage('No modules created yet.');
   }
 }
-export const NoResults = _ref => {
-  let {
-    contextType,
-    contextId,
-    collectionType,
-    isSearchResult
-  } = _ref;
+export const NoResults = ({
+  contextType,
+  contextId,
+  collectionType,
+  isSearchResult
+}) => {
   const Icon = getIcon(collectionType);
   return /*#__PURE__*/React.createElement(View, {
     padding: "xx-large"