@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/instructure_icon_maker/svg/text.js

@@ -1,468 +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 { 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;
-  if (!text.trim()) return null;
-  const lines = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]);
-  const textElement = createSvgElement('text', {
-    x: Math.max(TEXT_BACKGROUND_PADDING, Math.floor(getTextXValue(text, textSize, size))),
-    y: getTextYValue(textPosition, textSize, shape, size, lines.length),
-    fill: textColor || '',
-    'font-family': 'Lato Extended',
-    'font-size': TEXT_SIZE[textSize],
-    'font-weight': 'bold'
-  });
-  const containerWidth = getContainerWidth({
-    text,
-    textSize,
-    size
-  });
-  lines.forEach((line, index) => {
-    const subtextWidth = getTextWidth(line, textSize);
-    const subtext = createSvgElement('tspan', {
-      x: Math.max(TEXT_BACKGROUND_PADDING, Math.floor((containerWidth - subtextWidth) * 0.5)),
-      dy: index === 0 ? 0 : TEXT_SIZE[textSize]
-    });
-    subtext.textContent = line;
-    textElement.appendChild(subtext);
-  });
-  return textElement;
-}
-export function buildTextBackground(_ref2) {
-  let {
-    text,
-    textPosition,
-    textSize,
-    textBackgroundColor,
-    shape,
-    size
-  } = _ref2;
-  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 textHeight = getTextHeight(linesCount + 1, textSize);
-  const paddingSize = TEXT_BACKGROUND_PADDING * 2;
-  const pathElement = createSvgElement('path');
-  const radius = 4;
-  const fontWeight = 2;
-  const initialX = Math.max(0, Math.floor(xValue - TEXT_BACKGROUND_PADDING)) + radius;
-  const initialY = Math.floor(yValue - TEXT_SIZE[textSize] + TEXT_SIZE_FONT_DIFF[textSize] - TEXT_BACKGROUND_PADDING / 2);
-  const horizontalLineLength = Math.floor(textWidth + paddingSize + fontWeight) - radius * 2;
-  const verticalLineLength = Math.floor(textHeight + paddingSize + fontWeight) - radius * 2;
-  const d = `M${initialX},${initialY} h${horizontalLineLength} a${radius},${radius} 0 0 1 ${radius},${radius} v${verticalLineLength} a${radius},${radius} 0 0 1 ${-radius},${radius} h${-horizontalLineLength} a${radius},${radius} 0 0 1 ${-radius},${-radius} v${-verticalLineLength} a${radius},${radius} 0 0 1 ${radius},${-radius} z`;
-  pathElement.setAttribute('d', d);
-  pathElement.setAttribute('fill', textBackgroundColor || '');
-  return pathElement;
-}
-export function getContainerWidth(_ref3) {
-  let {
-    text,
-    textSize,
-    size
-  } = _ref3;
-  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;
-  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');
-  context.font = `${TEXT_SIZE[textSize]}px "Lato Extended"`;
-  const lines = splitTextIntoLines(text, MAX_CHAR_COUNT[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,
-    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 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 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:
-    case Shape.Circle:
-    case Shape.Triangle:
-    case Shape.Diamond:
-    case Shape.Pentagon:
-    case Shape.Hexagon:
-    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/lib/rce/plugins/instructure_icon_maker/svg/utils.js

@@ -1,70 +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/>.
- */
-export function createSvgElement(tag) {
-  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
-  Object.entries(attributes).forEach(_ref => {
-    let [attr, value] = _ref;
-    element.setAttribute(attr, value);
-  });
-  return element;
-}
-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);
-        const end = word.substring(maxChars - 1);
-        line += start + '-';
-        words.unshift(end);
-        newLineNeeded = line.length >= maxChars;
-      } else if (newLength) {
-        // if a new word can be added in current line
-        line += word.trim() + ' ';
-        newLineNeeded = line.length >= maxChars;
-      } else {
-        // if a new word can't be added in current line
-        newLineNeeded = true;
-      }
-    }
-
-    line = line.trim();
-    lines.push(line);
-  }
-
-  return lines;
-}
-export const decode = input => new DOMParser().parseFromString(input, 'text/html').documentElement.textContent;

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

@@ -1,45 +0,0 @@
-// @ts-nocheck
-
-/*
- * 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/>.
- */
-export const ICON_MAKER_ADD_IMAGE_MENU_ID = 'AddImageMenu';
-export const shouldIgnoreClose = (target, editorId) => {
-  try {
-    if (editorId) {
-      return elementTreeHasAttribute(target, 'data-position-content', ICON_MAKER_ADD_IMAGE_MENU_ID) || elementTreeHasAttribute(target, 'data-id', editorId);
-    } else {
-      return elementTreeHasAttribute(target, 'data-position-content', ICON_MAKER_ADD_IMAGE_MENU_ID);
-    }
-  } catch (e) {
-    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) {
-      return true;
-    }
-
-    target = (_target2 = target) === null || _target2 === void 0 ? void 0 : _target2.parentElement;
-  }
-
-  return false;
-};

package/lib/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.js

@@ -1,83 +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 _ from 'lodash';
-export class IconMakerFormHasChanges {
-  constructor(initSettings, currSettings) {
-    this.initialSettings = void 0;
-    this.currentSettings = void 0;
-    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/lib/rce/plugins/instructure_icon_maker/utils/addIconMakerAttributes.js

@@ -1,28 +0,0 @@
-// @ts-nocheck
-
-/*
- * 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 { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR } from '../svg/constants';
-import buildDownloadUrl from '../../shared/buildDownloadUrl';
-
-const addIconMakerAttributes = imageAttributes => {
-  imageAttributes[ICON_MAKER_ATTRIBUTE] = true;
-  imageAttributes[ICON_MAKER_DOWNLOAD_URL_ATTR] = buildDownloadUrl(imageAttributes.src);
-};
-
-export default addIconMakerAttributes;