@instructure/canvas-rce 5.14.2 → 5.15.1

package/es/enhance-user-content/mathml.js

@@ -50,26 +50,21 @@ const localConfig = {
   messageStyle: 'none'
 };
 class Mathml {
-  constructor() {
-    let features = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  constructor(features = {}, config = {}) {
     this._features = features;
     this._config = config;
   }
-  loadMathJax() {
-    let configFile = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'TeX-MML-AM_SVG';
-    let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  loadMathJax(configFile = 'TeX-MML-AM_SVG', cb = null) {
     if (this.preventMathJax()) {
       return;
     }
     if (!this.isMathJaxLoaded()) {
-      var _this$_features, _this$_config;
       // Statically declare this in the localConfig above as part of MAT-1219
-      if ((_this$_features = this._features) !== null && _this$_features !== void 0 && _this$_features.explicit_latex_typesetting) {
+      if (this._features?.explicit_latex_typesetting) {
         localConfig.elements = document.getElementsByClassName(MathJaxDirective.Process);
         localConfig.tex2jax.processClass = MathJaxDirective.Process;
       }
-      const locale = ((_this$_config = this._config) === null || _this$_config === void 0 ? void 0 : _this$_config.locale) || 'en';
+      const locale = this._config?.locale || 'en';
       // signal local config to mathjax as it loads
       window.MathJax = localConfig;
       if (window.MathJaxIsLoading) return;
@@ -82,31 +77,27 @@ class Mathml {
         script.async = true;
         script.src = `//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=${configFile}&locale=${locale}`;
       });
-      // eslint-disable-next-line promise/catch-or-return
       scriptPromise.then(() => {
-        var _this$_features2;
         window.MathJax.Hub.Register.StartupHook('MathMenu Ready', function () {
           // get the mathjax context menu above the rce's equation editor
           window.MathJax.Menu.BGSTYLE['z-index'] = 2000;
         });
         window.MathJax.Hub.Register.StartupHook('End Config', function () {
           // wait until MathJAx is configured before calling the callback
-          cb === null || cb === void 0 ? void 0 : cb();
+          cb?.();
         });
-        if ((_this$_features2 = this._features) !== null && _this$_features2 !== void 0 && _this$_features2.new_math_equation_handling) {
+        if (this._features?.new_math_equation_handling) {
           window.MathJax.Hub.Register.MessageHook('Begin PreProcess', function (message) {
             mathImageHelper.catchEquationImages(message[1]);
           });
           window.MathJax.Hub.Register.MessageHook('Math Processing Error', function (message) {
-            var _elem$parentElement;
             const elem = Array.isArray(message[1]) ? message[1][0] : message[1];
             // ".math_equation_latex" is the elem we added for MathJax to typeset the image equation
-            if ((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('math_equation_latex')) {
-              var _elem$parentElement$p;
+            if (elem.parentElement?.classList.contains('math_equation_latex')) {
               // The equation we image we were trying to replace and failed is up 1 and back 1.
               // If we remove its "mathjaxified" attribute, the "End Math" handler
               // won't remove it from the DOM.
-              if ((_elem$parentElement$p = elem.parentElement.previousElementSibling) !== null && _elem$parentElement$p !== void 0 && _elem$parentElement$p.hasAttribute('mathjaxified')) {
+              if (elem.parentElement.previousElementSibling?.hasAttribute('mathjaxified')) {
                 elem.parentElement.previousElementSibling.removeAttribute('mathjaxified');
               }
               // remove the "math processing error" mathjax output.
@@ -152,7 +143,7 @@ class Mathml {
       // something has changed on the page and needs to get pulled into the MathJax ecosystem
       // window.MathJax.Hub.Reprocess([document.body])
       window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub]);
-      cb === null || cb === void 0 ? void 0 : cb();
+      cb?.();
     }
   }
   preventMathJax() {
@@ -162,11 +153,10 @@ class Mathml {
     return this.isMathInElement(document.body);
   }
   isMathInElement(elem) {
-    var _this$_features3;
-    if ((elem === null || elem === void 0 ? void 0 : elem.getAttribute('data-testid')) === 'mathml-preview-element') {
+    if (elem?.getAttribute('data-testid') === 'mathml-preview-element') {
       return true;
     }
-    if ((_this$_features3 = this._features) !== null && _this$_features3 !== void 0 && _this$_features3.new_math_equation_handling) {
+    if (this._features?.new_math_equation_handling) {
       // handle the change from image + hidden mathml to mathjax formatted latex
       if (elem.querySelector('.math_equation_latex,.math_equation_mml')) {
         return true;
@@ -200,9 +190,8 @@ class Mathml {
     return '#header,#mobile-header,#left-side,#quiz-elapsed-time,.ui-menu-carat';
   }
   isMathJaxIgnored(elem) {
-    var _this$_features4, _elem$parentElement2;
     if (!elem) return true;
-    if ((_this$_features4 = this._features) !== null && _this$_features4 !== void 0 && _this$_features4.explicit_latex_typesetting && !elem.classList.contains(MathJaxDirective.Process)) {
+    if (this._features?.explicit_latex_typesetting && !elem.classList.contains(MathJaxDirective.Process)) {
       return true;
     }
 
@@ -210,7 +199,7 @@ class Mathml {
     if (!document.body.contains(elem)) return true;
 
     // check if elem is in the ignore list
-    if (((_elem$parentElement2 = elem.parentElement) === null || _elem$parentElement2 === void 0 ? void 0 : _elem$parentElement2.querySelector(this.ignore_list)) === elem) {
+    if (elem.parentElement?.querySelector(this.ignore_list) === elem) {
       return true;
     }
 
@@ -238,8 +227,7 @@ class Mathml {
     return this.isMathOnPage();
   }
   isMathJaxLoaded() {
-    var _window$MathJax;
-    return !!((_window$MathJax = window.MathJax) !== null && _window$MathJax !== void 0 && _window$MathJax.Hub);
+    return !!window.MathJax?.Hub;
   }
   shouldProcess(elem) {
     return this.isMathInElement(elem) && !this.isMathJaxIgnored(elem);
@@ -338,7 +326,7 @@ const mathImageHelper = {
   }
 };
 function handleNewMath(event) {
-  if (event !== null && event !== void 0 && event.detail) {
+  if (event?.detail) {
     const {
       features,
       config,

package/es/enhance-user-content/media_comment_thumbnail.js

@@ -29,10 +29,8 @@ const MEDIA_COMMENT_THUMBNAIL_SIZES = {
   }
 };
 function createMediaCommentThumbnail(elem, size, keepOriginalText, kalturaSettings) {
-  var _window$INST, _$link$querySelector, _$link$parentElement$, _$link$parentElement$2;
   // a lot of places in canvas rely on INST.kalturaSettings. Fallback if they are not provided
-  const kalturaSettings_ = kalturaSettings || ((_window$INST = window.INST) === null || _window$INST === void 0 ? void 0 : _window$INST.kalturaSettings);
-  // eslint-disable-next-line no-console
+  const kalturaSettings_ = kalturaSettings || window.INST?.kalturaSettings;
   if (!kalturaSettings_) return console.log('Kaltura has not been enabled for this account');
   let idAttr, url;
   const $link = elem;
@@ -41,7 +39,6 @@ function createMediaCommentThumbnail(elem, size, keepOriginalText, kalturaSettin
     a.href = $link.getAttribute('href');
     url = a;
   } catch (error) {
-    // eslint-disable-next-line no-console
     console.error(error);
   }
   if (url) {
@@ -49,7 +46,7 @@ function createMediaCommentThumbnail(elem, size, keepOriginalText, kalturaSettin
     if (urlParams.has('no_preview') && urlParams.get('no_preview') !== 'false') return;
   }
   const dimensions = MEDIA_COMMENT_THUMBNAIL_SIZES[size] || MEDIA_COMMENT_THUMBNAIL_SIZES.normal;
-  const id = getData($link, 'media_comment_id') || $link.getAttribute('data-media_comment_id') || ((_$link$querySelector = $link.querySelector('.media_comment_id')) === null || _$link$querySelector === void 0 ? void 0 : _$link$querySelector.textContent) || (idAttr = $link.id) && idAttr.match(/^media_comment_/) && idAttr.substring(14) || ((_$link$parentElement$ = $link.parentElement.querySelector('.media_comment_id')) === null || _$link$parentElement$ === void 0 ? void 0 : (_$link$parentElement$2 = _$link$parentElement$.textContent) === null || _$link$parentElement$2 === void 0 ? void 0 : _$link$parentElement$2.trim());
+  const id = getData($link, 'media_comment_id') || $link.getAttribute('data-media_comment_id') || $link.querySelector('.media_comment_id')?.textContent || (idAttr = $link.id) && idAttr.match(/^media_comment_/) && idAttr.substring(14) || $link.parentElement.querySelector('.media_comment_id')?.textContent?.trim();
   const authorName = getData($link, 'author') || $link.getAttribute('data-author');
   const createdAt = getData($link, 'created_at') || $link.getAttribute('data-created_at');
   let altText;
@@ -101,11 +98,7 @@ function createMediaCommentThumbnail(elem, size, keepOriginalText, kalturaSettin
 }
 
 // public API
-export default function mediaCommentThumbnail(comment_element) {
-  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'normal';
-  let keepOriginalText = arguments.length > 2 ? arguments[2] : undefined;
-  let kalturaSettings = arguments.length > 3 ? arguments[3] : undefined;
-  let jqueryData = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
+export default function mediaCommentThumbnail(comment_element, size = 'normal', keepOriginalText, kalturaSettings, jqueryData = undefined) {
   // defer each thumbnail generation till the next time through the event loop to not kill browser rendering,
   // has the effect of saying "only work on thumbnailing these while the browser is not doing something else"
   return new Promise(resolve => window.setTimeout(() => {

package/es/format-message.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-const formatMessage = require('format-message');
+import formatMessage from 'format-message';
 const ns = formatMessage.namespace();
 ns.addLocale = translations => {
   ns.setup({
@@ -26,4 +26,4 @@ ns.addLocale = translations => {
     }
   });
 };
-module.exports = ns;
+export default ns;

package/es/index.js

@@ -27,7 +27,7 @@ export { getContrastStatus, getDefaultColors, isTransparent } from './rce/plugin
 export { ColorPicker } from './rce/plugins/instructure_color/components/ColorPicker';
 export * from './enhance-user-content/index';
 export const defaultConfiguration = defaultTinymceConfig;
-export { instuiPopupMountNode } from './util/fullscreenHelpers';
+export { instuiPopupMountNodeFn } from './util/fullscreenHelpers';
 export { Mathml };
 export { RCEVariantValues } from './rce/RCEVariants';
 export { UploadFilePanelIds, handleSubmit, UploadFile } from './rce/plugins/shared/Upload';
@@ -40,11 +40,9 @@ export function renderIntoDiv(editorEl, props, cb) {
     // unlike the pretranslated builds, in the default, non-pretranslated build,
     // this will cause a new network round trip to get all the locale info the rce
     // and tinymce need.
-    getTranslations(language).then(() => render(editorEl, props, cb)).catch(err => {
-      // eslint-disable-next-line no-console
+    getTranslations(language).catch(err => {
       console.error('Failed loading the language file for', language, 'RCE is falling back to English.\n Cause:', err);
-      render(editorEl, props, cb);
-    });
+    }).finally(() => render(editorEl, props, cb));
   }
 }
 export function getRCSAuthenticationHeaders(jwt) {

package/es/rce/AlertMessageArea.js

@@ -1,3 +1,4 @@
+import _pt from "prop-types";
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -17,31 +18,29 @@
  */
 import { Alert } from '@instructure/ui-alerts';
 import React from 'react';
-import { arrayOf, func, number, shape, string } from 'prop-types';
-
 /**
  * Shows messages that have been provided to it in the RCE
  */
-export default function AlertMessageArea(_ref) {
-  let {
-    messages,
-    afterDismiss,
-    liveRegion
-  } = _ref;
+export default function AlertMessageArea({
+  messages,
+  afterDismiss,
+  liveRegion
+}) {
   return /*#__PURE__*/React.createElement("div", null, messages.map(message => /*#__PURE__*/React.createElement(Alert, {
     key: message.id,
-    variant: message.variant || message.type || 'info',
-    timeout: 10000,
+    variant: message.variant || 'info',
+    timeout: 10000
+    // @ts-expect-error
+    ,
     liveRegion: liveRegion,
     onDismiss: () => afterDismiss(message.id)
   }, message.text)));
 }
 AlertMessageArea.propTypes = {
-  messages: arrayOf(shape({
-    id: number,
-    variant: string,
-    text: string
+  messages: _pt.arrayOf(_pt.shape({
+    id: _pt.number.isRequired,
+    text: _pt.string.isRequired
   })).isRequired,
-  afterDismiss: func,
-  liveRegion: func.isRequired
+  afterDismiss: _pt.func.isRequired,
+  liveRegion: _pt.func
 };

package/es/rce/KeyboardShortcutModal.js

@@ -26,7 +26,7 @@ import { CloseButton } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import formatMessage from '../format-message';
 import { determineOSDependentKey } from './userOS';
-import { instuiPopupMountNode } from '../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../util/fullscreenHelpers';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 export default function KeyboardShortcutModal(props) {
   const OSKey = determineOSDependentKey();
@@ -34,7 +34,7 @@ export default function KeyboardShortcutModal(props) {
     "data-testid": "RCE_KeyboardShortcutModal",
     "data-mce-component": true,
     label: formatMessage('Keyboard Shortcuts'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     open: props.open,
     shouldCloseOnDocumentClick: true,
     shouldReturnFocus: true,

package/es/rce/RCE.js

@@ -19,16 +19,17 @@
 import React, { forwardRef, useState } from 'react';
 import formatMessage from '../format-message';
 import RCEWrapper from './RCEWrapper';
-import editorLanguage from './editorLanguage';
+import { editorLanguage } from './editorLanguage';
 import normalizeLocale from './normalizeLocale';
 import wrapInitCb from './wrapInitCb';
 import tinyRCE from './tinyRCE';
 import getTranslations from '../getTranslations';
 import '@instructure/canvas-theme';
+import generateId from 'format-message-generate-id/underscored_crc32';
 if (!process || !process.env || !undefined) {
   formatMessage.setup({
     locale: 'en',
-    generateId: require('format-message-generate-id/underscored_crc32'),
+    generateId,
     missingTranslation: 'ignore'
   });
 }
@@ -73,7 +74,6 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     const p = getTranslations(locale).then(() => {
       setTranslations(true);
     }).catch(err => {
-      // eslint-disable-next-line no-console
       console.error('Failed loading the language file for', locale, '\n Cause:', err);
       setTranslations(false);
     });
@@ -102,7 +102,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
       features,
       editorOptions: {
         ...editorOptions,
-        selector: (editorOptions === null || editorOptions === void 0 ? void 0 : editorOptions.selector) || `#${textareaId}`,
+        selector: editorOptions?.selector || `#${textareaId}`,
         height,
         language: editorLanguage(props.language)
       },
@@ -115,6 +115,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage('Loading...'));
   } else {
     return /*#__PURE__*/React.createElement(RCEWrapper, Object.assign({
+      name: "content",
       ref: rceRef,
       tinymce: tinyRCE,
       readOnly: readOnly
@@ -126,7 +127,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     }, rest));
   }
 });
-const defaultProps = {
+RCE.defaultProps = {
   autosave: {
     enabled: false,
     maxAge: 3600000
@@ -147,7 +148,4 @@ const defaultProps = {
   onContentChange: () => undefined,
   onInit: () => undefined
 };
-
-// @ts-expect-error
-RCE.defaultProps = defaultProps;
 export default RCE;

package/es/rce/RCEVariants.js

@@ -55,8 +55,7 @@ export function getMenuForVariant(variant) {
   }
   return {};
 }
-export function getToolbarForVariant(variant) {
-  let ltiToolFavorites = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+export function getToolbarForVariant(variant, ltiToolFavorites = []) {
   if (variant === 'lite') {
     return [{
       name: formatMessage('Styles'),
@@ -122,8 +121,7 @@ export function getToolbarForVariant(variant) {
     items: ['removeformat', 'table', 'instructure_equation', 'instructure_media_embed']
   }];
 }
-export function getStatusBarFeaturesForVariant(variant) {
-  let ai_text_tools = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export function getStatusBarFeaturesForVariant(variant, ai_text_tools = false) {
   if (variant === 'lite' || variant === 'text-only') {
     return ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
   }