@instructure/canvas-rce 5.13.2 → 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/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/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)
 };

package/es/rce/StatusBar.js

@@ -31,6 +31,7 @@ import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFull
 import formatMessage from '../format-message';
 import ResizeHandle from './ResizeHandle';
 import { FS_ENABLED } from '../util/fullscreenHelpers';
+import { AIWandSVG } from './plugins/shared/ai_tools';
 export const WYSIWYG_VIEW = 'WYSIWYG';
 export const PRETTY_HTML_EDITOR_VIEW = 'PRETTY';
 export const RAW_HTML_EDITOR_VIEW = 'RAW'; // I don't know why eslint is reporting this, the props are all used
@@ -54,7 +55,10 @@ StatusBar.propTypes = {
   a11yBadgeColor: string,
   a11yErrorsCount: number,
   onWordcountModalOpen: func.isRequired,
-  disabledPlugins: arrayOf(string)
+  disabledPlugins: arrayOf(string),
+  features: arrayOf(string),
+  // StatusBarFeature[]
+  onAI: func
 };
 StatusBar.defaultProps = {
   a11yBadgeColor: '#0374B5',
@@ -127,6 +131,10 @@ export default function StatusBar(props) {
     return !props.disabledPlugins.includes(plugin);
   }
 
+  function isFeature(feature_name) {
+    return props.features.includes(feature_name);
+  }
+
   function preferredHtmlEditor() {
     if (props.preferredHtmlEditor) return props.preferredHtmlEditor;
     return PRETTY_HTML_EDITOR_VIEW;
@@ -177,7 +185,7 @@ export default function StatusBar(props) {
     const a11yButtonId = 'rce-a11y-btn';
     const button = /*#__PURE__*/React.createElement(IconButton, {
       "data-btn-id": a11yButtonId,
-      color: "primary",
+      color: "secondary",
       title: a11y,
       tabIndex: tabIndexForBtn(a11yButtonId),
       onClick: event => {
@@ -233,13 +241,39 @@ export default function StatusBar(props) {
 
   function renderIconButtons() {
     if (isHtmlView()) return null;
+    const ai_tools = isFeature('ai_tools');
+    const kb_shortcuts = isFeature('keyboard_shortcuts');
+    const a11y_checker = isFeature('a11y_checker');
+    if (!(ai_tools || kb_shortcuts || a11y_checker)) return null;
     const kbshortcut = formatMessage('View keyboard shortcuts');
     return /*#__PURE__*/React.createElement(View, {
       display: "inline-block",
       padding: "0 x-small"
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    }, ai_tools && props.onAI && /*#__PURE__*/React.createElement(IconButton, {
+      "data-btn-id": "rce-ai-btn",
+      color: "secondary",
+      "aria-haspopup": "dialog",
+      title: formatMessage('AI Tools'),
+      tabIndex: tabIndexForBtn('rce-ai-btn'),
+      onClick: event => {
+        event.target.focus(); // FF doesn't focus buttons on click
+
+        props.onAI();
+      },
+      onFocus: () => setFocusedBtnId('rce-ai-btn'),
+      screenReaderLabel: formatMessage('AI Tools'),
+      withBackground: false,
+      withBorder: false
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'dodgerBlue'
+      }
+    }, /*#__PURE__*/React.createElement(SVGIcon, {
+      src: AIWandSVG,
+      size: "x-small"
+    }))), kb_shortcuts && /*#__PURE__*/React.createElement(IconButton, {
       "data-btn-id": "rce-kbshortcut-btn",
-      color: "primary",
+      color: "secondary",
       "aria-haspopup": "dialog",
       title: kbshortcut,
       tabIndex: tabIndexForBtn('rce-kbshortcut-btn'),
@@ -252,7 +286,7 @@ export default function StatusBar(props) {
       screenReaderLabel: kbshortcut,
       withBackground: false,
       withBorder: false
-    }, /*#__PURE__*/React.createElement(IconKeyboardShortcutsLine, null)), !props.readOnly && isAvailable('ally_checker') && renderA11yButton());
+    }, /*#__PURE__*/React.createElement(IconKeyboardShortcutsLine, null)), a11y_checker && !props.readOnly && isAvailable('ally_checker') && renderA11yButton());
   }
 
   function renderWordCount() {
@@ -264,17 +298,25 @@ export default function StatusBar(props) {
     }`, {
       count: props.wordCount
     });
-    return /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: css(styles.separator)
+    }), /*#__PURE__*/React.createElement(View, {
       display: "inline-block",
       padding: "0 small",
       "data-testid": "status-bar-word-count"
     }, /*#__PURE__*/React.createElement(CondensedButton, {
       "data-btn-id": "rce-wordcount-btn",
-      color: "primary",
+      color: "secondary",
       onClick: props.onWordcountModalOpen,
       tabIndex: tabIndexForBtn('rce-wordcount-btn'),
       title: formatMessage('View word and character counts')
-    }, wordCount));
+    }, wordCount)));
+  }
+
+  function renderSection3(html_view, fullscreen, resize_handle) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: css(styles.separator)
+    }), html_view && renderToggleHtml(), fullscreen && renderFullscreen(), resize_handle && renderResizeHandle());
   }
 
   function descMsg() {
@@ -292,7 +334,7 @@ export default function StatusBar(props) {
       padding: "0 0 0 x-small"
     }, !props.readOnly && /*#__PURE__*/React.createElement(IconButton, {
       "data-btn-id": "rce-edit-btn",
-      color: "primary",
+      color: "secondary",
       onClick: event => {
         props.onChangeView(isHtmlView() ? WYSIWYG_VIEW : getHtmlEditorView(event));
       },
@@ -329,7 +371,7 @@ export default function StatusBar(props) {
     const fullscreen = props.rceIsFullscreen ? formatMessage('Exit Fullscreen') : formatMessage('Fullscreen');
     return /*#__PURE__*/React.createElement(IconButton, {
       "data-btn-id": "rce-fullscreen-btn",
-      color: "primary",
+      color: "secondary",
       title: fullscreen,
       tabIndex: tabIndexForBtn('rce-fullscreen-btn'),
       onClick: event => {
@@ -356,7 +398,19 @@ export default function StatusBar(props) {
   }
 
   const flexJustify = isHtmlView() ? 'end' : 'start';
-  return /*#__PURE__*/React.createElement(Flex, {
+  const html_view = isFeature('html_view') && isAvailable('instructure_html_view');
+  const fullscreen = isFeature('fullscreen') && isAvailable('instructure_fullscreen');
+  const resize_handle = isFeature('resize_handle');
+  return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+    theme: {
+      componentOverrides: {
+        IconButton: {
+          secondaryGhostColor: 'rgb(34, 47, 62)' // to match tinymce's button color
+
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
     id: props.id,
     padding: "x-small 0 x-small x-small",
     "data-testid": "RCEStatusBar",
@@ -367,12 +421,8 @@ export default function StatusBar(props) {
     shouldGrow: true
   }, isHtmlView() ? renderHtmlEditorMessage() : renderPath()), /*#__PURE__*/React.createElement(Flex.Item, {
     role: "toolbar",
-    title: formatMessage('Editor Statusbar')
-  }, renderIconButtons(), /*#__PURE__*/React.createElement("div", {
-    className: css(styles.separator)
-  }), isAvailable('instructure_wordcount') && renderWordCount(), /*#__PURE__*/React.createElement("div", {
-    className: css(styles.separator)
-  }), isAvailable('instructure_html_view') && renderToggleHtml(), isAvailable('instructure_fullscreen') && renderFullscreen(), renderResizeHandle()));
+    title: formatMessage('Editor Status Bar')
+  }, renderIconButtons(), isFeature('word_count') && isAvailable('instructure_wordcount') && renderWordCount(), (html_view || fullscreen || resize_handle) && renderSection3(html_view, fullscreen, resize_handle))));
 }
 const styles = StyleSheet.create({
   separator: {

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Footer.js

@@ -66,6 +66,7 @@ export const Footer = _ref => {
     margin: "0 0 0 x-small",
     "data-testid": "icon-maker-save"
   }, replaceAll ? formatMessage('Save') : formatMessage('Save Copy'))) : /*#__PURE__*/React.createElement(Button, {
+    id: "create-icon-button",
     disabled: disabled,
     margin: "0 0 0 x-small",
     color: "primary",