@instructure/canvas-rce 5.12.1 → 5.12.2

package/lib/rce/plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionDialog.js

@@ -1,153 +0,0 @@
-import _pt from "prop-types";
-// @ts-nocheck
-
-/*
- * 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 { Modal } from '@instructure/ui-modal';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { View } from '@instructure/ui-view';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { List } from '@instructure/ui-list';
-import { Flex } from '@instructure/ui-flex';
-import { TextInput } from '@instructure/ui-text-input';
-import { IconSearchLine } from '@instructure/ui-icons';
-import { Alert } from '@instructure/ui-alerts';
-import formatMessage from '../../../../../format-message';
-import ExternalToolSelectionItem from './ExternalToolSelectionItem';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
-
-// TODO: we really need a way for the client to pass this to the RCE
-const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
-/**
- * Returns a filtered list of items based on the term.
- *
- * This was copied from legacy code, and feels like it should be replaced by a string matching library.
- *
- * @param searchString search term
- * @param items objects to filter
- * @return matching items if a non-blank search term is provided, otherwise a copy of the original list
- */
-
-
-export function filterItemsByTitleSubstring(searchString, items) {
-  if (searchString == null || searchString.length === 0) {
-    return items;
-  }
-
-  const lowerTerm = searchString.toLocaleLowerCase();
-  return items.filter(item => item.title.toLocaleLowerCase().includes(lowerTerm));
-}
-export function ExternalToolSelectionDialog(props) {
-  const [filterTerm, setFilterTerm] = useState('');
-  const [filteredResults, setFilteredResults] = useState(props.ltiButtons);
-
-  const handleFilterChange = e => {
-    var _e$target;
-
-    setFilterTerm((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
-    setFilteredResults(filterItemsByTitleSubstring(e.target.value, props.ltiButtons));
-  };
-
-  const filterEmpty = filteredResults.length <= 0;
-  return /*#__PURE__*/React.createElement(Modal, {
-    "data-mce-component": true,
-    liveRegion: getLiveRegion,
-    size: "medium",
-    themeOverride: {
-      mediumMaxWidth: '42rem'
-    },
-    label: formatMessage('Apps'),
-    mountNode: instuiPopupMountNode,
-    onDismiss: props.onDismiss,
-    open: true,
-    shouldCloseOnDocumentClick: false
-  }, /*#__PURE__*/React.createElement(Modal.Header, {
-    themeOverride: {
-      padding: '0.5rem'
-    }
-  }, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "end",
-    offset: "medium",
-    onClick: props.onDismiss,
-    screenReaderLabel: formatMessage('Close')
-  }), /*#__PURE__*/React.createElement(Heading, {
-    margin: "small"
-  }, formatMessage('All Apps')), /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    padding: "x-small none x-small medium"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    type: "search",
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Search')),
-    placeholder: formatMessage('Search'),
-    renderAfterInput: /*#__PURE__*/React.createElement(IconSearchLine, {
-      inline: false
-    }),
-    onChange: handleFilterChange
-  }))), /*#__PURE__*/React.createElement(Modal.Body, {
-    overflow: "fit"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    as: "div",
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "div",
-    shouldShrink: true,
-    shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Alert, {
-    liveRegion: getLiveRegion,
-    variant: "info",
-    screenReaderOnly: !filterEmpty
-  }, filterEmpty && formatMessage('No results found for {filterTerm}', {
-    filterTerm
-  }), !filterEmpty && formatMessage(`Found { count, plural,
-              =0 {# results}
-              one {# result}
-              other {# results}
-            }`, {
-    count: filteredResults.length
-  })), renderTools(filteredResults)))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: props.onDismiss,
-    color: "primary"
-  }, formatMessage('Done'))));
-
-  function renderTools(ltiButtons) {
-    return /*#__PURE__*/React.createElement(List, {
-      isUnstyled: true
-    }, ltiButtons.sort((a, b) => a.title.localeCompare(b.title)).map(b => {
-      return /*#__PURE__*/React.createElement(List.Item, {
-        key: b.id
-      }, /*#__PURE__*/React.createElement(View, {
-        as: "div",
-        padding: "medium medium small none"
-      }, /*#__PURE__*/React.createElement(ExternalToolSelectionItem, {
-        title: b.title,
-        image: b.image,
-        onAction: () => {
-          props.onDismiss();
-          b.openDialog();
-        },
-        description: b.description
-      })));
-    }));
-  }
-}
-ExternalToolSelectionDialog.propTypes = {
-  ltiButtons: _pt.array.isRequired,
-  onDismiss: _pt.func.isRequired
-};

package/lib/rce/plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionItem.js

@@ -1,94 +0,0 @@
-import _pt from "prop-types";
-
-/*
- * 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 { Text } from '@instructure/ui-text';
-import { View } from '@instructure/ui-view';
-import ExpandoText from '../util/ExpandoText';
-import formatMessage from '../../../../../format-message';
-import { css, StyleSheet } from 'aphrodite';
-export default function ExternalToolSelectionItem(props) {
-  const [focused, setFocused] = useState(false);
-  const {
-    title,
-    image,
-    description,
-    onAction
-  } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    as: "span",
-    withFocusOutline: focused,
-    className: css(styles.appButton),
-    padding: "xxx-small xxx-small xx-small",
-    borderRadius: "medium",
-    role: "button",
-    position: "relative",
-    onClick: () => {
-      onAction();
-    },
-    onKeyDown: e => {
-      if (e.keyCode === 13 || e.keyCode === 32) {
-        onAction();
-      }
-    },
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement("span", null, image != null && /*#__PURE__*/React.createElement("img", {
-    src: image,
-    width: "28",
-    height: "28",
-    alt: ""
-  })), /*#__PURE__*/React.createElement(View, {
-    as: "span",
-    className: css(styles.appTitle),
-    margin: "none none none small"
-  }, /*#__PURE__*/React.createElement(Text, {
-    "aria-label": formatMessage('Open {title} application', {
-      title
-    }),
-    weight: "bold"
-  }, title))), renderDescription(description));
-
-  function renderDescription(desc) {
-    if (desc == null || desc === '') return null;
-    return /*#__PURE__*/React.createElement(View, {
-      as: "span",
-      margin: "none none none large",
-      display: "block"
-    }, /*#__PURE__*/React.createElement(ExpandoText, {
-      text: desc,
-      title: title
-    }));
-  }
-}
-ExternalToolSelectionItem.propTypes = {
-  title: _pt.string.isRequired,
-  image: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
-  onAction: _pt.func.isRequired,
-  description: _pt.oneOfType([_pt.string, _pt.oneOf([null])])
-};
-export const styles = StyleSheet.create({
-  appTitle: {
-    verticalAlign: 'middle'
-  },
-  appButton: {
-    cursor: 'pointer'
-  }
-});

package/lib/rce/plugins/instructure_rce_external_tools/components/util/ExpandoText.js

@@ -1,90 +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 { css, StyleSheet } from 'aphrodite';
-import { Text } from '@instructure/ui-text';
-import { View } from '@instructure/ui-view';
-import formatMessage from '../../../../../format-message';
-export default function ExpandoText(props) {
-  const [descExpanded, setDescExpanded] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const {
-    text,
-    title
-  } = props;
-  const label = descExpanded ? formatMessage('Hide {title} description', {
-    title
-  }) : formatMessage('View {title} description', {
-    title
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    as: "button",
-    background: "transparent",
-    display: "block",
-    borderWidth: "none",
-    textAlign: "start",
-    type: "button",
-    position: "relative",
-    padding: "none none none xx-small",
-    "aria-expanded": descExpanded,
-    borderRadius: "medium",
-    withFocusOutline: focused,
-    onClick: () => {
-      setDescExpanded(!descExpanded);
-    },
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false)
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "span",
-    "aria-live": "assertive",
-    "aria-relevant": "text"
-  }, /*#__PURE__*/React.createElement(Text, {
-    color: "brand",
-    size: "x-small",
-    "aria-label": label
-  }, descExpanded ? formatMessage('Hide description') : formatMessage('View description')))), descExpanded && /*#__PURE__*/React.createElement(View, {
-    as: "span",
-    margin: "small none none xx-small",
-    display: "block",
-    minWidth: "10rem",
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement(Text, {
-    as: "span",
-    color: "secondary"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles.descriptionText),
-    dangerouslySetInnerHTML: {
-      __html: text
-    }
-  }))));
-}
-export const styles = StyleSheet.create({
-  descriptionText: {
-    lineHeight: '1.2rem',
-    p: {
-      margin: '1rem 0'
-    },
-    ':nth-child(1n)> :first-child': {
-      marginTop: '0',
-      display: 'inline-block'
-    },
-    ':nth-child(1n)> :last-child': {
-      marginBottom: '0'
-    }
-  }
-});

package/lib/rce/plugins/instructure_rce_external_tools/components/util/ToolLaunchIframe.js

@@ -1,35 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React from 'react';
-import formatMessage from '../../../../../format-message';
-/**
- * Provide an iframe for launching an LTI tool directly from the frontend.
- * Works just like all existing usages of the LTI <iframe> element, including
- * extracting a ref of the <iframe> directly and setting things on it later.
- */
-
-const ToolLaunchIframe = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement("iframe", Object.assign({
-    title: formatMessage('External tool frame'),
-    ref: ref,
-    className: "tool_launch"
-  }, props, {
-    "data-lti-launch": "true"
-  }));
-});
-export default ToolLaunchIframe;

package/lib/rce/plugins/instructure_rce_external_tools/dialog-helper.js

@@ -1,29 +0,0 @@
-import ReactDOM from 'react-dom';
-import ExternalToolDialog from './components/ExternalToolDialog/ExternalToolDialog';
-import React, { createRef } from 'react';
-const ensureToolDialogContainerId = 'external-tool-dialog-container';
-export function ensureToolDialogContainerElem() {
-  let dialogContainer = document.getElementById(ensureToolDialogContainerId);
-
-  if (dialogContainer === null) {
-    dialogContainer = document.createElement('div');
-    dialogContainer.id = ensureToolDialogContainerId;
-    document.body.appendChild(dialogContainer);
-  }
-
-  return dialogContainer;
-}
-export function openToolDialogFor(toolHelper) {
-  const dialogRef = /*#__PURE__*/createRef();
-  const env = toolHelper.env;
-  ReactDOM.render( /*#__PURE__*/React.createElement(ExternalToolDialog, {
-    ref: dialogRef,
-    env: env,
-    iframeAllowances: env.ltiIframeAllowPolicy,
-    resourceSelectionUrlOverride: env.resourceSelectionUrlOverride
-  }), ensureToolDialogContainerElem(), () => {
-    var _dialogRef$current;
-
-    (_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 ? void 0 : _dialogRef$current.open(toolHelper);
-  });
-}

package/lib/rce/plugins/instructure_rce_external_tools/helpers/tags.js

@@ -1,55 +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/>.
- */
-
-/**
- * Performs interpolation on the given text, replacing `{{name}}` with `value`.
- *
- * @param text The text to interpolate
- * @param name The name of the tag to replace
- * @param value The value to replace the tag with
- */
-export function replaceOneTag(text, name, value) {
-  if (!text) {
-    return text;
-  }
-
-  const strName = name !== null && name !== void 0 ? name : '';
-  const strValue = (value !== null && value !== void 0 ? value : '').replace(/\s/g, '+');
-  const itemExpression = new RegExp(`(%7B|{){2}[\\s|%20|\+]*${strName}[\\s|%20|\+]*(%7D|}){2}`, 'g');
-  return text.replace(itemExpression, strValue);
-}
-/**
- * Performs interpolation on the given text, replacing one or more tags in the form `{{tag}}` with a value.
- *
- * Takes either a single tag name and value, or a record of tag name -> tag value
- *
- * @param text The text to interpolate
- * @param mappingOrName The mapping record or tag name
- * @param maybeValue The value to replace with, if a single tag name was provided
- */
-
-export function replaceTags(text, mappingOrName, maybeValue) {
-  if (typeof mappingOrName === 'object') {
-    Object.keys(mappingOrName).forEach(name => {
-      text = replaceOneTag(text, name, mappingOrName[name]);
-    });
-    return text;
-  } else {
-    return replaceOneTag(text, mappingOrName, maybeValue);
-  }
-}

package/lib/rce/plugins/instructure_rce_external_tools/jquery/jquery.dropdownList.js

@@ -1,172 +0,0 @@
-// @ts-nocheck
-
-/*
- * Copyright (C) 2011 - 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 $ from 'jquery';
-/**
- * TL;DR: Remove this file when possible.
- *
- * Please note that this file is considered very legacy.  All instances of it
- * should be evaluated and replaced with the newer and far better looking
- * KyleMenu.  The only other place that I've seen it in used is the file
- * attendance.js which is on the chopping block at some point in the future.
- * Once that file has been axed, then this file should be able to be removed.
- */
-
-// Simple dropdown list.  Takes the list of attributes specified in "options" and displays them
-// in a menu anchored to the selected element.
-$.fn.dropdownList = Object.assign(function (options) {
-  if (this.length) {
-    var _this$offset, _this$outerHeight, _$div$offset$left, _$div$offset, _$div$width, _$$width;
-
-    let $div = $('#instructure_dropdown_list');
-
-    if (options === 'hide' || options === 'remove' || $div.data('current_dropdown_initiator') === this[0]) {
-      $div.remove().data('current_dropdown_initiator', null);
-      return this;
-    }
-
-    options = $.extend({}, $.fn.dropdownList.defaults, options);
-    let $list = $div.children('div.list');
-
-    if (!$list.length) {
-      $div = $("<div id='instructure_dropdown_list'><div class='list ui-widget-content'></div></div>").appendTo('body');
-      $(document).mousedown(event => {
-        if ($div.data('current_dropdown_initiator') && !$(event.target).closest('#instructure_dropdown_list').length) {
-          $div.hide().data('current_dropdown_initiator', null);
-        }
-      }).mouseup(event => {
-        if ($div.data('current_dropdown_initiator') && !$(event.target).closest('#instructure_dropdown_list').length) {
-          $div.hide();
-          setTimeout(() => {
-            $div.data('current_dropdown_initiator', null);
-          }, 100);
-        }
-      }).add(this).add($div).keydown(event => {
-        if ($div.data('current_dropdown_initiator')) {
-          const $current = $div.find('.ui-state-hover,.ui-state-active');
-
-          if (event.keyCode === 38) {
-            // up
-            if ($current.length && $current.prev().length) {
-              $current.removeClass('ui-state-hover ui-state-active').addClass('minimal').prev().addClass('ui-state-hover').removeClass('minimal').find('span').focus();
-            } else {
-              var _$item;
-
-              ;
-              (_$item = window.$item) === null || _$item === void 0 ? void 0 : _$item.focus();
-            }
-
-            return false;
-          } else if (event.keyCode === 40) {
-            // down
-            if (!$current.length) {
-              $div.find('.option:first').addClass('ui-state-hover').removeClass('minimal').find('span').focus();
-            } else if ($current.next().length) {
-              $current.removeClass('ui-state-hover ui-state-active').addClass('minimal').next().addClass('ui-state-hover').removeClass('minimal').find('span').focus();
-            }
-
-            return false;
-          } else if (event.keyCode === 13 && $current.length) {
-            $current.click();
-            return false;
-          } else {
-            $div.hide().data('current_dropdown_initiator', null);
-          }
-        }
-      });
-      $div.find('.option').removeClass('ui-state-hover ui-state-active').addClass('minimal');
-      $div.click(_event => {
-        $div.hide().data('current_dropdown_initiator', null);
-      });
-      $list = $div.children('div.list');
-    }
-
-    $div.data('current_dropdown_initiator', this[0]);
-
-    if (options.width) {
-      $div.width(options.width);
-    }
-
-    if (options.height) {
-      $div.find('.list').css('maxHeight', options.height);
-    }
-
-    $list.empty();
-    $.each(options.options, (optionHtml, callback) => {
-      const $option = $("<div class='option minimal' style='cursor: pointer; padding: 2px 5px; overflow: hidden; white-space: nowrap;'>" + "  <span tabindex='-1'>" + optionHtml.toString() + '</span>' + '</div>').appendTo($list);
-
-      function unhoverOtherOptions() {
-        $option.parent().find('div.option').removeClass('ui-state-hover ui-state-active').addClass('minimal');
-      }
-
-      if ($.isFunction(callback)) {
-        $option.addClass('ui-state-default').bind({
-          mouseenter() {
-            unhoverOtherOptions();
-            $option.addClass('ui-state-hover').removeClass('minimal');
-          },
-
-          mouseleave: unhoverOtherOptions,
-
-          mousedown(event) {
-            event.preventDefault();
-            unhoverOtherOptions();
-            $option.addClass('ui-state-active').removeClass('minimal');
-          },
-
-          mouseup: unhoverOtherOptions,
-          click: callback
-        });
-      } else {
-        $option.addClass('ui-state-disabled').bind({
-          mousedown(event) {
-            event.preventDefault();
-          }
-
-        });
-      }
-    });
-    const offset = (_this$offset = this.offset()) !== null && _this$offset !== void 0 ? _this$offset : {
-      top: 0,
-      left: 0
-    };
-    const height = (_this$outerHeight = this.outerHeight()) !== null && _this$outerHeight !== void 0 ? _this$outerHeight : 0;
-    $div.css({
-      whiteSpace: 'nowrap',
-      position: 'absolute',
-      top: offset.top + height,
-      left: offset.left + 5,
-      right: ''
-    }).hide().show(); // this is a fix so that if the dropdown ends up being off the page then move it back in so that it is on the page.
-
-    if (((_$div$offset$left = (_$div$offset = $div.offset()) === null || _$div$offset === void 0 ? void 0 : _$div$offset.left) !== null && _$div$offset$left !== void 0 ? _$div$offset$left : 0) + ((_$div$width = $div.width()) !== null && _$div$width !== void 0 ? _$div$width : 0) > ((_$$width = $(window).width()) !== null && _$$width !== void 0 ? _$$width : 0)) {
-      $div.css({
-        left: '',
-        right: 0
-      });
-    }
-  }
-
-  return this;
-}, {
-  defaults: {
-    height: 250,
-    width: 'auto'
-  }
-});