@instructure/canvas-rce 6.0.0 → 7.2.0

package/CHANGELOG.md

@@ -5,6 +5,52 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 7.2.0 - 2025-08-21
+
+### Added
+- Block content editor RCE variant support
+- YouTube video overlay
+- Lightest colors and white included in color picker
+
+### Fixed
+- Conditionally render screenReader-only Alert in RCEWrapper
+- Canvas-rce translation warnings prevented
+- Background color when RCE is fullscreen
+
+### Changed
+- Upgraded to InstUI 10.24.2
+- Upgraded crypto-es in canvas-rce package
+
+### Localization
+- Updated RCE translations for multiple locales
+
+
+## 7.1.1 - 2025-07-08
+
+### Changed
+
+- Change color_map to include tiny mce's default light colors and white
+
+## 7.1.0 - 2025-06-06
+
+### Changed
+
+- Change color_map for more accessible default colors
+
+## 7.0.0 - 2025-03-31
+
+### Fixed
+
+- Screen readers for RCE toolbar on mobile platform
+- Axios CSRF vulnerability
+- Mailto link insertion
+
+### Changed
+
+- Upgraded Instui to v10
+- Refactored deprecated plugins to prepare for tinymce upgrade
+- Removed media_links_use_attachment_id feature flag
+
 ## 6.0.0 - 2025-03-20
 
 ### Changed

package/__tests__/common/indicate.test.js

@@ -16,14 +16,13 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import sinon from 'sinon'
 import indicate from '../../src/common/indicate'
 
 describe('indicate function', () => {
-  let clock, region, margin, indicator
+  let region, margin, indicator
 
   beforeEach(() => {
-    clock = sinon.useFakeTimers()
+    jest.useFakeTimers()
     region = {
       top: 10,
       left: 20,
@@ -36,7 +35,7 @@ describe('indicate function', () => {
   })
 
   afterEach(() => {
-    clock.restore()
+    jest.useRealTimers()
   })
 
   it('appends a div to the body', () => {
@@ -44,7 +43,7 @@ describe('indicate function', () => {
   })
 
   it('removes the div after 2 seconds', () => {
-    clock.tick(2000)
+    jest.advanceTimersByTime(2000)
     expect(indicator.parentNode).toBeNull()
   })
 
@@ -72,7 +71,7 @@ describe('indicate function', () => {
     })
 
     it('div has leave class after 900ms', () => {
-      clock.tick(900)
+      jest.advanceTimersByTime(900)
       expect(/leave/.test(indicator.className)).toBeTruthy()
     })
 

package/es/bridge/Bridge.js

@@ -41,6 +41,8 @@ export default class Bridge {
         console.warn('clicked sidebar link without a focused editor');
       }
     };
+    // insertFileLink is called from the FileBrowser when All files is chosen
+    // vs the above insertLink which is called from the other CanvasContentTray panels.
     this.insertFileLink = link => {
       const embedData = fileEmbed(link);
       if (embedData.type === 'image') {
@@ -192,10 +194,6 @@ export default class Bridge {
     }
     return false;
   }
-
-  // insertFileLink is called from the FileBrowser when All files is chosen
-  // vs the above insertLink which is called from the other CanvasContentTray panels.
-
   insertImage(image) {
     if (this.focusedEditor) {
       const result = this.focusedEditor.insertImage(image);

package/es/canvasFileBrowser/FileBrowser.js

@@ -30,6 +30,8 @@ export const PENDING_MEDIA_ENTRY_ID = 'maybe';
 class FileBrowser extends React.Component {
   constructor(_props2) {
     super(_props2);
+    // Memoized function to fetch all subfolders
+    // of the given folder ID, handing pagination
     this.fetchSubFolders = _.memoize(id => {
       this.source.fetchBookmarkedData(this.source.fetchSubFolders.bind(this.source), {
         folderId: id,
@@ -214,10 +216,6 @@ class FileBrowser extends React.Component {
     this.populateCollectionsList([data], opts);
     this.getFolderData(data.id);
   }
-
-  // Memoized function to fetch all subfolders
-  // of the given folder ID, handing pagination
-
   fetchFiles(id) {
     this.source.fetchBookmarkedData(this.source.fetchFilesForFolder.bind(this.source), {
       searchString: this.props.searchString,

package/es/common/browser.js

@@ -31,8 +31,8 @@ export function reset() {
   });
 }
 export function set(env) {
-  isIE = !!env.ie;
-  isEdge = isIE && !!(env.edge || env.ie == 12);
+  isIE = env.browser.isIE();
+  isEdge = env.browser.isEdge();
 }
 export function ie() {
   return isIE;

package/es/common/fileUrl.js

@@ -21,18 +21,28 @@
 // in mocha tests.
 
 import RCEGlobals from '../rce/RCEGlobals';
+const CONTACT_PROTOCOLS = ['mailto:', 'tel:', 'skype:'];
+function parseUrl(url, canvasOrigin = window.location.origin) {
+  try {
+    // If the URL is already absolute, use it as-is
+    return new URL(url);
+  } catch {
+    return new URL(`${canvasOrigin}${url.startsWith('/') ? '' : '/'}${url}`);
+  }
+}
 function parseCanvasUrl(url, canvasOrigin = window.location.origin) {
   if (!url) {
     return null;
   }
   try {
-    // For absolute URLs
-    const fullUrl = url.startsWith('http') ? url : `${canvasOrigin}${url.startsWith('/') ? '' : '/'}${url}`;
-    const parsed = new URL(fullUrl);
+    const parsed = parseUrl(url, canvasOrigin);
     const canvasUrl = new URL(canvasOrigin);
     if (parsed.host && canvasUrl.host !== parsed.host) {
       return null;
     }
+    if (CONTACT_PROTOCOLS.includes(parsed.protocol)) {
+      return null;
+    }
 
     // Convert URLSearchParams to query object
     const query = {};

package/es/defaultTinymceConfig.d.ts

@@ -9,6 +9,7 @@ declare const defaultTinymceConfig: {
     menubar: undefined;
     menu: undefined;
     toolbar: undefined;
+    color_map: string[];
     plugins: undefined;
     branding: boolean;
     browser_spellcheck: boolean;
@@ -18,7 +19,6 @@ declare const defaultTinymceConfig: {
     language_load: boolean;
     language_url: string;
     toolbar_mode: string;
-    toolbar_ticky: boolean;
     mobile: {
         theme: string;
     };

package/es/defaultTinymceConfig.js

@@ -58,6 +58,42 @@ const defaultTinymceConfig = {
   menu: undefined,
   // any toolbar data here will be merged into the standard toolbars
   toolbar: undefined,
+  color_map: [
+  // First row
+  // tiny mce's default first row colors
+  '#BFEDD2', 'Light Green', '#FBEEB8', 'Light Orange', '#F8CAC6', 'Light Red', '#ECCAFA', 'Light Purple', '#C2E0F4', 'Light Blue',
+  // Second row
+  '#03893D',
+  // InstUI Green45
+  'Green', '#CF4A00',
+  // InstUI Orange45
+  'Orange', '#E62429',
+  // InstUI Red45
+  'Red', '#9E58BD',
+  // InstUI Violet45
+  'Purple', '#2B7ABC',
+  // InstUI Blue45
+  'Blue',
+  // Third row
+  '#027634',
+  // InstUI Green57
+  'Dark Green', '#B34000',
+  // InstUI Orange57
+  'Dark Orange', '#C71F23',
+  // InstUI Red57
+  'Dark Red', '#9242B4',
+  // InstUI Violet57
+  'Dark Purple', '#0E68B3',
+  // InstUI Blue57
+  'Dark Blue',
+  // Fourth row
+  '#FFFFFF', 'White', '#6A7883',
+  // InstUI Grey45
+  'Light Gray', '#3F515E',
+  // InstUI Grey82
+  'Gray', '#273540',
+  // InstUI Grey125
+  'Dark Gray', '#000000', 'Black'],
   // plugins included here will be added to the standard set
   plugins: undefined,
   // ==================================================================================
@@ -69,11 +105,10 @@ const defaultTinymceConfig = {
   content_style: '',
   convert_urls: false,
   // fonts specified here need to either be web-safe or self-hosted and loaded in app/stylesheets/bundles/fonts.scss
-  font_formats: "Lato Extended=Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Balsamiq Sans=Balsamiq Sans,Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Architect's Daughter=Architects Daughter,Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Courier New=courier new,courier; Georgia=georgia,palatino; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva",
+  font_formats: "Lato Extended=Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Balsamiq Sans=Balsamiq Sans,Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Architect's Daughter=Architects Daughter,Lato Extended,Helvetica Neue,Helvetica,Arial,sans-serif; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Courier New=courier new,courier; Georgia=georgia,palatino; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Open Dyslexic=OpenDyslexic; Open Dyslexic Mono=OpenDyslexicMono, Monaco, Menlo, Consolas, Courier New, monospace;",
   language_load: false,
   language_url: 'none',
   toolbar_mode: 'floating',
-  toolbar_ticky: true,
   mobile: {
     theme: 'silver'
   },
@@ -92,151 +127,151 @@ const defaultTinymceConfig = {
   // this list needs to be kept in sync with the list in gems/canvas_sanitize/lib/canvas_sanitize/canvas_sanitize.rb
   valid_elements: elemsToTinyStringConfig({
     '@': ['id', 'class', 'style', 'title', 'dir<ltr?rtl', 'lang', 'xml::lang', 'role'],
-    'a': ['rel', 'rev', 'charset', 'hreflang', 'tabindex', 'accesskey', 'type', 'name', 'href', 'target', 'title', 'class', 'data-old-link'],
+    a: ['rel', 'rev', 'charset', 'hreflang', 'tabindex', 'accesskey', 'type', 'name', 'href', 'target', 'title', 'class', 'data-old-link'],
     'strong/b': [],
     'em/i': [],
     'strike/s': [],
-    'u': [],
+    u: [],
     '#p': [],
     '-ol': ['type', 'compact'],
     '-ul': ['type', 'compact'],
     '-li': [],
-    'br': [],
-    'img': ['longdesc', 'usemap', 'src', 'border', 'alt', 'title', 'hspace', 'vspace', 'width', 'height', 'align', 'role', 'data-old-link'],
+    br: [],
+    img: ['longdesc', 'usemap', 'src', 'border', 'alt', 'title', 'hspace', 'vspace', 'width', 'height', 'align', 'role', 'data-old-link'],
     '-sub': [],
     '-sup': [],
     '-blockquote': ['cite'],
     '-table': [{
-      'border': '0'
+      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': [],
+    tbody: [],
+    thead: [],
+    tfoot: [],
     '#td': ['colspan', 'rowspan', 'width', 'height', 'align', 'valign', 'bgcolor', 'background', 'bordercolor', 'scope'],
     '#th': ['colspan', 'rowspan', 'width', 'height', 'align', 'valign', 'scope'],
-    'caption': [],
+    caption: [],
     '-div': [],
     '-span': [],
     '-code': [],
     '-pre': [],
-    'address': [],
+    address: [],
     '-h1': [],
     '-h2': [],
     '-h3': [],
     '-h4': [],
     '-h5': [],
     '-h6': [],
-    'hr': ['size', 'noshade'],
+    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': [],
-    'q': ['cite'],
-    'samp': [],
-    'small': [],
-    'tt': [],
-    'var': [],
-    'big': [],
-    'figure': [],
-    'figcaption': [],
-    'source': ['media', 'width', 'height', 'sizes', 'src', 'srcset', 'type', 'data-old-link'],
-    'track': [],
-    'mark': [],
-    'article': [],
-    'aside': [],
-    'details': [],
-    'footer': [],
-    'header': [],
-    'nav': [],
-    'section': [],
-    'summary': [],
-    'time': []
+    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: [],
+    q: ['cite'],
+    samp: [],
+    small: [],
+    tt: [],
+    var: [],
+    big: [],
+    figure: [],
+    figcaption: [],
+    source: ['media', 'width', 'height', 'sizes', 'src', 'srcset', 'type', 'data-old-link'],
+    track: [],
+    mark: [],
+    article: [],
+    aside: [],
+    details: [],
+    footer: [],
+    header: [],
+    nav: [],
+    section: [],
+    summary: [],
+    time: []
   }),
   extended_valid_elements: elemsToTinyStringConfig({
     '@': ['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-description', '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', 'loading', 'allowfullscreen', 'webkitallowfullscreen', 'mozallowfullscreen', 'allow', 'data-old-link'],
-    'i': ['iclass'],
-    'a': ['hidden', 'href', 'target', 'rel', 'media', 'hreflang', 'type', 'charset', 'name', 'rev', 'shape', 'coords', 'download', 'alt'],
+    iframe: ['id', 'data-media-type', 'title', 'src', 'width', 'height', 'name', 'align', 'style', 'class', 'sandbox', 'loading', 'allowfullscreen', 'webkitallowfullscreen', 'mozallowfullscreen', 'allow', 'data-old-link'],
+    i: ['iclass'],
+    a: ['hidden', 'href', 'target', 'rel', 'media', 'hreflang', 'type', 'charset', 'name', 'rev', 'shape', 'coords', 'download', 'alt'],
     '#p': [],
-    'li': ['value'],
+    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'],
+    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'],
+    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': [],
-    'g': ['*'],
-    'circle': ['*']
+    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: [],
+    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/es/enhance-user-content/enhance_user_content.js

@@ -25,6 +25,7 @@ import { addParentFrameContextToUrl } from '../rce/plugins/instructure_rce_exter
 import { MathJaxDirective, Mathml } from './mathml';
 import { makeExternalLinkIcon } from './external_links';
 import getTranslations from '../getTranslations';
+import { createOverlay } from './youtube_overlay';
 
 // in jest the es directory doesn't exist so stub the undefined svg
 const IconDownloadSVG = IconDownloadLine?.src || '<svg></svg>';
@@ -141,7 +142,8 @@ export function enhanceUserContent(container = document, opts = {}) {
     /**
      * Contingency plan in case new instfs media links cause problems in rich content.
      */
-    replaceInstFSLinksWithOldLinks
+    replaceInstFSLinksWithOldLinks,
+    showYoutubeAdOverlay
   } = opts;
   getTranslations(locale).then(() => {
     formatMessage.setup({
@@ -155,6 +157,10 @@ export function enhanceUserContent(container = document, opts = {}) {
     canvasOrigin,
     disableGooglePreviews
   });
+  if (showYoutubeAdOverlay) {
+    const youtubeIframes = content.querySelectorAll(['.user_content:not(.enhanced) iframe[src*="youtube.com/embed/"]', '.user_content:not(.enhanced) iframe[src*="youtube-nocookie.com/embed/"]'].join(', '));
+    createOverlay(youtubeIframes);
+  }
   content.querySelectorAll('.user_content:not(.enhanced)').forEach(elem => {
     elem.classList.add('unenhanced');
     explicit_latex_typesetting && elem.classList.add(MathJaxDirective.Process);

package/es/enhance-user-content/instructure_helper.js

@@ -93,6 +93,7 @@ export function showFilePreviewInOverlay(event, canvasOrigin) {
     const verifier = url?.searchParams.get('verifier');
     const access_token = url?.searchParams.get('access_token');
     const instfs_id = url?.searchParams.get('instfs_id');
+    const location = url?.searchParams.get('location');
     const file_id = matches[1];
     const params = {
       subject: 'preview_file',
@@ -103,6 +104,9 @@ export function showFilePreviewInOverlay(event, canvasOrigin) {
       params.access_token = access_token;
       params.instfs_id = instfs_id;
     }
+    if (location) {
+      params.location = location;
+    }
     // TODO:
     // 1. what window should we be using
     // 2. is that the right origin?

package/es/enhance-user-content/youtube_overlay.d.ts

@@ -0,0 +1 @@
+export declare const createOverlay: (iframes: NodeListOf<Element>) => void;