@instructure/canvas-rce 5.14.1 → 5.14.2

package/es/rce/plugins/instructure_condensed_buttons/ui/list-button.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -17,10 +15,19 @@
  * 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 { typedKeyDict } from '../../../../util/TypedDict';
 import { listStyleForSelectionOfEditor } from '../core/ListUtils';
 
+/**
+ * Supported list style types by the RCE
+ */
+
+/**
+ * RCE-specific information about a list style type
+ */
+
 /**
  * List of list styles supported by the RCE. These will ultimately appear in the toolbar as buttons under the main
  * list button.
@@ -57,39 +64,39 @@ const listStyleInfos = typedKeyDict({
     getTooltipText: () => formatMessage('uppercase Roman numeral ordered list')
   }
 }, 'listStyleType');
+
 /**
  * Defines the default `list-style-type` infos for the different list element types.
  */
-
 const defaultStyleInfoForListType = {
   UL: listStyleInfos.byKey.disc,
   OL: listStyleInfos.byKey.decimal
 };
+
 /**
  * Determines the inner-most list type for the selection in the given Editor.
  */
-
 function listStyleInfoForSelectionOfEditor(editor) {
   const selectedStyleType = listStyleForSelectionOfEditor(editor);
-  if (!selectedStyleType) return null; // Prefer to use `list-style-type`-based type infos.
+  if (!selectedStyleType) return null;
 
+  // Prefer to use `list-style-type`-based type infos.
   if (selectedStyleType.listStyleType) {
+    // @ts-expect-error
     const fromStyleType = listStyleInfos.byKey[selectedStyleType.listStyleType];
     if (fromStyleType) return fromStyleType;
-  } // Default to style based on the list element type
-
+  }
 
+  // Default to style based on the list element type
   return defaultStyleInfoForListType[selectedStyleType.listType];
 }
+
 /**
  * Get the button label.
  *
  * Note: Needs to be a function because translation files aren't loaded when top-level code runs.
  */
-
-
 const getButtonLabel = () => formatMessage('Ordered and Unordered Lists');
-
 export default function register(editor) {
   editor.ui.registry.addSplitButton('bullist', {
     tooltip: getButtonLabel(),
@@ -104,12 +111,14 @@ export default function register(editor) {
     }))),
     onAction: () => {
       var _listStyleInfoForSele;
-
       return editor.execCommand(((_listStyleInfoForSele = listStyleInfoForSelectionOfEditor(editor)) === null || _listStyleInfoForSele === void 0 ? void 0 : _listStyleInfoForSele.listType) === 'OL' ? 'InsertOrderedList' : 'InsertUnorderedList');
     },
     onItemAction: (splitButtonApi, value) => {
+      // @ts-expect-error
       const desiredListStyleInfo = listStyleInfos.byKey[value] || defaultStyleInfoForListType.UL;
-      const currentListStyleInfo = listStyleInfoForSelectionOfEditor(editor); // When the user clicks the list button that matches the current list style in the selection,
+      const currentListStyleInfo = listStyleInfoForSelectionOfEditor(editor);
+
+      // When the user clicks the list button that matches the current list style in the selection,
       // we want to interpret that as un-list-ifying the selection
 
       if ((currentListStyleInfo === null || currentListStyleInfo === void 0 ? void 0 : currentListStyleInfo.listStyleType) !== desiredListStyleInfo.listStyleType) {
@@ -122,21 +131,19 @@ export default function register(editor) {
     },
     select: value => {
       var _listStyleInfoForSele2;
-
       return ((_listStyleInfoForSele2 = listStyleInfoForSelectionOfEditor(editor)) === null || _listStyleInfoForSele2 === void 0 ? void 0 : _listStyleInfoForSele2.listStyleType) === value;
     },
     onSetup: api => {
       // Handle updating the icon on the toolbar based on
       // the type of list the user's selection is currently within
+
       const $iconSvgContainer = editor.$(`.tox-split-button[aria-label="${getButtonLabel()}"] .tox-icon`, document);
       const allIcons = editor.ui.registry.getAll().icons;
-
       const nodeChangeHandler = () => {
         const activeListType = listStyleInfoForSelectionOfEditor(editor);
         api.setActive(!!activeListType);
         $iconSvgContainer.html(allIcons[(activeListType === null || activeListType === void 0 ? void 0 : activeListType.icon) || 'list-bull-default']);
       };
-
       nodeChangeHandler();
       editor.on('NodeChange', nodeChangeHandler);
       return () => editor.off('NodeChange', nodeChangeHandler);

package/es/rce/plugins/instructure_condensed_buttons/ui/subscript-superscript-button.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 formatMessage from '../../../../format-message';
 import { toolbarIconHelperFor } from '../../../../util/tinymce-plugin-util';
 export default function register(editor) {
@@ -41,13 +42,11 @@ export default function register(editor) {
     }))),
     onSetup: api => {
       const iconHelper = toolbarIconHelperFor(editor, buttonLabel);
-
       function nodeChangeHandler() {
         const activeStyleInfo = styleInfos.find(b => editor.formatter.match(b.icon));
         api.setActive(!!activeStyleInfo);
         iconHelper.updateIcon((activeStyleInfo === null || activeStyleInfo === void 0 ? void 0 : activeStyleInfo.icon) || defaultIcon);
       }
-
       nodeChangeHandler();
       editor.on('NodeChange', nodeChangeHandler);
       return () => editor.off('NodeChange', nodeChangeHandler);

package/es/rce/plugins/instructure_documents/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 doFileUpload from '../shared/Upload/doFileUpload';
 export default function (ed, document) {
   return doFileUpload(ed, document, {

package/es/rce/plugins/instructure_documents/components/DocumentsPanel.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, { useRef } from 'react';
 import { func, shape, string, oneOf } from 'prop-types';
 import { contentTrayDocumentShape } from '../../shared/fileShape';
@@ -23,23 +24,18 @@ import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
 import Link from './Link';
 import { LoadMoreButton, LoadingIndicator, LoadingStatus, useIncrementalLoading } from '../../../../common/incremental-loading';
-
 function hasFiles(documents) {
   return documents.files.length > 0;
 }
-
 function isEmpty(documents) {
   return !hasFiles(documents) && !documents.hasMore && !documents.isLoading;
 }
-
 function renderLinks(files, handleClick, lastItemRef) {
   return files.map((f, index) => {
     let focusRef = null;
-
     if (index === files.length - 1) {
       focusRef = lastItemRef;
     }
-
     return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: f.id
     }, f, {
@@ -48,7 +44,6 @@ function renderLinks(files, handleClick, lastItemRef) {
     }));
   });
 }
-
 function renderLoadingError(_error) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -58,7 +53,6 @@ function renderLoadingError(_error) {
     color: "danger"
   }, formatMessage('Loading failed.')));
 }
-
 export default function DocumentsPanel(props) {
   const {
     fetchInitialDocs,
@@ -86,11 +80,9 @@ export default function DocumentsPanel(props) {
     sortBy,
     searchString
   });
-
   const handleDocClick = file => {
     props.onLinkClick(file);
   };
-
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     "data-testid": "instructure_links-DocumentsPanel"

package/es/rce/plugins/instructure_documents/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 { func, instanceOf, shape } from 'prop-types';
 import { fileOrMediaObjectShape } from '../../shared/fileShape';
@@ -33,7 +34,6 @@ import { applyTimezoneOffsetToDate } from '../../shared/dateUtils';
 import RCEGlobals from '../../../RCEGlobals';
 export default function Link(props) {
   var _RCEGlobals$getConfig;
-
   const [isHovering, setIsHovering] = useState(false);
   const {
     filename,
@@ -46,12 +46,11 @@ export default function Link(props) {
     disabledMessage
   } = props;
   const Icon = getIconFromType(content_type);
-  const color = published ? 'success' : 'primary'; // Uses user locale and timezone
-
+  const color = published ? 'success' : 'primary';
+  // Uses user locale and timezone
   const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
   const dateString = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
   const publishedMsg = published ? formatMessage('published') : formatMessage('unpublished');
-
   function linkAttrsFromDoc() {
     const canPreview = isPreviewable(props.content_type);
     const clazz = classnames('instructure_file_link', {
@@ -73,44 +72,35 @@ export default function Link(props) {
       embedded_iframe_url: props.embedded_iframe_url,
       media_entry_id: props.media_entry_id
     };
-
     if (canPreview) {
       attrs['data-canvas-previewable'] = true;
     }
-
     return attrs;
   }
-
   function handleLinkClick(e) {
     e.preventDefault();
     props.onClick(linkAttrsFromDoc());
   }
-
   function handleLinkKey(e) {
     // press the button on enter or space
     if (e.keyCode === 13 || e.keyCode === 32) {
       handleLinkClick(e);
     }
   }
-
   function handleDragStart(e) {
     const linkAttrs = linkAttrsFromDoc();
     dragHtml(e, renderLinkHtml(linkAttrs, linkAttrs.text));
   }
-
   function handleDragEnd(_e) {
     document.body.click();
   }
-
   function handleHover(e) {
     setIsHovering(e.type === 'mouseenter');
   }
-
   function buildCallback(callback) {
     if (disabled) return;
     return callback;
   }
-
   function dateOrMessage(str) {
     if (disabled && disabledMessage) {
       return /*#__PURE__*/React.createElement(View, {
@@ -121,27 +111,22 @@ export default function Link(props) {
         fontStyle: "italic"
       }, disabledMessage)));
     }
-
     if (str) {
       return /*#__PURE__*/React.createElement(View, {
         as: "div"
       }, str);
     }
   }
-
   function textStyles() {
     if (disabled) return {
       color: 'gray'
     };
     return {};
   }
-
   let elementRef = null;
-
   if (props.focusRef) {
     elementRef = ref => props.focusRef.current = ref;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "instructure_links-Link",
     draggable: true,

package/es/rce/plugins/instructure_documents/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 formatMessage from '../../../format-message';
 import clickCallback from './clickCallback';
 import bridge from '../../../bridge';
@@ -23,14 +24,12 @@ import tinymce from 'tinymce';
 const COURSE_PLUGIN_KEY = 'course_documents';
 const USER_PLUGIN_KEY = 'user_documents';
 const GROUP_PLUGIN_KEY = 'group_documents';
-
 function getMenuItems(ed) {
   const contextType = ed.settings.canvas_rce_user_context.type;
   const items = [{
     text: formatMessage('Upload Document'),
     value: 'instructure_upload_document'
   }];
-
   if (contextType === 'course') {
     items.push({
       text: formatMessage('Course Documents'),
@@ -42,45 +41,41 @@ function getMenuItems(ed) {
       value: 'instructure_group_document'
     });
   }
-
   items.push({
     text: formatMessage('User Documents'),
     value: 'instructure_user_document'
   });
   return items;
 }
-
 function doMenuItem(ed, value) {
   switch (value) {
     case 'instructure_upload_document':
       ed.execCommand('mceInstructureDocuments');
       break;
-
     case 'instructure_course_document':
       ed.focus(true);
       ed.execCommand('instructureTrayForDocuments', false, COURSE_PLUGIN_KEY);
       break;
-
     case 'instructure_user_document':
       ed.focus(true);
       ed.execCommand('instructureTrayForDocuments', false, USER_PLUGIN_KEY);
       break;
-
     case 'instructure_group_document':
       ed.focus(true);
       ed.execCommand('instructureTrayForDocuments', false, GROUP_PLUGIN_KEY);
       break;
   }
-} // Register plugin
-
+}
 
+// Register plugin
 tinymce.PluginManager.add('instructure_documents', function (ed) {
   // Register commands
   ed.addCommand('mceInstructureDocuments', () => clickCallback(ed, document));
   ed.addCommand('instructureTrayForDocuments', (ui, plugin_key) => {
     bridge.showTrayForPlugin(plugin_key, ed.id);
-  }); // Register menu items
+  });
 
+  // Register menu items
   ed.ui.registry.addNestedMenuItem('instructure_document', {
     text: formatMessage('Document'),
     icon: 'document',
@@ -95,8 +90,9 @@ tinymce.PluginManager.add('instructure_documents', function (ed) {
         }
       };
     })
-  }); // Register toolbar button
+  });
 
+  // Register toolbar button
   ed.ui.registry.addMenuButton('instructure_documents', {
     tooltip: formatMessage('Documents'),
     icon: 'document',
@@ -106,18 +102,15 @@ tinymce.PluginManager.add('instructure_documents', function (ed) {
       value: item.value,
       onAction: () => doMenuItem(ed, item.value)
     }))),
-
     onSetup(api) {
       function handleNodeChange() {
         api.setDisabled(!isOKToLink(ed.selection.getContent()));
       }
-
       setTimeout(handleNodeChange);
       ed.on('NodeChange', handleNodeChange);
       return () => {
         ed.off('NodeChange', handleNodeChange);
       };
     }
-
   });
 });

package/es/rce/plugins/instructure_equation/EquationEditorModal/advancedOnlySyntax.js

@@ -15,10 +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 { memoize } from 'lodash'; // These commands all work fine with MathJax but either don't work, don't work well
+
+import { memoize } from 'lodash';
+
+// These commands all work fine with MathJax but either don't work, don't work well
 // (bad UX for editing), or look strange when rendered by Mathlive. Add new ones
 // here if you discover anything else or customers report unexpected experiences.
-
 const advancedOnlyCommands = ['begin', 'end', 'cases', 'cr', 'rm', 'text', 'hbox', 'mbox', 'unicode', 'cal', 'frak', 'it', 'scr', 'sf', '#', 'def', 'newcommand', 'operatorname', 'DeclareMathOperator', 'displaystyle', 'textstyle', 'scriptstyle', 'scriptscriptstyle', 'displaylines', 'abovewithdelims', 'array', 'bmatrix', 'buildrel', 'ddddot', 'dddot', 'eqalign', 'eqalignno', 'gcd', 'genfrac', 'hdashline', 'hfil', 'hfill', 'hfilll', 'hline', 'idotsint', 'iiiint', 'injlim', 'kern', 'label', 'LaTeX', 'leftroot', 'lgroup', 'lower', 'mathchoice', 'mathfrak', 'matrix', 'mit', 'mkern', 'mspace', 'negmedspace', 'negthickspace', 'negthinspace', 'newline', 'nobreakspace', 'oldstyle', 'overset', 'pmatrix', 'raise', 'rgroup', 'rule', 'Rule', 'skew', 'space', 'tag', 'TeX', 'underbrace', 'uproot', 'varinjlim', 'varliminf', 'varlimsup', 'varprojlim', 'vcenter', 'vmatrix'];
 const advancedOnlyRegex = new RegExp(advancedOnlyCommands.join('|'), 'm');
 const containsAdvancedSyntax = memoize(latex => advancedOnlyRegex.test(latex));

package/es/rce/plugins/instructure_equation/EquationEditorModal/advancedPreference.js

@@ -15,8 +15,8 @@
  * 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 STORAGE_KEY = 'NEE_should_reopen_advanced';
 
+export const STORAGE_KEY = 'NEE_should_reopen_advanced';
 function wrapInErrorHandling(func) {
   try {
     return {
@@ -31,7 +31,6 @@ function wrapInErrorHandling(func) {
     };
   }
 }
-
 export const isSet = () => {
   const result = wrapInErrorHandling(() => {
     const value = window.sessionStorage.getItem(STORAGE_KEY) || 'null';

package/es/rce/plugins/instructure_equation/EquationEditorModal/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, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TextArea } from '@instructure/ui-text-area';
@@ -33,9 +34,10 @@ import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 import { css } from 'aphrodite';
 import { MathJaxDirective, Mathml } from '../../../../enhance-user-content/mathml';
 import styles from './styles';
-import RCEGlobals from '../../../RCEGlobals'; // Import the <math-field> container and all
-// the relevant math fonts from mathlive
+import RCEGlobals from '../../../RCEGlobals';
 
+// Import the <math-field> container and all
+// the relevant math fonts from mathlive
 import '../mathlive';
 import { insertTextIntoLatexTextarea } from './latexTextareaUtil';
 export default class EquationEditorModal extends Component {
@@ -47,14 +49,11 @@ export default class EquationEditorModal extends Component {
     };
     this.previewElement = /*#__PURE__*/React.createRef();
     this.advancedEditor = /*#__PURE__*/React.createRef();
-
     this.executeCommand = (cmd, advancedCmd) => {
       if (this.state.advanced) {
         var _this$advancedEditor$;
-
         const insertionText = advancedCmd || cmd;
         const textarea = (_this$advancedEditor$ = this.advancedEditor.current) === null || _this$advancedEditor$ === void 0 ? void 0 : _this$advancedEditor$._textarea;
-
         if (textarea) {
           insertTextIntoLatexTextarea(textarea, insertionText);
           this.setState({
@@ -67,25 +66,20 @@ export default class EquationEditorModal extends Component {
         });
       }
     };
-
     this.handleModalCancel = () => {
       this.props.onModalDismiss();
     };
-
     this.handleModalDone = () => {
       const {
         onModalDismiss,
         onEquationSubmit
       } = this.props;
       const output = this.state.advanced ? this.state.workingFormula : this.getMathFiled();
-
       if (output) {
         onEquationSubmit(output);
       }
-
       onModalDismiss();
     };
-
     this.renderMathInAdvancedPreview = debounce(() => {
       if (this.previewElement.current) {
         this.previewElement.current.innerHTML = String.raw`\(${this.state.workingFormula}\)`;
@@ -95,7 +89,6 @@ export default class EquationEditorModal extends Component {
       leading: false,
       trailing: true
     });
-
     this.toggleAdvanced = () => {
       this.setState(state => {
         if (state.advanced) {
@@ -113,12 +106,10 @@ export default class EquationEditorModal extends Component {
       });
       this.setPreviewElementContent();
     };
-
     this.toggleAndUpdatePreference = () => {
       this.toggleAdvanced();
       advancedPreference.isSet() ? advancedPreference.remove() : advancedPreference.set();
     };
-
     this.registerBasicEditorListener = () => {
       const basicEditor = document.querySelector('math-field');
       basicEditor.addEventListener('input', e => {
@@ -130,11 +121,9 @@ export default class EquationEditorModal extends Component {
         }
       });
     };
-
     this.handleFieldRef = node => {
       this.mathField = node;
     };
-
     this.renderFooter = () => {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
         "data-testid": "equation-editor-modal-cancel",
@@ -146,7 +135,6 @@ export default class EquationEditorModal extends Component {
         color: "primary"
       }, formatMessage('Done')));
     };
-
     this.renderToggle = () => {
       const lockToggle = this.state.advanced && this.advancedModeOnly(this.state.workingFormula);
       return /*#__PURE__*/React.createElement(ConditionalTooltip, {
@@ -162,10 +150,8 @@ export default class EquationEditorModal extends Component {
         "data-testid": "advanced-toggle"
       }));
     };
-
     this.render = () => {
       var _RCEGlobals$getFeatur;
-
       const {
         onModalClose
       } = this.props;
@@ -237,13 +223,12 @@ export default class EquationEditorModal extends Component {
         className: (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.explicit_latex_typesetting ? MathJaxDirective.Process : null
       })))), /*#__PURE__*/React.createElement(Modal.Footer, null, this.renderFooter()));
     };
-
     this.mathml = new Mathml(RCEGlobals.getFeatures(), RCEGlobals.getConfig());
   }
-
   // **************** //
   // Helper functions //
   // **************** //
+
   insertNewRange() {
     const {
       editor,
@@ -260,15 +245,15 @@ export default class EquationEditorModal extends Component {
     range.setEnd(startContainer, rightIndex);
     editor.selection.setRng(range);
   }
-
   advancedModeOnly(latex) {
     const normalizedLatex = latex.replace(/\s+/, '');
     return containsAdvancedSyntax(normalizedLatex);
-  } // ********* //
+  }
+
+  // ********* //
   // Callbacks //
   // ********* //
 
-
   setPreviewElementContent() {
     if (this.state.workingFormula) {
       this.renderMathInAdvancedPreview();
@@ -277,6 +262,10 @@ export default class EquationEditorModal extends Component {
     }
   }
 
+  // ******************* //
+  // Rendering functions //
+  // ******************* //
+
   componentDidMount() {
     this.registerBasicEditorListener();
     this.setPreviewElementContent();
@@ -284,16 +273,13 @@ export default class EquationEditorModal extends Component {
     if (!this.state.advanced) this.setMathField(this.state.workingFormula);
     this.insertNewRange();
   }
-
   componentDidUpdate(prevProps, prevState) {
     if (this.state.workingFormula !== prevState.workingFormula) {
       this.setPreviewElementContent();
     }
   }
-
   stubMacros() {
     var _this$mathField;
-
     // Mathlive's macros exist for a different use case;
     // we don't intend for our users to utilize them.
     // This effectively disables all of them to prevent
@@ -302,15 +288,12 @@ export default class EquationEditorModal extends Component {
       macros: {}
     });
   }
-
   setMathField(formula) {
     this.mathField.setValue(formula);
   }
-
   getMathFiled() {
     return this.mathField.getValue();
   }
-
 }
 EquationEditorModal.debounceRate = 1000;
 EquationEditorModal.propTypes = {