@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/utils.test.js

@@ -0,0 +1,75 @@
+/*
+ * 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 { isAnUnsupportedGifPngImage } from '../utils';
+import { shouldCompressImage } from '../compressionUtils';
+describe('isAnUnsupportedGifPngImage()', () => {
+  it('returns true for a heavy GIF image', () => {
+    expect(isAnUnsupportedGifPngImage({
+      type: 'image/gif',
+      size: 300 * 1024
+    })).toBe(true);
+  });
+  it('returns true for a heavy PNG image', () => {
+    expect(isAnUnsupportedGifPngImage({
+      type: 'image/png',
+      size: 300 * 1024
+    })).toBe(true);
+  });
+  describe('returns false based on', () => {
+    describe('mime types', () => {
+      it('for jpeg images', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/jpeg',
+          size: 200 * 1024
+        })).toBe(false);
+      });
+      it('for webp images', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/webp',
+          size: 200 * 1024
+        })).toBe(false);
+      });
+      it('for bmp images', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/bmp',
+          size: 200 * 1024
+        })).toBe(false);
+      });
+      it('for tiff images', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/tiff',
+          size: 200 * 1024
+        })).toBe(false);
+      });
+    });
+    describe('size', () => {
+      it('for gif images with small size', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/gif',
+          size: 100 * 1024
+        })).toBe(false);
+      });
+      it('for png images with small size', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/png',
+          size: 100 * 1024
+        })).toBe(false);
+      });
+    });
+  });
+});

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/compressionUtils.js

@@ -0,0 +1,83 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * 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 { PREVIEW_HEIGHT, PREVIEW_WIDTH } from '../ImageCropper/constants';
+const DEFAULT_TARGET_QUALITY = 0.75;
+export const MAX_IMAGE_SIZE_BYTES = 500 * 1024;
+
+function blobToBase64(blob) {
+  return new Promise(resolve => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => resolve(reader.result);
+
+    reader.readAsDataURL(blob);
+  });
+}
+
+function drawImageOnCanvasElement(image, quality, resolve, reject) {
+  const {
+    width,
+    height
+  } = image;
+  let compressedImageWidth, compressedImageHeight;
+
+  if (width > PREVIEW_WIDTH || height > PREVIEW_HEIGHT) {
+    if (width > height) {
+      compressedImageWidth = PREVIEW_WIDTH;
+      compressedImageHeight = compressedImageWidth * (height / width);
+    } else if (height > width) {
+      compressedImageHeight = PREVIEW_HEIGHT;
+      compressedImageWidth = compressedImageHeight * (width / height);
+    } else {
+      compressedImageWidth = compressedImageHeight = PREVIEW_HEIGHT;
+    }
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = compressedImageWidth;
+  canvas.height = compressedImageHeight;
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(image, 0, 0, compressedImageWidth, compressedImageHeight);
+  canvas.toBlob(blob => blob ? resolve(blob) : reject(blob), 'image/jpeg', quality);
+}
+
+export function canCompressImage() {
+  // Some old browsers don't support toBlob
+  return Boolean(document.createElement('canvas').toBlob);
+}
+export function shouldCompressImage(_ref) {
+  var _context;
+
+  let {
+    type,
+    size
+  } = _ref;
+  return _includesInstanceProperty(_context = ['image/jpeg', 'image/webp', 'image/bmp', 'image/tiff']).call(_context, type) && size > MAX_IMAGE_SIZE_BYTES;
+}
+export function compressImage(encodedImage) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = encodedImage;
+
+    image.onload = function () {
+      drawImageOnCanvasElement(image, DEFAULT_TARGET_QUALITY, resolve, reject);
+    };
+  }).then(blob => blobToBase64(blob));
+}

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/utils.js

@@ -0,0 +1,29 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * 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 MAX_GIF_PNG_SIZE_BYTES = 250 * 1024;
+export const isAnUnsupportedGifPngImage = _ref => {
+  var _context;
+
+  let {
+    type,
+    size
+  } = _ref;
+  return _includesInstanceProperty(_context = ['image/gif', 'image/png']).call(_context, type) && size > MAX_GIF_PNG_SIZE_BYTES;
+};

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/TextSection.js

@@ -15,7 +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 React, { useEffect, useState } from 'react';
 import { Flex } from '@instructure/ui-flex';
 import { TextInput } from '@instructure/ui-text-input';
 import { SimpleSelect } from '@instructure/ui-simple-select';
@@ -23,22 +23,39 @@ import { ColorInput } from '../../../shared/ColorInput';
 import formatMessage from '../../../../../format-message';
 import { Group } from './Group';
 import { MAX_TOTAL_TEXT_CHARS } from '../../svg/constants';
-import useDebouncedValue from '../../utils/useDebouncedValue';
 const TEXT_SIZES = ['small', 'medium', 'large', 'x-large'];
 const TEXT_POSITIONS = ['middle', 'bottom-third', 'below'];
 
 const getTextSection = () => document.querySelector('#icons-tray-text-section');
 
+const processText = (oldValue, newValue) => {
+  let result = newValue;
+
+  if (newValue.length > MAX_TOTAL_TEXT_CHARS) {
+    if (oldValue.length >= MAX_TOTAL_TEXT_CHARS) {
+      // When typing chars
+      result = oldValue;
+    } else {
+      // When pasting text
+      result = result.substring(0, MAX_TOTAL_TEXT_CHARS);
+    }
+  }
+
+  return result;
+};
+
 export const TextSection = _ref => {
   let {
     settings,
     onChange
   } = _ref;
-  const [text, setText] = useDebouncedValue(settings.text, t => {
-    if (t.length <= MAX_TOTAL_TEXT_CHARS) onChange({
-      text: t
-    });
-  });
+  const [text, setText] = useState(settings.text);
+  useEffect(() => {
+    if (settings.text !== text) {
+      setText(processText(settings.text));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [settings.text]);
   return /*#__PURE__*/React.createElement(Group, {
     as: "section",
     defaultExpanded: true,
@@ -53,7 +70,16 @@ export const TextSection = _ref => {
   }, /*#__PURE__*/React.createElement(TextInput, {
     id: "icon-text",
     renderLabel: "Texto",
-    onChange: setText,
+    onChange: (e, value) => {
+      const processedText = processText(text, value);
+
+      if (processedText !== text) {
+        setText(processedText);
+        onChange({
+          text: processedText
+        });
+      }
+    },
     value: text,
     messages: [{
       text: `${text.length}/${MAX_TOTAL_TEXT_CHARS}`,

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/__tests__/TextSection.test.js

@@ -33,11 +33,13 @@ function selectOption(button, option) {
 describe('<TextSection />', () => {
   it('changes the icon text', async () => {
     const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(TextSection, {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(TextSection, {
       settings: DEFAULT_SETTINGS,
       onChange: onChange
     }));
-    const input = document.querySelector('#icon-text');
+    const input = container.querySelector('#icon-text');
     fireEvent.change(input, {
       target: {
         value: 'Hello World!'
@@ -47,6 +49,44 @@ describe('<TextSection />', () => {
       text: 'Hello World!'
     }));
   });
+  it("doesn't change the icon text when reaches the limit when typing", async () => {
+    const onChange = jest.fn();
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(TextSection, {
+      settings: { ...DEFAULT_SETTINGS,
+        text: 'Hello World!Hello World!Hello!12'
+      },
+      onChange: onChange
+    }));
+    const input = container.querySelector('#icon-text');
+    fireEvent.change(input, {
+      target: {
+        value: 'Hello World!Hello World!Hello!123'
+      }
+    });
+    await waitFor(() => expect(onChange).not.toHaveBeenCalled());
+  });
+  it("doesn't change the icon text when reaches the limit when pasting", async () => {
+    const onChange = jest.fn();
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(TextSection, {
+      settings: { ...DEFAULT_SETTINGS,
+        text: 'Hello World!'
+      },
+      onChange: onChange
+    }));
+    const input = container.querySelector('#icon-text');
+    fireEvent.change(input, {
+      target: {
+        value: 'Hello World!Hello World!Hello World!Hello World!Hello World!'
+      }
+    });
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith({
+      text: 'Hello World!Hello World!Hello Wo'
+    }));
+  });
   it('changes the icon text size', () => {
     const onChange = jest.fn();
     render( /*#__PURE__*/React.createElement(TextSection, {

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -28,46 +28,47 @@ import { CreateIconMakerForm } from './CreateIconMakerForm';
 import { Footer } from './CreateIconMakerForm/Footer';
 import { buildStylesheet, buildSvg } from '../svg';
 import { statuses, useSvgSettings } from '../svg/settings';
-import { defaultState } from '../reducers/svgSettings';
+import { defaultState, actions } from '../reducers/svgSettings';
 import { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR } from '../svg/constants';
 import { FixedContentTray } from '../../shared/FixedContentTray';
 import { useStoreProps } from '../../shared/StoreContext';
 import formatMessage from '../../../../format-message';
 import buildDownloadUrl from '../../shared/buildDownloadUrl';
 import { validIcon } from '../utils/iconValidation';
-import { hasChanges } from '../utils/iconMakerFormHasChanges';
+import { IconMakerFormHasChanges } from '../utils/IconMakerFormHasChanges';
 import bridge from '../../../../bridge';
 const INVALID_MESSAGE = "One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image";
 const UNSAVED_CHANGES_MESSAGE = "You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?";
 
-function renderHeader(title, settings, onKeyDown, isInvalid, onAlertDismissal, onClose) {
+function renderHeader(title, settings, onKeyDown, onAlertDismissal, onClose) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     background: "primary"
-  }, isInvalid && /*#__PURE__*/React.createElement(Alert, {
+  }, settings.error && /*#__PURE__*/React.createElement(Alert, {
     variant: "error",
     margin: "small",
     timeout: 10000,
     onDismiss: onAlertDismissal,
     renderCloseButtonLabel: "Close"
-  }, INVALID_MESSAGE), /*#__PURE__*/React.createElement(Flex, {
+  }, settings.error), /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "medium medium small"
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, title)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "static",
-    variant: "icon",
+    color: "primary",
     onClick: onClose,
     onKeyDown: onKeyDown,
-    "data-testid": "icon-maker-close-button"
-  }, "Fechar")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    "data-testid": "icon-maker-close-button",
+    screenReaderLabel: "Fechar"
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "div",
     padding: "small"
   }, /*#__PURE__*/React.createElement(Preview, {
@@ -111,8 +112,9 @@ function renderFooter(status, onClose, handleSubmit, editing, replaceAll, setRep
 
 const checkIfAnyUnsavedChanges = (initialSettings, currentSettings) => {
   let shouldCloseTray = true;
+  const imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
 
-  if (hasChanges(initialSettings, currentSettings)) {
+  if (imFormHasChanges.hasChanges()) {
     // RCE already uses browser's confirm dialog for unsaved changes
     // Its use here in the Icon Maker tray keeps that consistency
     // eslint-disable-next-line no-restricted-globals, no-alert
@@ -131,7 +133,6 @@ export function IconMakerTray(_ref) {
   } = _ref;
   const nameRef = useRef();
   const applyRef = useRef();
-  const [isInvalid, setIsInvalid] = useState(false);
   const [isOpen, setIsOpen] = useState(true);
   const [replaceAll, setReplaceAll] = useState(false);
   const title = editing ? "Editar \xCDcone" : "Criar \xCDcone";
@@ -175,7 +176,10 @@ export function IconMakerTray(_ref) {
   }, [settings.name]);
   useEffect(() => {
     if (validIcon(settings)) {
-      setIsInvalid(false);
+      dispatch({
+        type: actions.SET_ERROR,
+        payload: null
+      });
       setStatus(statuses.IDLE);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -188,7 +192,10 @@ export function IconMakerTray(_ref) {
     setStatus(statuses.LOADING);
 
     if (!validIcon(settings)) {
-      setIsInvalid(true);
+      dispatch({
+        type: actions.SET_ERROR,
+        payload: INVALID_MESSAGE
+      });
       setStatus(statuses.ERROR);
       return;
     }
@@ -275,14 +282,17 @@ export function IconMakerTray(_ref) {
     replaceInitialSettings(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsStatus]);
 
-  const handleAlertDismissal = () => setIsInvalid(false);
+  const handleAlertDismissal = () => dispatch({
+    type: actions.SET_ERROR,
+    payload: null
+  });
 
   return /*#__PURE__*/React.createElement(FixedContentTray, {
     title: title,
     isOpen: isOpen,
     onDismiss: onClose,
     onUnmount: onUnmount,
-    renderHeader: () => renderHeader(title, settings, onKeyDown, isInvalid, handleAlertDismissal, onClose),
+    renderHeader: () => renderHeader(title, settings, onKeyDown, handleAlertDismissal, onClose),
     renderBody: () => renderBody(settings, dispatch, editor, editing, !replaceAll, nameRef, rcsConfig, isLoading),
     renderFooter: () => renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef),
     bodyAs: "form",

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/components/__tests__/IconMakerTray.test.js

@@ -137,7 +137,7 @@ describe('RCE "Icon Maker" Plugin > IconMakerTray', () => {
       originalFocus = window.HTMLElement.prototype.focus;
     });
     beforeEach(() => {
-      window.HTMLElement.prototype.focus = jest.fn().mockImplementation(function (args) {
+      window.HTMLElement.prototype.focus = jest.fn().mockImplementation(function (_args) {
         focusedElement = this;
       });
     });
@@ -432,24 +432,20 @@ describe('RCE "Icon Maker" Plugin > IconMakerTray', () => {
     beforeEach(() => {
       fetchMock.mock('*', {
         body: `
-          <svg height="100" width="100">
-            <metadata>
-              {
-                "alt":"a test image",
-                "shape":"triangle",
-                "size":"large",
-                "color":"#FF2717",
-                "outlineColor":"#06A3B7",
-                "outlineSize":"small",
-                "text":"Some Text",
-                "textSize":"medium",
-                "textColor":"#009606",
-                "textBackgroundColor":"#E71F63",
-                "textPosition":"below"
-              }
-            </metadata>
-            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-          </svg>`
+          {
+            "name":"Test Icon.svg",
+            "alt":"a test image",
+            "shape":"triangle",
+            "size":"large",
+            "color":"#FF2717",
+            "outlineColor":"#06A3B7",
+            "outlineSize":"small",
+            "text":"Some Text",
+            "textSize":"medium",
+            "textColor":"#009606",
+            "textBackgroundColor":"#E71F63",
+            "textPosition":"below"
+          }`
       });
     });
     afterEach(() => {

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/reducers/imageCropper.js

@@ -24,7 +24,8 @@ export const actions = {
   SET_SCALE_RATIO: 'SetScaleRatio',
   SET_TRANSLATE_X: 'SetTranslateX',
   SET_TRANSLATE_Y: 'SetTranslateY',
-  UPDATE_SETTINGS: 'UpdateSettings'
+  UPDATE_SETTINGS: 'UpdateSettings',
+  RESET_SETTINGS: 'ResetSettings'
 };
 export const cropperSettingsReducer = (state, action) => {
   switch (action.type) {
@@ -63,6 +64,14 @@ export const cropperSettingsReducer = (state, action) => {
         ...action.payload
       };
 
+    case actions.RESET_SETTINGS:
+      return { ...state,
+        rotation: defaultState.rotation,
+        scaleRatio: defaultState.scaleRatio,
+        translateX: defaultState.translateX,
+        translateY: defaultState.translateY
+      };
+
     default:
       throw Error('Unknown action for image cropper reducer');
   }

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/reducers/imageSection.js

@@ -26,7 +26,8 @@ export const initialState = {
   loading: false,
   error: undefined,
   cropperOpen: false,
-  cropperSettings: null
+  cropperSettings: null,
+  compressed: false
 };
 export const actions = {
   RESET_ALL: {
@@ -38,6 +39,9 @@ export const actions = {
   SET_IMAGE_NAME: {
     type: 'SetImageName'
   },
+  SET_COMPRESSION_STATUS: {
+    type: 'SetCompressionStatus'
+  },
   CLEAR_IMAGE: {
     type: 'ClearImage'
   },
@@ -110,10 +114,16 @@ const imageSection = (state, action) => {
         imageName: action.payload
       };
 
+    case actions.SET_COMPRESSION_STATUS.type:
+      return { ...state,
+        compressed: action.payload
+      };
+
     case actions.CLEAR_IMAGE.type:
       return { ...state,
         image: '',
-        imageName: ''
+        imageName: '',
+        compressed: false
       };
 
     case actions.SET_ICON.type:

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/reducers/svgSettings.js

@@ -27,7 +27,8 @@ export const actions = {
   SET_TRANSLATE_X: 'SetTranslateX',
   SET_TRANSLATE_Y: 'SetTranslateY',
   SET_WIDTH: 'SetWidth',
-  SET_HEIGHT: 'SetHeight'
+  SET_HEIGHT: 'SetHeight',
+  SET_ERROR: 'SetError'
 };
 
 const buildTransformString = state => {
@@ -90,6 +91,11 @@ export const svgSettings = (state, action) => {
         height: action.payload
       };
 
+    case actions.SET_ERROR:
+      return { ...state,
+        error: action.payload
+      };
+
     case actions.SET_TRANSLATE_X:
       return nextStateForTransform(state, 'translateX', action.payload);
 

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/svg/__tests__/index.test.js

@@ -169,7 +169,7 @@ describe('buildSvg()', () => {
           </g>
         </svg>
         <path
-          d="M103,224 h14 a4,4 0 0 1 4,4 v16 a4,4 0 0 1 -4,4 h-14 a4,4 0 0 1 -4,-4 v-16 a4,4 0 0 1 4,-4 z"
+          d="M103,223 h14 a4,4 0 0 1 4,4 v16 a4,4 0 0 1 -4,4 h-14 a4,4 0 0 1 -4,-4 v-16 a4,4 0 0 1 4,-4 z"
           fill=""
         />
         <text

package/lib/translated/pt/modules/rce/plugins/instructure_icon_maker/svg/__tests__/metadata.test.js

@@ -40,6 +40,7 @@ describe('buildMetadata() / parseMetadata()', () => {
       externalStyle,
       externalWidth,
       externalHeight,
+      error,
       ...embeddedMetadata
     } = settings;
     expect(parseMetadata(svg)).toEqual(embeddedMetadata);