@instructure/canvas-rce 5.6.17 → 5.7.0

package/es/rce/StatusBar.js

@@ -24,7 +24,7 @@ import { Button, IconButton, CondensedButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Badge } from '@instructure/ui-badge';
-import { ApplyTheme } from '@instructure/ui-themeable';
+import { InstUISettingsProvider } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
 import { SVGIcon } from '@instructure/ui-svg-images';
 import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine } from '@instructure/ui-icons';
@@ -190,10 +190,12 @@ export default function StatusBar(props) {
       return button;
     }
 
-    return /*#__PURE__*/React.createElement(ApplyTheme, {
+    return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
       theme: {
-        [Badge.theme]: {
-          colorPrimary: props.a11yBadgeColor
+        componentOverrides: {
+          Badge: {
+            colorPrimary: props.a11yBadgeColor
+          }
         }
       }
     }, /*#__PURE__*/React.createElement(Badge, {

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

@@ -17,7 +17,7 @@
  */
 import React from 'react';
 import { bool, func, string } from 'prop-types';
-import { collectionsShape } from './propTypes';
+import { collectionsShape, linkShape } from './propTypes';
 import AccordionSection from './AccordionSection';
 import LinkSet from './LinkSet';
 export default function CollectionPanel(props) {
@@ -52,7 +52,8 @@ export default function CollectionPanel(props) {
     contextType: props.contextType,
     searchString: props.searchString,
     editing: props.editing,
-    onEditClick: props.onEditClick
+    onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink
   })));
 }
 CollectionPanel.propTypes = {
@@ -72,7 +73,8 @@ CollectionPanel.propTypes = {
   onChangeAccordion: func.isRequired,
   selectedAccordionIndex: string,
   editing: bool,
-  onEditClick: func
+  onEditClick: func,
+  selectedLink: linkShape
 };
 CollectionPanel.defaultProps = {
   renderNewPageLink: false,

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

@@ -22,7 +22,7 @@ import formatMessage from '../../../../format-message';
 import { renderLink as renderLinkHtml } from '../../../contentRendering';
 import dragHtml from '../../../../sidebar/dragHtml';
 import { applyTimezoneOffsetToDate } from '../../shared/dateUtils';
-import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
@@ -192,7 +192,9 @@ export default function Link(props) {
     }, /*#__PURE__*/React.createElement(View, {
       as: "div",
       margin: "0"
-    }, title), dateString ? /*#__PURE__*/React.createElement(View, {
+    }, title, props.isSelected && /*#__PURE__*/React.createElement(ScreenReaderContent, {
+      "data-testid": "selected-link-indicator"
+    }, formatMessage('Selected'))), dateString ? /*#__PURE__*/React.createElement(View, {
       as: "div"
     }, dateString) : null), 'published' in props.link && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(AccessibleContent, {
       alt: publishedMsg
@@ -212,5 +214,6 @@ Link.propTypes = {
   describedByID: string.isRequired,
   elementRef: func,
   editing: bool,
-  onEditClick: func
+  onEditClick: func,
+  isSelected: bool
 };

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

@@ -17,7 +17,7 @@
  */
 import React, { Component, useRef } from 'react';
 import { bool, func, string } from 'prop-types';
-import { linksShape, linkType } from './propTypes';
+import { linkShape, linksShape, linkType } from './propTypes';
 import formatMessage from '../../../../format-message';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { List } from '@instructure/ui-list';
@@ -89,6 +89,13 @@ class LinkSet extends Component {
     return !this.hasLinks(props) && !props.collection.hasMore && !props.collection.isLoading;
   }
 
+  compareURLs() {
+    let url1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let url2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    if (url1 === '' || url2 === '') return false;
+    return url1.split('?')[0] === url2.split('?')[0];
+  }
+
   renderLinks(lastItemRef) {
     function refFor(index, array) {
       if (!lastItemRef || index !== array.length - 1) {
@@ -107,19 +114,24 @@ class LinkSet extends Component {
       variant: "unstyled",
       as: "ul",
       margin: "0"
-    }, this.props.collection.links.map((link, index, array) => /*#__PURE__*/React.createElement(List.Item, {
-      key: link.href,
-      spacing: "none",
-      padding: "0"
-    }, /*#__PURE__*/React.createElement(Link, {
-      link: link,
-      type: this.props.type,
-      onClick: this.props.onLinkClick,
-      describedByID: this.describedByID,
-      elementRef: refFor(index, array),
-      editing: this.props.editing,
-      onEditClick: this.props.onEditClick
-    })))));
+    }, this.props.collection.links.map((link, index, array) => {
+      var _this$props$selectedL;
+
+      return /*#__PURE__*/React.createElement(List.Item, {
+        key: link.href,
+        spacing: "none",
+        padding: "0"
+      }, /*#__PURE__*/React.createElement(Link, {
+        link: link,
+        type: this.props.type,
+        onClick: this.props.onLinkClick,
+        describedByID: this.describedByID,
+        elementRef: refFor(index, array),
+        editing: this.props.editing,
+        onEditClick: this.props.onEditClick,
+        isSelected: this.compareURLs((_this$props$selectedL = this.props.selectedLink) === null || _this$props$selectedL === void 0 ? void 0 : _this$props$selectedL.href, link.href)
+      }));
+    })));
   }
 
   renderEmptyIndicator() {
@@ -171,6 +183,7 @@ LinkSet.propTypes = {
   suppressRenderEmpty: bool,
   searchString: string,
   editing: bool,
-  onEditClick: func
+  onEditClick: func,
+  selectedLink: linkShape
 };
 export default LinkSet;

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

@@ -18,7 +18,7 @@
 import React from 'react';
 import { bool, func, string } from 'prop-types';
 import formatMessage from '../../../../format-message';
-import { collectionsShape } from './propTypes';
+import { collectionsShape, linkShape } from './propTypes';
 import NavigationPanel from './NavigationPanel';
 import CollectionPanel from './CollectionPanel';
 import { View } from '@instructure/ui-view';
@@ -34,31 +34,37 @@ function LinksPanel(props) {
   }, (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "wikiPages",
     label: formatMessage('Pages')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "assignments",
     label: formatMessage('Assignments')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "quizzes",
     label: formatMessage('Quizzes')
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "announcements",
     label: formatMessage('Announcements')
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "discussions",
     label: formatMessage('Discussions')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
     editing: props.editing,
     onEditClick: props.onEditClick,
+    selectedLink: props.selectedLink,
     collection: "modules",
     label: formatMessage('Modules')
   })), /*#__PURE__*/React.createElement(NavigationPanel, {
@@ -84,7 +90,8 @@ LinksPanel.propTypes = {
   onLinkClick: func,
   canCreatePages: bool,
   editing: bool,
-  onEditClick: func
+  onEditClick: func,
+  selectedLink: linkShape
 };
 LinksPanel.defaultProps = {
   selectedAccordionIndex: '',

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialog.js

@@ -31,6 +31,7 @@ import { ExternalToolDialogTray } from './ExternalToolDialogTray';
 import { ExternalToolDialogModal } from './ExternalToolDialogModal';
 import { showFlashAlert } from '../../../../../common/FlashAlert';
 import { parseUrlOrNull } from '../../../../../util/url-util';
+const FlexItem = Flex.Item;
 export default class ExternalToolDialog extends React.Component {
   constructor() {
     super(...arguments);
@@ -245,7 +246,7 @@ export default class ExternalToolDialog extends React.Component {
     }, formatMessage('The following content is partner provided'))), !state.iframeLoaded && /*#__PURE__*/React.createElement(Flex, {
       alignItems: "center",
       justifyItems: "center"
-    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
+    }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Spinner, {
       renderTitle: formatMessage('Loading External Tool'),
       size: "large",
       margin: "0 0 0 medium"

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogTray.js

@@ -23,6 +23,7 @@ import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
 import { CloseButton } from '@instructure/ui-buttons';
 import formatMessage from 'format-message';
+const FlexItem = Flex.Item;
 export function ExternalToolDialogTray(props) {
   const {
     label,
@@ -55,9 +56,9 @@ export function ExternalToolDialogTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     padding: "small"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, /*#__PURE__*/React.createElement(FlexItem, {
     shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onCloseButton,
     size: "small",
     screenReaderLabel: formatMessage('Close')

package/es/rce/plugins/instructure_wordcount/components/WordCountModal.js

@@ -40,12 +40,12 @@ const renderBody = (headers, rows) => {
   }, /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement(Row, null, headers.map(_ref => {
     let {
       id,
-      label
+      getLabel
     } = _ref;
     return /*#__PURE__*/React.createElement(ColHeader, {
       key: id,
       id: id
-    }, label);
+    }, getLabel());
   }))), /*#__PURE__*/React.createElement(Body, null, rows.map(_ref2 => {
     let {
       label,

package/es/rce/plugins/instructure_wordcount/utils/tableContent.js

@@ -19,20 +19,20 @@ import { countContent } from './countContent';
 import formatMessage from '../../../../format-message';
 export const HEADERS = [{
   id: 'count',
-  label: formatMessage('Count')
+  getLabel: () => formatMessage('Count')
 }, {
   id: 'document',
-  label: formatMessage('Document')
+  getLabel: () => formatMessage('Document')
 }, {
   id: 'selection',
-  label: formatMessage('Selection')
+  getLabel: () => formatMessage('Selection')
 }];
-const ROW_LABELS = [['words', formatMessage('Words')], ['chars-no-spaces', formatMessage('Characters (no spaces)')], ['chars', formatMessage('Characters')]];
+const ROW_LABELS = [['words', () => formatMessage('Words')], ['chars-no-spaces', () => formatMessage('Characters (no spaces)')], ['chars', () => formatMessage('Characters')]];
 export const generateRows = ed => {
   return ROW_LABELS.map(_ref => {
-    let [category, label] = _ref;
+    let [category, getLabel] = _ref;
     return {
-      label,
+      label: getLabel(),
       documentCount: countContent(ed, 'body', category),
       selectionCount: countContent(ed, 'selection', category)
     };

package/es/rce/plugins/shared/CanvasContentTray.js

@@ -30,6 +30,7 @@ import { getTrayHeight } from './trayUtils';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { getLinkContentFromEditor } from './ContentSelection';
 import { LinkDisplay } from './LinkDisplay';
+import { showFlashAlert } from '../../../common/FlashAlert';
 /**
  * Returns the translated tray label
  * @param {string} contentType - The type of content showing on tray
@@ -359,6 +360,11 @@ export default function CanvasContentTray(props) {
       text: linkText
     };
     bridge.insertLink(newLink);
+    showFlashAlert({
+      message: formatMessage('Updated link'),
+      type: 'success',
+      srOnly: true
+    });
   }
 
   function renderFooter() {
@@ -512,7 +518,8 @@ export default function CanvasContentTray(props) {
       id: props.contextId
     },
     editing: isEditTray,
-    onEditClick: setLink
+    onEditClick: setLink,
+    selectedLink: link
   }, storeProps)))), isEditTray && renderFooter()))) : null);
 }
 CanvasContentTray.globalOpenCount = 0;

package/es/rce/plugins/shared/LinkDisplay.js

@@ -24,7 +24,9 @@ import formatMessage from '../../../format-message';
 import { showFlashAlert } from '../../../common/FlashAlert';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { getIcon, getFriendlyLinkType } from './linkUtils';
-const EDIT_MESSAGE = formatMessage('If left empty, link text will display as course link name');
+
+const getEditMessage = () => formatMessage('If left empty, link text will display as course link name');
+
 export const LinkDisplay = _ref => {
   let {
     linkText,
@@ -59,7 +61,7 @@ export const LinkDisplay = _ref => {
     placeholder: placeholderText,
     messages: [{
       type: 'hint',
-      text: EDIT_MESSAGE
+      text: getEditMessage()
     }]
   })))), /*#__PURE__*/React.createElement(View, {
     as: "div",

package/es/rce/plugins/tinymce-a11y-checker/components/checker.js

@@ -36,7 +36,7 @@ import { TextInput } from '@instructure/ui-text-input';
 import { TextArea } from '@instructure/ui-text-area';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { IconQuestionLine } from '@instructure/ui-icons';
-import { ApplyTheme } from '@instructure/ui-themeable';
+import { InstUISettingsProvider } from '@instructure/emotion';
 import { Alert } from '@instructure/ui-alerts';
 import ColorField from './color-field';
 import PlaceholderSVG from './placeholder-svg';
@@ -282,7 +282,10 @@ export default class Checker extends React.Component {
       }
 
       const errorIndex = this.state.errorIndex;
-      this.check(() => this.setErrorIndex(errorIndex));
+      this.check(() => {
+        this.setErrorIndex(errorIndex);
+        this.props.onFixError(this.state.errors);
+      });
     }
   }
 
@@ -430,10 +433,12 @@ export default class Checker extends React.Component {
       onClick: () => this.setState({
         showWhyPopover: false
       })
-    }, formatMessage('Close')), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, rule.why()), /*#__PURE__*/React.createElement("p", null, rule.link && rule.link.length && /*#__PURE__*/React.createElement(ApplyTheme, {
+    }, formatMessage('Close')), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, rule.why()), /*#__PURE__*/React.createElement("p", null, rule.link && rule.link.length && /*#__PURE__*/React.createElement(InstUISettingsProvider, {
       theme: {
-        [Link.theme]: {
-          textDecoration: 'underline'
+        componentOverrides: {
+          Link: {
+            textDecoration: 'underline'
+          }
         }
       }
     }, /*#__PURE__*/React.createElement(Link, {
@@ -547,5 +552,6 @@ export default class Checker extends React.Component {
 
 }
 Checker.defaultProps = {
-  additionalRules: []
+  additionalRules: [],
+  onFixError: noop
 };

package/es/rce/plugins/tinymce-a11y-checker/plugin.js

@@ -33,7 +33,8 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
         done,
         config,
         additionalRules,
-        mountNode
+        mountNode,
+        onFixError
       } = _ref;
 
       if (!isCheckerOpen) {
@@ -42,7 +43,8 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
           editor: ed,
           additionalRules: additionalRules,
           mountNode: mountNode,
-          onClose: () => isCheckerOpen = false
+          onClose: () => isCheckerOpen = false,
+          onFixError: onFixError
         }), container, function () {
           // this is a workaround for react 16 since ReactDOM.render is not
           // guaranteed to return the instance synchronously (especially if called