@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/KeyboardShortcutModal.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 } from 'prop-types';
 import { Heading } from '@instructure/ui-heading';
@@ -25,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();
@@ -33,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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2021 - present Instructure, Inc.
  *
@@ -17,27 +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, { 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'
   });
-} // forward rceRef to it refs the RCEWrapper where clients can call getCode etc. on it.
+}
+
+// forward rceRef to it refs the RCEWrapper where clients can call getCode etc. on it.
 // You probably shouldn't use it until onInit has been called. Until then tinymce
 // is not initialized.
-
-
 const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
   const {
     autosave,
@@ -75,18 +74,18 @@ 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);
     });
     return p;
-  }); // some properties are only used on initialization
+  });
+
+  // some properties are only used on initialization
   // Languages are a bit of a mess since Tinymce and Canvas
   // have 2 different sets of language names. normalizeLocale
   // takes the language prop and returns the locale Canvas knows,
   // editorLanguage takes the language prop and returns the
   // corresponding locale for tinymce.
-
   const [initOnlyProps] = useState(() => {
     const iProps = {
       autosave,
@@ -101,21 +100,22 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
       trayProps: rcsProps,
       use_rce_icon_maker,
       features,
-      editorOptions: { ...editorOptions,
-        selector: (editorOptions === null || editorOptions === void 0 ? void 0 : editorOptions.selector) || `#${textareaId}`,
+      editorOptions: {
+        ...editorOptions,
+        selector: editorOptions?.selector || `#${textareaId}`,
         height,
         language: editorLanguage(props.language)
       },
       variant
     };
-    wrapInitCb(mirroredAttrs, iProps.editorOptions);
+    wrapInitCb(mirroredAttrs || {}, iProps.editorOptions);
     return iProps;
   });
-
   if (typeof translations !== 'boolean') {
     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
@@ -127,7 +127,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     }, rest));
   }
 });
-const defaultProps = {
+RCE.defaultProps = {
   autosave: {
     enabled: false,
     maxAge: 3600000
@@ -148,5 +148,4 @@ const defaultProps = {
   onContentChange: () => undefined,
   onInit: () => undefined
 };
-RCE.defaultProps = defaultProps;
 export default RCE;

package/es/rce/RCEGlobals.js

@@ -15,8 +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 isEmpty = obj => Object.keys(obj).length === 0;
 
+/**
+ * @typedef {Object} Features
+ * @property {boolean} media_links_use_attachment_id
+ * @property {boolean} file_verifiers_for_quiz_links
+ */
+
 class RCEGlobals {
   constructor() {
     if (!RCEGlobals.instance) {
@@ -26,37 +33,32 @@ class RCEGlobals {
         config: {}
       };
     }
-
     return RCEGlobals.instance;
   }
-
   getFeatures() {
-    return this._data.features;
+    return /** @type {Features} */this._data.features;
   }
-
   setFeatures(features) {
     // Set only once
     if (isEmpty(this._data.features)) {
-      this._data.features = { ...features
+      this._data.features = {
+        ...features
       };
       Object.freeze(this._data.features);
     }
   }
-
   getConfig() {
     return this._data.config;
   }
-
   setConfig(config) {
     // Set only once
     if (isEmpty(this._data.config)) {
-      this._data.config = { ...config
+      this._data.config = {
+        ...config
       };
       Object.freeze(this._data.config);
     }
   }
-
 }
-
 const instance = new RCEGlobals();
 export default instance;

package/es/rce/RCEVariants.js

@@ -16,12 +16,16 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import formatMessage from '../format-message';
-export const RCEVariantValues = ['full', 'lite', 'text-only'];
+
+// copied from node_modules/tinymce/tinymce.d.ts:1434
+
+// copied from node_modules/tinymce/tinymce.d.ts:1187
+
+export const RCEVariantValues = ['full', 'lite', 'text-only', 'text-block'];
 export function getMenubarForVariant(variant) {
   if (variant === 'full') {
     return 'edit view insert format tools table';
   }
-
   return '';
 }
 export function getMenuForVariant(variant) {
@@ -49,12 +53,9 @@ 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'),
@@ -73,7 +74,6 @@ export function getToolbarForVariant(variant) {
       items: ['instructure_equation']
     }];
   }
-
   if (variant === 'text-only') {
     return [{
       name: formatMessage('Formatting'),
@@ -83,7 +83,24 @@ export function getToolbarForVariant(variant) {
       items: ['instructure_links']
     }];
   }
-
+  if (variant === 'text-block') {
+    return [{
+      name: formatMessage('Styles'),
+      items: ['fontsizeselect', 'formatselect']
+    }, {
+      name: formatMessage('Formatting'),
+      items: ['bold', 'italic', 'underline', 'instructure_color', 'inst_subscript', 'inst_superscript']
+    }, {
+      name: formatMessage('Content'),
+      items: ['instructure_links', 'instructure_documents']
+    }, {
+      name: formatMessage('Alignment and Lists'),
+      items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
+    }, {
+      name: formatMessage('Miscellaneous'),
+      items: ['removeformat', 'instructure_equation']
+    }];
+  }
   return [{
     name: formatMessage('Styles'),
     items: ['fontsizeselect', 'formatselect']
@@ -104,18 +121,16 @@ 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'];
   }
-
+  if (variant === 'text-block') {
+    return [];
+  }
   const full_features = ['keyboard_shortcuts', 'a11y_checker', 'word_count', 'html_view', 'fullscreen', 'resize_handle'];
-
   if (ai_text_tools) {
     full_features.push('ai_tools');
   }
-
   return full_features;
 }