@instructure/canvas-rce 5.14.0 → 5.14.2

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2022 - present Instructure, Inc.
  *
@@ -17,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/>.
  */
+
 export const ICON_MAKER_ADD_IMAGE_MENU_ID = 'AddImageMenu';
 export const shouldIgnoreClose = (target, editorId) => {
   try {
@@ -29,17 +28,14 @@ export const shouldIgnoreClose = (target, editorId) => {
     return false;
   }
 };
-
 const elementTreeHasAttribute = (target, attribute, value) => {
   while (target) {
     var _target, _target$attributes, _target$attributes$at, _target2;
-
+    // @ts-expect-error
     if (((_target = target) === null || _target === void 0 ? void 0 : (_target$attributes = _target.attributes) === null || _target$attributes === void 0 ? void 0 : (_target$attributes$at = _target$attributes[attribute]) === null || _target$attributes$at === void 0 ? void 0 : _target$attributes$at.value) === value) {
       return true;
     }
-
     target = (_target2 = target) === null || _target2 === void 0 ? void 0 : _target2.parentElement;
   }
-
   return false;
 };

package/es/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.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 _ from 'lodash';
 export class IconMakerFormHasChanges {
   constructor(initSettings, currSettings) {
@@ -23,61 +24,46 @@ export class IconMakerFormHasChanges {
     this.initialSettings = initSettings;
     this.currentSettings = currSettings;
   }
-
   hasNameChange() {
     return 'name' in this.currentSettings && this.initialSettings.name !== this.currentSettings.name;
   }
-
   hasAltChange() {
     return 'alt' in this.currentSettings && this.initialSettings.alt !== this.currentSettings.alt;
   }
-
   hasShapeNameChange() {
     return 'shape' in this.currentSettings && this.initialSettings.shape !== this.currentSettings.shape;
   }
-
   hasShapeSizeChange() {
     return 'size' in this.currentSettings && this.initialSettings.size !== this.currentSettings.size;
   }
-
   hasColorNameChange() {
     return 'color' in this.currentSettings && this.initialSettings.color !== this.currentSettings.color;
   }
-
   hasOutlineSizeChange() {
     return 'outlineSize' in this.currentSettings && this.initialSettings.outlineSize !== this.currentSettings.outlineSize;
   }
-
   hasOutlineColorChange() {
     return 'outlineColor' in this.currentSettings && this.initialSettings.outlineColor !== this.currentSettings.outlineColor;
   }
-
   hasTextChange() {
     return 'text' in this.currentSettings && this.initialSettings.text !== this.currentSettings.text;
   }
-
   hasTextSizeChange() {
     return 'textSize' in this.currentSettings && this.initialSettings.textSize !== this.currentSettings.textSize;
   }
-
   hasTextColorChange() {
     return 'textColor' in this.currentSettings && this.initialSettings.textColor !== this.currentSettings.textColor;
   }
-
   hasTextBackgroundColorChange() {
     return 'textBackgroundColor' in this.currentSettings && this.initialSettings.textBackgroundColor !== this.currentSettings.textBackgroundColor;
   }
-
   hasTextPositionChange() {
     return 'textPosition' in this.currentSettings && this.initialSettings.textPosition !== this.currentSettings.textPosition;
   }
-
   hasImageSettingsChange() {
     return 'imageSettings' in this.currentSettings && !_.isEqual(this.initialSettings.imageSettings, this.currentSettings.imageSettings);
   }
-
   hasChanges() {
     return this.hasNameChange() || this.hasAltChange() || this.hasShapeNameChange() || this.hasShapeSizeChange() || this.hasColorNameChange() || this.hasOutlineColorChange() || this.hasOutlineSizeChange() || this.hasTextChange() || this.hasTextSizeChange() || this.hasTextColorChange() || this.hasTextBackgroundColorChange() || this.hasTextPositionChange() || this.hasImageSettingsChange();
   }
-
 }

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2022 - present Instructure, Inc.
  *
@@ -17,12 +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 { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR } from '../svg/constants';
 import buildDownloadUrl from '../../shared/buildDownloadUrl';
-
 const addIconMakerAttributes = imageAttributes => {
+  // @ts-expect-error
   imageAttributes[ICON_MAKER_ATTRIBUTE] = true;
+  // @ts-expect-error
   imageAttributes[ICON_MAKER_DOWNLOAD_URL_ATTR] = buildDownloadUrl(imageAttributes.src);
 };
-
 export default addIconMakerAttributes;

package/es/rce/plugins/instructure_icon_maker/utils/iconValidation.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/>.
  */
+
 export const hasBackgroundColor = settings => {
   return !!settings.color;
 };
@@ -23,7 +24,6 @@ export const hasText = settings => {
 };
 export const hasImage = settings => {
   var _settings$imageSettin;
-
   return ((_settings$imageSettin = settings.imageSettings) === null || _settings$imageSettin === void 0 ? void 0 : _settings$imageSettin.image.length) > 0;
 };
 export const hasOutline = settings => {

package/es/rce/plugins/instructure_icon_maker/utils/iconsLabels.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/>.
  */
+
 const iconLabels = {
   'أيقونة الفنون': 'art',
   'أيقونة الهندسة': 'engineering',

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,23 @@ 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');
-
     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+)/);
-
     if (matches) {
       videoOptions.attachmentId = matches[1];
     }
   }
-
   return videoOptions;
 }
 export function scaleImageForHeight(naturalWidth, naturalHeight, targetHeight) {
@@ -161,7 +148,6 @@ export function scaleToSize(imageSize, naturalWidth, naturalHeight) {
       height: naturalHeight
     };
   }
-
   const [dimension] = Object.entries(sizeByMaximumDimension).find(_ref => {
     let [, size] = _ref;
     return size === imageSize;
@@ -178,22 +164,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';
@@ -36,28 +37,22 @@ export default function Image(_ref) {
   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,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 { arrayOf, func, instanceOf, shape, bool, string } from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
@@ -35,11 +36,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,51 @@ 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
-
+  }
 
+  // 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;
     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 +89,31 @@ 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,7 +122,6 @@ 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';
     const element = /*#__PURE__*/React.createElement(ImageOptionsTray, {
@@ -162,5 +143,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';
@@ -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,7 +134,6 @@ 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 saveDisabled = isIconMaker ? disableForIcons : disableForImages;

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, {