@instructure/canvas-rce 5.9.0 → 5.11.0

package/lib/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 → lib/rce/plugins/tinymce-a11y-checker/components/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/lib/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/lib/rce/plugins/tinymce-a11y-checker/rules/large-text-contrast.js

@@ -30,6 +30,15 @@ export default {
       return true;
     }
 
+    for (let e = elem; e; e = e.parentElement) {
+      const bgimage = window.getComputedStyle(e).getPropertyValue('background-image');
+
+      if (bgimage !== 'none' && bgimage !== '') {
+        // ignore background images and gradients
+        return true;
+      }
+    }
+
     return contrast(elem);
   },
   data: smallTextContrast.data,

package/lib/rce/plugins/tinymce-a11y-checker/rules/small-text-contrast.js

@@ -32,6 +32,15 @@ export default {
       return true;
     }
 
+    for (let e = elem; e; e = e.parentElement) {
+      const bgimage = window.getComputedStyle(e).getPropertyValue('background-image');
+
+      if (bgimage !== 'none' && bgimage !== '') {
+        // ignore background images and gradients
+        return true;
+      }
+    }
+
     return contrast(elem);
   },
   data: elem => {

package/lib/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/lib/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/lib/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/lib/translations/locales/de.js

@@ -373,7 +373,7 @@ const locale = {
     "message": "{ count, plural,\n    one {# Objekt geladen}\n  other {# Objekte geladen}\n}"
   },
   "course_documents_104d76e0": {
-    "message": "Kursunterlagen"
+    "message": "Kursdokumente"
   },
   "course_files_62deb8f8": {
     "message": "Kursdateien"
@@ -2278,16 +2278,16 @@ const locale = {
     "message": "Wird von Screenreadern verwendet, um das Video zu beschreiben."
   },
   "user_documents_c206e61f": {
-    "message": "Benutzer*in Dokumente"
+    "message": "Meine Dokumente"
   },
   "user_files_78e21703": {
     "message": "Benutzerdateien"
   },
   "user_images_b6490852": {
-    "message": "Benutzerbilder"
+    "message": "Meine Bilder"
   },
   "user_media_14fbf656": {
-    "message": "Nutzer-Medien"
+    "message": "Meine Medien"
   },
   "vector_notation_cf6086ab": {
     "message": "Vektor (Notation)"