@instructure/canvas-rce 5.6.0 → 5.6.1

package/lib/translated/en/modules/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/translated/en/modules/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/translated/en/modules/rce/plugins/instructure_icon_maker/svg/__tests__/metadata.test.js

@@ -40,6 +40,7 @@ describe('buildMetadata() / parseMetadata()', () => {
       externalStyle,
       externalWidth,
       externalHeight,
+      error,
       ...embeddedMetadata
     } = settings;
     expect(parseMetadata(svg)).toEqual(embeddedMetadata);

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/svg/__tests__/settings.test.js

@@ -47,6 +47,7 @@ describe('useSvgSettings()', () => {
           "encodedImage": "",
           "encodedImageName": "",
           "encodedImageType": "",
+          "error": null,
           "externalHeight": null,
           "externalStyle": null,
           "externalWidth": null,
@@ -99,6 +100,7 @@ describe('useSvgSettings()', () => {
             "encodedImage": "",
             "encodedImageName": "",
             "encodedImageType": "",
+            "error": null,
             "externalHeight": null,
             "externalStyle": null,
             "externalWidth": null,
@@ -221,6 +223,7 @@ describe('useSvgSettings()', () => {
           "encodedImage": "",
           "encodedImageName": "",
           "encodedImageType": "",
+          "error": null,
           "externalHeight": null,
           "externalStyle": null,
           "externalWidth": null,
@@ -305,6 +308,7 @@ describe('useSvgSettings()', () => {
             "encodedImage": "",
             "encodedImageName": "",
             "encodedImageType": "",
+            "error": null,
             "externalHeight": null,
             "externalStyle": null,
             "externalWidth": null,
@@ -366,6 +370,7 @@ describe('useSvgSettings()', () => {
             "encodedImage": "",
             "encodedImageName": "",
             "encodedImageType": "",
+            "error": null,
             "externalHeight": null,
             "externalStyle": null,
             "externalWidth": null,
@@ -427,6 +432,7 @@ describe('useSvgSettings()', () => {
             "encodedImage": "",
             "encodedImageName": "",
             "encodedImageType": "",
+            "error": null,
             "externalHeight": null,
             "externalStyle": null,
             "externalWidth": null,
@@ -484,6 +490,7 @@ describe('useSvgSettings()', () => {
             "encodedImage": "",
             "encodedImageName": "",
             "encodedImageType": "",
+            "error": null,
             "externalHeight": null,
             "externalStyle": null,
             "externalWidth": null,
@@ -521,6 +528,7 @@ describe('useSvgSettings()', () => {
             "encodedImage": "",
             "encodedImageName": "",
             "encodedImageType": "",
+            "error": null,
             "externalHeight": null,
             "externalStyle": null,
             "externalWidth": null,

package/lib/translated/en/modules/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/translated/en/modules/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/translated/en/modules/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) {
@@ -157,8 +157,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"
   }, "Image Options")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -167,9 +167,9 @@ export default function ImageOptionsTray(props) {
     screenReaderLabel: "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/translated/en/modules/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/translated/en/modules/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/translated/en/modules/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;
@@ -82,7 +98,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) {
@@ -93,7 +116,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) {
@@ -106,7 +129,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,
@@ -119,7 +142,7 @@ export default function Link(props) {
       focused
     } = _ref;
     return /*#__PURE__*/React.createElement(View, {
-      focused: focused,
+      withFocusOutline: focused,
       focusPosition: "inset",
       position: "relative",
       as: "div",
@@ -141,12 +164,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, {
@@ -157,8 +180,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",
@@ -181,5 +204,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/translated/en/modules/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"
   }, "Link Options")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -165,18 +165,18 @@ export default function LinkOptionsTray(props) {
     screenReaderLabel: "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/translated/en/modules/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
     }, "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/translated/en/modules/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: "Pages"
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "assignments",
     label: "Assignments"
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "quizzes",
     label: "Quizzes"
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "announcements",
     label: "Announcements"
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "discussions",
     label: "Discussions"
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "modules",
     label: "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/translated/en/modules/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/translated/en/modules/rce/plugins/instructure_links/components/__tests__/Link.test.js

@@ -381,4 +381,88 @@ describe('RCE "Links" Plugin > Link', () => {
       expect(container.querySelectorAll('svg[name="IconDragHandle"]')).toHaveLength(1);
     });
   });
+  describe('When in edit link tray', () => {
+    const props = {
+      onEditClick: jest.fn(),
+      editing: true,
+      link: {
+        href: 'the_url',
+        title: 'object title',
+        published: true
+      }
+    };
+    beforeAll(() => {
+      RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+        rce_ux_improvements: true
+      });
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    it('calls onEditClick when clicked', () => {
+      const {
+        getByText
+      } = renderComponent(props);
+      getByText(props.link.title).click();
+      expect(props.onEditClick).toHaveBeenCalled();
+    });
+    it('calls onEditClick on <Enter>', () => {
+      const {
+        getByText
+      } = renderComponent(props);
+      const btn = getByText(props.link.title);
+      fireEvent.keyDown(btn, {
+        keyCode: 13
+      });
+      expect(props.onEditClick).toHaveBeenCalled();
+    });
+    it('calls onEditClick on <Space>', () => {
+      const {
+        getByText
+      } = renderComponent(props);
+      const btn = getByText(props.link.title);
+      fireEvent.keyDown(btn, {
+        keyCode: 32
+      });
+      expect(props.onEditClick).toHaveBeenCalled();
+    });
+    it('calls onEditClick with the appropriate args for a publishable link type', () => {
+      const {
+        getByText
+      } = renderComponent(props);
+      getByText(props.link.title).click();
+      expect(props.onEditClick).toHaveBeenCalledWith({
+        href: 'the_url',
+        published: true,
+        title: 'object title',
+        type: 'assignments',
+        'data-course-type': 'assignments',
+        'data-published': true
+      });
+    });
+    it('calls onEditClick with the appropriate args for a non-publishable link type', () => {
+      const {
+        getByText
+      } = renderComponent({ ...props,
+        type: 'navigation'
+      });
+      getByText(props.link.title).click();
+      expect(props.onEditClick).toHaveBeenCalledWith({
+        href: 'the_url',
+        published: true,
+        title: 'object title',
+        type: 'navigation',
+        'data-course-type': 'navigation',
+        'data-published': null
+      });
+    });
+    it('does not show the drag handle when hovering', () => {
+      const {
+        container,
+        getByTestId
+      } = renderComponent(props);
+      fireEvent.mouseEnter(getByTestId('instructure_links-Link'));
+      expect(container.querySelectorAll('svg[name="IconDragHandle"]')).toHaveLength(0);
+    });
+  });
 });

package/lib/translated/en/modules/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: "Edit Link",
-      value: 'instructureTrayToEditLink'
+      value: getCommandName(ed.selection.getNode())
     }, {
       text: "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: "Link Options",

package/lib/translated/en/modules/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"
   }, "Audio Options")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -82,17 +82,17 @@ export default function AudioOptionsTray(_ref) {
     screenReaderLabel: "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, {