@instructure/canvas-rce 5.13.2 → 5.13.6

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",

package/es/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -160,7 +160,9 @@ export function IconMakerTray(_ref) {
 
   const onClose = event => {
     if (shouldIgnoreClose(event === null || event === void 0 ? void 0 : event.target, editor === null || editor === void 0 ? void 0 : editor.id)) return;
-    if ((statusRef === null || statusRef === void 0 ? void 0 : statusRef.current) === statuses.LOADING) return; // RCE already uses browser's confirm dialog for unsaved changes
+    if ((statusRef === null || statusRef === void 0 ? void 0 : statusRef.current) === statuses.LOADING) return; // Uploading an image creates a modal on the page. If that modal is open, we don't want to close the tray
+
+    if (!!hasOpenModal()) return; // RCE already uses browser's confirm dialog for unsaved changes
     // Its use here in the Icon Maker tray keeps that consistency
     // eslint-disable-next-line no-restricted-globals, no-alert
 
@@ -171,6 +173,8 @@ export function IconMakerTray(_ref) {
     setIsOpen(false);
   };
 
+  const hasOpenModal = () => document.querySelector('[data-cid="Modal"]');
+
   const isLoading = () => status === statuses.LOADING;
 
   const onKeyDown = event => {
@@ -304,6 +308,7 @@ export function IconMakerTray(_ref) {
     onDismiss: onClose,
     onUnmount: onUnmount,
     mountNode: mountNode,
+    shouldCloseOnDocumentClick: false,
     renderHeader: () => renderHeader(title, settings, onKeyDown, handleAlertDismissal, onClose),
     renderBody: () => renderBody(settings, dispatch, editor, editing, !replaceAll, nameRef, canvasOrigin, isLoading),
     renderFooter: () => renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef, isModified.current),

package/es/rce/plugins/instructure_rce_external_tools/RceToolWrapper.js

@@ -21,20 +21,20 @@ import { instUiIconsArray } from '../../../util/instui-icon-helper'; // @ts-igno
 
 import { IconLtiSolid } from '@instructure/ui-icons/es/svg';
 export function externalToolsForToolbar(tools) {
-  const favorited = tools.filter(it => it.favorite).slice(0, 2) || []; // There's no limit to always on apps, but in practice there shouldn't be more than 2 as well.
-
-  const alwaysOn = tools.filter(it => it.always_on) || [];
-  const set = new Map(); // Remove possible overlaps between favorited and alwaysOn, otherwise
+  // Limit of not on_by_default but favorited tools is 2
+  const favorited = tools.filter(it => it.favorite && !it.on_by_default).slice(0, 2) || [];
+  const onByDefault = tools.filter(it => it.on_by_default && it.favorite) || [];
+  const set = new Map(); // Remove possible overlaps between favorited and onByDefault, otherwise
   // we'd have duplicate buttons in the toolbar.
 
-  for (const toolInfo of favorited.concat(alwaysOn)) {
+  for (const toolInfo of favorited.concat(onByDefault)) {
     set.set(toolInfo.id, toolInfo);
   }
 
   return Array.from(set.values()).sort((a, b) => {
-    if (a.always_on && !b.always_on) {
+    if (a.on_by_default && !b.on_by_default) {
       return -1;
-    } else if (!a.always_on && b.always_on) {
+    } else if (!a.on_by_default && b.on_by_default) {
       return 1;
     } else {
       // This *should* always be a string, but there might be cases where it isn't,
@@ -107,8 +107,8 @@ export class RceToolWrapper {
     return this.toolInfo.use_tray;
   }
 
-  get always_on() {
-    return this.toolInfo.always_on;
+  get on_by_default() {
+    return this.toolInfo.on_by_default;
   }
 
   asToolbarButton() {

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialog.js

@@ -131,6 +131,26 @@ export default class ExternalToolDialog extends React.Component {
     this.handleInfoAlertBlur = () => this.setState({
       infoAlert: null
     });
+
+    this.calcIFrameHeight = () => {
+      var _this$state$button, _this$state$button2;
+
+      if ((_this$state$button = this.state.button) !== null && _this$state$button !== void 0 && _this$state$button.use_tray) {
+        return '100%';
+      }
+
+      const toolDefinedHeight = (_this$state$button2 = this.state.button) === null || _this$state$button2 === void 0 ? void 0 : _this$state$button2.height;
+      const iFrameHeight = toolDefinedHeight !== null && toolDefinedHeight !== void 0 ? toolDefinedHeight : Math.max(Math.min(window.innerHeight - 100, 550), 100);
+      const modalMaxHeight = '95';
+      const modalHeaderHeightWithPadding = '5.5rem';
+      const complexHeightWithDVH = `min(${iFrameHeight}px, calc(${modalMaxHeight}dvh - ${modalHeaderHeightWithPadding}))`;
+
+      if (CSS.supports('height', complexHeightWithDVH)) {
+        return complexHeightWithDVH;
+      } else {
+        return `${iFrameHeight}px`;
+      }
+    };
   }
 
   open(button) {
@@ -202,12 +222,11 @@ export default class ExternalToolDialog extends React.Component {
   }
 
   render() {
-    var _state$button, _props$env$rceWrapper, _props$env$rceWrapper2, _state$button$title, _state$button2, _state$button3, _state$button$width, _state$button4, _state$button5, _state$button$height, _state$button6;
+    var _state$button, _props$env$rceWrapper, _props$env$rceWrapper2, _state$button$title, _state$button2, _state$button3, _state$button$width, _state$button4;
 
     const state = this.state;
     const props = this.props;
     const label = formatMessage('Embed content from External Tool');
-    const frameHeight = Math.max(Math.min(window.innerHeight - 100, 550), 100);
     const Overlay = (_state$button = state.button) !== null && _state$button !== void 0 && _state$button.use_tray ? ExternalToolDialogTray : ExternalToolDialogModal;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
       ref: this.formRef,
@@ -272,8 +291,8 @@ export default class ExternalToolDialog extends React.Component {
       src: "",
       id: "external_tool_button_frame",
       style: {
+        height: this.calcIFrameHeight(),
         width: (_state$button3 = state.button) !== null && _state$button3 !== void 0 && _state$button3.use_tray ? '100%' : (_state$button$width = (_state$button4 = state.button) === null || _state$button4 === void 0 ? void 0 : _state$button4.width) !== null && _state$button$width !== void 0 ? _state$button$width : 800,
-        height: (_state$button5 = state.button) !== null && _state$button5 !== void 0 && _state$button5.use_tray ? '100%' : (_state$button$height = (_state$button6 = state.button) === null || _state$button6 === void 0 ? void 0 : _state$button6.height) !== null && _state$button$height !== void 0 ? _state$button$height : frameHeight,
         border: '0',
         display: 'block',
         visibility: state.iframeLoaded ? 'visible' : 'hidden'
@@ -288,6 +307,9 @@ export default class ExternalToolDialog extends React.Component {
       ,
       onFocus: this.handleInfoAlertFocus,
       onBlur: this.handleInfoAlertBlur,
+      style: this.afterInfoAlertRef.current != null && state.infoAlert === this.afterInfoAlertRef.current ? {} : {
+        bottom: '0'
+      },
       className: this.afterInfoAlertRef.current != null && state.infoAlert === this.afterInfoAlertRef.current ? '' : 'screenreader-only'
     }, /*#__PURE__*/React.createElement(Alert, {
       margin: "small"

package/es/rce/plugins/instructure_rce_external_tools/plugin.js

@@ -68,7 +68,7 @@ function registerFavoriteAppsToolbarButtons(editor) {
 }
 
 function registerAppsToolbarButton(editor) {
-  const tooltip = formatMessage('Apps');
+  const tooltip = 'apps-temp';
   editor.ui.registry.addMenuButton('lti_mru_button', {
     tooltip,
     icon: 'lti',
@@ -79,6 +79,9 @@ function registerAppsToolbarButton(editor) {
     },
 
     onSetup(_api) {
+      const e = document.querySelector("button[title='apps-temp']");
+      e === null || e === void 0 ? void 0 : e.setAttribute('title', formatMessage('Apps'));
+      e === null || e === void 0 ? void 0 : e.setAttribute('id', 'plug-apps-button');
       return () => undefined;
     }
 

package/es/rce/plugins/shared/CanvasContentTray.js

@@ -15,23 +15,24 @@
  * 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, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { bool, element, func, instanceOf, oneOfType, shape, string } from 'prop-types';
 import { Tray } from '@instructure/ui-tray';
 import { CloseButton, Button } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
-import { Spinner } from '@instructure/ui-spinner';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import ErrorBoundary from './ErrorBoundary';
 import Bridge from '../../../bridge/Bridge';
 import formatMessage from '../../../format-message';
-import Filter, { useFilterSettings } from './Filter';
+import Filter from './Filter';
+import { useFilterSettings } from './useFilterSettings';
 import { getTrayHeight } from './trayUtils';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { getLinkContentFromEditor } from './ContentSelection';
 import { LinkDisplay } from './LinkDisplay';
 import { showFlashAlert } from '../../../common/FlashAlert';
+import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel, isLoading } from './canvasContentUtils';
 /**
  * Returns the translated tray label
  * @param {string} contentType - The type of content showing on tray
@@ -71,160 +72,6 @@ function getTrayLabel(contentType, contentSubtype, contextType) {
     // Shouldn't ever get here
   }
 }
-
-const thePanels = {
-  icon_maker_icons: /*#__PURE__*/React.lazy(() => import('../instructure_icon_maker/components/SavedIconMakerList')),
-  links: /*#__PURE__*/React.lazy(() => import('../instructure_links/components/LinksPanel')),
-  images: /*#__PURE__*/React.lazy(() => import('../instructure_image/Images')),
-  documents: /*#__PURE__*/React.lazy(() => import('../instructure_documents/components/DocumentsPanel')),
-  media: /*#__PURE__*/React.lazy(() => import('../instructure_record/MediaPanel')),
-  all: /*#__PURE__*/React.lazy(() => import('./RceFileBrowser')),
-  unknown: /*#__PURE__*/React.lazy(() => import('./UnknownFileTypePanel'))
-}; // Returns a Suspense wrapped lazy loaded component
-// pulled from useLazy's cache
-
-function DynamicPanel(props) {
-  let key = '';
-
-  if (props.contentType === 'links') {
-    key = 'links';
-  } else {
-    key = props.contentSubtype in thePanels ? props.contentSubtype : 'unknown';
-  }
-
-  const Component = thePanels[key];
-  return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement(Spinner, {
-      renderTitle: renderLoading,
-      size: "large"
-    })
-  }, /*#__PURE__*/React.createElement(Component, props));
-}
-
-function renderLoading() {
-  return formatMessage('Loading');
-}
-
-const FILTER_SETTINGS_BY_PLUGIN = {
-  user_documents: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_documents: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_documents: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  user_images: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_images: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_images: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  user_media: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_media: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_media: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_links: {
-    contextType: 'course',
-    contentType: 'links',
-    contentSubtype: 'all',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_link_edit: {
-    contextType: 'course',
-    contentType: 'links',
-    contentSubtype: 'edit',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_links: {
-    contextType: 'group',
-    contentType: 'links',
-    contentSubtype: 'all',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  list_icon_maker_icons: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: ICON_MAKER_ICONS,
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  all: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'all',
-    sortValue: 'alphabetical',
-    sortDir: 'asc',
-    searchString: ''
-  }
-};
-
-function isLoading(sprops) {
-  var _sprops$collections$a, _sprops$collections$a2, _sprops$collections$d, _sprops$collections$m, _sprops$collections$q, _sprops$collections$w, _sprops$documents$cou, _sprops$documents$use, _sprops$documents$gro, _sprops$media$course, _sprops$media$user, _sprops$media$group, _sprops$all_files;
-
-  return ((_sprops$collections$a = sprops.collections.announcements) === null || _sprops$collections$a === void 0 ? void 0 : _sprops$collections$a.isLoading) || ((_sprops$collections$a2 = sprops.collections.assignments) === null || _sprops$collections$a2 === void 0 ? void 0 : _sprops$collections$a2.isLoading) || ((_sprops$collections$d = sprops.collections.discussions) === null || _sprops$collections$d === void 0 ? void 0 : _sprops$collections$d.isLoading) || ((_sprops$collections$m = sprops.collections.modules) === null || _sprops$collections$m === void 0 ? void 0 : _sprops$collections$m.isLoading) || ((_sprops$collections$q = sprops.collections.quizzes) === null || _sprops$collections$q === void 0 ? void 0 : _sprops$collections$q.isLoading) || ((_sprops$collections$w = sprops.collections.wikiPages) === null || _sprops$collections$w === void 0 ? void 0 : _sprops$collections$w.isLoading) || ((_sprops$documents$cou = sprops.documents.course) === null || _sprops$documents$cou === void 0 ? void 0 : _sprops$documents$cou.isLoading) || ((_sprops$documents$use = sprops.documents.user) === null || _sprops$documents$use === void 0 ? void 0 : _sprops$documents$use.isLoading) || ((_sprops$documents$gro = sprops.documents.group) === null || _sprops$documents$gro === void 0 ? void 0 : _sprops$documents$gro.isLoading) || ((_sprops$media$course = sprops.media.course) === null || _sprops$media$course === void 0 ? void 0 : _sprops$media$course.isLoading) || ((_sprops$media$user = sprops.media.user) === null || _sprops$media$user === void 0 ? void 0 : _sprops$media$user.isLoading) || ((_sprops$media$group = sprops.media.group) === null || _sprops$media$group === void 0 ? void 0 : _sprops$media$group.isLoading) || ((_sprops$all_files = sprops.all_files) === null || _sprops$all_files === void 0 ? void 0 : _sprops$all_files.isLoading);
-}
 /**
  * This component is used within various plugins to handle loading in content
  * from Canvas.  It is essentially the main component.
@@ -533,7 +380,8 @@ function requiredWithoutSource(props, propName, componentName) {
   if (props.source == null && props[propName] == null) {
     throw new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`${props[propName]}\`.`);
   }
-}
+} // Changes made here may need to be reflected in the trayProps type in CanvasContentPanel
+
 
 const trayPropsMap = {
   canUploadFiles: bool.isRequired,

package/es/rce/plugins/shared/ContentSelection.js

@@ -75,7 +75,7 @@ export function asLink($element, editor) {
   const contentType = $link.getAttribute('data-course-type');
   const fileName = $link.getAttribute('title');
   const published = $link.getAttribute('data-published') === 'true';
-  const isPreviewable = $link.hasAttribute('data-canvas-previewable') || $link.classList.contains('instructure_scribd_file'); // needed to cover docs linked while there was a bug didn't add the data attr.
+  const isPreviewable = $link.getAttribute('data-canvas-previewable') === 'true' || $link.classList.contains('instructure_scribd_file'); // needed to cover docs linked while there was a bug didn't add the data attr.
 
   return {
     $element: $link,

package/es/rce/plugins/shared/Filter.js

@@ -26,23 +26,6 @@ import { IconButton } from '@instructure/ui-buttons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { IconLinkLine, IconFolderLine, IconImageLine, IconDocumentLine, IconAttachMediaLine, IconSearchLine, IconXLine } from '@instructure/ui-icons';
-const DEFAULT_FILTER_SETTINGS = {
-  contentSubtype: 'all',
-  contentType: 'links',
-  sortValue: 'date_added',
-  searchString: ''
-};
-export function useFilterSettings(default_settings) {
-  const [filterSettings, setFilterSettings] = useState(default_settings || DEFAULT_FILTER_SETTINGS);
-
-  function updateFilterSettings(nextSettings) {
-    setFilterSettings({ ...filterSettings,
-      ...nextSettings
-    });
-  }
-
-  return [filterSettings, updateFilterSettings];
-}
 
 function fileLabelFromContext(contextType) {
   switch (contextType) {

package/es/rce/plugins/shared/FixedContentTray.js

@@ -59,7 +59,8 @@ export const FixedContentTray = _ref => {
     renderBody,
     renderFooter,
     bodyAs,
-    shouldJoinBodyAndFooter
+    shouldJoinBodyAndFooter,
+    shouldCloseOnDocumentClick
   } = _ref;
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
@@ -69,7 +70,7 @@ export const FixedContentTray = _ref => {
     onExited: onUnmount,
     open: isOpen,
     placement: "end",
-    shouldCloseOnDocumentClick: true,
+    shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
     shouldContainFocus: true,
     shouldReturnFocus: true,
     size: "regular"
@@ -103,7 +104,8 @@ FixedContentTray.propTypes = {
   onUnmount: PropTypes.func,
   mountNode: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   bodyAs: PropTypes.string,
-  shouldJoinBodyAndFooter: PropTypes.bool
+  shouldJoinBodyAndFooter: PropTypes.bool,
+  shouldCloseOnDocumentClick: PropTypes.bool
 };
 FixedContentTray.defaultProps = {
   title: null,
@@ -111,5 +113,6 @@ FixedContentTray.defaultProps = {
   onDismiss: () => {},
   onUnmount: () => {},
   bodyAs: 'div',
-  shouldJoinBodyAndFooter: false
+  shouldJoinBodyAndFooter: false,
+  shouldCloseOnDocumentClick: true
 };

package/es/rce/plugins/shared/ImageOptionsForm.js

@@ -44,7 +44,8 @@ const ImageOptionsForm = _ref => {
     messagesForSize,
     hideDimensions,
     id = 'image-options-form',
-    isIconMaker = false
+    isIconMaker = false,
+    forBlockEditorUse = false
   } = _ref;
   const TYPE = isIconMaker ? formatMessage('icon') : formatMessage('image');
   const tooltipText = formatMessage('Used by screen readers to describe the content of an {TYPE}', {
@@ -95,7 +96,7 @@ const ImageOptionsForm = _ref => {
       TYPE_UPPER
     }),
     onChange: handleIsDecorativeChange
-  })), !isIconMaker && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  })), !isIconMaker && /*#__PURE__*/React.createElement(React.Fragment, null, !forBlockEditorUse && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(RadioInputGroup, {
     description: formatMessage('Display Options'),