@instructure/canvas-rce 5.13.1 → 5.13.5

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 5.13.4 - 2024-08-12
+
+### Fixed
+
+- RCE "Lato Extended" now properly uses the "Lato Extended" font
+
+## 5.13.4 - 2024-08-12
+
+### Changed
+
+- Icon Maker tray now stays open until the user closes it with the close button
+
+## 5.13.3 - 2024-07-22
+
+### Fixed
+
+- Icon Maker tray now stays open while an image upload modal is present
+
+## 5.13.2 - 2024-06-26
+
+### Changed
+
+- Removed polyfill.io reference from README
+
 ## 5.13.1 - 2024-06-03
 
 ### Changed

package/README.md

@@ -65,11 +65,9 @@ polyfills in your own app, you can put this in your html above the script that i
 `@instructure/canvas-rce`:
 
 ```
-<script src="https://cdn.polyfill.io/v2/polyfill.min.js?rum=0"></script>
+<script src="https://cdnjs.cloudflare.com/polyfill/v2/polyfill.min.js"></script>
 ```
 
-(See https://polyfill.io/v2/docs/ for more info)
-
 ## Development
 
 See [DEVELOPMENT.md](https://github.com/instructure/canvas-lms/blob/master/packages/canvas-rce/DEVELOPMENT.md)

package/es/bridge/Bridge.js

@@ -252,8 +252,6 @@ export default class Bridge {
       const result = this.focusedEditor.insertImage(image);
       (_this$controller4 = this.controller(this.focusedEditor.id)) === null || _this$controller4 === void 0 ? void 0 : _this$controller4.hideTray();
       return result;
-    } else {
-      console.warn('clicked sidebar image without a focused editor');
     }
   }
 
@@ -264,8 +262,6 @@ export default class Bridge {
       if (!this.existingContentToLink()) {
         this.focusedEditor.insertImagePlaceholder(fileMetaProps);
       }
-    } else {
-      console.warn('clicked sidebar image without a focused editor');
     }
   }
 

package/es/defaultTinymceConfig.js

@@ -51,7 +51,7 @@ const defaultTinymceConfig = {
   // this will always be provided by the RCE
   convert_urls: false,
   // fonts specified here need to either be web-safe or self-hosted and loaded in app/stylesheets/bundles/fonts.scss
-  font_formats: "Lato=lato,Helvetica Neue,Helvetica,Arial,sans-serif; Balsamiq Sans=Balsamiq Sans,lato,Helvetica Neue,Helvetica,Arial,sans-serif; Architect's Daughter=Architects Daughter,lato,Helvetica Neue,Helvetica,Arial,sans-serif; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Courier New=courier new,courier; Georgia=georgia,palatino; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva",
+  font_formats: "Lato Extended=Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Balsamiq Sans=Balsamiq Sans,Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Architect's Daughter=Architects Daughter,Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Courier New=courier new,courier; Georgia=georgia,palatino; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva",
   language_load: false,
   language_url: 'none',
   toolbar_mode: 'floating',

package/es/getTranslations.js

@@ -148,6 +148,10 @@ export default function getTranslations(locale) {
           p = import('./translations/locales/he');
           break;
 
+        case 'hi':
+          p = import('./translations/locales/hi');
+          break;
+
         case 'ht':
           p = import('./translations/locales/ht');
           break;
@@ -340,5 +344,5 @@ export default function getTranslations(locale) {
   return transReadyPromise;
 }
 export function getLocaleList() {
-  return ['ab', 'ar', 'ca', 'cs', 'cs-CZ', 'cy', 'da', 'da-x-k12', 'da-DK', 'de', 'el', 'en', 'en-AU-x-unimelb', 'en-GB-x-ukhe', 'en-AU', 'en-CA', 'en-CY', 'en-GB', 'en-NZ', 'en-SE', 'en-US', 'es', 'es-ES', 'es-GT', 'fa-IR', 'fi', 'fr', 'fr-CA', 'ga', 'he', 'ht', 'hu', 'hu-HU', 'hy', 'id', 'id-ID', 'is', 'it', 'ja', 'ko', 'ko-KR', 'lt', 'lt-LT', 'mi', 'mn-MN', 'ms', 'nb', 'nb-x-k12', 'nl', 'nl-NL', 'nn', 'pl', 'pt', 'pt-BR', 'ro', 'ru', 'se', 'sl', 'sv', 'sv-x-k12', 'sv-SE', 'tg', 'th', 'th-TH', 'tl-PH', 'tr', 'uk-UA', 'vi', 'vi-VN', 'zh', 'zh-Hans', 'zh-Hant', 'zh-HK', 'zh-TW', 'zh-TW.Big5'];
+  return ['ab', 'ar', 'ca', 'cs', 'cs-CZ', 'cy', 'da', 'da-x-k12', 'da-DK', 'de', 'el', 'en', 'en-AU-x-unimelb', 'en-GB-x-ukhe', 'en-AU', 'en-CA', 'en-CY', 'en-GB', 'en-NZ', 'en-SE', 'en-US', 'es', 'es-ES', 'es-GT', 'fa-IR', 'fi', 'fr', 'fr-CA', 'ga', 'he', 'hi', 'ht', 'hu', 'hu-HU', 'hy', 'id', 'id-ID', 'is', 'it', 'ja', 'ko', 'ko-KR', 'lt', 'lt-LT', 'mi', 'mn-MN', 'ms', 'nb', 'nb-x-k12', 'nl', 'nl-NL', 'nn', 'pl', 'pt', 'pt-BR', 'ro', 'ru', 'se', 'sl', 'sv', 'sv-x-k12', 'sv-SE', 'tg', 'th', 'th-TH', 'tl-PH', 'tr', 'uk-UA', 'vi', 'vi-VN', 'zh', 'zh-Hans', 'zh-Hant', 'zh-HK', 'zh-TW', 'zh-TW.Big5'];
 }

package/es/index.js

@@ -26,6 +26,8 @@ export * from './enhance-user-content/index';
 export const defaultConfiguration = defaultTinymceConfig;
 export { instuiPopupMountNode } 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);

package/es/rce/RCE.js

@@ -58,6 +58,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     rcsProps,
     use_rce_icon_maker,
     features,
+    variant,
     onFocus,
     onBlur,
     onInit,
@@ -104,7 +105,8 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
         selector: (editorOptions === null || editorOptions === void 0 ? void 0 : editorOptions.selector) || `#${textareaId}`,
         height,
         language: editorLanguage(props.language)
-      }
+      },
+      variant
     };
     wrapInitCb(mirroredAttrs, iProps.editorOptions);
     return iProps;

package/es/rce/RCEVariants.js

@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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';
+export const RCEVariantValues = ['full', 'lite', 'text-only'];
+export function getMenubarForVariant(variant) {
+  if (variant === 'full') {
+    return 'edit view insert format tools table';
+  }
+
+  return '';
+}
+export function getMenuForVariant(variant) {
+  if (variant === 'full') {
+    return {
+      edit: {
+        title: formatMessage('Edit'),
+        items: `undo redo | cut copy paste | selectall`
+      },
+      format: {
+        title: formatMessage('Format'),
+        items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align directionality | forecolor backcolor | removeformat'
+      },
+      insert: {
+        title: formatMessage('Insert'),
+        items: 'instructure_links instructure_image instructure_media instructure_document instructure_icon_maker | instructure_equation inserttable instructure_media_embed | hr'
+      },
+      tools: {
+        title: formatMessage('Tools'),
+        items: 'instructure_wordcount lti_tools_menuitem instructure_search_and_replace'
+      },
+      view: {
+        title: formatMessage('View'),
+        items: 'instructure_fullscreen instructure_exit_fullscreen instructure_html_view'
+      }
+    };
+  }
+
+  return {};
+}
+export function getToolbarForVariant(variant) {
+  let ltiToolFavorites = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+  if (variant === 'lite') {
+    return [{
+      name: formatMessage('Styles'),
+      items: ['formatselect']
+    }, {
+      name: formatMessage('Formatting'),
+      items: ['bold', 'italic', 'underline', 'forecolor']
+    }, {
+      name: formatMessage('Content'),
+      items: ['instructure_links', 'instructure_image']
+    }, {
+      name: formatMessage('Lists'),
+      items: ['bullist']
+    }, {
+      name: formatMessage('Miscellaneous'),
+      items: ['instructure_equation']
+    }];
+  }
+
+  if (variant === 'text-only') {
+    return [{
+      name: formatMessage('Formatting'),
+      items: ['bold', 'italic', 'underline']
+    }, {
+      name: formatMessage('Content'),
+      items: ['instructure_links']
+    }];
+  }
+
+  return [{
+    name: formatMessage('Styles'),
+    items: ['fontsizeselect', 'formatselect']
+  }, {
+    name: formatMessage('Formatting'),
+    items: ['bold', 'italic', 'underline', 'forecolor', 'backcolor', 'inst_subscript', 'inst_superscript']
+  }, {
+    name: formatMessage('Content'),
+    items: ['instructure_links', 'instructure_image', 'instructure_record', 'instructure_documents', 'instructure_icon_maker']
+  }, {
+    name: formatMessage('External Tools'),
+    items: [...ltiToolFavorites, 'lti_tool_dropdown', 'lti_mru_button']
+  }, {
+    name: formatMessage('Alignment and Lists'),
+    items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
+  }, {
+    name: formatMessage('Miscellaneous'),
+    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;
+
+  if (variant === 'lite' || variant === 'text-only') {
+    return ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
+  }
+
+  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;
+}

package/es/rce/RCEWrapper.js

@@ -60,6 +60,7 @@ import { IconMoreSolid } from '@instructure/ui-icons/es/svg';
 import EncryptedStorage from '../util/encrypted-storage';
 import buildStyle from './style';
 import { externalToolsForToolbar } from './plugins/instructure_rce_external_tools/RceToolWrapper';
+import { getMenubarForVariant, getMenuForVariant, getToolbarForVariant, getStatusBarFeaturesForVariant } from './RCEVariants';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
@@ -693,6 +694,72 @@ class RCEWrapper extends React.Component {
       }
     };
 
+    this.handleAIClick = () => {
+      import('./plugins/shared/ai_tools').then(module => {
+        this.AIToolsTray = module.AIToolsTray;
+        this.setState({
+          AIToolsOpen: true,
+          AITToolsFocusReturn: document.activeElement
+        });
+      }).catch(ex => {
+        // eslint-disable-next-line no-console
+        console.error('Failed loading the AIToolsTray', ex);
+      });
+    };
+
+    this.closeAITools = () => {
+      this.setState({
+        AIToolsOpen: false
+      });
+    };
+
+    this.AIToolsExited = () => {
+      if (this.state.AITToolsFocusReturn === this.iframe) {
+        // launched using a kb shortcut
+        // the iframe has focus so we need to forward it on to tinymce editor
+        this.editor.focus(false);
+      } else if (this.state.AITToolsFocusReturn === document.getElementById(`show-on-focus-btn-${this.id}`)) {
+        var _this$_showOnFocusBut2;
+
+        // launched from showOnFocus button
+        // edge case where focusing KBShortcutFocusReturn doesn't work
+        (_this$_showOnFocusBut2 = this._showOnFocusButton) === null || _this$_showOnFocusBut2 === void 0 ? void 0 : _this$_showOnFocusBut2.focus();
+      } else {
+        var _this$state$AITToolsF;
+
+        // launched from kb shortcut button on status bar
+        (_this$state$AITToolsF = this.state.AITToolsFocusReturn) === null || _this$state$AITToolsF === void 0 ? void 0 : _this$state$AITToolsF.focus();
+      }
+    };
+
+    this.handleInsertAIContent = content => {
+      const editor = this.mceInstance();
+      contentInsertion.insertContent(editor, content);
+    };
+
+    this.handleReplaceAIContent = content => {
+      const ed = this.mceInstance();
+      const selection = ed.selection;
+
+      if (selection.getContent().length > 0) {
+        selection.setContent(content);
+      } else {
+        ed.selection.select(ed.getBody(), true);
+        selection.setContent(content);
+      }
+    };
+
+    this.getCurrentContentForAI = () => {
+      const selected = this.mceInstance().selection.getContent();
+      return selected ? {
+        type: 'selection',
+        content: selected
+      } : {
+        type: 'full',
+        content: this.mceInstance().getContent()
+      };
+    };
+
     this.setFocusAbilityForHeader = focusable => {
       // Sets aria-hidden to prevent screen readers focus in RCE menus and toolbar
       const header = this._elementRef.current.querySelector('.tox-editor-header');
@@ -788,7 +855,8 @@ class RCEWrapper extends React.Component {
         prevHeight: _ht
       },
       a11yErrorsCount: 0,
-      shouldShowEditor: typeof IntersectionObserver === 'undefined' || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs
+      shouldShowEditor: typeof IntersectionObserver === 'undefined' || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs,
+      AIToolsOpen: false
     };
     this._statusBarId = `${this.state.id}_statusbar`;
     this.pendingEventHandlers = [];
@@ -796,12 +864,15 @@ class RCEWrapper extends React.Component {
     this.pluginsToExclude = parsePluginsToExclude(((_props$editorOptions2 = props.editorOptions) === null || _props$editorOptions2 === void 0 ? void 0 : _props$editorOptions2.plugins) || []);
     this.resourceType = props.resourceType;
     this.resourceId = props.resourceId;
+    this.variant = window.RCE_VARIANT || props.variant; // to facilitate testing
+
     this.tinymceInitOptions = this.wrapOptions(props.editorOptions);
     alertHandler.alertFunc = this.addAlert;
     this.handleContentTrayClosing = this.handleContentTrayClosing.bind(this);
     this.resizeObserver = new ResizeObserver(_entries => {
       this._handleFullscreenResize();
     });
+    this.AIToolsTray = undefined;
   } // when the RCE is put into fullscreen we need to move the div
   // tinymce mounts popup menus into from the body to the rce-wrapper
   // or the menus wind up behind the RCE. I can't find a way to
@@ -979,7 +1050,7 @@ class RCEWrapper extends React.Component {
   }
 
   replaceCode(code) {
-    if (code !== "" && window.confirm(formatMessage('Content in the editor will be changed. Press Cancel to keep the original content.'))) {
+    if (code !== '' && window.confirm(formatMessage('Content in the editor will be changed. Press Cancel to keep the original content.'))) {
       this.mceInstance().setContent(code);
     }
   }
@@ -1551,54 +1622,15 @@ class RCEWrapper extends React.Component {
       // things like table resizing and stuff.
       content_css: options.content_css || [],
       content_style: contentCSS,
-      menubar: mergeMenuItems('edit view insert format tools table', possibleNewMenubarItems),
+      menubar: mergeMenuItems(getMenubarForVariant(this.variant), possibleNewMenubarItems),
       // default menu options listed at https://www.tiny.cloud/docs/configure/editor-appearance/#menu
       // tinymce's default edit and table menus are fine
       // note: the tinymce paste command is used here instead of instructure_paste
       // since we currently can't effectively paste using the clipboard api anyway.
       // we include all the canvas specific items in the menu and toolbar
       // and rely on tinymce only showing them if the plugin is provided.
-      menu: mergeMenu({
-        edit: {
-          title: formatMessage('Edit'),
-          items: `undo redo | cut copy paste | selectall`
-        },
-        format: {
-          title: formatMessage('Format'),
-          items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align directionality | forecolor backcolor | removeformat'
-        },
-        insert: {
-          title: formatMessage('Insert'),
-          items: 'instructure_links instructure_image instructure_media instructure_document instructure_icon_maker | instructure_equation inserttable instructure_media_embed | hr'
-        },
-        tools: {
-          title: formatMessage('Tools'),
-          items: 'instructure_wordcount lti_tools_menuitem instructure_search_and_replace'
-        },
-        view: {
-          title: formatMessage('View'),
-          items: 'instructure_fullscreen instructure_exit_fullscreen instructure_html_view'
-        }
-      }, options.menu),
-      toolbar: mergeToolbar([{
-        name: formatMessage('Styles'),
-        items: ['fontsizeselect', 'formatselect']
-      }, {
-        name: formatMessage('Formatting'),
-        items: ['bold', 'italic', 'underline', 'forecolor', 'backcolor', 'inst_subscript', 'inst_superscript']
-      }, {
-        name: formatMessage('Content'),
-        items: ['instructure_links', 'instructure_image', 'instructure_record', 'instructure_documents', 'instructure_icon_maker']
-      }, {
-        name: formatMessage('External Tools'),
-        items: [...this.ltiToolFavorites, 'lti_tool_dropdown', 'lti_mru_button']
-      }, {
-        name: formatMessage('Alignment and Lists'),
-        items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
-      }, {
-        name: formatMessage('Miscellaneous'),
-        items: ['removeformat', 'table', 'instructure_equation', 'instructure_media_embed']
-      }], options.toolbar),
+      menu: mergeMenu(getMenuForVariant(this.variant), options.menu),
+      toolbar: mergeToolbar(getToolbarForVariant(this.variant, this.ltiToolFavorites), options.toolbar),
       contextmenu: '',
       // show the browser's native context menu
       toolbar_mode: 'sliding',
@@ -1797,6 +1829,7 @@ class RCEWrapper extends React.Component {
       });
     }
 
+    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, this.props.ai_text_tools);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, this.style.css), /*#__PURE__*/React.createElement(StoreProvider, {
       jwt: (_this$props$trayProps5 = this.props.trayProps) === null || _this$props$trayProps5 === void 0 ? void 0 : _this$props$trayProps5.jwt,
       refreshToken: (_this$props$trayProps6 = this.props.trayProps) === null || _this$props$trayProps6 === void 0 ? void 0 : _this$props$trayProps6.refreshToken,
@@ -1811,6 +1844,9 @@ class RCEWrapper extends React.Component {
         key: this.id,
         className: `${this.style.classNames.root} rce-wrapper`,
         ref: this._elementRef,
+        style: this.variant === 'full' ? {
+          marginBottom: '.5rem'
+        } : undefined,
         onFocus: this.handleFocusRCE,
         onBlur: this.handleBlurRCE
       }, this.state.shouldShowOnFocusButton && /*#__PURE__*/React.createElement(ShowOnFocusButton, {
@@ -1842,7 +1878,7 @@ class RCEWrapper extends React.Component {
         onNodeChange: this.onNodeChange,
         onEditorChange: this.onEditorChange,
         liveRegion: this.props.liveRegion
-      })), /*#__PURE__*/React.createElement(StatusBar, {
+      })), statusBarFeatures.length > 0 && /*#__PURE__*/React.createElement(StatusBar, {
         id: this._statusBarId,
         rceIsFullscreen: this._isFullscreen(),
         readOnly: this.props.readOnly,
@@ -1860,7 +1896,9 @@ class RCEWrapper extends React.Component {
         onWordcountModalOpen: () => launchWordcountModal(this.mceInstance(), document, {
           skipEditorFocus: true
         }),
-        disabledPlugins: this.pluginsToExclude
+        disabledPlugins: this.pluginsToExclude,
+        features: statusBarFeatures,
+        onAI: this.handleAIClick
       }), ((_this$props$trayProps10 = this.props.trayProps) === null || _this$props$trayProps10 === void 0 ? void 0 : _this$props$trayProps10.containingContext) && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
         mountNode: instuiPopupMountNode,
         key: this.id,
@@ -1875,6 +1913,16 @@ class RCEWrapper extends React.Component {
         onExited: this.KBShortcutModalExited,
         onDismiss: this.closeKBShortcutModal,
         open: this.state.KBShortcutModalOpen
+      }), this.props.ai_text_tools && this.AIToolsTray && /*#__PURE__*/React.createElement(this.AIToolsTray, {
+        open: this.state.AIToolsOpen,
+        container: document.querySelector('[role="main"]'),
+        mountNode: instuiPopupMountNode,
+        contextId: trayProps.contextId,
+        contextType: trayProps.contextId,
+        currentContent: this.getCurrentContentForAI(),
+        onClose: this.closeAITools,
+        onInsertContent: this.handleInsertAIContent,
+        onReplaceContent: this.handleReplaceAIContent
       }), this.state.confirmAutoSave ? /*#__PURE__*/React.createElement(Suspense, {
         fallback: /*#__PURE__*/React.createElement(Spinner, {
           renderTitle: renderLoading,
@@ -1909,7 +1957,8 @@ RCEWrapper.defaultProps = {
   maxInitRenderedRCEs: -1,
   features: {},
   timezone: (_Intl = Intl) === null || _Intl === void 0 ? void 0 : (_Intl$DateTimeFormat = _Intl.DateTimeFormat()) === null || _Intl$DateTimeFormat === void 0 ? void 0 : (_Intl$DateTimeFormat$ = _Intl$DateTimeFormat.resolvedOptions()) === null || _Intl$DateTimeFormat$ === void 0 ? void 0 : _Intl$DateTimeFormat$.timeZone,
-  canvasOrigin: ''
+  canvasOrigin: '',
+  variant: 'full'
 };
 RCEWrapper.skinCssInjected = false;
 

package/es/rce/RCEWrapperProps.js

@@ -17,6 +17,7 @@
  */
 import PropTypes from 'prop-types';
 import { trayPropTypes } from './plugins/shared/CanvasContentTray';
+import { RCEVariantValues } from './RCEVariants';
 import { PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW } from './StatusBar'; // This file contains the prop types for the RCEWrapper component, so that types can be shared without having
 // to refactor RCEWrapper.js into typescript.
 
@@ -49,7 +50,7 @@ export const ltiToolsPropType = PropTypes.arrayOf(PropTypes.shape({
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   // is this a favorite tool?
   favorite: PropTypes.bool,
-  always_on: PropTypes.bool,
+  on_by_default: PropTypes.bool,
   name: PropTypes.string,
   description: PropTypes.string,
   icon_url: PropTypes.string,
@@ -127,5 +128,7 @@ export const rceWrapperPropTypes = {
   flashAlertTimeout: PropTypes.number,
   timezone: PropTypes.string,
   userCacheKey: PropTypes.string,
-  externalToolsConfig: externalToolsConfigPropType
+  externalToolsConfig: externalToolsConfigPropType,
+  ai_text_tools: PropTypes.bool,
+  variant: PropTypes.oneOf(RCEVariantValues)
 };