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

package/DEVELOPMENT.md

@@ -83,7 +83,7 @@ specification.
 
 Translations for TinyMCE are not shipped with the `tinymce` npm package. When
 upgrading to a new version be sure to download the latest language packs. Visit
-https://www.tinymce.com/download/language-packages/ and select all languages. It
+<https://www.tiny.cloud/get-tiny/language-packages/> and select all languages. It
 is easier to just download all and only commit the changes to existing files
 than try to only select the locales currently used. Download the file and
 extract all of th `.js` files to `./src/translations/tinymce/`.

package/canvas/lib/defaultTinymceConfig.js

@@ -78,7 +78,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/canvas/lib/rce/RCEWrapper.js

@@ -166,7 +166,7 @@ const editorOptionsPropType = _propTypes.default.shape({
 
 exports.editorOptionsPropType = editorOptionsPropType;
 const styles = {
-  componentId: 'DlGWO',
+  componentId: 'dyzZI',
   template: function (theme) {
     return `
 
@@ -224,7 +224,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/canvas/lib/rce/editorLanguage.js

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

package/canvas/lib/rce/normalizeLocale.js

@@ -51,7 +51,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'];
 
 function normalizeLocale(locale) {
   if (!locale) {

package/canvas/lib/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageCropper/ImageCropper.js

@@ -47,6 +47,12 @@ const SHAPE_OPTIONS = [{
 }, {
   id: 'triangle',
   label: (0, _formatMessage.default)('Triangle')
+}, {
+  id: 'diamond',
+  label: (0, _formatMessage.default)('Diamond')
+}, {
+  id: 'pentagon',
+  label: (0, _formatMessage.default)('Pentagon')
 }, {
   id: 'hexagon',
   label: (0, _formatMessage.default)('Hexagon')

package/canvas/lib/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageCropper/svg/shape.js

@@ -43,6 +43,12 @@ function buildShapeMask({
     case 'triangle':
       return buildTriangle();
 
+    case 'diamond':
+      return buildDiamond();
+
+    case 'pentagon':
+      return buildPentagon();
+
     case 'hexagon':
       return buildHexagon();
 
@@ -82,6 +88,21 @@ function buildTriangle() {
   });
 }
 
+function buildDiamond() {
+  return (0, _utils.createSvgElement)('path', {
+    d: `M${_constants.SHAPE_CONTAINER_LENGTH / 2} 0L${_constants.SHAPE_CONTAINER_LENGTH} ${_constants.SHAPE_CONTAINER_LENGTH / 2}L${_constants.SHAPE_CONTAINER_LENGTH / 2} ${_constants.SHAPE_CONTAINER_LENGTH}L0 ${_constants.SHAPE_CONTAINER_LENGTH / 2}L${_constants.SHAPE_CONTAINER_LENGTH / 2} 0Z`
+  });
+}
+
+function buildPentagon() {
+  const half = (0, _round.default)(_constants.SHAPE_CONTAINER_LENGTH / 2, 2);
+  const alpha = (0, _round.default)(0.3906 * _constants.SHAPE_CONTAINER_LENGTH, 2);
+  const beta = (0, _round.default)(0.3433 * _constants.SHAPE_CONTAINER_LENGTH, 2);
+  return (0, _utils.createSvgElement)('path', {
+    d: `M${half} 0L${_constants.SHAPE_CONTAINER_LENGTH} ${alpha}L${half + beta} ${_constants.SHAPE_CONTAINER_LENGTH}H${half - beta}L0 ${alpha}L${half} 0L${half} 0Z`
+  });
+}
+
 function buildHexagon() {
   const leg = (0, _round.default)(0.2895 * _constants.SHAPE_CONTAINER_LENGTH, 2);
   return (0, _utils.createSvgElement)('path', {
@@ -106,6 +127,6 @@ function buildStar() {
   const zeta = (0, _round.default)(0.3433 * _constants.SHAPE_CONTAINER_LENGTH, 2);
   const eta = (0, _round.default)(0.7344 * _constants.SHAPE_CONTAINER_LENGTH, 2);
   return (0, _utils.createSvgElement)('path', {
-    d: `M${half} 0L${half + alpha} ${beta}H${_constants.SHAPE_CONTAINER_LENGTH}L${half + gamma} ${delta}L${half + zeta} ${_constants.SHAPE_CONTAINER_LENGTH}L${half} ${eta}L${half - zeta} ${_constants.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${_constants.SHAPE_CONTAINER_LENGTH}L${half + gamma} ${delta}L${half + zeta} ${_constants.SHAPE_CONTAINER_LENGTH}L${half} ${eta}L${half - zeta} ${_constants.SHAPE_CONTAINER_LENGTH}L${half - gamma} ${delta}L0 ${beta}H${half - alpha}L${half} 0Z`
   });
 }

package/canvas/lib/rce/plugins/instructure_buttons/components/CreateButtonForm/ShapeSection.js

@@ -32,7 +32,7 @@ var _formatMessage = _interopRequireDefault(require("../../../../../format-messa
  * 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/>.
  */
-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'];
 
 const ShapeSection = ({
@@ -78,6 +78,8 @@ const SHAPE_DESCRIPTION = {
   square: (0, _formatMessage.default)('Square'),
   circle: (0, _formatMessage.default)('Circle'),
   triangle: (0, _formatMessage.default)('Triangle'),
+  diamond: (0, _formatMessage.default)('Diamond'),
+  pentagon: (0, _formatMessage.default)('Pentagon'),
   hexagon: (0, _formatMessage.default)('Hexagon'),
   octagon: (0, _formatMessage.default)('Octagon'),
   star: (0, _formatMessage.default)('Star')

package/canvas/lib/rce/plugins/instructure_buttons/svg/shape.js

@@ -38,6 +38,12 @@ function buildShape({
     case 'triangle':
       return buildTriangle(size);
 
+    case 'diamond':
+      return buildDiamond(size);
+
+    case 'pentagon':
+      return buildPentagon(size);
+
     case 'hexagon':
       return buildHexagon(size);
 
@@ -153,6 +159,60 @@ function buildTriangle(size) {
   }
 }
 
+function buildDiamond(size) {
+  switch (size) {
+    case 'x-small':
+      return (0, _utils.createSvgElement)('path', {
+        d: 'M33 4L66 33L33 66L4 33L33 4Z'
+      });
+
+    case 'small':
+      return (0, _utils.createSvgElement)('path', {
+        d: 'M57 4L114 57L57 114L4 57L57 4Z'
+      });
+
+    case 'medium':
+      return (0, _utils.createSvgElement)('path', {
+        d: 'M75 4L150 75L75 150L4 75L75 4Z'
+      });
+
+    case 'large':
+      return (0, _utils.createSvgElement)('path', {
+        d: 'M105 4L210 105L105 210L4 105L105 4Z'
+      });
+
+    default:
+      throw new Error(`Invalid size: ${size}`);
+  }
+}
+
+function buildPentagon(size) {
+  switch (size) {
+    case 'x-small':
+      return (0, _utils.createSvgElement)('path', {
+        d: 'M37.0623 14L61 32.75L53.5195 62H21.1039L13 32.75L37.0623 14Z'
+      });
+
+    case 'small':
+      return (0, _utils.createSvgElement)('path', {
+        d: 'M61.1247 13L109 50.5L94.039 109H29.2078L13 50.5L61.1247 13Z'
+      });
+
+    case 'medium':
+      return (0, _utils.createSvgElement)('path', {
+        d: 'M79.1714 13L145 64.56L124.429 145H35.285L13 64.5625L79.1714 13Z'
+      });
+
+    case 'large':
+      return (0, _utils.createSvgElement)('path', {
+        d: 'M109.249 13L205 88L175.078 205H45.4156L13 88L109.249 13Z'
+      });
+
+    default:
+      throw new Error(`Invalid size: ${size}`);
+  }
+}
+
 function buildHexagon(size) {
   switch (size) {
     case 'x-small':

package/canvas/lib/rce/plugins/instructure_buttons/svg/text.js

@@ -214,6 +214,8 @@ function getYMiddleTextForShape(getYTextSizeCallback, shape, size) {
     case 'square':
     case 'circle':
     case 'triangle':
+    case 'diamond':
+    case 'pentagon':
     case 'hexagon':
     case 'octagon':
     case 'star':

package/canvas/lib/rce/plugins/instructure_image/ImageEmbedOptions.js

@@ -11,7 +11,7 @@ exports.scaleImageForHeight = scaleImageForHeight;
 exports.scaleImageForWidth = scaleImageForWidth;
 exports.scaleToSize = scaleToSize;
 exports.labelForImageSize = labelForImageSize;
-exports.videoSizes = exports.imageSizes = exports.CUSTOM = exports.EXTRA_LARGE = exports.LARGE = exports.MEDIUM = exports.SMALL = exports.MIN_WIDTH_VIDEO = exports.MIN_WIDTH = exports.MIN_HEIGHT = void 0;
+exports.videoSizes = exports.imageSizes = exports.CUSTOM = exports.EXTRA_LARGE = exports.LARGE = exports.MEDIUM = exports.SMALL = exports.MIN_PERCENTAGE = exports.MIN_WIDTH_VIDEO = exports.MIN_WIDTH = exports.MIN_HEIGHT = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -42,6 +42,8 @@ const MIN_WIDTH = 10;
 exports.MIN_WIDTH = 10;
 const MIN_WIDTH_VIDEO = 320;
 exports.MIN_WIDTH_VIDEO = 320;
+const MIN_PERCENTAGE = 10;
+exports.MIN_PERCENTAGE = 10;
 const SMALL = 'small';
 exports.SMALL = "small";
 const MEDIUM = 'medium';
@@ -79,15 +81,27 @@ function imageSizeFromKnownOptions(imageOptions) {
   return sizeByMaximumDimension[largestDimension] || CUSTOM;
 }
 
+function getPercentageUnitsFromAttributes($element) {
+  const getAttribute = attribute => $element.hasAttribute(attribute) ? $element.getAttribute(attribute) : $element[attribute];
+
+  const widthValue = getAttribute('width');
+  const heightValue = getAttribute('height');
+  const value = [widthValue, heightValue].find(v => /\d+(?:\.\d+)?%/.test(v));
+  return value ? Math.round(Number.parseInt(value, 10)) : null;
+}
+
 function fromImageEmbed($element) {
   const altText = $element.getAttribute('alt');
+  const percentageUnits = getPercentageUnitsFromAttributes($element);
   const imageOptions = {
-    altText: altText || '',
-    appliedHeight: parsedOrNull($element, 'height'),
     appliedWidth: parsedOrNull($element, 'width'),
-    isDecorativeImage: altText !== null && altText.replace(/\s/g, '') === '',
-    naturalHeight: $element.naturalHeight,
+    appliedHeight: parsedOrNull($element, 'height'),
     naturalWidth: $element.naturalWidth,
+    naturalHeight: $element.naturalHeight,
+    appliedPercentage: percentageUnits || 100,
+    usePercentageUnits: !!percentageUnits,
+    altText: altText || '',
+    isDecorativeImage: altText !== null && altText.replace(/\s/g, '') === '',
     url: $element.src
   };
   imageOptions.imageSize = imageSizeFromKnownOptions(imageOptions);

package/canvas/lib/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -109,7 +109,8 @@ function ImageOptionsTray(props) {
 
   const dimensionsState = (0, _index.useDimensionsState)(imageOptions, {
     minHeight: _ImageEmbedOptions.MIN_HEIGHT,
-    minWidth: _ImageEmbedOptions.MIN_WIDTH
+    minWidth: _ImageEmbedOptions.MIN_WIDTH,
+    minPercentage: _ImageEmbedOptions.MIN_PERCENTAGE
   });
   (0, _react.useEffect)(() => {
     let isValidURL;
@@ -228,8 +229,13 @@ function ImageOptionsTray(props) {
       let appliedWidth = imageWidth;
 
       if (imageSize === _ImageEmbedOptions.CUSTOM) {
-        appliedHeight = dimensionsState.height;
-        appliedWidth = dimensionsState.width;
+        if (dimensionsState.usePercentageUnits) {
+          appliedHeight = `${dimensionsState.percentage}%`;
+          appliedWidth = `${dimensionsState.percentage}%`;
+        } else {
+          appliedHeight = dimensionsState.height;
+          appliedWidth = dimensionsState.width;
+        }
       }
 
       onSave({

package/canvas/lib/rce/plugins/instructure_record/AudioOptionsTray/TrayController.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CONTAINER_ID = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _index = _interopRequireDefault(require("../../../../bridge/index.js"));
+
+var _ContentSelection = require("../../shared/ContentSelection.js");
+
+var _index2 = _interopRequireDefault(require("./index.js"));
+
+/*
+ * Copyright (C) 2021 - 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/>.
+ */
+const CONTAINER_ID = 'instructure-audio-options-tray-container';
+exports.CONTAINER_ID = "instructure-audio-options-tray-container";
+
+let TrayController = /*#__PURE__*/function () {
+  function TrayController() {
+    (0, _classCallCheck2.default)(this, TrayController);
+    this._isOpen = false;
+    this._shouldOpen = false;
+    this._editor = null;
+    this._audioContainer = null;
+  }
+
+  (0, _createClass2.default)(TrayController, [{
+    key: "container",
+    get: function () {
+      let _container = document.getElementById(CONTAINER_ID);
+
+      if (_container == null) {
+        _container = document.createElement('div');
+        _container.id = CONTAINER_ID;
+        document.body.appendChild(_container);
+      }
+
+      return _container;
+    }
+  }, {
+    key: "isOpen",
+    get: function () {
+      return this._isOpen;
+    }
+  }, {
+    key: "showTrayForEditor",
+    value: function showTrayForEditor(editor) {
+      this._shouldOpen = true;
+      this._editor = editor;
+      this._audioContainer = (0, _ContentSelection.findMediaPlayerIframe)(editor.selection.getNode());
+
+      if (_index.default.focusedEditor) {
+        // Dismiss any content trays that may already be open
+        _index.default.hideTrays();
+      }
+
+      const trayProps = _index.default.trayProps.get(editor);
+
+      this._renderTray(trayProps);
+    }
+  }, {
+    key: "hideTrayForEditor",
+    value: function hideTrayForEditor(editor) {
+      if (this._editor === editor) {
+        this._dismissTray();
+      }
+    }
+  }, {
+    key: "_dismissTray",
+    value: function _dismissTray() {
+      if (this._audioContainer) {
+        this._editor.selection.select(this._audioContainer);
+      }
+
+      this._resetController();
+    }
+  }, {
+    key: "_resetController",
+    value: function _resetController() {
+      this._shouldOpen = false;
+
+      this._renderTray();
+
+      this._editor = null;
+      this._audioContainer = null;
+      const elem = document.getElementById(CONTAINER_ID);
+      return elem.parentNode.removeChild(elem);
+    }
+  }, {
+    key: "_applyAudioOptions",
+    value: function _applyAudioOptions(audioOptions) {
+      if (!audioOptions.media_object_id || audioOptions.media_object_id === 'undefined') {
+        return;
+      }
+
+      const container = this._audioContainer;
+      return audioOptions.updateMediaObject({
+        media_object_id: audioOptions.media_object_id,
+        subtitles: audioOptions.subtitles
+      }).then(() => container === null || container === void 0 ? void 0 : container.contentWindow.location.reload()).catch(ex => {
+        // eslint-disable-next-line no-console
+        console.error('Failed updating audio captions', ex);
+      });
+    }
+  }, {
+    key: "_renderTray",
+    value: function _renderTray(trayProps) {
+      let audioOptions = {};
+
+      if (this._shouldOpen) {
+        audioOptions = (0, _ContentSelection.asAudioElement)(this._audioContainer);
+      }
+
+      const element = /*#__PURE__*/_react.default.createElement(_index2.default, {
+        audioOptions: audioOptions,
+        onEntered: () => {
+          this._isOpen = true;
+        },
+        onExited: () => {
+          _index.default.focusActiveEditor(false);
+
+          this._isOpen = false;
+        },
+        onSave: options => {
+          this._applyAudioOptions(options);
+
+          this._dismissTray();
+        },
+        onDismiss: () => this._dismissTray(),
+        open: this._shouldOpen,
+        trayProps: trayProps
+      });
+
+      _reactDom.default.render(element, this.container);
+    }
+  }]);
+  return TrayController;
+}();
+
+exports.default = TrayController;

package/canvas/lib/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AudioOptionsTray;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiTray = require("@instructure/ui-tray");
+
+var _uiFormField = require("@instructure/ui-form-field");
+
+var _canvasMedia = require("@instructure/canvas-media");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _StoreContext = require("../../shared/StoreContext.js");
+
+var _index = _interopRequireDefault(require("../../../../bridge/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("../../../../format-message.js"));
+
+var _trayUtils = require("../../shared/trayUtils.js");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+/*
+ * Copyright (C) 2021 - 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/>.
+ */
+const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
+
+function AudioOptionsTray({
+  open,
+  onEntered,
+  onExited,
+  onDismiss,
+  onSave,
+  trayProps,
+  audioOptions
+}) {
+  const _useState = (0, _react.useState)(audioOptions.tracks || []),
+        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+        subtitles = _useState2[0],
+        setSubtitles = _useState2[1];
+
+  const handleSave = (e, contentProps) => {
+    onSave({
+      media_object_id: audioOptions.id,
+      subtitles,
+      updateMediaObject: contentProps.updateMediaObject
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_StoreContext.StoreProvider, trayProps, contentProps => /*#__PURE__*/_react.default.createElement(_uiTray.Tray, {
+    key: "audio-options-tray",
+    "data-mce-component": true,
+    label: (0, _formatMessage.default)('Audio Options Tray'),
+    onDismiss: onDismiss,
+    onEntered: onEntered,
+    onExited: onExited,
+    open: open,
+    placement: "end",
+    shouldCloseOnDocumentClick: true,
+    shouldContainFocus: true,
+    shouldReturnFocus: true
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    direction: "column",
+    height: (0, _trayUtils.getTrayHeight)()
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    as: "header",
+    padding: "medium"
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    direction: "row"
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    grow: true,
+    shrink: true
+  }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+    as: "h2"
+  }, (0, _formatMessage.default)('Audio Options'))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+    placement: "static",
+    variant: "icon",
+    onClick: onDismiss
+  }, (0, _formatMessage.default)('Close'))))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    as: "form",
+    grow: true,
+    margin: "none",
+    shrink: true
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    justifyItems: "space-between",
+    direction: "column",
+    height: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    grow: true,
+    padding: "small",
+    shrink: true
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    direction: "column"
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    padding: "small"
+  }, /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+    description: (0, _formatMessage.default)('Closed Captions/Subtitles')
+  }, /*#__PURE__*/_react.default.createElement(_canvasMedia.ClosedCaptionPanel, {
+    subtitles: subtitles.map(st => ({
+      locale: st.locale,
+      file: {
+        name: st.language || st.locale
+      }
+    })),
+    uploadMediaTranslations: _index.default.uploadMediaTranslations,
+    languages: _index.default.languages,
+    updateSubtitles: newSubtitles => setSubtitles(newSubtitles),
+    liveRegion: getLiveRegion
+  }))))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    background: "secondary",
+    borderWidth: "small none none none",
+    padding: "small medium",
+    textAlign: "end"
+  }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+    onClick: e => handleSave(e, contentProps),
+    variant: "primary"
+  }, (0, _formatMessage.default)('Done'))))))));
+}
+
+AudioOptionsTray.propTypes = {
+  onEntered: _propTypes.func,
+  onExited: _propTypes.func,
+  onDismiss: _propTypes.func,
+  onSave: _propTypes.func,
+  open: _propTypes.bool.isRequired,
+  trayProps: (0, _propTypes.shape)({
+    host: _propTypes.string.isRequired,
+    jwt: _propTypes.string.isRequired
+  }).isRequired,
+  audioOptions: (0, _propTypes.shape)({
+    id: _propTypes.string.isRequired,
+    titleText: _propTypes.string.isRequired,
+    tracks: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+      locale: _propTypes.string.isRequired
+    }))
+  }).isRequired
+};
+AudioOptionsTray.defaultProps = {
+  onEntered: null,
+  onExited: null,
+  onDismiss: null,
+  onSave: null
+};

package/canvas/lib/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -83,7 +83,7 @@ let TrayController = /*#__PURE__*/function () {
     key: "showTrayForEditor",
     value: function showTrayForEditor(editor) {
       this._editor = editor;
-      this.$videoContainer = (0, _ContentSelection.findVideoPlayerIframe)(editor.selection.getNode());
+      this.$videoContainer = (0, _ContentSelection.findMediaPlayerIframe)(editor.selection.getNode());
       this._shouldOpen = true;
 
       if (_index.default.focusedEditor) {