@instructure/canvas-rce 5.12.1 → 5.12.2

package/lib/rce/plugins/instructure_image/clickCallback.js

@@ -1,24 +0,0 @@
-/*
- * Copyright (C) 2018 - 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 doFileUpload from '../shared/Upload/doFileUpload';
-export default function (ed, document) {
-  return doFileUpload(ed, document, {
-    accept: 'image/*',
-    panels: ['COMPUTER', 'URL']
-  }).shownPromise;
-}

package/lib/rce/plugins/instructure_image/plugin.js

@@ -1,157 +0,0 @@
-// @ts-nocheck
-
-/*
- * Copyright (C) 2018 - 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 formatMessage from '../../../format-message';
-import bridge from '../../../bridge';
-import { isImageEmbed } from '../shared/ContentSelection';
-import { isOKToLink } from '../../contentInsertionUtils';
-import TrayController from './ImageOptionsTray/TrayController';
-import clickCallback from './clickCallback';
-import { ICON_MAKER_ATTRIBUTE } from '../instructure_icon_maker/svg/constants';
-import tinymce from 'tinymce';
-const COURSE_PLUGIN_KEY = 'course_images';
-const USER_PLUGIN_KEY = 'user_images';
-const GROUP_PLUGIN_KEY = 'group_images';
-const trayController = new TrayController();
-
-function getMenuItems(ed) {
-  var _ed$settings$canvas_r;
-
-  const contextType = (_ed$settings$canvas_r = ed.settings.canvas_rce_user_context) === null || _ed$settings$canvas_r === void 0 ? void 0 : _ed$settings$canvas_r.type;
-  const items = [{
-    text: formatMessage('Upload Image'),
-    value: 'instructure_upload_image'
-  }];
-
-  if (contextType === 'course') {
-    items.push({
-      text: formatMessage('Course Images'),
-      value: 'instructure_course_image'
-    });
-  } else if (contextType === 'group') {
-    items.push({
-      text: formatMessage('Group Images'),
-      value: 'instructure_group_image'
-    });
-  }
-
-  items.push({
-    text: formatMessage('User Images'),
-    value: 'instructure_user_image'
-  });
-  return items;
-}
-
-function doMenuItem(ed, value) {
-  switch (value) {
-    case 'instructure_upload_image':
-      ed.execCommand('mceInstructureImage');
-      break;
-
-    case 'instructure_course_image':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForImages', false, COURSE_PLUGIN_KEY);
-      break;
-
-    case 'instructure_group_image':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForImages', false, GROUP_PLUGIN_KEY);
-      break;
-
-    case 'instructure_user_image':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForImages', false, USER_PLUGIN_KEY);
-      break;
-  }
-}
-
-tinymce.PluginManager.add('instructure_image', function (editor) {
-  // Register commands
-  editor.addCommand('mceInstructureImage', () => clickCallback(editor, document));
-  editor.addCommand('instructureTrayForImages', (ui, plugin_key) => {
-    bridge.showTrayForPlugin(plugin_key, editor.id);
-  }); // Register menu items
-
-  editor.ui.registry.addNestedMenuItem('instructure_image', {
-    text: formatMessage('Image'),
-    icon: 'image',
-    getSubmenuItems: () => getMenuItems(editor).map(item => {
-      return {
-        type: 'menuitem',
-        text: item.text,
-        onAction: () => doMenuItem(editor, item.value),
-        onSetup: api => {
-          api.setDisabled(!isOKToLink(editor.selection.getContent()));
-          return () => {};
-        }
-      };
-    })
-  }); // Register toolbar button
-
-  editor.ui.registry.addMenuButton('instructure_image', {
-    tooltip: formatMessage('Images'),
-    icon: 'image',
-    fetch: callback => callback(getMenuItems(editor).map(item => ({
-      type: 'menuitem',
-      text: item.text,
-      value: item.value,
-      onAction: () => doMenuItem(editor, item.value)
-    }))),
-
-    onSetup(api) {
-      function handleNodeChange(_e) {
-        api.setDisabled(!isOKToLink(editor.selection.getContent()));
-      }
-
-      setTimeout(handleNodeChange);
-      editor.on('NodeChange', handleNodeChange);
-      return () => {
-        editor.off('NodeChange', handleNodeChange);
-      };
-    }
-
-  });
-  /*
-   * Register the Image "Options" button that will open the Image Options
-   * tray.
-   */
-
-  function canUpdateImageProps(node) {
-    return !node.classList.contains('equation_image') && isImageEmbed(node) && // don't show for icon maker
-    !node.getAttribute(ICON_MAKER_ATTRIBUTE);
-  }
-
-  const buttonAriaLabel = formatMessage('Show image options');
-  editor.ui.registry.addButton('instructure-image-options', {
-    onAction() {
-      // show the tray
-      trayController.showTrayForEditor(editor);
-    },
-
-    text: formatMessage('Image Options'),
-    tooltip: buttonAriaLabel
-  });
-  editor.ui.registry.addContextToolbar('instructure-image-toolbar', {
-    items: 'instructure-image-options',
-    position: 'node',
-    predicate: canUpdateImageProps,
-    scope: 'node'
-  });
-  editor.on('remove', ed => trayController.hideTrayForEditor(ed));
-});

package/lib/rce/plugins/instructure_links/clickCallback.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/>.
- */
-import LinkOptionsDialogController from './components/LinkOptionsDialog/LinkOptionsDialogController';
-const dialogController = new LinkOptionsDialogController();
-export default function (ed, op) {
-  dialogController.showDialogForEditor(ed, op);
-}

package/lib/rce/plugins/instructure_links/components/AccordionSection.js

@@ -1,60 +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 { bool, func, node, string } from 'prop-types';
-import formatMessage from '../../../../format-message';
-import { ToggleGroup } from '@instructure/ui-toggle-details';
-import { Text } from '@instructure/ui-text';
-import { View } from '@instructure/ui-view';
-export default function AccordionSection(_ref) {
-  let {
-    collection,
-    children,
-    onToggle,
-    expanded,
-    label
-  } = _ref;
-  const toggleLabel = expanded ? formatMessage('Collapse to hide {types}', {
-    types: label
-  }) : formatMessage('Expand to see {types}', {
-    types: label
-  });
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    borderWidth: "0 0 small 0",
-    "data-testid": "instructure_links-AccordionSection"
-  }, /*#__PURE__*/React.createElement(ToggleGroup, {
-    toggleLabel: toggleLabel,
-    summary: /*#__PURE__*/React.createElement(View, {
-      display: "inline-block",
-      padding: "0 0 0 small"
-    }, /*#__PURE__*/React.createElement(Text, {
-      weight: "bold"
-    }, label)),
-    expanded: expanded,
-    onToggle: (_e, expanded) => onToggle(expanded ? collection : ''),
-    border: false
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, children)));
-}
-AccordionSection.propTypes = {
-  collection: string.isRequired,
-  children: node.isRequired,
-  onToggle: func.isRequired,
-  expanded: bool.isRequired,
-  label: string.isRequired
-};

package/lib/rce/plugins/instructure_links/components/CollectionPanel.js

@@ -1,84 +0,0 @@
-/*
- * Copyright (C) 2018 - 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 { bool, func, string } from 'prop-types';
-import { collectionsShape, linkShape } from './propTypes';
-import AccordionSection from './AccordionSection';
-import LinkSet from './LinkSet';
-export default function CollectionPanel(props) {
-  const accordionProps = {
-    collection: props.collection,
-    onToggle: props.onChangeAccordion,
-    expanded: props.selectedAccordionIndex === props.collection,
-    label: props.label
-  };
-
-  function fetchInitialPage() {
-    if (props.fetchInitialPage) {
-      props.fetchInitialPage(props.collection, props.searchString);
-    }
-  }
-
-  function fetchNextPage() {
-    if (props.fetchNextPage) {
-      props.fetchNextPage(props.collection, props.searchString);
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "instructure_links-CollectionPanel"
-  }, /*#__PURE__*/React.createElement(AccordionSection, accordionProps, /*#__PURE__*/React.createElement(LinkSet, {
-    fetchInitialPage: fetchInitialPage,
-    fetchNextPage: fetchNextPage,
-    type: props.collection,
-    collection: props.collections[props.collection],
-    onLinkClick: props.onLinkClick,
-    suppressRenderEmpty: props.suppressRenderEmpty,
-    contextType: props.contextType,
-    contextId: props.contextId,
-    searchString: props.searchString,
-    editing: props.editing,
-    onEditClick: props.onEditClick,
-    selectedLink: props.selectedLink
-  })));
-}
-CollectionPanel.propTypes = {
-  contextId: string.isRequired,
-  contextType: string.isRequired,
-  searchString: string,
-  collections: collectionsShape.isRequired,
-  collection: string.isRequired,
-  label: string.isRequired,
-  renderNewPageLink: bool,
-  suppressRenderEmpty: bool,
-  fetchInitialPage: func,
-  fetchNextPage: func,
-  onLinkClick: func,
-  newPageLinkExpanded: bool,
-  toggleNewPageForm: func,
-  onChangeAccordion: func.isRequired,
-  selectedAccordionIndex: string,
-  editing: bool,
-  onEditClick: func,
-  selectedLink: linkShape
-};
-CollectionPanel.defaultProps = {
-  renderNewPageLink: false,
-  suppressRenderEmpty: false,
-  editing: false
-};

package/lib/rce/plugins/instructure_links/components/Link.js

@@ -1,213 +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 } from 'react';
-import { bool, func, oneOf, string } from 'prop-types';
-import { linkShape } from './propTypes';
-import formatMessage from '../../../../format-message';
-import { renderLink as renderLinkHtml } from '../../../contentRendering';
-import dragHtml from '../../../../sidebar/dragHtml';
-import { applyTimezoneOffsetToDate } from '../../shared/dateUtils';
-import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import { Text } from '@instructure/ui-text';
-import { Focusable } from '@instructure/ui-focusable';
-import { IconDragHandleLine, IconPublishSolid, IconUnpublishedSolid } from '@instructure/ui-icons';
-import RCEGlobals from '../../../RCEGlobals';
-import { getIcon } from '../../shared/linkUtils';
-export default function Link(props) {
-  const internalLink = { ...props.link
-  };
-  const [isHovering, setIsHovering] = useState(false);
-  const {
-    title,
-    published,
-    date,
-    date_type
-  } = props.link;
-  const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
-  internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
-
-  const publishable = !['navigation', 'announcements'].includes(type);
-  internalLink['data-published'] = publishable ? published : null;
-  const Icon = getIcon(type);
-  const color = published ? 'success' : 'primary';
-  let dateString = null;
-
-  if (date) {
-    if (date === 'multiple') {
-      dateString = formatMessage('Due: Multiple Dates');
-    } else {
-      var _RCEGlobals$getConfig;
-
-      // Uses user locale and timezone
-      const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
-      const when = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
-
-      switch (date_type) {
-        case 'todo':
-          dateString = formatMessage('To Do: {when}', {
-            when
-          });
-          break;
-
-        case 'published':
-          dateString = formatMessage('Published: {when}', {
-            when
-          });
-          break;
-
-        case 'posted':
-          dateString = formatMessage('Posted: {when}', {
-            when
-          });
-          break;
-
-        case 'delayed_post':
-          dateString = formatMessage('To Be Posted: {when}', {
-            when
-          });
-          break;
-
-        case 'due':
-        default:
-          dateString = formatMessage('Due: {when}', {
-            when
-          });
-          break;
-      }
-    }
-  }
-
-  const publishedMsg = props.link.published ? formatMessage('published') : formatMessage('unpublished');
-
-  function handleLinkClick(e) {
-    e.preventDefault();
-
-    if (props.editing) {
-      props.onEditClick({ ...internalLink,
-        type
-      });
-    } else {
-      props.onClick(internalLink);
-    }
-  }
-
-  function handleLinkKey(e) {
-    // press the button on enter or space
-    if (e.keyCode === 13 || e.keyCode === 32) {
-      handleLinkClick(e);
-    }
-  }
-
-  function handleDragStart(e) {
-    dragHtml(e, renderLinkHtml(internalLink, internalLink.title));
-  }
-
-  function handleDragEnd(_e) {
-    document.body.click(); // closes the tray
-  }
-
-  function handleHover(e) {
-    setIsHovering(e.type === 'mouseenter');
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "instructure_links-Link",
-    draggable: !props.editing,
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd,
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover,
-    style: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(Focusable, null, _ref => {
-    let {
-      focused
-    } = _ref;
-    return /*#__PURE__*/React.createElement(View, {
-      withFocusOutline: focused,
-      focusPosition: "inset",
-      position: "relative",
-      as: "div",
-      role: "button",
-      tabIndex: 0,
-      background: "primary",
-      display: "block",
-      width: "100%",
-      borderWidth: "0 0 small 0",
-      padding: "x-small",
-      "aria-describedby": props.describedByID,
-      onClick: handleLinkClick,
-      onKeyDown: handleLinkKey,
-      elementRef: props.elementRef
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        pointerEvents: 'none'
-      }
-    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
-      margin: "0 xx-small 0 0",
-      size: "1.125rem"
-    }, isHovering && !props.editing ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
-      size: "x-small",
-      inline: false
-    }) : null), /*#__PURE__*/React.createElement(Flex.Item, {
-      shouldGrow: true,
-      shouldShrink: true
-    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
-      padding: "0 x-small 0 0"
-    }, /*#__PURE__*/React.createElement(Text, {
-      color: color
-    }, /*#__PURE__*/React.createElement(Icon, {
-      size: "x-small",
-      inline: false,
-      "data-type": type
-    }))), /*#__PURE__*/React.createElement(Flex.Item, {
-      padding: "0 x-small 0 0",
-      shouldGrow: true,
-      shouldShrink: true,
-      textAlign: "start"
-    }, /*#__PURE__*/React.createElement(View, {
-      as: "div",
-      margin: "0"
-    }, title, props.isSelected && /*#__PURE__*/React.createElement(ScreenReaderContent, {
-      "data-testid": "selected-link-indicator"
-    }, formatMessage('Selected'))), dateString ? /*#__PURE__*/React.createElement(View, {
-      as: "div"
-    }, dateString) : null), 'published' in props.link && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(AccessibleContent, {
-      alt: publishedMsg
-    }, /*#__PURE__*/React.createElement(Text, {
-      color: color
-    }, published ? /*#__PURE__*/React.createElement(IconPublishSolid, {
-      inline: false
-    }) : /*#__PURE__*/React.createElement(IconUnpublishedSolid, {
-      inline: false
-    })))))))));
-  }));
-}
-Link.propTypes = {
-  link: linkShape.isRequired,
-  type: oneOf(['assignments', 'discussions', 'modules', 'quizzes', 'announcements', 'wikiPages', 'navigation']).isRequired,
-  onClick: func.isRequired,
-  describedByID: string.isRequired,
-  elementRef: func,
-  editing: bool,
-  onEditClick: func,
-  isSelected: bool
-};

package/lib/rce/plugins/instructure_links/components/LinkOptionsDialog/LinkOptionsDialogController.js

@@ -1,127 +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 { isOnlyTextSelected, getAnchorElement } from '../../../../contentInsertionUtils';
-import LinkOptionsDialog from './index';
-export const CONTAINER_ID = 'instructure-link-options-tray-container';
-export const CREATE_LINK = 'create';
-export const EDIT_LINK = 'edit';
-export default class LinkOptionsDialogController {
-  constructor() {
-    this._dismissDialog = () => {
-      this._shouldOpen = false;
-
-      this._renderDialog();
-    };
-
-    this._hasClosed = () => {
-      bridge.focusActiveEditor(false);
-      this._isOpen = false;
-
-      this._editor.focus(false);
-
-      this._editor = null;
-    };
-
-    this._editor = null;
-    this._isOpen = false;
-    this._shouldOpen = false;
-    this._renderId = 0;
-  }
-
-  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;
-  }
-
-  showDialogForEditor(editor, op) {
-    this._editor = editor;
-    this._shouldOpen = true;
-    this._op = op;
-
-    this._renderDialog();
-  }
-
-  hideDialog() {
-    this._dismissDialog();
-  }
-
-  _applyLinkOptions(linkOptions) {
-    this._dismissDialog();
-
-    bridge.insertLink(linkOptions);
-  }
-
-  _renderDialog() {
-    let html, onlyText, anchorElm, url, text;
-
-    if (this._shouldOpen) {
-      var _anchorElm;
-
-      html = this._editor.selection.getContent();
-      onlyText = isOnlyTextSelected(html);
-      text = onlyText && this._editor.selection.getContent({
-        format: 'text'
-      });
-      anchorElm = getAnchorElement(this._editor, this._editor.selection.getNode());
-      url = (_anchorElm = anchorElm) === null || _anchorElm === void 0 ? void 0 : _anchorElm.getAttribute('href');
-      /*
-       * When the dialog is being opened again, it should be rendered fresh
-       * (clearing the internal state) so that the currently-selected content
-       * can be used for initial options.
-       */
-
-      this._renderId++;
-    }
-
-    const element = /*#__PURE__*/React.createElement(LinkOptionsDialog, {
-      key: this._renderId,
-      size: "medium",
-      showText: onlyText,
-      text: text,
-      url: url,
-      operation: this._op,
-      onEntered: () => {
-        this._isOpen = true;
-      },
-      onExited: this._hasClosed,
-      onRequestClose: this._dismissDialog,
-      onSave: linkOptions => {
-        bridge.focusEditor(this._editor.rceWrapper);
-
-        this._applyLinkOptions(linkOptions);
-      },
-      open: this._shouldOpen
-    });
-    ReactDOM.render(element, this.$container);
-  }
-
-}