@instructure/canvas-rce 5.9.0 → 5.11.0

package/es/rce/plugins/instructure_links/components/NoResults.js

@@ -23,11 +23,7 @@ import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import formatMessage from '../../../../format-message';
-import { getIcon } from '../../shared/linkUtils'; // Doing this to avoid TS2339 errors-- remove once we're on InstUI 8
-
-const {
-  Item: FlexItem
-} = Flex;
+import { getIcon } from '../../shared/linkUtils';
 export function buildUrl(contextType, contextId, collectionType) {
   var _typeMap$collectionTy;
 
@@ -72,15 +68,14 @@ export const NoResults = _ref => {
     justifyItems: "center",
     alignItems: "center",
     direction: "column"
-  }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Icon, {
     size: "large",
     color: "secondary",
     padding: "large"
-  })), /*#__PURE__*/React.createElement(FlexItem, {
+  })), /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "small 0 0"
-  }, /*#__PURE__*/React.createElement(Text, null, getMessage(collectionType, isSearchResult))), !isSearchResult && /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Link, {
-    href: buildUrl(contextType, contextId, collectionType) // @ts-expect-error
-    ,
+  }, /*#__PURE__*/React.createElement(Text, null, getMessage(collectionType, isSearchResult))), !isSearchResult && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Link, {
+    href: buildUrl(contextType, contextId, collectionType),
     target: "_blank"
   }, formatMessage('Add one!')))));
 };

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

@@ -68,20 +68,14 @@ import bridge from '../../../bridge';
 import { getAnchorElement, isOKToLink } from '../../contentInsertionUtils';
 import LinkOptionsTrayController from './components/LinkOptionsTray/LinkOptionsTrayController';
 import { CREATE_LINK, EDIT_LINK } from './components/LinkOptionsDialog/LinkOptionsDialogController';
-import RCEGlobals from '../../RCEGlobals';
 import tinymce from 'tinymce';
 const trayController = new LinkOptionsTrayController();
 const COURSE_PLUGIN_KEY = 'course_links';
 const GROUP_PLUGIN_KEY = 'group_links';
 
 function getCommandName(selectedNode) {
-  var _RCEGlobals$getFeatur;
-
-  // show the Course Tray if it's a course link and the ux improvement flag is on,
-  // otherwise show the default Link Tray
-  const showCourseLinkTray = !!((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.rce_ux_improvements);
   const isCourseLink = selectedNode.getAttribute('data-course-type');
-  return showCourseLinkTray && isCourseLink ? 'instructureTrayForCourseLinks' : 'instructureTrayToEditLink';
+  return isCourseLink ? 'instructureTrayForCourseLinks' : 'instructureTrayToEditLink';
 }
 
 function selectedAnchorCount(ed) {

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

@@ -31,7 +31,6 @@ import { ExternalToolDialogTray } from './ExternalToolDialogTray';
 import { ExternalToolDialogModal } from './ExternalToolDialogModal';
 import { showFlashAlert } from '../../../../../common/FlashAlert';
 import { parseUrlOrNull } from '../../../../../util/url-util';
-const FlexItem = Flex.Item;
 export default class ExternalToolDialog extends React.Component {
   constructor() {
     super(...arguments);
@@ -246,7 +245,7 @@ export default class ExternalToolDialog extends React.Component {
     }, formatMessage('The following content is partner provided'))), !state.iframeLoaded && /*#__PURE__*/React.createElement(Flex, {
       alignItems: "center",
       justifyItems: "center"
-    }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Spinner, {
+    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
       renderTitle: formatMessage('Loading External Tool'),
       size: "large",
       margin: "0 0 0 medium"

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

@@ -18,7 +18,6 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
 import { CloseButton } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
@@ -33,12 +32,12 @@ export function ExternalToolDialogModal(props) {
     onOpen: props.onOpen,
     onClose: props.onClose,
     mountNode: props.mountNode
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true
-  }, /*#__PURE__*/React.createElement(Heading, null, props.name)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Heading, null, props.name), /*#__PURE__*/React.createElement(CloseButton, {
+    placement: "end",
+    offset: "medium",
     onClick: props.onCloseButton,
     screenReaderLabel: formatMessage('Close')
-  })))), /*#__PURE__*/React.createElement(Modal.Body, {
+  })), /*#__PURE__*/React.createElement(Modal.Body, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div",

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

@@ -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';
@@ -240,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);
@@ -266,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.
@@ -293,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) {
@@ -463,19 +469,19 @@ 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, {
+    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,
     linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
@@ -492,8 +498,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/es/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/es/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/es/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/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/{lib/rce/plugins/tinymce-a11y-checker/components/color-field.js → es/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
 };