@instructure/canvas-rce 5.6.0 → 5.6.1

package/lib/translated/zh_HK/modules/rce/RCEWrapper.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2;
+var _dec, _class, _class2, _Intl, _Intl$DateTimeFormat, _Intl$DateTimeFormat$;
 
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 
@@ -38,6 +38,7 @@ import normalizeLocale from './normalizeLocale';
 import { sanitizePlugins } from './sanitizePlugins';
 import { getCanvasUrl } from './getCanvasUrl';
 import RCEGlobals from './RCEGlobals';
+import defaultTinymceConfig from '../defaultTinymceConfig';
 import indicate from '../common/indicate';
 import bridge from '../bridge';
 import CanvasContentTray, { trayPropTypes } from './plugins/shared/CanvasContentTray';
@@ -4056,9 +4057,9 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
 
   getRequiredFeatureStatuses() {
     const {
-      new_equation_editor,
-      new_math_equation_handling,
-      rce_ux_improvements
+      new_equation_editor = false,
+      new_math_equation_handling = false,
+      rce_ux_improvements = false
     } = this.props.features;
     return {
       new_equation_editor,
@@ -4717,7 +4718,8 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     }
 
     const possibleNewMenubarItems = this.props.editorOptions.menu ? Object.keys(this.props.editorOptions.menu).join(' ') : undefined;
-    const wrappedOpts = { ...options,
+    const wrappedOpts = { ...defaultTinymceConfig,
+      ...options,
       readonly: this.props.readOnly,
       theme: 'silver',
       // some older code specified 'modern', which doesn't exist any more
@@ -4997,7 +4999,6 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       return /*#__PURE__*/React.createElement("div", {
         ref: this._editorPlaceholderRef,
         style: {
-          width: `${this.props.editorOptions.width}px`,
           height: `${this.props.editorOptions.height}px`,
           border: '1px solid grey'
         }
@@ -5113,7 +5114,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   use_rce_icon_maker: PropTypes.bool,
   features: PropTypes.objectOf(PropTypes.bool),
   flashAlertTimeout: PropTypes.number,
-  timezone: PropTypes.string.isRequired
+  timezone: PropTypes.string
 }, _class2.defaultProps = {
   trayProps: null,
   languages: [{
@@ -5125,7 +5126,9 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   },
   highContrastCSS: [],
   ltiTools: [],
-  maxInitRenderedRCEs: -1
+  maxInitRenderedRCEs: -1,
+  features: {},
+  timezone: (_Intl = Intl) === null || _Intl === void 0 ? void 0 : (_Intl$DateTimeFormat = _Intl.DateTimeFormat()) === null || _Intl$DateTimeFormat === void 0 ? void 0 : (_Intl$DateTimeFormat$ = _Intl$DateTimeFormat.resolvedOptions()) === null || _Intl$DateTimeFormat$ === void 0 ? void 0 : _Intl$DateTimeFormat$.timeZone
 }, _class2.skinCssInjected = false, _class2)) || _class); // standard: string of tinymce menu commands
 // e.g. 'instructure_links | inserttable instructure_media_embed | hr'
 // custom: a string of tinymce menu commands

package/lib/translated/zh_HK/modules/rce/__tests__/RCE.test.js

@@ -19,14 +19,6 @@ import React, { createRef } from 'react';
 import { render, waitFor } from '@testing-library/react';
 import RCE from '../RCE';
 import bridge from '../../bridge';
-const requiredProps = {
-  features: {
-    new_equation_editor: true,
-    new_math_equation_handling: true,
-    rce_ux_improvements: true
-  },
-  timezone: 'America/Denver'
-};
 describe('RCE', () => {
   let target;
   beforeEach(() => {
@@ -41,18 +33,18 @@ describe('RCE', () => {
     bridge.focusEditor(null);
   });
   it('bridges newly rendered editors', async () => {
-    render( /*#__PURE__*/React.createElement(RCE, Object.assign({
+    render( /*#__PURE__*/React.createElement(RCE, {
       textareaId: "textarea3"
-    }, requiredProps)), target);
+    }), target);
     await waitFor(() => expect(bridge.activeEditor().constructor.displayName).toEqual('RCEWrapper'));
   });
   it('supports getCode() and setCode() on its ref', async () => {
     const rceRef = /*#__PURE__*/createRef(null);
-    render( /*#__PURE__*/React.createElement(RCE, Object.assign({
+    render( /*#__PURE__*/React.createElement(RCE, {
       ref: rceRef,
       textareaId: "textarea3",
       defaultContent: "Hello RCE!"
-    }, requiredProps)), target);
+    }), target);
     await waitFor(() => expect(rceRef.current).not.toBeNull());
     expect(rceRef.current.getCode()).toEqual('Hello RCE!');
     rceRef.current.setCode('How sweet.');

package/lib/translated/zh_HK/modules/rce/__tests__/contentInsertion.test.js

@@ -179,6 +179,12 @@ describe('contentInsertion', () => {
       contentInsertion.insertLink(editor, link);
       expect(editor.content).toEqual('<a class="instructure_file_link foo" data-canvas-previewable="true" href="/some/path" title="Here Be Links">Click On Me</a>');
     });
+    it('includes attributes for course link when supplied', () => {
+      link['data-published'] = true;
+      link['data-course-type'] = 'wikiPages';
+      contentInsertion.insertLink(editor, link);
+      expect(editor.content).toEqual('<a data-course-type="wikiPages" data-published="true" href="/some/path" title="Here Be Links">Click On Me</a>');
+    });
     it('respects the current selection building the link by delegating to tinymce', () => {
       editor.selection.setContent('link me');
       contentInsertion.insertLink(editor, link);

package/lib/translated/zh_HK/modules/rce/__tests__/root.test.js

@@ -32,13 +32,7 @@ describe('RceModule', () => {
       editorOptions: () => {
         return {};
       },
-      textareaId: 'textarea_id',
-      features: {
-        new_equation_editor: true,
-        new_math_equation_handling: true,
-        rce_ux_improvements: true
-      },
-      timezone: 'America/Denver'
+      textareaId: 'textarea_id'
     };
   });
   afterEach(() => {

package/lib/translated/zh_HK/modules/rce/contentInsertion.js

@@ -211,7 +211,9 @@ function insertUndecoratedLink(editor, linkProps) {
     target: linkProps.target,
     class: linkProps.class,
     title: linkProps.title,
-    'data-canvas-previewable': linkProps['data-canvas-previewable']
+    'data-canvas-previewable': linkProps['data-canvas-previewable'],
+    'data-course-type': linkProps['data-course-type'],
+    'data-published': linkProps['data-published']
   };
 
   if (linkAttrs.target === '_blank') {

package/lib/translated/zh_HK/modules/rce/plugins/instructure_documents/components/Link.js

@@ -111,7 +111,7 @@ export default function Link(props) {
     return callback;
   }
 
-  function dateOrMessage(dateString) {
+  function dateOrMessage(str) {
     if (disabled && disabledMessage) {
       return /*#__PURE__*/React.createElement(View, {
         display: "block"
@@ -122,10 +122,10 @@ export default function Link(props) {
       }, disabledMessage)));
     }
 
-    if (dateString) {
+    if (str) {
       return /*#__PURE__*/React.createElement(View, {
         as: "div"
-      }, dateString);
+      }, str);
     }
   }
 
@@ -179,8 +179,8 @@ export default function Link(props) {
     size: "x-small",
     inline: false
   }) : null), /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "0 x-small 0 0"
   }, /*#__PURE__*/React.createElement(Text, {
@@ -189,8 +189,8 @@ export default function Link(props) {
     size: "x-small"
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "0 x-small 0 0",
-    grow: true,
-    shrink: true,
+    shouldGrow: true,
+    shouldShrink: true,
     textAlign: "start"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div",

package/lib/translated/zh_HK/modules/rce/plugins/instructure_equation/EquationEditorModal/__tests__/index.test.js

@@ -77,7 +77,7 @@ jest.mock('../advancedPreference', () => {
 describe('EquationEditorModal', () => {
   let editor, mockFn;
   beforeAll(() => {
-    RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+    RCEGlobals.setFeatures({
       new_equation_editor: true
     });
     MathfieldElement.prototype.getValue = jest.fn().mockImplementation(function () {

package/lib/translated/zh_HK/modules/rce/plugins/instructure_equation/EquationEditorToolbar/index.js

@@ -64,8 +64,6 @@ function EquationEditorToolbar(props) {
     }, /*#__PURE__*/React.createElement(IconButton, {
       onClick: () => props.executeCommand(command, advancedCommand),
       renderIcon: icon,
-      withBackground: false,
-      withBorder: false,
       screenReaderLabel: `${label}, LaTeX: ${name}`
     }));
   }));

package/lib/translated/zh_HK/modules/rce/plugins/instructure_external_tools/components/LtiToolsModal/ExpandoText.js

@@ -40,7 +40,7 @@ export default function ExpandoText(props) {
     padding: "none none none xx-small",
     "aria-expanded": descExpanded,
     borderRadius: "medium",
-    focused: focused,
+    withFocusOutline: focused,
     onClick: () => {
       setDescExpanded(!descExpanded);
     },

package/lib/translated/zh_HK/modules/rce/plugins/instructure_external_tools/components/LtiToolsModal/LtiTool.js

@@ -32,7 +32,7 @@ export default function LtiTool(props) {
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     as: "span",
-    focused: focused,
+    withFocusOutline: focused,
     className: css(styles.appButton),
     padding: "xxx-small xxx-small xx-small",
     borderRadius: "medium",

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Modal.js

@@ -68,17 +68,13 @@ const renderBody = (settings, dispatch, message, loading) => {
   })));
 };
 
-const renderFooter = (settings, onSubmit, onClose) => {
+const renderFooter = (settings, onClose) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
     margin: "0 x-small 0 0"
   }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
     color: "primary",
-    type: "submit",
-    onClick: e => {
-      e.preventDefault();
-      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);
-    }
+    type: "submit"
   }, "\u5132\u5B58"));
 };
 
@@ -106,9 +102,16 @@ export const ImageCropperModal = _ref => {
     });
   }, [cropSettings]);
   return /*#__PURE__*/React.createElement(Modal, {
+    "data-mce-component": true,
+    as: "form",
+    label: "\u88C1\u526A\u5F71\u50CF",
     size: "large",
     open: open,
     onDismiss: onClose,
+    onSubmit: e => {
+      e.preventDefault();
+      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);
+    },
     shouldCloseOnDocumentClick: false
   }, /*#__PURE__*/React.createElement(Modal.Header, {
     id: "imageCropperHeader"
@@ -116,10 +119,10 @@ export const ImageCropperModal = _ref => {
     placement: "end",
     offset: "small",
     onClick: onClose,
-    screenReaderLabel: "Close"
+    screenReaderLabel: "\u95DC\u9589"
   }), /*#__PURE__*/React.createElement(Heading, null, "\u88C1\u526A\u5F71\u50CF")), /*#__PURE__*/React.createElement(Modal.Body, null, renderBody(settings, dispatch, message, loading)), !loading && /*#__PURE__*/React.createElement(Modal.Footer, {
     id: "imageCropperFooter"
-  }, renderFooter(settings, onSubmit, onClose)));
+  }, renderFooter(settings, onClose)));
 };
 ImageCropperModal.propTypes = {
   image: PropTypes.string.isRequired,

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Preview.js

@@ -15,14 +15,14 @@
  * 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, { useRef, useEffect } from 'react';
+import React, { useEffect, createRef } from 'react';
 import PropTypes from 'prop-types';
 import formatMessage from '../../../../../../format-message';
 import { ImageCropperSettingsPropTypes } from './propTypes';
 import { buildSvg } from './svg';
 import { PREVIEW_WIDTH, PREVIEW_HEIGHT, BACKGROUND_SQUARE_SIZE } from './constants';
 import { useMouseWheel } from './useMouseWheel';
-import { useArrowKeys } from './useArrowKeys';
+import { useKeyMouseEvents } from './useKeyMouseEvents';
 import checkerboardStyle from '../../../../shared/CheckerboardStyling';
 /**
  * Remove the node contents and append the svg element.
@@ -58,7 +58,9 @@ export const Preview = _ref2 => {
     settings,
     dispatch
   } = _ref2;
-  const shapeRef = useRef(null);
+  const previewRef = /*#__PURE__*/createRef();
+  const shapeRef = /*#__PURE__*/createRef();
+  const imgRef = /*#__PURE__*/createRef();
   const {
     image,
     shape,
@@ -68,7 +70,11 @@ export const Preview = _ref2 => {
     translateY
   } = settings;
   const [tempScaleRatio, onWheelCallback] = useMouseWheel(scaleRatio, dispatch);
-  const [tempTranslateX, tempTranslateY] = useArrowKeys(translateX, translateY, dispatch);
+  const [tempTranslateX, tempTranslateY, onMouseDownCallback] = useKeyMouseEvents(translateX, translateY, dispatch, imgRef);
+  useEffect(() => {
+    imgRef.current.ondragstart = () => false; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   useEffect(() => {
     const svg = buildSvg(shape);
     replaceSvg(svg, shapeRef.current);
@@ -81,7 +87,11 @@ export const Preview = _ref2 => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: "cropper-preview",
+    ref: previewRef,
     style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       position: 'relative',
       width: `${PREVIEW_WIDTH}px`,
       height: `${PREVIEW_HEIGHT}px`,
@@ -93,25 +103,24 @@ export const Preview = _ref2 => {
     onWheel: onWheelCallback
   }, /*#__PURE__*/React.createElement("img", {
     src: image,
+    ref: imgRef,
     alt: "\u8981\u88C1\u526A\u7684\u5716\u50CF",
     style: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
       height: '100%',
-      width: '100%',
       objectFit: 'contain',
       textAlign: 'center',
       transform: transformValue
-    }
+    },
+    onMouseDown: e => onMouseDownCallback(e, previewRef.current)
   }), /*#__PURE__*/React.createElement("div", {
     id: "cropShapeContainer",
+    ref: shapeRef,
     style: {
       position: 'absolute',
       top: 0,
-      left: 0
-    },
-    ref: shapeRef
+      left: 0,
+      pointerEvents: 'none'
+    }
   }));
 };
 Preview.propTypes = {

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/__tests__/Preview.test.js

@@ -52,7 +52,7 @@ describe('Preview', () => {
       <img
         alt="Image to crop"
         src="https://www.fillmurray.com/640/480"
-        style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; object-fit: contain; text-align: center;"
+        style="height: 100%; object-fit: contain; text-align: center;"
       />
     `);
     });
@@ -279,4 +279,74 @@ describe('Preview', () => {
       });
     });
   });
+  describe('listens mouse dragging', () => {
+    let container, target, mouseDownEvent, mouseMoveEvent, mouseUpEvent;
+    beforeAll(() => {
+      mouseDownEvent = {
+        target
+      };
+      mouseMoveEvent = {
+        clientX: 15,
+        clientY: 30
+      };
+      mouseUpEvent = {
+        target
+      };
+    });
+    beforeEach(() => {
+      const component = render( /*#__PURE__*/React.createElement(Preview, {
+        settings: settings,
+        dispatch: dispatch
+      }));
+      container = component.container;
+      target = container.querySelector('img');
+      fireEvent.mouseDown(target, mouseDownEvent);
+      fireEvent.mouseMove(target, mouseMoveEvent);
+      fireEvent.mouseUp(target, mouseUpEvent);
+    });
+    describe('calls dispatch', () => {
+      it('when dragging once', async () => {
+        await waitFor(() => {
+          expect(dispatch).toHaveBeenCalledWith({
+            type: 'SetTranslateX',
+            payload: 15
+          });
+          expect(dispatch).toHaveBeenCalledWith({
+            type: 'SetTranslateY',
+            payload: 30
+          });
+        });
+      });
+      it('when dragging and reuses previous position', async () => {
+        fireEvent.mouseDown(target, mouseDownEvent);
+        fireEvent.mouseMove(target, mouseMoveEvent);
+        fireEvent.mouseUp(target, mouseUpEvent);
+        await waitFor(() => {
+          expect(dispatch).toHaveBeenCalledWith({
+            type: 'SetTranslateX',
+            payload: 30
+          });
+          expect(dispatch).toHaveBeenCalledWith({
+            type: 'SetTranslateY',
+            payload: 60
+          });
+        });
+      });
+    });
+    describe('sets translate style', () => {
+      it('when dragging once', async () => {
+        await waitFor(() => {
+          expect(target.style.transform).toEqual('translateX(15px) translateY(30px)');
+        });
+      });
+      it('when dragging and reuses previous position', async () => {
+        fireEvent.mouseDown(target, mouseDownEvent);
+        fireEvent.mouseMove(target, mouseMoveEvent);
+        fireEvent.mouseUp(target, mouseUpEvent);
+        await waitFor(() => {
+          expect(target.style.transform).toEqual('translateX(30px) translateY(60px)');
+        });
+      });
+    });
+  });
 });

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ResetControls.js

@@ -0,0 +1,38 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import { Flex } from '@instructure/ui-flex';
+import { Button } from '@instructure/ui-buttons';
+import { IconResetLine } from '@instructure/ui-icons';
+import formatMessage from '../../../../../../../format-message';
+export const ResetControls = _ref => {
+  let {
+    onReset
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
+    renderIcon: IconResetLine,
+    onClick: onReset
+  }, "Reset"));
+};
+ResetControls.propTypes = {
+  onReset: PropTypes.func
+};
+ResetControls.defaultProps = {
+  onReset: () => {}
+};

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconRotateLeftLine, IconRotateRightLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
+import { View } from '@instructure/ui-view';
 import { CustomNumberInput } from './CustomNumberInput';
 import { calculateRotation, getNearestRectAngle } from './utils';
 import { BUTTON_ROTATION_DEGREES } from '../constants';
@@ -54,7 +55,13 @@ export const RotationControls = _ref => {
 
   const rotateRightCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, false) + BUTTON_ROTATION_DEGREES));
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  return /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 medium 0 0",
+    title: "Rotation",
+    role: "toolbar",
+    tabindex: "-1"
+  }, /*#__PURE__*/React.createElement(View, {
+    display: "inline-block",
     margin: "0 small 0 0"
   }, /*#__PURE__*/React.createElement(CustomNumberInput, {
     value: rotation,
@@ -63,17 +70,14 @@ export const RotationControls = _ref => {
     processValueCallback: calculateRotation,
     placeholder: "Rotation",
     onChange: value => onChange(value)
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    margin: "0 small 0 0",
     onClick: rotateLeftCallback,
     screenReaderLabel: "Rotate image -90 degrees"
-  }, /*#__PURE__*/React.createElement(IconRotateLeftLine, null))), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 medium 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconRotateLeftLine, null)), /*#__PURE__*/React.createElement(IconButton, {
     onClick: rotateRightCallback,
     screenReaderLabel: "Rotate image 90 degrees"
-  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null))));
+  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null)));
 };
 RotationControls.propTypes = {
   rotation: PropTypes.number,

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ShapeControls.js

@@ -16,10 +16,10 @@
  * 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 formatMessage from '../../../../../../../format-message';
 import { SimpleSelect } from '@instructure/ui-simple-select';
-import PropTypes from 'prop-types';
 import { ZoomControls } from './ZoomControls';
 import { Shape } from '../../../../svg/shape';
 const SHAPE_OPTIONS = [{

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js

@@ -19,6 +19,7 @@ import React from 'react';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
+import { View } from '@instructure/ui-view';
 import { calculateScaleRatio, calculateScalePercentage } from './utils';
 import round from '../../../../utils/round';
 import { MAX_SCALE_RATIO, MIN_SCALE_RATIO, BUTTON_SCALE_STEP } from '../constants';
@@ -74,7 +75,12 @@ export const ZoomControls = _ref => {
     onZoomChange(newScaleRatio);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  return /*#__PURE__*/React.createElement(Flex.Item, {
+    title: "Zoom",
+    role: "toolbar",
+    tabindex: "-1"
+  }, /*#__PURE__*/React.createElement(View, {
+    display: "inline-block",
     margin: "0 small 0 0"
   }, /*#__PURE__*/React.createElement(CustomNumberInput, {
     value: round(scaleRatio * 100),
@@ -83,17 +89,17 @@ export const ZoomControls = _ref => {
     processValueCallback: calculateScalePercentage,
     placeholder: "Zoom",
     onChange: value => onZoomChange(round(value / 100))
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    margin: "0 small 0 0",
     onClick: zoomOutCallback,
     interaction: scaleRatio > MIN_SCALE_RATIO ? 'enabled' : 'disabled',
     screenReaderLabel: "\u7E2E\u5C0F\u5F71\u50CF"
-  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null)), /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "zoom-in-button",
     onClick: zoomInCallback,
     interaction: scaleRatio < MAX_SCALE_RATIO ? 'enabled' : 'disabled',
     screenReaderLabel: "\u653E\u5927\u5F71\u50CF"
-  }, /*#__PURE__*/React.createElement(IconZoomInLine, null))));
+  }, /*#__PURE__*/React.createElement(IconZoomInLine, null)));
 };
 ZoomControls.propTypes = {
   scaleRatio: PropTypes.number,

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/__tests__/ResetControls.test.js

@@ -0,0 +1,40 @@
+/*
+ * 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 { ResetControls } from '../ResetControls';
+import { fireEvent, render } from '@testing-library/react';
+describe('ResetControls', () => {
+  it('renders button', () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(ResetControls, null));
+    const resetButton = container.querySelector('button');
+    expect(resetButton).toBeInTheDocument();
+  });
+  it('calls function when button is clicked', () => {
+    const callback = jest.fn();
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(ResetControls, {
+      onReset: callback
+    }));
+    const resetButton = container.querySelector('button');
+    fireEvent.click(resetButton);
+    expect(callback).toHaveBeenCalled();
+  });
+});

package/lib/translated/zh_HK/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/index.js

@@ -21,6 +21,7 @@ import { actions } from '../../../../reducers/imageCropper';
 import { ZoomControls } from './ZoomControls';
 import { RotationControls } from './RotationControls';
 import { ShapeControls } from './ShapeControls';
+import { ResetControls } from './ResetControls';
 export const Controls = _ref => {
   let {
     settings,
@@ -30,7 +31,8 @@ export const Controls = _ref => {
     id: "imageCropperControls",
     direction: "row",
     margin: "x-small",
-    alignItems: "start"
+    alignItems: "start",
+    role: "group"
   }, /*#__PURE__*/React.createElement(ShapeControls, {
     shape: settings.shape,
     onChange: shape => dispatch({
@@ -49,5 +51,11 @@ export const Controls = _ref => {
       type: actions.SET_SCALE_RATIO,
       payload: scaleRatio
     })
+  }), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true
+  }), /*#__PURE__*/React.createElement(ResetControls, {
+    onReset: () => dispatch({
+      type: actions.RESET_SETTINGS
+    })
   }));
 };