@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/util/loadingPlaceholder.js

@@ -15,32 +15,33 @@
  * 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 { isAudio, isImage, isVideo } from '../rce/plugins/shared/fileTypeUtils';
 import { AUDIO_PLAYER_SIZE, VIDEO_SIZE_DEFAULT } from '../rce/plugins/instructure_record/VideoOptionsTray/TrayController';
 import formatMessage from '../format-message';
 import { trimmedOrNull } from './string-util';
 import { assertNever } from './assertNever';
 import { isTextNode } from './elem-util';
+
 /**
  * Determines what type of placeholder is appropriate for a given file information.
  */
-
 export async function placeholderInfoFor(fileMetaProps) {
   var _fileMetaProps$title, _trimmedOrNull;
-
   const fileName = (_fileMetaProps$title = fileMetaProps.title) !== null && _fileMetaProps$title !== void 0 ? _fileMetaProps$title : fileMetaProps.name;
   const visibleLabel = (_trimmedOrNull = trimmedOrNull(fileName)) !== null && _trimmedOrNull !== void 0 ? _trimmedOrNull : formatMessage('Loading...');
   const ariaLabel = formatMessage('Loading placeholder for {fileName}', {
     fileName: fileName !== null && fileName !== void 0 ? fileName : 'unknown filename'
   });
-
+  if (typeof fileMetaProps.contentType !== 'string') {
+    throw new Error('Invalid fileMetaProps.contentType');
+  }
+  const type = fileMetaProps.contentType || fileMetaProps.type;
   if (isImage(fileMetaProps.contentType) && fileMetaProps.displayAs !== 'link') {
     var _trimmedOrNull2;
-
     const imageUrl = (_trimmedOrNull2 = trimmedOrNull(fileMetaProps.domObject.preview)) !== null && _trimmedOrNull2 !== void 0 ? _trimmedOrNull2 : URL.createObjectURL(fileMetaProps.domObject);
     return new Promise((resolve, reject) => {
       const image = new Image();
-
       image.onload = () => resolve({
         type: 'block',
         visibleLabel,
@@ -50,12 +51,10 @@ export async function placeholderInfoFor(fileMetaProps) {
         vAlign: 'middle',
         backgroundImageUrl: image.src
       });
-
       image.onerror = () => reject(new Error('Failed to load image: ' + imageUrl));
-
       image.src = imageUrl;
     });
-  } else if (isVideo(fileMetaProps.contentType || fileMetaProps.type)) {
+  } else if (typeof type === 'string' && isVideo(type)) {
     return {
       type: 'block',
       visibleLabel,
@@ -64,7 +63,7 @@ export async function placeholderInfoFor(fileMetaProps) {
       height: VIDEO_SIZE_DEFAULT.height,
       vAlign: 'bottom'
     };
-  } else if (isAudio(fileMetaProps.contentType || fileMetaProps.type)) {
+  } else if (typeof type === 'string' && isAudio(type)) {
     return {
       type: 'block',
       visibleLabel,
@@ -82,48 +81,48 @@ export async function placeholderInfoFor(fileMetaProps) {
   }
 }
 export function removePlaceholder(editor, unencodedName) {
-  const placeholderElem = editor.dom.doc.querySelector(`[data-placeholder-for="${encodeURIComponent(unencodedName)}"]`); // Fail gracefully
+  const placeholderElem = editor.dom.doc.querySelector(`[data-placeholder-for="${encodeURIComponent(unencodedName)}"]`);
 
+  // Fail gracefully
   if (!placeholderElem) return;
   editor.undoManager.ignore(() => {
-    editor.dom.remove(placeholderElem); // Cleanup data URIs
+    editor.dom.remove(placeholderElem);
 
-    placeholderElem.querySelectorAll('img').forEach( // Revoking non-object URLs is safe
+    // Cleanup data URIs
+    placeholderElem.querySelectorAll('img').forEach(
+    // Revoking non-object URLs is safe
     img => URL.revokeObjectURL(img.src));
   });
 }
+
 /**
  * Inserts a placeholder into a TinyMCE editor. It should be removed by calling removePlaceholder, to ensure
  * image resources are cleaned up.
  */
-
 export async function insertPlaceholder(editor, unencodedName, placeholderInfoPromise) {
-  const placeholderId = `placeholder-${placeholderIdCounter++}`; // Insert a minimal placeholder element into the editor.
+  const placeholderId = `placeholder-${placeholderIdCounter++}`;
 
+  // Insert a minimal placeholder element into the editor.
   editor.undoManager.ignore(() => editor.execCommand('mceInsertContent', false, `<span
             aria-label="${formatMessage('Loading')}"
-            data-placeholder-for="${encodeURIComponent(unencodedName)}"
+            data-placeholder-for="${encodeURIComponent(unencodedName || '')}"
             id="${placeholderId}"
             class="mceNonEditable"
             style="user-select: none; pointer-events: none; user-focus: none; display: inline-flex;"
-          ></span>&nbsp;` // Without the trailing &nbsp;, tinymce will place the cursor inside the placeholder, which we don't want.
+          ></span>&nbsp;`
+  // Without the trailing &nbsp;, tinymce will place the cursor inside the placeholder, which we don't want.
   ));
   const placeholderElem = editor.dom.doc.querySelector(`#${placeholderId}`);
-
   if (placeholderElem) {
     editor.undoManager.ignore(() => {
-      var _nextNode$data;
-
       // Remove the trailing space
       const nextNode = placeholderElem.nextSibling;
       placeholderElem.contentEditable = 'false';
-
-      if (isTextNode(nextNode) && nextNode !== null && nextNode !== void 0 && (_nextNode$data = nextNode.data) !== null && _nextNode$data !== void 0 && _nextNode$data.startsWith('\xA0'
-      /* nbsp */
-      )) {
+      if (isTextNode(nextNode) && nextNode?.data?.startsWith('\xA0' /* nbsp */)) {
         // Split out the non-breaking-space which only counts as length 1 for splitText
-        nextNode.splitText(1); // Remove the now split text node
+        nextNode.splitText(1);
 
+        // Remove the now split text node
         if (placeholderElem.nextSibling) {
           editor.dom.remove(placeholderElem.nextSibling);
         }
@@ -132,9 +131,9 @@ export async function insertPlaceholder(editor, unencodedName, placeholderInfoPr
   } else {
     throw new Error('Failed to find placeholder element after inserting it into the editor.');
   }
+  const placeholderInfo = await placeholderInfoPromise;
 
-  const placeholderInfo = await placeholderInfoPromise; // Fully initialize the placeholder. Done separately from inserting to avoid TinyMCE mangling the HTML
-
+  // Fully initialize the placeholder. Done separately from inserting to avoid TinyMCE mangling the HTML
   editor.undoManager.ignore(() => {
     // Set up the overall placeholder container
     placeholderElem.setAttribute('aria-label', placeholderInfo.ariaLabel);
@@ -146,22 +145,21 @@ export async function insertPlaceholder(editor, unencodedName, placeholderInfoPr
       alignItems: 'center',
       borderRadius: '10px',
       overflow: 'hidden'
-    }); // Create the spinner
+    });
 
+    // Create the spinner
     placeholderElem.innerHTML = spinnerSvg(placeholderInfo.type === 'inline' ? 'x-small' : 'medium', placeholderId + '-label');
     const spinnerElem = placeholderElem.firstElementChild;
-
     if (!spinnerElem) {
       throw new Error("Couldn't find the Spinner element in the placeholder");
-    } // Create the label
-
+    }
 
+    // Create the label
     const labelElem = editor.dom.doc.createElement('div');
     placeholderElem.appendChild(labelElem);
     Object.assign(labelElem.style, {
       color: '#2D3B45',
       zIndex: '1000',
-
       /* Restrict text to one line */
       display: 'inline-block',
       maxWidth: 'calc(100% - 10px)',
@@ -169,8 +167,9 @@ export async function insertPlaceholder(editor, unencodedName, placeholderInfoPr
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     });
-    labelElem.appendChild(editor.dom.doc.createTextNode(placeholderInfo.visibleLabel)); // Handle type specific stying
+    labelElem.appendChild(editor.dom.doc.createTextNode(placeholderInfo.visibleLabel));
 
+    // Handle type specific stying
     switch (placeholderInfo.type) {
       case 'inline':
         Object.assign(placeholderElem.style, {
@@ -182,7 +181,6 @@ export async function insertPlaceholder(editor, unencodedName, placeholderInfoPr
           backgroundColor: '#F5F5F5'
         });
         break;
-
       case 'block':
         {
           const {
@@ -203,7 +201,6 @@ export async function insertPlaceholder(editor, unencodedName, placeholderInfoPr
             verticalAlign: vAlign,
             backgroundColor: '#FFFFFF'
           });
-
           if (backgroundImageUrl != null) {
             const imageElem = document.createElement('img');
             imageElem.src = backgroundImageUrl;
@@ -224,13 +221,13 @@ export async function insertPlaceholder(editor, unencodedName, placeholderInfoPr
           }
         }
         break;
-
       default:
         // Ensure all valid placeholderInfo types are handled above.
         assertNever(placeholderInfo);
     }
-  }); // Prevent user interaction with the placeholder elements
+  });
 
+  // Prevent user interaction with the placeholder elements
   placeholderElem.querySelectorAll('*').forEach(elem => {
     if (elem instanceof HTMLElement) {
       elem.style.pointerEvents = 'none';
@@ -240,34 +237,35 @@ export async function insertPlaceholder(editor, unencodedName, placeholderInfoPr
   });
   return placeholderElem;
 }
+
 /**
  * Something for which a placeholder can be added to the editor.
  */
 
+/**
+ * Style of placeholder to be inserted into the editor.
+ */
+
 let placeholderIdCounter = 0;
+
 /**
  * A fully standalone version of InstUI <Spinner> that can be used inside TinyMCE's iframe without access to
  * Canvas's CSS or JS.
  */
 // language=html
-
 function spinnerSvg(size, labelId) {
   const radius = (() => {
     switch (size) {
       case 'x-small':
         return '0.5em';
-
       case 'small':
         return '1em';
-
       case 'large':
         return '2.25em';
-
       default:
         return '1.75em';
     }
   })();
-
   return `
   <span class="Spinner-root Spinner-default Spinner-${size}" role="presentation">
 		<svg class="Spinner-circle"

package/es/util/simpleCache.js

@@ -22,20 +22,16 @@
  * @param compute The function to compute values in the cache
  * @param cache The map to use as a cache
  */
-export function simpleCache(compute) {
-  let cache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Map();
+export function simpleCache(compute, cache = new Map()) {
   return {
     cache,
-
     get(key) {
       if (cache.has(key)) {
         return cache.get(key);
       }
-
       const value = compute(key);
       cache.set(key, value);
       return value;
     }
-
   };
 }

package/es/util/string-util.js

@@ -26,6 +26,7 @@ export function emptyAsNull(str) {
   if (str.length === 0) return null;
   return str;
 }
+
 /**
  * Returns null if the string is null, undefined, is empty, or contains only whitespace.
  *
@@ -39,7 +40,6 @@ export function emptyAsNull(str) {
  *
  * @param str
  */
-
 export function trimmedOrNull(str) {
   if (str == null) return null;
   str = str.trim();

package/es/util/textarea-editing-util.js

@@ -15,8 +15,10 @@
  * 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 * as textFieldEdit from 'text-field-edit';
 import { assertNever } from './assertNever';
+
 /**
  * Represents a subset of the editing actions that can be taken on a <textarea> using the text-field-edit library.
  *
@@ -32,23 +34,20 @@ import { assertNever } from './assertNever';
  */
 export function performTextEditActionOnTextarea(textarea, editAction) {
   var _editAction$before, _editAction$after;
-
   switch (editAction.action) {
     case 'insert':
       return textFieldEdit.insert(textarea, editAction.text);
-
     case 'wrapSelection':
       return textFieldEdit.wrapSelection(textarea, (_editAction$before = editAction.before) !== null && _editAction$before !== void 0 ? _editAction$before : '', (_editAction$after = editAction.after) !== null && _editAction$after !== void 0 ? _editAction$after : '');
-
     default:
       assertNever(editAction);
   }
 }
+
 /**
  * Executes the given text edit actions on an object representing the important state of textarea editing,
  * the current text, selection start, and selection end.
  */
-
 export function performTextEditActionsOnString(args) {
   let {
     text: currentText,
@@ -62,11 +61,9 @@ export function performTextEditActionsOnString(args) {
         selStart += action.text.length;
         selEnd = selStart;
         break;
-
       case 'wrapSelection':
         {
           var _action$before, _action$after;
-
           const before = (_action$before = action.before) !== null && _action$before !== void 0 ? _action$before : '';
           const after = (_action$after = action.after) !== null && _action$after !== void 0 ? _action$after : '';
           currentText = currentText.substring(0, selStart) + before + currentText.substring(selStart, selEnd) + after + currentText.substring(selEnd);
@@ -74,7 +71,6 @@ export function performTextEditActionsOnString(args) {
           selEnd += before.length;
         }
         break;
-
       default:
         assertNever(action);
     }

package/es/util/tinymce-plugin-util.js

@@ -32,21 +32,16 @@ export function toolbarIconHelperFor(editor, ariaLabel) {
   // There are a few different potential button selectors
   const containerSelector = ['.tox-tbtn', '.tox-split-button'].map(buttonSel => `${buttonSel}[aria-label="${CSS.escape(ariaLabel)}"] .tox-icon`).join(',');
   const $svgContainer = editor.$(containerSelector, document);
-
   if ($svgContainer.length === 0) {
     console.error(`Failed to find TinyMCE toolbar button for ariaLabel "${ariaLabel}" using selector: ${containerSelector}`);
   }
-
   return {
     updateIcon(iconName) {
       const svg = editor.ui.registry.getAll().icons[iconName];
-
       if (!svg) {
         console.error(`Invalid icon name given for button labeled "${ariaLabel}": ${iconName}`);
       }
-
       $svgContainer.html(svg);
     }
-
   };
 }

package/es/util/url-util.js

@@ -15,18 +15,18 @@
  * 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 * as URI from 'uri-js';
+
 /**
  * Attempts to build a URL from the given string, and returns null if it is not a valid URL, rather than
  * throwing an exception, as the URL constructor does.
  */
-
 export function parseUrlOrNull(url, base) {
   if (!url) return null;
-
   try {
     return new URL(url, base);
-  } catch (e) {
+  } catch (_e) {
     return null;
   }
 }
@@ -38,6 +38,10 @@ export function relativizeUrl(url) {
   delete parsed.port;
   return URI.serialize(parsed);
 }
+export function parseUrlPath(url) {
+  return URI.parse(url).path;
+}
+
 /**
  * Converts the given URL into a relative URL if it meets the following criteria:
  * - is parsable by the browser URL class
@@ -52,50 +56,46 @@ export function relativizeUrl(url) {
  * @param inputUrlStr URL to relativize
  * @param origin Origin to check for
  */
-
 export function relativeHttpUrlForHostname(inputUrlStr, origin) {
   if (inputUrlStr == null || inputUrlStr === '') {
     return inputUrlStr;
   }
-
-  if (!(inputUrlStr !== null && inputUrlStr !== void 0 && inputUrlStr.match(/^https?:/i)) || !(origin !== null && origin !== void 0 && origin.match(/^https?:/i))) {
+  if (!inputUrlStr?.match(/^https?:/i) || !origin?.match(/^https?:/i)) {
     // Already relative or not a http/https protocol url
     return inputUrlStr;
   }
-
   const url = parseUrlOrNull(inputUrlStr);
-
   if (url == null) {
     return inputUrlStr;
-  } // Handle the simple case of origins matching. Note that the parsed URL will always have a lowercase origin
-  // new URL("hTTps://CaNvAs.CoM").origin === 'https://canvas.com'
-
+  }
 
+  // Handle the simple case of origins matching. Note that the parsed URL will always have a lowercase origin
+  // new URL("hTTps://CaNvAs.CoM").origin === 'https://canvas.com'
   if (url.origin === origin.toLowerCase()) {
     return relativizeUrl(inputUrlStr);
-  } // Handle the more complex case of hostname/port matching
-
+  }
 
+  // Handle the more complex case of hostname/port matching
   const originUrl = parseUrlOrNull(origin);
-  const originHostname = originUrl === null || originUrl === void 0 ? void 0 : originUrl.hostname; // Port checks are only needed if the port is not the default port for http or https.
+  const originHostname = originUrl?.hostname;
+
+  // Port checks are only needed if the port is not the default port for http or https.
   // If the port isn't an http port, then we don't want equivalence, especially for local origins,
   // since you might be running canvas on "localhost:3000" and some LTI tool on "localhost:4000"
   // But elsewhere, "http://canvas.com:80" and "http://canvas.com" are equivalent
-
   const urlUsesHttpPort = url.port === '80' || url.port === '443' || url.port === '';
-  const originUsesHttpPort = originUrl == null || (originUrl === null || originUrl === void 0 ? void 0 : originUrl.port) === '80' || (originUrl === null || originUrl === void 0 ? void 0 : originUrl.port) === '443' || (originUrl === null || originUrl === void 0 ? void 0 : originUrl.port) === '';
+  const originUsesHttpPort = originUrl == null || originUrl?.port === '80' || originUrl?.port === '443' || originUrl?.port === '';
   const portCheckNeeded = !(urlUsesHttpPort && originUsesHttpPort);
-
-  if (portCheckNeeded && (originUrl === null || originUrl === void 0 ? void 0 : originUrl.port) !== (url === null || url === void 0 ? void 0 : url.port)) {
+  if (portCheckNeeded && originUrl?.port !== url?.port) {
     return inputUrlStr;
   }
-
-  if (url.hostname === (originHostname === null || originHostname === void 0 ? void 0 : originHostname.toLowerCase())) {
+  if (url.hostname === originHostname?.toLowerCase()) {
     return relativizeUrl(inputUrlStr);
   } else {
     return inputUrlStr;
   }
 }
+
 /**
  * Adds a record of query parameters to a URL. null or undefined values in the record are ignored.
  *
@@ -105,34 +105,25 @@ export function relativeHttpUrlForHostname(inputUrlStr, origin) {
  * @param inputUrlStr The URL string to parse
  * @param queryParams A record containing the query parameters to add
  */
-
 export function addQueryParamsToUrl(inputUrlStr, queryParams) {
   var _parsedUrl$query;
-
   if (inputUrlStr == null) {
     return null;
   }
-
   const paramEntries = Object.entries(queryParams);
-
   if (paramEntries.length === 0) {
     return inputUrlStr;
   }
-
   const parsedUrl = URI.parse(inputUrlStr);
-
   if (parsedUrl == null) {
     return null;
   }
-
   const searchParams = new URLSearchParams((_parsedUrl$query = parsedUrl.query) !== null && _parsedUrl$query !== void 0 ? _parsedUrl$query : '');
-
   for (const [paramName, paramValue] of paramEntries) {
     if (paramValue != null) {
       searchParams.set(paramName, paramValue);
     }
   }
-
   parsedUrl.query = searchParams.toString();
   return URI.serialize(parsedUrl);
 }