@instructure/canvas-rce 5.14.1 → 5.14.2

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

@@ -15,52 +15,45 @@
  * 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] : {};
-
   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] : {};
-
   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({

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

@@ -15,30 +15,25 @@
  * 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 { useState } from 'react';
 import { scaleForHeight, scaleForWidth } from '../DimensionUtils';
-
 function normalizedNumber(number) {
   if (number == null) {
     return null;
   }
-
   return Number.isFinite(number) ? Math.round(number) : NaN;
 }
-
 function parseAsInteger(inputString) {
   if (inputString.trim() === '') {
     return null;
   }
-
   const number = Number.parseFloat(inputString, 10);
   return Number.isFinite(number) ? Math.round(number) : NaN;
 }
-
 function inputValueFor(initialNumber) {
   return Number.isFinite(initialNumber) ? `${initialNumber}` : '';
 }
-
 export default function useDimensionsState(initialDimensions, constraints) {
   const {
     appliedHeight,
@@ -81,19 +76,17 @@ export default function useDimensionsState(initialDimensions, constraints) {
     height: scaleForHeight,
     width: scaleForWidth
   };
-
   function updateDimensions(attributes) {
-    setDimensions({ ...dimensions,
+    setDimensions({
+      ...dimensions,
       ...attributes,
       numericHeight: normalizedNumber(attributes.numericHeight),
       numericWidth: normalizedNumber(attributes.numericWidth),
       numericPercentage: normalizedNumber(attributes.numericPercentage)
     });
   }
-
   function scaleDimensions(dimensionName, number, scaleConstraints) {
     let width, height, percentage;
-
     if (dimensionName === 'percentage') {
       width = naturalWidth;
       height = naturalHeight;
@@ -105,14 +98,12 @@ export default function useDimensionsState(initialDimensions, constraints) {
       height = scaledDimensions.height;
       percentage = initialNumericValues.percentage;
     }
-
     return {
       width,
       height,
       percentage
     };
   }
-
   function setNumericDimension(dimensionName, number) {
     const {
       height,
@@ -128,7 +119,6 @@ export default function useDimensionsState(initialDimensions, constraints) {
       inputPercentage: inputValueFor(percentage)
     });
   }
-
   function setDimensionValue(dimensionName, value) {
     const number = parseAsInteger(value);
     const {
@@ -145,63 +135,49 @@ export default function useDimensionsState(initialDimensions, constraints) {
       inputPercentage: dimensionName === 'percentage' ? value : inputValueFor(percentage)
     });
   }
-
   function offsetDimension(dimensionName, offset) {
     const minValue = dimensionMinimums[dimensionName];
     const initialNumber = initialNumericValues[dimensionName];
     const numericValue = currentNumericValues[dimensionName];
-
     if (numericValue != null && !Number.isFinite(numericValue)) {
       return;
     }
-
     const newNumber = numericValue == null ? initialNumber + offset : Math.max(minValue, Math.floor(numericValue + offset));
     setNumericDimension(dimensionName, newNumber);
   }
-
   const widthState = {
     inputValue: dimensions.inputWidth,
-
     addOffset(offset) {
       offsetDimension('width', offset);
     },
-
     setInputValue(value) {
       setDimensionValue('width', value);
     }
-
   };
   const heightState = {
     inputValue: dimensions.inputHeight,
-
     addOffset(offset) {
       offsetDimension('height', offset);
     },
-
     setInputValue(value) {
       setDimensionValue('height', value);
     }
-
   };
   const percentageState = {
     inputValue: dimensions.inputPercentage,
-
     addOffset(offset) {
       offsetDimension('percentage', offset);
     },
-
     setInputValue(value) {
       setDimensionValue('percentage', value);
     }
-
   };
-
   const handleUsePercentageUnitsChange = value => {
-    setDimensions({ ...dimensions,
+    setDimensions({
+      ...dimensions,
       usePercentageUnits: value
     });
   };
-
   const isNumeric = dimensions.usePercentageUnits ? Number.isFinite(dimensions.numericPercentage) : [dimensions.numericHeight, dimensions.numericWidth].every(Number.isFinite);
   const isAtLeastMinimums = dimensions.usePercentageUnits ? dimensions.numericPercentage >= minPercentage : dimensions.numericHeight >= minHeight && dimensions.numericWidth >= minWidth;
   return {

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

@@ -17,8 +17,9 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import formatMessage from '../../../format-message'; // TODO: a placeholder. Design a better one. See CORE-2826
+import formatMessage from '../../../format-message';
 
+// TODO: a placeholder. Design a better one. See CORE-2826
 export default class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -26,7 +27,6 @@ export default class ErrorBoundary extends React.Component {
       hasError: false
     };
   }
-
   static getDerivedStateFromError(error) {
     // Update state so the next render will show the fallback UI.
     return {
@@ -34,7 +34,6 @@ export default class ErrorBoundary extends React.Component {
       error
     };
   }
-
   render() {
     if (this.state.hasError) {
       const msg = this.state.error.message ? this.state.error.message : this.state.error.toString();
@@ -44,10 +43,8 @@ export default class ErrorBoundary extends React.Component {
         }
       }, /*#__PURE__*/React.createElement("h2", null, formatMessage('Something went wrong.')), /*#__PURE__*/React.createElement("p", null, msg));
     }
-
     return this.props.children;
   }
-
 }
 ErrorBoundary.propTypes = {
   children: PropTypes.node

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

@@ -15,17 +15,16 @@
  * 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/>.
  */
+
 // Microsoft word will include an image of the text being pasted on the clipboard
 // Let's look at the text/html to see if it's word before deciding to paste the image
 // Assumes we've already confirmed that cbdata includes files
 export function isMicrosoftWordContentInEvent(event) {
   const cbdata = event.type === 'paste' ? event.clipboardData : event.dataTransfer;
-
   if ((cbdata === null || cbdata === void 0 ? void 0 : cbdata.files[0].type.indexOf('image/')) === 0 && cbdata.types.includes('text/html')) {
     const html = cbdata.getData('text/html');
     return isMicrosoftWordContent(html);
   }
-
   return false;
 }
 export function isMicrosoftWordContent(html) {
@@ -34,6 +33,5 @@ export function isMicrosoftWordContent(html) {
     const doc = parser.parseFromString(html, 'text/html');
     return Array.from(doc.documentElement.attributes).some(attr => /schemas[-.]microsoft[-.]com/.test(attr.value)) || /<o:|class="Mso/.test(doc.body.innerHTML || '');
   }
-
   return false;
 }

package/es/rce/plugins/shared/Filter.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 { bool, element, func, oneOf, oneOfType, string } from 'prop-types';
 import formatMessage from '../../../format-message';
@@ -26,24 +27,19 @@ import { IconButton } from '@instructure/ui-buttons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { IconLinkLine, IconFolderLine, IconImageLine, IconDocumentLine, IconAttachMediaLine, IconSearchLine, IconXLine } from '@instructure/ui-icons';
-
 function fileLabelFromContext(contextType) {
   switch (contextType) {
     case 'user':
       return formatMessage('User Files');
-
     case 'course':
       return formatMessage('Course Files');
-
     case 'group':
       return formatMessage('Group Files');
-
     case 'files':
     default:
       return formatMessage('Files');
   }
 }
-
 function renderTypeOptions(contentType, contentSubtype, userContextType) {
   const options = [/*#__PURE__*/React.createElement(SimpleSelect.Option, {
     key: "links",
@@ -51,38 +47,34 @@ function renderTypeOptions(contentType, contentSubtype, userContextType) {
     value: "links",
     renderBeforeLabel: IconLinkLine
   }, formatMessage('Links'))];
-
   if (userContextType === 'course' && contentType !== 'links' && contentSubtype !== 'all') {
-    options.push( /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    options.push(/*#__PURE__*/React.createElement(SimpleSelect.Option, {
       key: "course_files",
       id: "course_files",
       value: "course_files",
       renderBeforeLabel: IconFolderLine
     }, fileLabelFromContext('course')));
   }
-
   if (userContextType === 'group' && contentType !== 'links' && contentSubtype !== 'all') {
-    options.push( /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    options.push(/*#__PURE__*/React.createElement(SimpleSelect.Option, {
       key: "group_files",
       id: "group_files",
       value: "group_files",
       renderBeforeLabel: IconFolderLine
     }, fileLabelFromContext('group')));
-  } // Icon Maker icons are only stored in course folders.
-
+  }
 
+  // Icon Maker icons are only stored in course folders.
   if (contentSubtype !== ICON_MAKER_ICONS) {
-    options.push( /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    options.push(/*#__PURE__*/React.createElement(SimpleSelect.Option, {
       key: "user_files",
       id: "user_files",
       value: "user_files",
       renderBeforeLabel: IconFolderLine
     }, fileLabelFromContext(contentType === 'links' || contentSubtype === 'all' ? 'files' : 'user')));
   }
-
   return options;
 }
-
 function renderType(contentType, contentSubtype, mountNode, onChange, userContextType, containingContextType) {
   // Check containingContextType so that we always show context links
   if (containingContextType === 'course' || containingContextType === 'group') {
@@ -95,12 +87,10 @@ function renderType(contentType, contentSubtype, mountNode, onChange, userContex
         const changed = {
           contentType: selection.value
         };
-
         if (contentType === 'links') {
           // when changing away from links, go to all user files
           changed.contentSubtype = 'all';
         }
-
         onChange(changed);
       },
       value: contentType
@@ -115,11 +105,9 @@ function renderType(contentType, contentSubtype, mountNode, onChange, userContex
     }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Content Type')), fileLabelFromContext('user', contentSubtype));
   }
 }
-
 function shouldSearch(searchString) {
   return searchString.length === 0 || searchString.length >= 3;
 }
-
 export default function Filter(props) {
   const {
     contentType,
@@ -133,8 +121,9 @@ export default function Filter(props) {
     containingContextType
   } = props;
   const [pendingSearchString, setPendingSearchString] = useState(searchString);
-  const [searchInputTimer, setSearchInputTimer] = useState(0); // only run on mounting to trigger change to correct contextType
+  const [searchInputTimer, setSearchInputTimer] = useState(0);
 
+  // only run on mounting to trigger change to correct contextType
   useEffect(() => {
     onChange({
       contentType
@@ -147,28 +136,22 @@ export default function Filter(props) {
         window.clearTimeout(searchInputTimer);
         setSearchInputTimer(0);
       }
-
       onChange({
         searchString: value
       });
     }
   }
-
   function handleChangeSearch(value) {
     setPendingSearchString(value);
-
     if (searchInputTimer) {
       window.clearTimeout(searchInputTimer);
     }
-
     const tid = window.setTimeout(() => doSearch(value), 250);
     setSearchInputTimer(tid);
   }
-
   function handleClear() {
     handleChangeSearch('');
   }
-
   function renderClearButton() {
     if (pendingSearchString) {
       return /*#__PURE__*/React.createElement(IconButton, {
@@ -179,10 +162,8 @@ export default function Filter(props) {
         size: "small"
       }, /*#__PURE__*/React.createElement(IconXLine, null));
     }
-
     return undefined;
   }
-
   const searchMessage = formatMessage('Enter at least 3 characters to search');
   const loadingMessage = formatMessage('Loading, please wait');
   const msg = isContentLoading ? loadingMessage : searchMessage;
@@ -205,7 +186,6 @@ export default function Filter(props) {
       const changed = {
         contentSubtype: selection.value
       };
-
       if (changed.contentSubtype === 'all') {
         // when flipped to All, the context needs to be user
         // so we can get media_objects, which are all returned in the user context
@@ -214,7 +194,6 @@ export default function Filter(props) {
         // Icon Maker icons only belong to Courses.
         changed.contentType = 'course_files';
       }
-
       onChange(changed);
     },
     value: contentSubtype
@@ -287,48 +266,39 @@ Filter.propTypes = {
    * `contentType` is set to "files"
    */
   contentSubtype: string.isRequired,
-
   /**
    * `contentType` is the primary filter setting (e.g. links, files)
    */
   contentType: oneOf(['links', 'user_files', 'course_files', 'group_files']).isRequired,
-
   /**
    * `mountNode` is where INSTUI popups should mount. This is necessary for them
    * to work correctly when the RCE is in fullscreen
    */
   mountNode: oneOfType([element, func]),
-
   /**
    * `onChange` is called when any of the Filter settings are changed
    */
   onChange: func.isRequired,
-
   /**
    * `sortValue` defines how items in the CanvasContentTray are sorted
    */
   sortValue: string.isRequired,
-
   /**
    * `searchString` is used to search for matching file names. Must be >3 chars long
    */
   searchString: string.isRequired,
-
   /**
    * The user's context
    */
   userContextType: oneOf(['user', 'course', 'group']),
-
   /**
    * Is my content currently loading?
    */
   isContentLoading: bool,
-
   /**
    * The page context
    */
   containingContextType: oneOf(['user', 'course', 'group']),
-
   /**
    * Should include Icon Maker?
    */

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

@@ -15,17 +15,18 @@
  * 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 PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
 import { Tray } from '@instructure/ui-tray';
 import { View } from '@instructure/ui-view';
-import { getTrayHeight } from './trayUtils'; // Need these styles for drawing over <ColorInput /> popup.
+import { getTrayHeight } from './trayUtils';
 
+// Need these styles for drawing over <ColorInput /> popup.
 const topElementStyles = {
   zIndex: 10000
 };
-
 function renderJoinedItem(bodyAs, renderBody, renderFooter) {
   return /*#__PURE__*/React.createElement(Flex.Item, {
     height: "0",
@@ -47,7 +48,6 @@ function renderJoinedItem(bodyAs, renderBody, renderFooter) {
     borderWidth: "small none none none"
   }, renderFooter()))));
 }
-
 export const FixedContentTray = _ref => {
   let {
     title,