@instructure/canvas-rce 5.12.1 → 5.12.2

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Header.js

@@ -1,110 +0,0 @@
-/*
- * Copyright (C) 2021 - 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, { useEffect } from 'react';
-import { Flex } from '@instructure/ui-flex';
-import { TextInput } from '@instructure/ui-text-input';
-import formatMessage from '../../../../../format-message';
-import { TextArea } from '@instructure/ui-text-area';
-import { Tooltip } from '@instructure/ui-tooltip';
-import { View } from '@instructure/ui-view';
-import { IconButton } from '@instructure/ui-buttons';
-import { Checkbox } from '@instructure/ui-checkbox';
-import { IconQuestionLine } from '@instructure/ui-icons';
-import { FormFieldLabel } from '@instructure/ui-form-field';
-import { decode } from '../../svg/utils';
-import useDebouncedValue from '../../utils/useDebouncedValue';
-
-const getAltTextLabel = () => /*#__PURE__*/React.createElement(Flex, {
-  alignItems: "center",
-  margin: "0 0 small 0"
-}, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(FormFieldLabel, null, formatMessage('Alt Text'))), /*#__PURE__*/React.createElement(Flex.Item, {
-  margin: "0 0 0 xx-small"
-}, /*#__PURE__*/React.createElement(Tooltip, {
-  on: ['hover', 'focus'],
-  placement: "top",
-  renderTip: /*#__PURE__*/React.createElement(View, {
-    display: "block",
-    id: "alt-text-label-tooltip",
-    maxWidth: "14rem"
-  }, formatMessage('Used by screen readers to describe the content of an image'))
-}, /*#__PURE__*/React.createElement(IconButton, {
-  renderIcon: IconQuestionLine,
-  withBackground: false,
-  withBorder: false,
-  size: "small",
-  screenReaderLabel: formatMessage('Toggle tooltip')
-}))));
-
-export const Header = _ref => {
-  let {
-    settings,
-    onChange,
-    allowNameChange,
-    nameRef,
-    editing
-  } = _ref;
-  const originalName = settings.originalName;
-  const [name, setName] = useDebouncedValue(settings.name, n => onChange({
-    name: n
-  }));
-  const [alt, setAlt] = useDebouncedValue(settings.alt, a => onChange({
-    alt: a
-  }));
-  useEffect(() => {
-    if (!allowNameChange) onChange({
-      name: originalName
-    });
-  }, [allowNameChange, onChange, originalName]);
-  return /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    padding: "small small 0"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    id: "icon-name",
-    "data-testid": "icon-name",
-    renderLabel: formatMessage('Name'),
-    placeholder: formatMessage('untitled'),
-    interaction: allowNameChange ? 'enabled' : 'disabled',
-    onChange: setName,
-    value: name ? decode(name) : '',
-    inputRef: ref => {
-      if (nameRef) nameRef.current = ref;
-    }
-  })), !editing && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, getAltTextLabel(), /*#__PURE__*/React.createElement(TextArea, {
-    label: "",
-    "aria-label": formatMessage('Alt Text'),
-    id: "icon-alt-text",
-    height: "4rem",
-    disabled: settings.isDecorative,
-    onChange: setAlt,
-    placeholder: formatMessage('(Describe the icon)'),
-    resize: "vertical",
-    value: alt
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: settings.isDecorative,
-    label: formatMessage('Decorative Icon'),
-    onChange: () => onChange({
-      isDecorative: !settings.isDecorative
-    })
-  }))));
-};

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js

@@ -1,169 +0,0 @@
-/*
- * Copyright (C) 2021 - 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, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { View } from '@instructure/ui-view';
-import ImageList from '../../../../instructure_image/Images';
-import { useStoreProps } from '../../../../shared/StoreContext';
-import useDataUrl from '../../../../shared/useDataUrl';
-import { actions } from '../../../reducers/imageSection';
-import { canCompressImage, compressImage, shouldCompressImage } from '../../../../shared/compressionUtils';
-import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
-import { actions as svgActions } from '../../../reducers/svgSettings';
-import formatMessage from '../../../../../../format-message';
-import { PREVIEW_WIDTH, PREVIEW_HEIGHT } from '../../../../shared/ImageCropper/constants';
-
-const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
-  let image = dataUrl;
-
-  if (isAnUnsupportedGifPngImage(dataBlob)) {
-    dispatch({ ...actions.CLEAR_IMAGE
-    });
-    return onChange({
-      type: svgActions.SET_ERROR,
-      payload: formatMessage('GIF/PNG format images larger than {size} KB are not currently supported.', {
-        size: MAX_GIF_PNG_SIZE_BYTES / 1024
-      })
-    });
-  }
-
-  dispatch({ ...actions.SET_IMAGE,
-    payload: ''
-  });
-  dispatch({ ...actions.SET_CROPPER_OPEN,
-    payload: true
-  });
-  onChange({
-    type: svgActions.SET_EMBED_IMAGE,
-    payload: ''
-  });
-
-  if (canCompressImage() && shouldCompressImage(dataBlob)) {
-    try {
-      // If compression fails, use the original one
-      // TODO: We can show the user that compression failed in some way
-      image = await compressImage({
-        encodedImage: dataUrl,
-        previewWidth: PREVIEW_WIDTH,
-        previewHeight: PREVIEW_HEIGHT
-      });
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-    }
-
-    dispatch({ ...actions.SET_COMPRESSION_STATUS,
-      payload: true
-    });
-  }
-
-  dispatch({ ...actions.SET_IMAGE,
-    payload: image
-  });
-  onChange({
-    type: svgActions.SET_EMBED_IMAGE,
-    payload: image
-  });
-};
-
-const Course = _ref => {
-  let {
-    dispatch,
-    onChange,
-    onLoading,
-    onLoaded,
-    canvasOrigin
-  } = _ref;
-  const storeProps = useStoreProps();
-  const {
-    files,
-    bookmark,
-    isLoading,
-    hasMore
-  } = storeProps.images[storeProps.contextType];
-  const {
-    setUrl,
-    dataUrl,
-    dataLoading,
-    dataBlob
-  } = useDataUrl();
-  const category = 'uncategorized'; // Handle image selection
-
-  useEffect(() => {
-    // Don't clear the current image on re-render
-    if (!dataUrl || !dataBlob) return;
-    dispatchImage(dispatch, onChange, dataUrl, dataBlob); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataUrl, dataBlob]); // Handle loading states
-
-  useEffect(() => {
-    dispatch(dataLoading ? actions.START_LOADING : actions.STOP_LOADING);
-
-    if (dataUrl) {
-      dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
-        payload: false
-      });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [dataLoading]);
-  useEffect(() => {
-    if (isLoading) onLoading && onLoading();else onLoaded && onLoaded(); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading]);
-  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ImageList, {
-    fetchInitialImages: () => storeProps.fetchInitialImages({
-      category
-    }),
-    fetchNextImages: () => storeProps.fetchNextImages({
-      category
-    }),
-    contextType: storeProps.contextType,
-    images: {
-      [storeProps.contextType]: {
-        files,
-        bookmark,
-        hasMore,
-        isLoading
-      }
-    },
-    sortBy: {
-      sort: 'date_added',
-      order: 'desc'
-    },
-    onImageEmbed: file => {
-      setUrl(file.download_url);
-      dispatch({ ...actions.SET_IMAGE_NAME,
-        payload: file.filename
-      });
-    },
-    canvasOrigin: canvasOrigin
-  }));
-};
-
-Course.propTypes = {
-  dispatch: PropTypes.func,
-  onChange: PropTypes.func,
-  onLoading: PropTypes.func,
-  onLoaded: PropTypes.func,
-  canvasOrigin: PropTypes.string.isRequired
-};
-Course.defaultProps = {
-  dispatch: () => {},
-  onChange: () => {},
-  onLoading: () => {},
-  onLoaded: () => {}
-};
-export default Course;

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js

@@ -1,186 +0,0 @@
-/*
- * 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, { useState, useCallback, useEffect } from 'react';
-import formatMessage from '../../../../../../format-message';
-import { actions, modes } from '../../../reducers/imageSection';
-import { actions as trayActions } from '../../../reducers/svgSettings';
-import { IconButton } from '@instructure/ui-buttons';
-import { IconCropLine, IconTrashLine } from '@instructure/ui-icons';
-import { View } from '@instructure/ui-view';
-import { Flex } from '@instructure/ui-flex';
-import PreviewIcon from '../../../../shared/PreviewIcon';
-import { TruncateText } from '@instructure/ui-truncate-text';
-import { Text } from '@instructure/ui-text';
-import { ImageCropperModal } from '../../../../shared/ImageCropper';
-import ModeSelect from './ModeSelect';
-import PropTypes from 'prop-types';
-import { ImageCropperSettingsPropTypes } from '../../../../shared/ImageCropper/propTypes';
-import { MAX_IMAGE_SIZE_BYTES } from '../../../../shared/compressionUtils';
-import { createCroppedImageSvg } from '../../../../shared/ImageCropper/imageCropUtils';
-import { convertFileToBase64 } from '../../../../shared/fileUtils';
-import { ImageSettingsPropTypes } from './propTypes';
-import _ from 'lodash';
-
-const getCompressionMessage = () => formatMessage('Your image has been compressed for Icon Maker. Images less than {size} KB will not be compressed.', {
-  size: MAX_IMAGE_SIZE_BYTES / 1024
-});
-
-function renderImagePreview(_ref, embedImage) {
-  let {
-    loading
-  } = _ref;
-  return /*#__PURE__*/React.createElement(PreviewIcon, {
-    variant: "large",
-    testId: "selected-image-preview",
-    image: embedImage,
-    loading: loading,
-    checkered: true
-  });
-}
-
-function renderImageName(_ref2) {
-  let {
-    imageName
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(View, {
-    maxWidth: "200px",
-    as: "div"
-  }, /*#__PURE__*/React.createElement(TruncateText, null, /*#__PURE__*/React.createElement(Text, null, imageName || formatMessage('None Selected'))));
-}
-
-function renderImageActionButtons(_ref3, dispatch, trayDispatch, setFocus, ref) {
-  let {
-    mode,
-    collectionOpen
-  } = _ref3;
-  const showCropButton = [modes.uploadImages.type, modes.courseImages.type].includes(mode) && !collectionOpen;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showCropButton && /*#__PURE__*/React.createElement(IconButton, {
-    margin: "0 small 0 0",
-    screenReaderLabel: formatMessage('Crop image'),
-    onClick: () => dispatch({
-      type: actions.SET_CROPPER_OPEN.type,
-      payload: true
-    })
-  }, /*#__PURE__*/React.createElement(IconCropLine, null)), /*#__PURE__*/React.createElement(IconButton, {
-    ref: ref,
-    screenReaderLabel: formatMessage('Clear image'),
-    onClick: () => {
-      dispatch(actions.RESET_ALL);
-      trayDispatch({
-        type: trayActions.SET_EMBED_IMAGE,
-        payload: null
-      });
-    },
-    onFocus: () => setFocus(true),
-    onBlur: () => setFocus(false),
-    "data-testid": "clear-image"
-  }, /*#__PURE__*/React.createElement(IconTrashLine, null)));
-}
-
-export const ImageOptions = _ref4 => {
-  let {
-    state,
-    settings,
-    dispatch,
-    mountNode,
-    trayDispatch
-  } = _ref4;
-  const [isImageActionFocused, setIsImageActionFocused] = useState(false);
-  const imageActionRef = useCallback(el => {
-    if (el && isImageActionFocused) el.focus();
-  }, [isImageActionFocused]); // After submitting cropper modal a new embedded image should be generated
-
-  useEffect(() => {
-    var _settings$imageSettin;
-
-    if (state.cropperSettings && settings.imageSettings && !_.isEqual(state.cropperSettings, (_settings$imageSettin = settings.imageSettings) === null || _settings$imageSettin === void 0 ? void 0 : _settings$imageSettin.cropperSettings)) {
-      if (state.cropperSettings.shape !== settings.shape) {
-        trayDispatch({
-          shape: state.cropperSettings.shape
-        });
-      }
-
-      createCroppedImageSvg(state.cropperSettings, settings.imageSettings.image).then(generatedSvg => convertFileToBase64(new Blob([generatedSvg.outerHTML], {
-        type: 'image/svg+xml'
-      }))).then(base64Image => {
-        trayDispatch({
-          type: trayActions.SET_EMBED_IMAGE,
-          payload: base64Image
-        });
-      }) // eslint-disable-next-line no-console
-      .catch(error => console.error(error));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [state.cropperSettings]);
-  const {
-    image
-  } = state;
-  const {
-    shape,
-    embedImage
-  } = settings;
-  return /*#__PURE__*/React.createElement(Flex, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 small 0 0"
-  }, renderImagePreview(state, embedImage)), /*#__PURE__*/React.createElement(Flex.Item, null, renderImageName(state)), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 0 0 auto"
-  }, image ? renderImageActionButtons(state, dispatch, trayDispatch, setIsImageActionFocused, imageActionRef) : /*#__PURE__*/React.createElement(ModeSelect, {
-    dispatch: dispatch,
-    mountNode: mountNode,
-    ref: imageActionRef,
-    onFocus: () => setIsImageActionFocused(true),
-    onBlur: () => setIsImageActionFocused(false)
-  }), state.cropperOpen && /*#__PURE__*/React.createElement(ImageCropperModal, {
-    shape: shape,
-    open: state.cropperOpen,
-    onClose: () => dispatch({
-      type: actions.SET_CROPPER_OPEN.type,
-      payload: false
-    }),
-    onSubmit: cropperSettings => {
-      dispatch({
-        type: actions.SET_CROPPER_SETTINGS.type,
-        payload: cropperSettings
-      });
-    },
-    image: image,
-    cropSettings: state.cropperSettings,
-    message: state.compressed ? getCompressionMessage() : null,
-    loading: !image
-  })));
-};
-ImageOptions.propTypes = {
-  state: PropTypes.shape({
-    image: PropTypes.string,
-    imageName: PropTypes.string,
-    mode: PropTypes.string,
-    loading: PropTypes.bool.isRequired,
-    cropperOpen: PropTypes.bool.isRequired,
-    cropperSettings: ImageCropperSettingsPropTypes,
-    compressed: PropTypes.bool.isRequired
-  }).isRequired,
-  settings: PropTypes.shape({
-    shape: PropTypes.string,
-    embedImage: PropTypes.string,
-    imageSettings: ImageSettingsPropTypes
-  }).isRequired,
-  dispatch: PropTypes.func.isRequired,
-  trayDispatch: PropTypes.func.isRequired,
-  mountNode: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
-};