@instructure/canvas-rce 5.6.0 → 5.6.1

package/lib/translated/ru/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"
   }, "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u0432\u0438\u0434\u0435\u043E")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -182,17 +182,17 @@ export default function VideoOptionsTray(props) {
     screenReaderLabel: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C"
   })))), /*#__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/ru/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
+    }, "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C"), /*#__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" : "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C";
+  }
+
   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"
-  }, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C")), /*#__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: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C"
-  }))), /*#__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/ru/modules/rce/plugins/shared/ContentSelection.js

@@ -69,6 +69,9 @@ export function asLink($element, editor) {
     displayAs = DISPLAY_AS_EMBED_DISABLED;
   }
 
+  const contentType = $link.getAttribute('data-course-type');
+  const fileName = $link.getAttribute('title');
+  const published = $link.getAttribute('data-published') === 'true';
   const isPreviewable = $link.hasAttribute('data-canvas-previewable') || $link.classList.contains('instructure_scribd_file'); // needed to cover docs linked while there was a bug didn't add the data attr.
 
   return {
@@ -78,7 +81,10 @@ export function asLink($element, editor) {
     onlyTextSelected: isOnlyTextSelected(editor.selection.getContent()),
     type,
     isPreviewable,
-    url: $link.href
+    url: $link.href,
+    contentType,
+    fileName,
+    published
   };
 } // the video element is a bit tricky.
 // tinymce won't let me add many attributes to the iframe,

package/lib/translated/ru/modules/rce/plugins/shared/DimensionsInput/index.js

@@ -106,7 +106,7 @@ export default function DimensionsInput(props) {
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "x-small small"
   }, "%")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(DimensionInput, {
     dimensionState: dimensionsState.widthState,
     label: "\u0428\u0438\u0440\u0438\u043D\u0430",
@@ -114,7 +114,7 @@ export default function DimensionsInput(props) {
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "x-small small"
   }, /*#__PURE__*/React.createElement(IconLockLine, null)), /*#__PURE__*/React.createElement(Flex.Item, {
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(DimensionInput, {
     dimensionState: dimensionsState.heightState,
     label: "\u0412\u044B\u0441\u043E\u0442\u0430",

package/lib/translated/ru/modules/rce/plugins/shared/Filter.js

@@ -200,14 +200,15 @@ export default function Filter(props) {
   const searchMessage = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0435 \u043C\u0435\u043D\u0435\u0435 3 \u0437\u043D\u0430\u043A\u043E\u0432 \u0434\u043B\u044F \u043F\u043E\u0438\u0441\u043A\u0430";
   const loadingMessage = "\u0412\u044B\u043F\u043E\u043B\u043D\u044F\u0435\u0442\u0441\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0430, \u043F\u043E\u0434\u043E\u0436\u0434\u0438\u0442\u0435...";
   const msg = isContentLoading ? loadingMessage : searchMessage;
+  const isEdit = contentSubtype === 'edit';
   return /*#__PURE__*/React.createElement(View, {
     display: "block",
     direction: "column"
-  }, renderType(contentType, contentSubtype, onChange, userContextType, containingContextType), contentType !== 'links' && /*#__PURE__*/React.createElement(Flex, {
+  }, !isEdit && renderType(contentType, contentSubtype, onChange, userContextType, containingContextType), contentType !== 'links' && /*#__PURE__*/React.createElement(Flex, {
     margin: "small none none none"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true,
+    shouldGrow: true,
+    shouldShrink: true,
     margin: "none xx-small none none"
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, "\u041F\u043E\u0434\u0442\u0438\u043F \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430"),
@@ -249,8 +250,8 @@ export default function Filter(props) {
     id: "all",
     value: "all"
   }, "\u0412\u0441\u0435"))), contentSubtype !== 'all' && /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true,
+    shouldGrow: true,
+    shouldShrink: true,
     margin: "none none none xx-small"
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, "\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E"),

package/lib/translated/ru/modules/rce/plugins/shared/LinkDisplay.js

@@ -0,0 +1,82 @@
+/*
+ * 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/>.
+ */
+import React, { useEffect } from 'react';
+import { View } from '@instructure/ui-view';
+import { Text } from '@instructure/ui-text';
+import { Flex } from '@instructure/ui-flex';
+import { TextInput } from '@instructure/ui-text-input';
+import formatMessage from '../../../format-message';
+import { showFlashAlert } from '../../../canvasFileBrowser/FlashAlert';
+const EDIT_MESSAGE = "If left empty link, text will display as course link name";
+export const LinkDisplay = _ref => {
+  let {
+    linkText,
+    Icon,
+    placeholderText,
+    linkFileName,
+    published,
+    handleTextChange
+  } = _ref;
+  useEffect(() => {
+    showFlashAlert({
+      message: "Selected " + linkFileName,
+      type: 'info',
+      srOnly: true
+    });
+  }, [linkFileName]);
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    "data-testid": "LinkDisplay"
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div"
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(TextInput, {
+    renderLabel: () => "Text (optional)",
+    onChange: (e, value) => handleTextChange(value),
+    value: linkText,
+    placeholder: placeholderText,
+    messages: [{
+      type: 'hint',
+      text: EDIT_MESSAGE
+    }]
+  })))), /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    margin: "medium none medium none"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    margin: "small none small none"
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, "Current Link")), /*#__PURE__*/React.createElement(Flex, {
+    margin: "small none none none"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "0 x-small 0 small"
+  }, /*#__PURE__*/React.createElement(Text, {
+    "data-testid": "icon-wrapper",
+    color: published ? 'success' : 'primary'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: "x-small"
+  }))), /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "0 x-small 0 0",
+    grow: true,
+    shrink: true,
+    textAlign: "start"
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div"
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-testid": "selected-link-name"
+  }, linkFileName))))));
+};

package/lib/translated/ru/modules/rce/plugins/shared/Upload/ComputerPanel.js

@@ -243,12 +243,10 @@ export default function ComputerPanel(_ref) {
         });
       },
       renderIcon: IconTrashLine,
-      withBackground: false,
-      withBorder: false,
       screenReaderLabel: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u044B\u0439 \u0444\u0430\u0439\u043B: " + filename
     })), /*#__PURE__*/React.createElement(Flex.Item, {
-      grow: true,
-      shrink: true
+      shouldGrow: true,
+      shouldShrink: true
     }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Text, null, filename)))), /*#__PURE__*/React.createElement(View, {
       as: "div",
       width: `${width}px`,

package/lib/translated/ru/modules/rce/plugins/shared/Upload/UnsplashPanel.js

@@ -143,7 +143,7 @@ function Attribution(_ref) {
     "data-fs-exclude": true
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "xx-small",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Button, {
     size: "small",
     variant: "link-inverse",

package/lib/translated/ru/modules/rce/plugins/shared/__tests__/CanvasContentTray.test.js

@@ -16,14 +16,28 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { act, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import Bridge from '../../../../bridge/Bridge';
+import { act, render, waitFor, waitForElementToBeRemoved, fireEvent } from '@testing-library/react';
+import bridge from '../../../../bridge';
 import * as fakeSource from '../../../../rcs/fake';
 import CanvasContentTray from '../CanvasContentTray';
 jest.useFakeTimers();
 jest.mock('../../../../canvasFileBrowser/FileBrowser', () => {
   return jest.fn(() => 'Files Browser');
 });
+jest.mock('../ContentSelection', () => ({
+  getLinkContentFromEditor: jest.fn().mockReturnValue({
+    fileName: 'some filename',
+    contentType: 'wikiPages',
+    url: '/pages',
+    published: true,
+    text: 'some text'
+  })
+}));
+jest.mock('../../../../bridge', () => {
+  const original = jest.requireActual('../../../../bridge');
+  original.default.insertLink = jest.fn();
+  return original;
+});
 describe('RCE Plugins > CanvasContentTray', () => {
   let component;
   let props;
@@ -34,7 +48,7 @@ describe('RCE Plugins > CanvasContentTray', () => {
   function getProps() {
     let override = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     props = {
-      bridge: new Bridge(),
+      bridge,
       editor,
       containingContext: {
         contextType: 'course',
@@ -79,6 +93,37 @@ describe('RCE Plugins > CanvasContentTray', () => {
     return getTray().getAttribute('aria-label');
   }
 
+  describe('Edit Course Links Tray', () => {
+    beforeEach(async () => {
+      renderComponent();
+      await showTrayForPlugin('course_link_edit');
+    });
+    it('is labeled with "Edit Course Link"', async () => {
+      await waitFor(() => {
+        const header = getTray().querySelector('[data-cid="Heading"]').textContent;
+        expect(header).toEqual('Edit Course Link');
+      });
+    });
+    it('renders the LinkDisplay Component', async () => {
+      await waitFor(() => {
+        expect(component.getByTestId('LinkDisplay')).toBeInTheDocument();
+      });
+    });
+    it('replaces the old link when the Replace button is clicked', async () => {
+      const button = await component.findByTestId('replace-link-button');
+      fireEvent.click(button);
+      await waitFor(() => {
+        expect(bridge.insertLink).toHaveBeenCalledWith({
+          forceRename: true,
+          href: '/pages',
+          text: 'some text',
+          title: 'some filename',
+          type: 'wikiPages',
+          published: true
+        });
+      });
+    });
+  });
   describe('Tray Label in course context', () => {
     beforeEach(() => {
       renderComponent();

package/lib/translated/ru/modules/rce/plugins/shared/__tests__/ContentSelection.test.js

@@ -95,6 +95,18 @@ describe('RCE > Plugins > Shared > Content Selection', () => {
         $element.classList.add('no_preview');
         expect(getContentFromElement($element, editor).displayAs).toEqual(DISPLAY_AS_DOWNLOAD_LINK);
       });
+      it('includes the content type if the link contains the data course type', () => {
+        $element.setAttribute('data-course-type', 'wikiPages');
+        expect(getContentFromElement($element, editor).contentType).toEqual('wikiPages');
+      });
+      it('includes the filename if the link contains the title', () => {
+        $element.title = 'Assignment 1';
+        expect(getContentFromElement($element, editor).fileName).toEqual('Assignment 1');
+      });
+      it('includes published if the link contains data-published', () => {
+        $element.setAttribute('data-published', true);
+        expect(getContentFromElement($element, editor).published).toEqual(true);
+      });
     });
     describe('when the given element is a video container element', () => {
       beforeEach(() => {

package/lib/translated/ru/modules/rce/plugins/shared/__tests__/Filter.test.js

@@ -192,6 +192,13 @@ describe('RCE Plugins > Filter', () => {
       expect(component.getByText('User Files')).toBeInTheDocument();
       expect(component.queryByText('Course Files')).toBeNull();
     });
+    it('does not render Content Type when in Edit Course Link Tray', () => {
+      renderComponent({
+        contentSubtype: 'edit'
+      });
+      const contentTypeField = component.queryByLabelText('Content Type');
+      expect(contentTypeField).not.toBeInTheDocument();
+    });
   });
   describe('"Content Subtype" field', () => {
     beforeEach(() => {

package/lib/translated/ru/modules/rce/plugins/shared/__tests__/LinkDisplay.test.js

@@ -0,0 +1,119 @@
+/*
+ * 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/>.
+ */
+import React from 'react';
+import { LinkDisplay } from '../LinkDisplay';
+import { render, fireEvent } from '@testing-library/react';
+import { IconBlank } from '../linkUtils';
+import { showFlashAlert } from '../../../../canvasFileBrowser/FlashAlert';
+jest.mock('../../../../canvasFileBrowser/FlashAlert');
+describe('LinkDisplay', () => {
+  let props;
+  beforeEach(() => {
+    props = {
+      linkText: 'default text',
+      linkFileName: 'default link filename',
+      Icon: IconBlank,
+      placeholderText: 'default placeholder',
+      published: true,
+      handleTextChange: jest.fn()
+    };
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  afterAll(() => {
+    jest.resetAllMocks();
+  });
+
+  const renderComponent = overrideProps => {
+    return render( /*#__PURE__*/React.createElement(LinkDisplay, Object.assign({}, props, overrideProps)));
+  };
+
+  it('text input displays link text prop', () => {
+    const {
+      getByLabelText
+    } = renderComponent();
+    const textInput = getByLabelText(/text \(optional\)/i);
+    expect(textInput.value).toEqual('default text');
+  });
+  it('component displays the icon passed in as a prop', () => {
+    const {
+      container
+    } = renderComponent();
+    const icon = container.querySelector('svg[name="IconBlank"]');
+    expect(icon).toBeInTheDocument();
+  });
+  it('placeholder text matches the prop', () => {
+    const {
+      getByLabelText
+    } = renderComponent();
+    const textInput = getByLabelText(/text \(optional\)/i);
+    expect(textInput.placeholder).toEqual('default placeholder');
+  });
+  it('link file name inside the component matches the prop', () => {
+    const {
+      getByTestId
+    } = renderComponent();
+    const linkName = getByTestId('selected-link-name');
+    expect(linkName.innerHTML).toEqual('default link filename');
+  });
+  it('icon color is success when published', () => {
+    const {
+      getByTestId
+    } = renderComponent();
+    const iconWrapper = getByTestId('icon-wrapper');
+    expect(iconWrapper).toHaveAttribute('color', 'success');
+  });
+  it('icon color is primary when not published', () => {
+    const {
+      getByTestId
+    } = renderComponent({
+      published: false
+    });
+    const iconWrapper = getByTestId('icon-wrapper');
+    expect(iconWrapper).toHaveAttribute('color', 'primary');
+  });
+  it('handletextchange prop is called when user types in textinput', () => {
+    const callback = jest.fn();
+    const {
+      getByLabelText
+    } = renderComponent({
+      handleTextChange: callback
+    });
+    const textInput = getByLabelText(/text \(optional\)/i);
+    fireEvent.input(textInput, {
+      target: {
+        value: 'something'
+      }
+    });
+    expect(callback).toHaveBeenCalledWith('something');
+  });
+  it('announces selection changes', () => {
+    const {
+      rerender
+    } = renderComponent();
+    rerender( /*#__PURE__*/React.createElement(LinkDisplay, Object.assign({}, props, {
+      linkFileName: "Course Link 2"
+    })));
+    expect(showFlashAlert).toHaveBeenLastCalledWith({
+      message: 'Selected Course Link 2',
+      srOnly: true,
+      type: 'info'
+    });
+  });
+});

package/lib/translated/se/modules/rce/RCE.js

@@ -26,7 +26,6 @@ import editorLanguage from './editorLanguage';
 import normalizeLocale from './normalizeLocale';
 import wrapInitCb from './wrapInitCb';
 import tinyRCE from './tinyRCE';
-import defaultTinymceConfig from '../defaultTinymceConfig';
 import getTranslations from '../getTranslations';
 import '@instructure/canvas-theme';
 
@@ -99,11 +98,11 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
       trayProps: rcsProps,
       use_rce_icon_maker,
       features,
-      editorOptions: Object.assign(editorOptions, {
-        selector: `#${textareaId}`,
+      editorOptions: { ...editorOptions,
+        selector: editorOptions.selector || `#${textareaId}`,
         height,
         language: editorLanguage(props.language)
-      })
+      }
     };
     wrapInitCb(mirroredAttrs, iProps.editorOptions);
     return iProps;
@@ -193,7 +192,7 @@ RCE.propTypes = {
   // configurable default timeout value for flash alerts
   flashAlertTimeout: number,
   // user's timezone
-  timezone: string.isRequired,
+  timezone: string,
   // event handlers
   onFocus: func,
   // f(RCEWrapper component)
@@ -210,8 +209,7 @@ RCE.defaultProps = {
     maxAge: 3600000
   },
   defaultContent: '',
-  editorOptions: { ...defaultTinymceConfig
-  },
+  editorOptions: {},
   renderKBShortcutModal: true,
   highContrastCSS: [],
   instRecordDisabled: false,