@instructure/canvas-rce 5.1.2-alpha.7 → 5.2.0

package/lib/translated/ht/modules/rce/plugins/shared/DimensionsInput/useDimensionsState.js

@@ -45,20 +45,27 @@ function inputValueFor(initialNumber) {
 export default function useDimensionsState(initialDimensions, constraints) {
   const appliedHeight = initialDimensions.appliedHeight,
         appliedWidth = initialDimensions.appliedWidth,
+        appliedPercentage = initialDimensions.appliedPercentage,
         naturalHeight = initialDimensions.naturalHeight,
-        naturalWidth = initialDimensions.naturalWidth;
+        naturalWidth = initialDimensions.naturalWidth,
+        usePercentageUnits = initialDimensions.usePercentageUnits;
   const minHeight = constraints.minHeight,
-        minWidth = constraints.minWidth;
+        minWidth = constraints.minWidth,
+        minPercentage = constraints.minPercentage;
   const initialNumericValues = {
-    height: appliedHeight || naturalHeight,
-    width: appliedWidth || naturalWidth
+    height: usePercentageUnits ? naturalHeight : appliedHeight || naturalHeight,
+    width: usePercentageUnits ? naturalWidth : appliedWidth || naturalWidth,
+    percentage: appliedPercentage || 100
   };
 
   const _useState = useState({
+    usePercentageUnits,
     inputHeight: inputValueFor(initialNumericValues.height),
     inputWidth: inputValueFor(initialNumericValues.width),
+    inputPercentage: inputValueFor(initialNumericValues.percentage),
     numericHeight: initialNumericValues.height,
-    numericWidth: initialNumericValues.width
+    numericWidth: initialNumericValues.width,
+    numericPercentage: initialNumericValues.percentage
   }),
         _useState2 = _slicedToArray(_useState, 2),
         dimensions = _useState2[0],
@@ -66,11 +73,13 @@ export default function useDimensionsState(initialDimensions, constraints) {
 
   const currentNumericValues = {
     height: dimensions.numericHeight,
-    width: dimensions.numericWidth
+    width: dimensions.numericWidth,
+    percentage: dimensions.numericPercentage
   };
   const dimensionMinimums = {
     height: minHeight,
-    width: minWidth
+    width: minWidth,
+    percentage: minPercentage
   };
   const dimensionScaleFns = {
     height: scaleForHeight,
@@ -78,40 +87,66 @@ export default function useDimensionsState(initialDimensions, constraints) {
   };
 
   function updateDimensions(attributes) {
-    setDimensions(_objectSpread(_objectSpread({}, attributes), {}, {
+    setDimensions(_objectSpread(_objectSpread(_objectSpread({}, dimensions), attributes), {}, {
       numericHeight: normalizedNumber(attributes.numericHeight),
-      numericWidth: normalizedNumber(attributes.numericWidth)
+      numericWidth: normalizedNumber(attributes.numericWidth),
+      numericPercentage: normalizedNumber(attributes.numericPercentage)
     }));
   }
 
-  function setNumericDimension(dimensionName, number) {
-    const scaleFn = dimensionScaleFns[dimensionName];
+  function scaleDimensions(dimensionName, number, scaleConstraints) {
+    let width, height, percentage;
+
+    if (dimensionName === 'percentage') {
+      width = naturalWidth;
+      height = naturalHeight;
+      percentage = number;
+    } else {
+      const scaleFn = dimensionScaleFns[dimensionName];
+      const scaledDimensions = scaleFn(naturalWidth, naturalHeight, number, scaleConstraints);
+      width = scaledDimensions.width;
+      height = scaledDimensions.height;
+      percentage = initialNumericValues.percentage;
+    }
 
-    const _scaleFn = scaleFn(naturalWidth, naturalHeight, number, constraints),
-          height = _scaleFn.height,
-          width = _scaleFn.width;
+    return {
+      width,
+      height,
+      percentage
+    };
+  }
+
+  function setNumericDimension(dimensionName, number) {
+    const _scaleDimensions = scaleDimensions(dimensionName, number, constraints),
+          height = _scaleDimensions.height,
+          width = _scaleDimensions.width,
+          percentage = _scaleDimensions.percentage;
 
     updateDimensions({
       numericHeight: height,
       numericWidth: width,
+      numericPercentage: percentage,
       inputHeight: inputValueFor(height),
-      inputWidth: inputValueFor(width)
+      inputWidth: inputValueFor(width),
+      inputPercentage: inputValueFor(percentage)
     });
   }
 
   function setDimensionValue(dimensionName, value) {
-    const scaleFn = dimensionScaleFns[dimensionName];
     const number = parseAsInteger(value);
 
-    const _scaleFn2 = scaleFn(naturalWidth, naturalHeight, number),
-          height = _scaleFn2.height,
-          width = _scaleFn2.width;
+    const _scaleDimensions2 = scaleDimensions(dimensionName, number),
+          height = _scaleDimensions2.height,
+          width = _scaleDimensions2.width,
+          percentage = _scaleDimensions2.percentage;
 
     updateDimensions({
       numericHeight: height,
       numericWidth: width,
+      numericPercentage: percentage,
       inputHeight: dimensionName === 'height' ? value : inputValueFor(height),
-      inputWidth: dimensionName === 'width' ? value : inputValueFor(width)
+      inputWidth: dimensionName === 'width' ? value : inputValueFor(width),
+      inputPercentage: dimensionName === 'percentage' ? value : inputValueFor(percentage)
     });
   }
 
@@ -152,15 +187,35 @@ export default function useDimensionsState(initialDimensions, constraints) {
     }
 
   };
-  const isNumeric = [dimensions.numericHeight, dimensions.numericWidth].every(Number.isFinite);
-  const isAtLeastMinimums = dimensions.numericHeight >= minHeight && dimensions.numericWidth >= minWidth;
+  const percentageState = {
+    inputValue: dimensions.inputPercentage,
+
+    addOffset(offset) {
+      offsetDimension('percentage', offset);
+    },
+
+    setInputValue(value) {
+      setDimensionValue('percentage', value);
+    }
+
+  };
+  const isNumeric = dimensions.usePercentageUnits ? Number.isFinite(dimensions.numericPercentage) : [dimensions.numericHeight, dimensions.numericWidth].every(Number.isFinite);
+  const isAtLeastMinimums = dimensions.usePercentageUnits ? dimensions.numericPercentage >= minPercentage : dimensions.numericHeight >= minHeight && dimensions.numericWidth >= minWidth;
   return {
-    height: dimensions.numericHeight,
+    widthState,
     heightState,
+    percentageState,
     isAtLeastMinimums,
     isNumeric,
-    isValid: isAtLeastMinimums && isNumeric,
     width: dimensions.numericWidth,
-    widthState
+    height: dimensions.numericHeight,
+    percentage: dimensions.numericPercentage,
+    usePercentageUnits: dimensions.usePercentageUnits,
+    setUsePercentageUnits: value => {
+      setDimensions(_objectSpread(_objectSpread({}, dimensions), {}, {
+        usePercentageUnits: value
+      }));
+    },
+    isValid: isAtLeastMinimums && isNumeric
   };
 }

package/lib/translated/ht/modules/rce/plugins/shared/ImageOptionsForm.js

@@ -26,7 +26,7 @@ import { IconQuestionLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Tooltip } from '@instructure/ui-tooltip';
-import { CUSTOM, MIN_HEIGHT, MIN_WIDTH, imageSizes, labelForImageSize } from "../instructure_image/ImageEmbedOptions.js";
+import { CUSTOM, MIN_HEIGHT, MIN_WIDTH, MIN_PERCENTAGE, imageSizes, labelForImageSize } from "../instructure_image/ImageEmbedOptions.js";
 import formatMessage from "../../../format-message.js";
 import DimensionsInput from "./DimensionsInput/index.js";
 
@@ -122,7 +122,8 @@ const ImageOptionsForm = ({
     dimensionsState: dimensionsState,
     disabled: displayAs !== 'embed',
     minHeight: MIN_HEIGHT,
-    minWidth: MIN_WIDTH
+    minWidth: MIN_WIDTH,
+    minPercentage: MIN_PERCENTAGE
   }))));
 };
 

package/lib/translated/ht/modules/rce/plugins/shared/__tests__/ContentSelection.test.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 { LINK_TYPE, FILE_LINK_TYPE, IMAGE_EMBED_TYPE, NONE_TYPE, TEXT_TYPE, getContentFromEditor, getContentFromElement, getLinkContentFromEditor, isFileLink, isImageEmbed, isVideoElement, findVideoPlayerIframe } from "../ContentSelection.js";
+import { LINK_TYPE, FILE_LINK_TYPE, IMAGE_EMBED_TYPE, NONE_TYPE, TEXT_TYPE, getContentFromEditor, getContentFromElement, getLinkContentFromEditor, isFileLink, isImageEmbed, isVideoElement, isAudioElement, findMediaPlayerIframe } from "../ContentSelection.js";
 import FakeEditor from "./FakeEditor.js";
 describe('RCE > Plugins > Shared > Content Selection', () => {
   let $container;
@@ -228,27 +228,27 @@ describe('RCE > Plugins > Shared > Content Selection', () => {
       expect(content.type).toEqual(LINK_TYPE);
     });
   });
-  describe('findVideoPlayerIframe', () => {
-    let wrapper, videoIframe, shim;
+  describe('findMediaPlayerIframe', () => {
+    let wrapper, mediaIframe, shim;
     beforeEach(() => {
       wrapper = document.createElement('span');
-      videoIframe = document.createElement('iframe');
+      mediaIframe = document.createElement('iframe');
       shim = document.createElement('span');
       shim.setAttribute('class', 'mce-shim');
-      wrapper.appendChild(videoIframe);
+      wrapper.appendChild(mediaIframe);
       wrapper.appendChild(shim);
     });
     it('returns the iframe if given the video iframe', () => {
-      const result = findVideoPlayerIframe(videoIframe);
-      expect(result).toEqual(videoIframe);
+      const result = findMediaPlayerIframe(mediaIframe);
+      expect(result).toEqual(mediaIframe);
     });
     it('returns the iframe if given the tinymce wrapper span', () => {
-      const result = findVideoPlayerIframe(wrapper);
-      expect(result).toEqual(videoIframe);
+      const result = findMediaPlayerIframe(wrapper);
+      expect(result).toEqual(mediaIframe);
     });
     it('returns the iframe if given the shim', () => {
-      const result = findVideoPlayerIframe(shim);
-      expect(result).toEqual(videoIframe);
+      const result = findMediaPlayerIframe(shim);
+      expect(result).toEqual(mediaIframe);
     });
   });
   describe('predicates', () => {
@@ -259,6 +259,7 @@ describe('RCE > Plugins > Shared > Content Selection', () => {
       expect(isFileLink($selectedNode, editor)).toBeTruthy();
       expect(isImageEmbed($selectedNode)).toBeFalsy();
       expect(isVideoElement($selectedNode)).toBeFalsy();
+      expect(isAudioElement($selectedNode)).toBeFalsy();
     });
     it('detect an embeded image', () => {
       const $selectedNode = document.createElement('img');
@@ -267,6 +268,7 @@ describe('RCE > Plugins > Shared > Content Selection', () => {
       expect(isFileLink($selectedNode, editor)).toBeFalsy();
       expect(isImageEmbed($selectedNode)).toBeTruthy();
       expect(isVideoElement($selectedNode)).toBeFalsy();
+      expect(isAudioElement($selectedNode)).toBeFalsy();
     });
     it('detect a video element', () => {
       const $selectedNode = document.createElement('span');
@@ -277,6 +279,18 @@ describe('RCE > Plugins > Shared > Content Selection', () => {
       expect(isFileLink($selectedNode, editor)).toBeFalsy();
       expect(isImageEmbed($selectedNode)).toBeFalsy();
       expect(isVideoElement($selectedNode)).toBeTruthy();
+      expect(isAudioElement($selectedNode)).toBeFalsy();
+    });
+    it('detect an audio element', () => {
+      const $selectedNode = document.createElement('span');
+      $selectedNode.setAttribute('data-mce-p-data-media-id', 'm-id');
+      $selectedNode.setAttribute('data-mce-p-data-media-type', 'audio');
+      $selectedNode.innerHTML = '<iframe/>';
+      editor.setSelectedNode($selectedNode);
+      expect(isFileLink($selectedNode, editor)).toBeFalsy();
+      expect(isImageEmbed($selectedNode)).toBeFalsy();
+      expect(isVideoElement($selectedNode)).toBeFalsy();
+      expect(isAudioElement($selectedNode)).toBeTruthy();
     });
     it('ignore some random markup', () => {
       const $selectedNode = document.createElement('div');
@@ -285,6 +299,7 @@ describe('RCE > Plugins > Shared > Content Selection', () => {
       expect(isFileLink($selectedNode, editor)).toBeFalsy();
       expect(isImageEmbed($selectedNode)).toBeFalsy();
       expect(isVideoElement($selectedNode)).toBeFalsy();
+      expect(isAudioElement($selectedNode)).toBeFalsy();
     });
   });
 });

package/lib/translated/ht/modules/translations/locales/ar.js

@@ -279,6 +279,12 @@ const locale = {
   "details_98a31b68": {
     "message": "التفاصيل"
   },
+  "diamond_b8dfe7ae": {
+    "message": "معيّن"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "نوع البعد"
+  },
   "dimensions_45ddb7b7": {
     "message": "الأبعاد"
   },
@@ -591,6 +597,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "صورة متعددة الألوان"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "يجب أن يكون { percentage }% على الأقل"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "يجب أن تكون { width } x { height } بكسل على الأقل."
   },
@@ -657,9 +666,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "الفقرة"
   },
+  "pentagon_17d82ea3": {
+    "message": "خماسي"
+  },
   "people_b4ebb13c": {
     "message": "أشخاص"
   },
+  "percentage_34ab7c2c": {
+    "message": "نسبة مئوية"
+  },
+  "pixels_52ece7d1": {
+    "message": "بكسل"
+  },
   "posted_when_a578f5ab": {
     "message": "المنشور: { when }"
   },

package/lib/translated/ht/modules/translations/locales/ca.js

@@ -279,6 +279,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Detalls"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diamant"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Tipus de dimensió"
+  },
   "dimensions_45ddb7b7": {
     "message": "Mides"
   },
@@ -591,6 +597,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Imatge multicolor"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Ha de ser un { percentage }% com a mínim"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Ha de ser de { width } × { height }píxels com a mínim"
   },
@@ -657,9 +666,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paràgraf"
   },
+  "pentagon_17d82ea3": {
+    "message": "Pentàgon"
+  },
   "people_b4ebb13c": {
     "message": "Persones"
   },
+  "percentage_34ab7c2c": {
+    "message": "Percentatge"
+  },
+  "pixels_52ece7d1": {
+    "message": "Píxels"
+  },
   "posted_when_a578f5ab": {
     "message": "Publicat: { when }"
   },

package/lib/translated/ht/modules/translations/locales/cy.js

@@ -279,6 +279,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Manylion"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diemwnt"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Math o ddimensiwn"
+  },
   "dimensions_45ddb7b7": {
     "message": "Dimensiynau"
   },
@@ -591,6 +597,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Delwedd mwy nag un lliw"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Yn gorfod bod yn { percentage }% o leiaf"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Yn gorfod bod o leiaf { width } x { height }px"
   },
@@ -657,9 +666,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paragraff"
   },
+  "pentagon_17d82ea3": {
+    "message": "Pentagon"
+  },
   "people_b4ebb13c": {
     "message": "Pobl"
   },
+  "percentage_34ab7c2c": {
+    "message": "Canran"
+  },
+  "pixels_52ece7d1": {
+    "message": "Picseli"
+  },
   "posted_when_a578f5ab": {
     "message": "Wedi postio: { when }"
   },

package/lib/translated/ht/modules/translations/locales/da-x-k12.js

@@ -279,6 +279,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Nærmere oplysninger"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diamant"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Dimensionstype"
+  },
   "dimensions_45ddb7b7": {
     "message": "Dimensioner"
   },
@@ -570,6 +576,9 @@ const locale = {
   "loading_please_wait_d276220a": {
     "message": "Indlæser, vent venligst"
   },
+  "loading_preview_9f077aa1": {
+    "message": "Indlæser forhåndsvisning"
+  },
   "locked_762f138b": {
     "message": "Låst"
   },
@@ -591,6 +600,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Billede i flere farver"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Skal være mindst { percentage }%"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Skal være mindst { width } x { height } px"
   },
@@ -657,9 +669,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paragraf"
   },
+  "pentagon_17d82ea3": {
+    "message": "Femkant"
+  },
   "people_b4ebb13c": {
     "message": "Deltagere"
   },
+  "percentage_34ab7c2c": {
+    "message": "Procentdel"
+  },
+  "pixels_52ece7d1": {
+    "message": "Pixels"
+  },
   "posted_when_a578f5ab": {
     "message": "Slået op: { when }"
   },

package/lib/translated/ht/modules/translations/locales/da.js

@@ -279,6 +279,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Nærmere oplysninger"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diamant"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Dimensionstype"
+  },
   "dimensions_45ddb7b7": {
     "message": "Dimensioner"
   },
@@ -591,6 +597,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Billede i flere farver"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Skal være mindst { percentage }%"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Skal være mindst { width } x { height } px"
   },
@@ -657,9 +666,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paragraf"
   },
+  "pentagon_17d82ea3": {
+    "message": "Femkant"
+  },
   "people_b4ebb13c": {
     "message": "Deltagere"
   },
+  "percentage_34ab7c2c": {
+    "message": "Procentdel"
+  },
+  "pixels_52ece7d1": {
+    "message": "Pixels"
+  },
   "posted_when_a578f5ab": {
     "message": "Slået op: { when }"
   },

package/lib/translated/ht/modules/translations/locales/de.js

@@ -279,6 +279,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Details"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diamond"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Dimensionstyp"
+  },
   "dimensions_45ddb7b7": {
     "message": "Abmessungen"
   },
@@ -591,6 +597,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Mehrfarbiges Bild"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Mindestens { percentage }%"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Mindestgröße ist { width } x { height } px."
   },
@@ -657,9 +666,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Absatz"
   },
+  "pentagon_17d82ea3": {
+    "message": "Pentagon"
+  },
   "people_b4ebb13c": {
     "message": "Teilnehmer"
   },
+  "percentage_34ab7c2c": {
+    "message": "Prozentsatz"
+  },
+  "pixels_52ece7d1": {
+    "message": "Pixel"
+  },
   "posted_when_a578f5ab": {
     "message": "Gepostet am: { when }"
   },

package/lib/translated/ht/modules/translations/locales/el.js

@@ -240,6 +240,9 @@ const locale = {
   "people_b4ebb13c": {
     "message": "Κοινό"
   },
+  "percentage_34ab7c2c": {
+    "message": "Εκατοστιαία αναλογία"
+  },
   "preview_53003fd2": {
     "message": "Προεπισκόπηση"
   },

package/lib/translated/ht/modules/translations/locales/en-AU-x-unimelb.js

@@ -279,6 +279,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Details"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diamond"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Dimension type"
+  },
   "dimensions_45ddb7b7": {
     "message": "Dimensions"
   },
@@ -591,6 +597,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Multi Colour Image"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Must be at least { percentage }%"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Must be at least { width } x { height }px"
   },
@@ -657,9 +666,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paragraph"
   },
+  "pentagon_17d82ea3": {
+    "message": "Pentagon"
+  },
   "people_b4ebb13c": {
     "message": "People"
   },
+  "percentage_34ab7c2c": {
+    "message": "Percentage"
+  },
+  "pixels_52ece7d1": {
+    "message": "Pixels"
+  },
   "posted_when_a578f5ab": {
     "message": "Posted: { when }"
   },

package/lib/translated/ht/modules/translations/locales/en-GB-x-ukhe.js

@@ -279,6 +279,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Details"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diamond"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Dimension type"
+  },
   "dimensions_45ddb7b7": {
     "message": "Dimensions"
   },
@@ -591,6 +597,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Multi Colour Image"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Must be at least { percentage }%"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Must be at least { width } x { height }px"
   },
@@ -657,9 +666,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paragraph"
   },
+  "pentagon_17d82ea3": {
+    "message": "Pentagon"
+  },
   "people_b4ebb13c": {
     "message": "People"
   },
+  "percentage_34ab7c2c": {
+    "message": "Percentage"
+  },
+  "pixels_52ece7d1": {
+    "message": "Pixels"
+  },
   "posted_when_a578f5ab": {
     "message": "Posted: { when }"
   },