@instructure/canvas-rce 5.12.1 → 5.12.2

package/lib/rce/plugins/instructure_image/ImageList/Image.js

@@ -1,106 +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/>.
- */
-import React from 'react';
-import { func, instanceOf, number, oneOfType, shape, string, bool } from 'prop-types';
-import { Img } from '@instructure/ui-img';
-import { Link } from '@instructure/ui-link';
-import { Text } from '@instructure/ui-text';
-import { TruncateText } from '@instructure/ui-truncate-text';
-import { View } from '@instructure/ui-view';
-import dragHtml from '../../../../sidebar/dragHtml';
-import formatMessage from '../../../../format-message';
-import { renderImage } from '../../../contentRendering';
-export default function Image(_ref) {
-  let {
-    focusRef,
-    image,
-    onClick,
-    isIconMaker,
-    canvasOrigin
-  } = _ref;
-  const imgTitle = formatMessage('Click to embed {imageName}', {
-    imageName: image.display_name
-  });
-
-  function handleDragStart(event) {
-    dragHtml(event, renderImage(image, canvasOrigin));
-  }
-
-  function handleDragEnd() {
-    document.body.click();
-  }
-
-  function handleImageClick(event) {
-    event.preventDefault();
-    onClick(image);
-  }
-
-  let elementRef = null;
-
-  if (focusRef) {
-    elementRef = ref => {
-      focusRef.current = ref;
-    };
-  }
-
-  return /*#__PURE__*/React.createElement(Link, {
-    draggable: false,
-    elementRef: elementRef,
-    onClick: handleImageClick,
-    onDragStart: handleDragStart
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    borderRadius: "medium",
-    margin: "none none small none",
-    overflowX: "hidden",
-    overflowY: "hidden"
-  }, /*#__PURE__*/React.createElement(Img, {
-    alt: image.display_name,
-    constrain: isIconMaker ? 'contain' : 'cover',
-    draggable: true,
-    height: "6rem",
-    display: "block",
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd,
-    src: image.thumbnail_url,
-    title: imgTitle,
-    width: "6rem"
-  })), /*#__PURE__*/React.createElement(TruncateText, null, /*#__PURE__*/React.createElement(Text, {
-    size: "small"
-  }, image.display_name)));
-}
-Image.propTypes = {
-  focusRef: shape({
-    current: instanceOf(Element)
-  }),
-  image: shape({
-    display_name: string.isRequired,
-    filename: string,
-    href: string.isRequired,
-    id: oneOfType([number, string]),
-    preview_url: string,
-    thumbnail_url: string.isRequired
-  }).isRequired,
-  onClick: func.isRequired,
-  isIconMaker: bool,
-  canvasOrigin: string.isRequired
-};
-Image.defaultProps = {
-  focusRef: null,
-  isIconMaker: false
-};

package/lib/rce/plugins/instructure_image/ImageList/index.js

@@ -1,69 +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/>.
- */
-import React from 'react';
-import { arrayOf, func, instanceOf, shape, bool, string } from 'prop-types';
-import { Flex } from '@instructure/ui-flex';
-import Image from './Image';
-export default function ImageList(_ref) {
-  let {
-    images,
-    lastItemRef,
-    onImageClick,
-    isIconMaker,
-    canvasOrigin
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Flex, {
-    justifyItems: "start",
-    height: "100%",
-    margin: "xx-small",
-    padding: "small",
-    wrap: "wrap"
-  }, images.map((image, index) => {
-    let focusRef = null;
-
-    if (index === images.length - 1) {
-      focusRef = lastItemRef;
-    }
-
-    return /*#__PURE__*/React.createElement(Flex.Item, {
-      as: "div",
-      key: 'image-' + image.id,
-      margin: "xx-small xx-small small xx-small",
-      size: "6rem"
-    }, /*#__PURE__*/React.createElement(Image, {
-      focusRef: focusRef,
-      image: image,
-      onClick: onImageClick,
-      isIconMaker: isIconMaker,
-      canvasOrigin: canvasOrigin
-    }));
-  }));
-}
-ImageList.propTypes = {
-  images: arrayOf(Image.propTypes.image),
-  lastItemRef: shape({
-    current: instanceOf(Element)
-  }).isRequired,
-  onImageClick: func.isRequired,
-  isIconMaker: bool,
-  canvasOrigin: string.isRequired
-};
-ImageList.defaultProps = {
-  images: [],
-  isIconMaker: false
-};

package/lib/rce/plugins/instructure_image/ImageOptionsTray/TrayController.js

@@ -1,166 +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/>.
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import bridge from '../../../../bridge';
-import { asImageEmbed } from '../../shared/ContentSelection';
-import { renderLink, updateImage } from '../../../contentRendering';
-import ImageOptionsTray from '.';
-export const CONTAINER_ID = 'instructure-image-options-tray-container';
-export default class TrayController {
-  constructor() {
-    this._editor = null;
-    this._isOpen = false;
-    this._shouldOpen = false;
-    this._renderId = 0;
-    this._isIconMaker = false;
-  }
-
-  get $container() {
-    let $container = document.getElementById(CONTAINER_ID);
-
-    if ($container == null) {
-      $container = document.createElement('div');
-      $container.id = CONTAINER_ID;
-      document.body.appendChild($container);
-    }
-
-    return $container;
-  }
-
-  get isOpen() {
-    return this._isOpen;
-  } // Tray may be called to edit an Icon Maker icon alt text
-
-
-  showTrayForEditor(editor) {
-    let isIconMaker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    this._editor = editor;
-    this.$img = editor.selection.getNode();
-    this._shouldOpen = true;
-    this._isIconMaker = isIconMaker;
-
-    if (bridge.focusedEditor) {
-      // Dismiss any content trays that may already be open
-      bridge.hideTrays();
-    }
-
-    this._renderTray();
-  }
-
-  hideTrayForEditor(editor) {
-    if (this._editor === editor) {
-      this._dismissTray();
-    }
-  }
-
-  _applyImageOptions(imageOptions) {
-    const editor = this._editor;
-    const {
-      $img
-    } = this;
-
-    if (this._isIconMaker) {
-      this._applyIconAltTextChanges($img, editor, imageOptions);
-
-      this._dismissTray();
-
-      editor.focus();
-      return;
-    }
-
-    if (imageOptions.displayAs === 'embed') {
-      updateImage(editor, $img, imageOptions); // tell tinymce so the context toolbar resets
-
-      editor.fire('ObjectResized', {
-        target: $img,
-        width: imageOptions.appliedWidth,
-        height: imageOptions.appliedHeight
-      });
-    } else {
-      const link = renderLink({
-        href: $img.src,
-        text: imageOptions.altText || $img.src,
-        target: '_blank'
-      });
-      editor.selection.setContent(link);
-    }
-
-    this._dismissTray();
-
-    editor.focus();
-  }
-
-  _applyIconAltTextChanges($img, editor, imageOptions) {
-    // Workaround: When passing empty string to editor.dom.setAttribs it removes the attribute
-    $img.setAttribute('alt', imageOptions.altText);
-    editor.dom.setAttribs($img, {
-      role: imageOptions.isDecorativeImage ? 'presentation' : null
-    }); // tell tinymce so the context toolbar resets
-
-    editor.fire('ObjectResized', {
-      target: $img,
-      width: imageOptions.appliedWidth,
-      height: imageOptions.appliedHeight
-    });
-  }
-
-  _dismissTray() {
-    this._shouldOpen = false;
-
-    this._renderTray();
-
-    this.$img = null;
-    this._editor = null;
-  }
-
-  _renderTray() {
-    var _this$_editor, _this$_editor$selecti;
-
-    if (this._shouldOpen) {
-      /*
-       * When the tray is being opened again, it should be rendered fresh
-       * (clearing the internal state) so that the currently-selected image can
-       * be used for initial image options.
-       */
-      this._renderId++;
-    }
-
-    const io = asImageEmbed(this.$img);
-    io.isLinked = ((_this$_editor = this._editor) === null || _this$_editor === void 0 ? void 0 : (_this$_editor$selecti = _this$_editor.selection) === null || _this$_editor$selecti === void 0 ? void 0 : _this$_editor$selecti.getSel().anchorNode.tagName) === 'A';
-    const element = /*#__PURE__*/React.createElement(ImageOptionsTray, {
-      key: this._renderId,
-      imageOptions: io,
-      onEntered: () => {
-        this._isOpen = true;
-      },
-      onExited: () => {
-        bridge.focusActiveEditor(false);
-        this._isOpen = false;
-      },
-      onSave: imageOptions => {
-        this._applyImageOptions(imageOptions);
-      },
-      onRequestClose: () => this._dismissTray(),
-      open: this._shouldOpen,
-      isIconMaker: this._isIconMaker
-    });
-    ReactDOM.render(element, this.$container);
-  }
-
-}

package/lib/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -1,246 +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/>.
- */
-import React, { useState, useEffect } from 'react';
-import { bool, func, number, shape, string } from 'prop-types';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { Flex } from '@instructure/ui-flex';
-import { Tray } from '@instructure/ui-tray';
-import { CUSTOM, MIN_HEIGHT, MIN_WIDTH, MIN_PERCENTAGE, scaleToSize } from '../ImageEmbedOptions';
-import formatMessage from '../../../../format-message';
-import { useDimensionsState } from '../../shared/DimensionsInput';
-import ImageOptionsForm from '../../shared/ImageOptionsForm';
-import { getTrayHeight, isExternalUrl } from '../../shared/trayUtils';
-import validateURL from '../../instructure_links/validateURL';
-import UrlPanel from '../../shared/Upload/UrlPanel';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
-export default function ImageOptionsTray(props) {
-  const {
-    imageOptions,
-    onEntered,
-    onExited,
-    onRequestClose,
-    onSave,
-    open,
-    isIconMaker
-  } = props;
-  const {
-    naturalHeight,
-    naturalWidth,
-    isLinked
-  } = imageOptions;
-  const currentHeight = imageOptions.appliedHeight || naturalHeight;
-  const currentWidth = imageOptions.appliedWidth || naturalWidth;
-  const [url, setUrl] = useState(imageOptions.url);
-  const [showUrlField, setShowUrlField] = useState(false);
-  const [altText, setAltText] = useState(imageOptions.altText);
-  const [isDecorativeImage, setIsDecorativeImage] = useState(imageOptions.isDecorativeImage);
-  const [displayAs, setDisplayAs] = useState('embed');
-  const [imageSize, setImageSize] = useState(imageOptions.imageSize);
-  const [imageHeight, setImageHeight] = useState(currentHeight);
-  const [imageWidth, setImageWidth] = useState(currentWidth);
-  const dimensionsState = useDimensionsState(imageOptions, {
-    minHeight: MIN_HEIGHT,
-    minWidth: MIN_WIDTH,
-    minPercentage: MIN_PERCENTAGE
-  });
-
-  function handleUrlChange(newUrl) {
-    setUrl(newUrl);
-  }
-
-  function handleAltTextChange(event) {
-    setAltText(event.target.value);
-  }
-
-  function handleIsDecorativeChange(event) {
-    setIsDecorativeImage(event.target.checked);
-  }
-
-  function handleDisplayAsChange(event) {
-    setDisplayAs(event.target.value);
-  }
-
-  function handleImageSizeChange(event, selectedOption) {
-    setImageSize(selectedOption.value);
-
-    if (selectedOption.value === CUSTOM) {
-      setImageHeight(currentHeight);
-      setImageWidth(currentWidth);
-    } else {
-      const {
-        height,
-        width
-      } = scaleToSize(selectedOption.value, naturalWidth, naturalHeight);
-      setImageHeight(height);
-      setImageWidth(width);
-    }
-  }
-
-  function handleSave(event) {
-    event.preventDefault();
-    const savedAltText = isDecorativeImage ? '' : altText;
-    let appliedHeight = imageHeight;
-    let appliedWidth = imageWidth;
-
-    if (imageSize === CUSTOM) {
-      if (dimensionsState.usePercentageUnits) {
-        appliedHeight = `${dimensionsState.percentage}%`;
-        appliedWidth = `${dimensionsState.percentage}%`;
-      } else {
-        appliedHeight = dimensionsState.height;
-        appliedWidth = dimensionsState.width;
-      }
-    }
-
-    onSave({
-      url,
-      altText: savedAltText,
-      appliedHeight,
-      appliedWidth,
-      displayAs,
-      isDecorativeImage
-    });
-  }
-
-  useEffect(() => {
-    if (isIconMaker) {
-      setShowUrlField(false);
-      return;
-    }
-
-    let isValidURL;
-
-    try {
-      isValidURL = validateURL(url);
-    } catch (error) {
-      isValidURL = false;
-    } finally {
-      setShowUrlField(isValidURL ? isExternalUrl(url) : true);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [url]);
-  const messagesForSize = [];
-
-  if (imageSize !== CUSTOM) {
-    messagesForSize.push({
-      text: formatMessage('{width} x {height}px', {
-        height: imageHeight,
-        width: imageWidth
-      }),
-      type: 'hint'
-    });
-  }
-
-  const disableForIcons = isIconMaker && !isDecorativeImage && altText === '';
-  const disableForImages = url === '' || displayAs === 'embed' && (!isDecorativeImage && altText === '' || imageSize === CUSTOM && !(dimensionsState !== null && dimensionsState !== void 0 && dimensionsState.isValid));
-  const saveDisabled = isIconMaker ? disableForIcons : disableForImages;
-  const trayLabel = isIconMaker ? formatMessage('Icon Options Tray') : formatMessage('Image Options Tray');
-  const trayHeading = isIconMaker ? formatMessage('Icon Options') : formatMessage('Image Options');
-  return /*#__PURE__*/React.createElement(Tray, {
-    "data-mce-component": true,
-    label: trayLabel,
-    mountNode: instuiPopupMountNode,
-    onDismiss: onRequestClose,
-    onEntered: onEntered,
-    onExited: onExited,
-    open: open,
-    placement: "end",
-    shouldCloseOnDocumentClick: true,
-    shouldContainFocus: true,
-    shouldReturnFocus: true
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    height: getTrayHeight()
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "header",
-    padding: "medium"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "row"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Heading, {
-    as: "h2"
-  }, trayHeading)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    color: "primary",
-    onClick: onRequestClose,
-    screenReaderLabel: formatMessage('Close')
-  })))), /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "form",
-    shouldGrow: true,
-    margin: "none",
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Flex, {
-    justifyItems: "space-between",
-    direction: "column",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column"
-  }, showUrlField && /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(UrlPanel, {
-    fileUrl: url,
-    setFileUrl: handleUrlChange
-  })), /*#__PURE__*/React.createElement(ImageOptionsForm, {
-    id: "image-options-form",
-    imageSize: imageSize,
-    displayAs: displayAs,
-    isDecorativeImage: isDecorativeImage,
-    altText: altText,
-    isLinked: isLinked,
-    dimensionsState: dimensionsState,
-    handleAltTextChange: handleAltTextChange,
-    handleIsDecorativeChange: handleIsDecorativeChange,
-    handleDisplayAsChange: handleDisplayAsChange,
-    handleImageSizeChange: handleImageSizeChange,
-    messagesForSize: messagesForSize,
-    isIconMaker: isIconMaker
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    background: "secondary",
-    borderWidth: "small none none none",
-    padding: "small medium",
-    textAlign: "end"
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: saveDisabled,
-    onClick: handleSave,
-    color: "primary"
-  }, formatMessage('Done')))))));
-}
-ImageOptionsTray.propTypes = {
-  imageOptions: shape({
-    altText: string.isRequired,
-    appliedHeight: number,
-    appliedWidth: number,
-    isDecorativeImage: bool.isRequired,
-    isLinked: bool,
-    naturalHeight: number.isRequired,
-    naturalWidth: number.isRequired
-  }).isRequired,
-  onEntered: func,
-  onExited: func,
-  onRequestClose: func.isRequired,
-  onSave: func.isRequired,
-  open: bool.isRequired,
-  isIconMaker: bool
-};
-ImageOptionsTray.defaultProps = {
-  onEntered: null,
-  onExited: null,
-  isIconMaker: false
-};

package/lib/rce/plugins/instructure_image/Images/index.js

@@ -1,122 +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/>.
- */
-import React, { useRef } from 'react';
-import { bool, func, oneOf, shape, string } from 'prop-types';
-import { contentTrayDocumentShape } from '../../shared/fileShape';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import { Text } from '@instructure/ui-text';
-import { LoadMoreButton, LoadingIndicator, LoadingStatus, useIncrementalLoading } from '../../../../common/incremental-loading';
-import ImageList from '../ImageList';
-import formatMessage from '../../../../format-message';
-
-function hasFiles(images) {
-  return images.files.length > 0;
-}
-
-function isEmpty(images) {
-  return !hasFiles(images) && !images.hasMore && !images.isLoading;
-}
-
-export default function Images(props) {
-  const {
-    fetchInitialImages,
-    fetchNextImages,
-    contextType,
-    sortBy,
-    searchString,
-    isIconMaker,
-    canvasOrigin
-  } = props;
-  const images = props.images[contextType];
-  const {
-    hasMore,
-    isLoading,
-    error,
-    files
-  } = images;
-  const lastItemRef = useRef(null);
-  const loader = useIncrementalLoading({
-    hasMore,
-    isLoading,
-    lastItemRef,
-    onLoadInitial: fetchInitialImages,
-    onLoadMore: fetchNextImages,
-    records: files,
-    contextType,
-    sortBy,
-    searchString
-  });
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    "data-testid": "instructure_links-ImagesPanel"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    direction: "column",
-    justifyItems: "space-between",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    overflowY: "visible",
-    width: "100%"
-  }, /*#__PURE__*/React.createElement(ImageList, {
-    images: files,
-    lastItemRef: lastItemRef,
-    onImageClick: props.onImageEmbed,
-    isIconMaker: isIconMaker,
-    canvasOrigin: canvasOrigin
-  })), loader.isLoading && /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "div",
-    shouldGrow: true
-  }, /*#__PURE__*/React.createElement(LoadingIndicator, {
-    loader: loader
-  })), !loader.isLoading && loader.hasMore && /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "div",
-    margin: "small"
-  }, /*#__PURE__*/React.createElement(LoadMoreButton, {
-    loader: loader
-  }))), /*#__PURE__*/React.createElement(LoadingStatus, {
-    loader: loader
-  }), error && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    role: "alert",
-    margin: "medium"
-  }, /*#__PURE__*/React.createElement(Text, {
-    color: "danger"
-  }, formatMessage('Loading failed.'))), isEmpty(images) && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    role: "alert",
-    padding: "medium"
-  }, formatMessage('No results.')));
-}
-Images.propTypes = {
-  fetchInitialImages: func.isRequired,
-  fetchNextImages: func.isRequired,
-  contextType: string.isRequired,
-  images: contentTrayDocumentShape.isRequired,
-  sortBy: shape({
-    sort: oneOf(['date_added', 'alphabetical']).isRequired,
-    order: oneOf(['asc', 'desc']).isRequired
-  }),
-  searchString: string,
-  onImageEmbed: func.isRequired,
-  isIconMaker: bool,
-  canvasOrigin: string.isRequired
-};
-Images.defaultProps = {
-  isIconMaker: false
-};