@instructure/canvas-rce 5.14.0 → 5.14.2

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,

package/es/rce/plugins/shared/ImageCropper/DirectionRegion.js

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2022 - present Instructure, Inc.
  *
@@ -17,11 +16,11 @@ import _pt from "prop-types";
  * 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 { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import formatMessage from '../../../../format-message';
 export let Direction;
-
 (function (Direction) {
   Direction[Direction["LEFT"] = 37] = "LEFT";
   Direction[Direction["UP"] = 38] = "UP";
@@ -29,26 +28,20 @@ export let Direction;
   Direction[Direction["DOWN"] = 40] = "DOWN";
   Direction[Direction["NONE"] = 0] = "NONE";
 })(Direction || (Direction = {}));
-
 const directionToWord = direction => {
   switch (direction) {
     case Direction.LEFT:
       return formatMessage('Left');
-
     case Direction.UP:
       return formatMessage('Up');
-
     case Direction.RIGHT:
       return formatMessage('Right');
-
     case Direction.DOWN:
       return formatMessage('Down');
-
     case Direction.NONE:
       return null;
   }
 };
-
 export const DirectionRegion = _ref => {
   let {
     direction

package/es/rce/plugins/shared/ImageCropper/Modal.js

@@ -30,7 +30,6 @@ import { Controls } from './controls';
 import { ImageCropperSettingsPropTypes } from './propTypes';
 import { DirectionRegion } from './DirectionRegion';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
-
 const renderBody = (image, settings, dispatch, message, loading) => {
   if (loading) {
     return /*#__PURE__*/React.createElement(Flex, {
@@ -42,7 +41,6 @@ const renderBody = (image, settings, dispatch, message, loading) => {
       size: "large"
     })));
   }
-
   return /*#__PURE__*/React.createElement(Flex, {
     direction: "column",
     margin: "none"
@@ -66,7 +64,6 @@ const renderBody = (image, settings, dispatch, message, loading) => {
     direction: settings.direction
   }));
 };
-
 const renderFooter = (settings, onClose) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
@@ -76,7 +73,6 @@ const renderFooter = (settings, onClose) => {
     type: "submit"
   }, formatMessage('Save')));
 };
-
 export const ImageCropperModal = _ref => {
   let {
     open,
@@ -93,7 +89,8 @@ export const ImageCropperModal = _ref => {
     shape !== settings.shape && dispatch({
       type: actions.SET_SHAPE,
       payload: shape
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shape]);
   useEffect(() => {
     cropSettings && dispatch({
@@ -110,9 +107,9 @@ export const ImageCropperModal = _ref => {
     open: open,
     onDismiss: onClose,
     onSubmit: e => {
-      e.preventDefault(); // Direction is only used while in cropper and
+      e.preventDefault();
+      // Direction is only used while in cropper and
       // should not be embedded in the icon's metadata
-
       const {
         direction,
         ...cropperSettings

package/es/rce/plugins/shared/ImageCropper/Preview.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, createRef } from 'react';
 import PropTypes from 'prop-types';
 import formatMessage from '../../../../format-message';
@@ -25,20 +26,17 @@ import { useMouseWheel } from './useMouseWheel';
 import { useKeyMouseTouchEvents } from './useKeyMouseEvents';
 import checkerboardStyle from '../CheckerboardStyling';
 import { View } from '@instructure/ui-view';
+
 /**
  * Remove the node contents and append the svg element.
  */
-
 function replaceSvg(svg, node) {
   if (!node) return;
-
   while (node.firstChild) {
     node.removeChild(node.lastChild);
   }
-
   node.appendChild(svg);
 }
-
 function getTransformValue(_ref) {
   let {
     translateX,
@@ -53,7 +51,6 @@ function getTransformValue(_ref) {
   if (scaleRatio > 1) values.push(`scale(${scaleRatio})`);
   return values.join(' ');
 }
-
 export const Preview = _ref2 => {
   let {
     image,
@@ -73,8 +70,8 @@ export const Preview = _ref2 => {
   const [tempScaleRatio, onWheelCallback] = useMouseWheel(scaleRatio, dispatch);
   const [tempTranslateX, tempTranslateY, onMouseDownCallback, onTouchStartCallback] = useKeyMouseTouchEvents(translateX, translateY, dispatch, imgRef);
   useEffect(() => {
-    imgRef.current.ondragstart = () => false; // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    imgRef.current.ondragstart = () => false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     const svg = buildSvg(shape);
@@ -86,17 +83,16 @@ export const Preview = _ref2 => {
     rotation,
     scaleRatio: tempScaleRatio
   });
-
   function isSafariVersion15OrLesser() {
     const match = /Version\/(\d+).+Safari/.exec(navigator.userAgent);
     return match ? parseInt(match[1], 10) < 16 : false;
-  } // Clip is not supported in Safari until v16.
+  }
+
+  // Clip is not supported in Safari until v16.
   // It's needed here to prevent a strange screenreader
   // behavior that makes the cropper look bad. 'hidden'
   // suffices when clip is not available, although it's not perfect
   // TODO: remove when Safari versions >= 16 are more commonplace
-
-
   const overflow = isSafariVersion15OrLesser() ? 'hidden' : 'clip';
   return /*#__PURE__*/React.createElement("div", {
     style: {

package/es/rce/plugins/shared/ImageCropper/constants.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/>.
  */
+
 export const PREVIEW_BACKGROUND_COLOR = '#394B58';
 export const PREVIEW_WIDTH = 942;
 export const PREVIEW_HEIGHT = 350;

package/es/rce/plugins/shared/ImageCropper/controls/CustomNumberInput.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 PropTypes from 'prop-types';
 import { NumberInput } from '@instructure/ui-number-input';
@@ -37,20 +38,16 @@ export const CustomNumberInput = _ref => {
     formatValueCallback,
     onChange
   });
-
   const handleChange = (event, newValue) => digestNewValue(newValue.trim());
-
   const handleBlur = () => digestCurrentValue();
-
   const handleIncrement = () => onChange(processValueCallback(value + 1));
-
   const handleDecrement = () => onChange(processValueCallback(value - 1));
-
   const messages = hasError ? [{
     text: formatMessage('Invalid entry.'),
     type: 'error'
   }] : [];
   return /*#__PURE__*/React.createElement(NumberInput, {
+    allowStringValue: true,
     value: inputValue,
     onChange: handleChange,
     onBlur: handleBlur,

package/es/rce/plugins/shared/ImageCropper/controls/ResetControls.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 PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';

package/es/rce/plugins/shared/ImageCropper/controls/RotationControls.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 PropTypes from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
@@ -25,36 +26,26 @@ import { CustomNumberInput } from './CustomNumberInput';
 import { calculateRotation, getNearestRectAngle } from './utils';
 import { BUTTON_ROTATION_DEGREES } from '../constants';
 import formatMessage from '../../../../../format-message';
-
 const parseRotationText = value => {
   // Matches a positive/negative integer/decimal followed by "º" symbol
   const matches = value.match(/([-|+]?\d+(?:\.\d+)?)º?/);
-
   if (!matches) {
     return null;
   }
-
   const result = parseInt(matches[1], 10);
-
   if (Number.isNaN(result)) {
     return null;
   }
-
   return result;
 };
-
 const formatRotationText = value => `${value}º`;
-
 export const RotationControls = _ref => {
   let {
     rotation,
     onChange
   } = _ref;
-
   const rotateLeftCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, true) - BUTTON_ROTATION_DEGREES));
-
   const rotateRightCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, false) + BUTTON_ROTATION_DEGREES));
-
   return /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "0 medium 0 0",
     title: formatMessage('Rotation'),

package/es/rce/plugins/shared/ImageCropper/controls/ShapeControls.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 PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';

package/es/rce/plugins/shared/ImageCropper/controls/ZoomControls.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 { IconButton } from '@instructure/ui-buttons';
 import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
@@ -28,33 +29,25 @@ import PropTypes from 'prop-types';
 import { CustomNumberInput } from './CustomNumberInput';
 import { showFlashAlert } from '../../../../../common/FlashAlert';
 import { debounce } from '@instructure/debounce';
-
 const parseZoomText = value => {
   // Matches a positive/negative integer/decimal followed by %" symbol
   const matches = value.match(/([-|+]?\d+(?:\.\d+)?)%?/);
-
   if (!matches) {
     return null;
   }
-
   const result = parseInt(matches[1], 10);
-
   if (Number.isNaN(result)) {
     return null;
   }
-
   return result;
 };
-
 const formatZoomText = value => `${value}%`;
-
 const debouncedAlert = debounce(showFlashAlert, 1000);
 export const ZoomControls = _ref => {
   let {
     scaleRatio,
     onChange
   } = _ref;
-
   const onZoomChange = value => {
     const message = {
       message: `${round(value * 100)}% Zoom`,
@@ -64,17 +57,14 @@ export const ZoomControls = _ref => {
     debouncedAlert(message);
     onChange(value);
   };
-
   const zoomOutCallback = () => {
     const newScaleRatio = calculateScaleRatio(scaleRatio - BUTTON_SCALE_STEP);
     onZoomChange(newScaleRatio);
   };
-
   const zoomInCallback = () => {
     const newScaleRatio = calculateScaleRatio(scaleRatio + BUTTON_SCALE_STEP);
     onZoomChange(newScaleRatio);
   };
-
   return /*#__PURE__*/React.createElement(Flex.Item, {
     title: formatMessage('Zoom'),
     role: "toolbar",

package/es/rce/plugins/shared/ImageCropper/controls/index.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 { Flex } from '@instructure/ui-flex';
 import { actions } from '../reducers/imageCropper';