@instructure/canvas-rce 5.14.0 → 5.14.2

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Upload.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 formatMessage from '../../../../../../format-message';
@@ -24,19 +25,21 @@ import { UploadFile } from '../../../../shared/Upload/UploadFile';
 import { canCompressImage, compressImage, shouldCompressImage } from '../../../../shared/compressionUtils';
 import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
 import { PREVIEW_HEIGHT, PREVIEW_WIDTH } from '../../../../shared/ImageCropper/constants';
-
 function dispatchCompressedImage(theFile, dispatch, onChange) {
-  dispatch({ ...actions.SET_IMAGE,
+  dispatch({
+    ...actions.SET_IMAGE,
     payload: ''
   });
   onChange({
     type: svgActions.SET_EMBED_IMAGE,
     payload: ''
   });
-  dispatch({ ...actions.SET_CROPPER_OPEN,
+  dispatch({
+    ...actions.SET_CROPPER_OPEN,
     payload: true
   });
-  dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+  dispatch({
+    ...actions.SET_IMAGE_COLLECTION_OPEN,
     payload: false
   });
   return compressImage({
@@ -44,42 +47,46 @@ function dispatchCompressedImage(theFile, dispatch, onChange) {
     previewWidth: PREVIEW_WIDTH,
     previewHeight: PREVIEW_HEIGHT
   }).then(blob => {
-    dispatch({ ...actions.SET_COMPRESSION_STATUS,
+    dispatch({
+      ...actions.SET_COMPRESSION_STATUS,
       payload: true
     });
-    dispatch({ ...actions.SET_IMAGE,
+    dispatch({
+      ...actions.SET_IMAGE,
       payload: blob
     });
     onChange({
       type: svgActions.SET_EMBED_IMAGE,
       payload: blob
     });
-    dispatch({ ...actions.SET_IMAGE_NAME,
+    dispatch({
+      ...actions.SET_IMAGE_NAME,
       payload: theFile.name
     });
   }).catch(() => {
     // If compression fails, use the original one
     // TODO: We can show the user that compression failed in some way
-    dispatch({ ...actions.SET_IMAGE,
+    dispatch({
+      ...actions.SET_IMAGE,
       payload: theFile.preview
     });
     onChange({
       type: svgActions.SET_EMBED_IMAGE,
       payload: theFile.preview
     });
-    dispatch({ ...actions.SET_IMAGE_NAME,
+    dispatch({
+      ...actions.SET_IMAGE_NAME,
       payload: theFile.name
     });
   });
 }
-
 export const onSubmit = (dispatch, onChange) => (_editor, _accept, _selectedPanel, uploadData) => {
   const {
     theFile
   } = uploadData;
-
   if (isAnUnsupportedGifPngImage(theFile)) {
-    dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+    dispatch({
+      ...actions.SET_IMAGE_COLLECTION_OPEN,
       payload: false
     });
     return onChange({
@@ -89,29 +96,30 @@ export const onSubmit = (dispatch, onChange) => (_editor, _accept, _selectedPane
       })
     });
   }
-
   if (canCompressImage() && shouldCompressImage(theFile)) {
     return dispatchCompressedImage(theFile, dispatch, onChange);
   }
-
-  dispatch({ ...actions.SET_IMAGE,
+  dispatch({
+    ...actions.SET_IMAGE,
     payload: theFile.preview
   });
   onChange({
     type: svgActions.SET_EMBED_IMAGE,
     payload: theFile.preview
   });
-  dispatch({ ...actions.SET_IMAGE_NAME,
+  dispatch({
+    ...actions.SET_IMAGE_NAME,
     payload: theFile.name
   });
-  dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+  dispatch({
+    ...actions.SET_IMAGE_COLLECTION_OPEN,
     payload: false
   });
-  dispatch({ ...actions.SET_CROPPER_OPEN,
+  dispatch({
+    ...actions.SET_CROPPER_OPEN,
     payload: true
   });
 };
-
 const Upload = _ref => {
   let {
     editor,
@@ -134,7 +142,6 @@ const Upload = _ref => {
     canvasOrigin: canvasOrigin
   });
 };
-
 Upload.propTypes = {
   editor: PropTypes.object.isRequired,
   dispatch: PropTypes.func,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/index.js

@@ -15,4 +15,5 @@
  * 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 { ImageSection } from './ImageSection';

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/propTypes.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 PropTypes from 'prop-types';
 import { ImageCropperSettingsPropTypes } from '../../../../shared/ImageCropper/propTypes';
 export const ImageSettingsPropTypes = PropTypes.shape({

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/utils.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 MAX_GIF_PNG_SIZE_BYTES = 250 * 1024;
 export const isAnUnsupportedGifPngImage = _ref => {
   let {

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/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, useRef } from 'react';
 import { View } from '@instructure/ui-view';
 import { buildSvg } from '../../svg';
@@ -38,23 +39,22 @@ export const Preview = _ref => {
     as: "div"
   }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, previewMessage), /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true",
-    style: { ...checkerboardStyle(SQUARE_SIZE),
+    style: {
+      ...checkerboardStyle(SQUARE_SIZE),
       display: 'flex',
       justifyContent: 'center'
     },
     ref: wrapper
   }));
 };
+
 /**
  * Remove the node contents and append the svg element.
  */
-
 function appendSvg(svg, node) {
   if (!node) return;
-
   while (node.firstChild) {
     node.removeChild(node.lastChild);
   }
-
   node.appendChild(svg);
 }

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ShapeSection.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 { SimpleSelect } from '@instructure/ui-simple-select';
@@ -23,9 +24,7 @@ import { Shape } from '../../svg/shape';
 import { Size } from '../../svg/constants';
 const SIZES = [Size.ExtraSmall, Size.Small, Size.Medium, Size.Large];
 const SHAPE_SECTION_ID = 'icons-tray-shape-section';
-
 const getShapeSection = () => document.querySelector(`#${SHAPE_SECTION_ID}`);
-
 export const ShapeSection = _ref => {
   let {
     settings,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/TextSection.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 { TextInput } from '@instructure/ui-text-input';
@@ -26,12 +27,9 @@ import { MAX_TOTAL_TEXT_CHARS } from '../../svg/constants';
 import useDebouncedValue from '../../utils/useDebouncedValue';
 const TEXT_SIZES = ['small', 'medium', 'large', 'x-large'];
 const TEXT_POSITIONS = ['middle', 'bottom-third', 'below'];
-
 const getTextSection = () => document.querySelector('#icons-tray-text-section');
-
 const processText = (oldValue, newValue) => {
   let result = newValue;
-
   if (newValue.length > MAX_TOTAL_TEXT_CHARS) {
     if (oldValue.length >= MAX_TOTAL_TEXT_CHARS) {
       // When typing chars
@@ -41,10 +39,8 @@ const processText = (oldValue, newValue) => {
       result = result.substring(0, MAX_TOTAL_TEXT_CHARS);
     }
   }
-
   return result;
 };
-
 export const TextSection = _ref => {
   let {
     settings,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/index.js

@@ -15,4 +15,5 @@
  * 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 { CreateIconMakerForm } from './CreateIconMakerForm';

package/es/rce/plugins/instructure_icon_maker/components/IconMakerTray.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, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { CloseButton } from '@instructure/ui-buttons';
@@ -40,7 +41,6 @@ import { shouldIgnoreClose } from '../utils/IconMakerClose';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 const INVALID_MESSAGE = formatMessage('One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image');
 const UNSAVED_CHANGES_MESSAGE = formatMessage('You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?');
-
 function renderHeader(title, settings, onKeyDown, onAlertDismissal, onClose) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -76,7 +76,6 @@ function renderHeader(title, settings, onKeyDown, onAlertDismissal, onClose) {
     settings: settings
   }))));
 }
-
 function renderBody(settings, dispatch, editor, editing, allowNameChange, nameRef, canvasOrigin, isLoading) {
   return isLoading() ? /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "center"
@@ -93,7 +92,6 @@ function renderBody(settings, dispatch, editor, editing, allowNameChange, nameRe
     canvasOrigin: canvasOrigin
   });
 }
-
 function renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef, isModified) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -111,7 +109,6 @@ function renderFooter(status, onClose, handleSubmit, editing, replaceAll, setRep
     isModified: isModified
   }));
 }
-
 export function IconMakerTray(_ref) {
   let {
     editor,
@@ -126,16 +123,18 @@ export function IconMakerTray(_ref) {
   const title = editing ? formatMessage('Edit Icon') : formatMessage('Create Icon');
   const [settings, settingsStatus, dispatch] = useSvgSettings(editor, editing, canvasOrigin);
   const [status, setStatus] = useState(statuses.IDLE);
-  const [initialSettings, setInitialSettings] = useState({ ...defaultState
+  const [initialSettings, setInitialSettings] = useState({
+    ...defaultState
   });
   const isModified = useRef(false);
   const [mountNode, setMountNode] = useState(instuiPopupMountNode());
   const handleFullscreenChange = useCallback(() => {
     setMountNode(instuiPopupMountNode());
-  }, []); // These useRef objects are needed because when the tray is closed using the escape key
+  }, []);
+
+  // These useRef objects are needed because when the tray is closed using the escape key
   // objects created by useState are not available, causing the comparison between
   // initialSettings and settings to behave unexpectedly
-
   const initialSettingsRef = useRef(initialSettings);
   const settingsRef = useRef(settings);
   const statusRef = useRef(status);
@@ -144,11 +143,9 @@ export function IconMakerTray(_ref) {
   initialSettingsRef.current = useMemo(() => initialSettings, [initialSettings]);
   useEffect(() => {
     var _editor$rceWrapper, _editor$rceWrapper$_e, _editor$rceWrapper$_e2;
-
     editor === null || editor === void 0 ? void 0 : (_editor$rceWrapper = editor.rceWrapper) === null || _editor$rceWrapper === void 0 ? void 0 : (_editor$rceWrapper$_e = _editor$rceWrapper._elementRef) === null || _editor$rceWrapper$_e === void 0 ? void 0 : (_editor$rceWrapper$_e2 = _editor$rceWrapper$_e.current) === null || _editor$rceWrapper$_e2 === void 0 ? void 0 : _editor$rceWrapper$_e2.addEventListener('fullscreenchange', handleFullscreenChange);
     return () => {
       var _editor$rceWrapper2, _editor$rceWrapper2$_, _editor$rceWrapper2$_2;
-
       editor === null || editor === void 0 ? void 0 : (_editor$rceWrapper2 = editor.rceWrapper) === null || _editor$rceWrapper2 === void 0 ? void 0 : (_editor$rceWrapper2$_ = _editor$rceWrapper2._elementRef) === null || _editor$rceWrapper2$_ === void 0 ? void 0 : (_editor$rceWrapper2$_2 = _editor$rceWrapper2$_.current) === null || _editor$rceWrapper2$_2 === void 0 ? void 0 : _editor$rceWrapper2$_2.removeEventListener('fullscreenchange', handleFullscreenChange);
     };
   }, [editor, handleFullscreenChange]);
@@ -157,34 +154,28 @@ export function IconMakerTray(_ref) {
     isModified.current = formHasChanges.hasChanges();
   }, [settings, initialSettings]);
   const storeProps = useStoreProps();
-
   const onClose = event => {
     if (shouldIgnoreClose(event === null || event === void 0 ? void 0 : event.target, editor === null || editor === void 0 ? void 0 : editor.id)) return;
-    if ((statusRef === null || statusRef === void 0 ? void 0 : statusRef.current) === statuses.LOADING) return; // Uploading an image creates a modal on the page. If that modal is open, we don't want to close the tray
-
-    if (!!hasOpenModal()) return; // RCE already uses browser's confirm dialog for unsaved changes
+    if ((statusRef === null || statusRef === void 0 ? void 0 : statusRef.current) === statuses.LOADING) return;
+    // Uploading an image creates a modal on the page. If that modal is open, we don't want to close the tray
+    // eslint-disable-next-line no-extra-boolean-cast
+    if (!!hasOpenModal()) return;
+    // RCE already uses browser's confirm dialog for unsaved changes
     // Its use here in the Icon Maker tray keeps that consistency
     // eslint-disable-next-line no-restricted-globals, no-alert
-
     if (isModified.current && !confirm(UNSAVED_CHANGES_MESSAGE)) {
       return;
     }
-
     setIsOpen(false);
   };
-
   const hasOpenModal = () => document.querySelector('[data-cid="Modal"]');
-
   const isLoading = () => status === statuses.LOADING;
-
   const onKeyDown = event => {
     var _applyRef$current, _nameRef$current;
-
     if (event.keyCode !== 9) return;
     event.preventDefault();
     event.shiftKey ? (_applyRef$current = applyRef.current) === null || _applyRef$current === void 0 ? void 0 : _applyRef$current.focus() : (_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 ? void 0 : _nameRef$current.focus();
   };
-
   useEffect(() => {
     setReplaceAll(false);
   }, [settings.name]);
@@ -195,16 +186,14 @@ export function IconMakerTray(_ref) {
         payload: null
       });
       setStatus(statuses.IDLE);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.color, settings.textColor, settings.text, settings.textSize, settings.textBackgroundColor, settings.textPosition, settings.imageSettings, settings.outlineColor, settings.outlineSize, settings.name]);
-
   const handleSubmit = _ref2 => {
     let {
       replaceFile = false
     } = _ref2;
     setStatus(statuses.LOADING);
-
     if (!validIcon(settings)) {
       dispatch({
         type: actions.SET_ERROR,
@@ -213,7 +202,6 @@ export function IconMakerTray(_ref) {
       setStatus(statuses.ERROR);
       return;
     }
-
     const svg = buildSvg(settings, {
       isPreview: false
     });
@@ -229,7 +217,6 @@ export function IconMakerTray(_ref) {
       setStatus(statuses.ERROR);
     });
   };
-
   const writeIconToRCE = _ref3 => {
     let {
       url,
@@ -254,12 +241,12 @@ export function IconMakerTray(_ref) {
       STYLE: externalStyle,
       // DON'T CHANGE BEFORE READING COMMENT ABOVE
       width: externalWidth
-    }; // Mark the image as an icon maker icon.
+    };
 
+    // Mark the image as an icon maker icon.
     addIconMakerAttributes(imageAttributes);
     bridge.embedImage(imageAttributes);
   };
-
   const defaultImageSettings = () => {
     return {
       mode: '',
@@ -270,7 +257,6 @@ export function IconMakerTray(_ref) {
       cropperSettings: null
     };
   };
-
   const replaceInitialSettings = () => {
     const name = editing ? settings.name : undefined;
     const textPosition = editing ? settings.textPosition : defaultState.textPosition;
@@ -291,17 +277,16 @@ export function IconMakerTray(_ref) {
       imageSettings
     });
   };
-
   useEffect(() => {
     setStatus(settingsStatus);
-    replaceInitialSettings(); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settingsStatus]);
+    replaceInitialSettings();
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settingsStatus]);
   const handleAlertDismissal = () => dispatch({
     type: actions.SET_ERROR,
     payload: null
   });
-
   return /*#__PURE__*/React.createElement(FixedContentTray, {
     title: title,
     isOpen: isOpen,

package/es/rce/plugins/instructure_icon_maker/components/SavedIconMakerList.js

@@ -15,13 +15,13 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from '@instructure/ui-view';
 import Images from '../../instructure_image/Images';
 import { contentTrayDocumentShape } from '../../shared/fileShape';
 import { ICON_MAKER_ICONS } from '../svg/constants';
-
 const SavedIconMakerList = props => {
   const {
     sortBy,
@@ -31,7 +31,8 @@ const SavedIconMakerList = props => {
     fetchInitialImages,
     fetchNextImages,
     contextType
-  } = { ...props
+  } = {
+    ...props
   };
   const {
     files,
@@ -62,9 +63,8 @@ const SavedIconMakerList = props => {
     isIconMaker: true
   }));
 };
-/* eslint-disable react/no-unused-prop-types */
-
 
+/* eslint-disable react/no-unused-prop-types */
 SavedIconMakerList.propTypes = {
   sortBy: PropTypes.shape({
     sort: PropTypes.oneOf(['date_added', 'alphabetical']).isRequired,

package/es/rce/plugins/instructure_icon_maker/plugin.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2021 - present Instructure, Inc.
  *
@@ -17,13 +15,13 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import bridge from '../../../bridge';
 import formatMessage from '../../../format-message';
 import { isOKToLink } from '../../contentInsertionUtils';
 import clickCallback, { CREATE_ICON_MAKER, EDIT_ICON_MAKER, LIST_ICON_MAKER } from './clickCallback';
 import registerEditToolbar from './registerEditToolbar';
 import tinymce from 'tinymce';
-
 function getMenuItems() {
   return [{
     text: formatMessage('Create Icon Maker Icon'),
@@ -33,27 +31,24 @@ function getMenuItems() {
     value: 'instructure_list_icon_maker'
   }];
 }
-
 function handleOptionSelected(ed, value) {
   switch (value) {
     case 'instructure_create_icon_maker':
       ed.focus(true);
       ed.execCommand('instructureTrayForIconMakerPlugin', false, CREATE_ICON_MAKER);
       break;
-
     case 'instructure_list_icon_maker':
       ed.focus(true);
       ed.execCommand('instructureTrayForIconMakerPlugin', false, LIST_ICON_MAKER);
       break;
-
     case 'instructure_edit_icon_maker':
       ed.focus(true);
       ed.execCommand('instructureTrayForIconMakerPlugin', false, EDIT_ICON_MAKER);
       break;
   }
-} // Register plugin
-
+}
 
+// Register plugin
 tinymce.PluginManager.add('instructure_icon_maker', function (ed) {
   // Register tray control command
   ed.addCommand('instructureTrayForIconMakerPlugin', (_ui, type) => {
@@ -62,8 +57,9 @@ tinymce.PluginManager.add('instructure_icon_maker', function (ed) {
     } else {
       clickCallback(ed, document, type);
     }
-  }); // Register menu items
+  });
 
+  // Register menu items
   ed.ui.registry.addNestedMenuItem('instructure_icon_maker', {
     text: formatMessage('Icon Maker Icons'),
     icon: 'buttons',
@@ -76,8 +72,9 @@ tinymce.PluginManager.add('instructure_icon_maker', function (ed) {
         return () => {};
       }
     }))
-  }); // Register button
+  });
 
+  // Register button
   ed.ui.registry.addMenuButton('instructure_icon_maker', {
     tooltip: formatMessage('Icon Maker Icons'),
     icon: 'buttons',
@@ -87,21 +84,20 @@ tinymce.PluginManager.add('instructure_icon_maker', function (ed) {
       value: item.value,
       onAction: () => handleOptionSelected(ed, item.value)
     }))),
-
     onSetup(api) {
       function handleNodeChange(_e) {
         api.setDisabled(!isOKToLink(ed.selection.getContent()));
       }
-
       setTimeout(handleNodeChange);
       ed.on('NodeChange', handleNodeChange);
       return () => {
         ed.off('NodeChange', handleNodeChange);
       };
     }
+  });
 
-  }); // Register context toolbar for editing existing icon maker icons
-
+  // Register context toolbar for editing existing icon maker icons
+  // @ts-expect-error
   registerEditToolbar(ed, api => {
     if (!api.isDisabled()) {
       handleOptionSelected(ed, 'instructure_edit_icon_maker');