@instructure/canvas-rce 5.6.0 → 5.6.1

package/es/rce/RCE.js

@@ -26,7 +26,6 @@ import editorLanguage from './editorLanguage';
 import normalizeLocale from './normalizeLocale';
 import wrapInitCb from './wrapInitCb';
 import tinyRCE from './tinyRCE';
-import defaultTinymceConfig from '../defaultTinymceConfig';
 import getTranslations from '../getTranslations';
 import '@instructure/canvas-theme';
 
@@ -99,11 +98,11 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
       trayProps: rcsProps,
       use_rce_icon_maker,
       features,
-      editorOptions: Object.assign(editorOptions, {
-        selector: `#${textareaId}`,
+      editorOptions: { ...editorOptions,
+        selector: editorOptions.selector || `#${textareaId}`,
         height,
         language: editorLanguage(props.language)
-      })
+      }
     };
     wrapInitCb(mirroredAttrs, iProps.editorOptions);
     return iProps;
@@ -193,7 +192,7 @@ RCE.propTypes = {
   // configurable default timeout value for flash alerts
   flashAlertTimeout: number,
   // user's timezone
-  timezone: string.isRequired,
+  timezone: string,
   // event handlers
   onFocus: func,
   // f(RCEWrapper component)
@@ -210,8 +209,7 @@ RCE.defaultProps = {
     maxAge: 3600000
   },
   defaultContent: '',
-  editorOptions: { ...defaultTinymceConfig
-  },
+  editorOptions: {},
   renderKBShortcutModal: true,
   highContrastCSS: [],
   instRecordDisabled: false,

package/es/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,
@@ -4723,7 +4724,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
@@ -5003,7 +5005,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'
         }
@@ -5119,7 +5120,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: [{
@@ -5131,7 +5132,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/es/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/es/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/es/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/es/rce/plugins/instructure_external_tools/components/LtiToolsModal/ExpandoText.js

@@ -44,7 +44,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/es/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/es/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"
   }, formatMessage('Cancel')), /*#__PURE__*/React.createElement(Button, {
     color: "primary",
-    type: "submit",
-    onClick: e => {
-      e.preventDefault();
-      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);
-    }
+    type: "submit"
   }, formatMessage('Save')));
 };
 
@@ -106,9 +102,16 @@ export const ImageCropperModal = _ref => {
     });
   }, [cropSettings]);
   return /*#__PURE__*/React.createElement(Modal, {
+    "data-mce-component": true,
+    as: "form",
+    label: formatMessage('Crop Image'),
     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: formatMessage('Close')
   }), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Crop Image'))), /*#__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/es/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: formatMessage('Image to crop'),
     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/es/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
+  }, formatMessage('Reset')));
+};
+ResetControls.propTypes = {
+  onReset: PropTypes.func
+};
+ResetControls.defaultProps = {
+  onReset: () => {}
+};

package/es/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: formatMessage('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: formatMessage('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: formatMessage('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: formatMessage('Rotate image 90 degrees')
-  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null))));
+  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null)));
 };
 RotationControls.propTypes = {
   rotation: PropTypes.number,

package/es/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/es/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: formatMessage('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: formatMessage('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: formatMessage('Zoom out image')
-  }, /*#__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: formatMessage('Zoom in image')
-  }, /*#__PURE__*/React.createElement(IconZoomInLine, null))));
+  }, /*#__PURE__*/React.createElement(IconZoomInLine, null)));
 };
 ZoomControls.propTypes = {
   scaleRatio: PropTypes.number,

package/es/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
+    })
   }));
 };

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/{useArrowKeys.js → useKeyMouseEvents.js}

@@ -23,31 +23,12 @@ import round from '../../../utils/round';
 import { KEY_EVENT_DELAY, KEY_EVENT_STEP } from './constants';
 import { actions } from '../../../reducers/imageCropper';
 const EVENT_EXCEPTION_ELEMENT_IDS = ['imageCropperHeader', 'imageCropperFooter', 'imageCropperControls'];
-export function useArrowKeys(translateX, translateY, dispatch) {
-  const [tempTranslateX, _setTempTranslateX] = useState(translateX);
-  const [tempTranslateY, _setTempTranslateY] = useState(translateY);
-  const [isMoving, setIsMoving] = useState(false); // These are used to get the current values when the callback is called from outside.
-
-  const tempTranslateXRef = useRef(tempTranslateX);
-  const tempTranslateYRef = useRef(tempTranslateY); // Refs that manage the keydown acceleration
 
+function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving) {
+  // Refs that manage the keydown acceleration
   const direction = useRef(0);
   const elapsedTime = useRef(0);
 
-  const setTempTranslateX = data => {
-    setIsMoving(true);
-    tempTranslateXRef.current = data;
-
-    _setTempTranslateX(data);
-  };
-
-  const setTempTranslateY = data => {
-    setIsMoving(true);
-    tempTranslateYRef.current = data;
-
-    _setTempTranslateY(data);
-  };
-
   const onKeyDownCallback = event => {
     var _context, _context2, _context3;
 
@@ -111,11 +92,81 @@ export function useArrowKeys(translateX, translateY, dispatch) {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
-    if (isMoving) {
+    if (isMoving && direction.current !== 0) {
       stopMovementCallback();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [tempTranslateX, tempTranslateY]); // Updates the reducer state when user stops moving.
+  }, [tempTranslateX, tempTranslateY]);
+}
+
+function useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving) {
+  const initialPageX = useRef(0);
+  const initialPageY = useRef(0);
+  const mouseDown = useRef(false);
+  const imgElement = useRef(null);
+  const containerElement = useRef(null);
+
+  const stoppedMovingCallback = () => {
+    mouseDown.current = false;
+    initialPageX.current = 0;
+    initialPageY.current = 0;
+    imgElement.current.onmousemove = null;
+    imgElement.current.onmouseup = null;
+    imgElement.current = null;
+    containerElement.current.onmouseout = null;
+    containerElement.current = null;
+    setIsMoving(false);
+  };
+
+  const startedMovingCallback = (target, clientX, clientY, container) => {
+    mouseDown.current = true;
+    initialPageX.current = clientX;
+    initialPageY.current = clientY;
+    target.onmousemove = onMouseMoveCallback;
+    target.onmouseup = stoppedMovingCallback;
+    imgElement.current = target; // Should stop the movement when mouse leaves the preview
+
+    container.onmouseout = stoppedMovingCallback;
+    containerElement.current = container;
+    setIsMoving(true);
+  };
+
+  const onMouseMoveCallback = e => {
+    if (!mouseDown.current) {
+      return stoppedMovingCallback();
+    }
+
+    setTempTranslateX(tempTranslateX + e.clientX - initialPageX.current);
+    setTempTranslateY(tempTranslateY + e.clientY - initialPageY.current);
+  };
+
+  return (e, container) => startedMovingCallback(e.target, e.clientX, e.clientY, container);
+}
+
+export function useKeyMouseEvents(translateX, translateY, dispatch, imgRef) {
+  const [tempTranslateX, _setTempTranslateX] = useState(translateX);
+  const [tempTranslateY, _setTempTranslateY] = useState(translateY);
+  const [isMoving, setIsMoving] = useState(false); // These are used to get the current values when the callback is called from outside.
+
+  const tempTranslateXRef = useRef(tempTranslateX);
+  const tempTranslateYRef = useRef(tempTranslateY);
+
+  const setTempTranslateX = data => {
+    setIsMoving(true);
+    tempTranslateXRef.current = data;
+
+    _setTempTranslateX(data);
+  };
+
+  const setTempTranslateY = data => {
+    setIsMoving(true);
+    tempTranslateYRef.current = data;
+
+    _setTempTranslateY(data);
+  };
+
+  useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving);
+  const onMouseDownCallback = useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving); // Updates the reducer state when user stops moving.
 
   useEffect(() => {
     if (isMoving) {
@@ -144,13 +195,17 @@ export function useArrowKeys(translateX, translateY, dispatch) {
     }
 
     if (translateX !== tempTranslateX) {
-      setTempTranslateX(translateX);
+      tempTranslateXRef.current = translateX;
+
+      _setTempTranslateX(translateX);
     }
 
     if (translateY !== tempTranslateY) {
-      setTempTranslateY(translateY);
+      tempTranslateYRef.current = translateY;
+
+      _setTempTranslateY(translateY);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [translateX, translateY]);
-  return [tempTranslateX, tempTranslateY, onKeyDownCallback];
+  return [tempTranslateX, tempTranslateY, onMouseDownCallback];
 }