@instructure/canvas-rce 5.10.0 → 5.10.2

package/lib/rce/StatusBar.js

@@ -24,7 +24,7 @@ import { Button, IconButton, CondensedButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Badge } from '@instructure/ui-badge';
-import { InstUISettingsProvider } from '@instructure/emotion';
+import { ApplyTheme } from '@instructure/ui-themeable';
 import { Text } from '@instructure/ui-text';
 import { SVGIcon } from '@instructure/ui-svg-images';
 import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine } from '@instructure/ui-icons';
@@ -190,12 +190,10 @@ export default function StatusBar(props) {
       return button;
     }
 
-    return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+    return /*#__PURE__*/React.createElement(ApplyTheme, {
       theme: {
-        componentOverrides: {
-          Badge: {
-            colorPrimary: props.a11yBadgeColor
-          }
+        [Badge.theme]: {
+          colorPrimary: props.a11yBadgeColor
         }
       }
     }, /*#__PURE__*/React.createElement(Badge, {

package/lib/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/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/components/checker.js

@@ -36,7 +36,7 @@ import { TextInput } from '@instructure/ui-text-input';
 import { TextArea } from '@instructure/ui-text-area';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { IconQuestionLine } from '@instructure/ui-icons';
-import { InstUISettingsProvider } from '@instructure/emotion';
+import { ApplyTheme } from '@instructure/ui-themeable';
 import { Alert } from '@instructure/ui-alerts';
 import ColorField from './color-field';
 import PlaceholderSVG from './placeholder-svg';
@@ -428,12 +428,10 @@ export default class Checker extends React.Component {
       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, {
+    }, 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(ApplyTheme, {
       theme: {
-        componentOverrides: {
-          Link: {
-            textDecoration: 'underline'
-          }
+        [Link.theme]: {
+          textDecoration: 'underline'
         }
       }
     }, /*#__PURE__*/React.createElement(Link, {

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/skins/theme.js

@@ -0,0 +1,127 @@
+/*
+ * Copyright (C) 2019 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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 { darken, lighten, alpha } from '@instructure/ui-color-utils'; // pull canvas theme values we need for the rce skin
+
+export default function generator(_ref) {
+  let {
+    borders,
+    colors,
+    forms,
+    shadows,
+    spacing,
+    typography
+  } = _ref;
+  const vars = {
+    canvasBackgroundColor: colors.white,
+    canvasTextColor: colors.textDarkest,
+    canvasErrorColor: colors.textDanger,
+    canvasWarningColor: colors.textWarning,
+    canvasInfoColor: colors.textInfo,
+    canvasSuccessColor: colors.textSuccess,
+    canvasBorderColor: colors.borderMedium,
+    toolbarButtonHoverBackground: darken(colors.backgroundLightest, 5),
+    // copied from INSTUI "light" Button
+    canvasBrandColor: colors.brand,
+    activeMenuItemBackground: colors.backgroundBrand,
+    activeMenuItemLabelColor: colors.textLightest,
+    tableSelectorHighlightColor: alpha(lighten(colors.brand, 10), 50),
+    canvasLinkColor: colors.link,
+    canvasLinkDecoration: 'none',
+    // the instui default button
+    canvasButtonBackground: colors.backgroundLightest,
+    canvasButtonBorderColor: 'transparent',
+    canvasButtonColor: colors.textDarkest,
+    canvasButtonHoverBackground: colors.backgroundLightest,
+    canvasButtonHoverColor: colors.brand,
+    canvasButtonActiveBackground: colors.backgroundLightest,
+    canvasButtonFontWeight: typography.fontWeightNormal,
+    canvasButtonFontSize: typography.fontSizeMedium,
+    canvasButtonLineHeight: forms.inputHeightMedium,
+    canvasButtonPadding: `0 ${spacing.small}`,
+    // the instui primary button
+    canvasPrimaryButtonBackground: colors.backgroundBrand,
+    canvasPrimaryButtonColor: colors.textLightest,
+    canvasPrimaryButtonBorderColor: 'transparent',
+    canvasPrimaryButtonHoverBackground: darken(colors.backgroundBrand, 10),
+    canvasPrimaryButtonHoverColor: colors.textLightest,
+    // the instui secondary button
+    canvasSecondaryButtonBackground: colors.backgroundLight,
+    canvasSecondaryButtonColor: colors.textDarkest,
+    canvasSecondaryButtonBorderColor: darken(colors.backgroundLight, 10),
+    canvasSecondaryButtonHoverBackground: darken(colors.backgroundLight, 10),
+    canvasSecondaryButtonHoverColor: colors.textDarkest,
+    canvasFocusBorderColor: borders.brand,
+    canvasFocusBorderWidth: borders.widthSmall,
+    // canvas really uses widthMedium
+    canvasFocusBoxShadow: `0 0 0 2px ${colors.brand}`,
+    canvasEnabledColor: borders.brand,
+    canvasEnabledBoxShadow: `inset 0 0 0.1875rem 0.0625rem ${darken(colors.borderLightest, 25)}`,
+    canvasFontFamily: typography.fontFamily,
+    canvasFontSize: '1rem',
+    canvasFontSizeSmall: typography.fontSizeSmall,
+    // modal dialogs
+    canvasModalShadow: shadows.depth3,
+    canvasModalHeadingPadding: spacing.medium,
+    canvasModalHeadingFontSize: typography.fontSizeXLarge,
+    canvasModalHeadingFontWeight: typography.fontWeightNormal,
+    canvasModalBodyPadding: spacing.medium,
+    canvasModalFooterPadding: spacing.small,
+    canvasModalFooterBackground: colors.backgroundLight,
+    canvasFormElementMargin: `0 0 ${spacing.medium} 0`,
+    canvasFormElementLabelColor: colors.textDarkest,
+    canvasFormElementLabelMargin: `0 0 ${spacing.small} 0`,
+    canvasFormElementLabelFontSize: typography.fontSizeMedium,
+    canvasFormElementLabelFontWeight: typography.fontWeightBold,
+    // a11y button badge
+    canvasBadgeBackgroundColor: colors.textInfo
+  };
+  vars.tinySplitButtonChevronHoverBackground = darken(vars.toolbarButtonHoverBackground, 10);
+  return vars;
+}
+
+generator.canvas = function (variables) {
+  return {
+    canvasLinkColor: variables['ic-link-color'],
+    canvasLinkDecoration: variables['ic-link-decoration'],
+    canvasTextColor: variables['ic-brand-font-color-dark'],
+    canvasBrandColor: variables['ic-brand-primary'],
+    canvasFocusBorderColor: variables['ic-brand-primary'],
+    canvasFocusBoxShadow: `0 0 0 2px ${variables['ic-brand-primary']}`,
+    canvasEnabledColor: variables['ic-brand-primary'],
+    canvasPrimaryButtonBackground: variables['ic-brand-primary'],
+    canvasPrimaryButtonColor: variables['ic-brand-button--primary-text'],
+    canvasPrimaryButtonHoverBackground: darken(variables['ic-brand-button--primary-bgd'], 10),
+    activeMenuItemBackground: variables['ic-brand-button--primary-bgd'],
+    activeMenuItemLabelColor: variables['ic-brand-button--primary-text'],
+    tableSelectorHighlightColor: alpha(lighten(variables['ic-brand-primary'], 10), 50)
+  };
+};
+
+generator['canvas-a11y'] = generator['canvas-high-contrast'] = function (_ref2) {
+  let {
+    colors
+  } = _ref2;
+  return {
+    canvasButtonBackground: colors.backgroundLight,
+    canvasSecondaryButtonBorderColor: colors.borderMedium,
+    canvasLinkDecoration: 'underline',
+    canvasFocusBorderColor: colors.borderBrand,
+    canvasFocusBoxShadow: `0 0 0 2px ${colors.brand}`,
+    canvasBrandColor: colors.brand
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/canvas-rce",
-  "version": "5.10.0",
+  "version": "5.10.2",
   "description": "A component wrapping Canvas's usage of Tinymce",
   "main": "es/index.js",
   "scripts": {
@@ -76,9 +76,8 @@
     "@instructure/canvas-media": "*",
     "@instructure/canvas-theme": "7",
     "@instructure/debounce": "^7",
-    "@instructure/emotion": "^8.38.1",
     "@instructure/k5uploader": "*",
-    "@instructure/media-capture": "^9.0.0",
+    "@instructure/media-capture": "~8.4.1-rc.16",
     "@instructure/ui-a11y-content": "^7",
     "@instructure/ui-a11y-utils": "^7",
     "@instructure/ui-alerts": "^7",
@@ -99,7 +98,7 @@
     "@instructure/ui-img": "^7",
     "@instructure/ui-link": "^7",
     "@instructure/ui-list": "^7",
-    "@instructure/ui-media-player": "^9.0.0",
+    "@instructure/ui-media-player": "7",
     "@instructure/ui-menu": "^7",
     "@instructure/ui-modal": "^7",
     "@instructure/ui-motion": "^7",
@@ -158,18 +157,18 @@
     "redux-batch-middleware": "^0.2.0",
     "redux-thunk": "^2",
     "scroll-into-view": "https://github.com/bkirkby/scroll-into-view.git#588b0ced98eeecf84e6fb2074aa076e80b7cffab",
-    "text-field-edit": "^3.2.0",
     "tinymce": "^5",
+    "text-field-edit": "^3.2.0",
     "uri-js": "^4.2.2",
     "wcag-element-contrast": "^1.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7",
     "@babel/core": "^7",
-    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
-    "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
     "@babel/preset-typescript": "^7",
     "@babel/register": "7",
+    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
+    "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
     "@instructure/babel-plugin-themeable-styles": "7.19.0-canvas",
     "@instructure/browserslist-config-canvas-lms": ">=2",
     "@instructure/translations": ">=1",
@@ -198,7 +197,6 @@
     "jest": "^28",
     "jest-canvas-mock": "^2",
     "jest-junit": "^7",
-    "jest-mock-proxy": "3.1.2",
     "mathjax": "^3.2.0",
     "mocha": "^6",
     "mocha-junit-reporter": "^1.18.0",
@@ -210,7 +208,6 @@
     "shelljs": "^0.8.3",
     "sinon": "^7",
     "skin-deep": "^1",
-    "source-map-support": "0.5.21",
     "testcafe": "1.14.2",
     "testcafe-browser-provider-selenium": "^1.2.0",
     "testcafe-react-selectors": "^3.3.0",
@@ -220,7 +217,9 @@
     "webpack": "^5",
     "webpack-merge": "^5",
     "webpack-nano": "^1",
-    "webpack-plugin-serve": "^1"
+    "webpack-plugin-serve": "^1",
+    "source-map-support": "0.5.21",
+    "jest-mock-proxy": "3.1.2"
   },
   "resolutions": {
     "format-message-estree-util": "./packages/format-message-estree-util"

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)