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

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/svg/__tests__/text.test.js

@@ -276,68 +276,158 @@ describe('buildText()', () => {
     });
   });
   describe('builds <text /> when text position', () => {
-    it('is middle', () => {
-      expect(buildText({ ...settings,
-        textPosition: 'below'
-      })).toMatchInlineSnapshot(`
-        <text
-          fill="#000000"
-          font-family="Lato Extended"
-          font-size="14"
-          font-weight="bold"
-          x="55"
-          y="144"
-        >
-          <tspan
-            dy="0"
+    describe('is middle', () => {
+      it('and it is a single line text', () => {
+        expect(buildText({ ...settings,
+          textPosition: 'middle'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
             x="55"
+            y="67"
           >
-            Hello World!
-          </tspan>
-        </text>
-      `);
+            <tspan
+              dy="0"
+              x="55"
+            >
+              Hello World!
+            </tspan>
+          </text>
+        `);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildText({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'middle'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
+            x="48"
+            y="60"
+          >
+            <tspan
+              dy="0"
+              x="48"
+            >
+              Hello World! Hello World!
+            </tspan>
+            <tspan
+              dy="14"
+              x="59"
+            >
+              Bye!
+            </tspan>
+          </text>
+        `);
+      });
     });
-    it('is bottom-third', () => {
-      expect(buildText({ ...settings,
-        textPosition: 'bottom-third'
-      })).toMatchInlineSnapshot(`
-        <text
-          fill="#000000"
-          font-family="Lato Extended"
-          font-size="14"
-          font-weight="bold"
-          x="55"
-          y="125"
-        >
-          <tspan
-            dy="0"
+    describe('is bottom-third', () => {
+      it('and it is a single line text', () => {
+        expect(buildText({ ...settings,
+          textPosition: 'bottom-third'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
             x="55"
+            y="121"
           >
-            Hello World!
-          </tspan>
-        </text>
-      `);
+            <tspan
+              dy="0"
+              x="55"
+            >
+              Hello World!
+            </tspan>
+          </text>
+        `);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildText({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'bottom-third'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
+            x="48"
+            y="114"
+          >
+            <tspan
+              dy="0"
+              x="48"
+            >
+              Hello World! Hello World!
+            </tspan>
+            <tspan
+              dy="14"
+              x="59"
+            >
+              Bye!
+            </tspan>
+          </text>
+        `);
+      });
     });
-    it('is below', () => {
-      expect(buildText({ ...settings,
-        textPosition: 'below'
-      })).toMatchInlineSnapshot(`
-        <text
-          fill="#000000"
-          font-family="Lato Extended"
-          font-size="14"
-          font-weight="bold"
-          x="55"
-          y="144"
-        >
-          <tspan
-            dy="0"
+    describe('is below', () => {
+      it('and it is a single line text', () => {
+        expect(buildText({ ...settings,
+          textPosition: 'below'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
             x="55"
+            y="144"
           >
-            Hello World!
-          </tspan>
-        </text>
-      `);
+            <tspan
+              dy="0"
+              x="55"
+            >
+              Hello World!
+            </tspan>
+          </text>
+        `);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildText({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'below'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
+            x="48"
+            y="144"
+          >
+            <tspan
+              dy="0"
+              x="48"
+            >
+              Hello World! Hello World!
+            </tspan>
+            <tspan
+              dy="14"
+              x="59"
+            >
+              Bye!
+            </tspan>
+          </text>
+        `);
+      });
     });
   });
 });
@@ -350,7 +440,7 @@ describe('buildTextBackground()', () => {
       text: 'Hello World!'
     })).toMatchInlineSnapshot(`
       <path
-        d="M55,128 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="M55,127 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=""
       />
     `);
@@ -365,6 +455,62 @@ describe('buildTextBackground()', () => {
       text: '  '
     })).toBeNull();
   });
+  describe('builds <path /> when text position', () => {
+    describe('is middle', () => {
+      it('and it is a single line text', () => {
+        expect(buildTextBackground({ ...settings,
+          textPosition: 'middle'
+        })).toMatchInlineSnapshot(`null`);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildTextBackground({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'middle'
+        })).toMatchInlineSnapshot(`
+          <path
+            d="M48,43 h27 a4,4 0 0 1 4,4 v30 a4,4 0 0 1 -4,4 h-27 a4,4 0 0 1 -4,-4 v-30 a4,4 0 0 1 4,-4 z"
+            fill=""
+          />
+        `);
+      });
+    });
+    describe('is bottom-third', () => {
+      it('and it is a single line text', () => {
+        expect(buildTextBackground({ ...settings,
+          textPosition: 'bottom-third'
+        })).toMatchInlineSnapshot(`null`);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildTextBackground({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'bottom-third'
+        })).toMatchInlineSnapshot(`
+          <path
+            d="M48,97 h27 a4,4 0 0 1 4,4 v30 a4,4 0 0 1 -4,4 h-27 a4,4 0 0 1 -4,-4 v-30 a4,4 0 0 1 4,-4 z"
+            fill=""
+          />
+        `);
+      });
+    });
+    describe('is below', () => {
+      it('and it is a single line text', () => {
+        expect(buildTextBackground({ ...settings,
+          textPosition: 'below'
+        })).toMatchInlineSnapshot(`null`);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildTextBackground({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'below'
+        })).toMatchInlineSnapshot(`
+          <path
+            d="M48,127 h27 a4,4 0 0 1 4,4 v30 a4,4 0 0 1 -4,4 h-27 a4,4 0 0 1 -4,-4 v-30 a4,4 0 0 1 4,-4 z"
+            fill=""
+          />
+        `);
+      });
+    });
+  });
 });
 describe('getContainerWidth()', () => {
   beforeEach(() => {

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/svg/__tests__/utils.test.js

@@ -38,16 +38,49 @@ describe('splitTextIntoLines()', () => {
     expect(splitTextIntoLines('Incomprehensibility is a long word!', 10)).toStrictEqual(['Incompreh-', 'ensibility', 'is a long', 'word!']);
   });
   it('does not count beginning or trailing whitespace when computing lines', () => {
-    const text = ' some text         ';
-    const expectedLinesCount = 1;
+    const text = ' icon maker rocks !       ';
     const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
-    expect(lines.length).toBe(expectedLinesCount);
+    expect(lines).toStrictEqual(['icon maker rocks !']);
   });
   it('returns empty array when text is whitespace only', () => {
     const text = '';
     const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
     expect(lines).toStrictEqual([]);
   });
+  describe('ignores consecutive', () => {
+    it('whitespaces', () => {
+      const text = 'icon  maker   rocks !';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+    it('tabs', () => {
+      const text = 'icon\t\tmaker\t\t\trocks\t!';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+    it('line breaks', () => {
+      const text = 'icon\n\nmaker\n\n\nrocks\n!';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+  });
+  describe('beginning or trailing', () => {
+    it('whitespaces', () => {
+      const text = '  icon maker rocks ! ';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+    it('tabs', () => {
+      const text = '\ticon maker rocks !\t';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+    it('line breaks', () => {
+      const text = '\nicon maker rocks !\n';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+  });
 });
 describe('convertFileToBase64()', () => {
   it('executes readAsDataURL with correct arguments', async () => {

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/svg/constants.js

@@ -84,6 +84,12 @@ export const TEXT_SIZE = {
   [Size.Large]: 22,
   [Size.ExtraLarge]: 28
 };
+export const TEXT_SIZE_FONT_DIFF = {
+  [Size.Small]: -1,
+  [Size.Medium]: 0,
+  [Size.Large]: 1,
+  [Size.ExtraLarge]: 2
+};
 export const MAX_CHAR_COUNT = {
   [Size.Small]: 21,
   [Size.Medium]: 18,

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/svg/settings.js

@@ -18,7 +18,6 @@
 import { useState, useEffect, useReducer } from 'react';
 import { svgSettings as svgSettingsReducer, defaultState } from '../reducers/svgSettings';
 import { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR, SVG_XML_TYPE } from './constants';
-import RceApiSource from '../../../../rcs/api';
 import { modes } from '../reducers/imageSection';
 import iconsLabels from '../utils/iconsLabels';
 export const statuses = {
@@ -50,17 +49,9 @@ const getImageNode = (editor, editing) => {
   return iconMaker;
 };
 
-const buildFilesUrl = (fileId, rcsConfig) => {
-  // http://canvas.docker/files/2169/download?download_frd=1&icon_maker_icon=1
-  const downloadURL = new URL(`${rcsConfig.canvasUrl}/files/${fileId}/download`); // Adding the Course ID to the request causes Canvas to follow the chain
-  // of files that were uploaded and "replaced" previous versions of the file.
-
-  downloadURL.searchParams.append('replacement_chain_context_type', 'course');
-  downloadURL.searchParams.append('replacement_chain_context_id', rcsConfig.contextId); // Prevent the browser from using an old cached SVGs
-
-  downloadURL.searchParams.append('ts', Date.now()); // Yes, we want do download for real dude
-
-  downloadURL.searchParams.append('download_frd', 1);
+const buildMetadataUrl = (fileId, rcsConfig) => {
+  // http://canvas.docker/api/v1/files/2169/icon_metadata
+  const downloadURL = new URL(`${rcsConfig.canvasUrl}/api/v1/files/${fileId}/icon_metadata`);
   return downloadURL.toString();
 };
 
@@ -78,26 +69,19 @@ export function useSvgSettings(editor, editing, rcsConfig) {
       if (!urlFromNode) return;
 
       try {
-        var _urlFromNode$split$, _svg$querySelector;
+        var _urlFromNode$split$;
 
         setStatus(statuses.LOADING); // Parse out the file ID from something like
         // /courses/1/files/3/preview?...
 
         const fileId = (_urlFromNode$split$ = urlFromNode.split('files/')[1]) === null || _urlFromNode$split$ === void 0 ? void 0 : _urlFromNode$split$.split('/')[0];
-        const downloadUrl = buildFilesUrl(fileId, rcsConfig); // Parse SVG. If no SVG found, return defaults
+        const downloadUrl = buildMetadataUrl(fileId, rcsConfig); // Download icon metadata. If no metadata found, return defaults
 
-        const svg = await svgFromUrl(downloadUrl);
-        if (!svg) return; // Parse metadata. If no metadata found, return defaults
-
-        const metadata = (_svg$querySelector = svg.querySelector('metadata')) === null || _svg$querySelector === void 0 ? void 0 : _svg$querySelector.innerHTML;
+        const response = await fetch(downloadUrl);
+        const metadata = await response.text();
         if (!metadata) return;
-        const rcs = new RceApiSource(rcsConfig);
-        const fileData = await rcs.getFile(fileId, {
-          replacement_chain_context_type: rcsConfig.contextType,
-          replacement_chain_context_id: rcsConfig.contextId
-        });
-        const fileName = fileData.name.replace(/\.[^\.]+$/, '');
         const metadataJson = JSON.parse(metadata);
+        const fileName = metadataJson.name.replace(/\.[^\.]+$/, '');
         metadataJson.name = fileName;
         metadataJson.originalName = fileName;
 
@@ -131,11 +115,6 @@ export function useSvgSettings(editor, editing, rcsConfig) {
   }, [editor, editing, urlFromNode, rcsConfig, altText, customWidth, customHeight, customStyle]);
   return [settings, status, dispatch];
 }
-export async function svgFromUrl(url) {
-  const response = await fetch(url);
-  const data = await response.text();
-  return new DOMParser().parseFromString(data, SVG_XML_TYPE);
-}
 
 function processMetadataForBackwardCompatibility(metadataJson) {
   var _metadataJson$imageSe, _metadataJson$imageSe2;