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

package/lib/translated/he/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/Course.test.js

@@ -21,6 +21,7 @@ import { render, fireEvent, waitFor } from '@testing-library/react';
 import Course from '../Course';
 import { actions } from '../../../../reducers/imageSection';
 import { useStoreProps } from '../../../../../shared/StoreContext';
+import { compressImage, shouldCompressImage, canCompressImage } from '../compressionUtils';
 const storeProps = {
   images: {
     Course: {
@@ -84,6 +85,11 @@ jest.mock('../../../../../shared/StoreContext', () => {
     useStoreProps: jest.fn()
   };
 });
+jest.mock('../compressionUtils', () => ({
+  shouldCompressImage: jest.fn().mockReturnValue(false),
+  compressImage: jest.fn().mockReturnValue(Promise.resolve('data:image/jpeg;base64,abcdefghijk==')),
+  canCompressImage: jest.fn().mockReturnValue(true)
+}));
 describe('Course()', () => {
   let props;
 
@@ -169,6 +175,95 @@ describe('Course()', () => {
       }));
     });
   });
+  describe('when a image to be compressed is clicked', () => {
+    let originalResponse;
+    beforeAll(() => {
+      const image = new Blob(['somedata'], {
+        type: 'image/jpeg',
+        size: 600000
+      });
+      fetchMock.mock('http://canvas.docker/files/722/download?download_frd=1', {
+        body: image,
+        sendAsJson: false
+      });
+      jest.spyOn(global, 'FileReader').mockImplementation(function () {
+        this.readAsDataURL = () => {
+          this.result = 'data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==';
+          this.onloadend();
+        };
+      });
+      originalResponse = global.Response;
+
+      global.Response = function () {
+        this.blob = () => {
+          return Promise.resolve('XXXXXXXX');
+        };
+      };
+
+      shouldCompressImage.mockReturnValue(true);
+    });
+    beforeEach(() => {
+      const {
+        getByTitle
+      } = subject(); // Click the first image
+
+      fireEvent.click(getByTitle('Click to embed image_one.png'));
+    });
+    afterAll(() => {
+      fetchMock.restore();
+      global.Response = originalResponse;
+    });
+    it('dispatches a "stop loading" action', () => {
+      expect(props.dispatch.mock.calls[0][0]).toEqual({
+        type: 'StopLoading'
+      });
+    });
+    it('dispatches a "set image name" action', () => {
+      expect(props.dispatch.mock.calls[1][0]).toEqual({
+        type: 'SetImageName',
+        payload: 'grid.png'
+      });
+    });
+    it('dispatches a "loading" action', () => {
+      expect(props.dispatch.mock.calls[2][0]).toEqual({
+        type: 'StartLoading'
+      });
+    });
+    it('compressImage() was called', async () => {
+      await waitFor(() => {
+        expect(compressImage).toHaveBeenCalledWith('data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==');
+      });
+    });
+    it('dispatches a "set compression status" action', async () => {
+      await waitFor(() => {
+        expect(props.dispatch).toHaveBeenCalledWith({
+          type: 'SetCompressionStatus',
+          payload: true
+        });
+      });
+    });
+    it('dispatches a "set image" action', async () => {
+      await waitFor(() => {
+        expect(props.dispatch).toHaveBeenCalledWith({
+          type: 'SetImage',
+          payload: 'data:image/jpeg;base64,abcdefghijk=='
+        });
+      });
+    });
+    it('dispatches a "open cropper" action', async () => {
+      await waitFor(() => {
+        expect(props.dispatch).toHaveBeenCalledWith({
+          type: 'SetCropperOpen',
+          payload: true
+        });
+      });
+    });
+    it('dispatches a "set image collection open" action', async () => {
+      await waitFor(() => expect(props.dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+        payload: false
+      }));
+    });
+  });
   describe('when loading state changes', () => {
     it('calls "onLoading"', () => {
       const onLoading = jest.fn();

package/lib/translated/he/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/Upload.test.js

@@ -30,6 +30,9 @@ jest.mock('../../../../../../../bridge', () => {
     }
   };
 });
+jest.mock('../compressionUtils', () => ({ ...jest.requireActual('../compressionUtils'),
+  compressImage: jest.fn().mockReturnValue(Promise.resolve('data:image/jpeg;base64,abcdefghijk=='))
+}));
 let props;
 
 const subject = () => render( /*#__PURE__*/React.createElement(Upload, props));
@@ -67,7 +70,9 @@ describe('Upload()', () => {
     const dispatch = jest.fn();
     const theFile = {
       preview: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEBCAMAAAD1kWivAAADAFBMVEWysrL5nCYYGBj7/+rceo3w1tD+yAfwFTPrIj36',
-      name: 'Test Image.png'
+      name: 'Test Image.png',
+      type: 'image/png',
+      size: 100000
     };
 
     const onSubmitCall = () => onSubmit(dispatch)({}, {}, {}, {
@@ -100,4 +105,56 @@ describe('Upload()', () => {
       });
     });
   });
+  describe('onSubmit() with an image to be compressed', () => {
+    const dispatch = jest.fn();
+    const theFile = {
+      preview: 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEBCAMAAAD1kWivAAADAFBMVEWysrL5nCYYGBj7/+rceo3w1tD+yAfwFTPrIj36',
+      name: 'Test Image.jpeg',
+      type: 'image/jpeg',
+      size: 600000
+    };
+
+    const onSubmitCall = () => onSubmit(dispatch)({}, {}, {}, {
+      theFile
+    });
+
+    const flushPromises = () => new Promise(setTimeout);
+
+    afterEach(() => jest.clearAllMocks());
+    it('sets the compression status', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_COMPRESSION_STATUS,
+        payload: true
+      });
+    });
+    it('sets the selected image', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE,
+        payload: 'data:image/jpeg;base64,abcdefghijk=='
+      });
+    });
+    it('sets the selected image name', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_NAME,
+        payload: 'Test Image.jpeg'
+      });
+    });
+    it('closes the collection', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+        payload: false
+      });
+    });
+    it('opens image cropper', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_CROPPER_OPEN,
+        payload: true
+      });
+    });
+  });
 });

package/lib/translated/he/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/compressionUtils.test.js

@@ -0,0 +1,114 @@
+/*
+ * 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 { shouldCompressImage, compressImage } from '../compressionUtils';
+jest.spyOn(global, 'FileReader').mockImplementation(function () {
+  this.readAsDataURL = () => {
+    this.result = 'data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==';
+    this.onloadend();
+  };
+});
+global.Image = class {
+  constructor() {
+    setTimeout(() => {
+      this.onload();
+    }, 100);
+  }
+
+};
+describe('shouldCompressImage()', () => {
+  describe('mime types', () => {
+    it('accepts jpeg images', () => {
+      expect(shouldCompressImage({
+        type: 'image/jpeg',
+        size: 600000
+      })).toBe(true);
+    });
+    it('accepts webp images', () => {
+      expect(shouldCompressImage({
+        type: 'image/webp',
+        size: 600000
+      })).toBe(true);
+    });
+    it('accepts bmp images', () => {
+      expect(shouldCompressImage({
+        type: 'image/bmp',
+        size: 600000
+      })).toBe(true);
+    });
+    it('accepts tiff images', () => {
+      expect(shouldCompressImage({
+        type: 'image/tiff',
+        size: 600000
+      })).toBe(true);
+    });
+    it("doesn't accept gif images", () => {
+      expect(shouldCompressImage({
+        type: 'image/gif',
+        size: 600000
+      })).toBe(false);
+    });
+    it("doesn't accept png images", () => {
+      expect(shouldCompressImage({
+        type: 'image/png',
+        size: 600000
+      })).toBe(false);
+    });
+    it("doesn't accept svg images", () => {
+      expect(shouldCompressImage({
+        type: 'image/svg+xml',
+        size: 600000
+      })).toBe(false);
+    });
+  });
+  describe('size', () => {
+    it('has greater size', () => {
+      expect(shouldCompressImage({
+        type: 'image/jpeg',
+        size: 600000
+      })).toBe(true);
+    });
+    it('has lower size', () => {
+      expect(shouldCompressImage({
+        type: 'image/jpeg',
+        size: 400000
+      })).toBe(false);
+    });
+  });
+});
+describe('compressImage()', () => {
+  beforeAll(() => {
+    const createElement = document.createElement.bind(document);
+
+    document.createElement = tagName => {
+      if (tagName === 'canvas') {
+        return {
+          getContext: () => ({
+            drawImage: jest.fn()
+          }),
+          toBlob: fn => fn('data:image/jpeg;base64,xxxxxxx==')
+        };
+      }
+
+      return createElement(tagName);
+    };
+  });
+  it('returns compressed blob image', async () => {
+    const result = await compressImage('data:image/jpeg;base64,abcdefhijk==');
+    expect(result).toEqual('data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==');
+  });
+});

package/lib/translated/he/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/he/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: "Text",
-    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/he/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/he/modules/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -35,7 +35,7 @@ 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?";
@@ -63,11 +63,12 @@ function renderHeader(title, settings, onKeyDown, isInvalid, onAlertDismissal, o
     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"
-  }, "\u05E1\u05D2\u05D9\u05E8\u05D4")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    "data-testid": "icon-maker-close-button",
+    screenReaderLabel: "\u05E1\u05D2\u05D9\u05E8\u05D4"
+  })))), /*#__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

package/lib/translated/he/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/he/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/he/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