@instructure/canvas-rce 5.10.0 → 5.11.1

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

@@ -1,3 +1,5 @@
+import _pt from "prop-types";
+
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -16,14 +18,12 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Tray } from '@instructure/ui-tray';
 import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
 import { CloseButton } from '@instructure/ui-buttons';
 import formatMessage from 'format-message';
-const FlexItem = Flex.Item;
 export function ExternalToolDialogTray(props) {
   const {
     label,
@@ -56,9 +56,9 @@ export function ExternalToolDialogTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     padding: "small"
-  }, /*#__PURE__*/React.createElement(FlexItem, {
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
     shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onCloseButton,
     size: "small",
     screenReaderLabel: formatMessage('Close')
@@ -74,12 +74,6 @@ export function ExternalToolDialogTray(props) {
   }, children)))));
 }
 ExternalToolDialogTray.propTypes = {
-  open: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  mountNode: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  onOpen: PropTypes.func,
-  onClose: PropTypes.func,
-  onCloseButton: PropTypes.func,
-  name: PropTypes.string.isRequired,
-  children: PropTypes.node
+  onCloseButton: _pt.func,
+  name: _pt.string.isRequired
 };

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

@@ -70,7 +70,7 @@ export function ExternalToolSelectionDialog(props) {
     "data-mce-component": true,
     liveRegion: getLiveRegion,
     size: "medium",
-    theme: {
+    themeOverride: {
       mediumMaxWidth: '42rem'
     },
     label: formatMessage('Apps'),
@@ -79,7 +79,7 @@ export function ExternalToolSelectionDialog(props) {
     open: true,
     shouldCloseOnDocumentClick: false
   }, /*#__PURE__*/React.createElement(Modal.Header, {
-    theme: {
+    themeOverride: {
       padding: '0.5rem'
     }
   }, /*#__PURE__*/React.createElement(CloseButton, {

package/es/rce/plugins/instructure_rce_external_tools/lti13-content-items/models/ResourceLinkContentItem.js

@@ -35,7 +35,7 @@ export default class ResourceLinkContentItem extends BaseLinkContentItem {
 
   buildUrl() {
     return addQueryParamsToUrl(this.context.ltiEndpoint, {
-      display: 'borderless',
+      display: 'in_rce',
       resource_link_lookup_uuid: this.lookup_uuid,
       [PARENT_FRAME_CONTEXT_PARAM]: this.context.containingCanvasLtiToolId
     });

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -146,7 +146,7 @@ export default class TrayController {
       // If not, we can't update the MediaObject in the canvas db.
 
 
-      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' && !videoOptions.isLocked) {
+      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined') {
         videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
             this.$videoContainer.contentWindow.postMessage({
@@ -181,10 +181,15 @@ export default class TrayController {
     let vo = {};
 
     if (this._shouldOpen) {
+      /*
+       * When the tray is being opened again, it should be rendered fresh
+       * (clearing the internal state) so that the currently-selected video can
+       * be used for initial video options.
+       */
       this._renderId++;
+      vo = asVideoElement(this.$videoContainer) || {};
     }
 
-    vo = asVideoElement(this.$videoContainer) || {};
     const element = /*#__PURE__*/React.createElement(VideoOptionsTray, {
       id: "video-options-tray",
       key: this._renderId,

package/es/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -38,13 +38,10 @@ import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInpu
 import { getTrayHeight } from '../../shared/trayUtils';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
-import RCEGlobals from '../../../RCEGlobals';
 
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
 
 export default function VideoOptionsTray(_ref) {
-  var _RCEGlobals$getConfig;
-
   let {
     videoOptions,
     onRequestClose,
@@ -71,9 +68,7 @@ export default function VideoOptionsTray(_ref) {
   const [minWidth] = useState(MIN_WIDTH_VIDEO);
   const [minHeight] = useState(Math.round(videoHeight / videoWidth * MIN_WIDTH_VIDEO));
   const [minPercentage] = useState(MIN_PERCENTAGE);
-  const lock_statuses = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.lockedAttachments;
   const isStudio = !!studioOptions;
-  const isLocked = !!lock_statuses && !!lock_statuses[videoOptions.attachmentId];
   const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
   const showSizeControls = !isStudio || studioOptions.resizable;
   const dimensionsState = useDimensionsState(videoOptions, {
@@ -129,8 +124,7 @@ export default function VideoOptionsTray(_ref) {
       appliedWidth,
       displayAs,
       subtitles,
-      updateMediaObject,
-      isLocked
+      updateMediaObject
     });
   }
 
@@ -213,7 +207,7 @@ export default function VideoOptionsTray(_ref) {
     shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
-  }, !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, isStudio ? /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
@@ -272,7 +266,7 @@ export default function VideoOptionsTray(_ref) {
     minWidth: minWidth,
     minPercentage: minPercentage,
     hidePercentage: true
-  }))), !isStudio && !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
+  }))), !isStudio && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
     description: formatMessage('Closed Captions/Subtitles')

package/es/rce/plugins/instructure_wordcount/components/WordCountModal.js

@@ -24,41 +24,33 @@ import { BaseButton, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { Table } from '@instructure/ui-table';
 import formatMessage from '../../../../format-message';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers'; // Doing this to avoid TS2339 errors -- TODO: remove once we're on InstUI 8
-
-const {
-  Head,
-  Row,
-  ColHeader,
-  Body,
-  Cell
-} = Table;
+import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 
 const renderBody = (headers, rows) => {
   return /*#__PURE__*/React.createElement(Table, {
     caption: formatMessage('Word Count')
-  }, /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement(Row, null, headers.map(_ref => {
+  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, headers.map(_ref => {
     let {
       id,
       getLabel
     } = _ref;
-    return /*#__PURE__*/React.createElement(ColHeader, {
+    return /*#__PURE__*/React.createElement(Table.ColHeader, {
       key: id,
       id: id
     }, getLabel());
-  }))), /*#__PURE__*/React.createElement(Body, null, rows.map(_ref2 => {
+  }))), /*#__PURE__*/React.createElement(Table.Body, null, rows.map(_ref2 => {
     let {
       label,
       documentCount,
       selectionCount
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Row, {
+    return /*#__PURE__*/React.createElement(Table.Row, {
       key: label
-    }, /*#__PURE__*/React.createElement(Cell, {
+    }, /*#__PURE__*/React.createElement(Table.Cell, {
       key: "label"
-    }, label), /*#__PURE__*/React.createElement(Cell, {
+    }, label), /*#__PURE__*/React.createElement(Table.Cell, {
       key: "document"
-    }, documentCount), /*#__PURE__*/React.createElement(Cell, {
+    }, documentCount), /*#__PURE__*/React.createElement(Table.Cell, {
       key: "selection"
     }, selectionCount));
   })));

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

@@ -241,6 +241,7 @@ export default function CanvasContentTray(props) {
   const [hidingTrayOnAction, setHidingTrayOnAction] = useState(true);
   const trayRef = useRef(null);
   const scrollingAreaRef = useRef(null);
+  const closeButtonRef = useRef(null);
   const [filterSettings, setFilterSettings] = useFilterSettings();
   const [isEditTray, setIsEditTray] = useState(false);
   const [link, setLink] = useState(null);
@@ -267,6 +268,8 @@ export default function CanvasContentTray(props) {
   useEffect(() => {
     const controller = {
       showTrayForPlugin(plugin) {
+        var _closeButtonRef$curre;
+
         // increment a counter that's used as the key when rendering
         // this gets us a new instance everytime, which is necessary
         // to get the queries run so we have up to date data.
@@ -294,6 +297,8 @@ export default function CanvasContentTray(props) {
         } else {
           setIsEditTray(false);
         }
+
+        (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
       },
 
       hideTray(forceClose) {
@@ -474,7 +479,8 @@ export default function CanvasContentTray(props) {
     offset: "medium",
     onClick: handleDismissTray,
     "data-testid": "CloseButton_ContentTray",
-    screenReaderLabel: formatMessage('Close')
+    screenReaderLabel: formatMessage('Close'),
+    elementRef: el => closeButtonRef.current = el
   })), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
     linkText: linkText,
     placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,

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

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { parse } from 'url';
+import { format, parse } from 'url';
 import { absoluteToRelativeUrl } from '../../../common/fileUrl';
 import { IconAudioLine, IconDocumentLine, IconMsExcelLine, IconMsPptLine, IconMsWordLine, IconPdfLine, IconVideoLine } from '@instructure/ui-icons';
 import RCEGlobals from '../../RCEGlobals';
@@ -94,13 +94,21 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   const type = content_type.replace(/\/.*$/, '');
 
   if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
-    if (!file.url && !file.href) {
-      return `/media_attachments_iframe/${file.id}?type=${type}&embedded=true`;
+    const url = parse(`/media_attachments_iframe/${file.id}`, true);
+    url.query.type = type;
+    url.query.embedded = true;
+
+    if (file.uuid && file.contextType == 'User') {
+      url.query.verifier = file.uuid;
+    } else if (file.url || file.href) {
+      const parsed_url = parse(file.url || file.href, true);
+
+      if (parsed_url.query.verifier) {
+        url.query.verifier = parsed_url.query.verifier;
+      }
     }
 
-    const parsed_url = parse(file.url || file.href, true);
-    const verifier = parsed_url.query.verifier ? `&verifier=${parsed_url.query.verifier}` : '';
-    return `/media_attachments_iframe/${file.id}?type=${type}${verifier}&embedded=true`;
+    return format(url);
   }
 
   if (file.embedded_iframe_url) {

package/es/rce/plugins/tinymce-a11y-checker/components/{color-field.js → ColorField.js}

@@ -1,3 +1,5 @@
+import _pt from "prop-types";
+
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -15,8 +17,8 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from 'react'; // @ts-expect-error
+
 import contrast from 'wcag-element-contrast';
 import { TextInput } from '@instructure/ui-text-input';
 import { View } from '@instructure/ui-view';
@@ -62,7 +64,7 @@ export default class ColorField extends React.Component {
       as: "div"
     }, /*#__PURE__*/React.createElement(TextInput, {
       "data-testid": "color-field-text-input",
-      label: this.props.label,
+      renderLabel: this.props.label,
       value: this.state.textValue,
       onChange: e => this.setState({
         textValue: e.target.value
@@ -77,8 +79,8 @@ export default class ColorField extends React.Component {
 
 }
 ColorField.propTypes = {
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
+  label: _pt.string.isRequired,
+  name: _pt.string.isRequired,
+  value: _pt.string.isRequired,
+  onChange: _pt.func.isRequired
 };

package/es/rce/plugins/tinymce-a11y-checker/components/checker.js

@@ -20,8 +20,7 @@
 // our own imported describe function confuses eslint
 import React from 'react';
 import { LiveAnnouncer, LiveMessage } from 'react-aria-live';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
 import { Tray } from '@instructure/ui-tray';
 import { Popover } from '@instructure/ui-popover';
@@ -38,7 +37,7 @@ import { SimpleSelect } from '@instructure/ui-simple-select';
 import { IconQuestionLine } from '@instructure/ui-icons';
 import { InstUISettingsProvider } from '@instructure/emotion';
 import { Alert } from '@instructure/ui-alerts';
-import ColorField from './color-field';
+import ColorField from './ColorField';
 import PlaceholderSVG from './placeholder-svg';
 import describe from '../utils/describe';
 import * as dom from '../utils/dom';
@@ -363,7 +362,7 @@ export default class Checker extends React.Component {
       placement: "end",
       contentRef: e => this.trayElement = e,
       size: "regular",
-      theme: {
+      themeOverride: {
         regularWidth: '22em'
       }
     }, /*#__PURE__*/React.createElement(Flex, {
@@ -380,10 +379,11 @@ export default class Checker extends React.Component {
     }, /*#__PURE__*/React.createElement(Heading, {
       as: "h2"
     }, formatMessage('Accessibility Checker'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+      screenReaderLabel: formatMessage('Close Accessibility Checker'),
       placement: "end",
       onClick: () => this.handleClose(),
-      buttonRef: ref => this._closeButtonRef = ref
-    }, formatMessage('Close Accessibility Checker'))))), /*#__PURE__*/React.createElement(Flex.Item, {
+      elementRef: ref => this._closeButtonRef = ref
+    })))), /*#__PURE__*/React.createElement(Flex.Item, {
       as: "div",
       padding: "0 large large"
     }, this.state.errors.length > 0 && /*#__PURE__*/React.createElement(View, {
@@ -408,30 +408,33 @@ export default class Checker extends React.Component {
       width: "auto"
     }, /*#__PURE__*/React.createElement(Popover, {
       on: "click",
-      show: this.state.showWhyPopover,
+      isShowingContent: this.state.showWhyPopover,
       shouldContainFocus: true,
-      shouldReturnFocus: true
-    }, /*#__PURE__*/React.createElement(Popover.Trigger, null, /*#__PURE__*/React.createElement(Button, {
-      variant: "icon",
-      icon: IconQuestionLine,
-      onClick: () => this.setState({
-        showWhyPopover: true
-      })
-    }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Why')))), /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement(View, {
+      shouldReturnFocus: true,
+      renderTrigger: () => /*#__PURE__*/React.createElement(IconButton, {
+        screenReaderLabel: formatMessage('Why'),
+        renderIcon: IconQuestionLine,
+        onClick: () => this.setState({
+          showWhyPopover: true
+        }),
+        withBackground: false,
+        withBorder: false
+      }, /*#__PURE__*/React.createElement(IconQuestionLine, null))
+    }, /*#__PURE__*/React.createElement(View, {
       padding: "medium",
       display: "block",
       width: "16rem"
     }, /*#__PURE__*/React.createElement(CloseButton, {
       placement: "end",
       offset: "x-small",
-      variant: "icon",
       onClick: () => this.setState({
         showWhyPopover: false
-      })
-    }, formatMessage('Close')), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, rule.why()), /*#__PURE__*/React.createElement("p", null, rule.link && rule.link.length && /*#__PURE__*/React.createElement(InstUISettingsProvider, {
-      theme: {
+      }),
+      screenReaderLabel: formatMessage('Close')
+    }), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, rule.why()), /*#__PURE__*/React.createElement("p", null, rule.link && rule.link.length && /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+      themeOverride: {
         componentOverrides: {
-          Link: {
+          [Link.componentId]: {
             textDecoration: 'underline'
           }
         }
@@ -439,7 +442,7 @@ export default class Checker extends React.Component {
     }, /*#__PURE__*/React.createElement(Link, {
       href: rule.link,
       target: "_blank"
-    }, rule.linkText()))))))))))), /*#__PURE__*/React.createElement("form", {
+    }, rule.linkText())))))))))), /*#__PURE__*/React.createElement("form", {
       onSubmit: event => {
         event.preventDefault();
         this.fixIssue();
@@ -469,13 +472,13 @@ export default class Checker extends React.Component {
       width: "auto"
     }, /*#__PURE__*/React.createElement(Button, {
       type: "submit",
-      variant: "primary",
+      color: "primary",
       disabled: !this.state.formStateValid
     }, formatMessage('Apply')))))))), this.state.errors.length === 0 && !this.state.checking && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, formatMessage('No accessibility issues were detected.'))), /*#__PURE__*/React.createElement(PlaceholderSVG, null)), this.state.checking && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LiveMessage, {
       message: formatMessage('Checking for accessibility issues'),
       "aria-live": "polite"
     }), /*#__PURE__*/React.createElement(Spinner, {
-      title: formatMessage('Checking for accessibility issues'),
+      renderTitle: formatMessage('Checking for accessibility issues'),
       margin: "medium auto"
     }))))));
   }
@@ -539,7 +542,7 @@ export default class Checker extends React.Component {
 
       default:
         return /*#__PURE__*/React.createElement(TextInput, {
-          label: f.label,
+          renderLabel: f.label,
           name: f.dataKey,
           value: this.state.formState[f.dataKey] || '',
           onChange: this.updateFormState,

package/es/rce/root.js

@@ -1,5 +1,3 @@
-var _process, _process$env;
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -23,7 +21,7 @@ import RCEWrapper from './RCEWrapper';
 import normalizeProps from './normalizeProps';
 import formatMessage from '../format-message';
 
-if (!((_process = process) !== null && _process !== void 0 && (_process$env = _process.env) !== null && _process$env !== void 0 && _process$env.BUILD_LOCALE)) {
+if (!process || !process.env || !undefined) {
   formatMessage.setup({
     locale: 'en',
     generateId: require('format-message-generate-id/underscored_crc32'),

package/es/rce/transformContent.js

@@ -60,6 +60,14 @@ export function transformRceContentForEditing(inputHtml, options) {
     for (const attributeName of attributeNamesToRemove) {
       element.removeAttribute(attributeName);
     }
+  }); // fixup LTI iframe launches to use the `in_rce` display type
+
+  container.querySelectorAll('iframe[src]').forEach(element => {
+    const src = element.getAttribute('src');
+
+    if (src !== null && src !== void 0 && src.includes('display=borderless')) {
+      element.setAttribute('src', src.replace('display=borderless', 'display=in_rce'));
+    }
   });
   return container.innerHTML;
 }

package/es/sidebar/actions/upload.js

@@ -272,7 +272,9 @@ export function mediaUploadComplete(error, uploadData) {
         media_id: mediaObject.media_object.media_id,
         type: uploadedFile.type,
         title: uploadedFile.title || uploadedFile.name,
-        id: mediaObject.media_object.attachment_id
+        id: mediaObject.media_object.attachment_id,
+        uuid: mediaObject.media_object.uuid,
+        contextType: mediaObject.media_object.context_type
       };
       dispatch(removePlaceholdersFor(uploadedFile.name));
       embedUploadResult(embedData, 'media');

package/jest/jest-setup.js

@@ -118,4 +118,6 @@ if (typeof window.URL.createObjectURL === 'undefined') {
   Object.defineProperty(window.URL, 'createObjectURL', {value: () => 'http://example.com/whatever'})
 }
 
+global.DataTransferItem = global.DataTransferItem || class DataTransferItem {}
+
 window.scroll = () => {}

package/lib/common/mimeClass.js

@@ -42,75 +42,78 @@ export function mimeClass(file) {
   } else {
     const contentType = getContentType(file); // NOTE: Keep this list in sync with what's in canvas-lms/app/models/attachment.rb
 
-    return {
-      'text/html': 'html',
-      'text/x-csharp': 'code',
-      'text/xml': 'code',
-      'text/css': 'code',
-      text: 'text',
-      'text/plain': 'text',
-      'application/rtf': 'doc',
-      'text/rtf': 'doc',
-      'application/vnd.oasis.opendocument.text': 'doc',
-      'application/pdf': 'pdf',
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'doc',
-      'application/vnd.apple.pages': 'doc',
-      'application/x-docx': 'doc',
-      'application/msword': 'doc',
-      'application/vnd.ms-powerpoint': 'ppt',
-      'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'ppt',
-      'applicatoin/vnd.apple.key': 'ppt',
-      'application/vnd.ms-excel': 'xls',
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xls',
-      'application/vnd.apple.numbers': 'xls',
-      'application/vnd.oasis.opendocument.spreadsheet': 'xls',
-      'image/jpeg': 'image',
-      'image/pjpeg': 'image',
-      'image/png': 'image',
-      'image/gif': 'image',
-      'image/bmp': 'image',
-      'image/svg+xml': 'image',
-      'image/webp': 'image',
-      'application/x-rar': 'zip',
-      'application/x-rar-compressed': 'zip',
-      'application/x-zip': 'zip',
-      'application/x-zip-compressed': 'zip',
-      'application/xml': 'code',
-      'application/zip': 'zip',
-      'audio/mp3': 'audio',
-      'audio/mpeg': 'audio',
-      'audio/basic': 'audio',
-      'audio/mid': 'audio',
-      'audio/3gpp': 'audio',
-      'audio/x-aiff': 'audio',
-      'audio/x-m4a': 'audio',
-      'audio/x-mpegurl': 'audio',
-      'audio/x-ms-wma': 'audio',
-      'audio/x-pn-realaudio': 'audio',
-      'audio/x-wav': 'audio',
-      'audio/mp4': 'audio',
-      'audio/wav': 'audio',
-      'audio/webm': 'audio',
-      'audio/*': 'audio',
-      audio: 'audio',
-      'video/mpeg': 'video',
-      'video/quicktime': 'video',
-      'video/x-la-asf': 'video',
-      'video/x-ms-asf': 'video',
-      'video/x-ms-wma': 'audio',
-      'video/x-ms-wmv': 'video',
-      'video/x-msvideo': 'video',
-      'video/x-sgi-movie': 'video',
-      'video/3gpp': 'video',
-      'video/mp4': 'video',
-      'video/webm': 'video',
-      'video/avi': 'video',
-      'video/*': 'video',
-      video: 'video',
-      'application/x-shockwave-flash': 'flash'
-    }[contentType] || file.mime_class || 'file';
+    return contentMapping(contentType) || file.mime_class || 'file';
   }
 }
+export function contentMapping(contentType) {
+  return {
+    'text/html': 'html',
+    'text/x-csharp': 'code',
+    'text/xml': 'code',
+    'text/css': 'code',
+    text: 'text',
+    'text/plain': 'text',
+    'application/rtf': 'doc',
+    'text/rtf': 'doc',
+    'application/vnd.oasis.opendocument.text': 'doc',
+    'application/pdf': 'pdf',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'doc',
+    'application/vnd.apple.pages': 'doc',
+    'application/x-docx': 'doc',
+    'application/msword': 'doc',
+    'application/vnd.ms-powerpoint': 'ppt',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'ppt',
+    'applicatoin/vnd.apple.key': 'ppt',
+    'application/vnd.ms-excel': 'xls',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xls',
+    'application/vnd.apple.numbers': 'xls',
+    'application/vnd.oasis.opendocument.spreadsheet': 'xls',
+    'image/jpeg': 'image',
+    'image/pjpeg': 'image',
+    'image/png': 'image',
+    'image/gif': 'image',
+    'image/bmp': 'image',
+    'image/svg+xml': 'image',
+    'image/webp': 'image',
+    'application/x-rar': 'zip',
+    'application/x-rar-compressed': 'zip',
+    'application/x-zip': 'zip',
+    'application/x-zip-compressed': 'zip',
+    'application/xml': 'code',
+    'application/zip': 'zip',
+    'audio/mp3': 'audio',
+    'audio/mpeg': 'audio',
+    'audio/basic': 'audio',
+    'audio/mid': 'audio',
+    'audio/3gpp': 'audio',
+    'audio/x-aiff': 'audio',
+    'audio/x-m4a': 'audio',
+    'audio/x-mpegurl': 'audio',
+    'audio/x-ms-wma': 'audio',
+    'audio/x-pn-realaudio': 'audio',
+    'audio/x-wav': 'audio',
+    'audio/mp4': 'audio',
+    'audio/wav': 'audio',
+    'audio/webm': 'audio',
+    'audio/*': 'audio',
+    audio: 'audio',
+    'video/mpeg': 'video',
+    'video/quicktime': 'video',
+    'video/x-la-asf': 'video',
+    'video/x-ms-asf': 'video',
+    'video/x-ms-wma': 'audio',
+    'video/x-ms-wmv': 'video',
+    'video/x-msvideo': 'video',
+    'video/x-sgi-movie': 'video',
+    'video/3gpp': 'video',
+    'video/mp4': 'video',
+    'video/webm': 'video',
+    'video/avi': 'video',
+    'video/*': 'video',
+    video: 'video',
+    'application/x-shockwave-flash': 'flash'
+  }[contentType];
+}
 
 function getContentType(file) {
   return file['content-type'] || file.content_type || file.type;

package/lib/enhance-user-content/doc_previews.js

@@ -65,7 +65,7 @@ export function showLoadingImage($link) {
 
   ReactDOM.render( /*#__PURE__*/React.createElement(Spinner, {
     size: "x-small",
-    title: formatMessage('Loading')
+    renderTitle: formatMessage('Loading')
   }), $imageHolder);
   return $link;
 }