@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/enhance-user-content/media_comment_thumbnail.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 { closest, getData, setData } from './jqueryish_funcs';
 const MEDIA_COMMENT_THUMBNAIL_SIZES = {
@@ -27,37 +28,28 @@ const MEDIA_COMMENT_THUMBNAIL_SIZES = {
     height: 50
   }
 };
-
 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;
-
   try {
     const a = document.createElement('a');
     a.href = $link.getAttribute('href');
     url = a;
   } catch (error) {
-    // eslint-disable-next-line no-console
     console.error(error);
   }
-
   if (url) {
     const urlParams = new URLSearchParams(url.search);
     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;
-
   if (authorName && createdAt) {
     altText = formatMessage('Play media comment by {name} from {createdAt}.', {
       name: authorName,
@@ -66,7 +58,6 @@ function createMediaCommentThumbnail(elem, size, keepOriginalText, kalturaSettin
   } else {
     altText = formatMessage('Play media comment.');
   }
-
   if (id) {
     const domain = `https://${kalturaSettings_.resource_domain}`;
     const backgroundUrl = `${domain}/p/${kalturaSettings_.partner_id}/thumbnail/entry_id/${id}/width/` + `${dimensions.width}/height/${dimensions.height}/bgcolor/000000/type/2/vid_sec/5`;
@@ -81,18 +72,14 @@ function createMediaCommentThumbnail(elem, size, keepOriginalText, kalturaSettin
     span1.appendChild(span2);
     $thumbnail.appendChild(span1);
     const $p = closest($link, 'p');
-
     if ($p && !$p.getAttribute('title')) {
       $p.setAttribute('title', altText);
     }
-
     let $a = $link;
-
     if (keepOriginalText) {
       $a = $link.cloneNode();
       $a.classList.remove('instructure_file_link');
       const $holder = $link.parentElement;
-
       if ($holder.matches('.instructure_file_link_holder')) {
         $holder.appendChild($a);
       } else {
@@ -101,7 +88,6 @@ function createMediaCommentThumbnail(elem, size, keepOriginalText, kalturaSettin
     } else {
       $link.innerHTML = '';
     }
-
     $a.setAttribute('data-download', $a.getAttribute('href'));
     $a.setAttribute('href', '#');
     $a.classList.add('instructure_inline_media_comment');
@@ -109,21 +95,16 @@ function createMediaCommentThumbnail(elem, size, keepOriginalText, kalturaSettin
     $a.style.backgroundImage = '';
     $a.style.padding = 0;
   }
-} // 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;
+// public API
+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(() => {
     if (jqueryData) {
       Object.keys(jqueryData).forEach(k => setData(comment_element, k, jqueryData[k]));
     }
-
     createMediaCommentThumbnail(comment_element, size, keepOriginalText, kalturaSettings);
     resolve();
   }, 1));

package/es/format-message.js

@@ -15,16 +15,15 @@
  * 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 formatMessage = require('format-message');
 
+import formatMessage from 'format-message';
 const ns = formatMessage.namespace();
-
 ns.addLocale = translations => {
   ns.setup({
-    translations: { ...ns.setup().translations,
+    translations: {
+      ...ns.setup().translations,
       ...translations
     }
   });
 };
-
-module.exports = ns;
+export default ns;

package/es/getThemeVars.js

@@ -15,24 +15,27 @@
  * 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 { getRegistry } from '@instructure/theme-registry';
-import { merge, cloneDeep } from 'lodash'; // The running theme is the running theme for this page load, and it never
-// changes, so there's no point in doing the work more than once.
+import { merge, cloneDeep } from 'lodash';
 
+// The running theme is the running theme for this page load, and it never
+// changes, so there's no point in doing the work more than once.
 let memoizedVariables;
-
 function getThemeVars() {
   if (memoizedVariables) return memoizedVariables;
+
+  // @ts-expect-error
   const {
     currentThemeKey,
     overrides,
     themes
-  } = getRegistry(); // Just assume the "canvas" theme if the default key is null. This will
+  } = getRegistry();
+  // Just assume the "canvas" theme if the default key is null. This will
   // never happen in the live app because one way or another a theme gets
   // used, but unit tests don't always do that.
   // Also we have to cloneDeep this because the merge below is about to
   // mutate the whole thing.
-
   const themeKey = currentThemeKey || 'canvas';
   const variables = cloneDeep(themes[themeKey]);
   merge(variables, overrides);
@@ -42,5 +45,4 @@ function getThemeVars() {
   };
   return memoizedVariables;
 }
-
 export { getThemeVars };

package/es/getTranslations.js

@@ -22,320 +22,243 @@
  * as part of the build. DO NOT EDIT
  * ********************************************************
  */
+
 export default function getTranslations(locale) {
   const transReadyPromise = new Promise((resolve, reject) => {
     import('tinymce').then(() => {
       let p;
-
       switch (locale) {
         case 'ab':
           p = import('./translations/locales/ab');
           break;
-
         case 'ar':
           p = import('./translations/locales/ar');
           break;
-
         case 'ca':
           p = import('./translations/locales/ca');
           break;
-
         case 'cs':
           p = import('./translations/locales/cs');
           break;
-
         case 'cs-CZ':
           p = import('./translations/locales/cs_CZ');
           break;
-
         case 'cy':
           p = import('./translations/locales/cy');
           break;
-
         case 'da':
           p = import('./translations/locales/da');
           break;
-
         case 'da-x-k12':
           p = import('./translations/locales/da-x-k12');
           break;
-
         case 'da-DK':
           p = import('./translations/locales/da_DK');
           break;
-
         case 'de':
           p = import('./translations/locales/de');
           break;
-
         case 'el':
           p = import('./translations/locales/el');
           break;
-
         case 'en':
           p = import('./translations/locales/en');
           break;
-
         case 'en-AU-x-unimelb':
           p = import('./translations/locales/en-AU-x-unimelb');
           break;
-
         case 'en-GB-x-ukhe':
           p = import('./translations/locales/en-GB-x-ukhe');
           break;
-
         case 'en-AU':
           p = import('./translations/locales/en_AU');
           break;
-
         case 'en-CA':
           p = import('./translations/locales/en_CA');
           break;
-
         case 'en-CY':
           p = import('./translations/locales/en_CY');
           break;
-
         case 'en-GB':
           p = import('./translations/locales/en_GB');
           break;
-
         case 'en-NZ':
           p = import('./translations/locales/en_NZ');
           break;
-
         case 'en-SE':
           p = import('./translations/locales/en_SE');
           break;
-
         case 'en-US':
           p = import('./translations/locales/en_US');
           break;
-
         case 'es':
           p = import('./translations/locales/es');
           break;
-
         case 'es-ES':
           p = import('./translations/locales/es_ES');
           break;
-
         case 'es-GT':
           p = import('./translations/locales/es_GT');
           break;
-
         case 'fa-IR':
           p = import('./translations/locales/fa_IR');
           break;
-
         case 'fi':
           p = import('./translations/locales/fi');
           break;
-
         case 'fr':
           p = import('./translations/locales/fr');
           break;
-
         case 'fr-CA':
           p = import('./translations/locales/fr_CA');
           break;
-
         case 'ga':
           p = import('./translations/locales/ga');
           break;
-
         case 'he':
           p = import('./translations/locales/he');
           break;
-
         case 'hi':
           p = import('./translations/locales/hi');
           break;
-
         case 'ht':
           p = import('./translations/locales/ht');
           break;
-
         case 'hu':
           p = import('./translations/locales/hu');
           break;
-
         case 'hu-HU':
           p = import('./translations/locales/hu_HU');
           break;
-
         case 'hy':
           p = import('./translations/locales/hy');
           break;
-
         case 'id':
           p = import('./translations/locales/id');
           break;
-
         case 'id-ID':
           p = import('./translations/locales/id_ID');
           break;
-
         case 'is':
           p = import('./translations/locales/is');
           break;
-
         case 'it':
           p = import('./translations/locales/it');
           break;
-
         case 'ja':
           p = import('./translations/locales/ja');
           break;
-
         case 'ko':
           p = import('./translations/locales/ko');
           break;
-
         case 'ko-KR':
           p = import('./translations/locales/ko_KR');
           break;
-
         case 'lt':
           p = import('./translations/locales/lt');
           break;
-
         case 'lt-LT':
           p = import('./translations/locales/lt_LT');
           break;
-
         case 'mi':
           p = import('./translations/locales/mi');
           break;
-
         case 'mn-MN':
           p = import('./translations/locales/mn_MN');
           break;
-
         case 'ms':
           p = import('./translations/locales/ms');
           break;
-
         case 'nb':
           p = import('./translations/locales/nb');
           break;
-
         case 'nb-x-k12':
           p = import('./translations/locales/nb-x-k12');
           break;
-
         case 'nl':
           p = import('./translations/locales/nl');
           break;
-
         case 'nl-NL':
           p = import('./translations/locales/nl_NL');
           break;
-
         case 'nn':
           p = import('./translations/locales/nn');
           break;
-
         case 'pl':
           p = import('./translations/locales/pl');
           break;
-
         case 'pt':
           p = import('./translations/locales/pt');
           break;
-
         case 'pt-BR':
           p = import('./translations/locales/pt_BR');
           break;
-
         case 'ro':
           p = import('./translations/locales/ro');
           break;
-
         case 'ru':
           p = import('./translations/locales/ru');
           break;
-
         case 'se':
           p = import('./translations/locales/se');
           break;
-
         case 'sl':
           p = import('./translations/locales/sl');
           break;
-
         case 'sv':
           p = import('./translations/locales/sv');
           break;
-
         case 'sv-x-k12':
           p = import('./translations/locales/sv-x-k12');
           break;
-
         case 'sv-SE':
           p = import('./translations/locales/sv_SE');
           break;
-
         case 'tg':
           p = import('./translations/locales/tg');
           break;
-
         case 'th':
           p = import('./translations/locales/th');
           break;
-
         case 'th-TH':
           p = import('./translations/locales/th_TH');
           break;
-
         case 'tl-PH':
           p = import('./translations/locales/tl_PH');
           break;
-
         case 'tr':
           p = import('./translations/locales/tr');
           break;
-
         case 'uk-UA':
           p = import('./translations/locales/uk_UA');
           break;
-
         case 'vi':
           p = import('./translations/locales/vi');
           break;
-
         case 'vi-VN':
           p = import('./translations/locales/vi_VN');
           break;
-
         case 'zh':
           p = import('./translations/locales/zh');
           break;
-
         case 'zh-Hans':
           p = import('./translations/locales/zh-Hans');
           break;
-
         case 'zh-Hant':
           p = import('./translations/locales/zh-Hant');
           break;
-
         case 'zh-HK':
           p = import('./translations/locales/zh_HK');
           break;
-
         case 'zh-TW':
           p = import('./translations/locales/zh_TW');
           break;
-
         case 'zh-TW.Big5':
           p = import('./translations/locales/zh_TW.Big5');
           break;
-
         default:
           p = Promise.resolve(null);
       }
-
       p.then(resolve).catch(reject);
     }).catch(() => {
       throw new Error('Failed loading tinymce.');

package/es/index.d.ts

@@ -0,0 +1,59 @@
+import { Mathml } from './enhance-user-content/mathml';
+import type { EditorOptions } from './rce/RCEWrapperProps';
+import RCEWrapper from './rce/RCEWrapper';
+export type { Editor } from 'tinymce';
+export { getContrastStatus, getDefaultColors, isTransparent, } from './rce/plugins/instructure_color/components/colorUtils';
+export { ColorPicker, type ColorTab, type ColorSpec, type TabsSpec, type ColorsInUse, } from './rce/plugins/instructure_color/components/ColorPicker';
+export * from './enhance-user-content/index';
+export declare const defaultConfiguration: {
+    auto_focus: boolean;
+    block_formats: undefined;
+    body_class: string;
+    content_css: never[];
+    directionality: string;
+    height: undefined;
+    language: string;
+    menubar: undefined;
+    menu: undefined;
+    toolbar: undefined;
+    plugins: undefined;
+    branding: boolean;
+    browser_spellcheck: boolean;
+    content_style: string;
+    convert_urls: boolean;
+    font_formats: string;
+    language_load: boolean;
+    language_url: string;
+    toolbar_mode: string;
+    toolbar_ticky: boolean;
+    mobile: {
+        theme: string;
+    };
+    preview_styles: string;
+    remove_script_host: boolean;
+    resize: boolean;
+    skin: boolean;
+    statusbar: boolean;
+    valid_elements: string;
+    extended_valid_elements: string;
+    non_empty_elements: string;
+    target_list: boolean;
+    link_title: boolean;
+    default_link_target: string;
+    style_formats: {
+        title: string;
+        items: {
+            title: string;
+            format: string;
+        }[];
+    }[];
+};
+export { instuiPopupMountNodeFn } from './util/fullscreenHelpers';
+export { Mathml };
+export { RCEVariantValues } from './rce/RCEVariants';
+export { UploadFilePanelIds, handleSubmit, UploadFile, type UploadFileProps, } from './rce/plugins/shared/Upload';
+export declare function renderIntoDiv(editorEl: HTMLElement, props: EditorOptions, cb?: (ref: RCEWrapper) => void): void;
+export declare function getRCSAuthenticationHeaders(jwt: string): {
+    Authorization: string;
+};
+export declare function getRCSOriginFromHost(host: string): any;

package/es/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 normalizeLocale from './rce/normalizeLocale';
 import { renderIntoDiv as render } from './rce/root';
 import { headerFor, originFromHost } from './rcs/api';
@@ -22,27 +23,26 @@ import getTranslations from './getTranslations';
 import defaultTinymceConfig from './defaultTinymceConfig';
 import { setLocale } from './common/natcompare';
 import { Mathml } from './enhance-user-content/mathml';
+export { getContrastStatus, getDefaultColors, isTransparent } from './rce/plugins/instructure_color/components/colorUtils';
+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';
 export function renderIntoDiv(editorEl, props, cb) {
   const language = normalizeLocale(props.language);
   setLocale(language);
-
   if (undefined || language === 'en') {
     render(editorEl, props, cb);
   } else {
     // 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/DraggingBlocker.js

@@ -15,12 +15,14 @@
  * 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 } from 'prop-types'; // The purpose of the dragging blocker is to keep the TinyMCE iframe from
+import { bool } from 'prop-types';
+
+// The purpose of the dragging blocker is to keep the TinyMCE iframe from
 // intercepting and swallowing the mouse events if the mouse winds up over the
 // iframe while performing the drag. This is what TinyMCE itself does with its
 // own resize handle.
-
 export default function DraggingBlocker(props) {
   if (props.dragging) {
     return /*#__PURE__*/React.createElement("div", {