@instructure/canvas-rce 5.12.1 → 5.12.2

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.12.2 - 2024-01-31
+
+### Changed
+
+- Moved RCE's makeAllExternalLinksExternalLinks
+- Removed doc-previews package
+- Removed CommonJS build of RCE
+
 ## 5.12.1 - 2024-01-26
 
 ### Fixed

package/babel-register.js

@@ -22,13 +22,6 @@ require('@babel/register')({
   presets: [['@babel/preset-env'], ['@babel/preset-react', {}]],
   plugins: [
     ['@babel/plugin-proposal-decorators', {legacy: true}],
-    [
-      '@instructure/babel-plugin-themeable-styles',
-      {
-        postcssrc: require('@instructure/ui-postcss-config')()(),
-        themeablerc: {},
-      },
-    ],
   ],
   targets: {
     node: 'current',

package/babel.config.cjs.js

@@ -40,12 +40,5 @@ module.exports = {
       },
     ],
     ['@babel/plugin-proposal-decorators', {legacy: true}],
-    [
-      '@instructure/babel-plugin-themeable-styles',
-      {
-        postcssrc: require('@instructure/ui-postcss-config')()(),
-        themeablerc: {},
-      },
-    ],
   ],
 }

package/babel.config.js

@@ -84,15 +84,6 @@ module.exports = {
     ],
 
     ['@babel/plugin-proposal-decorators', {legacy: true}],
-
-    [
-      '@instructure/babel-plugin-themeable-styles',
-      {
-        ignore: () => false,
-        postcssrc: require('@instructure/ui-postcss-config')()(),
-        themeablerc: {},
-      },
-    ],
   ],
 
   targets: {

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

@@ -92,6 +92,10 @@ export function loadDocPreview($container, options) {
   };
   if (!$container) return; // an issue in specs
 
+  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) {

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

@@ -15,16 +15,16 @@
  * 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, IconExternalLinkLine } from '@instructure/ui-icons/es/svg';
+import { IconDownloadLine } from '@instructure/ui-icons/es/svg';
 import formatMessage from '../format-message';
 import { closest, getData, hide, insertAfter, setData, show } from './jqueryish_funcs';
-import { getTld, isExternalLink, showFilePreview, youTubeID } from './instructure_helper';
+import { isExternalLink, showFilePreview, youTubeID } from './instructure_helper';
 import mediaCommentThumbnail from './media_comment_thumbnail';
 import { addParentFrameContextToUrl } from '../rce/plugins/instructure_rce_external_tools/util/addParentFrameContextToUrl';
-import Mathml, { MathJaxDirective } from './mathml'; // in jest the es directory doesn't exist so stub the undefined svg
+import { MathJaxDirective, Mathml } from './mathml';
+import { makeExternalLinkIcon } from './external_links'; // 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>';
-const IconExternalLinkSVG = (IconExternalLinkLine === null || IconExternalLinkLine === void 0 ? void 0 : IconExternalLinkLine.src) || '<svg></svg>';
 
 function makeDownloadButton(download_url, filename) {
   const a = document.createElement('a');
@@ -47,22 +47,6 @@ function makeDownloadButton(download_url, filename) {
   return a;
 }
 
-function makeExternalLinkIcon(forLink) {
-  const dir = forLink && window.getComputedStyle(forLink).direction || 'ltr';
-  const $icon = document.createElement('span');
-  $icon.setAttribute('class', 'external_link_icon');
-  const style = `margin-inline-start: 5px; display: inline-block; text-indent: initial; ${dir === 'rtl' ? 'transform:scale(-1, 1)' : ''}`;
-  $icon.setAttribute('style', style);
-  $icon.setAttribute('role', 'presentation');
-  $icon.innerHTML = IconExternalLinkSVG;
-  $icon.firstChild.setAttribute('style', 'width:1em; height:1em; vertical-align:middle; fill:currentColor');
-  const srspan = document.createElement('span');
-  srspan.setAttribute('class', 'screenreader-only');
-  srspan.textContent = formatMessage('Links to an external site.');
-  $icon.appendChild(srspan);
-  return $icon;
-}
-
 function handleYoutubeLink($link) {
   const href = $link.getAttribute('href');
   const id = youTubeID(href || '');
@@ -354,43 +338,4 @@ export function enhanceUserContent() {
     const src = frame.src;
     frame.src = src;
   });
-}
-export function makeAllExternalLinksExternalLinks() {
-  // in 100ms (to give time for everything else to load), find all the external links and add give them
-  // the external link look and behavior (force them to open in a new tab)
-  setTimeout(function () {
-    const content = document.getElementById('content');
-    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
-
-      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.classList.contains('btn')) continue;
-      const $linkToReplace = $link;
-
-      if ($linkToReplace) {
-        const $linkIndicator = makeExternalLinkIcon();
-        $linkToReplace.classList.add('external');
-        $linkToReplace.querySelectorAll('span.ui-icon-extlink').forEach(c => c.remove);
-        $linkToReplace.setAttribute('target', '_blank');
-        $linkToReplace.setAttribute('rel', 'noreferrer noopener');
-        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);
-      }
-    }
-  }, 100);
 }

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

@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2011 - 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 { IconExternalLinkLine } from '@instructure/ui-icons/es/svg';
+import { getTld } from './instructure_helper';
+import formatMessage from '../format-message';
+const IconExternalLinkSVG = (IconExternalLinkLine === null || IconExternalLinkLine === void 0 ? void 0 : IconExternalLinkLine.src) || '<svg></svg>';
+export function makeExternalLinkIcon(forLink) {
+  const dir = forLink && window.getComputedStyle(forLink).direction || 'ltr';
+  const $icon = document.createElement('span');
+  $icon.setAttribute('class', 'external_link_icon');
+  const style = `margin-inline-start: 5px; display: inline-block; text-indent: initial; ${dir === 'rtl' ? 'transform:scale(-1, 1)' : ''}`;
+  $icon.setAttribute('style', style);
+  $icon.setAttribute('role', 'presentation');
+  $icon.innerHTML = IconExternalLinkSVG;
+  $icon.firstChild.setAttribute('style', 'width:1em; height:1em; vertical-align:middle; fill:currentColor');
+  const srspan = document.createElement('span');
+  srspan.setAttribute('class', 'screenreader-only');
+  srspan.textContent = formatMessage('Links to an external site.');
+  $icon.appendChild(srspan);
+  return $icon;
+}
+export function makeAllExternalLinksExternalLinks() {
+  // in 100ms (to give time for everything else to load), find all the external links and add give them
+  // the external link look and behavior (force them to open in a new tab)
+  setTimeout(function () {
+    const content = document.getElementById('content');
+    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
+
+      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.classList.contains('btn')) continue;
+      const $linkToReplace = $link;
+
+      if ($linkToReplace) {
+        const $linkIndicator = makeExternalLinkIcon();
+        $linkToReplace.classList.add('external');
+        $linkToReplace.querySelectorAll('span.ui-icon-extlink').forEach(c => c.remove);
+        $linkToReplace.setAttribute('target', '_blank');
+        $linkToReplace.setAttribute('rel', 'noreferrer noopener');
+        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);
+      }
+    }
+  }, 100);
+}

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

@@ -15,7 +15,6 @@
  * 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 $ from 'jquery';
 const MathJaxDirective = Object.freeze({
   Ignore: 'mathjax_ignore',
   Process: 'mathjax_process'
@@ -130,9 +129,9 @@ class Mathml {
             elem.querySelectorAll('.math_equation_latex').forEach(m => m.classList.add('fade-in-equation'));
           });
         } else {
-          // though isMathInElement ignores <math> w/in .hidden-readable elements,
+          // Though isMathInElement ignores <math> with/in .hidden-readable elements,
           // MathJax does not and will process it anyway. This is a problem when
-          // you open the equation editor while editing a quiz and it adds to the DOM
+          // you open the equation editor while editing a quiz, and it adds to the DOM
           // elements that will get saved with the quiz.
           // There's a feature request against MathJax (https://github.com/mathjax/MathJax/issues/505)
           // to add an ignoreClass config prop to the mml2jax processor, but it's not available.
@@ -140,7 +139,10 @@ class Mathml {
           // right after MathJax adds it.
           window.MathJax.Hub.Register.MessageHook('End Math', function (message) {
             const elm = Array.isArray(message[1]) ? message[1][0] : message[1];
-            $(elm).find('.hidden-readable [class^="MathJax"], .hidden-readable [id^="MathJax"]').remove();
+            const elements = elm.querySelectorAll('.hidden-readable [class^="MathJax"], .hidden-readable [id^="MathJax"]');
+            elements.forEach(function (element) {
+              element.remove();
+            });
           });
         } // leaving this here so I don't have to keep looking up how to see all messages
         // window.MathJax.Hub.Startup.signal.Interest(function (message) {
@@ -198,9 +200,9 @@ class Mathml {
     const mathElements = elem.getElementsByTagName('math');
 
     for (let i = 0; i < mathElements.length; i++) {
-      const $el = $(mathElements[i]);
+      const el = mathElements[i];
 
-      if ($el.is(':visible') && $el.parent('.hidden-readable').length <= 0 && $el.parent('.MJX_Assistive_MathML').length <= 0 // already mathjax'd
+      if (el.offsetParent !== null && !el.closest('.hidden-readable') && !el.closest('.MJX_Assistive_MathML') // already mathjax'd
       ) {
         return true;
       }
@@ -394,4 +396,4 @@ function handleNewMath(event) {
 }
 
 window.addEventListener(Mathml.processNewMathEventName, handleNewMath);
-export { Mathml as default, mathImageHelper, MathJaxDirective };
+export { Mathml, mathImageHelper, MathJaxDirective };

package/es/index.js

@@ -21,7 +21,7 @@ import { headerFor, originFromHost } from './rcs/api';
 import getTranslations from './getTranslations';
 import defaultTinymceConfig from './defaultTinymceConfig';
 import { setLocale } from './common/natcompare';
-import Mathml from './enhance-user-content/mathml';
+import { Mathml } from './enhance-user-content/mathml';
 export * from './enhance-user-content/index';
 export const defaultConfiguration = defaultTinymceConfig;
 export { instuiPopupMountNode } from './util/fullscreenHelpers';