@instructure/canvas-rce 5.14.0 → 5.14.2

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

@@ -15,17 +15,21 @@
  * 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 React from 'react';
 import ReactDOM from 'react-dom';
 import formatMessage from '../format-message';
 import { Spinner } from '@instructure/ui-spinner';
 import { getData, setData } from './jqueryish_funcs';
-export const previewableMimeTypes = ['application/vnd.openxmlformats-officedocument.wordprocessingml.template', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.sun.xml.writer', 'application/excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/rtf', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.sun.xml.impress', 'application/vnd.sun.xml.calc', 'application/vnd.ms-excel', 'application/msword', 'application/mspowerpoint', 'application/rtf', 'application/vnd.oasis.opendocument.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow', 'text/plain', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/postscript', 'application/pdf', 'application/vnd.ms-powerpoint']; // check to see if a file of a certan mimeType is previewable inline in the browser
-// ex: isPreviewable("application/mspowerpoint")  -> true
+export const previewableMimeTypes = ['application/vnd.openxmlformats-officedocument.wordprocessingml.template', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.sun.xml.writer', 'application/excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/rtf', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.sun.xml.impress', 'application/vnd.sun.xml.calc', 'application/vnd.ms-excel', 'application/msword', 'application/mspowerpoint', 'application/rtf', 'application/vnd.oasis.opendocument.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow', 'text/plain', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/postscript', 'application/pdf', 'application/vnd.ms-powerpoint'];
 
+// check to see if a file of a certan mimeType is previewable inline in the browser
+// ex: isPreviewable("application/mspowerpoint")  -> true
 export function isPreviewable(mimeType) {
   return previewableMimeTypes.includes(mimeType);
-} // Show a loading spinner
+}
+
+// Show a loading spinner
 // The typical use is to show the spinner next to a canvas file link
 // while the inline preview is loading. It's also used when previewing
 // student submitted files in speedgrader, in which case $link is really
@@ -35,7 +39,6 @@ export function isPreviewable(mimeType) {
 //
 // $link: the DOM node that serves as the reference for locating the spinner
 // position: one of 'adjacent' or 'centered'
-
 export function showLoadingImage($link) {
   let position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'adjacent';
   const dir = $link && window.getComputedStyle($link).direction || 'ltr';
@@ -50,7 +53,6 @@ export function showLoadingImage($link) {
   const list = getData($link, 'loading_images') || [];
   list.push($imageHolder);
   setData($link, 'loading_images', list);
-
   if (!$link.style.position || $link.style.position === 'static') {
     const top = `${boundingBox.top + window.scrollY + (position === 'adjacent' ? 0 : boundingBox.height / 2)}px`;
     const left = `${offsetLeft}px`;
@@ -62,8 +64,7 @@ export function showLoadingImage($link) {
     $imageHolder.setAttribute('style', `z-index:${zIndex}; position: absolute; top: ${top}; left: ${left}; margin-inline-start:${imageMarginInlineStart}; margin-top: ${imageMarginTop}`);
     $link.appendChild($imageHolder);
   }
-
-  ReactDOM.render( /*#__PURE__*/React.createElement(Spinner, {
+  ReactDOM.render(/*#__PURE__*/React.createElement(Spinner, {
     size: "x-small",
     renderTitle: formatMessage('Loading')
   }), $imageHolder);
@@ -71,7 +72,6 @@ export function showLoadingImage($link) {
 }
 export function removeLoadingImage($link) {
   var _$link$querySelector;
-
   (_$link$querySelector = $link.querySelector('.loading_image')) === null || _$link$querySelector === void 0 ? void 0 : _$link$querySelector.remove();
   const list = getData($link, 'loading_images') || [];
   list.forEach(item => {
@@ -95,7 +95,6 @@ export function loadDocPreview($container, options) {
   if (!($container instanceof HTMLElement)) {
     throw new Error('loadDocPreview requires a DOM element as first argument');
   }
-
   function tellAppIViewedThisInline() {
     // if I have a url to ping back to the app that I viewed this file inline, ping it.
     if (opts.attachment_view_inline_ping_url) {
@@ -104,7 +103,6 @@ export function loadDocPreview($container, options) {
       });
     }
   }
-
   if (opts.crocodoc_session_url) {
     const sanitizedUrl = sanitizeUrl(opts.crocodoc_session_url);
     const iframe = document.createElement('iframe');
@@ -143,12 +141,10 @@ export function loadDocPreview($container, options) {
         embedded: true,
         url: opts.public_url
       }).toString()}`;
-
       if (!opts.ajax_valid || opts.ajax_valid()) {
         const iframe = document.createElement('iframe');
         iframe.addEventListener('load', () => {
           tellAppIViewedThisInline('google');
-
           if (typeof opts.ready === 'function') {
             opts.ready();
           }
@@ -159,37 +155,33 @@ export function loadDocPreview($container, options) {
         $container.appendChild(iframe);
       }
     };
-
     if (opts.public_url) {
       loadGooglePreview();
     } else if (opts.attachment_id) {
       let url = `/api/v1/files/${opts.attachment_id}/public_url.json`;
-
       if (opts.submission_id) {
         url += '?' + new URLSearchParams({
           submission_id: opts.submission_id
         }).toString();
       }
-
       if (opts.verifier) {
         url += `${opts.submission_id ? '&' : '?'}verifier=${opts.verifier}`;
       } else {
         const match = window.location.search.match(/verifier=([^&]+)(?:&|$)/);
         const ver = match && match[1];
-
         if (ver) {
           url += `${opts.submission_id ? '&' : '?'}verifier=${ver}`;
         }
       }
-
-      showLoadingImage($container, 'centered'); // eslint-disable-next-line promise/catch-or-return
-
+      showLoadingImage($container, 'centered');
+      // eslint-disable-next-line promise/catch-or-return
       fetch(url).then(response => {
         if (!response.ok) throw new Error(`${response.status}: ${response.statusText}`);
         return response;
       }).then(response => response.json()).then(data => {
         if (data.public_url) {
-          opts = { ...opts,
+          opts = {
+            ...opts,
             ...data
           };
           loadGooglePreview();
@@ -204,31 +196,28 @@ export function loadDocPreview($container, options) {
   } else {
     // else fall back with a message that the document can't be viewed inline
     const paragraph = document.createElement('p');
-
     if (opts.attachment_preview_processing) {
       paragraph.textContent = formatMessage('The document preview is currently being processed. Please try again later.');
     } else {
       paragraph.textContent = formatMessage('This document cannot be displayed within Canvas.');
     }
-
-    $container.empty().append(paragraph);
+    $container.replaceChildren();
+    $container.appendChild(paragraph);
   }
 }
+
 /**
  * Replaces bad urls with harmless urls in cases where bad urls might cause harm
  * @param {string} url
  */
-
 export function sanitizeUrl(url) {
   const defaultUrl = 'about:blank';
-
   try {
-    const parsedUrl = new URL(url, window.location.origin); // eslint-disable-next-line no-script-url
-
+    const parsedUrl = new URL(url, window.location.origin);
+    // eslint-disable-next-line no-script-url
     if (parsedUrl.protocol === 'javascript:') {
       return defaultUrl;
     }
-
     return url;
   } catch (e) {
     // URL() throws TypeError if url is not a valid URL

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

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import { IconDownloadLine } from '@instructure/ui-icons/es/svg';
 import formatMessage from '../format-message';
 import { closest, getData, hide, insertAfter, setData, show } from './jqueryish_funcs';
@@ -23,10 +24,10 @@ import mediaCommentThumbnail from './media_comment_thumbnail';
 import { addParentFrameContextToUrl } from '../rce/plugins/instructure_rce_external_tools/util/addParentFrameContextToUrl';
 import { MathJaxDirective, Mathml } from './mathml';
 import { makeExternalLinkIcon } from './external_links';
-import getTranslations from '../getTranslations'; // in jest the es directory doesn't exist so stub the undefined svg
+import getTranslations from '../getTranslations';
 
+// in jest the es directory doesn't exist so stub the undefined svg
 const IconDownloadSVG = (IconDownloadLine === null || IconDownloadLine === void 0 ? void 0 : IconDownloadLine.src) || '<svg></svg>';
-
 function makeDownloadButton(download_url, filename) {
   const a = document.createElement('a');
   a.setAttribute('class', 'file_download_btn');
@@ -47,11 +48,9 @@ function makeDownloadButton(download_url, filename) {
   a.appendChild(srspan);
   return a;
 }
-
 function handleYoutubeLink($link) {
   const href = $link.getAttribute('href');
   const id = youTubeID(href || '');
-
   if (id && !$link.classList.contains('inline_disabled')) {
     const $after = document.createElement('a');
     $after.setAttribute('href', href);
@@ -97,32 +96,25 @@ function handleYoutubeLink($link) {
     insertAfter($after, $link);
   }
 }
-
 let preview_counter = 0;
-
 function previewId() {
   return `preview_${++preview_counter}`;
 }
-
 function buildUrl(url) {
   try {
     return new URL(url);
-  } catch (e) {// Don't raise an error
+  } catch (e) {
+    // Don't raise an error
   }
 }
-
 const addResourceIdentifiersToStudioContent = content => {
   content.querySelectorAll('iframe.lti-embed').forEach(iframe => {
     var _userContentContainer, _userContentContainer2;
-
     const url = buildUrl(iframe.getAttribute('src'));
-
     if (!url || !url.pathname.includes('external_tools/retrieve') || !url.search.includes('instructuremedia.com') || !url.search.includes('custom_arc_media_id')) {
       return;
     }
-
     const userContentContainer = iframe.closest('.user_content');
-
     if (userContentContainer !== null && userContentContainer !== void 0 && (_userContentContainer = userContentContainer.dataset) !== null && _userContentContainer !== void 0 && _userContentContainer.resourceType && userContentContainer !== null && userContentContainer !== void 0 && (_userContentContainer2 = userContentContainer.dataset) !== null && _userContentContainer2 !== void 0 && _userContentContainer2.resourceId) {
       url.searchParams.set('com_instructure_course_canvas_resource_type', userContentContainer.dataset.resourceType);
       url.searchParams.set('com_instructure_course_canvas_resource_id', userContentContainer.dataset.resourceId);
@@ -130,7 +122,6 @@ const addResourceIdentifiersToStudioContent = content => {
     }
   });
 };
-
 export function enhanceUserContent() {
   let container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
   let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -140,19 +131,16 @@ export function enhanceUserContent() {
     kalturaSettings,
     disableGooglePreviews,
     canvasLinksTarget,
-
     /**
      * For MathML configuration
      */
     new_math_equation_handling,
     explicit_latex_typesetting,
     locale,
-
     /**
      * When used inside of an LTI tool, this contains the canvas global id of the tool.
      */
     containingCanvasLtiToolId,
-
     /**
      * Contingency plan in case new instfs media links cause problems in rich content.
      */
@@ -166,12 +154,10 @@ export function enhanceUserContent() {
     console.error('Failed loading the language file for', locale, '. Falling back to English.');
   });
   const content = container instanceof HTMLElement && container || document.getElementById('content') || document;
-
   const showFilePreviewEx = event => showFilePreview(event, {
     canvasOrigin,
     disableGooglePreviews
   });
-
   content.querySelectorAll('.user_content:not(.enhanced)').forEach(elem => {
     elem.classList.add('unenhanced');
     explicit_latex_typesetting && elem.classList.add(MathJaxDirective.Process);
@@ -186,43 +172,40 @@ export function enhanceUserContent() {
     explicit_latex_typesetting && mathml.processNewMathInElem(unenhanced_elem);
     unenhanced_elem.querySelectorAll('img').forEach(img => {
       const src = img.getAttribute('src');
-
       if (!/^\/[^/]/.test(src)) {
         return;
-      } // if the image file is unpublished it's replaced with the lock image
+      }
+
+      // if the image file is unpublished it's replaced with the lock image
       // and canvas adds hidden=1 to the URL.
       // we also need to strip the alt text
-
-
       if (/hidden=1$/.test(src)) {
         img.setAttribute('alt', formatMessage('This image is currently unavailable'));
       }
     });
-    setData(unenhanced_elem, 'unenhanced_content_html', unenhanced_elem.innerHTML); // If instfs links are causing content problems,
-    // use this to show users old links instead
+    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
-
+    }
 
+    // guarantee relative links point to canvas
     if (canvasOrigin) {
       const attributes = ['href', 'src'];
       const selector = '[href], [src]';
@@ -230,38 +213,34 @@ export function enhanceUserContent() {
         try {
           for (const a of attributes) {
             const potentialUrl = element.getAttribute(a);
-
             if (!/^\/[^/]/.test(potentialUrl)) {
               continue;
             }
-
             const absoluteUrl = new URL(potentialUrl, canvasOrigin);
             element.setAttribute(a, absoluteUrl.href);
-
             if (canvasLinksTarget && element.tagName === 'A' && (!element.getAttribute('target') || element.getAttribute('target') === '_blank')) {
               element.setAttribute('target', canvasLinksTarget);
             }
           }
-        } catch (_ignore) {// canvasOrigin probably isn't a valid base url
+        } catch (_ignore) {
+          // canvasOrigin probably isn't a valid base url
         }
       });
-    } // add parent_frame_context to canvas iframes to allow them loading inside another LTI tool
-
+    }
 
+    // add parent_frame_context to canvas iframes to allow them loading inside another LTI tool
     if (containingCanvasLtiToolId != null) {
       unenhanced_elem.querySelectorAll('iframe[src]').forEach(iframeElem => {
         const src = iframeElem.getAttribute('src');
-
         if (src.startsWith(canvasOrigin)) {
           iframeElem.setAttribute('src', addParentFrameContextToUrl(src, containingCanvasLtiToolId));
         }
       });
-    } // tell LTI tools that they are launching from within the active RCE
-
+    }
 
+    // tell LTI tools that they are launching from within the active RCE
     unenhanced_elem.querySelectorAll('iframe[src]').forEach(iframeElem => {
       const src = iframeElem.getAttribute('src');
-
       if (src.startsWith(canvasOrigin)) {
         iframeElem.setAttribute('src', src.replace('display=in_rce', 'display=borderless'));
       }
@@ -275,9 +254,7 @@ export function enhanceUserContent() {
       const $linkSpan = document.createElement('span');
       const $linkText = childLink.innerHTML;
       $linkSpan.innerHTML = $linkText;
-
       while (childLink.firstChild) childLink.removeChild(childLink.firstChild);
-
       childLink.appendChild($linkSpan);
       const externalLinkIcon = makeExternalLinkIcon(childLink);
       childLink.appendChild(externalLinkIcon);
@@ -285,21 +262,20 @@ export function enhanceUserContent() {
     addResourceIdentifiersToStudioContent(unenhanced_elem);
   });
   content.querySelectorAll('a.instructure_file_link, a.instructure_scribd_file').forEach(file_link => {
-    const href = buildUrl(file_link.href); // Don't attempt to enhance links with no href
+    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~]+)(?=[!*'();:@&=+$,/?#\[\]]|$)/);
-
     if (!matchesCanvasFile) {
       // a bug in the new RCE added instructure_file_link class name to all links
       // only proceed if this is a canvas file link
       return;
     }
-
     if (file_link.textContent.trim()) {
       file_link.addEventListener('click', showFilePreviewEx);
-      const filename = file_link.textContent; // instructure_file_link_holder is used to find file_preview_link
-
+      const filename = file_link.textContent;
+      // instructure_file_link_holder is used to find file_preview_link
       const $span = document.createElement('span');
       $span.setAttribute('class', 'instructure_file_holder link_holder instructure_file_link_holder');
       const qs = href.searchParams;
@@ -307,7 +283,6 @@ export function enhanceUserContent() {
       qs.append('download_frd', '1');
       const download_url = `${href.origin}${href.pathname.replace(/(?:\/(download|preview))?$/, '/download')}?${qs}`;
       const $download_btn = makeDownloadButton(download_url, filename);
-
       if (file_link.classList.contains('instructure_scribd_file')) {
         if (file_link.classList.contains('no_preview')) {
           // link downloads
@@ -321,22 +296,21 @@ export function enhanceUserContent() {
           file_link.classList.add('file_preview_link');
         }
       }
-
       file_link.classList.remove('instructure_file_link');
       file_link.classList.remove('instructure_scribd_file');
       file_link.parentElement.replaceChild($span, file_link);
       $span.appendChild(file_link);
       if ($download_btn) $span.appendChild($download_btn);
     }
-  }); // Some schools have been using 'file_preview_link' for inline previews
+  });
+
+  // Some schools have been using 'file_preview_link' for inline previews
   // outside of the RCE so find them all after we've gone through and
   // added our own (above)
-
   content.querySelectorAll('.instructure_file_link_holder a.file_preview_link, .instructure_file_link_holder a.scribd_file_preview_link').forEach($link => {
     if ($link.classList.contains('previewable')) {
       return;
     }
-
     const preview_id = previewId();
     $link.setAttribute('aria-expanded', 'false');
     $link.setAttribute('aria-controls', preview_id);
@@ -348,7 +322,6 @@ export function enhanceUserContent() {
     $preview_container.id = preview_id;
     $preview_container.setAttribute('style', 'display: none;');
     $link.parentElement.appendChild($preview_container);
-
     if ($link.classList.contains('auto_open')) {
       $link.click();
     }
@@ -359,25 +332,20 @@ export function enhanceUserContent() {
       const a = closest($thumbnail, 'a', content);
       a === null || a === void 0 ? void 0 : a.classList.add('instructure_inline_media_comment');
     });
-
     if ($anchor.matches('.instructure_inline_media_comment')) {
       $anchor.classList.remove('no-underline');
       mediaCommentThumbnail($anchor, 'normal', false, kalturaSettings);
     }
-
     if ($anchor.matches('.instructure_video_link, .instructure_audio_link')) {
       mediaCommentThumbnail($anchor, 'normal', true, kalturaSettings);
     }
-
     if (!$anchor.matches('.youtubed')) {
       handleYoutubeLink($anchor);
     }
   });
-
   if (customEnhanceFunc) {
     customEnhanceFunc();
   }
-
   content.querySelectorAll('.user_content.unenhanced').forEach($elem => {
     $elem.classList.remove('unenhanced');
     $elem.classList.add('enhanced');
@@ -387,9 +355,9 @@ export function enhanceUserContent() {
       $elem.submit();
       $elem.classList.add('submitted');
     });
-  }, 10); // Remove sandbox attribute from user content iframes to fix busted
+  }, 10);
+  // Remove sandbox attribute from user content iframes to fix busted
   // third-party content, like Google Drive documents.
-
   document.querySelectorAll('.user_content iframe[sandbox="allow-scripts allow-forms allow-same-origin"]').forEach(frame => {
     frame.removeAttribute('sandbox');
     const src = frame.src;

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

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import { IconExternalLinkLine } from '@instructure/ui-icons/es/svg';
 import { getTld } from './instructure_helper';
 import formatMessage from '../format-message';
@@ -42,19 +43,17 @@ export function makeAllExternalLinksExternalLinks() {
     if (!content) return;
     const tld = getTld(window.location.hostname);
     const links = content.querySelectorAll(`a[href*="//"]:not([href*="${tld}"])`); // technique for finding "external" links copied from https://davidwalsh.name/external-links-css
-
     for (let i = 0; i < links.length; i++) {
-      const $link = links[i]; // don't mess with the ones that were already processed in enhanceUserContent
-
+      const $link = links[i];
+      // don't mess with the ones that were already processed in enhanceUserContent
       if ($link.classList.contains('external')) continue;
       if ($link.matches('.open_in_a_new_tab')) continue;
       if ($link.querySelectorAll('img').length > 0) continue;
       if ($link.matches('.not_external')) continue;
-      if ($link.matches('.exclude_external_icon')) continue; // we have some pre-instui buttons that are styled links
-
+      if ($link.matches('.exclude_external_icon')) continue;
+      // we have some pre-instui buttons that are styled links
       if ($link.classList.contains('btn')) continue;
       const $linkToReplace = $link;
-
       if ($linkToReplace) {
         const $linkIndicator = makeExternalLinkIcon();
         $linkToReplace.classList.add('external');
@@ -64,9 +63,7 @@ export function makeAllExternalLinksExternalLinks() {
         const $linkSpan = document.createElement('span');
         const $linkText = $linkToReplace.innerHTML;
         $linkSpan.innerHTML = $linkText;
-
         while ($linkToReplace.firstChild) $linkToReplace.removeChild($linkToReplace.firstChild);
-
         $linkToReplace.appendChild($linkSpan);
         $linkToReplace.appendChild($linkIndicator);
       }

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

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import mediaCommentThumbnail from './media_comment_thumbnail';
 export * from './enhance_user_content';
 export { isPreviewable, loadDocPreview } from './doc_previews';