@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/lib/translated/ca/modules/rce/plugins/instructure_links/components/LinkOptionsTray/index.js

@@ -155,28 +155,28 @@ 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"
   }, "Opcions d'enlla\xE7")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "static",
-    variant: "icon",
-    onClick: props.onRequestClose
-  }, "Tanca")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: props.onRequestClose,
+    screenReaderLabel: "Tanca"
+  })))), /*#__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/ca/modules/rce/plugins/instructure_links/components/LinkSet.js

@@ -116,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
     })))));
   }
 
@@ -166,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/ca/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: "P\xE0gines"
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "assignments",
     label: "Activitats"
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "quizzes",
     label: "Proves"
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "announcements",
     label: "Anuncis"
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "discussions",
     label: "F\xF2rums"
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "modules",
     label: "Continguts"
   })), /*#__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/ca/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/ca/modules/rce/plugins/instructure_links/components/__tests__/Link.test.js

@@ -18,6 +18,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Link from '../Link';
+import RCEGlobals from '../../../../RCEGlobals';
 
 function renderComponent(props) {
   return render( /*#__PURE__*/React.createElement(Link, Object.assign({
@@ -37,10 +38,13 @@ function queryIconByName(elem, name) {
 
 describe('RCE "Links" Plugin > Link', () => {
   beforeAll(() => {
-    ENV = {
-      // 	UTC/GMT -7 hours
-      TIMEZONE: 'America/Denver'
-    };
+    // UTC/GMT -7 hours
+    RCEGlobals.getConfig = jest.fn().mockReturnValue({
+      timezone: 'America/Denver'
+    });
+  });
+  afterAll(() => {
+    jest.resetAllMocks();
   });
   describe('object type variant', () => {
     const linkTypes = [{
@@ -54,7 +58,12 @@ describe('RCE "Links" Plugin > Link', () => {
       icon: 'IconModule'
     }, {
       type: 'quizzes',
-      icon: 'IconQuiz'
+      icon: 'IconQuiz',
+      quiz_type: 'assignment'
+    }, {
+      type: 'quizzes',
+      icon: 'IconQuiz',
+      quiz_type: 'quizzes.next'
     }, {
       type: 'announcements',
       icon: 'IconAnnouncement'
@@ -77,11 +86,15 @@ describe('RCE "Links" Plugin > Link', () => {
           getByText
         } = renderComponent({
           type: lt.type,
-          link
+          link: { ...link,
+            quiz_type: lt.quiz_type
+          }
         });
         expect(getByText(link.title)).toBeInTheDocument();
         expect(queryIconByName(container, 'IconPublish')).toBeInTheDocument();
-        expect(queryIconByName(container, lt.icon)).toBeInTheDocument();
+        const icon = queryIconByName(container, lt.icon);
+        expect(icon).toBeInTheDocument();
+        expect(icon.getAttribute('data-type')).toEqual(lt.type === 'quizzes' && lt.quiz_type === 'quizzes.next' ? 'quizzes.next' : lt.type);
       });
       it(`renders unpublished ${lt.type}`, () => {
         const link = {
@@ -368,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/ca/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: "Edita l'enlla\xE7",
-      value: 'instructureTrayToEditLink'
+      value: getCommandName(ed.selection.getNode())
     }, {
       text: "Elimina l'enlla\xE7",
       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: "Opcions d'enlla\xE7",

package/lib/translated/ca/modules/rce/plugins/instructure_media_embed/components/Embed.js

@@ -38,8 +38,9 @@ export function Embed(_ref) {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onDismiss,
     offset: "medium",
-    placement: "end"
-  }, "Tanca"), /*#__PURE__*/React.createElement(Heading, null, "Integra")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(TextArea, {
+    placement: "end",
+    screenReaderLabel: "Tanca"
+  }), /*#__PURE__*/React.createElement(Heading, null, "Integra")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(TextArea, {
     maxHeight: "10rem",
     label: "Integra el codi",
     value: embedCode,

package/lib/translated/ca/modules/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -71,27 +71,28 @@ 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"
   }, "Opcions de so")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "static",
-    variant: "icon",
-    onClick: onDismiss
-  }, "Tanca")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onDismiss,
+    screenReaderLabel: "Tanca"
+  })))), /*#__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/translated/ca/modules/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -17,8 +17,7 @@
  */
 import React, { useState } from 'react';
 import { arrayOf, bool, func, number, shape, string } from 'prop-types';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
 import { SimpleSelect } from '@instructure/ui-simple-select';
@@ -129,16 +128,18 @@ export default function VideoOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     on: ['hover', 'focus'],
     placement: "top",
-    tip: /*#__PURE__*/React.createElement(View, {
+    renderTip: /*#__PURE__*/React.createElement(View, {
       display: "block",
       id: "alt-text-label-tooltip",
       maxWidth: "14rem"
     }, tooltipText)
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: IconQuestionLine,
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    renderIcon: IconQuestionLine,
     size: "small",
-    variant: "icon"
-  }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, tooltipText)))));
+    screenReaderLabel: tooltipText,
+    withBackground: false,
+    withBorder: false
+  }))));
   const messagesForSize = [];
 
   if (videoSize !== CUSTOM) {
@@ -171,27 +172,27 @@ 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"
   }, "Opcions de v\xEDdeo")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placemet: "static",
-    variant: "icon",
-    onClick: onRequestClose
-  }, "Tanca")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onRequestClose,
+    screenReaderLabel: "Tanca"
+  })))), /*#__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/translated/ca/modules/rce/plugins/shared/CanvasContentTray.js

@@ -18,7 +18,7 @@
 import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { bool, func, instanceOf, shape, string } from 'prop-types';
 import { Tray } from '@instructure/ui-tray';
-import { CloseButton } from '@instructure/ui-buttons';
+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';
@@ -29,6 +29,9 @@ import Filter, { useFilterSettings } from './Filter';
 import { StoreProvider } from './StoreContext';
 import { getTrayHeight } from './trayUtils';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
+import { getLinkContentFromEditor } from './ContentSelection';
+import { getIcon } from './linkUtils';
+import { LinkDisplay } from './LinkDisplay';
 /**
  * Returns the translated tray label
  * @param {string} contentType - The type of content showing on tray
@@ -183,6 +186,14 @@ const FILTER_SETTINGS_BY_PLUGIN = {
     sortDir: 'desc',
     searchString: ''
   },
+  course_link_edit: {
+    contextType: 'course',
+    contentType: 'links',
+    contentSubtype: 'edit',
+    sortValue: 'date_added',
+    sortDir: 'desc',
+    searchString: ''
+  },
   group_links: {
     contextType: 'group',
     contentType: 'links',
@@ -231,6 +242,11 @@ export default function CanvasContentTray(props) {
   const trayRef = useRef(null);
   const scrollingAreaRef = useRef(null);
   const [filterSettings, setFilterSettings] = useFilterSettings();
+  const [isEditTray, setIsEditTray] = useState(false);
+  const [link, setLink] = useState(null);
+  const [linkText, setLinkText] = useState(null);
+  const [placeholderText, setPlaceholderText] = useState(null);
+  const Icon = getIcon(link === null || link === void 0 ? void 0 : link.type);
   const {
     bridge,
     editor,
@@ -256,6 +272,27 @@ export default function CanvasContentTray(props) {
         ++CanvasContentTray.globalOpenCount;
         setFilterSettings(FILTER_SETTINGS_BY_PLUGIN[plugin]);
         setIsOpen(true);
+
+        if (plugin === 'course_link_edit') {
+          setIsEditTray(true);
+          const {
+            fileName,
+            contentType,
+            url,
+            published,
+            text
+          } = getLinkContentFromEditor(editor.editor);
+          setLink({
+            title: fileName,
+            type: contentType,
+            href: url,
+            published
+          });
+          setLinkText(text);
+          setPlaceholderText(text);
+        } else {
+          setIsEditTray(false);
+        }
       },
 
       hideTray(forceClose) {
@@ -291,6 +328,31 @@ export default function CanvasContentTray(props) {
     onTrayClosing && onTrayClosing(false); // tell RCEWrapper we're closed
   }
 
+  function handleReplaceButton() {
+    handleDismissTray();
+    const newLink = { ...link,
+      forceRename: true,
+      text: linkText || placeholderText
+    };
+    bridge.insertLink(newLink);
+  }
+
+  function renderFooter() {
+    return /*#__PURE__*/React.createElement(Flex.Item, {
+      background: "secondary",
+      borderWidth: "small none none none",
+      padding: "small medium",
+      textAlign: "end"
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: handleDismissTray
+    }, "Cancel\xB7la"), /*#__PURE__*/React.createElement(Button, {
+      margin: "0 0 0 x-small",
+      color: "primary",
+      onClick: handleReplaceButton,
+      "data-testid": "replace-link-button"
+    }, "Replace"));
+  }
+
   function handleFilterChange(newFilter, onChangeContext, onChangeSearchString, onChangeSortBy) {
     const newFilterSettings = { ...newFilter
     };
@@ -340,6 +402,10 @@ export default function CanvasContentTray(props) {
     }
   }
 
+  function getHeader() {
+    return isEditTray ? "Edit Course Link" : "Afegeix";
+  }
+
   return /*#__PURE__*/React.createElement(StoreProvider, Object.assign({}, props, {
     key: CanvasContentTray.globalOpenCount,
     contextType: filterSettings.contextType || props.contextType
@@ -397,12 +463,19 @@ export default function CanvasContentTray(props) {
     shouldshrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     level: "h2"
-  }, "Afegeix")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, getHeader())), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     onClick: handleDismissTray,
     "data-testid": "CloseButton_ContentTray",
     screenReaderLabel: "Tanca"
-  }))), /*#__PURE__*/React.createElement(Filter, Object.assign({}, filterSettings, {
+  }))), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
+    linkText: linkText,
+    Icon: Icon,
+    placeholderText: placeholderText,
+    linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
+    published: (link === null || link === void 0 ? void 0 : link.published) || false,
+    handleTextChange: setLinkText
+  }), /*#__PURE__*/React.createElement(Filter, Object.assign({}, filterSettings, {
     userContextType: props.contextType,
     containingContextType: props.containingContext.contextType,
     onChange: newFilter => {
@@ -411,10 +484,17 @@ export default function CanvasContentTray(props) {
     isContentLoading: isLoading(contentProps),
     use_rce_icon_maker: props.use_rce_icon_maker
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldgrow: true,
-    shouldshrink: true,
+    grow: true,
+    shrink: true,
     margin: "xx-small xxx-small 0",
     elementRef: el => scrollingAreaRef.current = el
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "space-between",
+    direction: "column",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(DynamicPanel, Object.assign({
     contentType: filterSettings.contentType,
     contentSubtype: filterSettings.contentSubtype,
@@ -430,8 +510,10 @@ export default function CanvasContentTray(props) {
     context: {
       type: props.contextType,
       id: props.contextId
-    }
-  }, contentProps))))) : null));
+    },
+    editing: isEditTray,
+    onEditClick: setLink
+  }, contentProps)))), isEditTray && renderFooter()))) : null));
 }
 CanvasContentTray.globalOpenCount = 0;
 
@@ -469,6 +551,7 @@ CanvasContentTray.propTypes = {
   }).isRequired,
   onTrayClosing: func,
   // called with true when the tray starts closing, false once closed
+  onEditClick: func,
   ...trayPropsMap
 }; // the way we define trayProps, eslint doesn't recognize the following as props
 

package/lib/translated/ca/modules/rce/plugins/shared/ColorInput.js

@@ -152,14 +152,15 @@ export const ColorInput = _ref => {
       }, isOpen ? /*#__PURE__*/React.createElement(IconArrowOpenUpLine, null) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, null))
     }, /*#__PURE__*/React.createElement(CloseButton, {
       placement: "end",
-      onClick: () => setIsOpen(false)
-    }, "Tanca"), /*#__PURE__*/React.createElement(Flex, {
+      onClick: () => setIsOpen(false),
+      screenReaderLabel: "Tanca"
+    }), /*#__PURE__*/React.createElement(Flex, {
       alignItems: "center",
       as: "div",
       justifyItems: requireColor ? 'start' : 'center',
       padding: "x-large x-small small",
       width: "175px",
-      wrapItems: true,
+      wrap: "wrap",
       "data-testid": `${name}-popover`
     }, requireColor ? colorPreviews.slice(0, -1) : colorPreviews));
   }