@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/instructure_icon_maker/utils/useDebouncedValue.js

@@ -15,45 +15,44 @@
  * 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, useCallback, useEffect } from 'react';
 import { debounce } from '@instructure/debounce';
 export default function useDebouncedValue(currentValue, onChange, processValueCallback) {
-  const [immediateValue, setImmediateValue] = useState(currentValue); // Only invokes onChange on the trailing edge of the timeout
+  const [immediateValue, setImmediateValue] = useState(currentValue);
 
+  // Only invokes onChange on the trailing edge of the timeout
   const debouncedOnChangeCallback = useCallback(debounce(val => onChange(val), 500, {
     trailing: true
   }), []);
   useEffect(() => {
     let newValue = currentValue;
-
     if (processValueCallback) {
       newValue = processValueCallback(immediateValue, newValue);
-    } // If so we need to make sure to re-set the immediate value
-    // once a truthy value is given
-
+    }
 
+    // If so we need to make sure to re-set the immediate value
+    // once a truthy value is given
     if (newValue !== immediateValue) {
       setImmediateValue(newValue);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentValue]);
   useEffect(() => {
     // Debounce the call to set reducer's state
-    debouncedOnChangeCallback(immediateValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+    debouncedOnChangeCallback(immediateValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [immediateValue]);
-
   const handleValueChange = event => {
     let {
       value
     } = event.target;
-
     if (processValueCallback) {
       value = processValueCallback(value);
-    } // Immediately set local state for low-latency feedback
-
+    }
 
+    // Immediately set local state for low-latency feedback
     setImmediateValue(value);
   };
-
   return [immediateValue, handleValueChange];
 }

package/es/rce/plugins/instructure_image/ImageEmbedOptions.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 formatMessage from '../../../format-message';
 import { scaleForHeight, scaleForWidth } from '../shared/DimensionUtils';
 import RCEGlobals from '../../RCEGlobals';
@@ -35,7 +36,6 @@ const sizeByMaximumDimension = {
   400: LARGE,
   640: EXTRA_LARGE
 };
-
 function parsedOrNull($element, attribute) {
   // when the image is first inserted into the rce, it's size
   // is constrained by a style attribute with max-width, max-height.
@@ -44,23 +44,19 @@ function parsedOrNull($element, attribute) {
   const value = $element.hasAttribute(attribute) ? $element.getAttribute(attribute) : $element[attribute];
   return value ? Math.round(Number.parseInt(value, 10)) : null;
 }
-
 function imageSizeFromKnownOptions(imageOptions) {
   const intendedWidth = imageOptions.appliedWidth || imageOptions.naturalWidth;
   const intendedHeight = imageOptions.appliedHeight || imageOptions.naturalHeight;
   const largestDimension = Math.max(intendedWidth, intendedHeight);
   return sizeByMaximumDimension[largestDimension] || CUSTOM;
 }
-
 function getPercentageUnitsFromAttributes($element) {
   const getAttribute = attribute => $element.hasAttribute(attribute) ? $element.getAttribute(attribute) : $element[attribute];
-
   const widthValue = getAttribute('width');
   const heightValue = getAttribute('height');
   const value = [widthValue, heightValue].find(v => /\d+(?:\.\d+)?%/.test(v));
   return value ? Math.round(Number.parseInt(value, 10)) : null;
 }
-
 export function fromImageEmbed($element) {
   const altText = $element.getAttribute('alt');
   const percentageUnits = getPercentageUnitsFromAttributes($element);
@@ -86,13 +82,10 @@ export function fromVideoEmbed($element) {
   let naturalWidth, naturalHeight;
   const $videoIframe = $element.tagName === 'IFRAME' ? $element : $element.firstElementChild;
   const $tinymceIframeShim = $videoIframe.parentElement;
-
   if ($videoIframe.tagName === 'IFRAME') {
     $videoDoc = $videoIframe.contentDocument;
-
     if ($videoDoc) {
       $videoElem = $videoDoc.querySelector('video');
-
       if ($videoElem && ($videoElem.loadedmetadata || $videoElem.readyState >= 1)) {
         naturalWidth = $videoElem.videoWidth;
         naturalHeight = $videoElem.videoHeight;
@@ -101,10 +94,10 @@ export function fromVideoEmbed($element) {
       naturalHeight = $videoIframe.clientHeight;
       naturalWidth = $videoIframe.clientWidth;
     }
-  } // because tinymce doesn't put the title attribute on the iframe,
-  // but maintains it on the span it adds around it.
-
+  }
 
+  // because tinymce doesn't put the title attribute on the iframe,
+  // but maintains it on the span it adds around it.
   const title = ($videoIframe.getAttribute('title') || $tinymceIframeShim.getAttribute('data-mce-p-title') || '').replace(formatMessage('Video player for '), '');
   const rect = $element.getBoundingClientRect();
   const videoOptions = {
@@ -115,29 +108,22 @@ export function fromVideoEmbed($element) {
     naturalWidth,
     source: $videoElem && $videoElem.querySelector('source')
   };
-
   try {
-    var _$videoDoc$querySelec;
-
-    const trackjson = (_$videoDoc$querySelec = $videoDoc.querySelector('[data-tracks]')) === null || _$videoDoc$querySelec === void 0 ? void 0 : _$videoDoc$querySelec.getAttribute('data-tracks');
-
+    const trackjson = $videoDoc.querySelector('[data-tracks]')?.getAttribute('data-tracks');
     if (trackjson) {
       videoOptions.tracks = JSON.parse(trackjson);
     }
-  } catch (_ignore) {// bad json?
+  } catch (_ignore) {
+    // bad json?
   }
-
   videoOptions.videoSize = imageSizeFromKnownOptions(videoOptions);
-
   if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
     const source = $videoIframe.getAttribute('src');
-    const matches = source === null || source === void 0 ? void 0 : source.match(/\/media_attachments_iframe\/(\d+)/);
-
+    const matches = source?.match(/\/media_attachments_iframe\/(\d+)/);
     if (matches) {
       videoOptions.attachmentId = matches[1];
     }
   }
-
   return videoOptions;
 }
 export function scaleImageForHeight(naturalWidth, naturalHeight, targetHeight) {
@@ -161,11 +147,7 @@ export function scaleToSize(imageSize, naturalWidth, naturalHeight) {
       height: naturalHeight
     };
   }
-
-  const [dimension] = Object.entries(sizeByMaximumDimension).find(_ref => {
-    let [, size] = _ref;
-    return size === imageSize;
-  });
+  const [dimension] = Object.entries(sizeByMaximumDimension).find(([, size]) => size === imageSize);
   const scaleFactor = dimension / Math.max(naturalWidth, naturalHeight);
   return {
     height: Math.round(naturalHeight * scaleFactor),
@@ -178,22 +160,18 @@ export function labelForImageSize(imageSize) {
       {
         return formatMessage('Small');
       }
-
     case MEDIUM:
       {
         return formatMessage('Medium');
       }
-
     case LARGE:
       {
         return formatMessage('Large');
       }
-
     case EXTRA_LARGE:
       {
         return formatMessage('Extra Large');
       }
-
     default:
       {
         return formatMessage('Custom');

package/es/rce/plugins/instructure_image/ImageList/Image.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 { func, instanceOf, number, oneOfType, shape, string, bool } from 'prop-types';
 import { Img } from '@instructure/ui-img';
@@ -25,39 +26,32 @@ import { View } from '@instructure/ui-view';
 import dragHtml from '../../../../sidebar/dragHtml';
 import formatMessage from '../../../../format-message';
 import { renderImage } from '../../../contentRendering';
-export default function Image(_ref) {
-  let {
-    focusRef,
-    image,
-    onClick,
-    isIconMaker,
-    canvasOrigin
-  } = _ref;
+export default function Image({
+  focusRef,
+  image,
+  onClick,
+  isIconMaker,
+  canvasOrigin
+}) {
   const imgTitle = formatMessage('Click to embed {imageName}', {
     imageName: image.display_name
   });
-
   function handleDragStart(event) {
     dragHtml(event, renderImage(image, canvasOrigin));
   }
-
   function handleDragEnd() {
     document.body.click();
   }
-
   function handleImageClick(event) {
     event.preventDefault();
     onClick(image);
   }
-
   let elementRef = null;
-
   if (focusRef) {
     elementRef = ref => {
       focusRef.current = ref;
     };
   }
-
   return /*#__PURE__*/React.createElement(Link, {
     draggable: false,
     elementRef: elementRef,

package/es/rce/plugins/instructure_image/ImageList/index.js

@@ -15,18 +15,18 @@
  * 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 { arrayOf, func, instanceOf, shape, bool, string } from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
 import Image from './Image';
-export default function ImageList(_ref) {
-  let {
-    images,
-    lastItemRef,
-    onImageClick,
-    isIconMaker,
-    canvasOrigin
-  } = _ref;
+export default function ImageList({
+  images,
+  lastItemRef,
+  onImageClick,
+  isIconMaker,
+  canvasOrigin
+}) {
   return /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "start",
     height: "100%",
@@ -35,11 +35,9 @@ export default function ImageList(_ref) {
     wrap: "wrap"
   }, images.map((image, index) => {
     let focusRef = null;
-
     if (index === images.length - 1) {
       focusRef = lastItemRef;
     }
-
     return /*#__PURE__*/React.createElement(Flex.Item, {
       as: "div",
       key: 'image-' + image.id,

package/es/rce/plugins/instructure_image/ImageOptionsTray/TrayController.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 ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
@@ -30,63 +31,50 @@ export default class TrayController {
     this._renderId = 0;
     this._isIconMaker = false;
   }
-
   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;
-  } // Tray may be called to edit an Icon Maker icon alt text
-
+  }
 
-  showTrayForEditor(editor) {
-    let isIconMaker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  // Tray may be called to edit an Icon Maker icon alt text
+  showTrayForEditor(editor, isIconMaker = false) {
     this._editor = editor;
     this.$img = editor.selection.getNode();
     this._shouldOpen = true;
     this._isIconMaker = isIconMaker;
-
     if (bridge.focusedEditor) {
       // Dismiss any content trays that may already be open
       bridge.hideTrays();
     }
-
     this._renderTray();
   }
-
   hideTrayForEditor(editor) {
     if (this._editor === editor) {
       this._dismissTray();
     }
   }
-
   _applyImageOptions(imageOptions) {
     const editor = this._editor;
     const {
       $img
     } = this;
-
     if (this._isIconMaker) {
       this._applyIconAltTextChanges($img, editor, imageOptions);
-
       this._dismissTray();
-
       editor.focus();
       return;
     }
-
     if (imageOptions.displayAs === 'embed') {
-      updateImage(editor, $img, imageOptions); // tell tinymce so the context toolbar resets
-
+      updateImage(editor, $img, imageOptions);
+      // tell tinymce so the context toolbar resets
       editor.fire('ObjectResized', {
         target: $img,
         width: imageOptions.appliedWidth,
@@ -100,38 +88,30 @@ export default class TrayController {
       });
       editor.selection.setContent(link);
     }
-
     this._dismissTray();
-
     editor.focus();
   }
-
   _applyIconAltTextChanges($img, editor, imageOptions) {
     // Workaround: When passing empty string to editor.dom.setAttribs it removes the attribute
     $img.setAttribute('alt', imageOptions.altText);
     editor.dom.setAttribs($img, {
       role: imageOptions.isDecorativeImage ? 'presentation' : null
-    }); // tell tinymce so the context toolbar resets
+    });
 
+    // tell tinymce so the context toolbar resets
     editor.fire('ObjectResized', {
       target: $img,
       width: imageOptions.appliedWidth,
       height: imageOptions.appliedHeight
     });
   }
-
   _dismissTray() {
     this._shouldOpen = false;
-
     this._renderTray();
-
     this.$img = null;
     this._editor = null;
   }
-
   _renderTray() {
-    var _this$_editor, _this$_editor$selecti;
-
     if (this._shouldOpen) {
       /*
        * When the tray is being opened again, it should be rendered fresh
@@ -140,9 +120,8 @@ export default class TrayController {
        */
       this._renderId++;
     }
-
     const io = asImageEmbed(this.$img);
-    io.isLinked = ((_this$_editor = this._editor) === null || _this$_editor === void 0 ? void 0 : (_this$_editor$selecti = _this$_editor.selection) === null || _this$_editor$selecti === void 0 ? void 0 : _this$_editor$selecti.getSel().anchorNode.tagName) === 'A';
+    io.isLinked = this._editor?.selection?.getSel().anchorNode.tagName === 'A';
     const element = /*#__PURE__*/React.createElement(ImageOptionsTray, {
       key: this._renderId,
       imageOptions: io,
@@ -162,5 +141,4 @@ export default class TrayController {
     });
     ReactDOM.render(element, this.$container);
   }
-
 }

package/es/rce/plugins/instructure_image/ImageOptionsTray/index.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, { useState, useEffect } from 'react';
 import { bool, func, number, shape, string } from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
@@ -28,7 +29,7 @@ import ImageOptionsForm from '../../shared/ImageOptionsForm';
 import { getTrayHeight, isExternalUrl } from '../../shared/trayUtils';
 import validateURL from '../../instructure_links/validateURL';
 import UrlPanel from '../../shared/Upload/UrlPanel';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 export default function ImageOptionsTray(props) {
   const {
     imageOptions,
@@ -59,26 +60,20 @@ export default function ImageOptionsTray(props) {
     minWidth: MIN_WIDTH,
     minPercentage: MIN_PERCENTAGE
   });
-
   function handleUrlChange(newUrl) {
     setUrl(newUrl);
   }
-
   function handleAltTextChange(event) {
     setAltText(event.target.value);
   }
-
   function handleIsDecorativeChange(event) {
     setIsDecorativeImage(event.target.checked);
   }
-
   function handleDisplayAsChange(event) {
     setDisplayAs(event.target.value);
   }
-
   function handleImageSizeChange(event, selectedOption) {
     setImageSize(selectedOption.value);
-
     if (selectedOption.value === CUSTOM) {
       setImageHeight(currentHeight);
       setImageWidth(currentWidth);
@@ -91,13 +86,11 @@ export default function ImageOptionsTray(props) {
       setImageWidth(width);
     }
   }
-
   function handleSave(event) {
     event.preventDefault();
     const savedAltText = isDecorativeImage ? '' : altText;
     let appliedHeight = imageHeight;
     let appliedWidth = imageWidth;
-
     if (imageSize === CUSTOM) {
       if (dimensionsState.usePercentageUnits) {
         appliedHeight = `${dimensionsState.percentage}%`;
@@ -107,7 +100,6 @@ export default function ImageOptionsTray(props) {
         appliedWidth = dimensionsState.width;
       }
     }
-
     onSave({
       url,
       altText: savedAltText,
@@ -117,26 +109,22 @@ export default function ImageOptionsTray(props) {
       isDecorativeImage
     });
   }
-
   useEffect(() => {
     if (isIconMaker) {
       setShowUrlField(false);
       return;
     }
-
     let isValidURL;
-
     try {
       isValidURL = validateURL(url);
     } catch (error) {
       isValidURL = false;
     } finally {
       setShowUrlField(isValidURL ? isExternalUrl(url) : true);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [url]);
   const messagesForSize = [];
-
   if (imageSize !== CUSTOM) {
     messagesForSize.push({
       text: formatMessage('{width} x {height}px', {
@@ -146,16 +134,15 @@ export default function ImageOptionsTray(props) {
       type: 'hint'
     });
   }
-
   const disableForIcons = isIconMaker && !isDecorativeImage && altText === '';
-  const disableForImages = url === '' || displayAs === 'embed' && (!isDecorativeImage && altText === '' || imageSize === CUSTOM && !(dimensionsState !== null && dimensionsState !== void 0 && dimensionsState.isValid));
+  const disableForImages = url === '' || displayAs === 'embed' && (!isDecorativeImage && altText === '' || imageSize === CUSTOM && !dimensionsState?.isValid);
   const saveDisabled = isIconMaker ? disableForIcons : disableForImages;
   const trayLabel = isIconMaker ? formatMessage('Icon Options Tray') : formatMessage('Image Options Tray');
   const trayHeading = isIconMaker ? formatMessage('Icon Options') : formatMessage('Image Options');
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
     label: trayLabel,
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     onDismiss: onRequestClose,
     onEntered: onEntered,
     onExited: onExited,

package/es/rce/plugins/instructure_image/Images/index.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, { useRef } from 'react';
 import { bool, func, oneOf, shape, string } from 'prop-types';
 import { contentTrayDocumentShape } from '../../shared/fileShape';
@@ -24,15 +25,12 @@ import { Text } from '@instructure/ui-text';
 import { LoadMoreButton, LoadingIndicator, LoadingStatus, useIncrementalLoading } from '../../../../common/incremental-loading';
 import ImageList from '../ImageList';
 import formatMessage from '../../../../format-message';
-
 function hasFiles(images) {
   return images.files.length > 0;
 }
-
 function isEmpty(images) {
   return !hasFiles(images) && !images.hasMore && !images.isLoading;
 }
-
 export default function Images(props) {
   const {
     fetchInitialImages,

package/es/rce/plugins/instructure_image/clickCallback.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 doFileUpload from '../shared/Upload/doFileUpload';
 export default function (ed, document) {
   return doFileUpload(ed, document, {