@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/shared/ImageCropper/useKeyMouseEvents.js

@@ -1,233 +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 { useEffect, useState, useRef, useCallback } from 'react';
-import { debounce } from '@instructure/debounce';
-import { KEY_EVENT_DELAY, KEY_EVENT_ACCELERATION } from './constants';
-import { actions } from './reducers/imageCropper';
-const EVENT_EXCEPTION_ELEMENT_IDS = ['imageCropperHeader', 'imageCropperFooter', 'imageCropperControls'];
-const TOUCH_EVENTS = ['ontouchmove', 'ontouchend', 'ontouchcancel'];
-const MOUSE_EVENTS = ['onmousemove', 'onmouseup', 'onmouseout'];
-
-function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving, dispatch) {
-  // Refs that manage the keydown acceleration
-  const direction = useRef(0);
-  const initialTime = useRef(null);
-
-  const onKeyDown = event => {
-    // 37 = Left, 38 = Up, 39 = Right, 40 = Down
-    const {
-      keyCode
-    } = event;
-
-    if (![37, 38, 39, 40].includes(keyCode)) {
-      return;
-    }
-
-    event.preventDefault();
-    let elapsedTime;
-
-    if (keyCode !== direction.current) {
-      elapsedTime = 0;
-      initialTime.current = new Date();
-      direction.current = keyCode;
-      dispatch({
-        type: actions.UPDATE_SETTINGS,
-        payload: {
-          direction: keyCode
-        }
-      });
-    } else {
-      const currentTime = new Date();
-      elapsedTime = (currentTime - initialTime.current) / 1000;
-    }
-
-    const translationDiff = Math.floor(KEY_EVENT_ACCELERATION * elapsedTime ** 2) || 1;
-
-    if ([37, 39].includes(keyCode)) {
-      const sign = keyCode === 37 ? -1 : 1;
-      const newTranslateX = tempTranslateXRef.current + sign * translationDiff;
-      setTempTranslateX(newTranslateX);
-    }
-
-    if ([38, 40].includes(keyCode)) {
-      const sign = keyCode === 38 ? -1 : 1;
-      const newTranslateY = tempTranslateYRef.current + sign * translationDiff;
-      setTempTranslateY(newTranslateY);
-    }
-  };
-
-  const stopMovement = useCallback(debounce(() => {
-    direction.current = 0;
-    initialTime.current = null;
-    setIsMoving(false);
-  }, KEY_EVENT_DELAY, {
-    trailing: true
-  }), []);
-  useEffect(() => {
-    const onKeyDownWrapper = event => {
-      // If the active element is in the modal header, footer or controls.
-      if (EVENT_EXCEPTION_ELEMENT_IDS.some(id => {
-        var _document$getElementB;
-
-        return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(document.activeElement);
-      })) {
-        return;
-      }
-
-      onKeyDown(event);
-    }; // Adds the event listener when component did mount
-
-
-    document.addEventListener('keydown', onKeyDownWrapper);
-    return () => {
-      // Removes the event listener when component will unmount
-      document.removeEventListener('keydown', onKeyDownWrapper);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    if (isMoving && direction.current !== 0) {
-      stopMovement();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [tempTranslateX, tempTranslateY]);
-}
-
-function useMouseAndTouchEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving) {
-  const initialPageX = useRef(0);
-  const initialPageY = useRef(0);
-  const isDragging = useRef(false);
-  const imgElement = useRef(null);
-
-  const onStopMove = isMouseEvent => () => {
-    isDragging.current = false;
-    initialPageX.current = 0;
-    initialPageY.current = 0;
-
-    if (imgElement.current) {
-      const [move, end, cancel] = isMouseEvent ? MOUSE_EVENTS : TOUCH_EVENTS;
-      imgElement.current[move] = null;
-      imgElement.current[end] = null;
-      imgElement.current[cancel] = null;
-      imgElement.current = null;
-    }
-
-    setIsMoving(false);
-  };
-
-  const onMove = isMouseEvent => e => {
-    if (!isDragging.current) {
-      return onStopMove();
-    }
-
-    const {
-      clientX,
-      clientY
-    } = isMouseEvent ? e : e.touches[0];
-    setTempTranslateX(tempTranslateX + clientX - initialPageX.current);
-    setTempTranslateY(tempTranslateY + clientY - initialPageY.current);
-  };
-
-  const onStartMove = (e, isMouseEvent) => {
-    isDragging.current = true;
-    const {
-      target
-    } = e;
-    const {
-      clientX,
-      clientY
-    } = isMouseEvent ? e : e.touches[0];
-    initialPageX.current = clientX;
-    initialPageY.current = clientY;
-    const [move, end, cancel] = isMouseEvent ? MOUSE_EVENTS : TOUCH_EVENTS;
-    target[move] = onMove(isMouseEvent);
-    target[end] = onStopMove(isMouseEvent); // Should stop the movement when touch/mouse leaves the preview
-
-    target[cancel] = onStopMove(isMouseEvent);
-    imgElement.current = target;
-    setIsMoving(true);
-  };
-
-  return [e => onStartMove(e, true), e => onStartMove(e, false)];
-}
-
-export function useKeyMouseTouchEvents(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);
-
-  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, dispatch);
-  const [onMouseDown, onTouchStart] = useMouseAndTouchEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving); // Updates the reducer state when user stops moving.
-
-  useEffect(() => {
-    if (isMoving) {
-      return;
-    }
-
-    if (tempTranslateX !== translateX) {
-      dispatch({
-        type: actions.SET_TRANSLATE_X,
-        payload: tempTranslateX
-      });
-    }
-
-    if (tempTranslateY !== translateY) {
-      dispatch({
-        type: actions.SET_TRANSLATE_Y,
-        payload: tempTranslateY
-      });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isMoving]); // Updates the component state when props changed.
-
-  useEffect(() => {
-    if (isMoving) {
-      return;
-    }
-
-    if (translateX !== tempTranslateX) {
-      tempTranslateXRef.current = translateX;
-
-      _setTempTranslateX(translateX);
-    }
-
-    if (translateY !== tempTranslateY) {
-      tempTranslateYRef.current = translateY;
-
-      _setTempTranslateY(translateY);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [translateX, translateY]);
-  return [tempTranslateX, tempTranslateY, onMouseDown, onTouchStart];
-}

package/lib/rce/plugins/shared/ImageCropper/useMouseWheel.js

@@ -1,66 +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 { useEffect, useState } from 'react';
-import { debounce } from '@instructure/debounce';
-import { calculateScaleRatio } from './controls/utils';
-import { WHEEL_SCALE_STEP, WHEEL_EVENT_DELAY } from './constants';
-import { actions } from './reducers/imageCropper';
-export function useMouseWheel(scaleRatio, dispatch) {
-  const [tempScaleRatio, setTempScaleRatio] = useState(scaleRatio);
-  const [isScaling, setIsScaling] = useState(false);
-
-  const onWheelCallback = event => {
-    // Couldn't prevent modal body scroll when zoom, when using {passive:false}
-    // the zoom event listener makes zoom look like a bouncing effect.
-    // https://chromestatus.com/feature/6662647093133312
-    // event.preventDefault()
-    const newScaleRatio = calculateScaleRatio(tempScaleRatio - event.deltaY * WHEEL_SCALE_STEP);
-
-    if (newScaleRatio !== tempScaleRatio) {
-      setIsScaling(true);
-      setTempScaleRatio(newScaleRatio);
-    }
-  };
-
-  const setScalingRatio = () => {
-    setIsScaling(false);
-  };
-
-  useEffect(() => {
-    if (!isScaling) {
-      setTempScaleRatio(scaleRatio);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [scaleRatio]);
-  useEffect(() => {
-    if (isScaling) {
-      debounce(setScalingRatio, WHEEL_EVENT_DELAY)();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [tempScaleRatio]);
-  useEffect(() => {
-    if (!isScaling) {
-      dispatch({
-        type: actions.SET_SCALE_RATIO,
-        payload: tempScaleRatio
-      });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isScaling]);
-  return [tempScaleRatio, onWheelCallback];
-}

package/lib/rce/plugins/shared/ImageOptionsForm.js

@@ -1,140 +0,0 @@
-/*
- * Copyright (C) 2020 - 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 { IconButton } from '@instructure/ui-buttons';
-import { SimpleSelect } from '@instructure/ui-simple-select';
-import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
-import { TextArea } from '@instructure/ui-text-area';
-import { Checkbox } from '@instructure/ui-checkbox';
-import { IconQuestionLine } from '@instructure/ui-icons';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import { Tooltip } from '@instructure/ui-tooltip';
-import { CUSTOM, MIN_HEIGHT, MIN_WIDTH, MIN_PERCENTAGE, imageSizes, labelForImageSize } from '../instructure_image/ImageEmbedOptions';
-import formatMessage from '../../../format-message';
-import DimensionsInput from './DimensionsInput';
-
-const ImageOptionsForm = _ref => {
-  let {
-    imageSize,
-    displayAs,
-    isDecorativeImage,
-    altText,
-    isLinked,
-    dimensionsState,
-    handleAltTextChange,
-    handleIsDecorativeChange,
-    handleDisplayAsChange,
-    handleImageSizeChange,
-    messagesForSize,
-    hideDimensions,
-    id = 'image-options-form',
-    isIconMaker = false
-  } = _ref;
-  const TYPE = isIconMaker ? formatMessage('icon') : formatMessage('image');
-  const tooltipText = formatMessage('Used by screen readers to describe the content of an {TYPE}', {
-    TYPE
-  });
-  const textAreaLabel = /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Flex.Item, 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"
-    }, tooltipText)
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    renderIcon: IconQuestionLine,
-    size: "small",
-    withBackground: false,
-    withBorder: false,
-    screenReaderLabel: tooltipText
-  }))));
-  const TYPE_UPPER = isIconMaker ? formatMessage('Icon') : formatMessage('Image');
-  return /*#__PURE__*/React.createElement(Flex, {
-    id: id,
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(TextArea, {
-    disabled: isDecorativeImage,
-    "aria-describedby": "alt-text-label-tooltip",
-    height: "4rem",
-    label: textAreaLabel,
-    onChange: handleAltTextChange,
-    placeholder: formatMessage('(Describe the {TYPE})', {
-      TYPE
-    }),
-    resize: "vertical",
-    value: altText
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: isDecorativeImage,
-    disabled: displayAs === 'link',
-    label: formatMessage('Decorative {TYPE_UPPER}', {
-      TYPE_UPPER
-    }),
-    onChange: handleIsDecorativeChange
-  })), !isIconMaker && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(RadioInputGroup, {
-    description: formatMessage('Display Options'),
-    disabled: isLinked,
-    name: "display-image-as",
-    onChange: handleDisplayAsChange,
-    value: displayAs
-  }, /*#__PURE__*/React.createElement(RadioInput, {
-    label: formatMessage('Embed Image'),
-    value: "embed"
-  }), /*#__PURE__*/React.createElement(RadioInput, {
-    disabled: isDecorativeImage,
-    label: formatMessage('Display Text Link (Opens in a new tab)'),
-    value: "link"
-  }))), !hideDimensions && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    id: `${id}-size`,
-    disabled: displayAs !== 'embed',
-    renderLabel: formatMessage('Size'),
-    messages: messagesForSize,
-    mountNode: () => document.getElementById(id),
-    assistiveText: formatMessage('Use arrow keys to navigate options.'),
-    onChange: handleImageSizeChange,
-    value: imageSize
-  }, imageSizes.map(size => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: `${id}-size-${size}`,
-    key: size,
-    value: size
-  }, labelForImageSize(size))))), imageSize === CUSTOM && /*#__PURE__*/React.createElement(View, {
-    as: "div"
-  }, /*#__PURE__*/React.createElement(DimensionsInput, {
-    dimensionsState: dimensionsState,
-    disabled: displayAs !== 'embed',
-    minHeight: MIN_HEIGHT,
-    minWidth: MIN_WIDTH,
-    minPercentage: MIN_PERCENTAGE
-  })))));
-};
-
-export default ImageOptionsForm;

package/lib/rce/plugins/shared/LinkDisplay.js

@@ -1,96 +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, { useEffect } from 'react';
-import { View } from '@instructure/ui-view';
-import { Text } from '@instructure/ui-text';
-import { Flex } from '@instructure/ui-flex';
-import { TextInput } from '@instructure/ui-text-input';
-import formatMessage from '../../../format-message';
-import { showFlashAlert } from '../../../common/FlashAlert';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { getIcon, getFriendlyLinkType } from './linkUtils';
-
-const getEditMessage = () => formatMessage('If left empty, link text will display as course link name');
-
-export const LinkDisplay = _ref => {
-  let {
-    linkText,
-    placeholderText,
-    linkFileName,
-    published,
-    handleTextChange,
-    linkType
-  } = _ref;
-  useEffect(() => {
-    showFlashAlert({
-      message: formatMessage('Selected {linkFileName}', {
-        linkFileName
-      }),
-      type: 'info',
-      srOnly: true
-    });
-  }, [linkFileName]);
-  const Icon = getIcon(linkType);
-  const linkTypeMessage = getFriendlyLinkType(linkType);
-  const publishedMessage = published ? formatMessage('published') : formatMessage('unpublished');
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    "data-testid": "LinkDisplay"
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div"
-  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(TextInput, {
-    "data-testid": "link-text-input",
-    renderLabel: () => formatMessage('Text (optional)'),
-    onChange: (_e, value) => handleTextChange(value),
-    value: linkText,
-    placeholder: placeholderText,
-    messages: [{
-      type: 'hint',
-      text: getEditMessage()
-    }]
-  })))), /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "medium none medium none"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    margin: "small none small none"
-  }, /*#__PURE__*/React.createElement(Text, {
-    weight: "bold"
-  }, formatMessage('Current Link'))), /*#__PURE__*/React.createElement(Flex, {
-    margin: "small none none none"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "0 x-small 0 small"
-  }, /*#__PURE__*/React.createElement(Text, {
-    "data-testid": "icon-wrapper",
-    color: published ? 'success' : 'primary'
-  }, /*#__PURE__*/React.createElement(Icon, {
-    size: "x-small"
-  }))), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "0 x-small 0 0",
-    shouldGrow: true,
-    shouldShrink: true,
-    textAlign: "start"
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div"
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-testid": "selected-link-name"
-  }, linkFileName), linkType && /*#__PURE__*/React.createElement(ScreenReaderContent, {
-    "data-testid": "screenreader_content"
-  }, formatMessage('link type: {linkTypeMessage}', {
-    linkTypeMessage
-  }), linkType !== 'navigation' && publishedMessage))))));
-};

package/lib/rce/plugins/shared/PreviewIcon.js

@@ -1,112 +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 PropTypes from 'prop-types';
-import { Spinner } from '@instructure/ui-spinner';
-import { Flex } from '@instructure/ui-flex';
-import formatMessage from '../../../format-message';
-import checkerboardStyle from './CheckerboardStyling';
-const SQUARE_SIZE = 4;
-
-const PreviewIcon = _ref => {
-  let {
-    color,
-    testId,
-    variant,
-    image,
-    loading,
-    checkered
-  } = _ref;
-  const variantSettings = PreviewIcon.variants[variant];
-
-  const background = () => {
-    if (loading) return {};
-
-    if (image) {
-      return {
-        backgroundImage: `url(${image})`,
-        backgroundSize: 'contain',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center'
-      };
-    }
-
-    return {
-      border: '1px solid #73818C',
-      borderRadius: '3px',
-      background: color || `
-        linear-gradient(
-          135deg,
-          rgba(255,255,255,1) ${variantSettings.gradientOne}, rgba(255,0,0,1) ${variantSettings.gradientOne},
-          rgba(255,0,0,1) ${variantSettings.gradientTwo}, rgba(255,255,255,1) ${variantSettings.gradientTwo}
-        )
-      `
-    };
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    id: "preview-background-wrapper",
-    style: checkered ? checkerboardStyle(SQUARE_SIZE) : {}
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-testid": testId,
-    style: {
-      display: 'block',
-      height: variantSettings.width,
-      width: variantSettings.width,
-      ...background()
-    }
-  }, loading && /*#__PURE__*/React.createElement(Flex, {
-    as: "div",
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    textAlign: "center"
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    renderTitle: formatMessage('Loading preview'),
-    size: "small"
-  })))));
-};
-
-PreviewIcon.variants = {
-  small: {
-    width: '25px',
-    gradientOne: '43%',
-    gradientTwo: '57%'
-  },
-  large: {
-    width: '50px',
-    gradientOne: '49%',
-    gradientTwo: '51%'
-  }
-};
-PreviewIcon.propTypes = {
-  color: PropTypes.string,
-  testId: PropTypes.string,
-  variant: PropTypes.string,
-  image: PropTypes.string,
-  loading: PropTypes.bool,
-  checkered: PropTypes.bool
-};
-PreviewIcon.defaultProps = {
-  variant: 'small',
-  color: null,
-  testId: null,
-  image: '',
-  loading: false,
-  checkered: false
-};
-export default PreviewIcon;

package/lib/rce/plugins/shared/Previewable.js

@@ -1,22 +0,0 @@
-/*
- * Copyright (C) 2019 - 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/>.
- */
-// copied from canvas-lms/ui/shared/features/doc-previews/jquery/index.js
-export const previewableMimeTypes = ['application/vnd.openxmlformats-officedocument.wordprocessingml.template', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.sun.xml.writer', 'application/excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/rtf', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.sun.xml.impress', 'application/vnd.sun.xml.calc', 'application/vnd.ms-excel', 'application/msword', 'application/mspowerpoint', 'application/rtf', 'application/vnd.oasis.opendocument.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow', 'text/plain', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/postscript', 'application/pdf', 'application/vnd.ms-powerpoint'];
-export function isPreviewable(type) {
-  return previewableMimeTypes.includes(type);
-}