@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/instructure_icon_maker/svg/text.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 { createSvgElement, splitTextIntoLines } from './utils';
 import { TEXT_BACKGROUND_PADDING, BASE_SIZE, TEXT_SIZE, MAX_CHAR_COUNT, Size, TEXT_SIZE_FONT_DIFF } from './constants';
 import { Shape } from './shape';
-export function buildText(_ref) {
-  let {
-    text,
-    textPosition,
-    textSize,
-    textColor,
-    shape,
-    size
-  } = _ref;
+export function buildText({
+  text,
+  textPosition,
+  textSize,
+  textColor,
+  shape,
+  size
+}) {
   if (!text.trim()) return null;
   const lines = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]);
   const textElement = createSvgElement('text', {
@@ -53,21 +53,20 @@ export function buildText(_ref) {
   });
   return textElement;
 }
-export function buildTextBackground(_ref2) {
-  let {
-    text,
-    textPosition,
-    textSize,
-    textBackgroundColor,
-    shape,
-    size
-  } = _ref2;
+export function buildTextBackground({
+  text,
+  textPosition,
+  textSize,
+  textBackgroundColor,
+  shape,
+  size
+}) {
   if (!text.trim()) return null;
   const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
   const xValue = getTextXValue(text, textSize, size);
   const yValue = getTextYValue(textPosition, textSize, shape, size, linesCount);
-  const textWidth = getTextWidth(text, textSize); // An extra line is added due svg text baseline behavior the first line is not counted regularly.
-
+  const textWidth = getTextWidth(text, textSize);
+  // An extra line is added due svg text baseline behavior the first line is not counted regularly.
   const textHeight = getTextHeight(linesCount + 1, textSize);
   const paddingSize = TEXT_BACKGROUND_PADDING * 2;
   const pathElement = createSvgElement('path');
@@ -82,38 +81,33 @@ export function buildTextBackground(_ref2) {
   pathElement.setAttribute('fill', textBackgroundColor || '');
   return pathElement;
 }
-export function getContainerWidth(_ref3) {
-  let {
-    text,
-    textSize,
-    size
-  } = _ref3;
+export function getContainerWidth({
+  text,
+  textSize,
+  size
+}) {
   const fontWeight = 2;
   const base = BASE_SIZE[size];
   const textWidth = Math.floor(getTextWidth(text, textSize)) + TEXT_BACKGROUND_PADDING * 2 + fontWeight;
   return Math.max(base, textWidth);
 }
-export function getContainerHeight(_ref4) {
-  let {
-    text,
-    textPosition,
-    textSize,
-    shape,
-    size
-  } = _ref4;
+export function getContainerHeight({
+  text,
+  textPosition,
+  textSize,
+  shape,
+  size
+}) {
   const base = BASE_SIZE[size];
-
   if (!text || text.trim().length === 0) {
     return base;
   }
-
   const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
   const textYValue = getTextYValue(textPosition, textSize, shape, size, linesCount);
   const textHeight = getTextHeight(linesCount, textSize);
   const textBackgroundHeight = textYValue + textHeight + TEXT_BACKGROUND_PADDING * 2;
   return Math.max(base, textBackgroundHeight);
 }
-
 function getTextWidth(text, textSize) {
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
@@ -122,13 +116,11 @@ function getTextWidth(text, textSize) {
   const widths = lines.map(line => context.measureText(line).width);
   return Math.max(...widths);
 }
-
 function getTextHeight(linesCount, textSize) {
   // Since the svg text's initial Y position starts on the bottom of the first line
   // one line is subtracted to the count
   return (linesCount - 1) * TEXT_SIZE[textSize];
 }
-
 function getTextXValue(text, textSize, size) {
   const containerWidth = getContainerWidth({
     text,
@@ -138,90 +130,70 @@ function getTextXValue(text, textSize, size) {
   const textWidth = getTextWidth(text, textSize);
   return Math.floor((containerWidth - textWidth) * 0.5);
 }
-
 function getTextYValue(textPosition, textSize, shape, size, linesCount) {
   switch (textPosition) {
     case 'middle':
       {
-        const baseline = getYMiddleText(textSize, shape, size); // Represents the Y difference for multiline text to keep it vertically centered
-
+        const baseline = getYMiddleText(textSize, shape, size);
+        // Represents the Y difference for multiline text to keep it vertically centered
         const multilineDiff = (linesCount - 1) * TEXT_SIZE[textSize] / 2;
         return baseline - multilineDiff;
       }
-
     case 'bottom-third':
       {
-        const baseline = getYBottomThirdText(textSize, shape, size); // Represents the Y difference for multiline text to keep it vertically centered
-
+        const baseline = getYBottomThirdText(textSize, shape, size);
+        // Represents the Y difference for multiline text to keep it vertically centered
         const multilineDiff = (linesCount - 1) * TEXT_SIZE[textSize] / 2;
         return baseline - multilineDiff;
       }
-
     case 'below':
       return getYBelowText(textSize, shape, size);
-
     default:
       throw new Error(`Invalid text position: ${textPosition}`);
   }
 }
-
 function getYMiddleText(textSize, shape, size) {
   switch (textSize) {
     case Size.Small:
       return getYMiddleTextForShape(getYMiddleSmallTextForShape, shape, size);
-
     case Size.Medium:
       return getYMiddleTextForShape(getYMiddleMediumTextForShape, shape, size);
-
     case Size.Large:
       return getYMiddleTextForShape(getYMiddleLargeTextForShape, shape, size);
-
     case Size.ExtraLarge:
       return getYMiddleTextForShape(getYMiddleXLargeTextForShape, shape, size);
-
     default:
       throw new Error(`Invalid text size: ${textSize}`);
   }
 }
-
 function getYBottomThirdText(textSize, shape, size) {
   switch (textSize) {
     case Size.Small:
       return getYMiddleTextForShape(getYBottomThirdSmallTextForShape, shape, size);
-
     case Size.Medium:
       return getYMiddleTextForShape(getYBottomThirdMediumTextForShape, shape, size);
-
     case Size.Large:
       return getYMiddleTextForShape(getYBottomThirdLargeTextForShape, shape, size);
-
     case Size.ExtraLarge:
       return getYMiddleTextForShape(getYBottomThirdXLargeTextForShape, shape, size);
-
     default:
       throw new Error(`Invalid text size: ${textSize}`);
   }
 }
-
 function getYBelowText(textSize, shape, size) {
   switch (textSize) {
     case Size.Small:
       return getYMiddleTextForShape(getYBelowSmallTextForShape, shape, size);
-
     case Size.Medium:
       return getYMiddleTextForShape(getYBelowMediumTextForShape, shape, size);
-
     case Size.Large:
       return getYMiddleTextForShape(getYBelowLargeTextForShape, shape, size);
-
     case Size.ExtraLarge:
       return getYMiddleTextForShape(getYBelowXLargeTextForShape, shape, size);
-
     default:
       throw new Error(`Invalid text size: ${textSize}`);
   }
 }
-
 function getYMiddleTextForShape(getYTextSizeCallback, shape, size) {
   switch (shape) {
     case Shape.Square:
@@ -233,235 +205,174 @@ function getYMiddleTextForShape(getYTextSizeCallback, shape, size) {
     case Shape.Octagon:
     case Shape.Star:
       return getYTextSizeCallback(size);
-
     default:
       throw new Error(`Invalid shape: ${shape}`);
   }
 }
-
 function getYMiddleSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 43;
-
     case Size.Small:
       return 67;
-
     case Size.Medium:
       return 85;
-
     case Size.Large:
       return 115;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYMiddleMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 43;
-
     case Size.Small:
       return 67;
-
     case Size.Medium:
       return 85;
-
     case Size.Large:
       return 115;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYMiddleLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 45;
-
     case Size.Small:
       return 69;
-
     case Size.Medium:
       return 87;
-
     case Size.Large:
       return 117;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYMiddleXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 47;
-
     case Size.Small:
       return 71;
-
     case Size.Medium:
       return 89;
-
     case Size.Large:
       return 119;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYBottomThirdSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 73;
-
     case Size.Small:
       return 121;
-
     case Size.Medium:
       return 157;
-
     case Size.Large:
       return 217;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYBottomThirdMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 74;
-
     case Size.Small:
       return 122;
-
     case Size.Medium:
       return 158;
-
     case Size.Large:
       return 218;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYBottomThirdLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 75;
-
     case Size.Small:
       return 123;
-
     case Size.Medium:
       return 159;
-
     case Size.Large:
       return 219;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYBottomThirdXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 77;
-
     case Size.Small:
       return 125;
-
     case Size.Medium:
       return 161;
-
     case Size.Large:
       return 221;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYBelowSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 96;
-
     case Size.Small:
       return 144;
-
     case Size.Medium:
       return 180;
-
     case Size.Large:
       return 240;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYBelowMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 98;
-
     case Size.Small:
       return 146;
-
     case Size.Medium:
       return 182;
-
     case Size.Large:
       return 242;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYBelowLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 104;
-
     case Size.Small:
       return 152;
-
     case Size.Medium:
       return 188;
-
     case Size.Large:
       return 248;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
-
 function getYBelowXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 110;
-
     case Size.Small:
       return 158;
-
     case Size.Medium:
       return 194;
-
     case Size.Large:
       return 254;
-
     default:
       throw new Error(`Invalid size: ${size}`);
   }

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

@@ -15,11 +15,10 @@
  * 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 function createSvgElement(tag) {
-  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+export function createSvgElement(tag, attributes = {}) {
   const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
-  Object.entries(attributes).forEach(_ref => {
-    let [attr, value] = _ref;
+  Object.entries(attributes).forEach(([attr, value]) => {
     element.setAttribute(attr, value);
   });
   return element;
@@ -27,23 +26,18 @@ export function createSvgElement(tag) {
 export function splitTextIntoLines(text, maxChars) {
   // Removes the beginning or trailing spaces, newlines or tabs.
   const trimmedText = text.replace(/^\s+|\s+$/g, '');
-
   if (!text || trimmedText.length === 0 || maxChars <= 0) {
     return [];
   }
-
   const lines = [];
   const words = trimmedText.match(/\S+/g);
-
   while (words.length) {
     let newLineNeeded = false;
     let line = '';
     let word;
-
     while (!newLineNeeded && (word = words.shift())) {
       word = word.trim();
       const newLength = (line + word).length;
-
       if (word.length >= maxChars + 1) {
         // if a single word doesn't fit in a line
         const start = word.substring(0, maxChars - 1);
@@ -60,11 +54,9 @@ export function splitTextIntoLines(text, maxChars) {
         newLineNeeded = true;
       }
     }
-
     line = line.trim();
     lines.push(line);
   }
-
   return lines;
 }
 export const decode = input => new DOMParser().parseFromString(input, 'text/html').documentElement.textContent;

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,13 @@ export const shouldIgnoreClose = (target, editorId) => {
     return false;
   }
 };
-
 const elementTreeHasAttribute = (target, attribute, value) => {
   while (target) {
-    var _target, _target$attributes, _target$attributes$at, _target2;
-
-    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) {
+    // @ts-expect-error
+    if (target?.attributes?.[attribute]?.value === value) {
       return true;
     }
-
-    target = (_target2 = target) === null || _target2 === void 0 ? void 0 : _target2.parentElement;
+    target = target?.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;
 };
@@ -22,9 +23,7 @@ export const hasText = settings => {
   return settings.text.length > 0;
 };
 export const hasImage = settings => {
-  var _settings$imageSettin;
-
-  return ((_settings$imageSettin = settings.imageSettings) === null || _settings$imageSettin === void 0 ? void 0 : _settings$imageSettin.image.length) > 0;
+  return settings.imageSettings?.image.length > 0;
 };
 export const hasOutline = settings => {
   return settings.outlineSize !== 'none';

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