@instructure/canvas-rce 5.11.1 → 5.12.2

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);
-  }
-
-}

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

@@ -1,141 +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, { useEffect, useState } from 'react';
-import { bool, func, oneOf, string } from 'prop-types';
-import { Alert } from '@instructure/ui-alerts';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { TextInput } from '@instructure/ui-text-input';
-import { Modal } from '@instructure/ui-modal';
-import { View } from '@instructure/ui-view';
-import formatMessage from '../../../../../format-message';
-import validateURL from '../../validateURL';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
-const CREATE_LINK = 'create';
-const EDIT_LINK = 'edit';
-export default function LinkOptionsDialog(props) {
-  const [text, setText] = useState(props.text || '');
-  const [url, setUrl] = useState(props.url || '');
-  const [err, setErr] = useState(null);
-  const [isValidURL, setIsValidURL] = useState(false);
-  useEffect(() => {
-    try {
-      const v = validateURL(url);
-      setIsValidURL(v);
-      setErr(null);
-    } catch (ex) {
-      setIsValidURL(false);
-      setErr(ex.message);
-    }
-  }, [url]);
-
-  function handleSave(event) {
-    event.preventDefault();
-    if (!url) return;
-    const linkText = text.trim() || url;
-    props.onSave({
-      text: linkText,
-      target: '_blank',
-      href: url,
-      userText: props.showText,
-      class: 'inline_disabled',
-      forceRename: true
-    });
-  }
-
-  function handleTextChange(event) {
-    setText(event.target.value);
-  }
-
-  function handleLinkChange(event) {
-    setUrl(event.target.value);
-  }
-
-  const label = props.operation === CREATE_LINK ? formatMessage('Insert Link') : formatMessage('Edit Link');
-  return /*#__PURE__*/React.createElement(Modal, {
-    "data-testid": "RCELinkOptionsDialog",
-    "data-mce-component": true,
-    as: "form",
-    label: label,
-    mountNode: instuiPopupMountNode,
-    onDismiss: props.onRequestClose,
-    onEntered: props.onEntered,
-    onExited: props.onExited,
-    onSubmit: handleSave,
-    open: props.open,
-    shouldCloseOnDocumentClick: false,
-    shouldReturnFocus: false,
-    size: "medium"
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
-    offset: "medium",
-    placement: "end",
-    screenReaderLabel: formatMessage('Close'),
-    onClick: props.onRequestClose
-  }), /*#__PURE__*/React.createElement(Heading, null, label)), /*#__PURE__*/React.createElement(Modal.Body, null, props.showText && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "small"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    renderLabel: formatMessage('Text'),
-    name: "linktext",
-    onChange: handleTextChange,
-    value: text
-  })), /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "small"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    renderLabel: formatMessage('Link'),
-    name: "linklink",
-    onChange: handleLinkChange,
-    value: url
-  })), err && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "small",
-    "data-testid": "url-error"
-  }, /*#__PURE__*/React.createElement(Alert, {
-    variant: "error"
-  }, err))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement("input", {
-    type: "submit",
-    style: {
-      display: 'none'
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    onClick: props.onRequestClose,
-    margin: "0 small",
-    color: "secondary"
-  }, formatMessage('Close')), /*#__PURE__*/React.createElement(Button, {
-    disabled: !(url && isValidURL),
-    onClick: handleSave,
-    color: "primary"
-  }, formatMessage('Done'))));
-}
-LinkOptionsDialog.propTypes = {
-  text: string,
-  url: string,
-  operation: oneOf([CREATE_LINK, EDIT_LINK]),
-  onEntered: func,
-  onExited: func,
-  onRequestClose: func.isRequired,
-  onSave: func.isRequired,
-  open: bool.isRequired,
-  showText: bool
-};
-LinkOptionsDialog.defaultProps = {
-  onEntered: null,
-  onExited: null,
-  showText: true
-};

package/lib/rce/plugins/instructure_links/components/LinkOptionsTray/LinkOptionsTrayController.js

@@ -1,125 +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 { getLinkContentFromEditor } from '../../../shared/ContentSelection';
-import { getAnchorElement } from '../../../../contentInsertionUtils';
-import LinkOptionsTray from '.';
-export const CONTAINER_ID = 'instructure-link-options-tray-container';
-export default class LinkOptionsTrayController {
-  constructor() {
-    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;
-  }
-
-  showTrayForEditor(editor) {
-    this._editor = editor;
-    this._shouldOpen = true;
-    const selectedElm = editor.selection.getNode();
-
-    if (editor.selection.isCollapsed() && selectedElm.nodeName === 'A') {
-      // expand the selection to include the whole <a>
-      editor.selection.select(editor.selection.getNode());
-    } else {
-      const anchorElm = getAnchorElement(editor, selectedElm);
-      editor.selection.select(anchorElm);
-    }
-
-    if (bridge.focusedEditor) {
-      // Dismiss any content trays that may already be open
-      bridge.hideTrays();
-    }
-
-    this._renderTray();
-  }
-
-  hideTrayForEditor(editor) {
-    if (this._editor === editor) {
-      this._dismissTray();
-    }
-  }
-
-  _applyLinkOptions(linkOptions) {
-    this._dismissTray();
-
-    bridge.insertLink({ ...linkOptions,
-      userText: true
-    });
-  }
-
-  _dismissTray() {
-    this._shouldOpen = false;
-
-    this._renderTray();
-
-    this._editor = null;
-  }
-
-  _renderTray() {
-    let content = {};
-
-    if (this._shouldOpen) {
-      content = getLinkContentFromEditor(this._editor);
-      /*
-       * When the tray 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(LinkOptionsTray, {
-      content: content,
-      key: this._renderId,
-      onEntered: () => {
-        this._isOpen = true;
-      },
-      onExited: () => {
-        bridge.focusActiveEditor(false);
-        this._isOpen = false;
-      },
-      onSave: linkOptions => {
-        this._applyLinkOptions(linkOptions);
-      },
-      onRequestClose: () => this._dismissTray(),
-      open: this._shouldOpen
-    });
-    ReactDOM.render(element, this.$container);
-  }
-
-}

package/lib/rce/plugins/instructure_links/components/LinkOptionsTray/index.js

@@ -1,245 +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, { useEffect, useState } from 'react';
-import { checkPropTypes, bool, func, object, oneOf, shape, string } from 'prop-types';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Alert } from '@instructure/ui-alerts';
-import { Heading } from '@instructure/ui-heading';
-import { FormFieldGroup } from '@instructure/ui-form-field';
-import { Checkbox } from '@instructure/ui-checkbox';
-import { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input';
-import { TextInput } from '@instructure/ui-text-input';
-import { Flex } from '@instructure/ui-flex';
-import { Tray } from '@instructure/ui-tray';
-import { View } from '@instructure/ui-view';
-import validateURL from '../../validateURL';
-import formatMessage from '../../../../../format-message';
-import { DISPLAY_AS_LINK, DISPLAY_AS_EMBED, DISPLAY_AS_EMBED_DISABLED, DISPLAY_AS_DOWNLOAD_LINK } from '../../../shared/ContentSelection';
-import { getTrayHeight } from '../../../shared/trayUtils';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
-export default function LinkOptionsTray(props) {
-  const content = props.content || {};
-  const textToLink = content.text || '';
-  const showText = content.onlyTextSelected;
-  const [text, setText] = useState(textToLink || '');
-  const [url, setUrl] = useState(content.url || '');
-  const [err, setErr] = useState(null);
-  const [isValidURL, setIsValidURL] = useState(false);
-  const [autoOpenPreview, setAutoOpenPreview] = useState(content.displayAs === DISPLAY_AS_EMBED);
-  const [disableInlinePreview, setDisableInlinePreview] = useState(content.displayAs === DISPLAY_AS_EMBED_DISABLED || content.displayAs === DISPLAY_AS_DOWNLOAD_LINK);
-  const [displayOptionSelection, setDisplayOptionSelection] = useState(initialPreviewSelection(content));
-  useEffect(() => {
-    try {
-      const v = validateURL(url);
-      setIsValidURL(v);
-      setErr(null);
-    } catch (ex) {
-      setIsValidURL(false);
-      setErr(ex.message);
-    }
-  }, [url]);
-
-  function handleSave(event) {
-    event.preventDefault();
-    const embedType = content.isPreviewable ? 'scribd' : null;
-    const linkAttrs = {
-      embed: embedType ? {
-        type: embedType,
-        autoOpenPreview: autoOpenPreview && !disableInlinePreview,
-        disableInlinePreview,
-        noPreview: displayOptionSelection === 'disable'
-      } : null,
-      text,
-      href: url,
-      id: content.id || null,
-      forceRename: true // A change to "text" should always update the link's text
-
-    };
-    props.onSave(linkAttrs);
-  }
-
-  function initialPreviewSelection(previewContent) {
-    if (previewContent.displayAs === DISPLAY_AS_DOWNLOAD_LINK) {
-      return 'disable';
-    } else if (previewContent.displayAs === DISPLAY_AS_EMBED || previewContent.displayAs === DISPLAY_AS_LINK) {
-      return 'inline';
-    } else {
-      return 'overlay';
-    }
-  }
-
-  function handleTextChange(event) {
-    setText(event.target.value);
-  }
-
-  function handleLinkChange(event) {
-    setUrl(event.target.value);
-  }
-
-  function handlePreviewChange(event) {
-    setAutoOpenPreview(event.target.checked);
-  }
-
-  function handlePreviewOptionChange(_event, value) {
-    setDisableInlinePreview(value === 'overlay' || value === 'disable');
-    setDisplayOptionSelection(value);
-  }
-
-  function renderDisplayOptions() {
-    return /*#__PURE__*/React.createElement(FormFieldGroup, {
-      description: formatMessage('Display Options'),
-      layout: "stacked",
-      rowSpacing: "small"
-    }, /*#__PURE__*/React.createElement(RadioInputGroup, {
-      description: " "
-      /* the FormFieldGroup is providing the label */
-      ,
-      name: "preview_option",
-      onChange: handlePreviewOptionChange,
-      value: displayOptionSelection
-    }, /*#__PURE__*/React.createElement(RadioInput, {
-      key: "disable",
-      value: "disable",
-      label: formatMessage('Disable Preview')
-    }), /*#__PURE__*/React.createElement(RadioInput, {
-      key: "overlay",
-      value: "overlay",
-      label: formatMessage('Preview in overlay')
-    }), /*#__PURE__*/React.createElement(RadioInput, {
-      key: "inline",
-      value: "inline",
-      label: formatMessage('Preview inline')
-    })), !disableInlinePreview && /*#__PURE__*/React.createElement(View, {
-      as: "div",
-      margin: "0 0 0 small"
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      label: formatMessage('Expand preview by Default'),
-      name: "auto-preview",
-      onChange: handlePreviewChange,
-      checked: autoOpenPreview
-    })));
-  }
-
-  return /*#__PURE__*/React.createElement(Tray, {
-    "data-testid": "RCELinkOptionsTray",
-    "data-mce-component": true,
-    label: formatMessage('Link Options'),
-    mountNode: instuiPopupMountNode,
-    onDismiss: props.onRequestClose,
-    onEntered: props.onEntered,
-    onExited: props.onExited,
-    open: props.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"
-  }, formatMessage('Link Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    color: "primary",
-    onClick: props.onRequestClose,
-    screenReaderLabel: formatMessage('Close')
-  })))), /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "form",
-    shouldGrow: true,
-    margin: "none",
-    shouldShrink: true,
-    onSubmit: handleSave
-  }, /*#__PURE__*/React.createElement(Flex, {
-    justifyItems: "space-between",
-    direction: "column",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    padding: "small",
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "submit",
-    style: {
-      display: 'none'
-    }
-  }), /*#__PURE__*/React.createElement(Flex, {
-    direction: "column"
-  }, showText && /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    renderLabel: () => formatMessage('Text'),
-    onChange: handleTextChange,
-    value: text
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    renderLabel: () => formatMessage('Link'),
-    onChange: handleLinkChange,
-    value: url
-  })), err && /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small",
-    "data-testid": "url-error"
-  }, /*#__PURE__*/React.createElement(Alert, {
-    variant: "error"
-  }, err)), content.isPreviewable && /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "small none none none",
-    padding: "small"
-  }, renderDisplayOptions()))), /*#__PURE__*/React.createElement(Flex.Item, {
-    background: "secondary",
-    borderWidth: "small none none none",
-    padding: "small medium",
-    textAlign: "end"
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: showText && text.trim().length === 0 || !(url && isValidURL),
-    onClick: handleSave,
-    color: "primary"
-  }, formatMessage('Done')))))));
-}
-LinkOptionsTray.propTypes = {
-  // content is required only if the tray is open
-  content: (props, _propName, _componentName) => {
-    if (props.open) {
-      checkPropTypes({
-        content: shape({
-          $element: object,
-          // the DOM's HTMLElement
-          dispalyAs: oneOf([DISPLAY_AS_LINK, DISPLAY_AS_EMBED]),
-          isPreviewable: bool,
-          text: string,
-          url: string
-        }).isRequired
-      }, props, 'content', 'LinkOptionsTray');
-    }
-  },
-  onEntered: func,
-  onExited: func,
-  onRequestClose: func.isRequired,
-  onSave: func.isRequired,
-  open: bool.isRequired
-};
-LinkOptionsTray.defaultProps = {
-  onEntered: null,
-  onExited: null
-};