@instructure/canvas-rce 5.14.1 → 5.15.0

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';
@@ -37,10 +38,9 @@ import { validIcon } from '../utils/iconValidation';
 import { IconMakerFormHasChanges } from '../utils/IconMakerFormHasChanges';
 import bridge from '../../../../bridge';
 import { shouldIgnoreClose } from '../utils/IconMakerClose';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } 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,14 +109,12 @@ function renderFooter(status, onClose, handleSubmit, editing, replaceAll, setRep
     isModified: isModified
   }));
 }
-
-export function IconMakerTray(_ref) {
-  let {
-    editor,
-    onUnmount,
-    editing,
-    canvasOrigin
-  } = _ref;
+export function IconMakerTray({
+  editor,
+  onUnmount,
+  editing,
+  canvasOrigin
+}) {
   const nameRef = useRef();
   const applyRef = useRef();
   const [isOpen, setIsOpen] = useState(true);
@@ -126,16 +122,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 [mountNode, setMountNode] = useState(instuiPopupMountNodeFn());
   const handleFullscreenChange = useCallback(() => {
-    setMountNode(instuiPopupMountNode());
-  }, []); // These useRef objects are needed because when the tray is closed using the escape key
+    setMountNode(instuiPopupMountNodeFn());
+  }, []);
+
+  // 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);
@@ -143,13 +141,9 @@ export function IconMakerTray(_ref) {
   statusRef.current = useMemo(() => status, [status]);
   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);
+    editor?.rceWrapper?._elementRef?.current?.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?.rceWrapper?._elementRef?.current?.removeEventListener('fullscreenchange', handleFullscreenChange);
     };
   }, [editor, handleFullscreenChange]);
   useEffect(() => {
@@ -157,34 +151,27 @@ 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 (shouldIgnoreClose(event?.target, editor?.id)) return;
+    if (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();
+    event.shiftKey ? applyRef.current?.focus() : nameRef.current?.focus();
   };
-
   useEffect(() => {
     setReplaceAll(false);
   }, [settings.name]);
@@ -195,16 +182,13 @@ 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;
+  const handleSubmit = ({
+    replaceFile = false
+  }) => {
     setStatus(statuses.LOADING);
-
     if (!validIcon(settings)) {
       dispatch({
         type: actions.SET_ERROR,
@@ -213,7 +197,6 @@ export function IconMakerTray(_ref) {
       setStatus(statuses.ERROR);
       return;
     }
-
     const svg = buildSvg(settings, {
       isPreview: false
     });
@@ -224,17 +207,14 @@ export function IconMakerTray(_ref) {
     }, {
       onDuplicate: replaceFile && 'overwrite'
     }).then(writeIconToRCE).then(() => setIsOpen(false)).catch(err => {
-      // eslint-disable-next-line no-console
       console.error(err);
       setStatus(statuses.ERROR);
     });
   };
-
-  const writeIconToRCE = _ref3 => {
-    let {
-      url,
-      display_name
-    } = _ref3;
+  const writeIconToRCE = ({
+    url,
+    display_name
+  }) => {
     const {
       alt,
       isDecorative,
@@ -254,12 +234,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 +250,6 @@ export function IconMakerTray(_ref) {
       cropperSettings: null
     };
   };
-
   const replaceInitialSettings = () => {
     const name = editing ? settings.name : undefined;
     const textPosition = editing ? settings.textPosition : defaultState.textPosition;
@@ -291,17 +270,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');

package/es/rce/plugins/instructure_icon_maker/reducers/imageSection.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 formatMessage from '../../../../format-message';
 export const initialState = {
   mode: '',
@@ -91,104 +92,102 @@ export const modes = {
     label: formatMessage('Multi Color Image')
   }
 };
-
 const imageSection = (state, action) => {
   switch (action.type) {
     case actions.START_LOADING.type:
-      return { ...state,
+      return {
+        ...state,
         loading: true
       };
-
     case actions.STOP_LOADING.type:
-      return { ...state,
+      return {
+        ...state,
         loading: false
       };
-
     case actions.SET_IMAGE.type:
-      return { ...state,
+      return {
+        ...state,
         image: action.payload
       };
-
     case actions.SET_IMAGE_NAME.type:
-      return { ...state,
+      return {
+        ...state,
         imageName: action.payload
       };
-
     case actions.SET_COMPRESSION_STATUS.type:
-      return { ...state,
+      return {
+        ...state,
         compressed: action.payload
       };
-
     case actions.CLEAR_IMAGE.type:
-      return { ...state,
+      return {
+        ...state,
         image: '',
         imageName: '',
         compressed: false
       };
-
     case actions.SET_ICON.type:
-      return { ...state,
+      return {
+        ...state,
         icon: action.payload
       };
-
     case actions.SET_ICON_FILL_COLOR.type:
-      return { ...state,
+      return {
+        ...state,
         iconFillColor: action.payload
       };
-
     case actions.CLEAR_MODE.type:
-      return { ...state,
+      return {
+        ...state,
         mode: ''
       };
-
     case actions.SET_IMAGE_COLLECTION_OPEN.type:
-      return { ...state,
+      return {
+        ...state,
         collectionOpen: action.payload
       };
-
     case actions.RESET_ALL.type:
-      return { ...state,
+      return {
+        ...state,
         ...initialState
       };
-
     case modes.uploadImages.type:
-      return { ...state,
+      return {
+        ...state,
         mode: modes.uploadImages.type
       };
-
     case modes.singleColorImages.type:
-      return { ...state,
+      return {
+        ...state,
         mode: modes.singleColorImages.type
       };
-
     case modes.multiColorImages.type:
-      return { ...state,
+      return {
+        ...state,
         mode: modes.multiColorImages.type
       };
-
     case modes.courseImages.type:
-      return { ...state,
+      return {
+        ...state,
         mode: modes.courseImages.type
       };
-
     case actions.UPDATE_SETTINGS.type:
-      return { ...state,
+      return {
+        ...state,
         ...action.payload
       };
-
     case actions.SET_CROPPER_OPEN.type:
-      return { ...state,
+      return {
+        ...state,
         cropperOpen: action.payload
       };
-
     case actions.SET_CROPPER_SETTINGS.type:
-      return { ...state,
+      return {
+        ...state,
         cropperSettings: action.payload
       };
-
     default:
       throw Error('Unknown action for image selection reducer');
   }
 };
-
 export default imageSection;

package/es/rce/plugins/instructure_icon_maker/reducers/svgSettings.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 { DEFAULT_SETTINGS } from '../svg/constants';
 export const defaultState = DEFAULT_SETTINGS;
 export const actions = {
@@ -28,70 +29,69 @@ export const actions = {
   SET_HEIGHT: 'SetHeight',
   SET_ERROR: 'SetError'
 };
-
 const buildTransformString = state => {
   // All transforms that may be applied to an image
   return [`translate(${state.translateX},${state.translateY})`].join(' ');
 };
-
 const nextStateForTransform = (currentState, transformProp, value) => {
   // Set the transform property that actually changed
-  let nextState = { ...currentState,
+  let nextState = {
+    ...currentState,
     [transformProp]: value
-  }; // Regenerate the new "transform" string, taking into account the transform
-  // property value that was updated
+  };
 
-  nextState = { ...nextState,
+  // Regenerate the new "transform" string, taking into account the transform
+  // property value that was updated
+  nextState = {
+    ...nextState,
     transform: buildTransformString(nextState)
   };
   return nextState;
 };
-
 export const svgSettings = (state, action) => {
   switch (action.type) {
     case actions.SET_IMAGE_SETTINGS:
-      return { ...state,
+      return {
+        ...state,
         imageSettings: action.payload
       };
-
     case actions.SET_EMBED_IMAGE:
-      return { ...state,
+      return {
+        ...state,
         embedImage: action.payload
       };
-
     case actions.SET_X:
-      return { ...state,
+      return {
+        ...state,
         x: action.payload
       };
-
     case actions.SET_Y:
-      return { ...state,
+      return {
+        ...state,
         y: action.payload
       };
-
     case actions.SET_WIDTH:
-      return { ...state,
+      return {
+        ...state,
         width: action.payload
       };
-
     case actions.SET_HEIGHT:
-      return { ...state,
+      return {
+        ...state,
         height: action.payload
       };
-
     case actions.SET_ERROR:
-      return { ...state,
+      return {
+        ...state,
         error: action.payload
       };
-
     case actions.SET_TRANSLATE_X:
       return nextStateForTransform(state, 'translateX', action.payload);
-
     case actions.SET_TRANSLATE_Y:
       return nextStateForTransform(state, 'translateY', action.payload);
-
     default:
-      return { ...state,
+      return {
+        ...state,
         ...action
       };
   }

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

@@ -15,10 +15,11 @@
  * 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 formatMessage from '../../../format-message';
 import { BUTTON_ID, TOOLBAR_ID, ICON_MAKER_ATTRIBUTE } from './svg/constants';
 import TrayController from '../instructure_image/ImageOptionsTray/TrayController';
-export const shouldShowEditButton = node => !!(node !== null && node !== void 0 && node.getAttribute(ICON_MAKER_ATTRIBUTE));
+export const shouldShowEditButton = node => !!node?.getAttribute(ICON_MAKER_ATTRIBUTE);
 export const EDIT_ALT_TEXT_BUTTON_ID = 'inst-icon-maker-edit-alt-text';
 const trayController = new TrayController();
 export default function registerEditToolbar(editor, onAction) {
@@ -26,7 +27,6 @@ export default function registerEditToolbar(editor, onAction) {
   addAltTextButton(editor);
   addContextToolbar(editor);
 }
-
 function addButton(editor, onAction) {
   editor.ui.registry.addButton(BUTTON_ID, {
     onAction,
@@ -34,7 +34,6 @@ function addButton(editor, onAction) {
     tooltip: formatMessage('Edit Existing Icon Maker Icon')
   });
 }
-
 function addAltTextButton(editor) {
   editor.ui.registry.addButton(EDIT_ALT_TEXT_BUTTON_ID, {
     onAction: () => {
@@ -45,7 +44,6 @@ function addAltTextButton(editor) {
     tooltip: formatMessage('Edit alt text for this icon instance')
   });
 }
-
 function addContextToolbar(editor) {
   editor.ui.registry.addContextToolbar(TOOLBAR_ID, {
     items: `${BUTTON_ID} ${EDIT_ALT_TEXT_BUTTON_ID}`,

package/es/rce/plugins/instructure_icon_maker/svg/constants.js

@@ -15,15 +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/>.
  */
-export const TYPE = 'image/svg+xml-icon-maker-icons'; // New constants added to centralize imports
 
+export const TYPE = 'image/svg+xml-icon-maker-icons';
+// New constants added to centralize imports
 export const BUTTON_ID = 'inst-icon-maker-edit';
 export const TOOLBAR_ID = 'inst-icon-maker-edit-toolbar';
 export const ICON_MAKER_ATTRIBUTE = 'data-inst-icon-maker-icon';
 export const ICON_MAKER_DOWNLOAD_URL_ATTR = 'data-download-url';
 export const ICON_MAKER_ICONS = 'icon_maker_icons';
-export const ICON_MAKER_PARAM = 'icon_maker_icon'; // different definitions for filetypes
-
+export const ICON_MAKER_PARAM = 'icon_maker_icon';
+// different definitions for filetypes
 export const SVG_XML_TYPE = 'image/svg+xml';
 export const SVG_TYPE = 'image/svg';
 export const Size = {