@instructure/canvas-rce 5.12.1 → 5.12.2

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

@@ -1,149 +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 from 'react';
-import PropTypes from 'prop-types';
-import formatMessage from '../../../../../../format-message';
-import { actions } from '../../../reducers/imageSection';
-import { actions as svgActions } from '../../../reducers/svgSettings';
-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,
-    payload: ''
-  });
-  onChange({
-    type: svgActions.SET_EMBED_IMAGE,
-    payload: ''
-  });
-  dispatch({ ...actions.SET_CROPPER_OPEN,
-    payload: true
-  });
-  dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
-    payload: false
-  });
-  return compressImage({
-    encodedImage: theFile.preview,
-    previewWidth: PREVIEW_WIDTH,
-    previewHeight: PREVIEW_HEIGHT
-  }).then(blob => {
-    dispatch({ ...actions.SET_COMPRESSION_STATUS,
-      payload: true
-    });
-    dispatch({ ...actions.SET_IMAGE,
-      payload: blob
-    });
-    onChange({
-      type: svgActions.SET_EMBED_IMAGE,
-      payload: blob
-    });
-    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,
-      payload: theFile.preview
-    });
-    onChange({
-      type: svgActions.SET_EMBED_IMAGE,
-      payload: theFile.preview
-    });
-    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,
-      payload: false
-    });
-    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
-      })
-    });
-  }
-
-  if (canCompressImage() && shouldCompressImage(theFile)) {
-    return dispatchCompressedImage(theFile, dispatch, onChange);
-  }
-
-  dispatch({ ...actions.SET_IMAGE,
-    payload: theFile.preview
-  });
-  onChange({
-    type: svgActions.SET_EMBED_IMAGE,
-    payload: theFile.preview
-  });
-  dispatch({ ...actions.SET_IMAGE_NAME,
-    payload: theFile.name
-  });
-  dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
-    payload: false
-  });
-  dispatch({ ...actions.SET_CROPPER_OPEN,
-    payload: true
-  });
-};
-
-const Upload = _ref => {
-  let {
-    editor,
-    dispatch,
-    mountNode,
-    onChange,
-    canvasOrigin
-  } = _ref;
-  return /*#__PURE__*/React.createElement(UploadFile, {
-    accept: "image/*",
-    editor: editor,
-    label: formatMessage('Upload Image'),
-    mountNode: mountNode,
-    panels: ['COMPUTER'],
-    onDismiss: () => {
-      dispatch(actions.CLEAR_MODE);
-    },
-    requireA11yAttributes: false,
-    onSubmit: onSubmit(dispatch, onChange),
-    canvasOrigin: canvasOrigin
-  });
-};
-
-Upload.propTypes = {
-  editor: PropTypes.object.isRequired,
-  dispatch: PropTypes.func,
-  onChange: PropTypes.func,
-  mountNode: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  canvasOrigin: PropTypes.string.isRequired
-};
-Upload.defaultProps = {
-  dispatch: () => {},
-  onChange: () => {}
-};
-export default Upload;

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

@@ -1,18 +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/>.
- */
-export { ImageSection } from './ImageSection';

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

@@ -1,32 +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 PropTypes from 'prop-types';
-import { ImageCropperSettingsPropTypes } from '../../../../shared/ImageCropper/propTypes';
-export const ImageSettingsPropTypes = PropTypes.shape({
-  mode: PropTypes.string,
-  image: PropTypes.string,
-  imageName: PropTypes.string,
-  icon: PropTypes.string,
-  iconFillColor: PropTypes.string,
-  collectionOpen: PropTypes.bool,
-  loading: PropTypes.bool,
-  error: PropTypes.string,
-  cropperOpen: PropTypes.bool,
-  cropperSettings: ImageCropperSettingsPropTypes,
-  compressed: PropTypes.bool
-});

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

@@ -1,25 +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/>.
- */
-export const MAX_GIF_PNG_SIZE_BYTES = 250 * 1024;
-export const isAnUnsupportedGifPngImage = _ref => {
-  let {
-    type,
-    size
-  } = _ref;
-  return ['image/gif', 'image/png'].includes(type) && size > MAX_GIF_PNG_SIZE_BYTES;
-};

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

@@ -1,60 +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, useRef } from 'react';
-import { View } from '@instructure/ui-view';
-import { buildSvg } from '../../svg';
-import checkerboardStyle from '../../../shared/CheckerboardStyling';
-import formatMessage from 'format-message';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-const SQUARE_SIZE = 8;
-export const Preview = _ref => {
-  let {
-    settings
-  } = _ref;
-  const wrapper = useRef(null);
-  useEffect(() => {
-    const svg = buildSvg(settings, {
-      isPreview: true
-    });
-    appendSvg(svg, wrapper.current);
-  }, [settings]);
-  const previewMessage = formatMessage('Icon Preview');
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div"
-  }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, previewMessage), /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": "true",
-    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/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ShapeSection.js

@@ -1,87 +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 from 'react';
-import { Flex } from '@instructure/ui-flex';
-import { SimpleSelect } from '@instructure/ui-simple-select';
-import formatMessage from '../../../../../format-message';
-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,
-    onChange
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Flex, {
-    id: SHAPE_SECTION_ID,
-    as: "section",
-    direction: "column",
-    justifyItems: "space-between",
-    padding: "small small 0"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    assistiveText: formatMessage('Use arrow keys to select a shape.'),
-    id: "icon-shape",
-    mountNode: getShapeSection,
-    onChange: (e, option) => onChange({
-      shape: option.value
-    }),
-    renderLabel: formatMessage('Icon Shape'),
-    value: settings.shape
-  }, Object.values(Shape).map(shape => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: `shape-${shape}`,
-    key: `shape-${shape}`,
-    value: shape
-  }, SHAPE_DESCRIPTION[shape] || '')))), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    assistiveText: formatMessage('Use arrow keys to select a size.'),
-    id: "icon-size",
-    mountNode: getShapeSection,
-    onChange: (e, option) => onChange({
-      size: option.value
-    }),
-    renderLabel: formatMessage('Icon Size'),
-    value: settings.size
-  }, SIZES.map(size => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: `size-${size}`,
-    key: `size-${size}`,
-    value: size
-  }, SIZE_DESCRIPTION[size] || '')))));
-};
-const SHAPE_DESCRIPTION = {
-  [Shape.Square]: formatMessage('Square'),
-  [Shape.Circle]: formatMessage('Circle'),
-  [Shape.Triangle]: formatMessage('Triangle'),
-  [Shape.Diamond]: formatMessage('Diamond'),
-  [Shape.Pentagon]: formatMessage('Pentagon'),
-  [Shape.Hexagon]: formatMessage('Hexagon'),
-  [Shape.Octagon]: formatMessage('Octagon'),
-  [Shape.Star]: formatMessage('Star')
-};
-const SIZE_DESCRIPTION = {
-  [Size.ExtraSmall]: formatMessage('Extra Small'),
-  [Size.Small]: formatMessage('Small'),
-  [Size.Medium]: formatMessage('Medium'),
-  [Size.Large]: formatMessage('Large')
-};

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

@@ -1,139 +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 from 'react';
-import { Flex } from '@instructure/ui-flex';
-import { TextInput } from '@instructure/ui-text-input';
-import { SimpleSelect } from '@instructure/ui-simple-select';
-import { ColorInput } from '../../../shared/ColorInput';
-import formatMessage from '../../../../../format-message';
-import { Group } from './Group';
-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
-      result = oldValue;
-    } else {
-      // When pasting text
-      result = result.substring(0, MAX_TOTAL_TEXT_CHARS);
-    }
-  }
-
-  return result;
-};
-
-export const TextSection = _ref => {
-  let {
-    settings,
-    onChange
-  } = _ref;
-  const [text, setText] = useDebouncedValue(settings.text || '', value => onChange({
-    text: value
-  }), value => processText(text, value));
-  return /*#__PURE__*/React.createElement(Group, {
-    as: "section",
-    defaultExpanded: true,
-    summary: formatMessage('Text')
-  }, /*#__PURE__*/React.createElement(Flex, {
-    as: "section",
-    justifyItems: "space-between",
-    direction: "column",
-    id: "icons-tray-text-section"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    id: "icon-text",
-    renderLabel: formatMessage('Text'),
-    onChange: setText,
-    value: text,
-    messages: [{
-      text: `${text.length}/${MAX_TOTAL_TEXT_CHARS}`,
-      type: 'hint'
-    }]
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    assistiveText: formatMessage('Use arrow keys to select a text size.'),
-    id: "icon-text-size",
-    mountNode: getTextSection,
-    onChange: (e, option) => onChange({
-      textSize: option.value
-    }),
-    renderLabel: formatMessage('Text Size'),
-    value: settings.textSize
-  }, TEXT_SIZES.map(size => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: `text-size-${size}`,
-    key: `text-size-${size}`,
-    value: size
-  }, TEXT_SIZE_DESCRIPTION[size] || '')))), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(ColorInput, {
-    color: settings.textColor,
-    label: formatMessage('Text Color'),
-    name: "icon-text-color",
-    onChange: textColor => onChange({
-      textColor
-    }),
-    popoverMountNode: getTextSection,
-    requireColor: true
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(ColorInput, {
-    color: settings.textBackgroundColor,
-    label: formatMessage('Text Background Color'),
-    name: "icon-text-background-color",
-    onChange: textBackgroundColor => onChange({
-      textBackgroundColor
-    }),
-    popoverMountNode: getTextSection
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    mountNode: getTextSection,
-    assistiveText: formatMessage('Use arrow keys to select a text position.'),
-    id: "icon-text-position",
-    onChange: (e, option) => onChange({
-      textPosition: option.value
-    }),
-    renderLabel: formatMessage('Text Position'),
-    value: settings.textPosition
-  }, TEXT_POSITIONS.map(position => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: `text-position-${position}`,
-    key: `text-position-${position}`,
-    value: position
-  }, TEXT_POSITION_DESCRIPTION[position] || ''))))));
-};
-const TEXT_SIZE_DESCRIPTION = {
-  small: formatMessage('Small'),
-  medium: formatMessage('Medium'),
-  large: formatMessage('Large'),
-  'x-large': formatMessage('Extra Large')
-};
-const TEXT_POSITION_DESCRIPTION = {
-  middle: formatMessage('Middle'),
-  'bottom-third': formatMessage('Bottom Third'),
-  below: formatMessage('Below')
-};

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

@@ -1,18 +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/>.
- */
-export { CreateIconMakerForm } from './CreateIconMakerForm';