@instructure/canvas-rce 5.14.1 → 5.14.2

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

@@ -15,6 +15,7 @@
  * 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, { useCallback, useEffect, useRef, useState } from 'react';
 import { bool, element, func, instanceOf, oneOfType, shape, string } from 'prop-types';
 import { Tray } from '@instructure/ui-tray';
@@ -33,6 +34,7 @@ import { getLinkContentFromEditor } from './ContentSelection';
 import { LinkDisplay } from './LinkDisplay';
 import { showFlashAlert } from '../../../common/FlashAlert';
 import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel, isLoading } from './canvasContentUtils';
+
 /**
  * Returns the translated tray label
  * @param {string} contentType - The type of content showing on tray
@@ -40,51 +42,44 @@ import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel, isLoading } from './canvasCont
  * @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
   }
 }
+
 /**
  * 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
+  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 [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);
@@ -100,20 +95,20 @@ export default function CanvasContentTray(props) {
     mountNode,
     onTrayClosing,
     storeProps
-  } = { ...props
+  } = {
+    ...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]); // this shouldn't be necessary, but INSTUI isn't focusing the close button
-  // like it should.
+  }, [bridge, onTrayClosing]);
 
+  // this shouldn't be necessary, but INSTUI isn't focusing the close button
+  // like it should.
   useEffect(() => {
     if (isOpen && closeButtonRef) {
       closeButtonRef.focus();
@@ -128,7 +123,6 @@ export default function CanvasContentTray(props) {
         ++CanvasContentTray.globalOpenCount;
         setFilterSettings(FILTER_SETTINGS_BY_PLUGIN[plugin]);
         setIsOpen(true);
-
         if (plugin === 'course_link_edit') {
           setIsEditTray(true);
           const {
@@ -150,18 +144,17 @@ export default function CanvasContentTray(props) {
           setIsEditTray(false);
         }
       },
-
       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
+    };
+    // it's OK the setFilterSettings is not a dependency
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor.id, bridge, handleDismissTray, hidingTrayOnAction]);
   useEffect(() => {
@@ -171,19 +164,16 @@ export default function CanvasContentTray(props) {
   }, [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"]');
@@ -191,16 +181,13 @@ export default function CanvasContentTray(props) {
       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
@@ -208,10 +195,10 @@ export default function CanvasContentTray(props) {
     setHasOpened(false);
     onTrayClosing && onTrayClosing(false); // tell RCEWrapper we're closed
   }
-
   function handleReplaceButton() {
     handleDismissTray();
-    const newLink = { ...link,
+    const newLink = {
+      ...link,
       forceRename: true,
       text: linkText
     };
@@ -222,7 +209,6 @@ export default function CanvasContentTray(props) {
       srOnly: true
     });
   }
-
   function renderFooter() {
     return /*#__PURE__*/React.createElement(Flex.Item, {
       background: "secondary",
@@ -239,11 +225,10 @@ export default function CanvasContentTray(props) {
       "data-testid": "replace-link-button"
     }, formatMessage('Replace')));
   }
-
   function handleFilterChange(newFilter, onChangeContext, onChangeSearchString, onChangeSortBy) {
-    const newFilterSettings = { ...newFilter
+    const newFilterSettings = {
+      ...newFilter
     };
-
     if (newFilterSettings.sortValue) {
       newFilterSettings.sortDir = newFilterSettings.sortValue === 'alphabetical' ? 'asc' : 'desc';
       onChangeSortBy({
@@ -251,48 +236,38 @@ export default function CanvasContentTray(props) {
         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');
   }
-
   function renderLinkDisplay() {
     return isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
       linkText: linkText,
@@ -303,7 +278,6 @@ export default function CanvasContentTray(props) {
       linkType: link === null || link === void 0 ? void 0 : link.type
     });
   }
-
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
     "data-testid": "CanvasContentTray",
@@ -382,14 +356,13 @@ export default function CanvasContentTray(props) {
   }, 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]}\`.`);
   }
-} // Changes made here may need to be reflected in the trayProps type in CanvasContentPanel
-
+}
 
+// Changes made here may need to be reflected in the trayProps type in CanvasContentPanel
 const trayPropsMap = {
   canUploadFiles: bool.isRequired,
   contextId: string.isRequired,
@@ -421,10 +394,10 @@ CanvasContentTray.propTypes = {
   // 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
+};
 
+// 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,

package/es/rce/plugins/shared/CheckerboardStyling.js

@@ -15,11 +15,11 @@
  * 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;

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

@@ -15,6 +15,7 @@
  * 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';
@@ -85,7 +86,6 @@ const NAMED_COLORS = [{
 }, null];
 export const ColorInput = _ref => {
   var _NAMED_COLORS$find;
-
   let {
     color,
     label,
@@ -101,27 +101,25 @@ export const ColorInput = _ref => {
   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
+  }, [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
-
+  };
 
+  // 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,
@@ -132,7 +130,6 @@ export const ColorInput = _ref => {
       setIsOpen(false);
     }
   }));
-
   function renderPopover() {
     const pickerLabel = colorName ? formatMessage('Color Picker ({colorName} selected)', {
       colorName
@@ -167,7 +164,6 @@ export const ColorInput = _ref => {
       "data-testid": `${name}-popover`
     }, requireColor ? colorPreviews.slice(0, -1) : colorPreviews));
   }
-
   return /*#__PURE__*/React.createElement(View, {
     as: "div"
   }, /*#__PURE__*/React.createElement(TextInput, {
@@ -190,7 +186,6 @@ export const ColorInput = _ref => {
     interaction: readonly ? 'readonly' : undefined
   }));
 };
-
 function ColorPreview(_ref2) {
   let {
     color,
@@ -216,17 +211,13 @@ function ColorPreview(_ref2) {
     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/es/rce/plugins/shared/ConditionalTooltip.js

@@ -15,6 +15,7 @@
  * 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';

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

@@ -15,13 +15,13 @@
  * 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'; // eslint-disable-next-line import/no-nodejs-modules
 
-import * as url from 'url';
+import { fromImageEmbed, fromVideoEmbed } from '../instructure_image/ImageEmbedOptions';
+import { isOnlyTextSelected } from '../../contentInsertionUtils';
 import formatMessage from '../../../format-message';
 import { isStudioEmbeddedMedia } from './StudioLtiSupportUtils';
 import RCEGlobals from '../../RCEGlobals';
+import { parseUrlPath } from '../../../util/url-util';
 const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
 export const LINK_TYPE = 'link';
 export const FILE_LINK_TYPE = 'file-link';
@@ -35,37 +35,29 @@ 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),
+  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]');
+    $link = editor && editor.dom.getParent($link, 'a[href]');
   }
-
   if (!$link || $link.tagName !== 'A' || !$link.href) {
     return null;
   }
-
-  const {
-    pathname
-  } = url.parse($link.href);
+  const pathname = parseUrlPath($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')) {
@@ -73,7 +65,6 @@ export function asLink($element, editor) {
   } 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';
@@ -91,7 +82,9 @@ export function asLink($element, editor) {
     fileName,
     published
   };
-} // the video element is a bit tricky.
+}
+
+// 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.
@@ -99,17 +92,14 @@ export function asLink($element, editor) {
 // 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),
+  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')
@@ -117,11 +107,9 @@ export function asVideoElement($element) {
 }
 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 '), '');
@@ -129,69 +117,55 @@ export function asAudioElement($element) {
     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
-
+      }
+      // eslint-disable-next-line no-empty
     } catch (e) {}
   }
-
   if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
     const source = $audioIframe.getAttribute('src');
     const matches = source === null || source === void 0 ? void 0 : source.match(/\/media_attachments_iframe\/(\d+)/);
-
     if (matches) {
       audioOptions.attachmentId = matches[1];
     }
   }
-
   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.
@@ -201,15 +175,14 @@ export function getContentFromEditor(editor) {
       $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
+}
 
+// 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;
@@ -220,33 +193,25 @@ export function isFileLink($element, editor) {
 export function isImageEmbed($element) {
   return !!asImageEmbed($element) && !$element.getAttribute('data-placeholder-for');
 }
-
 function isMediaElement($element, mediaType) {
   var _tinymceIframeShim$fi, _tinymceIframeShim$ge;
-
   // 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');
   const is_media_attachment_iframe = (_tinymceIframeShim$ge = tinymceIframeShim.getAttribute('data-mce-p-src')) === null || _tinymceIframeShim$ge === void 0 ? void 0 : _tinymceIframeShim$ge.includes('media_attachments_iframe');
-
   if (!media_obj_id && !is_media_attachment_iframe) {
     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');
 }
@@ -255,27 +220,21 @@ export function isAudioElement($element) {
 }
 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;
 }