@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -15,6 +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 React, { useEffect, useState } from 'react';
 import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
@@ -83,56 +84,50 @@ const NAMED_COLORS = [{
   color: '#FFFFFF',
   name: formatMessage('White')
 }, null];
-export const ColorInput = _ref => {
-  var _NAMED_COLORS$find;
-
-  let {
-    color,
-    label,
-    name,
-    onChange,
-    popoverMountNode,
-    width = '11rem',
-    readonly = false,
-    requireColor = false
-  } = _ref;
+export const ColorInput = ({
+  color,
+  label,
+  name,
+  onChange,
+  popoverMountNode,
+  width = '11rem',
+  readonly = false,
+  requireColor = false
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState(color);
-  const colorName = (_NAMED_COLORS$find = NAMED_COLORS.find(c => (c === null || c === void 0 ? void 0 : c.color) === color)) === null || _NAMED_COLORS$find === void 0 ? void 0 : _NAMED_COLORS$find.name;
+  const colorName = NAMED_COLORS.find(c => c?.color === color)?.name;
   useEffect(() => {
     setInputValue(color);
-  }, [color]); // fire onChange in case value is valid
+  }, [color]);
 
+  // fire onChange in case value is valid
   const handleColorChange = hex => {
     if (isValidHex(hex)) {
       onChange(hex);
     }
-
     if (!hex || !hex.length) {
       onChange(null);
     }
-
     setInputValue(hex);
-  }; // reset the input value on blur if invalid
-
+  };
 
+  // reset the input value on blur if invalid
   const handleInputBlur = () => {
     if (!inputValue || inputValue.length > 0 && !isValidHex(inputValue)) {
       setInputValue(color);
     }
   };
-
   const colorPreviews = NAMED_COLORS.map(c => /*#__PURE__*/React.createElement(ColorPreview, {
-    key: `${name}-${c === null || c === void 0 ? void 0 : c.color}`,
-    color: c === null || c === void 0 ? void 0 : c.color,
-    name: c === null || c === void 0 ? void 0 : c.name,
+    key: `${name}-${c?.color}`,
+    color: c?.color,
+    name: c?.name,
     disabled: !isOpen,
     onSelect: () => {
-      handleColorChange(c === null || c === void 0 ? void 0 : c.color);
+      handleColorChange(c?.color);
       setIsOpen(false);
     }
   }));
-
   function renderPopover() {
     const pickerLabel = colorName ? formatMessage('Color Picker ({colorName} selected)', {
       colorName
@@ -167,7 +162,6 @@ export const ColorInput = _ref => {
       "data-testid": `${name}-popover`
     }, requireColor ? colorPreviews.slice(0, -1) : colorPreviews));
   }
-
   return /*#__PURE__*/React.createElement(View, {
     as: "div"
   }, /*#__PURE__*/React.createElement(TextInput, {
@@ -190,15 +184,13 @@ export const ColorInput = _ref => {
     interaction: readonly ? 'readonly' : undefined
   }));
 };
-
-function ColorPreview(_ref2) {
-  let {
-    color,
-    name,
-    disabled,
-    margin = 'xxx-small',
-    onSelect
-  } = _ref2;
+function ColorPreview({
+  color,
+  name,
+  disabled,
+  margin = 'xxx-small',
+  onSelect
+}) {
   return /*#__PURE__*/React.createElement(BaseButton, {
     interaction: disabled ? 'readonly' : undefined,
     isCondensed: true,
@@ -216,17 +208,13 @@ function ColorPreview(_ref2) {
     testId: `colorPreview-${color || 'none'}`
   }));
 }
-
 function isValidHex(color) {
   if (!color) return false;
-
   switch (color.length) {
     case 4:
       return /^#[0-9A-F]{3}$/i.test(color);
-
     case 7:
       return /^#[0-9A-F]{6}$/i.test(color);
-
     default:
       return false;
   }

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

@@ -15,15 +15,15 @@
  * 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 { bool, element, oneOfType, arrayOf } from 'prop-types';
 import { Tooltip } from '@instructure/ui-tooltip';
-export const ConditionalTooltip = _ref => {
-  let {
-    condition,
-    children,
-    ...tooltipProps
-  } = _ref;
+export const ConditionalTooltip = ({
+  condition,
+  children,
+  ...tooltipProps
+}) => {
   return condition ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 ConditionalTooltip.propTypes = {

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

@@ -15,13 +15,13 @@
  * 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 { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedOptions';
-import { isOnlyTextSelected } from '../../contentInsertionUtils'; // eslint-disable-next-line import/no-nodejs-modules
 
-import * as url from 'url';
+import { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedOptions';
+import { isOnlyTextSelected } from '../../contentInsertionUtils';
 import formatMessage from '../../../format-message';
 import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
 import RCEGlobals from '../../RCEGlobals';
+import { parseUrlPath } from '../../../util/url-util';
 const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
 export const LINK_TYPE = 'link';
 export const FILE_LINK_TYPE = 'file-link';
@@ -34,38 +34,29 @@ export const DISPLAY_AS_EMBED = 'embed';
 export const DISPLAY_AS_EMBED_DISABLED = 'embed-disabled';
 export const DISPLAY_AS_DOWNLOAD_LINK = 'download-link';
 export function asImageEmbed($element) {
-  const nodeName = $element === null || $element === void 0 ? void 0 : $element.nodeName.toLowerCase();
-
+  const nodeName = $element?.nodeName.toLowerCase();
   if (nodeName !== 'img') {
     return null;
   }
-
-  return { ...fromImageEmbed($element),
+  return {
+    ...fromImageEmbed($element),
     $element,
     type: IMAGE_EMBED_TYPE
   };
 }
 export function asLink($element, editor) {
-  var _$link;
-
   let $link = $element;
-
-  if (((_$link = $link) === null || _$link === void 0 ? void 0 : _$link.tagName) !== 'A') {
+  if ($link?.tagName !== 'A') {
     // the user may have selected some text that is w/in a link
     // but didn't include the <a>. Let's see if that's true
-    $link = editor.dom.getParent($link, 'a[href]');
+    $link = editor && editor.dom.getParent($link, 'a[href]');
   }
-
   if (!$link || $link.tagName !== 'A' || !$link.href) {
     return null;
   }
-
-  const {
-    pathname
-  } = url.parse($link.href);
+  const pathname = parseUrlPath($link.href);
   const type = FILE_DOWNLOAD_PATH_REGEX.test(pathname) ? FILE_LINK_TYPE : LINK_TYPE;
   let displayAs = DISPLAY_AS_LINK;
-
   if ($link.classList.contains('no_preview')) {
     displayAs = DISPLAY_AS_DOWNLOAD_LINK;
   } else if ($link.classList.contains('auto_open')) {
@@ -73,7 +64,6 @@ export function asLink($element, editor) {
   } else if ($link.classList.contains('inline_disabled')) {
     displayAs = DISPLAY_AS_EMBED_DISABLED;
   }
-
   const contentType = $link.getAttribute('data-course-type');
   const fileName = $link.getAttribute('title');
   const published = $link.getAttribute('data-published') === 'true';
@@ -91,7 +81,9 @@ export function asLink($element, editor) {
     fileName,
     published
   };
-} // the video element is a bit tricky.
+}
+
+// the video element is a bit tricky.
 // tinymce won't let me add many attributes to the iframe,
 // even though I've listed them in tinymce.config.js
 // extended_valid_elements.
@@ -99,99 +91,76 @@ export function asLink($element, editor) {
 // and it's attributes, even though this could change with future
 // tinymce releases.
 // see https://github.com/tinymce/tinymce/issues/5181
-
 export function asVideoElement($element) {
-  var _$videoElem$parentEle;
-
   const $videoElem = findMediaPlayerIframe($element);
-
   if (!isVideoElement($videoElem) && !isStudioEmbeddedMedia($videoElem)) {
     return null;
   }
-
-  return { ...fromVideoEmbed($videoElem),
+  return {
+    ...fromVideoEmbed($videoElem),
     $element,
     type: VIDEO_EMBED_TYPE,
-    id: ((_$videoElem$parentEle = $videoElem.parentElement) === null || _$videoElem$parentEle === void 0 ? void 0 : _$videoElem$parentEle.getAttribute('data-mce-p-data-media-id')) || $videoElem.getAttribute('data-mce-p-data-media-id')
+    id: $videoElem.parentElement?.getAttribute('data-mce-p-data-media-id') || $videoElem.getAttribute('data-mce-p-data-media-id')
   };
 }
 export function asAudioElement($element) {
-  var _$element$parentEleme;
-
   if (!$element) {
     return null;
   }
-
   const $audioIframe = $element.tagName === 'IFRAME' ? $element : $element.firstElementChild;
   const $tinymceIframeShim = $audioIframe.parentElement;
   const title = ($audioIframe.getAttribute('title') || $tinymceIframeShim.getAttribute('data-mce-p-title') || '').replace(formatMessage('Video player for '), '');
   const audioOptions = {
     titleText: title,
-    id: ((_$element$parentEleme = $element.parentElement) === null || _$element$parentEleme === void 0 ? void 0 : _$element$parentEleme.getAttribute('data-mce-p-data-media-id')) || $element.getAttribute('data-mce-p-data-media-id')
+    id: $element.parentElement?.getAttribute('data-mce-p-data-media-id') || $element.getAttribute('data-mce-p-data-media-id')
   };
-
   if ($audioIframe.tagName === 'IFRAME') {
     const audioDoc = $audioIframe.contentDocument;
-
     try {
-      var _audioDoc$querySelect;
-
-      const trackSJson = (_audioDoc$querySelect = audioDoc.querySelector('[data-tracks]')) === null || _audioDoc$querySelect === void 0 ? void 0 : _audioDoc$querySelect.getAttribute('data-tracks');
-
+      const trackSJson = audioDoc.querySelector('[data-tracks]')?.getAttribute('data-tracks');
       if (trackSJson) {
         audioOptions.tracks = JSON.parse(trackSJson);
-      } // eslint-disable-next-line no-empty
-
+      }
+      // eslint-disable-next-line no-empty
     } catch (e) {}
   }
-
   if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
     const source = $audioIframe.getAttribute('src');
-    const matches = source === null || source === void 0 ? void 0 : source.match(/\/media_attachments_iframe\/(\d+)/);
-
+    const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
     if (matches) {
       audioOptions.attachmentId = matches[1];
     }
   }
-
   return audioOptions;
 }
-
 function asText($element, editor) {
   const text = editor && editor.selection.getContent({
     format: 'text'
   });
-
   if (!text) {
     return null;
   }
-
   return {
     $element,
     text,
     type: TEXT_TYPE
   };
 }
-
 function asNone($element) {
   return {
     $element: $element || null,
     type: NONE_TYPE
   };
 }
-
 export function getContentFromElement($element, editor) {
   if (!($element && $element.nodeName)) {
     return asNone();
   }
-
   const content = asLink($element, editor) || asImageEmbed($element) || asVideoElement($element) || asText($element, editor) || asNone($element);
   return content;
 }
-export function getContentFromEditor(editor) {
-  let expandSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export function getContentFromEditor(editor, expandSelection = false) {
   let $element;
-
   if (editor && editor.selection) {
     // tinymce selects the element around the cursor, whether it's
     // content is selected in the copy/paste sense or not.
@@ -201,15 +170,14 @@ export function getContentFromEditor(editor) {
       $element = editor.selection.getNode();
     }
   }
-
   if ($element == null) {
     return asNone();
   }
-
   return getContentFromElement($element, editor);
-} // if the selection is somewhere w/in a <a>,
-// find the <a> and return it's info
+}
 
+// if the selection is somewhere w/in a <a>,
+// find the <a> and return it's info
 export function getLinkContentFromEditor(editor) {
   const $element = editor.selection.getNode();
   return $element ? asLink($element, editor) : null;
@@ -220,33 +188,24 @@ export function isFileLink($element, editor) {
 export function isImageEmbed($element) {
   return !!asImageEmbed($element) && !$element.getAttribute('data-placeholder-for');
 }
-
 function isMediaElement($element, mediaType) {
-  var _tinymceIframeShim$fi, _tinymceIframeShim$ge;
-
   // the video is hosted in an iframe, but tinymce
   // wraps it in a span with swizzled attribute names
-  if (!($element !== null && $element !== void 0 && $element.getAttribute) || !$element) {
+  if (!$element?.getAttribute || !$element) {
     return false;
   }
-
   const tinymceIframeShim = $element.tagName === 'IFRAME' ? $element.parentElement : $element;
-
-  if (((_tinymceIframeShim$fi = tinymceIframeShim.firstElementChild) === null || _tinymceIframeShim$fi === void 0 ? void 0 : _tinymceIframeShim$fi.tagName) !== 'IFRAME') {
+  if (tinymceIframeShim.firstElementChild?.tagName !== 'IFRAME') {
     return false;
   }
-
   const media_obj_id = tinymceIframeShim.getAttribute('data-mce-p-data-media-id');
-  const is_media_attachment_iframe = (_tinymceIframeShim$ge = tinymceIframeShim.getAttribute('data-mce-p-src')) === null || _tinymceIframeShim$ge === void 0 ? void 0 : _tinymceIframeShim$ge.includes('media_attachments_iframe');
-
+  const is_media_attachment_iframe = tinymceIframeShim.getAttribute('data-mce-p-src')?.includes('media_attachments_iframe');
   if (!media_obj_id && !is_media_attachment_iframe) {
     return false;
   }
-
   const media_type = tinymceIframeShim.getAttribute('data-mce-p-data-media-type');
   return media_type === mediaType;
 }
-
 export function isVideoElement($element) {
   return isMediaElement($element, 'video');
 }
@@ -254,28 +213,20 @@ export function isAudioElement($element) {
   return isMediaElement($element, 'audio');
 }
 export function findMediaPlayerIframe(elem) {
-  var _elem$firstElementChi;
-
   if (!elem) return null;
-
   if (elem.tagName === 'IFRAME') {
     // we have the iframe
     return elem;
   }
-
-  if (((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.tagName) === 'IFRAME') {
+  if (elem.firstElementChild?.tagName === 'IFRAME') {
     // we have the shim tinymce puts around the iframe
     return elem.firstElementChild;
   }
-
   if (elem.classList.contains('mce-shim')) {
-    var _elem$previousSibling;
-
     // tinymce puts a <span class='mce-shin'> after the iframe (since v5, I think)
-    if (((_elem$previousSibling = elem.previousSibling) === null || _elem$previousSibling === void 0 ? void 0 : _elem$previousSibling.tagName) === 'IFRAME') {
+    if (elem.previousSibling?.tagName === 'IFRAME') {
       return elem.previousSibling;
     }
   }
-
   return null;
 }

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

@@ -15,52 +15,43 @@
  * 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/>.
  */
+
 function scaleEvenly(width, height, scaleFactor, constraints) {
   const minHeight = constraints.minHeight || 0;
   const minWidth = constraints.minWidth || 0;
   const scaledWidth = width * scaleFactor;
   const scaledHeight = height * scaleFactor;
   let minimumScaleFactor = scaleFactor;
-
   if (scaledWidth < minWidth) {
     const atLeastMinWidth = Math.max(scaledWidth, minWidth);
     minimumScaleFactor = atLeastMinWidth / width;
   }
-
   if (scaledHeight < minHeight) {
     const atLeastMinHeight = Math.max(scaledHeight, minHeight);
     minimumScaleFactor = Math.max(atLeastMinHeight / height, minimumScaleFactor);
   }
-
   return {
     height: Math.round(height * minimumScaleFactor),
     width: Math.round(width * minimumScaleFactor)
   };
 }
-
-export function scaleForHeight(width, height, targetHeight) {
-  let constraints = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
+export function scaleForHeight(width, height, targetHeight, constraints = {}) {
   if (targetHeight == null) {
     return {
       height: null,
       width: null
     };
   }
-
   const scaleFactor = targetHeight / height;
   return scaleEvenly(width, height, scaleFactor, constraints);
 }
-export function scaleForWidth(width, height, targetWidth) {
-  let constraints = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
+export function scaleForWidth(width, height, targetWidth, constraints = {}) {
   if (targetWidth == null) {
     return {
       height: null,
       width: null
     };
   }
-
   const scaleFactor = targetWidth / width;
   return scaleEvenly(width, height, scaleFactor, constraints);
 }

package/es/rce/plugins/shared/DimensionsInput/DimensionInput.js

@@ -15,6 +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 React from 'react';
 import { func, shape, string } from 'prop-types';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -22,34 +23,33 @@ import { NumberInput } from '@instructure/ui-number-input';
 export default function DimensionInput(props) {
   const {
     dimensionState,
-    label
+    label,
+    messages
   } = props;
   const {
     addOffset,
     inputValue,
     setInputValue
   } = dimensionState;
-
   function handleChange(_event, value) {
     setInputValue(value);
   }
-
   function handleDecrement() {
     addOffset(-1);
   }
-
   function handleIncrement() {
     addOffset(1);
   }
-
   return /*#__PURE__*/React.createElement(NumberInput, {
+    allowStringValue: true,
     renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, label),
     onChange: handleChange,
     onDecrement: handleDecrement,
     onIncrement: handleIncrement,
     isRequired: true,
     showArrows: false,
-    value: inputValue
+    value: inputValue,
+    messages: messages
   });
 }
 DimensionInput.propTypes = {

package/es/rce/plugins/shared/DimensionsInput/index.js

@@ -15,24 +15,34 @@
  * 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 { bool, func, number, shape, string } from 'prop-types';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { FormFieldGroup } from '@instructure/ui-form-field';
-import { IconLockLine } from '@instructure/ui-icons';
+import { IconLockLine, IconWarningSolid } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
 import formatMessage from '../../../../format-message';
 import DimensionInput from './DimensionInput';
 export { default as useDimensionsState } from './useDimensionsState';
-
+const errorMessage = message => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    gap: "xx-small",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(IconWarningSolid, {
+    color: "error"
+  }), /*#__PURE__*/React.createElement(Text, {
+    color: "danger",
+    size: "small"
+  }, message));
+};
 const getMessage = (dimensionsState, minWidth, minHeight, minPercentage) => {
   let result = {
     text: formatMessage('Aspect ratio will be preserved'),
     type: 'hint'
   };
-
   if (dimensionsState.usePercentageUnits) {
     if (!dimensionsState.isNumeric) {
       result = {
@@ -41,7 +51,7 @@ const getMessage = (dimensionsState, minWidth, minHeight, minPercentage) => {
       };
     } else if (!dimensionsState.isAtLeastMinimums) {
       result = {
-        text: formatMessage('Must be at least {percentage}%', {
+        text: formatMessage('Percentage must be at least {percentage}%', {
           percentage: minPercentage
         }),
         type: 'error'
@@ -54,17 +64,15 @@ const getMessage = (dimensionsState, minWidth, minHeight, minPercentage) => {
     };
   } else if (!dimensionsState.isAtLeastMinimums) {
     result = {
-      text: formatMessage('Must be at least {width} x {height}px', {
+      text: formatMessage('Pixels must be at least {width} x {height}px', {
         width: minWidth,
         height: minHeight
       }),
       type: 'error'
     };
   }
-
   return result;
 };
-
 export default function DimensionsInput(props) {
   const {
     dimensionsState,
@@ -73,12 +81,24 @@ export default function DimensionsInput(props) {
     minPercentage,
     hidePercentage
   } = props;
-
   const handleDimensionTypeChange = e => {
     dimensionsState.setUsePercentageUnits(e.target.value === 'percentage');
   };
-
   const message = getMessage(dimensionsState, minWidth, minHeight, minPercentage);
+  const secondaryMessage = {
+    ...message,
+    text: ''
+  };
+  const displayMessage = message => {
+    if (!message) {
+      return;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "message"
+    }, message.type === 'error' ? errorMessage(message.text) : /*#__PURE__*/React.createElement(Text, {
+      size: "small"
+    }, message.text));
+  };
   return /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
@@ -100,8 +120,7 @@ export default function DimensionsInput(props) {
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
-    description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Dimensions')),
-    messages: [message]
+    description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Dimensions'))
   }, /*#__PURE__*/React.createElement(Flex, {
     alignItems: "start",
     direction: "row",
@@ -111,7 +130,8 @@ export default function DimensionsInput(props) {
     shouldGrow: true
   }, /*#__PURE__*/React.createElement(DimensionInput, {
     dimensionState: dimensionsState.percentageState,
-    label: formatMessage('Percentage')
+    label: formatMessage('Percentage'),
+    messages: [secondaryMessage]
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "x-small small"
   }, "%")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
@@ -119,7 +139,8 @@ export default function DimensionsInput(props) {
   }, /*#__PURE__*/React.createElement(DimensionInput, {
     dimensionState: dimensionsState.widthState,
     label: formatMessage('Width'),
-    minValue: minWidth
+    minValue: minWidth,
+    messages: [secondaryMessage]
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "x-small small"
   }, /*#__PURE__*/React.createElement(IconLockLine, null)), /*#__PURE__*/React.createElement(Flex.Item, {
@@ -127,8 +148,9 @@ export default function DimensionsInput(props) {
   }, /*#__PURE__*/React.createElement(DimensionInput, {
     dimensionState: dimensionsState.heightState,
     label: formatMessage('Height'),
-    minValue: minHeight
-  })))))));
+    minValue: minHeight,
+    messages: [secondaryMessage]
+  }))))), displayMessage(message)));
 }
 DimensionsInput.propTypes = {
   dimensionsState: shape({