@instructure/canvas-rce 5.12.1 → 5.12.2

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

@@ -1,580 +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, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
-import { bool, element, func, instanceOf, oneOfType, shape, string } from 'prop-types';
-import { Tray } from '@instructure/ui-tray';
-import { CloseButton, Button } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { Spinner } from '@instructure/ui-spinner';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import ErrorBoundary from './ErrorBoundary';
-import Bridge from '../../../bridge/Bridge';
-import formatMessage from '../../../format-message';
-import Filter, { useFilterSettings } from './Filter';
-import { getTrayHeight } from './trayUtils';
-import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
-import { getLinkContentFromEditor } from './ContentSelection';
-import { LinkDisplay } from './LinkDisplay';
-import { showFlashAlert } from '../../../common/FlashAlert';
-/**
- * Returns the translated tray label
- * @param {string} contentType - The type of content showing on tray
- * @param {string} contentSubtype - The current subtype of content loaded in the tray
- * @param {string} contextType - The user's context
- * @returns {string}
- */
-
-function getTrayLabel(contentType, contentSubtype, contextType) {
-  if (contentType === 'links' && contextType === 'course') {
-    return formatMessage('Course Links');
-  } else if (contentType === 'links' && contextType === 'group') {
-    return formatMessage('Group Links');
-  }
-
-  switch (contentSubtype) {
-    case ICON_MAKER_ICONS:
-      return formatMessage('Icon Maker Icons');
-
-    case 'images':
-      if (contentType === 'course_files') return formatMessage('Course Images');
-      if (contentType === 'group_files') return formatMessage('Group Images');
-      return formatMessage('User Images');
-
-    case 'media':
-      if (contentType === 'course_files') return formatMessage('Course Media');
-      if (contentType === 'group_files') return formatMessage('Group Media');
-      return formatMessage('User Media');
-
-    case 'documents':
-      if (contentType === 'course_files') return formatMessage('Course Documents');
-      if (contentType === 'group_files') return formatMessage('Group Documents');
-      return formatMessage('User Documents');
-
-    default:
-      return formatMessage('Tray');
-    // Shouldn't ever get here
-  }
-}
-
-const thePanels = {
-  icon_maker_icons: /*#__PURE__*/React.lazy(() => import('../instructure_icon_maker/components/SavedIconMakerList')),
-  links: /*#__PURE__*/React.lazy(() => import('../instructure_links/components/LinksPanel')),
-  images: /*#__PURE__*/React.lazy(() => import('../instructure_image/Images')),
-  documents: /*#__PURE__*/React.lazy(() => import('../instructure_documents/components/DocumentsPanel')),
-  media: /*#__PURE__*/React.lazy(() => import('../instructure_record/MediaPanel')),
-  all: /*#__PURE__*/React.lazy(() => import('./RceFileBrowser')),
-  unknown: /*#__PURE__*/React.lazy(() => import('./UnknownFileTypePanel'))
-}; // Returns a Suspense wrapped lazy loaded component
-// pulled from useLazy's cache
-
-function DynamicPanel(props) {
-  let key = '';
-
-  if (props.contentType === 'links') {
-    key = 'links';
-  } else {
-    key = props.contentSubtype in thePanels ? props.contentSubtype : 'unknown';
-  }
-
-  const Component = thePanels[key];
-  return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement(Spinner, {
-      renderTitle: renderLoading,
-      size: "large"
-    })
-  }, /*#__PURE__*/React.createElement(Component, props));
-}
-
-function renderLoading() {
-  return formatMessage('Loading');
-}
-
-const FILTER_SETTINGS_BY_PLUGIN = {
-  user_documents: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_documents: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_documents: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  user_images: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_images: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_images: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  user_media: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_media: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_media: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_links: {
-    contextType: 'course',
-    contentType: 'links',
-    contentSubtype: 'all',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_link_edit: {
-    contextType: 'course',
-    contentType: 'links',
-    contentSubtype: 'edit',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_links: {
-    contextType: 'group',
-    contentType: 'links',
-    contentSubtype: 'all',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  list_icon_maker_icons: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: ICON_MAKER_ICONS,
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  all: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'all',
-    sortValue: 'alphabetical',
-    sortDir: 'asc',
-    searchString: ''
-  }
-};
-
-function isLoading(sprops) {
-  var _sprops$collections$a, _sprops$collections$a2, _sprops$collections$d, _sprops$collections$m, _sprops$collections$q, _sprops$collections$w, _sprops$documents$cou, _sprops$documents$use, _sprops$documents$gro, _sprops$media$course, _sprops$media$user, _sprops$media$group, _sprops$all_files;
-
-  return ((_sprops$collections$a = sprops.collections.announcements) === null || _sprops$collections$a === void 0 ? void 0 : _sprops$collections$a.isLoading) || ((_sprops$collections$a2 = sprops.collections.assignments) === null || _sprops$collections$a2 === void 0 ? void 0 : _sprops$collections$a2.isLoading) || ((_sprops$collections$d = sprops.collections.discussions) === null || _sprops$collections$d === void 0 ? void 0 : _sprops$collections$d.isLoading) || ((_sprops$collections$m = sprops.collections.modules) === null || _sprops$collections$m === void 0 ? void 0 : _sprops$collections$m.isLoading) || ((_sprops$collections$q = sprops.collections.quizzes) === null || _sprops$collections$q === void 0 ? void 0 : _sprops$collections$q.isLoading) || ((_sprops$collections$w = sprops.collections.wikiPages) === null || _sprops$collections$w === void 0 ? void 0 : _sprops$collections$w.isLoading) || ((_sprops$documents$cou = sprops.documents.course) === null || _sprops$documents$cou === void 0 ? void 0 : _sprops$documents$cou.isLoading) || ((_sprops$documents$use = sprops.documents.user) === null || _sprops$documents$use === void 0 ? void 0 : _sprops$documents$use.isLoading) || ((_sprops$documents$gro = sprops.documents.group) === null || _sprops$documents$gro === void 0 ? void 0 : _sprops$documents$gro.isLoading) || ((_sprops$media$course = sprops.media.course) === null || _sprops$media$course === void 0 ? void 0 : _sprops$media$course.isLoading) || ((_sprops$media$user = sprops.media.user) === null || _sprops$media$user === void 0 ? void 0 : _sprops$media$user.isLoading) || ((_sprops$media$group = sprops.media.group) === null || _sprops$media$group === void 0 ? void 0 : _sprops$media$group.isLoading) || ((_sprops$all_files = sprops.all_files) === null || _sprops$all_files === void 0 ? void 0 : _sprops$all_files.isLoading);
-}
-/**
- * This component is used within various plugins to handle loading in content
- * from Canvas.  It is essentially the main component.
- */
-
-
-export default function CanvasContentTray(props) {
-  // should the tray be rendered open?
-  const [isOpen, setIsOpen] = useState(false); // has the tray fully opened. we use this to defer rendering the content
-  // until the tray is open.
-
-  const [hasOpened, setHasOpened] = useState(false); // should we close the tray after the user clicks on something in it?
-
-  const [hidingTrayOnAction, setHidingTrayOnAction] = useState(true);
-  const trayRef = useRef(null);
-  const scrollingAreaRef = useRef(null);
-  const closeButtonRef = useRef(null);
-  const [filterSettings, setFilterSettings] = useFilterSettings();
-  const [isEditTray, setIsEditTray] = useState(false);
-  const [link, setLink] = useState(null);
-  const [linkText, setLinkText] = useState(null);
-  const [placeholderText, setPlaceholderText] = useState(null);
-  const {
-    bridge,
-    editor,
-    mountNode,
-    onTrayClosing,
-    storeProps
-  } = { ...props
-  };
-  const handleDismissTray = useCallback(() => {
-    // return focus to the RCE if focus was on this tray
-    if (trayRef.current && trayRef.current.contains(document.activeElement)) {
-      bridge.focusActiveEditor(false);
-    }
-
-    onTrayClosing && onTrayClosing(CanvasContentTray.globalOpenCount); // tell RCEWrapper we're closing if we're open
-
-    setIsOpen(false);
-  }, [bridge, onTrayClosing]);
-  useEffect(() => {
-    const controller = {
-      showTrayForPlugin(plugin) {
-        var _closeButtonRef$curre;
-
-        // increment a counter that's used as the key when rendering
-        // this gets us a new instance everytime, which is necessary
-        // to get the queries run so we have up to date data.
-        ++CanvasContentTray.globalOpenCount;
-        setFilterSettings(FILTER_SETTINGS_BY_PLUGIN[plugin]);
-        setIsOpen(true);
-
-        if (plugin === 'course_link_edit') {
-          setIsEditTray(true);
-          const {
-            fileName,
-            contentType,
-            url,
-            published,
-            text
-          } = getLinkContentFromEditor(editor.editor);
-          setLink({
-            title: fileName,
-            type: contentType,
-            href: url,
-            published
-          });
-          setLinkText(text);
-          setPlaceholderText(fileName);
-        } else {
-          setIsEditTray(false);
-        }
-
-        (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
-      },
-
-      hideTray(forceClose) {
-        if (forceClose || hidingTrayOnAction) {
-          handleDismissTray();
-        }
-      }
-
-    };
-    bridge.attachController(controller, editor.id);
-    return () => {
-      bridge.detachController(editor.id);
-    }; // it's OK the setFilterSettings is not a dependency
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor.id, bridge, handleDismissTray, hidingTrayOnAction]);
-  useEffect(() => {
-    if (hasOpened && scrollingAreaRef.current && !scrollingAreaRef.current.style.overscrollBehaviorY) {
-      scrollingAreaRef.current.style.overscrollBehaviorY = 'contain';
-    }
-  }, [hasOpened]);
-  useEffect(() => {
-    var _trayRef$current;
-
-    if (!hasOpened) return;
-    let c = document.querySelector('[role="main"]');
-    let target_w = 0;
-    if (!c) return;
-    const margin = window.getComputedStyle(c).direction === 'ltr' ? document.body.getBoundingClientRect().right - c.getBoundingClientRect().right : c.getBoundingClientRect().left;
-    target_w = c.offsetWidth - ((_trayRef$current = trayRef.current) === null || _trayRef$current === void 0 ? void 0 : _trayRef$current.offsetWidth) + margin;
-
-    if (target_w >= 320 && target_w < c.offsetWidth) {
-      c.style.boxSizing = 'border-box';
-      c.style.width = `${target_w}px`;
-    }
-
-    setHidingTrayOnAction(target_w < 320);
-    return () => {
-      c = document.querySelector('[role="main"]');
-      if (!c) return;
-      c.style.width = '';
-    };
-  }, [hasOpened]);
-
-  function handleOpenTray() {
-    bridge.focusEditor(editor);
-    setHasOpened(true);
-  }
-
-  function handleExitTray() {
-    onTrayClosing && onTrayClosing(true); // tell RCEWrapper we're closing
-  }
-
-  function handleCloseTray() {
-    // clear the store's saved search string so the tray doesn't
-    // reopen with a previous tray instance's search results
-    storeProps.onChangeSearchString('');
-    setHasOpened(false);
-    onTrayClosing && onTrayClosing(false); // tell RCEWrapper we're closed
-  }
-
-  function handleReplaceButton() {
-    handleDismissTray();
-    const newLink = { ...link,
-      forceRename: true,
-      text: linkText
-    };
-    bridge.insertLink(newLink);
-    showFlashAlert({
-      message: formatMessage('Updated link'),
-      type: 'success',
-      srOnly: true
-    });
-  }
-
-  function renderFooter() {
-    return /*#__PURE__*/React.createElement(Flex.Item, {
-      background: "secondary",
-      borderWidth: "small none none none",
-      padding: "small medium",
-      textAlign: "end"
-    }, /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "cancel-replace-button",
-      onClick: handleDismissTray
-    }, formatMessage('Cancel')), /*#__PURE__*/React.createElement(Button, {
-      margin: "0 0 0 x-small",
-      color: "primary",
-      onClick: handleReplaceButton,
-      "data-testid": "replace-link-button"
-    }, formatMessage('Replace')));
-  }
-
-  function handleFilterChange(newFilter, onChangeContext, onChangeSearchString, onChangeSortBy) {
-    const newFilterSettings = { ...newFilter
-    };
-
-    if (newFilterSettings.sortValue) {
-      newFilterSettings.sortDir = newFilterSettings.sortValue === 'alphabetical' ? 'asc' : 'desc';
-      onChangeSortBy({
-        sort: newFilterSettings.sortValue,
-        dir: newFilterSettings.sortDir
-      });
-    }
-
-    if ('searchString' in newFilterSettings && filterSettings.searchString !== newFilterSettings.searchString) {
-      onChangeSearchString(newFilterSettings.searchString);
-    }
-
-    setFilterSettings(newFilterSettings);
-
-    if (newFilterSettings.contentType) {
-      let contextType, contextId;
-
-      switch (newFilterSettings.contentType) {
-        case 'user_files':
-          contextType = 'user';
-          contextId = props.containingContext.userId;
-          break;
-
-        case 'group_files':
-          contextType = 'group';
-          contextId = props.containingContext.contextId;
-          break;
-
-        case 'course_files':
-          contextType = props.contextType;
-          contextId = props.containingContext.contextId;
-          break;
-
-        case 'links':
-          contextType = props.containingContext.contextType;
-          contextId = props.containingContext.contextId;
-      }
-
-      onChangeContext({
-        contextType,
-        contextId
-      });
-    }
-  }
-
-  function getHeader() {
-    return isEditTray ? formatMessage('Edit Course Link') : formatMessage('Add');
-  }
-
-  return /*#__PURE__*/React.createElement(Tray, {
-    "data-mce-component": true,
-    "data-testid": "CanvasContentTray",
-    label: getTrayLabel(filterSettings.contentType, filterSettings.contentSubtype, props.contextType),
-    mountNode: mountNode,
-    open: isOpen,
-    placement: "end",
-    size: "regular",
-    shouldContainFocus: true,
-    shouldReturnFocus: false,
-    shouldCloseOnDocumentClick: false,
-    onDismiss: handleDismissTray,
-    onClose: handleCloseTray,
-    onExit: handleExitTray,
-    onOpen: handleOpenTray,
-    contentRef: el => trayRef.current = el
-  }, isOpen && hasOpened ? /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    as: "div",
-    height: getTrayHeight(),
-    overflowY: "hidden",
-    tabIndex: -1,
-    "data-canvascontenttray-content": true
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "medium",
-    shadow: "above"
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "none none medium none"
-  }, /*#__PURE__*/React.createElement(Heading, {
-    level: "h2"
-  }, getHeader()), /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "end",
-    offset: "medium",
-    onClick: handleDismissTray,
-    "data-testid": "CloseButton_ContentTray",
-    screenReaderLabel: formatMessage('Close'),
-    elementRef: el => closeButtonRef.current = el
-  })), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
-    linkText: linkText,
-    placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
-    linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
-    published: (link === null || link === void 0 ? void 0 : link.published) || false,
-    handleTextChange: setLinkText,
-    linkType: link === null || link === void 0 ? void 0 : link.type
-  }), /*#__PURE__*/React.createElement(Filter, Object.assign({}, filterSettings, {
-    mountNode: props.mountNode,
-    userContextType: props.contextType,
-    containingContextType: props.containingContext.contextType,
-    onChange: newFilter => {
-      handleFilterChange(newFilter, storeProps.onChangeContext, storeProps.onChangeSearchString, storeProps.onChangeSortBy);
-    },
-    isContentLoading: isLoading(storeProps),
-    use_rce_icon_maker: props.use_rce_icon_maker
-  }))), /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    shouldShrink: true,
-    margin: "xx-small xxx-small 0",
-    elementRef: el => scrollingAreaRef.current = el
-  }, /*#__PURE__*/React.createElement(Flex, {
-    justifyItems: "space-between",
-    direction: "column",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(DynamicPanel, Object.assign({
-    contentType: filterSettings.contentType,
-    contentSubtype: filterSettings.contentSubtype,
-    sortBy: {
-      sort: filterSettings.sortValue,
-      order: filterSettings.sortDir
-    },
-    searchString: filterSettings.searchString,
-    canvasOrigin: props.canvasOrigin,
-    context: {
-      type: props.contextType,
-      id: props.contextId
-    },
-    editing: isEditTray,
-    onEditClick: setLink,
-    selectedLink: link
-  }, storeProps)))), isEditTray && renderFooter()))) : null);
-}
-CanvasContentTray.globalOpenCount = 0;
-
-function requiredWithoutSource(props, propName, componentName) {
-  if (props.source == null && props[propName] == null) {
-    throw new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`${props[propName]}\`.`);
-  }
-}
-
-const trayPropsMap = {
-  canUploadFiles: bool.isRequired,
-  contextId: string.isRequired,
-  // initial value indicating the user's context (e.g. student v teacher), not the tray's
-  contextType: string.isRequired,
-  // initial value indicating the user's context, not the tray's
-  containingContext: shape({
-    contextType: string.isRequired,
-    contextId: string.isRequired,
-    userId: string.isRequired
-  }),
-  filesTabDisabled: bool,
-  host: requiredWithoutSource,
-  jwt: requiredWithoutSource,
-  refreshToken: func,
-  source: shape({
-    fetchImages: func.isRequired
-  }),
-  themeUrl: string
-};
-export const trayPropTypes = shape(trayPropsMap);
-CanvasContentTray.propTypes = {
-  bridge: instanceOf(Bridge).isRequired,
-  editor: shape({
-    id: string
-  }).isRequired,
-  mountNode: oneOfType([element, func]),
-  onTrayClosing: func,
-  // called with true when the tray starts closing, false once closed
-  onEditClick: func,
-  ...trayPropsMap
-}; // the way we define trayProps, eslint doesn't recognize the following as props
-
-/* eslint-disable react/default-props-match-prop-types */
-
-CanvasContentTray.defaultProps = {
-  canUploadFiles: false,
-  filesTabDisabled: false,
-  refreshToken: null,
-  source: null,
-  themeUrl: null
-};
-/* eslint-enable react/default-props-match-prop-types */

package/lib/rce/plugins/shared/CheckerboardStyling.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/>.
- */
-const checkerboardStyle = squareSize => {
-  return {
-    backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200"/><rect y="200" width="200" height="200"/></svg>')`,
-    backgroundSize: `${squareSize}px ${squareSize}px`
-  };
-};
-
-export default checkerboardStyle;