@instructure/canvas-rce 5.9.0 → 5.10.1

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

@@ -22,6 +22,7 @@ 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';
@@ -463,19 +464,18 @@ export default function CanvasContentTray(props) {
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "medium",
     shadow: "above"
-  }, /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
     margin: "none none medium none"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldgrow: true,
-    shouldshrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     level: "h2"
-  }, getHeader())), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, getHeader()), /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
+    offset: "medium",
     onClick: handleDismissTray,
     "data-testid": "CloseButton_ContentTray",
     screenReaderLabel: formatMessage('Close')
-  }))), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
+  })), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
     linkText: linkText,
     placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
     linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
@@ -492,8 +492,8 @@ export default function CanvasContentTray(props) {
     isContentLoading: isLoading(storeProps),
     use_rce_icon_maker: props.use_rce_icon_maker
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true,
+    shouldGrow: true,
+    shouldShrink: true,
     margin: "xx-small xxx-small 0",
     elementRef: el => scrollingAreaRef.current = el
   }, /*#__PURE__*/React.createElement(Flex, {

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

@@ -32,7 +32,7 @@ export const DISPLAY_AS_EMBED = 'embed';
 export const DISPLAY_AS_EMBED_DISABLED = 'embed-disabled';
 export const DISPLAY_AS_DOWNLOAD_LINK = 'download-link';
 export function asImageEmbed($element) {
-  const nodeName = $element.nodeName.toLowerCase();
+  const nodeName = $element === null || $element === void 0 ? void 0 : $element.nodeName.toLowerCase();
 
   if (nodeName !== 'img') {
     return null;
@@ -44,9 +44,11 @@ export function asImageEmbed($element) {
   };
 }
 export function asLink($element, editor) {
+  var _$link;
+
   let $link = $element;
 
-  if ($link.tagName !== 'A') {
+  if (((_$link = $link) === null || _$link === void 0 ? void 0 : _$link.tagName) !== 'A') {
     // the user may have selected some text that is w/in a link
     // but didn't include the <a>. Let's see if that's true
     $link = editor.dom.getParent($link, 'a[href]');
@@ -213,7 +215,7 @@ function isMediaElement($element, mediaType) {
 
   // the video is hosted in an iframe, but tinymce
   // wraps it in a span with swizzled attribute names
-  if (!($element !== null && $element !== void 0 && $element.getAttribute)) {
+  if (!($element !== null && $element !== void 0 && $element.getAttribute) || !$element) {
     return false;
   }
 
@@ -242,6 +244,8 @@ export function isAudioElement($element) {
 export function findMediaPlayerIframe(elem) {
   var _elem$firstElementChi;
 
+  if (!elem) return null;
+
   if (elem.tagName === 'IFRAME') {
     // we have the iframe
     return elem;

package/lib/rce/plugins/shared/ImageCropper/Preview.js

@@ -25,7 +25,6 @@ import { useMouseWheel } from './useMouseWheel';
 import { useKeyMouseTouchEvents } from './useKeyMouseEvents';
 import checkerboardStyle from '../CheckerboardStyling';
 import { View } from '@instructure/ui-view';
-import { getBrowser } from '../../../getBrowser';
 /**
  * Remove the node contents and append the svg element.
  */
@@ -86,17 +85,19 @@ export const Preview = _ref2 => {
     translateY: tempTranslateY,
     rotation,
     scaleRatio: tempScaleRatio
-  }); // Clip is not supported in Safari until v16.
+  });
+
+  function isSafariVersion15OrLesser() {
+    const match = /Version\/(\d+).+Safari/.exec(navigator.userAgent);
+    return match ? parseInt(match[1], 10) < 16 : false;
+  } // Clip is not supported in Safari until v16.
   // It's needed here to prevent a strange screenreader
   // behavior that makes the cropper look bad. 'hidden'
   // suffices when clip is not available, although it's not perfect
   // TODO: remove when Safari versions >= 16 are more commonplace
 
-  const {
-    name,
-    version
-  } = getBrowser();
-  const overflow = name === 'Safari' && parseFloat(version) < 16 ? 'hidden' : 'clip';
+
+  const overflow = isSafariVersion15OrLesser() ? 'hidden' : 'clip';
   return /*#__PURE__*/React.createElement("div", {
     style: {
       justifyContent: 'center',

package/lib/rce/plugins/shared/LinkDisplay.js

@@ -81,8 +81,8 @@ export const LinkDisplay = _ref => {
     size: "x-small"
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "0 x-small 0 0",
-    grow: true,
-    shrink: true,
+    shouldGrow: true,
+    shouldShrink: true,
     textAlign: "start"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div"

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/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/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)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/canvas-rce",
-  "version": "5.9.0",
+  "version": "5.10.1",
   "description": "A component wrapping Canvas's usage of Tinymce",
   "main": "es/index.js",
   "scripts": {
@@ -78,7 +78,7 @@
     "@instructure/debounce": "^7",
     "@instructure/emotion": "^8.38.1",
     "@instructure/k5uploader": "*",
-    "@instructure/media-capture": "~8.4.1-rc.16",
+    "@instructure/media-capture": "^9.0.0",
     "@instructure/ui-a11y-content": "^7",
     "@instructure/ui-a11y-utils": "^7",
     "@instructure/ui-alerts": "^7",
@@ -99,7 +99,7 @@
     "@instructure/ui-img": "^7",
     "@instructure/ui-link": "^7",
     "@instructure/ui-list": "^7",
-    "@instructure/ui-media-player": "7",
+    "@instructure/ui-media-player": "^9.0.0",
     "@instructure/ui-menu": "^7",
     "@instructure/ui-modal": "^7",
     "@instructure/ui-motion": "^7",
@@ -215,7 +215,7 @@
     "testcafe-browser-provider-selenium": "^1.2.0",
     "testcafe-react-selectors": "^3.3.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.2",
+    "typescript": "^5.2.2",
     "url-loader": "^4.1.1",
     "webpack": "^5",
     "webpack-merge": "^5",

package/canvas/README.md

@@ -1,84 +0,0 @@
-# Canvas Rich Content Editor
-
-The Canvas LMS Rich Content Editor extracted in it's own npm package for use
-across multiple services. In the canvas ecosystem, this npm module is used
-in pair with a running `canvas-rce-api` microservice.
-
-Some features require a running instance of the `canvas-rce-api`,
-but you do not need that instance in order to
-do development on `canvas-rce`. (see [docs/development.md](docs/development.md))
-
-The first customer of the `canvas-rce` is the `canvas-lms` LMS so documentation
-and references throughout documentation might reflect and assume the use of
-`canvas-lms`.
-
-## Install and setup
-
-As a published npm module, you can add canvas-rce to your node project by doing
-the following:
-
-```bash
-npm install canvas-rce --save
-```
-
-For guidance on how `canvas-rce` is used within canvas, please reference
-the [canvas-lms use of canvas-rce](https://github.com/instructure/canvas-lms/tree/stable/ui/shared/rce)
-to get an idea on how to incorporate it into your project. Pay
-special attention to the `RichContentEditor.js` and `serviceRCELoader.js`.
-
-Outside of canvas, the `CanvasRce` React component is your entry point.
-_Work is ongoing to make the props to `CanvasRce` more rational.
-Please be patient._
-
-## Tests
-
-While canvas consumes the es modules build of the rce,
-Jest tests are run against the commonjs build, so make sure you've built the
-commonjs assets before running tests:
-
-```bash
-yarn build:canvas
-yarn test:jest
-```
-
-There are still legacy mocha tests run with `yarn test:mocha`. `yarn test` runs them all.
-
-### test debugging hints
-
-```
-yarn test:jest:debug path/to/__test__/file.test.js
-```
-
-will break and wait for you to attach a debugger (e.g. `chrome://inspect/#devices`).
-
-Similarly, for mocha tests
-
-```
-yarn test:mocha:debug path/to/test/file.test.js
-```
-
-Both those commands may include a `--watch` argument to keep the process alive
-while you iterate.
-
-## Polyfills
-
-This project makes use of modern JavaScript APIs like Promise, Object.assign,
-Array.prototype.includes, etc. which are present in modern
-browsers but may not be present in old browsers like IE 11. In order to not
-send unnecessarily large and duplicated code bundles to the browser, consumers
-are expected to have already globally polyfilled those APIs.
-Canvas only supports modern browsers and the rce has not been tested
-in older browsers like IE. If you need suggestions for how to include
-polyfills in your
-own app, you can just put this in your html above the script that includes
-canvas-rce:
-
-```
-<script src="https://cdn.polyfill.io/v2/polyfill.min.js?rum=0"></script>
-```
-
-(See: https://polyfill.io/v2/docs/ for more info)
-
-## Development
-
-See [DEVELOPMENT.md](./DEVELOPMENT.md)