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

package/lib/rce/plugins/shared/ContentSelection.js

@@ -10,13 +10,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.asImageEmbed = asImageEmbed;
 exports.asLink = asLink;
 exports.asVideoElement = asVideoElement;
+exports.asAudioElement = asAudioElement;
 exports.getContentFromElement = getContentFromElement;
 exports.getContentFromEditor = getContentFromEditor;
 exports.getLinkContentFromEditor = getLinkContentFromEditor;
 exports.isFileLink = isFileLink;
 exports.isImageEmbed = isImageEmbed;
 exports.isVideoElement = isVideoElement;
-exports.findVideoPlayerIframe = findVideoPlayerIframe;
+exports.isAudioElement = isAudioElement;
+exports.findMediaPlayerIframe = findMediaPlayerIframe;
 exports.DISPLAY_AS_EMBED_DISABLED = exports.DISPLAY_AS_EMBED = exports.DISPLAY_AS_LINK = exports.NONE_TYPE = exports.TEXT_TYPE = exports.VIDEO_EMBED_TYPE = exports.IMAGE_EMBED_TYPE = exports.FILE_LINK_TYPE = exports.LINK_TYPE = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -27,6 +29,8 @@ var _contentInsertionUtils = require("../../contentInsertionUtils.js");
 
 var url = _interopRequireWildcard(require("url"));
 
+var _formatMessage = _interopRequireDefault(require("../../../format-message.js"));
+
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -126,7 +130,7 @@ function asLink($element, editor) {
 function asVideoElement($element) {
   var _$videoElem$parentEle;
 
-  const $videoElem = findVideoPlayerIframe($element);
+  const $videoElem = findMediaPlayerIframe($element);
 
   if (!isVideoElement($videoElem)) {
     return null;
@@ -139,6 +143,39 @@ function asVideoElement($element) {
   });
 }
 
+function asAudioElement($element) {
+  var _$element$parentEleme;
+
+  if (!$element) {
+    return null;
+  }
+
+  const $audioIframe = $element.tagName === 'IFRAME' ? $element : $element.firstElementChild;
+  const $tinymceIframeShim = $audioIframe.parentElement;
+  const title = ($audioIframe.getAttribute('title') || $tinymceIframeShim.getAttribute('data-mce-p-title') || '').replace((0, _formatMessage.default)('Video player for '), '');
+  const audioOptions = {
+    titleText: title,
+    id: ((_$element$parentEleme = $element.parentElement) === null || _$element$parentEleme === void 0 ? void 0 : _$element$parentEleme.getAttribute('data-mce-p-data-media-id')) || $element.getAttribute('data-mce-p-data-media-id')
+  };
+
+  if ($audioIframe.tagName === 'IFRAME') {
+    const audioDoc = $audioIframe.contentDocument;
+
+    try {
+      var _audioDoc$querySelect;
+
+      const trackSJson = (_audioDoc$querySelect = audioDoc.querySelector('[data-tracks]')) === null || _audioDoc$querySelect === void 0 ? void 0 : _audioDoc$querySelect.getAttribute('data-tracks');
+
+      if (trackSJson) {
+        audioOptions.tracks = JSON.parse(trackSJson);
+      } // eslint-disable-next-line no-empty
+
+    } catch (e) {}
+  }
+
+  return audioOptions;
+}
+
 function asText($element, editor) {
   const text = editor && editor.selection.getContent({
     format: 'text'
@@ -206,7 +243,7 @@ function isImageEmbed($element) {
   return !!asImageEmbed($element) && !$element.getAttribute('data-placeholder-for');
 }
 
-function isVideoElement($element) {
+function isMediaElement($element, mediaType) {
   var _tinymceIframeShim$fi;
 
   // the video is hosted in an iframe, but tinymce
@@ -228,15 +265,18 @@ function isVideoElement($element) {
   }
 
   const media_type = tinymceIframeShim.getAttribute('data-mce-p-data-media-type');
+  return media_type === mediaType;
+}
 
-  if (media_type !== 'video') {
-    return false;
-  }
+function isVideoElement($element) {
+  return isMediaElement($element, 'video');
+}
 
-  return true;
+function isAudioElement($element) {
+  return isMediaElement($element, 'audio');
 }
 
-function findVideoPlayerIframe(elem) {
+function findMediaPlayerIframe(elem) {
   var _elem$firstElementChi;
 
   if (elem.tagName === 'IFRAME') {

package/lib/rce/plugins/shared/DimensionsInput/index.js

@@ -25,6 +25,8 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiFlex = require("@instructure/ui-flex");
 
+var _uiRadioInput = require("@instructure/ui-radio-input");
+
 var _formatMessage = _interopRequireDefault(require("../../../../format-message.js"));
 
 var _DimensionInput = _interopRequireDefault(require("./DimensionInput.js"));
@@ -48,37 +50,84 @@ var _useDimensionsState = _interopRequireDefault(require("./useDimensionsState.j
  * 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/>.
  */
-function DimensionsInput(props) {
-  const dimensionsState = props.dimensionsState,
-        minHeight = props.minHeight,
-        minWidth = props.minWidth;
-  let messages = [{
+const getMessage = (dimensionsState, minWidth, minHeight, minPercentage) => {
+  let result = {
     text: (0, _formatMessage.default)('Aspect ratio will be preserved'),
     type: 'hint'
-  }];
+  };
 
-  if (!dimensionsState.isNumeric) {
-    messages = [{
+  if (dimensionsState.usePercentageUnits) {
+    if (!dimensionsState.isNumeric) {
+      result = {
+        text: (0, _formatMessage.default)('Percentage must be a number'),
+        type: 'error'
+      };
+    } else if (!dimensionsState.isAtLeastMinimums) {
+      result = {
+        text: (0, _formatMessage.default)('Must be at least {percentage}%', {
+          percentage: minPercentage
+        }),
+        type: 'error'
+      };
+    }
+  } else if (!dimensionsState.isNumeric) {
+    result = {
       text: (0, _formatMessage.default)('Width and height must be numbers'),
       type: 'error'
-    }];
+    };
   } else if (!dimensionsState.isAtLeastMinimums) {
-    messages = [{
+    result = {
       text: (0, _formatMessage.default)('Must be at least {width} x {height}px', {
         width: minWidth,
         height: minHeight
       }),
       type: 'error'
-    }];
+    };
   }
 
-  return /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+  return result;
+};
+
+function DimensionsInput(props) {
+  const dimensionsState = props.dimensionsState,
+        minHeight = props.minHeight,
+        minWidth = props.minWidth,
+        minPercentage = props.minPercentage;
+  const message = getMessage(dimensionsState, minWidth, minHeight, minPercentage);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    direction: "column"
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    padding: "small"
+  }, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInputGroup, {
+    "data-testid": "dimension-type",
+    name: "dimension-type",
+    description: (0, _formatMessage.default)('Dimension type'),
+    onChange: e => {
+      dimensionsState.setUsePercentageUnits(e.target.value === 'percentage');
+    },
+    value: dimensionsState.usePercentageUnits ? 'percentage' : 'pixels'
+  }, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+    label: (0, _formatMessage.default)('Pixels'),
+    value: "pixels"
+  }), /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+    label: (0, _formatMessage.default)('Percentage'),
+    value: "percentage"
+  })))), /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
     description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Dimensions')),
-    messages: messages
+    messages: [message]
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     alignItems: "start",
-    direction: "row"
-  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    direction: "row",
+    "data-testid": "input-number-container"
+  }, dimensionsState.usePercentageUnits ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    shouldShrink: true,
+    shouldGrow: true
+  }, /*#__PURE__*/_react.default.createElement(_DimensionInput.default, {
+    dimensionState: dimensionsState.percentageState,
+    label: (0, _formatMessage.default)('Percentage')
+  })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    padding: "x-small small"
+  }, "%")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
     shrink: true
   }, /*#__PURE__*/_react.default.createElement(_DimensionInput.default, {
     dimensionState: dimensionsState.widthState,
@@ -92,7 +141,7 @@ function DimensionsInput(props) {
     dimensionState: dimensionsState.heightState,
     label: (0, _formatMessage.default)('Height'),
     minValue: minHeight
-  }))));
+  }))))));
 }
 
 DimensionsInput.propTypes = {
@@ -103,12 +152,20 @@ DimensionsInput.propTypes = {
       setInputValue: _propTypes.func.isRequired
     }).isRequired,
     isNumeric: _propTypes.bool.isRequired,
+    usePercentageUnits: _propTypes.bool.isRequired,
+    setUsePercentageUnits: _propTypes.func.isRequired,
     widthState: (0, _propTypes.shape)({
       addOffset: _propTypes.func.isRequired,
       inputValue: _propTypes.string.isRequired,
       setInputValue: _propTypes.func.isRequired
+    }).isRequired,
+    percentageState: (0, _propTypes.shape)({
+      addOffset: _propTypes.func.isRequired,
+      inputValue: _propTypes.string.isRequired,
+      setInputValue: _propTypes.func.isRequired
     }).isRequired
   }),
   minHeight: _propTypes.number.isRequired,
-  minWidth: _propTypes.number.isRequired
+  minWidth: _propTypes.number.isRequired,
+  minPercentage: _propTypes.number.isRequired
 };

package/lib/rce/plugins/shared/DimensionsInput/useDimensionsState.js

@@ -56,20 +56,27 @@ function inputValueFor(initialNumber) {
 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 = (0, _react.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 = (0, _slicedToArray2.default)(_useState, 2),
         dimensions = _useState2[0],
@@ -77,11 +84,13 @@ 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: _DimensionUtils.scaleForHeight,
@@ -89,40 +98,66 @@ function useDimensionsState(initialDimensions, constraints) {
   };
 
   function updateDimensions(attributes) {
-    setDimensions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attributes), {}, {
+    setDimensions((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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)
     });
   }
 
@@ -163,15 +198,35 @@ 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((0, _objectSpread2.default)((0, _objectSpread2.default)({}, dimensions), {}, {
+        usePercentageUnits: value
+      }));
+    },
+    isValid: isAtLeastMinimums && isNumeric
   };
 }

package/lib/rce/plugins/shared/ImageOptionsForm.js

@@ -147,7 +147,8 @@ const ImageOptionsForm = ({
     dimensionsState: dimensionsState,
     disabled: displayAs !== 'embed',
     minHeight: _ImageEmbedOptions.MIN_HEIGHT,
-    minWidth: _ImageEmbedOptions.MIN_WIDTH
+    minWidth: _ImageEmbedOptions.MIN_WIDTH,
+    minPercentage: _ImageEmbedOptions.MIN_PERCENTAGE
   }))));
 };
 

package/lib/translated/ar/modules/defaultTinymceConfig.js

@@ -71,7 +71,7 @@ const defaultTinymceConfig = {
   // then edited.
   //
   // this list needs to be kept in sync with the list in gems/canvas_sanitize/lib/canvas_sanitize/canvas_sanitize.rb
-  valid_elements: '@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|role],a[rel|rev|charset|hreflang|tabindex|accesskey|type|name|href|target|title|class],strong/b,em/i,strike,u,#p,-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|src|border|alt|title|hspace|vspace|width|height|align|role],-sub,-sup,-blockquote[cite],-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width|height|src|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|valign|width],dfn,kbd,label[for],legend,q[cite],samp,small,tt,var,big,figure,figcaption,source[media|sizes|src|srcset|type],track,mark,article,aside,details,footer,header,nav,section,summary,time',
+  valid_elements: '@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|role],a[rel|rev|charset|hreflang|tabindex|accesskey|type|name|href|target|title|class],strong/b,em/i,strike,u,#p,-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|src|border|alt|title|hspace|vspace|width|height|align|role],-sub,-sup,-blockquote[cite],-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width|height|src|*],map[name],area[shape|coords|href|alt|target],bdo,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|valign|width],dfn,kbd,label[for],legend,q[cite],samp,small,tt,var,big,figure,figcaption,source[media|sizes|src|srcset|type],track,mark,article,aside,details,footer,header,nav,section,summary,time',
   extended_valid_elements: "@[id|accesskey|class|dir|lang|style|tabindex|title|contenteditable|contextmenu|draggable|dropzone|hidden|longdesc|spellcheck|translate|align|role|aria-labelledby|aria-atomic|aria-busy|aria-controls|aria-describedby|aria-disabled|aria-dropeffect|aria-flowto|aria-grabbed|aria-haspopup|aria-hidden|aria-invalid|aria-label|aria-labelledby|aria-live|aria-owns|aria-relevant|aria-autocomplete|aria-checked|aria-disabled|aria-expanded|aria-haspopup|aria-hidden|aria-invalid|aria-label|aria-level|aria-multiline|aria-multiselectable|aria-orientation|aria-pressed|aria-readonly|aria-required|aria-selected|aria-sort|aria-valuemax|aria-valuemin|aria-valuenow|aria-valuetext],iframe[id|data-media-type|title|src|width|height|name|align|style|class|sandbox|allowfullscreen|webkitallowfullscreen|mozallowfullscreen|allow],i[iclass],a[hidden|href|target|rel|media|hreflang|type|charset|name|rev|shape|coords|download|alt],#p,li[value],-ol[reversed|start|type|compact],pre[width],table[border|summary|width|frame|rules|cellspacing|cellpadding|bgcolor],tbody[char|charoff|valign],td[colspan|rowspan|headers|abbr|axis|scope|align|char|charoff|valign|nowrap|bgcolor|width|height],tfoot[char|charoff|valign],th[colspan|rowspan|headers|scope|abbr|axis|align|char|charoff|valign|nowrap|bgcolor|width|height],thead[char|charoff|valign],tr[char|charoff|valign|bgcolor],-ul[compact],video[name|src|allowfullscreen|muted|poster|width|height|controls|playsinline],audio[name|src|muted|controls],annotation[href|xref|definitionURL|encoding|cd|name|src],annotation-xml[href|xref|definitionURL|encoding|cd|name|src],maction[href|xref|mathcolor|mathbackground|actiontype|selection],maligngroup[href|xref|mathcolor|mathbackground|groupalign],malignmark[href|xref|mathcolor|mathbackground|edge],math[xmlns|href|xref|display|maxwidth|overflow|altimg|altimg-width|altimg-height|altimg-valign|alttext|cdgroup|mathcolor|mathbackground|scriptlevel|displaystyle|scriptsizemultiplier|scriptminsize|infixlinebreakstyle|decimalpoint|mathvariant|mathsize|width|height|valign|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast|depth|lquote|rquote|linethickness|munalign|denomalign|bevelled|voffset|open|close|separators|notation|subscriptshift|superscriptshift|accentunder|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|side|minlabelspacing|rowspan|columnspan|edge|stackalign|charalign|charspacing|longdivstyle|position|shift|location|crossout|length|leftoverhang|rightoverhang|mslinethickness|selection],menclose[href|xref|mathcolor|mathbackground|notation],merror[href|xref|mathcolor|mathbackground],mfenced[href|xref|mathcolor|mathbackground|open|close|separators],mfrac[href|xref|mathcolor|mathbackground|linethickness|munalign|denomalign|bevelled],mglyph[href|xref|mathcolor|mathbackground|src|alt|width|height|valign],mi[href|xref|mathcolor|mathbackground|mathvariant|mathsize],mlabeledtr[href|xref|mathcolor|mathbackground],mlongdiv[href|xref|mathcolor|mathbackground|longdivstyle|align|stackalign|charalign|charspacing],mmultiscripts[href|xref|mathcolor|mathbackground|subscriptshift|superscriptshift],mn[href|xref|mathcolor|mathbackground|mathvariant|mathsize],mo[href|xref|mathcolor|mathbackground|mathvariant|mathsize|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast],mover[href|xref|mathcolor|mathbackground|accent|align],mpadded[href|xref|mathcolor|mathbackground|height|depth|width|lspace|voffset],mphantom[href|xref|mathcolor|mathbackground],mprescripts[href|xref|mathcolor|mathbackground],mroot[href|xref|mathcolor|mathbackground],mrow[href|xref|mathcolor|mathbackground],ms[href|xref|mathcolor|mathbackground|mathvariant|mathsize|lquote|rquote],mscarries[href|xref|mathcolor|mathbackground|position|location|crossout|scriptsizemultiplier],mscarry[href|xref|mathcolor|mathbackground|location|crossout],msgroup[href|xref|mathcolor|mathbackground|position|shift],msline[href|xref|mathcolor|mathbackground|position|length|leftoverhang|rightoverhang|mslinethickness],mspace[href|xref|mathcolor|mathbackground|mathvariant|mathsize],msqrt[href|xref|mathcolor|mathbackground],msrow[href|xref|mathcolor|mathbackground|position],mstack[href|xref|mathcolor|mathbackground|align|stackalign|charalign|charspacing],mstyle[href|xref|mathcolor|mathbackground|scriptlevel|displaystyle|scriptsizemultiplier|scriptminsize|infixlinebreakstyle|decimalpoint|mathvariant|mathsize|width|height|valign|form|fence|separator|lspace|rspace|stretchy|symmetric|maxsize|minsize|largeop|movablelimits|accent|linebreak|lineleading|linebreakstyle|linebreakmultchar|indentalign|indentshift|indenttarget|indentalignfirst|indentshiftfirst|indentalignlast|indentshiftlast|depth|lquote|rquote|linethickness|munalign|denomalign|bevelled|voffset|open|close|separators|notation|subscriptshift|superscriptshift|accentunder|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|side|minlabelspacing|rowspan|columnspan|edge|stackalign|charalign|charspacing|longdivstyle|position|shift|location|crossout|length|leftoverhang|rightoverhang|mslinethickness|selection],msub[href|xref|mathcolor|mathbackground|subscriptshift],msubsup[href|xref|mathcolor|mathbackground|subscriptshift|superscriptshift],msup[href|xref|mathcolor|mathbackground|superscriptshift],mtable[href|xref|mathcolor|mathbackground|align|rowalign|columnalign|groupalign|alignmentscope|columnwidth|width|rowspacing|columnspacing|rowlines|columnlines|frame|framespacing|equalrows|equalcolumns|displaystyle|side|minlabelspacing],mtd[href|xref|mathcolor|mathbackground|rowspan|columnspan|rowalign|columnalign|groupalign],mtext[href|xref|mathcolor|mathbackground|mathvariant|mathsize|width|height|depth|linebreak],mtr[href|xref|mathcolor|mathbackground|rowalign|columnalign|groupalign],munder[href|xref|mathcolor|mathbackground|accentunder|align],munderover[href|xref|mathcolor|mathbackground|accent|accentunder|align],none[href|xref|mathcolor|mathbackground],semantics[href|xref|definitionURL|encoding],picture,ruby,rp,rt,svg[*],g[*],circle[*]",
   non_empty_elements: 'td th iframe video audio object script a i area base basefont br col frame hr img input isindex link meta param embed source wbr track ruby',
   // tiny's external link create/edit dialog config

package/lib/translated/ar/modules/rce/RCEWrapper.js

@@ -109,7 +109,7 @@ export const editorOptionsPropType = PropTypes.shape({
 // for an `import` style solution
 
 const styles = {
-  componentId: 'DlGWO',
+  componentId: 'dyzZI',
   template: function (theme) {
     return `
 
@@ -167,7 +167,7 @@ const styles = {
   }
 
 .tox .tox-button {
-    background-color: ${theme.canvasPrimaryButtonBackground || 'inherit'};
+    background-color: ${theme.canvasPrimaryButtonHoverBackground || 'inherit'};
     font-family: ${theme.canvasFontFamily || 'inherit'};
     font-weight: ${theme.canvasButtonFontWeight || 'inherit'};
     font-size: ${theme.canvasButtonFontSize || 'inherit'};

package/lib/translated/ar/modules/rce/editorLanguage.js

@@ -63,6 +63,7 @@ const mapping = {
   sr: 'sr',
   sl: 'sl',
   sv: 'sv_SE',
+  th: 'th',
   tr: 'tr_TR',
   'uk-UA': 'uk_UA',
   uk: 'uk_UA',

package/lib/translated/ar/modules/rce/normalizeLocale.js

@@ -44,7 +44,7 @@ const mapping = {
 }; // these are the recognized standard and custom locales. remember to extend
 // this list when support for a locale is added.
 
-const recognized = ['ar', 'bg', 'ca', 'cs', 'cy', 'da', 'da-x-k12', 'de', 'el', 'en', 'en-AU', 'en-AU-x-unimelb', 'en-GB', 'en-GB-x-lbs', 'en-GB-x-ukhe', 'es', 'es-ES', 'fa-IR', 'fi', 'fr', 'fr-CA', 'he', 'ht', 'hu', 'hy', 'is', 'it', 'ja', 'ko', 'mi', 'nb', 'nb-x-k12', 'nl', 'nn', 'pl', 'pt', 'pt-BR', 'ro', 'ru', 'sq', 'sr', 'sl', 'sv', 'sv-x-k12', 'tr', 'vi', 'zh-Hans', 'zh-Hant'];
+const recognized = ['ar', 'bg', 'ca', 'cs', 'cy', 'da', 'da-x-k12', 'de', 'el', 'en', 'en-AU', 'en-AU-x-unimelb', 'en-GB', 'en-GB-x-lbs', 'en-GB-x-ukhe', 'es', 'es-ES', 'fa-IR', 'fi', 'fr', 'fr-CA', 'he', 'ht', 'hu', 'hy', 'is', 'it', 'ja', 'ko', 'mi', 'nb', 'nb-x-k12', 'nl', 'nn', 'pl', 'pt', 'pt-BR', 'ro', 'ru', 'sq', 'sr', 'sl', 'sv', 'sv-x-k12', 'th', 'tr', 'vi', 'zh-Hans', 'zh-Hant'];
 export default function normalizeLocale(locale) {
   if (!locale) {
     // default to english

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageCropper/ImageCropper.js

@@ -31,6 +31,12 @@ const SHAPE_OPTIONS = [{
 }, {
   id: 'triangle',
   label: "\u0645\u062B\u0644\u062B"
+}, {
+  id: 'diamond',
+  label: "\u0645\u0639\u064A\u0651\u0646"
+}, {
+  id: 'pentagon',
+  label: "\u062E\u0645\u0627\u0633\u064A"
 }, {
   id: 'hexagon',
   label: "\u0633\u062F\u0627\u0633\u064A"

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageCropper/svg/__tests__/shape.test.js

@@ -42,12 +42,21 @@ describe('buildShape()', () => {
       />
     `);
   });
-  it('builds a triangle', () => {
+  it('builds a diamond', () => {
     expect(buildShapeMask({
-      shape: 'triangle'
+      shape: 'diamond'
     })).toMatchInlineSnapshot(`
       <path
-        d="M175 0L350 350H0L175 0Z"
+        d="M175 0L350 175L175 350L0 175L175 0Z"
+      />
+    `);
+  });
+  it('builds a pentagon', () => {
+    expect(buildShapeMask({
+      shape: 'pentagon'
+    })).toMatchInlineSnapshot(`
+      <path
+        d="M175 0L350 136.71L295.15999999999997 350H54.84L0 136.71L175 0L175 0Z"
       />
     `);
   });
@@ -74,7 +83,7 @@ describe('buildShape()', () => {
       shape: 'star'
     })).toMatchInlineSnapshot(`
       <path
-        d="M175 0L215.01 136.71H350L237.27 211.47L295.15999999999997 350L175 257.04L54.84 350L112.72999999999999 211.47L0 136.71H134.99L175 0L175 0Z"
+        d="M175 0L215.01 136.71H350L237.27 211.47L295.15999999999997 350L175 257.04L54.84 350L112.72999999999999 211.47L0 136.71H134.99L175 0Z"
       />
     `);
   });

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageCropper/svg/shape.js

@@ -31,6 +31,12 @@ export function buildShapeMask({
     case 'triangle':
       return buildTriangle();
 
+    case 'diamond':
+      return buildDiamond();
+
+    case 'pentagon':
+      return buildPentagon();
+
     case 'hexagon':
       return buildHexagon();
 
@@ -70,6 +76,21 @@ function buildTriangle() {
   });
 }
 
+function buildDiamond() {
+  return createSvgElement('path', {
+    d: `M${SHAPE_CONTAINER_LENGTH / 2} 0L${SHAPE_CONTAINER_LENGTH} ${SHAPE_CONTAINER_LENGTH / 2}L${SHAPE_CONTAINER_LENGTH / 2} ${SHAPE_CONTAINER_LENGTH}L0 ${SHAPE_CONTAINER_LENGTH / 2}L${SHAPE_CONTAINER_LENGTH / 2} 0Z`
+  });
+}
+
+function buildPentagon() {
+  const half = round(SHAPE_CONTAINER_LENGTH / 2, 2);
+  const alpha = round(0.3906 * SHAPE_CONTAINER_LENGTH, 2);
+  const beta = round(0.3433 * SHAPE_CONTAINER_LENGTH, 2);
+  return createSvgElement('path', {
+    d: `M${half} 0L${SHAPE_CONTAINER_LENGTH} ${alpha}L${half + beta} ${SHAPE_CONTAINER_LENGTH}H${half - beta}L0 ${alpha}L${half} 0L${half} 0Z`
+  });
+}
+
 function buildHexagon() {
   const leg = round(0.2895 * SHAPE_CONTAINER_LENGTH, 2);
   return createSvgElement('path', {
@@ -94,6 +115,6 @@ function buildStar() {
   const zeta = round(0.3433 * SHAPE_CONTAINER_LENGTH, 2);
   const eta = round(0.7344 * SHAPE_CONTAINER_LENGTH, 2);
   return createSvgElement('path', {
-    d: `M${half} 0L${half + alpha} ${beta}H${SHAPE_CONTAINER_LENGTH}L${half + gamma} ${delta}L${half + zeta} ${SHAPE_CONTAINER_LENGTH}L${half} ${eta}L${half - zeta} ${SHAPE_CONTAINER_LENGTH}L${half - gamma} ${delta}L0 ${beta}H${half - alpha}L${half} 0L${half} 0Z`
+    d: `M${half} 0L${half + alpha} ${beta}H${SHAPE_CONTAINER_LENGTH}L${half + gamma} ${delta}L${half + zeta} ${SHAPE_CONTAINER_LENGTH}L${half} ${eta}L${half - zeta} ${SHAPE_CONTAINER_LENGTH}L${half - gamma} ${delta}L0 ${beta}H${half - alpha}L${half} 0Z`
   });
 }

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ShapeSection.js

@@ -19,7 +19,7 @@ import React from 'react';
 import { Flex } from '@instructure/ui-flex';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import formatMessage from "../../../../../format-message.js";
-const SHAPES = ['square', 'circle', 'triangle', 'hexagon', 'octagon', 'star'];
+const SHAPES = ['square', 'circle', 'triangle', 'diamond', 'pentagon', 'hexagon', 'octagon', 'star'];
 const SIZES = ['x-small', 'small', 'medium', 'large'];
 export const ShapeSection = ({
   settings,
@@ -62,6 +62,8 @@ const SHAPE_DESCRIPTION = {
   square: "\u0645\u0631\u0628\u0639",
   circle: "\u0627\u0644\u062F\u0627\u0626\u0631\u0629",
   triangle: "\u0645\u062B\u0644\u062B",
+  diamond: "\u0645\u0639\u064A\u0651\u0646",
+  pentagon: "\u062E\u0645\u0627\u0633\u064A",
   hexagon: "\u0633\u062F\u0627\u0633\u064A",
   octagon: "\u062B\u0645\u0627\u0646\u064A",
   star: "\u0646\u062C\u0645\u0629"