@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/instructure_search_and_replace/getSelectionContext.js

@@ -15,49 +15,42 @@
  * 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/>.
  */
-const NUMBER_OF_WORDS = 10;
 
+const NUMBER_OF_WORDS = 10;
 const countWords = text => {
   // ignore text before the first whitespace because it is part of the selected text
   const countText = text.split(/\s+/).slice(1).join(' ');
   const count = countText.trim().split(/\s+/).length;
   return count;
 };
-
 const getAfterText = startingElement => {
   let text = '';
   let element = startingElement.nextSibling;
-
   while (element) {
     text += element.textContent;
     element = element.nextSibling;
   }
-
   if (text.includes('.')) {
     const index = text.indexOf('.');
     text = text.substring(0, index + 1);
   }
-
   if (countWords(text) > NUMBER_OF_WORDS) {
     text = text.split(/\s+/).slice(0, NUMBER_OF_WORDS + 1).join(' ');
   }
-
   return text;
 };
-
 const getBeforeText = (startingElement, wordCount) => {
   let text = '';
   let element = startingElement.previousSibling;
-
   while (element) {
     text = element.textContent + text;
     element = element.previousSibling;
   }
-
   text = text.split(/\s+/).slice(-wordCount - 1).join(' ');
   return text;
 };
 
+// eslint-disable-next-line no-undef
 export const getSelectionContext = elements => {
   const firstSelected = elements[0];
   const lastSelected = elements[elements.length - 1];

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

@@ -15,19 +15,16 @@
  * 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 tinymce from 'tinymce';
 import formatMessage from '../../../format-message';
 import clickCallback from './clickCallback';
 tinymce.PluginManager.add('instructure_search_and_replace', function (editor) {
-  var _editor$plugins;
-
   // We use the searchreplace plugins API
-  if (!((_editor$plugins = editor.plugins) !== null && _editor$plugins !== void 0 && _editor$plugins.searchreplace)) return;
-
+  if (!editor.plugins?.searchreplace) return;
   const launchFindModal = ed => () => {
     clickCallback(ed, document);
   };
-
   editor.addCommand('launch_instructure_search_and_replace', launchFindModal(editor));
   editor.ui.registry.addMenuItem('instructure_search_and_replace', {
     text: formatMessage('Find and Replace'),

package/es/rce/plugins/instructure_studio_media_options/plugin.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 tinymce from 'tinymce';
 import { isStudioEmbeddedMedia, handleBeforeObjectSelected } from '../shared/StudioLtiSupportUtils';
 import VideoTrayController from '../instructure_record/VideoOptionsTray/TrayController';
@@ -25,7 +26,6 @@ tinymce.PluginManager.add('instructure_studio_media_options', function (ed) {
     onAction() {
       studioTrayController.showTrayForEditor(ed);
     },
-
     text: formatMessage('Studio Media Options'),
     tooltip: formatMessage('Show Studio media options')
   });

package/es/rce/plugins/instructure_wordcount/clickCallback.js

@@ -15,32 +15,28 @@
  * 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 { generateRows, HEADERS } from './utils/tableContent';
 const MODAL_ID = 'canvas-rce-wordcount-container';
 export default function (ed, document, options) {
-  return import('./components/WordCountModal').then(_ref => {
-    let {
-      WordCountModal
-    } = _ref;
+  return import('./components/WordCountModal').then(({
+    WordCountModal
+  }) => {
     let container = document.querySelector(`#${MODAL_ID}`);
-
     if (!container) {
       container = document.createElement('div');
       container.id = MODAL_ID;
       document.body.appendChild(container);
     }
-
     const handleDismiss = () => {
       if (container) {
         ReactDOM.unmountComponentAtNode(container);
       }
-
       ed.focus(options.skipEditorFocus);
     };
-
-    ReactDOM.render( /*#__PURE__*/React.createElement(WordCountModal, {
+    ReactDOM.render(/*#__PURE__*/React.createElement(WordCountModal, {
       headers: HEADERS,
       rows: generateRows(ed),
       onDismiss: handleDismiss

package/es/rce/plugins/instructure_wordcount/components/WordCountModal.js

@@ -1,6 +1,4 @@
 import _pt from "prop-types";
-// @ts-nocheck
-
 /*
  * Copyright (C) 2022 - present Instructure, Inc.
  *
@@ -18,53 +16,45 @@ 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 { Modal } from '@instructure/ui-modal';
 import { BaseButton, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { Table } from '@instructure/ui-table';
 import formatMessage from '../../../../format-message';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
-
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 const renderBody = (headers, rows) => {
   return /*#__PURE__*/React.createElement(Table, {
     caption: formatMessage('Word Count')
-  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, headers.map(_ref => {
-    let {
-      id,
-      getLabel
-    } = _ref;
-    return /*#__PURE__*/React.createElement(Table.ColHeader, {
-      key: id,
-      id: id
-    }, getLabel());
-  }))), /*#__PURE__*/React.createElement(Table.Body, null, rows.map(_ref2 => {
-    let {
-      label,
-      documentCount,
-      selectionCount
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(Table.Row, {
-      key: label
-    }, /*#__PURE__*/React.createElement(Table.Cell, {
-      key: "label"
-    }, label), /*#__PURE__*/React.createElement(Table.Cell, {
-      key: "document"
-    }, documentCount), /*#__PURE__*/React.createElement(Table.Cell, {
-      key: "selection"
-    }, selectionCount));
-  })));
+  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, headers.map(({
+    id,
+    getLabel
+  }) => /*#__PURE__*/React.createElement(Table.ColHeader, {
+    key: id,
+    id: id
+  }, getLabel())))), /*#__PURE__*/React.createElement(Table.Body, null, rows.map(({
+    label,
+    documentCount,
+    selectionCount
+  }) => /*#__PURE__*/React.createElement(Table.Row, {
+    key: label
+  }, /*#__PURE__*/React.createElement(Table.Cell, {
+    key: "label"
+  }, label), /*#__PURE__*/React.createElement(Table.Cell, {
+    key: "document"
+  }, documentCount), /*#__PURE__*/React.createElement(Table.Cell, {
+    key: "selection"
+  }, selectionCount)))));
 };
-
-export const WordCountModal = _ref3 => {
-  let {
-    headers,
-    rows,
-    onDismiss
-  } = _ref3;
+export const WordCountModal = ({
+  headers,
+  rows,
+  onDismiss
+}) => {
   return /*#__PURE__*/React.createElement(Modal, {
     label: formatMessage('Word Count'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn(),
     open: true,
     "data-mce-component": true
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {

package/es/rce/plugins/instructure_wordcount/plugin.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 tinymce from 'tinymce';
 import formatMessage from '../../../format-message';
 import clickCallback from './clickCallback';

package/es/rce/plugins/instructure_wordcount/utils/countContent.js

@@ -15,40 +15,36 @@
  * 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/>.
  */
+
 export const IGNORE_WORDCOUNT_ATTRIBUTE = 'data-ignore-wordcount';
 export const countWords = node => {
   if (node.getAttribute(IGNORE_WORDCOUNT_ATTRIBUTE) === 'chars-only') return 0;
-  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const textContent = node?.innerText || '';
   const trimmedTextContent = textContent.trim();
   if (trimmedTextContent.length === 0) return 0;
   return trimmedTextContent.split(/\s+/).length;
 };
 export const countCharsNoSpaces = node => {
-  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const textContent = node?.innerText || '';
   const matches = textContent.match(/ /g); // a single space
-
   const spaces = matches ? matches.length : 0;
   return countChars(node) - spaces;
 };
 export const countChars = node => {
-  const textContent = (node === null || node === void 0 ? void 0 : node.innerText) || '';
+  const textContent = node?.innerText || '';
   const iterator = textContent[Symbol.iterator]();
   let count = 0;
-
   while (!iterator.next().done) {
     count++;
   }
-
   return count;
 };
 export const callbackForCategory = category => {
   switch (category) {
     case 'words':
       return countWords;
-
     case 'chars-no-spaces':
       return countCharsNoSpaces;
-
     case 'chars':
       return countChars;
   }
@@ -61,14 +57,11 @@ export const countShouldIgnore = (ed, scope, category) => {
 };
 export const getTinymceCount = (ed, scope, category) => {
   const wc = ed.plugins.wordcount[scope];
-
   switch (category) {
     case 'words':
       return wc.getWordCount();
-
     case 'chars-no-spaces':
       return wc.getCharacterCountWithoutSpaces();
-
     case 'chars':
       return wc.getCharacterCount();
   }

package/es/rce/plugins/instructure_wordcount/utils/tableContent.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 { countContent } from './countContent';
 import formatMessage from '../../../../format-message';
 export const HEADERS = [{
@@ -29,12 +30,9 @@ export const HEADERS = [{
 }];
 const ROW_LABELS = [['words', () => formatMessage('Words')], ['chars-no-spaces', () => formatMessage('Characters (no spaces)')], ['chars', () => formatMessage('Characters')]];
 export const generateRows = ed => {
-  return ROW_LABELS.map(_ref => {
-    let [category, getLabel] = _ref;
-    return {
-      label: getLabel(),
-      documentCount: countContent(ed, 'body', category),
-      selectionCount: countContent(ed, 'selection', category)
-    };
-  });
+  return ROW_LABELS.map(([category, getLabel]) => ({
+    label: getLabel(),
+    documentCount: countContent(ed, 'body', category),
+    selectionCount: countContent(ed, 'selection', category)
+  }));
 };

package/es/rce/plugins/shared/CanvasContentTray.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, { useCallback, useEffect, useRef, useState } from 'react';
 import { bool, element, func, instanceOf, oneOfType, shape, string } from 'prop-types';
 import { Tray } from '@instructure/ui-tray';
@@ -33,6 +34,7 @@ import { getLinkContentFromEditor } from './ContentSelection';
 import { LinkDisplay } from './LinkDisplay';
 import { showFlashAlert } from '../../../common/FlashAlert';
 import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel, isLoading } from './canvasContentUtils';
+
 /**
  * Returns the translated tray label
  * @param {string} contentType - The type of content showing on tray
@@ -40,51 +42,44 @@ import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel, isLoading } from './canvasCont
  * @param {string} contextType - The user's context
  * @returns {string}
  */
-
 function getTrayLabel(contentType, contentSubtype, contextType) {
   if (contentType === 'links' && contextType === 'course') {
     return formatMessage('Course Links');
   } else if (contentType === 'links' && contextType === 'group') {
     return formatMessage('Group Links');
   }
-
   switch (contentSubtype) {
     case ICON_MAKER_ICONS:
       return formatMessage('Icon Maker Icons');
-
     case 'images':
       if (contentType === 'course_files') return formatMessage('Course Images');
       if (contentType === 'group_files') return formatMessage('Group Images');
       return formatMessage('User Images');
-
     case 'media':
       if (contentType === 'course_files') return formatMessage('Course Media');
       if (contentType === 'group_files') return formatMessage('Group Media');
       return formatMessage('User Media');
-
     case 'documents':
       if (contentType === 'course_files') return formatMessage('Course Documents');
       if (contentType === 'group_files') return formatMessage('Group Documents');
       return formatMessage('User Documents');
-
     default:
       return formatMessage('Tray');
     // Shouldn't ever get here
   }
 }
+
 /**
  * This component is used within various plugins to handle loading in content
  * from Canvas.  It is essentially the main component.
  */
-
-
 export default function CanvasContentTray(props) {
   // should the tray be rendered open?
-  const [isOpen, setIsOpen] = useState(false); // has the tray fully opened. we use this to defer rendering the content
+  const [isOpen, setIsOpen] = useState(false);
+  // has the tray fully opened. we use this to defer rendering the content
   // until the tray is open.
-
-  const [hasOpened, setHasOpened] = useState(false); // should we close the tray after the user clicks on something in it?
-
+  const [hasOpened, setHasOpened] = useState(false);
+  // should we close the tray after the user clicks on something in it?
   const [hidingTrayOnAction, setHidingTrayOnAction] = useState(true);
   const trayRef = useRef(null);
   const scrollingAreaRef = useRef(null);
@@ -100,20 +95,20 @@ export default function CanvasContentTray(props) {
     mountNode,
     onTrayClosing,
     storeProps
-  } = { ...props
+  } = {
+    ...props
   };
   const handleDismissTray = useCallback(() => {
     // return focus to the RCE if focus was on this tray
     if (trayRef.current && trayRef.current.contains(document.activeElement)) {
       bridge.focusActiveEditor(false);
     }
-
     onTrayClosing && onTrayClosing(CanvasContentTray.globalOpenCount); // tell RCEWrapper we're closing if we're open
-
     setIsOpen(false);
-  }, [bridge, onTrayClosing]); // this shouldn't be necessary, but INSTUI isn't focusing the close button
-  // like it should.
+  }, [bridge, onTrayClosing]);
 
+  // this shouldn't be necessary, but INSTUI isn't focusing the close button
+  // like it should.
   useEffect(() => {
     if (isOpen && closeButtonRef) {
       closeButtonRef.focus();
@@ -128,7 +123,6 @@ export default function CanvasContentTray(props) {
         ++CanvasContentTray.globalOpenCount;
         setFilterSettings(FILTER_SETTINGS_BY_PLUGIN[plugin]);
         setIsOpen(true);
-
         if (plugin === 'course_link_edit') {
           setIsEditTray(true);
           const {
@@ -150,18 +144,17 @@ export default function CanvasContentTray(props) {
           setIsEditTray(false);
         }
       },
-
       hideTray(forceClose) {
         if (forceClose || hidingTrayOnAction) {
           handleDismissTray();
         }
       }
-
     };
     bridge.attachController(controller, editor.id);
     return () => {
       bridge.detachController(editor.id);
-    }; // it's OK the setFilterSettings is not a dependency
+    };
+    // it's OK the setFilterSettings is not a dependency
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor.id, bridge, handleDismissTray, hidingTrayOnAction]);
   useEffect(() => {
@@ -170,20 +163,16 @@ export default function CanvasContentTray(props) {
     }
   }, [hasOpened]);
   useEffect(() => {
-    var _trayRef$current;
-
     if (!hasOpened) return;
     let c = document.querySelector('[role="main"]');
     let target_w = 0;
     if (!c) return;
     const margin = window.getComputedStyle(c).direction === 'ltr' ? document.body.getBoundingClientRect().right - c.getBoundingClientRect().right : c.getBoundingClientRect().left;
-    target_w = c.offsetWidth - ((_trayRef$current = trayRef.current) === null || _trayRef$current === void 0 ? void 0 : _trayRef$current.offsetWidth) + margin;
-
+    target_w = c.offsetWidth - trayRef.current?.offsetWidth + margin;
     if (target_w >= 320 && target_w < c.offsetWidth) {
       c.style.boxSizing = 'border-box';
       c.style.width = `${target_w}px`;
     }
-
     setHidingTrayOnAction(target_w < 320);
     return () => {
       c = document.querySelector('[role="main"]');
@@ -191,16 +180,13 @@ export default function CanvasContentTray(props) {
       c.style.width = '';
     };
   }, [hasOpened]);
-
   function handleOpenTray() {
     bridge.focusEditor(editor);
     setHasOpened(true);
   }
-
   function handleExitTray() {
     onTrayClosing && onTrayClosing(true); // tell RCEWrapper we're closing
   }
-
   function handleCloseTray() {
     // clear the store's saved search string so the tray doesn't
     // reopen with a previous tray instance's search results
@@ -208,10 +194,10 @@ export default function CanvasContentTray(props) {
     setHasOpened(false);
     onTrayClosing && onTrayClosing(false); // tell RCEWrapper we're closed
   }
-
   function handleReplaceButton() {
     handleDismissTray();
-    const newLink = { ...link,
+    const newLink = {
+      ...link,
       forceRename: true,
       text: linkText
     };
@@ -222,7 +208,6 @@ export default function CanvasContentTray(props) {
       srOnly: true
     });
   }
-
   function renderFooter() {
     return /*#__PURE__*/React.createElement(Flex.Item, {
       background: "secondary",
@@ -239,11 +224,10 @@ export default function CanvasContentTray(props) {
       "data-testid": "replace-link-button"
     }, formatMessage('Replace')));
   }
-
   function handleFilterChange(newFilter, onChangeContext, onChangeSearchString, onChangeSortBy) {
-    const newFilterSettings = { ...newFilter
+    const newFilterSettings = {
+      ...newFilter
     };
-
     if (newFilterSettings.sortValue) {
       newFilterSettings.sortDir = newFilterSettings.sortValue === 'alphabetical' ? 'asc' : 'desc';
       onChangeSortBy({
@@ -251,59 +235,48 @@ export default function CanvasContentTray(props) {
         dir: newFilterSettings.sortDir
       });
     }
-
     if ('searchString' in newFilterSettings && filterSettings.searchString !== newFilterSettings.searchString) {
       onChangeSearchString(newFilterSettings.searchString);
     }
-
     setFilterSettings(newFilterSettings);
-
     if (newFilterSettings.contentType) {
       let contextType, contextId;
-
       switch (newFilterSettings.contentType) {
         case 'user_files':
           contextType = 'user';
           contextId = props.containingContext.userId;
           break;
-
         case 'group_files':
           contextType = 'group';
           contextId = props.containingContext.contextId;
           break;
-
         case 'course_files':
           contextType = props.contextType;
           contextId = props.containingContext.contextId;
           break;
-
         case 'links':
           contextType = props.containingContext.contextType;
           contextId = props.containingContext.contextId;
       }
-
       onChangeContext({
         contextType,
         contextId
       });
     }
   }
-
   function getHeader() {
     return isEditTray ? formatMessage('Edit Course Link') : formatMessage('Add');
   }
-
   function renderLinkDisplay() {
     return isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
       linkText: linkText,
-      placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
-      linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
-      published: (link === null || link === void 0 ? void 0 : link.published) || false,
+      placeholderText: link?.title || placeholderText,
+      linkFileName: link?.title || '',
+      published: link?.published || false,
       handleTextChange: setLinkText,
-      linkType: link === null || link === void 0 ? void 0 : link.type
+      linkType: link?.type
     });
   }
-
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
     "data-testid": "CanvasContentTray",
@@ -383,13 +356,7 @@ export default function CanvasContentTray(props) {
 }
 CanvasContentTray.globalOpenCount = 0;
 
-function requiredWithoutSource(props, propName, componentName) {
-  if (props.source == null && props[propName] == null) {
-    throw new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`${props[propName]}\`.`);
-  }
-} // Changes made here may need to be reflected in the trayProps type in CanvasContentPanel
-
-
+// Changes made here may need to be reflected in the trayProps type in CanvasContentPanel
 const trayPropsMap = {
   canUploadFiles: bool.isRequired,
   contextId: string.isRequired,
@@ -402,8 +369,8 @@ const trayPropsMap = {
     userId: string.isRequired
   }),
   filesTabDisabled: bool,
-  host: requiredWithoutSource,
-  jwt: requiredWithoutSource,
+  host: string,
+  jwt: string,
   refreshToken: func,
   source: shape({
     fetchImages: func.isRequired
@@ -421,9 +388,9 @@ CanvasContentTray.propTypes = {
   // called with true when the tray starts closing, false once closed
   onEditClick: func,
   ...trayPropsMap
-}; // the way we define trayProps, eslint doesn't recognize the following as props
+};
 
-/* eslint-disable react/default-props-match-prop-types */
+// the way we define trayProps, eslint doesn't recognize the following as props
 
 CanvasContentTray.defaultProps = {
   canUploadFiles: false,
@@ -431,5 +398,4 @@ CanvasContentTray.defaultProps = {
   refreshToken: null,
   source: null,
   themeUrl: null
-};
-/* eslint-enable react/default-props-match-prop-types */
+};

package/es/rce/plugins/shared/CheckerboardStyling.js

@@ -15,11 +15,11 @@
  * 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/>.
  */
+
 const checkerboardStyle = squareSize => {
   return {
     backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200"/><rect y="200" width="200" height="200"/></svg>')`,
     backgroundSize: `${squareSize}px ${squareSize}px`
   };
 };
-
 export default checkerboardStyle;