@instructure/canvas-rce 5.9.0 → 5.11.0

package/lib/rce/RceHtmlEditor.js

@@ -15,10 +15,10 @@
  * 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, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { func, string } from 'prop-types';
 import formatMessage from '../format-message';
-import { CodeEditor } from '@instructure/ui-code-editor';
+import { SourceCodeEditor } from '@instructure/ui-source-code-editor';
 import beautify from 'js-beautify';
 const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
   let {
@@ -56,25 +56,7 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
 
     setDir(getComputedStyle(editorRef.current || document.body, null).direction);
   }, [dir, editorRef]);
-  useEffect(() => {
-    // scoping querySelector to the container div makes sure we're targeting this CodeEditor
-    // The CodeMirror docs (https://codemirror.net/doc/manual.html#styling)
-    // say this is the element we use to set the editor's height
-    const editor = editorRef.current.querySelector('.CodeMirror');
-    editor.CodeMirror.setSize(null, props.height);
-    editor.style.margin = '0';
-    editor.style.border = '0';
-  }, [props.height, editorRef]);
-  const isFocused = useRef(false); // move cursor to the top of the html code when the editor is focused for the first time
-
-  const handleFocus = useCallback((editor, event) => {
-    if (!isFocused.current) {
-      editor.setCursor(0, 0);
-      isFocused.current = true;
-    }
-
-    onFocus(event);
-  }, [onFocus]); // setting height on the container keeps the RCE toolbar from jumping
+  const direction = ['ltr', 'rtl'].includes(dir) ? dir : 'ltr'; // setting height on the container keeps the RCE toolbar from jumping
 
   return /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
@@ -84,28 +66,28 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
       overflow: 'hidden',
       textAlign: 'start'
     }
-  }, /*#__PURE__*/React.createElement(CodeEditor, {
+  }, /*#__PURE__*/React.createElement(SourceCodeEditor, {
     label: label,
-    language: "html",
-    options: {
-      lineNumbers: true,
-      lineWrapping: true,
-      autofocus: false,
-      spellcheck: true,
-      extraKeys: {
-        Tab: false,
-        'Shift-Tab': false
-      },
-      screenReaderLabel: label,
-      direction: dir,
-      rtlMoveVisually: true
-    },
+    language: "html" // see LF-745 for tracking of the following:
+    // TODO: needs prop for
+    // options={{
+    //   extraKeys: {Tab: false, 'Shift-Tab': false},
+    // }}
+    // TODO: may need
+    // attachment={none | bottom | top}
+    ,
+    lineNumbers: true,
+    lineWrapping: true,
+    autoFocus: false,
+    spellcheck: true,
+    direction: direction,
+    rtlMoveVisually: true,
+    height: props.height,
     value: code,
     onChange: value => {
       setCode(value);
       props.onChange(value);
-    },
-    onFocus: handleFocus
+    }
   }));
 });
 RceHtmlEditor.propTypes = {

package/lib/rce/plugins/instructure_equation/EquationEditorModal/parseLatex.js

@@ -68,8 +68,6 @@ export const parseLatex = editor => {
       };
     } catch (ex) {
       // probably failed to create the new URL
-      // eslint-disable-next-line no-console
-      console.error(ex);
       return {};
     }
   } else if (wholeText) {

package/lib/rce/plugins/instructure_links/components/Link.js

@@ -31,8 +31,6 @@ import { IconDragHandleLine, IconPublishSolid, IconUnpublishedSolid } from '@ins
 import RCEGlobals from '../../../RCEGlobals';
 import { getIcon } from '../../shared/linkUtils';
 export default function Link(props) {
-  var _RCEGlobals$getFeatur;
-
   const internalLink = { ...props.link
   };
   const [isHovering, setIsHovering] = useState(false);
@@ -43,14 +41,10 @@ export default function Link(props) {
     date_type
   } = props.link;
   const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
+  internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
 
-  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.rce_ux_improvements) {
-    internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
-
-    const publishable = !['navigation', 'announcements'].includes(type);
-    internalLink['data-published'] = publishable ? published : null;
-  }
-
+  const publishable = !['navigation', 'announcements'].includes(type);
+  internalLink['data-published'] = publishable ? published : null;
   const Icon = getIcon(type);
   const color = published ? 'success' : 'primary';
   let dateString = null;

package/lib/rce/plugins/instructure_links/components/LinkSet.js

@@ -113,7 +113,7 @@ class LinkSet extends Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, {
       id: this.describedByID
     }, formatMessage('Click to insert a link into the editor.')), /*#__PURE__*/React.createElement(List, {
-      variant: "unstyled",
+      isUnstyled: true,
       as: "ul",
       margin: "0"
     }, this.props.collection.links.map((link, index, array) => {
@@ -137,18 +137,14 @@ class LinkSet extends Component {
   }
 
   renderEmptyIndicator() {
-    var _RCEGlobals$getFeatur, _this$props$searchStr;
+    var _this$props$searchStr;
 
-    return (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.improved_no_results_messaging ? /*#__PURE__*/React.createElement(NoResults, {
+    return /*#__PURE__*/React.createElement(NoResults, {
       contextType: this.props.contextType,
       contextId: this.props.contextId,
       collectionType: this.props.type,
       isSearchResult: ((_this$props$searchStr = this.props.searchString) === null || _this$props$searchStr === void 0 ? void 0 : _this$props$searchStr.length) >= 3
-    }) : /*#__PURE__*/React.createElement(View, {
-      as: "div",
-      role: "alert",
-      padding: "medium"
-    }, formatMessage('No results.'));
+    });
   }
 
   renderLoadingError() {

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/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/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/lib/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/lib/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/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';
@@ -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/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"