@instructure/canvas-rce 5.6.0 → 5.6.1

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/utils.js

@@ -0,0 +1,29 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * Copyright (C) 2022 - 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/>.
+ */
+export const MAX_GIF_PNG_SIZE_BYTES = 250 * 1024;
+export const isAnUnsupportedGifPngImage = _ref => {
+  var _context;
+
+  let {
+    type,
+    size
+  } = _ref;
+  return _includesInstanceProperty(_context = ['image/gif', 'image/png']).call(_context, type) && size > MAX_GIF_PNG_SIZE_BYTES;
+};

package/lib/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -28,7 +28,7 @@ import { CreateIconMakerForm } from './CreateIconMakerForm';
 import { Footer } from './CreateIconMakerForm/Footer';
 import { buildStylesheet, buildSvg } from '../svg';
 import { statuses, useSvgSettings } from '../svg/settings';
-import { defaultState } from '../reducers/svgSettings';
+import { defaultState, actions } from '../reducers/svgSettings';
 import { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR } from '../svg/constants';
 import { FixedContentTray } from '../../shared/FixedContentTray';
 import { useStoreProps } from '../../shared/StoreContext';
@@ -40,25 +40,25 @@ import bridge from '../../../../bridge';
 const INVALID_MESSAGE = formatMessage('One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image');
 const UNSAVED_CHANGES_MESSAGE = formatMessage('You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?');
 
-function renderHeader(title, settings, onKeyDown, isInvalid, onAlertDismissal, onClose) {
+function renderHeader(title, settings, onKeyDown, onAlertDismissal, onClose) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     background: "primary"
-  }, isInvalid && /*#__PURE__*/React.createElement(Alert, {
+  }, settings.error && /*#__PURE__*/React.createElement(Alert, {
     variant: "error",
     margin: "small",
     timeout: 10000,
     onDismiss: onAlertDismissal,
     renderCloseButtonLabel: "Close"
-  }, INVALID_MESSAGE), /*#__PURE__*/React.createElement(Flex, {
+  }, settings.error), /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "medium medium small"
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, title)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -133,7 +133,6 @@ export function IconMakerTray(_ref) {
   } = _ref;
   const nameRef = useRef();
   const applyRef = useRef();
-  const [isInvalid, setIsInvalid] = useState(false);
   const [isOpen, setIsOpen] = useState(true);
   const [replaceAll, setReplaceAll] = useState(false);
   const title = editing ? formatMessage('Edit Icon') : formatMessage('Create Icon');
@@ -177,7 +176,10 @@ export function IconMakerTray(_ref) {
   }, [settings.name]);
   useEffect(() => {
     if (validIcon(settings)) {
-      setIsInvalid(false);
+      dispatch({
+        type: actions.SET_ERROR,
+        payload: null
+      });
       setStatus(statuses.IDLE);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -190,7 +192,10 @@ export function IconMakerTray(_ref) {
     setStatus(statuses.LOADING);
 
     if (!validIcon(settings)) {
-      setIsInvalid(true);
+      dispatch({
+        type: actions.SET_ERROR,
+        payload: INVALID_MESSAGE
+      });
       setStatus(statuses.ERROR);
       return;
     }
@@ -277,14 +282,17 @@ export function IconMakerTray(_ref) {
     replaceInitialSettings(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsStatus]);
 
-  const handleAlertDismissal = () => setIsInvalid(false);
+  const handleAlertDismissal = () => dispatch({
+    type: actions.SET_ERROR,
+    payload: null
+  });
 
   return /*#__PURE__*/React.createElement(FixedContentTray, {
     title: title,
     isOpen: isOpen,
     onDismiss: onClose,
     onUnmount: onUnmount,
-    renderHeader: () => renderHeader(title, settings, onKeyDown, isInvalid, handleAlertDismissal, onClose),
+    renderHeader: () => renderHeader(title, settings, onKeyDown, handleAlertDismissal, onClose),
     renderBody: () => renderBody(settings, dispatch, editor, editing, !replaceAll, nameRef, rcsConfig, isLoading),
     renderFooter: () => renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef),
     bodyAs: "form",

package/lib/rce/plugins/instructure_icon_maker/reducers/imageCropper.js

@@ -24,7 +24,8 @@ export const actions = {
   SET_SCALE_RATIO: 'SetScaleRatio',
   SET_TRANSLATE_X: 'SetTranslateX',
   SET_TRANSLATE_Y: 'SetTranslateY',
-  UPDATE_SETTINGS: 'UpdateSettings'
+  UPDATE_SETTINGS: 'UpdateSettings',
+  RESET_SETTINGS: 'ResetSettings'
 };
 export const cropperSettingsReducer = (state, action) => {
   switch (action.type) {
@@ -63,6 +64,14 @@ export const cropperSettingsReducer = (state, action) => {
         ...action.payload
       };
 
+    case actions.RESET_SETTINGS:
+      return { ...state,
+        rotation: defaultState.rotation,
+        scaleRatio: defaultState.scaleRatio,
+        translateX: defaultState.translateX,
+        translateY: defaultState.translateY
+      };
+
     default:
       throw Error('Unknown action for image cropper reducer');
   }

package/lib/rce/plugins/instructure_icon_maker/reducers/svgSettings.js

@@ -27,7 +27,8 @@ export const actions = {
   SET_TRANSLATE_X: 'SetTranslateX',
   SET_TRANSLATE_Y: 'SetTranslateY',
   SET_WIDTH: 'SetWidth',
-  SET_HEIGHT: 'SetHeight'
+  SET_HEIGHT: 'SetHeight',
+  SET_ERROR: 'SetError'
 };
 
 const buildTransformString = state => {
@@ -90,6 +91,11 @@ export const svgSettings = (state, action) => {
         height: action.payload
       };
 
+    case actions.SET_ERROR:
+      return { ...state,
+        error: action.payload
+      };
+
     case actions.SET_TRANSLATE_X:
       return nextStateForTransform(state, 'translateX', action.payload);
 

package/lib/rce/plugins/instructure_icon_maker/svg/constants.js

@@ -64,7 +64,8 @@ export const DEFAULT_SETTINGS = {
   width: 0,
   height: 0,
   transform: '',
-  imageSettings: null
+  imageSettings: null,
+  error: null
 };
 export const BASE_SIZE = {
   [Size.ExtraSmall]: 74,

package/lib/rce/plugins/instructure_icon_maker/svg/metadata.js

@@ -26,6 +26,7 @@ export function buildMetadata(settings) {
     externalStyle,
     externalWidth,
     externalHeight,
+    error,
     ...embedSettings
   } = settings;
   const metadata = createSvgElement('metadata');

package/lib/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -126,7 +126,7 @@ export default function ImageOptionsTray(props) {
     } finally {
       setShowUrlField(isValidURL ? isExternalUrl(url) : true);
     }
-  }, []);
+  }, [url]);
   const messagesForSize = [];
 
   if (imageSize !== CUSTOM) {
@@ -160,8 +160,8 @@ export default function ImageOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Image Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -170,9 +170,9 @@ export default function ImageOptionsTray(props) {
     screenReaderLabel: formatMessage('Close')
   })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
-    grow: true,
+    shouldGrow: true,
     margin: "none",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "space-between",
     direction: "column",

package/lib/rce/plugins/instructure_image/Images/index.js

@@ -68,7 +68,7 @@ export default function Images(props) {
     onImageClick: props.onImageEmbed
   })), loader.isLoading && /*#__PURE__*/React.createElement(Flex.Item, {
     as: "div",
-    grow: true
+    shouldGrow: true
   }, /*#__PURE__*/React.createElement(LoadingIndicator, {
     loader: loader
   })), !loader.isLoading && loader.hasMore && /*#__PURE__*/React.createElement(Flex.Item, {

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

@@ -50,7 +50,9 @@ export default function CollectionPanel(props) {
     onLinkClick: props.onLinkClick,
     suppressRenderEmpty: props.suppressRenderEmpty,
     contextType: props.contextType,
-    searchString: props.searchString
+    searchString: props.searchString,
+    editing: props.editing,
+    onEditClick: props.onEditClick
   })));
 }
 CollectionPanel.propTypes = {
@@ -68,9 +70,12 @@ CollectionPanel.propTypes = {
   newPageLinkExpanded: bool,
   toggleNewPageForm: func,
   onChangeAccordion: func.isRequired,
-  selectedAccordionIndex: string
+  selectedAccordionIndex: string,
+  editing: bool,
+  onEditClick: func
 };
 CollectionPanel.defaultProps = {
   renderNewPageLink: false,
-  suppressRenderEmpty: false
+  suppressRenderEmpty: false,
+  editing: false
 };

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

@@ -1,3 +1,5 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -16,7 +18,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React, { useState } from 'react';
-import { func, oneOf, string } from 'prop-types';
+import { bool, func, oneOf, string } from 'prop-types';
 import { linkShape } from './propTypes';
 import formatMessage from '../../../../format-message';
 import { renderLink as renderLinkHtml } from '../../../contentRendering';
@@ -31,6 +33,10 @@ 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);
   const {
     title,
@@ -39,6 +45,16 @@ export default function Link(props) {
     date_type
   } = props.link;
   const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
+
+  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.rce_ux_improvements) {
+    var _context;
+
+    internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
+
+    const publishable = !_includesInstanceProperty(_context = ['navigation', 'announcements']).call(_context, type);
+    internalLink['data-published'] = publishable ? published : null;
+  }
+
   const Icon = getIcon(type);
   const color = published ? 'success' : 'primary';
   let dateString = null;
@@ -92,7 +108,14 @@ export default function Link(props) {
 
   function handleLinkClick(e) {
     e.preventDefault();
-    props.onClick(props.link);
+
+    if (props.editing) {
+      props.onEditClick({ ...internalLink,
+        type
+      });
+    } else {
+      props.onClick(internalLink);
+    }
   }
 
   function handleLinkKey(e) {
@@ -103,7 +126,7 @@ export default function Link(props) {
   }
 
   function handleDragStart(e) {
-    dragHtml(e, renderLinkHtml(props.link, props.link.title));
+    dragHtml(e, renderLinkHtml(internalLink, internalLink.title));
   }
 
   function handleDragEnd(_e) {
@@ -116,7 +139,7 @@ export default function Link(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "instructure_links-Link",
-    draggable: true,
+    draggable: !props.editing,
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     onMouseEnter: handleHover,
@@ -129,7 +152,7 @@ export default function Link(props) {
       focused
     } = _ref;
     return /*#__PURE__*/React.createElement(View, {
-      focused: focused,
+      withFocusOutline: focused,
       focusPosition: "inset",
       position: "relative",
       as: "div",
@@ -151,12 +174,12 @@ export default function Link(props) {
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
       margin: "0 xx-small 0 0",
       size: "1.125rem"
-    }, isHovering ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
+    }, isHovering && !props.editing ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
       size: "x-small",
       inline: false
     }) : null), /*#__PURE__*/React.createElement(Flex.Item, {
-      grow: true,
-      shrink: true
+      shouldGrow: true,
+      shouldShrink: true
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
       padding: "0 x-small 0 0"
     }, /*#__PURE__*/React.createElement(Text, {
@@ -167,8 +190,8 @@ export default function Link(props) {
       "data-type": type
     }))), /*#__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",
@@ -191,5 +214,7 @@ Link.propTypes = {
   type: oneOf(['assignments', 'discussions', 'modules', 'quizzes', 'announcements', 'wikiPages', 'navigation']).isRequired,
   onClick: func.isRequired,
   describedByID: string.isRequired,
-  elementRef: func
+  elementRef: func,
+  editing: bool,
+  onEditClick: func
 };

package/lib/rce/plugins/instructure_links/components/LinkOptionsTray/index.js

@@ -155,8 +155,8 @@ export default function LinkOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Link Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -165,18 +165,18 @@ export default function LinkOptionsTray(props) {
     screenReaderLabel: formatMessage('Close')
   })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
-    grow: true,
+    shouldGrow: true,
     margin: "none",
-    shrink: true,
+    shouldShrink: true,
     onSubmit: handleSave
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "space-between",
     direction: "column",
     height: "100%"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
+    shouldGrow: true,
     padding: "small",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement("input", {
     type: "submit",
     style: {

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

@@ -104,7 +104,8 @@ 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, {
-      isUnstyled: true,
+      variant: "unstyled",
+      as: "ul",
       margin: "0"
     }, this.props.collection.links.map((link, index, array) => /*#__PURE__*/React.createElement(List.Item, {
       key: link.href,
@@ -115,7 +116,9 @@ class LinkSet extends Component {
       type: this.props.type,
       onClick: this.props.onLinkClick,
       describedByID: this.describedByID,
-      elementRef: refFor(index, array)
+      elementRef: refFor(index, array),
+      editing: this.props.editing,
+      onEditClick: this.props.onEditClick
     })))));
   }
 
@@ -165,6 +168,8 @@ LinkSet.propTypes = {
   fetchInitialPage: func,
   fetchNextPage: func,
   suppressRenderEmpty: bool,
-  searchString: string
+  searchString: string,
+  editing: bool,
+  onEditClick: func
 };
 export default LinkSet;

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

@@ -32,21 +32,33 @@ function LinksPanel(props) {
     as: "div",
     "data-testid": "instructure_links-LinksPanel"
   }, (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "wikiPages",
     label: formatMessage('Pages')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "assignments",
     label: formatMessage('Assignments')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "quizzes",
     label: formatMessage('Quizzes')
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "announcements",
     label: formatMessage('Announcements')
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "discussions",
     label: formatMessage('Discussions')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "modules",
     label: formatMessage('Modules')
   })), /*#__PURE__*/React.createElement(NavigationPanel, {
@@ -54,7 +66,9 @@ function LinksPanel(props) {
     contextId: props.contextId,
     onLinkClick: props.onLinkClick,
     onChangeAccordion: props.onChangeAccordion,
-    selectedAccordionIndex: props.selectedAccordionIndex
+    selectedAccordionIndex: props.selectedAccordionIndex,
+    editing: props.editing,
+    onEditClick: props.onEditClick
   }));
 }
 
@@ -68,9 +82,12 @@ LinksPanel.propTypes = {
   fetchInitialPage: func,
   fetchNextPage: func,
   onLinkClick: func,
-  canCreatePages: bool
+  canCreatePages: bool,
+  editing: bool,
+  onEditClick: func
 };
 LinksPanel.defaultProps = {
-  selectedAccordionIndex: ''
+  selectedAccordionIndex: '',
+  editing: false
 };
 export default LinksPanel;

package/lib/rce/plugins/instructure_links/components/NavigationPanel.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 { func, string } from 'prop-types';
+import { bool, func, string } from 'prop-types';
 import React from 'react';
 import LinkSet from './LinkSet';
 import formatMessage from '../../../../format-message';
@@ -124,7 +124,9 @@ export default function NavigationPanel(props) {
     type: "navigation",
     collection: collection,
     onLinkClick: props.onLinkClick,
-    contextType: props.contextType
+    contextType: props.contextType,
+    editing: props.editing,
+    onEditClick: props.onEditClick
   })));
 }
 NavigationPanel.propTypes = {
@@ -132,5 +134,7 @@ NavigationPanel.propTypes = {
   contextId: string.isRequired,
   onChangeAccordion: func.isRequired,
   selectedAccordionIndex: string,
-  onLinkClick: func
+  onLinkClick: func,
+  editing: bool,
+  onEditClick: func
 };

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

@@ -66,10 +66,21 @@ 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';
 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';
+}
+
 function selectedAnchorCount(ed) {
   return ed.selection.getRng().cloneContents().querySelectorAll('a').length;
 }
@@ -85,7 +96,7 @@ function getMenuItems(ed) {
     // cursor is on an anchor, edit or remove it
     items = [{
       text: formatMessage('Edit Link'),
-      value: 'instructureTrayToEditLink'
+      value: getCommandName(ed.selection.getNode())
     }, {
       text: formatMessage('Remove Link'),
       value: 'instructureUnlink'
@@ -134,6 +145,7 @@ function removeAnchorFromSelectedElement(ed) {
 function doMenuItem(ed, value) {
   switch (value) {
     case 'instructureTrayToEditLink':
+    case 'instructureTrayForCourseLinks':
     case 'instructureLinkCreate':
       ed.execCommand(value);
       break;
@@ -171,6 +183,10 @@ tinymce.create('tinymce.plugins.InstructureLinksPlugin', {
     });
     ed.addCommand('instructureTrayToEditLink', _ui => {
       trayController.showTrayForEditor(ed);
+    });
+    ed.addCommand('instructureTrayForCourseLinks', () => {
+      ed.selection.select(ed.selection.getNode());
+      return bridge.showTrayForPlugin('course_link_edit', ed.id);
     }); // Register shortcuts
 
     ed.addShortcut('Meta+K', '', 'instructureLinkCreate'); // Register menu item
@@ -274,8 +290,7 @@ tinymce.create('tinymce.plugins.InstructureLinksPlugin', {
 
     ed.ui.registry.addButton('instructure-link-options', {
       onAction() {
-        // show the tray
-        ed.execCommand('instructureTrayToEditLink', false, ed);
+        ed.execCommand(getCommandName(ed.selection.getNode()), false, ed);
       },
 
       text: formatMessage('Link Options'),

package/lib/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -71,8 +71,8 @@ export default function AudioOptionsTray(_ref) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Audio Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -82,17 +82,17 @@ export default function AudioOptionsTray(_ref) {
     screenReaderLabel: formatMessage('Close')
   })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
-    grow: true,
+    shouldGrow: true,
     margin: "none",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "space-between",
     direction: "column",
     height: "100%"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
+    shouldGrow: true,
     padding: "small",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {

package/lib/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -175,8 +175,8 @@ export default function VideoOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Video Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -185,17 +185,17 @@ export default function VideoOptionsTray(props) {
     screenReaderLabel: formatMessage('Close')
   })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
-    grow: true,
+    shouldGrow: true,
     margin: "none",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "space-between",
     direction: "column",
     height: "100%"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
+    shouldGrow: true,
     padding: "small",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {