@instructure/canvas-rce 5.11.1 → 5.12.2

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

@@ -1,233 +0,0 @@
-/*
- * Copyright (C) 2021 - 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 { View } from '@instructure/ui-view';
-import { Flex } from '@instructure/ui-flex';
-import { TextInput } from '@instructure/ui-text-input';
-import { Popover } from '@instructure/ui-popover';
-import { IconArrowOpenDownLine, IconArrowOpenUpLine } from '@instructure/ui-icons';
-import { BaseButton, CloseButton, IconButton } from '@instructure/ui-buttons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import PreviewIcon from './PreviewIcon';
-import formatMessage from '../../../format-message';
-const NAMED_COLORS = [{
-  color: '#BD3C14',
-  name: formatMessage('Brick')
-}, {
-  color: '#FF2717',
-  name: formatMessage('Red')
-}, {
-  color: '#E71F63',
-  name: formatMessage('Magenta')
-}, {
-  color: '#8F3E97',
-  name: formatMessage('Purple')
-}, {
-  color: '#65499D',
-  name: formatMessage('Deep Purple')
-}, {
-  color: '#4554A4',
-  name: formatMessage('Indigo')
-}, {
-  color: '#1770AB',
-  name: formatMessage('Blue')
-}, {
-  color: '#0B9BE3',
-  name: formatMessage('Light Blue')
-}, {
-  color: '#06A3B7',
-  name: formatMessage('Cyan')
-}, {
-  color: '#009688',
-  name: formatMessage('Teal')
-}, {
-  color: '#009606',
-  name: formatMessage('Green')
-}, {
-  color: '#8D9900',
-  name: formatMessage('Olive')
-}, {
-  color: '#D97900',
-  name: formatMessage('Pumpkin')
-}, {
-  color: '#FD5D10',
-  name: formatMessage('Orange')
-}, {
-  color: '#F06291',
-  name: formatMessage('Pink')
-}, {
-  color: '#000000',
-  name: formatMessage('Black')
-}, {
-  color: '#556572',
-  name: formatMessage('Steel Blue')
-}, {
-  color: '#6B7780',
-  name: formatMessage('Grey')
-}, {
-  color: '#FFFFFF',
-  name: formatMessage('White')
-}, null];
-export const ColorInput = _ref => {
-  var _NAMED_COLORS$find;
-
-  let {
-    color,
-    label,
-    name,
-    onChange,
-    popoverMountNode,
-    width = '11rem',
-    readonly = false,
-    requireColor = false
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState(color);
-  const colorName = (_NAMED_COLORS$find = NAMED_COLORS.find(c => (c === null || c === void 0 ? void 0 : c.color) === color)) === null || _NAMED_COLORS$find === void 0 ? void 0 : _NAMED_COLORS$find.name;
-  useEffect(() => {
-    setInputValue(color);
-  }, [color]); // fire onChange in case value is valid
-
-  const handleColorChange = hex => {
-    if (isValidHex(hex)) {
-      onChange(hex);
-    }
-
-    if (!hex || !hex.length) {
-      onChange(null);
-    }
-
-    setInputValue(hex);
-  }; // reset the input value on blur if invalid
-
-
-  const handleInputBlur = () => {
-    if (!inputValue || inputValue.length > 0 && !isValidHex(inputValue)) {
-      setInputValue(color);
-    }
-  };
-
-  const colorPreviews = NAMED_COLORS.map(c => /*#__PURE__*/React.createElement(ColorPreview, {
-    key: `${name}-${c === null || c === void 0 ? void 0 : c.color}`,
-    color: c === null || c === void 0 ? void 0 : c.color,
-    name: c === null || c === void 0 ? void 0 : c.name,
-    disabled: !isOpen,
-    onSelect: () => {
-      handleColorChange(c === null || c === void 0 ? void 0 : c.color);
-      setIsOpen(false);
-    }
-  }));
-
-  function renderPopover() {
-    const pickerLabel = colorName ? formatMessage('Color Picker ({colorName} selected)', {
-      colorName
-    }) : formatMessage('Color Picker');
-    return /*#__PURE__*/React.createElement(Popover, {
-      on: "click",
-      isShowingContent: isOpen,
-      onShowContent: () => setIsOpen(true),
-      onHideContent: () => setIsOpen(false),
-      shouldContainFocus: true,
-      shouldReturnFocus: true,
-      mountNode: popoverMountNode,
-      renderTrigger: /*#__PURE__*/React.createElement(IconButton, {
-        screenReaderLabel: pickerLabel,
-        size: "small",
-        withBackground: false,
-        withBorder: false,
-        interaction: "enabled",
-        "data-testid": `${name}-popover-trigger`
-      }, isOpen ? /*#__PURE__*/React.createElement(IconArrowOpenUpLine, null) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, null))
-    }, /*#__PURE__*/React.createElement(CloseButton, {
-      placement: "end",
-      onClick: () => setIsOpen(false),
-      screenReaderLabel: formatMessage('Close')
-    }), /*#__PURE__*/React.createElement(Flex, {
-      alignItems: "center",
-      as: "div",
-      justifyItems: requireColor ? 'start' : 'center',
-      padding: "x-large x-small small",
-      width: "175px",
-      wrap: "wrap",
-      "data-testid": `${name}-popover`
-    }, requireColor ? colorPreviews.slice(0, -1) : colorPreviews));
-  }
-
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    "data-testid": `icon-maker-color-input-${name}`,
-    display: "inline-block",
-    name: name,
-    onBlur: handleInputBlur,
-    onChange: (e, value) => handleColorChange(value),
-    placeholder: formatMessage('None'),
-    renderBeforeInput: /*#__PURE__*/React.createElement(ColorPreview, {
-      color: color,
-      disabled: true,
-      margin: "0"
-    }),
-    renderAfterInput: renderPopover,
-    renderLabel: label,
-    shouldNotWrap: true,
-    value: inputValue || '',
-    width: width,
-    interaction: readonly ? 'readonly' : undefined
-  }));
-};
-
-function ColorPreview(_ref2) {
-  let {
-    color,
-    name,
-    disabled,
-    margin = 'xxx-small',
-    onSelect
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(BaseButton, {
-    interaction: disabled ? 'readonly' : undefined,
-    isCondensed: true,
-    margin: margin,
-    onClick: onSelect,
-    size: "small",
-    withBackground: false,
-    withBorder: false,
-    "aria-hidden": disabled
-  }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, color ? formatMessage('{name} ({color})', {
-    name,
-    color
-  }) : formatMessage('None')), /*#__PURE__*/React.createElement(PreviewIcon, {
-    color: color,
-    testId: `colorPreview-${color || 'none'}`
-  }));
-}
-
-function isValidHex(color) {
-  if (!color) return false;
-
-  switch (color.length) {
-    case 4:
-      return /^#[0-9A-F]{3}$/i.test(color);
-
-    case 7:
-      return /^#[0-9A-F]{6}$/i.test(color);
-
-    default:
-      return false;
-  }
-}

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

@@ -1,32 +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 { bool, element, oneOfType, arrayOf } from 'prop-types';
-import { Tooltip } from '@instructure/ui-tooltip';
-export const ConditionalTooltip = _ref => {
-  let {
-    condition,
-    children,
-    ...tooltipProps
-  } = _ref;
-  return condition ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
-ConditionalTooltip.propTypes = {
-  condition: bool.isRequired,
-  children: oneOfType([element, arrayOf(element)]).isRequired
-};

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

@@ -1,269 +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 { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedOptions';
-import { isOnlyTextSelected } from '../../contentInsertionUtils';
-import * as url from 'url';
-import formatMessage from '../../../format-message';
-import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
-const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
-export const LINK_TYPE = 'link';
-export const FILE_LINK_TYPE = 'file-link';
-export const IMAGE_EMBED_TYPE = 'image-embed';
-export const VIDEO_EMBED_TYPE = 'video-embed';
-export const TEXT_TYPE = 'text';
-export const NONE_TYPE = 'none';
-export const DISPLAY_AS_LINK = 'link';
-export const DISPLAY_AS_EMBED = 'embed';
-export const DISPLAY_AS_EMBED_DISABLED = 'embed-disabled';
-export const DISPLAY_AS_DOWNLOAD_LINK = 'download-link';
-export function asImageEmbed($element) {
-  const nodeName = $element === null || $element === void 0 ? void 0 : $element.nodeName.toLowerCase();
-
-  if (nodeName !== 'img') {
-    return null;
-  }
-
-  return { ...fromImageEmbed($element),
-    $element,
-    type: IMAGE_EMBED_TYPE
-  };
-}
-export function asLink($element, editor) {
-  var _$link;
-
-  let $link = $element;
-
-  if (((_$link = $link) === null || _$link === void 0 ? void 0 : _$link.tagName) !== 'A') {
-    // the user may have selected some text that is w/in a link
-    // but didn't include the <a>. Let's see if that's true
-    $link = editor.dom.getParent($link, 'a[href]');
-  }
-
-  if (!$link || $link.tagName !== 'A' || !$link.href) {
-    return null;
-  }
-
-  const {
-    pathname
-  } = url.parse($link.href);
-  const type = FILE_DOWNLOAD_PATH_REGEX.test(pathname) ? FILE_LINK_TYPE : LINK_TYPE;
-  let displayAs = DISPLAY_AS_LINK;
-
-  if ($link.classList.contains('no_preview')) {
-    displayAs = DISPLAY_AS_DOWNLOAD_LINK;
-  } else if ($link.classList.contains('auto_open')) {
-    displayAs = DISPLAY_AS_EMBED;
-  } else if ($link.classList.contains('inline_disabled')) {
-    displayAs = DISPLAY_AS_EMBED_DISABLED;
-  }
-
-  const contentType = $link.getAttribute('data-course-type');
-  const fileName = $link.getAttribute('title');
-  const published = $link.getAttribute('data-published') === 'true';
-  const isPreviewable = $link.hasAttribute('data-canvas-previewable') || $link.classList.contains('instructure_scribd_file'); // needed to cover docs linked while there was a bug didn't add the data attr.
-
-  return {
-    $element: $link,
-    displayAs,
-    text: $link.textContent,
-    onlyTextSelected: isOnlyTextSelected(editor.selection.getContent()),
-    type,
-    isPreviewable,
-    url: $link.href,
-    contentType,
-    fileName,
-    published
-  };
-} // the video element is a bit tricky.
-// tinymce won't let me add many attributes to the iframe,
-// even though I've listed them in tinymce.config.js
-// extended_valid_elements.
-// we have to rely on the span tinymce wraps around the iframe
-// and it's attributes, even though this could change with future
-// tinymce releases.
-// see https://github.com/tinymce/tinymce/issues/5181
-
-export function asVideoElement($element) {
-  var _$videoElem$parentEle;
-
-  const $videoElem = findMediaPlayerIframe($element);
-
-  if (!isVideoElement($videoElem) && !isStudioEmbeddedMedia($videoElem)) {
-    return null;
-  }
-
-  return { ...fromVideoEmbed($videoElem),
-    $element,
-    type: VIDEO_EMBED_TYPE,
-    id: ((_$videoElem$parentEle = $videoElem.parentElement) === null || _$videoElem$parentEle === void 0 ? void 0 : _$videoElem$parentEle.getAttribute('data-mce-p-data-media-id')) || $videoElem.getAttribute('data-mce-p-data-media-id')
-  };
-}
-export function asAudioElement($element) {
-  var _$element$parentEleme;
-
-  if (!$element) {
-    return null;
-  }
-
-  const $audioIframe = $element.tagName === 'IFRAME' ? $element : $element.firstElementChild;
-  const $tinymceIframeShim = $audioIframe.parentElement;
-  const title = ($audioIframe.getAttribute('title') || $tinymceIframeShim.getAttribute('data-mce-p-title') || '').replace(formatMessage('Video player for '), '');
-  const audioOptions = {
-    titleText: title,
-    id: ((_$element$parentEleme = $element.parentElement) === null || _$element$parentEleme === void 0 ? void 0 : _$element$parentEleme.getAttribute('data-mce-p-data-media-id')) || $element.getAttribute('data-mce-p-data-media-id')
-  };
-
-  if ($audioIframe.tagName === 'IFRAME') {
-    const audioDoc = $audioIframe.contentDocument;
-
-    try {
-      var _audioDoc$querySelect;
-
-      const trackSJson = (_audioDoc$querySelect = audioDoc.querySelector('[data-tracks]')) === null || _audioDoc$querySelect === void 0 ? void 0 : _audioDoc$querySelect.getAttribute('data-tracks');
-
-      if (trackSJson) {
-        audioOptions.tracks = JSON.parse(trackSJson);
-      } // eslint-disable-next-line no-empty
-
-    } catch (e) {}
-  }
-
-  return audioOptions;
-}
-
-function asText($element, editor) {
-  const text = editor && editor.selection.getContent({
-    format: 'text'
-  });
-
-  if (!text) {
-    return null;
-  }
-
-  return {
-    $element,
-    text,
-    type: TEXT_TYPE
-  };
-}
-
-function asNone($element) {
-  return {
-    $element: $element || null,
-    type: NONE_TYPE
-  };
-}
-
-export function getContentFromElement($element, editor) {
-  if (!($element && $element.nodeName)) {
-    return asNone();
-  }
-
-  const content = asLink($element, editor) || asImageEmbed($element) || asVideoElement($element) || asText($element, editor) || asNone($element);
-  return content;
-}
-export function getContentFromEditor(editor) {
-  let expandSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let $element;
-
-  if (editor && editor.selection) {
-    // tinymce selects the element around the cursor, whether it's
-    // content is selected in the copy/paste sense or not.
-    // We want to include this content if it's _really_ selected,
-    // or if editing the surrounding link, but not if creating a new link
-    if (expandSelection || !editor.selection.isCollapsed()) {
-      $element = editor.selection.getNode();
-    }
-  }
-
-  if ($element == null) {
-    return asNone();
-  }
-
-  return getContentFromElement($element, editor);
-} // if the selection is somewhere w/in a <a>,
-// find the <a> and return it's info
-
-export function getLinkContentFromEditor(editor) {
-  const $element = editor.selection.getNode();
-  return $element ? asLink($element, editor) : null;
-}
-export function isFileLink($element, editor) {
-  return !!asLink($element, editor);
-}
-export function isImageEmbed($element) {
-  return !!asImageEmbed($element) && !$element.getAttribute('data-placeholder-for');
-}
-
-function isMediaElement($element, mediaType) {
-  var _tinymceIframeShim$fi;
-
-  // the video is hosted in an iframe, but tinymce
-  // wraps it in a span with swizzled attribute names
-  if (!($element !== null && $element !== void 0 && $element.getAttribute) || !$element) {
-    return false;
-  }
-
-  const tinymceIframeShim = $element.tagName === 'IFRAME' ? $element.parentElement : $element;
-
-  if (((_tinymceIframeShim$fi = tinymceIframeShim.firstElementChild) === null || _tinymceIframeShim$fi === void 0 ? void 0 : _tinymceIframeShim$fi.tagName) !== 'IFRAME') {
-    return false;
-  }
-
-  const media_obj_id = tinymceIframeShim.getAttribute('data-mce-p-data-media-id');
-
-  if (!media_obj_id) {
-    return false;
-  }
-
-  const media_type = tinymceIframeShim.getAttribute('data-mce-p-data-media-type');
-  return media_type === mediaType;
-}
-
-export function isVideoElement($element) {
-  return isMediaElement($element, 'video');
-}
-export function isAudioElement($element) {
-  return isMediaElement($element, 'audio');
-}
-export function findMediaPlayerIframe(elem) {
-  var _elem$firstElementChi;
-
-  if (!elem) return null;
-
-  if (elem.tagName === 'IFRAME') {
-    // we have the iframe
-    return elem;
-  }
-
-  if (((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.tagName) === 'IFRAME') {
-    // we have the shim tinymce puts around the iframe
-    return elem.firstElementChild;
-  }
-
-  if (elem.classList.contains('mce-shim')) {
-    var _elem$previousSibling;
-
-    // tinymce puts a <span class='mce-shin'> after the iframe (since v5, I think)
-    if (((_elem$previousSibling = elem.previousSibling) === null || _elem$previousSibling === void 0 ? void 0 : _elem$previousSibling.tagName) === 'IFRAME') {
-      return elem.previousSibling;
-    }
-  }
-
-  return null;
-}

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

@@ -1,66 +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/>.
- */
-function scaleEvenly(width, height, scaleFactor, constraints) {
-  const minHeight = constraints.minHeight || 0;
-  const minWidth = constraints.minWidth || 0;
-  const scaledWidth = width * scaleFactor;
-  const scaledHeight = height * scaleFactor;
-  let minimumScaleFactor = scaleFactor;
-
-  if (scaledWidth < minWidth) {
-    const atLeastMinWidth = Math.max(scaledWidth, minWidth);
-    minimumScaleFactor = atLeastMinWidth / width;
-  }
-
-  if (scaledHeight < minHeight) {
-    const atLeastMinHeight = Math.max(scaledHeight, minHeight);
-    minimumScaleFactor = Math.max(atLeastMinHeight / height, minimumScaleFactor);
-  }
-
-  return {
-    height: Math.round(height * minimumScaleFactor),
-    width: Math.round(width * minimumScaleFactor)
-  };
-}
-
-export function scaleForHeight(width, height, targetHeight) {
-  let constraints = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
-  if (targetHeight == null) {
-    return {
-      height: null,
-      width: null
-    };
-  }
-
-  const scaleFactor = targetHeight / height;
-  return scaleEvenly(width, height, scaleFactor, constraints);
-}
-export function scaleForWidth(width, height, targetWidth) {
-  let constraints = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
-  if (targetWidth == null) {
-    return {
-      height: null,
-      width: null
-    };
-  }
-
-  const scaleFactor = targetWidth / width;
-  return scaleEvenly(width, height, scaleFactor, constraints);
-}

package/lib/rce/plugins/shared/DimensionsInput/DimensionInput.js

@@ -1,62 +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, shape, string } from 'prop-types';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { NumberInput } from '@instructure/ui-number-input';
-export default function DimensionInput(props) {
-  const {
-    dimensionState,
-    label
-  } = props;
-  const {
-    addOffset,
-    inputValue,
-    setInputValue
-  } = dimensionState;
-
-  function handleChange(_event, value) {
-    setInputValue(value);
-  }
-
-  function handleDecrement() {
-    addOffset(-1);
-  }
-
-  function handleIncrement() {
-    addOffset(1);
-  }
-
-  return /*#__PURE__*/React.createElement(NumberInput, {
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, label),
-    onChange: handleChange,
-    onDecrement: handleDecrement,
-    onIncrement: handleIncrement,
-    isRequired: true,
-    showArrows: false,
-    value: inputValue
-  });
-}
-DimensionInput.propTypes = {
-  dimensionState: shape({
-    addOffset: func.isRequired,
-    inputValue: string.isRequired,
-    setInputValue: func.isRequired
-  }),
-  label: string.isRequired
-};