@instructure/canvas-rce 6.0.0 → 7.2.0

package/es/rce/RCEWrapper.js

@@ -19,6 +19,7 @@ import _pt from "prop-types";
 
 import React, { Suspense } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
+import tinymce from 'tinymce';
 import _ from 'lodash';
 import { StoreProvider } from './plugins/shared/StoreContext';
 import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
@@ -64,6 +65,7 @@ import { getMenubarForVariant, getMenuForVariant, getToolbarForVariant, getStatu
 import { focusFirstMenuButton, focusToolbar, isElementWithinTable, mergeMenu, mergeMenuItems, mergePlugins, mergeToolbar, parsePluginsToExclude, patchAutosavedContent } from './RCEWrapper.utils';
 import { externalToolsForToolbar } from './plugins/instructure_rce_external_tools/util/externalToolsForToolbar';
 import { initScreenreaderOnFormat } from './screenreaderOnFormat';
+import { normalizeContainingContext } from '../util/contextHelper';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
@@ -141,6 +143,7 @@ class RCEWrapper extends React.Component {
     this._showOnFocusButton = void 0;
     this._statusBarId = void 0;
     this._textareaEl = void 0;
+    this._effectiveContainingContext = void 0;
     this.AIToolsTray = void 0;
     this.editor = void 0;
     this.initialContent = void 0;
@@ -208,6 +211,7 @@ class RCEWrapper extends React.Component {
     this.toggleFullscreen = () => {
       this.handleClickFullscreen();
     };
+    // @ts-expect-error
     this._onFullscreenChange = event => {
       if (document[FS_ELEMENT]) {
         // @ts-expect-error
@@ -238,6 +242,7 @@ class RCEWrapper extends React.Component {
     this.handleFocusRCE = () => {
       this.handleFocus();
     };
+    // @ts-expect-error
     this.handleBlurRCE = event => {
       if (event.relatedTarget === null) {
         // focus might be moving to tinymce
@@ -268,13 +273,11 @@ class RCEWrapper extends React.Component {
       if (event.code === 'F9' && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
-        this.setFocusAbilityForHeader(true);
         // @ts-expect-error
         focusFirstMenuButton(this._elementRef.current);
       } else if (event.code === 'F10' && event.altKey) {
         event.preventDefault();
         event.stopPropagation();
-        this.setFocusAbilityForHeader(true);
         // @ts-expect-error
         focusToolbar(this._elementRef.current);
       } else if (event.code === 'F8' && event.altKey) {
@@ -329,20 +332,6 @@ class RCEWrapper extends React.Component {
         tinyapp.setAttribute('tabIndex', '-1');
       }
 
-      // Adds a focusout event listener for handling screen reader navigation focus
-      const header = this._elementRef.current?.querySelector('.tox-editor-header');
-      if (header) {
-        // @ts-expect-error
-        header.addEventListener('focusout', e => {
-          // @ts-expect-error
-          const leavingHeader = !header.contains(e.relatedTarget);
-          if (leavingHeader) {
-            this.setFocusAbilityForHeader(false);
-          }
-        });
-      }
-      this.setFocusAbilityForHeader(false);
-
       // Probably should do this in tinymce.scss, but we only want it in new rce
       textarea.style.resize = 'none';
       editor.on('keydown', this.handleKey);
@@ -388,6 +377,12 @@ class RCEWrapper extends React.Component {
         });
       }
     };
+    /**
+     * Fix keyboard navigation in the expanded toolbar
+     *
+     * NOTE: This is a workaround for https://github.com/tinymce/tinymce/issues/8618
+     *       and should be removed once that issue is resolved and the tinymce dependency is updated to include it.
+     */
     this.fixToolbarKeyboardNavigation = () => {
       // The keyboard navigation config in tinymce for the expanded toolbar is incorrectly configured,
       // and stops at [data-alloy-tabstop] elements.
@@ -397,6 +392,19 @@ class RCEWrapper extends React.Component {
       // in https://github.com/tinymce/tinymce/blob/develop/modules/alloy/src/main/ts/ephox/alloy/ui/schema/SplitSlidingToolbarSchema.ts
       this._elementRef.current?.querySelectorAll('.tox-toolbar-overlord button[data-alloy-tabstop]').forEach(it => it.removeAttribute('data-alloy-tabstop'));
     };
+    /**
+     * Sets up selection saving and restoration logic.
+     *
+     * There are certain actions a user can take when the RCE is not focused that clear the selection inside the
+     * editor, such as invoking the Find feature of the browser. If the user then tries to insert content without
+     * going back to the editor, the content would be inserted at the top of the RCE, instead of where their cursor
+     * was.
+     *
+     * This method adds logic that saves and restores the selection to work around the issue.
+     *
+     * @private
+     */
+    // @ts-expect-error
     this._setupSelectionSaving = editor => {
       // @ts-expect-error
       let savedSelection = null;
@@ -455,6 +463,7 @@ class RCEWrapper extends React.Component {
       });
     };
     this.announcing = 0;
+    /* ********** autosave support *************** */
     this.initAutoSave = editor => {
       var _this$props$userCache;
       this.storage = new EncryptedStorage((_this$props$userCache = this.props.userCacheKey) !== null && _this$props$userCache !== void 0 ? _this$props$userCache : '');
@@ -489,6 +498,7 @@ class RCEWrapper extends React.Component {
         }
       }
     };
+    // remove any autosaved value that's too old
     this.cleanupAutoSave = (deleteAll = false) => {
       if (this.storage) {
         const expiry = deleteAll ? Date.now() : Date.now() - (this.props.autosave?.maxAge || 0);
@@ -504,6 +514,7 @@ class RCEWrapper extends React.Component {
         }
       }
     };
+    // @ts-expect-error
     this.restoreAutoSave = ans => {
       this.setState({
         confirmAutoSave: false
@@ -518,6 +529,7 @@ class RCEWrapper extends React.Component {
       // let the content be restored
       debounce(this.checkAccessibility, 1000)();
     };
+    // @ts-expect-error
     this.doAutoSave = (e, retry = false) => {
       if (this.storage) {
         const editor = this.mceInstance();
@@ -542,6 +554,7 @@ class RCEWrapper extends React.Component {
         }
       }
     };
+    /* *********** end autosave support *************** */
     this.onWordCountUpdate = e => {
       if (!this.editor) return;
       const shouldIgnore = countShouldIgnore(this.editor, 'body', 'words');
@@ -554,6 +567,7 @@ class RCEWrapper extends React.Component {
         } else return null;
       });
     };
+    // @ts-expect-error
     this.onNodeChange = e => {
       // This is basically copied out of the tinymce silver theme code for the status bar
       const path = e.parents.filter(p => p.nodeName !== 'BR' && !p.getAttribute('data-mce-bogus') && p.getAttribute('data-mce-type') !== 'bookmark')
@@ -589,7 +603,9 @@ class RCEWrapper extends React.Component {
           height: newHeight
         });
         // play nice and send the same event that the silver theme would send
-        editor.fire('ResizeEditor');
+        editor.fire('ResizeEditor', {
+          deltaY: coordinates.deltaY
+        });
       }
     };
     this.onA11yChecker = triggerElementId => {
@@ -705,13 +721,6 @@ class RCEWrapper extends React.Component {
         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');
-      if (header) {
-        header.setAttribute('aria-hidden', focusable ? 'false' : 'true');
-      }
-    };
     this.handleTextareaChange = () => {
       if (this.isHidden()) {
         this.setCode(this.textareaValue());
@@ -737,6 +746,9 @@ class RCEWrapper extends React.Component {
         };
       });
     };
+    /**
+     * Used for reseting the value during tests
+     */
     this.resetAlertId = () => {
       if (this.state.messages.length > 0) {
         throw new Error('There are messages currently, you cannot reset when they are non-zero');
@@ -828,6 +840,7 @@ class RCEWrapper extends React.Component {
       this._handleFullscreenResize();
     });
     this.AIToolsTray = undefined;
+    this._effectiveContainingContext = normalizeContainingContext(this.props.trayProps?.containingContext);
   }
 
   // when the RCE is put into fullscreen we need to move the div
@@ -853,7 +866,6 @@ class RCEWrapper extends React.Component {
       new_math_equation_handling = false,
       explicit_latex_typesetting = false,
       rce_transform_loaded_content = false,
-      media_links_use_attachment_id = false,
       rce_find_replace = false,
       file_verifiers_for_quiz_links = false,
       consolidated_media_player = false
@@ -862,7 +874,6 @@ class RCEWrapper extends React.Component {
       new_math_equation_handling,
       explicit_latex_typesetting,
       rce_transform_loaded_content,
-      media_links_use_attachment_id,
       file_verifiers_for_quiz_links,
       rce_find_replace,
       consolidated_media_player
@@ -1119,8 +1130,7 @@ class RCEWrapper extends React.Component {
     if (this.editor) {
       return this.editor;
     }
-    const editors = this.props.tinymce.editors || [];
-    return editors.filter(ed => ed.id === this.props.textareaId)[0];
+    return this.props.tinymce.get(this.props.textareaId);
   }
 
   // @ts-expect-error
@@ -1195,9 +1205,6 @@ class RCEWrapper extends React.Component {
       document[FS_EXIT]();
     }
   }
-
-  // @ts-expect-error
-
   _getStatusBarHeight() {
     // the height prop is the height of the editor and does not include
     // the status bar. we'll need this later.
@@ -1343,9 +1350,6 @@ class RCEWrapper extends React.Component {
       }, ASYNC_FOCUS_TIMEOUT);
     }
   }
-
-  // @ts-expect-error
-
   // @ts-expect-error
   call(methodName, ...args) {
     // since exists? has a ? and cant be a regular function just return true
@@ -1356,28 +1360,6 @@ class RCEWrapper extends React.Component {
     // @ts-expect-error
     return this[methodName](...args);
   }
-
-  /**
-   * Fix keyboard navigation in the expanded toolbar
-   *
-   * NOTE: This is a workaround for https://github.com/tinymce/tinymce/issues/8618
-   *       and should be removed once that issue is resolved and the tinymce dependency is updated to include it.
-   */
-
-  /**
-   * Sets up selection saving and restoration logic.
-   *
-   * There are certain actions a user can take when the RCE is not focused that clear the selection inside the
-   * editor, such as invoking the Find feature of the browser. If the user then tries to insert content without
-   * going back to the editor, the content would be inserted at the top of the RCE, instead of where their cursor
-   * was.
-   *
-   * This method adds logic that saves and restores the selection to work around the issue.
-   *
-   * @private
-   */
-  // @ts-expect-error
-
   announceContextToolbars(editor) {
     editor.on('NodeChange', () => {
       const node = editor.selection.getNode();
@@ -1416,14 +1398,21 @@ class RCEWrapper extends React.Component {
         this.announcing = 0;
       }
     });
+    editor.on('ResizeEditor', ({
+      deltaY
+    }) => {
+      if (!deltaY) return;
+      if (deltaY < 0) {
+        this.setState({
+          announcement: formatMessage('The height of Rich Content Area is decreased.')
+        });
+      } else {
+        this.setState({
+          announcement: formatMessage('The height of Rich Content Area is increased.')
+        });
+      }
+    });
   }
-
-  /* ********** autosave support *************** */
-
-  // remove any autosaved value that's too old
-
-  // @ts-expect-error
-
   getAutoSaved(key) {
     let autosaved = null;
     try {
@@ -1448,17 +1437,9 @@ class RCEWrapper extends React.Component {
     return this.props.autosave?.enabled && editorVisible && document.querySelectorAll('.rce-wrapper').length === 1 && storageAvailable();
   }
   get autoSaveKey() {
-    // @ts-expect-error
-    const userId = this.props.trayProps?.containingContext.userId;
+    const userId = this._effectiveContainingContext?.userId || '-';
     return `rceautosave:${userId}${window.location.href}:${this.props.textareaId}`;
   }
-
-  // @ts-expect-error
-
-  /* *********** end autosave support *************** */
-
-  // @ts-expect-error
-
   componentWillUnmount() {
     if (this.state.shouldShowEditor) {
       window.clearTimeout(this.blurTimer);
@@ -1679,11 +1660,6 @@ class RCEWrapper extends React.Component {
         this.mceInstance().hide();
     }
   }
-
-  /**
-   * Used for reseting the value during tests
-   */
-
   renderHtmlEditor() {
     // the div keeps the editor from collapsing while the code editor is downloaded
     return /*#__PURE__*/React.createElement(Suspense, {
@@ -1732,7 +1708,12 @@ class RCEWrapper extends React.Component {
         }
       });
     }
-    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, this.props.ai_text_tools);
+    const statusBarOptions = {
+      aiTextTools: this.props.ai_text_tools,
+      isDesktop: tinymce.Env.deviceType.isDesktop(),
+      a11yResizers: !!this.props.features?.rce_a11y_resize
+    };
+    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, statusBarOptions);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, this.style.css), /*#__PURE__*/React.createElement(StoreProvider, {
       jwt: this.props.trayProps?.jwt,
       refreshToken: this.props.trayProps?.refreshToken,
@@ -1754,7 +1735,7 @@ class RCEWrapper extends React.Component {
         } : undefined,
         onFocus: this.handleFocusRCE,
         onBlur: this.handleBlurRCE
-      }, this.state.shouldShowOnFocusButton && /*#__PURE__*/React.createElement(ShowOnFocusButton, {
+      }, this.state.shouldShowOnFocusButton && tinymce.Env.deviceType.isDesktop() && /*#__PURE__*/React.createElement(ShowOnFocusButton, {
         id: `show-on-focus-btn-${this.id}`,
         onClick: this.openKBShortcutModal,
         margin: "xx-small",
@@ -1820,7 +1801,7 @@ class RCEWrapper extends React.Component {
         disabledPlugins: this.pluginsToExclude,
         features: statusBarFeatures,
         onAI: this.handleAIClick
-      }), this.props.trayProps?.containingContext && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
+      }), this._effectiveContainingContext && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
         mountNode: instuiPopupMountNodeFn,
         key: this.id,
         canvasOrigin: this.getCanvasUrl(),
@@ -1829,7 +1810,9 @@ class RCEWrapper extends React.Component {
         onTrayClosing: this.handleContentTrayClosing,
         use_rce_icon_maker: this.props.use_rce_icon_maker
       }, trayProps, {
+        containingContext: this._effectiveContainingContext
         // @ts-expect-error
+        ,
         storeProps: storeProps
       })), /*#__PURE__*/React.createElement(KeyboardShortcutModal, {
         onExited: this.KBShortcutModalExited,
@@ -1858,7 +1841,10 @@ class RCEWrapper extends React.Component {
         open: this.state.confirmAutoSave,
         onNo: () => this.restoreAutoSave(false),
         onYes: () => this.restoreAutoSave(true)
-      })) : null, /*#__PURE__*/React.createElement(Alert, {
+      })) : null, this.state.announcement &&
+      /*#__PURE__*/
+      // @ts-expect-error
+      React.createElement(Alert, {
         screenReaderOnly: true,
         liveRegion: this.props.liveRegion
       }, this.state.announcement));
@@ -1869,8 +1855,7 @@ RCEWrapper.propTypes = {
   ai_text_tools: _pt.bool,
   autosave: _pt.shape({
     enabled: _pt.bool,
-    maxAge: _pt.number,
-    interval: _pt.number
+    maxAge: _pt.number
   }),
   canvasOrigin: _pt.string,
   defaultContent: _pt.string,

package/es/rce/RCEWrapperProps.d.ts

@@ -170,6 +170,6 @@ export declare const rceWrapperPropTypes: {
         maxMruTools: PropTypes.Requireable<number>;
     }>>;
     ai_text_tools: PropTypes.Requireable<boolean>;
-    variant: PropTypes.Requireable<"full" | "lite" | "text-only" | "text-block">;
+    variant: PropTypes.Requireable<"full" | "lite" | "text-only" | "text-block" | "block-content-editor">;
 };
 export type RCEWrapperProps = PropTypes.InferProps<typeof rceWrapperPropTypes>;

package/es/rce/ShowOnFocusButton/index.js

@@ -26,8 +26,10 @@ import React, { Component } from 'react';
 import { func, node, oneOfType, string } from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
 const hideStyle = {
-  position: 'absolute',
-  left: '-9999px'
+  opacity: 0,
+  width: 0,
+  height: 0,
+  overflow: 'hidden'
 };
 export default class ShowOnFocusButton extends Component {
   constructor(...args) {

package/es/rce/StatusBar.js

@@ -28,7 +28,7 @@ import { Badge } from '@instructure/ui-badge';
 import { InstUISettingsProvider } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
 import { SVGIcon } from '@instructure/ui-svg-images';
-import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine } from '@instructure/ui-icons';
+import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine, IconAddLine, IconCheckMarkIndeterminateLine } from '@instructure/ui-icons';
 import formatMessage from '../format-message';
 import ResizeHandle from './ResizeHandle';
 import { FS_ENABLED } from '../util/fullscreenHelpers';
@@ -62,7 +62,7 @@ StatusBar.propTypes = {
   onAI: func
 };
 StatusBar.defaultProps = {
-  a11yBadgeColor: '#0374B5',
+  a11yBadgeColor: '#2B7ABC',
   a11yErrorsCount: 0,
   disabledPlugins: []
 };
@@ -80,16 +80,15 @@ function renderPathString({
 }
 function emptyTagIcon() {
   return /*#__PURE__*/React.createElement(SVGIcon, {
-    viewBox: "0 0 24 24",
-    fontSize: "24px"
+    viewBox: "0 0 1920 1920",
+    width: "1em",
+    height: "1em"
   }, /*#__PURE__*/React.createElement("g", {
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("text", {
-    textAnchor: "middle",
-    x: "12px",
-    y: "18px",
-    fontSize: "16"
-  }, "</>")));
+    role: "presentation",
+    transform: "scale(28.7) translate(0, 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 29.61L0 25.51L23.71 15.50L23.71 19.87L4.91 27.59L23.71 35.38L23.71 39.75L0 29.61ZM26.46 45.87L36.84 8.86L40.36 8.86L30.00 45.87L26.46 45.87ZM66.80 29.61L43.09 39.75L43.09 35.38L61.87 27.59L43.09 19.87L43.09 15.50L66.80 25.51L66.80 29.61Z"
+  })));
 }
 function findFocusable(el) {
   // eslint-disable-next-line react/no-find-dom-node
@@ -287,10 +286,15 @@ export default function StatusBar(props) {
       title: formatMessage('View word and character counts')
     }, wordCount)));
   }
-  function renderSection3(html_view, fullscreen, resize_handle) {
+  function renderSection3({
+    html_view,
+    fullscreen,
+    resize_handle,
+    a11y_resize_handlers
+  }) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: css(styles.separator)
-    }), html_view && renderToggleHtml(), fullscreen && renderFullscreen(), resize_handle && renderResizeHandle());
+    }), html_view && renderToggleHtml(), a11y_resize_handlers && renderAccessibleResizeHandle(), fullscreen && renderFullscreen(), resize_handle && renderResizeHandle());
   }
   function descMsg() {
     return preferredHtmlEditor() === RAW_HTML_EDITOR_VIEW ? formatMessage('Shift-O to open the pretty html editor.') : formatMessage('The pretty html editor is not keyboard accessible. Press Shift O to open the raw html editor.');
@@ -351,7 +355,11 @@ export default function StatusBar(props) {
       screenReaderLabel: fullscreen,
       withBackground: false,
       withBorder: false
-    }, props.rceIsFullscreen ? /*#__PURE__*/React.createElement(IconExitFullScreenLine, null) : /*#__PURE__*/React.createElement(IconFullScreenLine, null));
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: '0.9rem'
+      }
+    }, props.rceIsFullscreen ? /*#__PURE__*/React.createElement(IconExitFullScreenLine, null) : /*#__PURE__*/React.createElement(IconFullScreenLine, null)));
   }
   function renderResizeHandle() {
     if (props.rceIsFullscreen) return null;
@@ -364,10 +372,43 @@ export default function StatusBar(props) {
       }
     });
   }
+  function renderAccessibleResizeHandle() {
+    if (props.rceIsFullscreen) return null;
+    const increaseBtnId = 'rce-resize-increase-btn';
+    const decreaseBtnId = 'rce-resize-decrease-btn';
+    const handleResize = deltaY => {
+      props.onResize(null, {
+        deltaY,
+        deltaX: 0
+      });
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
+      "data-btn-id": increaseBtnId,
+      "data-testid": increaseBtnId,
+      color: "secondary",
+      title: formatMessage('Increase Rich Content Area'),
+      tabIndex: tabIndexForBtn(increaseBtnId),
+      onFocus: () => setFocusedBtnId(increaseBtnId),
+      withBackground: false,
+      withBorder: false,
+      onClick: () => handleResize(5)
+    }, /*#__PURE__*/React.createElement(IconAddLine, null)), /*#__PURE__*/React.createElement(IconButton, {
+      "data-btn-id": decreaseBtnId,
+      "data-testid": decreaseBtnId,
+      color: "secondary",
+      title: formatMessage('Decrease Rich Content Area'),
+      tabIndex: tabIndexForBtn(decreaseBtnId),
+      onFocus: () => setFocusedBtnId(decreaseBtnId),
+      withBackground: false,
+      withBorder: false,
+      onClick: () => handleResize(-5)
+    }, /*#__PURE__*/React.createElement(IconCheckMarkIndeterminateLine, null)));
+  }
   const flexJustify = isHtmlView() ? 'end' : 'start';
   const html_view = isFeature('html_view') && isAvailable('instructure_html_view');
   const fullscreen = isFeature('fullscreen') && isAvailable('instructure_fullscreen');
   const resize_handle = isFeature('resize_handle');
+  const a11y_resize_handlers = isFeature('a11y_resize_handlers');
   return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
     theme: {
       componentOverrides: {
@@ -388,7 +429,12 @@ export default function StatusBar(props) {
   }, isHtmlView() ? renderHtmlEditorMessage() : renderPath()), /*#__PURE__*/React.createElement(Flex.Item, {
     role: "toolbar",
     title: formatMessage('Editor Status Bar')
-  }, renderIconButtons(), isFeature('word_count') && isAvailable('instructure_wordcount') && renderWordCount(), (html_view || fullscreen || resize_handle) && renderSection3(html_view, fullscreen, resize_handle))));
+  }, renderIconButtons(), isFeature('word_count') && isAvailable('instructure_wordcount') && renderWordCount(), (html_view || fullscreen || resize_handle) && renderSection3({
+    html_view,
+    fullscreen,
+    resize_handle,
+    a11y_resize_handlers
+  }))));
 }
 const styles = StyleSheet.create({
   separator: {

package/es/rce/alertHandler.js

@@ -24,6 +24,12 @@
  */
 export class AlertHandler {
   constructor(alertFunc) {
+    /**
+     * Calls the registered alertFunc assuming one has been set, otherwise
+     * it throws.
+     *
+     * @memberof AlertHandler
+     */
     this.handleAlert = alert => {
       if (this.alertFunc == null) {
         throw new Error('Tried to alert without alertFunc being set first');
@@ -32,12 +38,5 @@ export class AlertHandler {
     };
     this.alertFunc = alertFunc;
   }
-
-  /**
-   * Calls the registered alertFunc assuming one has been set, otherwise
-   * it throws.
-   *
-   * @memberof AlertHandler
-   */
 }
 export default new AlertHandler();

package/es/rce/plugins/instructure-ui-icons/plugin.js

@@ -112,13 +112,13 @@ tinymce.PluginManager.add('instructure-ui-icons', function (editor) {
     embed: {
       src: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7647 5.21417C13.6694 5.21417 13.5773 5.23988 13.482 5.24631C12.8329 3.36281 11.0795 2 9 2C6.53506 2 4.52435 3.91029 4.28294 6.34234C4.09341 6.31127 3.90176 6.28556 3.70588 6.28556C1.66235 6.28556 0 7.96764 0 10.0354C0 12.1032 1.66235 13.7853 3.70588 13.7853L5 13.7853V12.7139L3.70588 12.7139C2.24682 12.7139 1.05882 11.5129 1.05882 10.0354C1.05882 8.55798 2.24682 7.35695 3.70588 7.35695C4.40259 7.35695 5.06012 7.62908 5.55882 8.12192L6.29894 7.35588C6.00565 7.0666 5.66788 6.84483 5.30894 6.66912C5.38941 4.67419 7.00835 3.07139 9 3.07139C11.0435 3.07139 12.7059 4.75347 12.7059 6.82126C12.7059 7.1491 12.6635 7.47266 12.582 7.78658L13.6059 8.06085C13.7107 7.65801 13.7647 7.24124 13.7647 6.82126C13.7647 6.64019 13.7308 6.4677 13.7118 6.29199C13.7298 6.29199 13.7467 6.28556 13.7647 6.28556C15.516 6.28556 16.9412 7.72765 16.9412 9.49973C16.9412 11.2718 15.516 12.7139 13.7647 12.7139L13 12.7139V13.7853L13.7647 13.7853C16.1005 13.7853 18 11.8632 18 9.49973C18 7.13624 16.1005 5.21417 13.7647 5.21417Z" fill="#2B3B46"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.72039 10.6479L8.3603 11.1813L6.75882 13.1025L8.36029 15.0239L7.72038 15.5573L5.6748 13.1024L7.72039 10.6479ZM10.2802 10.6479L12.3258 13.1024L10.2802 15.5573L9.64031 15.0239L11.2418 13.1025L9.6403 11.1813L10.2802 10.6479Z" fill="#2D3B45"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.72039 10.6479L8.3603 11.1813L6.75882 13.1025L8.36029 15.0239L7.72038 15.5573L5.6748 13.1024L7.72039 10.6479ZM10.2802 10.6479L12.3258 13.1024L10.2802 15.5573L9.64031 15.0239L11.2418 13.1025L9.6403 11.1813L10.2802 10.6479Z" fill="#273540"/>
       </svg>`
     },
     buttons: {
       src: `
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-          <g fill="#2D3B45" clip-path="url(#clip0)">
+          <g fill="#273540" clip-path="url(#clip0)">
             <path fill-rule="evenodd" d="M.999993 11l.000001 6H6.99999v-6H.999993zm-.99999933 7H7.99999v-8H-.00000668l3.5e-7 8zM4 7c1.65685 0 3-1.34315 3-3S5.65685 1 4 1 1 2.34315 1 4s1.34315 3 3 3zm0 1c2.20914 0 4-1.79086 4-4S6.20914 0 4 0-3e-7 1.79086-3e-7 4 1.79086 8 4 8z" clip-rule="evenodd"/>
             <path d="M12.5 10h1v8h-1v-8z"/>
             <path d="M17 13.5v1H9v-1h8z"/>

package/es/rce/plugins/instructure_equation/EquationEditorModal/index.d.ts

@@ -13,7 +13,7 @@ declare class EquationEditorModal extends React.Component<any, any, any> {
     executeCommand: (cmd: any, advancedCmd: any) => void;
     handleModalCancel: () => void;
     handleModalDone: () => void;
-    renderMathInAdvancedPreview: import("@instructure/debounce").Debounced;
+    renderMathInAdvancedPreview: import("@instructure/debounce").Debounced<() => void>;
     setPreviewElementContent(): void;
     toggleAdvanced: () => void;
     toggleAndUpdatePreference: () => void;

package/es/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -49,6 +49,9 @@ export default class EquationEditorModal extends Component {
     };
     this.previewElement = /*#__PURE__*/React.createRef();
     this.advancedEditor = /*#__PURE__*/React.createRef();
+    // ********* //
+    // Callbacks //
+    // ********* //
     this.executeCommand = (cmd, advancedCmd) => {
       if (this.state.advanced) {
         const insertionText = advancedCmd || cmd;
@@ -123,6 +126,9 @@ export default class EquationEditorModal extends Component {
     this.handleFieldRef = node => {
       this.mathField = node;
     };
+    // ******************* //
+    // Rendering functions //
+    // ******************* //
     this.renderFooter = () => {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
         "data-testid": "equation-editor-modal-cancel",
@@ -247,11 +253,6 @@ export default class EquationEditorModal extends Component {
     const normalizedLatex = latex.replace(/\s+/, '');
     return containsAdvancedSyntax(normalizedLatex);
   }
-
-  // ********* //
-  // Callbacks //
-  // ********* //
-
   setPreviewElementContent() {
     if (this.state.workingFormula) {
       this.renderMathInAdvancedPreview();
@@ -259,11 +260,6 @@ export default class EquationEditorModal extends Component {
       this.previewElement.current.innerHTML = '';
     }
   }
-
-  // ******************* //
-  // Rendering functions //
-  // ******************* //
-
   componentDidMount() {
     this.registerBasicEditorListener();
     this.setPreviewElementContent();

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.d.ts

@@ -1,9 +1,9 @@
 export default Course;
-declare function Course({ dispatch, onChange, onLoading, onLoaded, canvasOrigin }: {
-    dispatch: any;
-    onChange: any;
-    onLoading: any;
-    onLoaded: any;
+declare function Course({ dispatch, onChange, onLoading, onLoaded, canvasOrigin, }: {
+    dispatch?: (() => void) | undefined;
+    onChange?: (() => void) | undefined;
+    onLoading?: (() => void) | undefined;
+    onLoaded?: (() => void) | undefined;
     canvasOrigin: any;
 }): React.JSX.Element;
 declare namespace Course {
@@ -14,16 +14,6 @@ declare namespace Course {
         let onLoaded: PropTypes.Requireable<(...args: any[]) => any>;
         let canvasOrigin: PropTypes.Validator<string>;
     }
-    namespace defaultProps {
-        export function dispatch_1(): void;
-        export { dispatch_1 as dispatch };
-        export function onChange_1(): void;
-        export { onChange_1 as onChange };
-        export function onLoading_1(): void;
-        export { onLoading_1 as onLoading };
-        export function onLoaded_1(): void;
-        export { onLoaded_1 as onLoaded };
-    }
 }
 import React from 'react';
 import PropTypes from 'prop-types';