@instructure/canvas-rce 5.13.2 → 5.13.6

package/CHANGELOG.md

@@ -5,6 +5,47 @@ 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).
 
+## 5.13.5 - 2024-09-25
+
+### Fixed
+
+- File links with data-canvas-previewable='false' will no longer try to preview
+- Change backgroundless buttons to "primary" theme color to be more visible
+- Fix LTI tool scrolling issue on small iOS devices
+- Adding missing translation strings
+- Fixed some types of non-Canvas files from trying to preview like Canvas files
+
+### Changed
+
+- Allow links with data-old-link to replace the existing src or href with the contents
+  of the data-old-link attribute
+- Added IDs to multiple objects missing IDs
+- Add loading spinners to image uploads
+
+## 5.13.4 - 2024-08-12
+
+### Fixed
+
+- RCE "Lato Extended" now properly uses the "Lato Extended" font
+
+## 5.13.4 - 2024-08-12
+
+### Changed
+
+- Icon Maker tray now stays open until the user closes it with the close button
+
+## 5.13.3 - 2024-07-22
+
+### Fixed
+
+- Icon Maker tray now stays open while an image upload modal is present
+
+## 5.13.2 - 2024-06-26
+
+### Changed
+
+- Removed polyfill.io reference from README
+
 ## 5.13.1 - 2024-06-03
 
 ### Changed

package/es/bridge/Bridge.js

@@ -252,8 +252,6 @@ export default class Bridge {
       const result = this.focusedEditor.insertImage(image);
       (_this$controller4 = this.controller(this.focusedEditor.id)) === null || _this$controller4 === void 0 ? void 0 : _this$controller4.hideTray();
       return result;
-    } else {
-      console.warn('clicked sidebar image without a focused editor');
     }
   }
 
@@ -264,8 +262,6 @@ export default class Bridge {
       if (!this.existingContentToLink()) {
         this.focusedEditor.insertImagePlaceholder(fileMetaProps);
       }
-    } else {
-      console.warn('clicked sidebar image without a focused editor');
     }
   }
 

package/es/defaultTinymceConfig.js

@@ -51,7 +51,7 @@ const defaultTinymceConfig = {
   // this will always be provided by the RCE
   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=lato,Helvetica Neue,Helvetica,Arial,sans-serif; Balsamiq Sans=Balsamiq Sans,lato,Helvetica Neue,Helvetica,Arial,sans-serif; Architect's Daughter=Architects Daughter,lato,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",
   language_load: false,
   language_url: 'none',
   toolbar_mode: 'floating',
@@ -72,8 +72,8 @@ 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/s,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,q[cite],samp,small,tt,var,big,figure,figcaption,source[media|width|height|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,wbr' + // the svg necessary for the uploading placeholder's spinner
+  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|data-old-link],strong/b,em/i,strike/s,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],-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,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: '@[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|data-old-link],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,wbr' + // the svg necessary for the uploading placeholder's spinner
   '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/es/enhance-user-content/enhance_user_content.js

@@ -151,7 +151,12 @@ export function enhanceUserContent() {
     /**
      * When used inside of an LTI tool, this contains the canvas global id of the tool.
      */
-    containingCanvasLtiToolId
+    containingCanvasLtiToolId,
+
+    /**
+     * Contingency plan in case new instfs media links cause problems in rich content.
+     */
+    replaceInstFSLinksWithOldLinks
   } = opts;
   getTranslations(locale).then(() => {
     formatMessage.setup({
@@ -193,7 +198,30 @@ export function enhanceUserContent() {
         img.setAttribute('alt', formatMessage('This image is currently unavailable'));
       }
     });
-    setData(unenhanced_elem, 'unenhanced_content_html', unenhanced_elem.innerHTML); // guarantee relative links point to canvas
+    setData(unenhanced_elem, 'unenhanced_content_html', unenhanced_elem.innerHTML); // If instfs links are causing content problems,
+    // use this to show users old links instead
+
+    if (replaceInstFSLinksWithOldLinks) {
+      const attributes = ['href', 'src'];
+      const selector = '[href], [src]';
+      const oldLinkAttribute = 'data-old-link';
+      unenhanced_elem.querySelectorAll(selector).forEach(element => {
+        const oldLink = element.getAttribute(oldLinkAttribute);
+
+        if (!oldLink) {
+          return;
+        }
+
+        for (const a of attributes) {
+          const newLink = element.getAttribute(a);
+
+          if (newLink && newLink != oldLink) {
+            element.setAttribute(a, oldLink);
+          }
+        }
+      });
+    } // guarantee relative links point to canvas
+
 
     if (canvasOrigin) {
       const attributes = ['href', 'src'];
@@ -260,7 +288,7 @@ export function enhanceUserContent() {
     const href = buildUrl(file_link.href); // Don't attempt to enhance links with no href
 
     if (!href) return;
-    const matchesCanvasFile = href.pathname.match(/(?:\/(courses|groups|users)\/(\d+))?\/files\/(\d+)/);
+    const matchesCanvasFile = href.pathname.match(/(?:\/(courses|groups|users)\/\d+)?\/files\/([\d~]+)(?=[!*'();:@&=+$,/?#\[\]]|$)/);
 
     if (!matchesCanvasFile) {
       // a bug in the new RCE added instructure_file_link class name to all links

package/es/index.js

@@ -26,6 +26,8 @@ export * from './enhance-user-content/index';
 export const defaultConfiguration = defaultTinymceConfig;
 export { instuiPopupMountNode } from './util/fullscreenHelpers';
 export { Mathml };
+export { RCEVariantValues } from './rce/RCEVariants';
+export { UploadFilePanelIds, handleSubmit, UploadFile } from './rce/plugins/shared/Upload';
 export function renderIntoDiv(editorEl, props, cb) {
   const language = normalizeLocale(props.language);
   setLocale(language);

package/es/rce/RCE.js

@@ -58,6 +58,7 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
     rcsProps,
     use_rce_icon_maker,
     features,
+    variant,
     onFocus,
     onBlur,
     onInit,
@@ -104,7 +105,8 @@ const RCE = /*#__PURE__*/forwardRef(function RCE(props, rceRef) {
         selector: (editorOptions === null || editorOptions === void 0 ? void 0 : editorOptions.selector) || `#${textareaId}`,
         height,
         language: editorLanguage(props.language)
-      }
+      },
+      variant
     };
     wrapInitCb(mirroredAttrs, iProps.editorOptions);
     return iProps;

package/es/rce/RCEVariants.js

@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2024 - 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/>.
+ */
+import formatMessage from '../format-message';
+export const RCEVariantValues = ['full', 'lite', 'text-only'];
+export function getMenubarForVariant(variant) {
+  if (variant === 'full') {
+    return 'edit view insert format tools table';
+  }
+
+  return '';
+}
+export function getMenuForVariant(variant) {
+  if (variant === 'full') {
+    return {
+      edit: {
+        title: formatMessage('Edit'),
+        items: `undo redo | cut copy paste | selectall`
+      },
+      format: {
+        title: formatMessage('Format'),
+        items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align directionality | forecolor backcolor | removeformat'
+      },
+      insert: {
+        title: formatMessage('Insert'),
+        items: 'instructure_links instructure_image instructure_media instructure_document instructure_icon_maker | instructure_equation inserttable instructure_media_embed | hr'
+      },
+      tools: {
+        title: formatMessage('Tools'),
+        items: 'instructure_wordcount lti_tools_menuitem instructure_search_and_replace'
+      },
+      view: {
+        title: formatMessage('View'),
+        items: 'instructure_fullscreen instructure_exit_fullscreen instructure_html_view'
+      }
+    };
+  }
+
+  return {};
+}
+export function getToolbarForVariant(variant) {
+  let ltiToolFavorites = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+  if (variant === 'lite') {
+    return [{
+      name: formatMessage('Styles'),
+      items: ['formatselect']
+    }, {
+      name: formatMessage('Formatting'),
+      items: ['bold', 'italic', 'underline', 'forecolor']
+    }, {
+      name: formatMessage('Content'),
+      items: ['instructure_links', 'instructure_image']
+    }, {
+      name: formatMessage('Lists'),
+      items: ['bullist']
+    }, {
+      name: formatMessage('Miscellaneous'),
+      items: ['instructure_equation']
+    }];
+  }
+
+  if (variant === 'text-only') {
+    return [{
+      name: formatMessage('Formatting'),
+      items: ['bold', 'italic', 'underline']
+    }, {
+      name: formatMessage('Content'),
+      items: ['instructure_links']
+    }];
+  }
+
+  return [{
+    name: formatMessage('Styles'),
+    items: ['fontsizeselect', 'formatselect']
+  }, {
+    name: formatMessage('Formatting'),
+    items: ['bold', 'italic', 'underline', 'forecolor', 'backcolor', 'inst_subscript', 'inst_superscript']
+  }, {
+    name: formatMessage('Content'),
+    items: ['instructure_links', 'instructure_image', 'instructure_record', 'instructure_documents', 'instructure_icon_maker']
+  }, {
+    name: formatMessage('External Tools'),
+    items: [...ltiToolFavorites, 'lti_tool_dropdown', 'lti_mru_button']
+  }, {
+    name: formatMessage('Alignment and Lists'),
+    items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
+  }, {
+    name: formatMessage('Miscellaneous'),
+    items: ['removeformat', 'table', 'instructure_equation', 'instructure_media_embed']
+  }];
+}
+export function getStatusBarFeaturesForVariant(variant) {
+  let ai_text_tools = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  if (variant === 'lite' || variant === 'text-only') {
+    return ['keyboard_shortcuts', 'a11y_checker', 'word_count'];
+  }
+
+  const full_features = ['keyboard_shortcuts', 'a11y_checker', 'word_count', 'html_view', 'fullscreen', 'resize_handle'];
+
+  if (ai_text_tools) {
+    full_features.push('ai_tools');
+  }
+
+  return full_features;
+}

package/es/rce/RCEWrapper.js

@@ -60,6 +60,7 @@ import { IconMoreSolid } from '@instructure/ui-icons/es/svg';
 import EncryptedStorage from '../util/encrypted-storage';
 import buildStyle from './style';
 import { externalToolsForToolbar } from './plugins/instructure_rce_external_tools/RceToolWrapper';
+import { getMenubarForVariant, getMenuForVariant, getToolbarForVariant, getStatusBarFeaturesForVariant } from './RCEVariants';
 const RestoreAutoSaveModal = /*#__PURE__*/React.lazy(() => import('./RestoreAutoSaveModal'));
 const RceHtmlEditor = /*#__PURE__*/React.lazy(() => import('./RceHtmlEditor'));
 const ASYNC_FOCUS_TIMEOUT = 250;
@@ -693,6 +694,72 @@ class RCEWrapper extends React.Component {
       }
     };
 
+    this.handleAIClick = () => {
+      import('./plugins/shared/ai_tools').then(module => {
+        this.AIToolsTray = module.AIToolsTray;
+        this.setState({
+          AIToolsOpen: true,
+          AITToolsFocusReturn: document.activeElement
+        });
+      }).catch(ex => {
+        // eslint-disable-next-line no-console
+        console.error('Failed loading the AIToolsTray', ex);
+      });
+    };
+
+    this.closeAITools = () => {
+      this.setState({
+        AIToolsOpen: false
+      });
+    };
+
+    this.AIToolsExited = () => {
+      if (this.state.AITToolsFocusReturn === this.iframe) {
+        // launched using a kb shortcut
+        // the iframe has focus so we need to forward it on to tinymce editor
+        this.editor.focus(false);
+      } else if (this.state.AITToolsFocusReturn === document.getElementById(`show-on-focus-btn-${this.id}`)) {
+        var _this$_showOnFocusBut2;
+
+        // launched from showOnFocus button
+        // edge case where focusing KBShortcutFocusReturn doesn't work
+        (_this$_showOnFocusBut2 = this._showOnFocusButton) === null || _this$_showOnFocusBut2 === void 0 ? void 0 : _this$_showOnFocusBut2.focus();
+      } else {
+        var _this$state$AITToolsF;
+
+        // launched from kb shortcut button on status bar
+        (_this$state$AITToolsF = this.state.AITToolsFocusReturn) === null || _this$state$AITToolsF === void 0 ? void 0 : _this$state$AITToolsF.focus();
+      }
+    };
+
+    this.handleInsertAIContent = content => {
+      const editor = this.mceInstance();
+      contentInsertion.insertContent(editor, content);
+    };
+
+    this.handleReplaceAIContent = content => {
+      const ed = this.mceInstance();
+      const selection = ed.selection;
+
+      if (selection.getContent().length > 0) {
+        selection.setContent(content);
+      } else {
+        ed.selection.select(ed.getBody(), true);
+        selection.setContent(content);
+      }
+    };
+
+    this.getCurrentContentForAI = () => {
+      const selected = this.mceInstance().selection.getContent();
+      return selected ? {
+        type: 'selection',
+        content: selected
+      } : {
+        type: 'full',
+        content: this.mceInstance().getContent()
+      };
+    };
+
     this.setFocusAbilityForHeader = focusable => {
       // Sets aria-hidden to prevent screen readers focus in RCE menus and toolbar
       const header = this._elementRef.current.querySelector('.tox-editor-header');
@@ -788,7 +855,8 @@ class RCEWrapper extends React.Component {
         prevHeight: _ht
       },
       a11yErrorsCount: 0,
-      shouldShowEditor: typeof IntersectionObserver === 'undefined' || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs
+      shouldShowEditor: typeof IntersectionObserver === 'undefined' || maxInitRenderedRCEs <= 0 || currentRCECount < maxInitRenderedRCEs,
+      AIToolsOpen: false
     };
     this._statusBarId = `${this.state.id}_statusbar`;
     this.pendingEventHandlers = [];
@@ -796,12 +864,15 @@ class RCEWrapper extends React.Component {
     this.pluginsToExclude = parsePluginsToExclude(((_props$editorOptions2 = props.editorOptions) === null || _props$editorOptions2 === void 0 ? void 0 : _props$editorOptions2.plugins) || []);
     this.resourceType = props.resourceType;
     this.resourceId = props.resourceId;
+    this.variant = window.RCE_VARIANT || props.variant; // to facilitate testing
+
     this.tinymceInitOptions = this.wrapOptions(props.editorOptions);
     alertHandler.alertFunc = this.addAlert;
     this.handleContentTrayClosing = this.handleContentTrayClosing.bind(this);
     this.resizeObserver = new ResizeObserver(_entries => {
       this._handleFullscreenResize();
     });
+    this.AIToolsTray = undefined;
   } // when the RCE is put into fullscreen we need to move the div
   // tinymce mounts popup menus into from the body to the rce-wrapper
   // or the menus wind up behind the RCE. I can't find a way to
@@ -979,7 +1050,7 @@ class RCEWrapper extends React.Component {
   }
 
   replaceCode(code) {
-    if (code !== "" && window.confirm(formatMessage('Content in the editor will be changed. Press Cancel to keep the original content.'))) {
+    if (code !== '' && window.confirm(formatMessage('Content in the editor will be changed. Press Cancel to keep the original content.'))) {
       this.mceInstance().setContent(code);
     }
   }
@@ -1551,54 +1622,15 @@ class RCEWrapper extends React.Component {
       // things like table resizing and stuff.
       content_css: options.content_css || [],
       content_style: contentCSS,
-      menubar: mergeMenuItems('edit view insert format tools table', possibleNewMenubarItems),
+      menubar: mergeMenuItems(getMenubarForVariant(this.variant), possibleNewMenubarItems),
       // default menu options listed at https://www.tiny.cloud/docs/configure/editor-appearance/#menu
       // tinymce's default edit and table menus are fine
       // note: the tinymce paste command is used here instead of instructure_paste
       // since we currently can't effectively paste using the clipboard api anyway.
       // we include all the canvas specific items in the menu and toolbar
       // and rely on tinymce only showing them if the plugin is provided.
-      menu: mergeMenu({
-        edit: {
-          title: formatMessage('Edit'),
-          items: `undo redo | cut copy paste | selectall`
-        },
-        format: {
-          title: formatMessage('Format'),
-          items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align directionality | forecolor backcolor | removeformat'
-        },
-        insert: {
-          title: formatMessage('Insert'),
-          items: 'instructure_links instructure_image instructure_media instructure_document instructure_icon_maker | instructure_equation inserttable instructure_media_embed | hr'
-        },
-        tools: {
-          title: formatMessage('Tools'),
-          items: 'instructure_wordcount lti_tools_menuitem instructure_search_and_replace'
-        },
-        view: {
-          title: formatMessage('View'),
-          items: 'instructure_fullscreen instructure_exit_fullscreen instructure_html_view'
-        }
-      }, options.menu),
-      toolbar: mergeToolbar([{
-        name: formatMessage('Styles'),
-        items: ['fontsizeselect', 'formatselect']
-      }, {
-        name: formatMessage('Formatting'),
-        items: ['bold', 'italic', 'underline', 'forecolor', 'backcolor', 'inst_subscript', 'inst_superscript']
-      }, {
-        name: formatMessage('Content'),
-        items: ['instructure_links', 'instructure_image', 'instructure_record', 'instructure_documents', 'instructure_icon_maker']
-      }, {
-        name: formatMessage('External Tools'),
-        items: [...this.ltiToolFavorites, 'lti_tool_dropdown', 'lti_mru_button']
-      }, {
-        name: formatMessage('Alignment and Lists'),
-        items: ['align', 'bullist', 'inst_indent', 'inst_outdent']
-      }, {
-        name: formatMessage('Miscellaneous'),
-        items: ['removeformat', 'table', 'instructure_equation', 'instructure_media_embed']
-      }], options.toolbar),
+      menu: mergeMenu(getMenuForVariant(this.variant), options.menu),
+      toolbar: mergeToolbar(getToolbarForVariant(this.variant, this.ltiToolFavorites), options.toolbar),
       contextmenu: '',
       // show the browser's native context menu
       toolbar_mode: 'sliding',
@@ -1797,6 +1829,7 @@ class RCEWrapper extends React.Component {
       });
     }
 
+    const statusBarFeatures = getStatusBarFeaturesForVariant(this.variant, this.props.ai_text_tools);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, this.style.css), /*#__PURE__*/React.createElement(StoreProvider, {
       jwt: (_this$props$trayProps5 = this.props.trayProps) === null || _this$props$trayProps5 === void 0 ? void 0 : _this$props$trayProps5.jwt,
       refreshToken: (_this$props$trayProps6 = this.props.trayProps) === null || _this$props$trayProps6 === void 0 ? void 0 : _this$props$trayProps6.refreshToken,
@@ -1811,6 +1844,9 @@ class RCEWrapper extends React.Component {
         key: this.id,
         className: `${this.style.classNames.root} rce-wrapper`,
         ref: this._elementRef,
+        style: this.variant === 'full' ? {
+          marginBottom: '.5rem'
+        } : undefined,
         onFocus: this.handleFocusRCE,
         onBlur: this.handleBlurRCE
       }, this.state.shouldShowOnFocusButton && /*#__PURE__*/React.createElement(ShowOnFocusButton, {
@@ -1842,7 +1878,7 @@ class RCEWrapper extends React.Component {
         onNodeChange: this.onNodeChange,
         onEditorChange: this.onEditorChange,
         liveRegion: this.props.liveRegion
-      })), /*#__PURE__*/React.createElement(StatusBar, {
+      })), statusBarFeatures.length > 0 && /*#__PURE__*/React.createElement(StatusBar, {
         id: this._statusBarId,
         rceIsFullscreen: this._isFullscreen(),
         readOnly: this.props.readOnly,
@@ -1860,7 +1896,9 @@ class RCEWrapper extends React.Component {
         onWordcountModalOpen: () => launchWordcountModal(this.mceInstance(), document, {
           skipEditorFocus: true
         }),
-        disabledPlugins: this.pluginsToExclude
+        disabledPlugins: this.pluginsToExclude,
+        features: statusBarFeatures,
+        onAI: this.handleAIClick
       }), ((_this$props$trayProps10 = this.props.trayProps) === null || _this$props$trayProps10 === void 0 ? void 0 : _this$props$trayProps10.containingContext) && /*#__PURE__*/React.createElement(CanvasContentTray, Object.assign({
         mountNode: instuiPopupMountNode,
         key: this.id,
@@ -1875,6 +1913,16 @@ class RCEWrapper extends React.Component {
         onExited: this.KBShortcutModalExited,
         onDismiss: this.closeKBShortcutModal,
         open: this.state.KBShortcutModalOpen
+      }), this.props.ai_text_tools && this.AIToolsTray && /*#__PURE__*/React.createElement(this.AIToolsTray, {
+        open: this.state.AIToolsOpen,
+        container: document.querySelector('[role="main"]'),
+        mountNode: instuiPopupMountNode,
+        contextId: trayProps.contextId,
+        contextType: trayProps.contextId,
+        currentContent: this.getCurrentContentForAI(),
+        onClose: this.closeAITools,
+        onInsertContent: this.handleInsertAIContent,
+        onReplaceContent: this.handleReplaceAIContent
       }), this.state.confirmAutoSave ? /*#__PURE__*/React.createElement(Suspense, {
         fallback: /*#__PURE__*/React.createElement(Spinner, {
           renderTitle: renderLoading,
@@ -1909,7 +1957,8 @@ RCEWrapper.defaultProps = {
   maxInitRenderedRCEs: -1,
   features: {},
   timezone: (_Intl = Intl) === null || _Intl === void 0 ? void 0 : (_Intl$DateTimeFormat = _Intl.DateTimeFormat()) === null || _Intl$DateTimeFormat === void 0 ? void 0 : (_Intl$DateTimeFormat$ = _Intl$DateTimeFormat.resolvedOptions()) === null || _Intl$DateTimeFormat$ === void 0 ? void 0 : _Intl$DateTimeFormat$.timeZone,
-  canvasOrigin: ''
+  canvasOrigin: '',
+  variant: 'full'
 };
 RCEWrapper.skinCssInjected = false;
 

package/es/rce/RCEWrapperProps.js

@@ -17,6 +17,7 @@
  */
 import PropTypes from 'prop-types';
 import { trayPropTypes } from './plugins/shared/CanvasContentTray';
+import { RCEVariantValues } from './RCEVariants';
 import { PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW } from './StatusBar'; // This file contains the prop types for the RCEWrapper component, so that types can be shared without having
 // to refactor RCEWrapper.js into typescript.
 
@@ -49,7 +50,7 @@ export const ltiToolsPropType = PropTypes.arrayOf(PropTypes.shape({
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   // is this a favorite tool?
   favorite: PropTypes.bool,
-  always_on: PropTypes.bool,
+  on_by_default: PropTypes.bool,
   name: PropTypes.string,
   description: PropTypes.string,
   icon_url: PropTypes.string,
@@ -127,5 +128,7 @@ export const rceWrapperPropTypes = {
   flashAlertTimeout: PropTypes.number,
   timezone: PropTypes.string,
   userCacheKey: PropTypes.string,
-  externalToolsConfig: externalToolsConfigPropType
+  externalToolsConfig: externalToolsConfigPropType,
+  ai_text_tools: PropTypes.bool,
+  variant: PropTypes.oneOf(RCEVariantValues)
 };