@instructure/canvas-rce 5.6.0 → 5.6.1

package/lib/translated/ca/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/ca/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"
   }, "Opcions d'enlla\xE7")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -165,18 +165,18 @@ export default function LinkOptionsTray(props) {
     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

@@ -104,7 +104,8 @@ class LinkSet extends Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, {
       id: this.describedByID
     }, "Feu clic per inserir un enlla\xE7 en l'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/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

@@ -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/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_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"
   }, "Opcions de so")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -82,17 +82,17 @@ export default function AudioOptionsTray(_ref) {
     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

@@ -172,8 +172,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"
   }, "Opcions de v\xEDdeo")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -182,17 +182,17 @@ export default function VideoOptionsTray(props) {
     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