@instructure/canvas-rce 5.14.2 → 5.15.1

package/es/rce/RCEWrapper.utils.js

@@ -0,0 +1,131 @@
+/*
+ * Copyright (C) 2025 - 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';
+
+// standard: string of tinymce menu commands
+// e.g. 'instructure_links | inserttable instructure_media_embed | hr'
+// custom: a string of tinymce menu commands
+// returns: standard + custom with any duplicate commands removed from custom
+export function mergeMenuItems(standard, custom) {
+  let c = custom?.trim?.();
+  if (!c) return standard;
+  const s = new Set(standard.split(/[\s|]+/));
+  // remove any duplicates
+  const c_array = c.split(/\s+/).filter(m => !s.has(m));
+  c = c_array.join(' ').replace(/^\s*\|\s*/, '').replace(/\s*\|\s*$/, '');
+  return `${standard} | ${c}`;
+}
+
+// standard: the incoming tinymce menu object
+// custom: tinymce menu object to merge into standard
+// returns: the merged result by mutating incoming standard arg.
+// It will add commands to existing menus, or add a new menu
+// if the custom one does not exist
+export function mergeMenu(standard, custom) {
+  if (!custom) return standard;
+  Object.keys(custom).forEach(k => {
+    const curr_m = standard[k];
+    if (curr_m) {
+      curr_m.items = mergeMenuItems(curr_m.items, custom[k].items);
+    } else {
+      standard[k] = {
+        ...custom[k]
+      };
+    }
+  });
+  return standard;
+}
+
+// standard: incoming tinymce toolbar array
+// custom: tinymce toolbar array to merge into standard
+// returns: the merged result by mutating the incoming standard arg.
+// It will add commands to existing toolbars, or add a new toolbar
+// if the custom one does not exist
+export function mergeToolbar(standard, custom) {
+  if (!custom) return standard;
+  // merge given toolbar data into the default toolbar
+  custom.forEach(tb => {
+    const curr_tb = standard.find(t => tb.name && formatMessage(tb.name) === t.name);
+    if (curr_tb) {
+      curr_tb.items.splice(curr_tb.items.length, 0, ...tb.items);
+    } else {
+      standard.push(tb);
+    }
+  });
+  return standard;
+}
+
+// standard: incoming array of plugin names
+// custom: array of plugin names to merge
+// exclusions: array of plugins to remove
+// returns: the merged result, duplicates and exclusions removed
+export function mergePlugins(standard, custom = [], exclusions = []) {
+  const union = new Set(standard);
+  for (const c of custom) {
+    union.add(c);
+  }
+  for (const e of exclusions) {
+    union.delete(e);
+  }
+  return [...union];
+}
+export function focusToolbar(el) {
+  const $firstToolbarButton = el.querySelector('.tox-tbtn');
+  if ($firstToolbarButton) {
+    $firstToolbarButton.focus();
+  }
+}
+export function focusFirstMenuButton(el) {
+  const $firstMenu = el.querySelector('.tox-mbtn');
+  if ($firstMenu) {
+    $firstMenu.focus();
+  }
+}
+export function isElementWithinTable(node) {
+  let elem = node;
+  while (elem) {
+    if (elem.tagName === 'TABLE' || elem.tagName === 'TD' || elem.tagName === 'TH') {
+      return true;
+    }
+    elem = elem.parentElement;
+  }
+  return false;
+}
+
+// plugins is an array of strings
+// the convention is that plugins starting with '-',
+// i.e. a hyphen, are to be disabled in the RCE instance
+export function parsePluginsToExclude(plugins) {
+  return plugins.filter(plugin => plugin.length > 0 && plugin[0] === '-').map(pluginToIgnore => pluginToIgnore.slice(1));
+}
+
+// if a placeholder image shows up in autosaved content, we have to remove it
+// because the data url gets converted to a blob, which is not valid when restored.
+// besides, the placeholder is intended to be temporary while the file
+// is being uploaded
+export function patchAutosavedContent(content, asText = false) {
+  const temp = document.createElement('div');
+  temp.innerHTML = content;
+  temp.querySelectorAll('[data-placeholder-for]').forEach(placeholder => {
+    // @ts-expect-error
+    placeholder.parentElement.removeChild(placeholder);
+  });
+  if (asText) return temp.textContent;
+  return temp.innerHTML;
+}

package/es/rce/RCEWrapperProps.js

@@ -20,7 +20,6 @@ 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.
 
@@ -67,7 +66,7 @@ export const ltiToolsPropType = PropTypes.arrayOf(PropTypes.shape({
     icon_url: PropTypes.string
   }), PropTypes.any])
 }));
-export const editorOptionsPropType = PropTypes.shape({
+export const EditorOptionsPropType = PropTypes.shape({
   // height of the RCE.
   // if a number interpreted as pixels.
   // if a string as a CSS value.
@@ -105,7 +104,7 @@ export const rceWrapperPropTypes = {
   }),
   canvasOrigin: PropTypes.string,
   defaultContent: PropTypes.string,
-  editorOptions: editorOptionsPropType,
+  editorOptions: EditorOptionsPropType,
   handleUnmount: PropTypes.func,
   editorView: PropTypes.oneOf([WYSIWYG_VIEW, PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW]),
   renderKBShortcutModal: PropTypes.bool,

package/es/rce/RceHtmlEditor.js

@@ -1,3 +1,4 @@
+import _pt from "prop-types";
 /*
  * Copyright (C) 2020 - present Instructure, Inc.
  *
@@ -15,13 +16,12 @@
  * 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, { useCallback, useEffect, useRef, useState } from 'react';
-import { func, string } from 'prop-types';
+import React, { useEffect, useState } from 'react';
 import formatMessage from '../format-message';
 import { SourceCodeEditor } from '@instructure/ui-source-code-editor';
 import beautify from 'js-beautify';
 const RceHtmlEditor = /*#__PURE__*/React.forwardRef((props, editorRef) => {
-  const [code, setCode] = useState(props.code);
+  const [_code, setCode] = useState(props.code);
   const label = formatMessage('html code editor');
   const [dir, setDir] = useState(getComputedStyle(document.body, null).direction);
   useEffect(() => {
@@ -46,7 +46,9 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((props, editorRef) => {
       document.head.appendChild(stylesheet);
     }
     // odds are, this won't change the dir.
-    setDir(getComputedStyle(editorRef.current || document.body, null).direction);
+    if (editorRef && 'current' in editorRef) {
+      setDir(getComputedStyle(editorRef.current || document.body, null).direction);
+    }
   }, [dir, editorRef]);
   const direction = ['ltr', 'rtl'].includes(dir) ? dir : 'ltr';
 
@@ -55,7 +57,7 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((props, editorRef) => {
     ref: editorRef,
     className: "RceHtmlEditor",
     style: {
-      height: props.height,
+      height: props.height || 'auto',
       overflow: 'hidden',
       textAlign: 'start'
     }
@@ -68,21 +70,20 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((props, editorRef) => {
     spellcheck: true,
     direction: direction,
     rtlMoveVisually: true,
-    height: props.height,
+    height: props.height || 'auto',
     defaultValue: beautify.html(props.code),
     onChange: value => {
       setCode(value);
-      props.onChange(value);
+      props.onChange?.(value);
     }
   }));
 });
 RceHtmlEditor.propTypes = {
-  code: string.isRequired,
-  height: string,
-  onChange: func
+  code: _pt.string.isRequired,
+  height: _pt.string,
+  onChange: _pt.func
 };
 RceHtmlEditor.defaultProps = {
-  height: 'auto',
   onChange: _value => {}
 };
 export default RceHtmlEditor;

package/es/rce/ResizeHandle.js

@@ -42,9 +42,8 @@ export default function ResizeHandle(props) {
     }
   }
   function handleFocus(event) {
-    var _props$onFocus;
     setIsFocused(true);
-    (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, event);
+    props.onFocus?.(event);
   }
   function handleBlur() {
     setIsFocused(false);

package/es/rce/ShowOnFocusButton/index.js

@@ -30,8 +30,8 @@ const hideStyle = {
   left: '-9999px'
 };
 export default class ShowOnFocusButton extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     this.state = {
       visible: false
     };

package/es/rce/StatusBar.js

@@ -38,7 +38,7 @@ export const PRETTY_HTML_EDITOR_VIEW = 'PRETTY';
 export const RAW_HTML_EDITOR_VIEW = 'RAW';
 
 // I don't know why eslint is reporting this, the props are all used
-/* eslint-disable react/no-unused-prop-types */
+
 StatusBar.propTypes = {
   id: string.isRequired,
   rceIsFullscreen: bool,
@@ -67,22 +67,17 @@ StatusBar.defaultProps = {
   disabledPlugins: []
 };
 
-/* eslint-enable react/no-unused-prop-types */
-
 // we use the array index because pathname may not be unique
-/* eslint-disable react/no-array-index-key */
-function renderPathString(_ref) {
-  let {
-    path
-  } = _ref;
+
+function renderPathString({
+  path
+}) {
   return path.reduce((result, pathName, index) => {
     return result.concat(/*#__PURE__*/React.createElement("span", {
       key: `${pathName}-${index}`
     }, /*#__PURE__*/React.createElement(Text, null, index > 0 ? /*#__PURE__*/React.createElement(IconMiniArrowEndLine, null) : null, pathName)));
   }, []);
 }
-/* eslint-enable react/no-array-index-key */
-
 function emptyTagIcon() {
   return /*#__PURE__*/React.createElement(SVGIcon, {
     viewBox: "0 0 24 24",

package/es/rce/contentInsertion.js

@@ -278,7 +278,6 @@ export function insertAudio(editor, audio, canvasOrigin) {
 function insertMedia(editor, media, renderMedia, canvasOrigin) {
   const src = mediaPlayerURLFromFile(media, canvasOrigin);
   if (editor.selection.isCollapsed()) {
-    var _result;
     let result = insertContent(editor, renderMedia(media, canvasOrigin));
     // for some reason, editor.selection.getEnd() returned from
     // insertContent is parent paragraph when inserting the
@@ -290,7 +289,7 @@ function insertMedia(editor, media, renderMedia, canvasOrigin) {
     // When the iframe is inserted, it doesn't allow the media to play
     // because the wrapping span captures the click events. Setting
     // contentEditable to false disables this behavior.
-    if ((_result = result) !== null && _result !== void 0 && _result.parentElement) {
+    if (result?.parentElement) {
       editor.dom.setAttrib(result.parentElement, 'contenteditable', false);
     }
     return result;

package/es/rce/contentRendering.js

@@ -55,8 +55,7 @@ export function renderLinkedImage(linkElem, image, canvasOrigin) {
     doNotLink: true
   })));
 }
-export function constructJSXImageElement(image, canvasOrigin) {
-  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+export function constructJSXImageElement(image, canvasOrigin, opts = {}) {
   const {
     href,
     url,
@@ -80,7 +79,8 @@ export function constructJSXImageElement(image, canvasOrigin) {
     alt: altText,
     src: imageSrc,
     width: image.width,
-    height: image.height
+    height: image.height,
+    loading: "lazy"
   }, otherAttributes));
   if (link && !opts.doNotLink) {
     return /*#__PURE__*/React.createElement("a", {
@@ -103,6 +103,7 @@ export function renderVideo(video, canvasOrigin) {
       allowfullscreen
       data-media-id="${getMediaId(video)}"
       data-media-type="video"
+      loading="lazy"
       src="${src}"
       style="width:${VIDEO_SIZE_DEFAULT.width};height:${VIDEO_SIZE_DEFAULT.height};display:inline-block;"
       title="${formatMessage('Video player for {title}', {
@@ -116,6 +117,7 @@ export function renderAudio(audio, canvasOrigin) {
   <iframe
       data-media-id="${getMediaId(audio)}"
       data-media-type="audio"
+      loading="lazy"
       src="${src}"
       style="width:${AUDIO_PLAYER_SIZE.width};height:${AUDIO_PLAYER_SIZE.height};display:inline-block;"
       title="${formatMessage('Audio player for {title}', {
@@ -128,11 +130,10 @@ export function getMediaId(media) {
   return media.media_id || media.media_entry_id || media.id || media.file_id;
 }
 export function updateImage(editor, img, attrs) {
-  var _editor$rceWrapper;
   // Workaround: When passing empty string to editor.dom.setAttribs it removes the attribute
   img.setAttribute('alt', attrs.altText);
   editor.dom.setAttribs(img, {
-    src: absoluteToRelativeUrl(attrs.url, (_editor$rceWrapper = editor.rceWrapper) === null || _editor$rceWrapper === void 0 ? void 0 : _editor$rceWrapper.getCanvasUrl()),
+    src: absoluteToRelativeUrl(attrs.url, editor.rceWrapper?.getCanvasUrl()),
     role: attrs.isDecorativeImage ? 'presentation' : null,
     width: attrs.appliedWidth,
     height: attrs.appliedHeight

package/es/rce/editorLanguage.js

@@ -112,4 +112,4 @@ function editorLanguage(locale) {
   }
   return mapping[locale.split('-')[0]];
 }
-module.exports = editorLanguage;
+exports.editorLanguage = editorLanguage;

package/es/rce/indicatorRegion.js

@@ -36,8 +36,7 @@ function box(el) {
 // the shape of the target's sillhouette on the editor's container. have to
 // subtract out the iframe's scroll since the target's position is relative to
 // the iframe's _document_, not its visible window.
-export default function indicatorRegion(editor, target) {
-  let offsetFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : offset;
+export default function indicatorRegion(editor, target, offsetFn = offset) {
   const iframe = editorIframe(editor);
   const outerShape = offsetFn(iframe);
   const innerShape = box(target);

package/es/rce/normalizeProps.js

@@ -17,15 +17,15 @@
  */
 
 import wrapInitCb from './wrapInitCb';
-export default function (props, tinymce) {
-  const initialEditorOptions = props.editorOptions(tinymce);
-  const editorOptions = wrapInitCb(props.mirroredAttrs, initialEditorOptions);
+export default function normalizeProps(props, tinyMCE) {
+  const initialEditorOptions = props.editorOptions ? props.editorOptions(tinyMCE) : {};
+  const editorOptions = wrapInitCb(props.mirroredAttrs || {}, initialEditorOptions);
   return {
     // other props, including overrides
     ...props,
     // enforced values, in addition to props and cannot be overridden by
     // props
     editorOptions,
-    tinymce
+    tinymce: tinyMCE
   };
 }

package/es/rce/plugins/instructure_color/clickCallback.js

@@ -22,7 +22,6 @@ import tinycolor from 'tinycolor2';
 import { ColorPopup } from './components/ColorPopup';
 const CONTAINER_ID = 'instructure-color-popup-container';
 export default function (editor) {
-  var _container;
   let container = document.getElementById(CONTAINER_ID);
   if (container == null) {
     container = document.createElement('div');
@@ -31,8 +30,7 @@ export default function (editor) {
   }
   const handleDismiss = () => {
     if (container) {
-      var _container$_reactRoot;
-      (_container$_reactRoot = container._reactRoot) === null || _container$_reactRoot === void 0 ? void 0 : _container$_reactRoot.unmount();
+      container._reactRoot?.unmount();
       container._reactRoot = null;
     }
   };
@@ -50,7 +48,7 @@ export default function (editor) {
       handleDismiss();
     });
   };
-  if ((_container = container) !== null && _container !== void 0 && _container._reactRoot) {
+  if (container?._reactRoot) {
     handleDismiss();
     document.removeEventListener('rce-text-block-popup-close', handleDismiss);
     return;

package/es/rce/plugins/instructure_color/components/ColorPicker.js

@@ -33,26 +33,24 @@ import { isTransparent, getContrastStatus, getDefaultColors } from './colorUtils
 
 // A custom type constraint that enforces at least one key is present
 
-const ColorPicker = _ref => {
-  var _tabs$foreground, _tabs$background, _tabs$background2, _tabs$border, _tabs$foreground2, _tabs$background3, _tabs$background4, _tabs$background5, _tabs$border2, _tabs$border3, _tabs$border4;
-  let {
-    tabs,
-    colorsInUse,
-    onCancel,
-    onSave
-  } = _ref;
-  const [currFgColor, setCurrFgColor] = useState((_tabs$foreground = tabs.foreground) === null || _tabs$foreground === void 0 ? void 0 : _tabs$foreground.color);
-  const [currBgColor, setCurrBgColor] = useState(isTransparent((_tabs$background = tabs.background) === null || _tabs$background === void 0 ? void 0 : _tabs$background.color) ? tabs.effectiveBgColor || '#ffffff' : (_tabs$background2 = tabs.background) === null || _tabs$background2 === void 0 ? void 0 : _tabs$background2.color);
-  const [currBorderColor, setCurrBorderColor] = useState((_tabs$border = tabs.border) === null || _tabs$border === void 0 ? void 0 : _tabs$border.color);
+const ColorPicker = ({
+  tabs,
+  colorsInUse,
+  onCancel,
+  onSave
+}) => {
+  const [currFgColor, setCurrFgColor] = useState(tabs.foreground?.color);
+  const [currBgColor, setCurrBgColor] = useState(isTransparent(tabs.background?.color) ? tabs.effectiveBgColor || '#ffffff' : tabs.background?.color);
+  const [currBorderColor, setCurrBorderColor] = useState(tabs.border?.color);
   const [activeTab, setActiveTab] = useState(() => {
     if (tabs.foreground) return 'foreground';
     if (tabs.background) return 'background';
     return 'border';
   });
   const [defaultColors] = useState(getDefaultColors());
-  const [customForeground, setCustomForeground] = useState(!!((_tabs$foreground2 = tabs.foreground) !== null && _tabs$foreground2 !== void 0 && _tabs$foreground2.color) && tabs.foreground.color !== tabs.foreground.default);
-  const [customBackground, setCustomBackground] = useState(!isTransparent((_tabs$background3 = tabs.background) === null || _tabs$background3 === void 0 ? void 0 : _tabs$background3.color) && ((_tabs$background4 = tabs.background) === null || _tabs$background4 === void 0 ? void 0 : _tabs$background4.color) !== ((_tabs$background5 = tabs.background) === null || _tabs$background5 === void 0 ? void 0 : _tabs$background5.default));
-  const [customBorder, setCustomBorder] = useState(!isTransparent((_tabs$border2 = tabs.border) === null || _tabs$border2 === void 0 ? void 0 : _tabs$border2.color) && ((_tabs$border3 = tabs.border) === null || _tabs$border3 === void 0 ? void 0 : _tabs$border3.color) !== ((_tabs$border4 = tabs.border) === null || _tabs$border4 === void 0 ? void 0 : _tabs$border4.default));
+  const [customForeground, setCustomForeground] = useState(!!tabs.foreground?.color && tabs.foreground.color !== tabs.foreground.default);
+  const [customBackground, setCustomBackground] = useState(!isTransparent(tabs.background?.color) && tabs.background?.color !== tabs.background?.default);
+  const [customBorder, setCustomBorder] = useState(!isTransparent(tabs.border?.color) && tabs.border?.color !== tabs.border?.default);
   const handleFgColorChange = useCallback(newColor => {
     setCurrFgColor(newColor);
   }, []);
@@ -109,16 +107,15 @@ const ColorPicker = _ref => {
     onSave(newcolors);
   }, [currBgColor, currBorderColor, currFgColor, customBackground, customBorder, customForeground, onSave]);
   const getColorPresets = variant => {
-    var _tabs$background6, _tabs$foreground3;
     const defaults = defaultColors;
-    if ((_tabs$background6 = tabs.background) !== null && _tabs$background6 !== void 0 && _tabs$background6.default) {
+    if (tabs.background?.default) {
       defaults[0] = tabs.background.default;
     }
-    if ((_tabs$foreground3 = tabs.foreground) !== null && _tabs$foreground3 !== void 0 && _tabs$foreground3.default) {
+    if (tabs.foreground?.default) {
       defaults[1] = tabs.foreground.default;
     }
     // return only unique colors
-    return [...defaults, ...((colorsInUse === null || colorsInUse === void 0 ? void 0 : colorsInUse[variant]) || [])].filter((c, i, a) => a.indexOf(c) === i && !isTransparent(c));
+    return [...defaults, ...(colorsInUse?.[variant] || [])].filter((c, i, a) => a.indexOf(c) === i && !isTransparent(c));
   };
   const renderColorMixer = (variant, enabled) => {
     let value = currBgColor;
@@ -169,12 +166,10 @@ const ColorPicker = _ref => {
   const getFirstColor = () => {
     let firstColor, firstColorLabel;
     if (activeTab === 'foreground' || activeTab === 'background' && !!tabs.foreground) {
-      var _tabs$foreground4;
-      firstColor = currFgColor || ((_tabs$foreground4 = tabs.foreground) === null || _tabs$foreground4 === void 0 ? void 0 : _tabs$foreground4.default) || defaultColors[0];
+      firstColor = currFgColor || tabs.foreground?.default || defaultColors[0];
       firstColorLabel = formatMessage('Color');
     } else if (activeTab === 'border' || activeTab === 'background' && !!tabs.border) {
-      var _tabs$border5;
-      firstColor = currBorderColor || ((_tabs$border5 = tabs.border) === null || _tabs$border5 === void 0 ? void 0 : _tabs$border5.default) || defaultColors[0];
+      firstColor = currBorderColor || tabs.border?.default || defaultColors[0];
       firstColorLabel = formatMessage('Border');
     }
     // @ts-expect-error

package/es/rce/plugins/instructure_color/components/ColorPopup.js

@@ -21,14 +21,13 @@ import React, { useCallback, useState } from 'react';
 import { Popover } from '@instructure/ui-popover';
 import { ColorPicker } from './ColorPicker';
 import formatMessage from '../../../../format-message';
-const ColorPopup = _ref => {
-  let {
-    tabs,
-    open,
-    positionTarget,
-    onCancel,
-    onChange
-  } = _ref;
+const ColorPopup = ({
+  tabs,
+  open,
+  positionTarget,
+  onCancel,
+  onChange
+}) => {
   const [recreateKey, setRecreateKey] = useState(0);
   const handleHideContent = useCallback(() => {
     onCancel();

package/es/rce/plugins/instructure_condensed_buttons/ui/list-button.js

@@ -109,10 +109,7 @@ export default function register(editor) {
       icon: listType.icon,
       text: listType.getTooltipText()
     }))),
-    onAction: () => {
-      var _listStyleInfoForSele;
-      return editor.execCommand(((_listStyleInfoForSele = listStyleInfoForSelectionOfEditor(editor)) === null || _listStyleInfoForSele === void 0 ? void 0 : _listStyleInfoForSele.listType) === 'OL' ? 'InsertOrderedList' : 'InsertUnorderedList');
-    },
+    onAction: () => editor.execCommand(listStyleInfoForSelectionOfEditor(editor)?.listType === 'OL' ? 'InsertOrderedList' : 'InsertUnorderedList'),
     onItemAction: (splitButtonApi, value) => {
       // @ts-expect-error
       const desiredListStyleInfo = listStyleInfos.byKey[value] || defaultStyleInfoForListType.UL;
@@ -121,7 +118,7 @@ export default function register(editor) {
       // When the user clicks the list button that matches the current list style in the selection,
       // we want to interpret that as un-list-ifying the selection
 
-      if ((currentListStyleInfo === null || currentListStyleInfo === void 0 ? void 0 : currentListStyleInfo.listStyleType) !== desiredListStyleInfo.listStyleType) {
+      if (currentListStyleInfo?.listStyleType !== desiredListStyleInfo.listStyleType) {
         editor.execCommand(desiredListStyleInfo.listType === 'UL' ? 'InsertUnorderedList' : 'InsertOrderedList', false, {
           'list-style-type': desiredListStyleInfo.listStyleType
         });
@@ -129,10 +126,7 @@ export default function register(editor) {
         editor.execCommand('RemoveList');
       }
     },
-    select: value => {
-      var _listStyleInfoForSele2;
-      return ((_listStyleInfoForSele2 = listStyleInfoForSelectionOfEditor(editor)) === null || _listStyleInfoForSele2 === void 0 ? void 0 : _listStyleInfoForSele2.listStyleType) === value;
-    },
+    select: value => listStyleInfoForSelectionOfEditor(editor)?.listStyleType === value,
     onSetup: api => {
       // Handle updating the icon on the toolbar based on
       // the type of list the user's selection is currently within
@@ -142,7 +136,7 @@ export default function register(editor) {
       const nodeChangeHandler = () => {
         const activeListType = listStyleInfoForSelectionOfEditor(editor);
         api.setActive(!!activeListType);
-        $iconSvgContainer.html(allIcons[(activeListType === null || activeListType === void 0 ? void 0 : activeListType.icon) || 'list-bull-default']);
+        $iconSvgContainer.html(allIcons[activeListType?.icon || 'list-bull-default']);
       };
       nodeChangeHandler();
       editor.on('NodeChange', nodeChangeHandler);

package/es/rce/plugins/instructure_condensed_buttons/ui/subscript-superscript-button.js

@@ -45,7 +45,7 @@ export default function register(editor) {
       function nodeChangeHandler() {
         const activeStyleInfo = styleInfos.find(b => editor.formatter.match(b.icon));
         api.setActive(!!activeStyleInfo);
-        iconHelper.updateIcon((activeStyleInfo === null || activeStyleInfo === void 0 ? void 0 : activeStyleInfo.icon) || defaultIcon);
+        iconHelper.updateIcon(activeStyleInfo?.icon || defaultIcon);
       }
       nodeChangeHandler();
       editor.on('NodeChange', nodeChangeHandler);

package/es/rce/plugins/instructure_documents/components/Link.js

@@ -33,7 +33,6 @@ import { isPreviewable } from '../../shared/Previewable';
 import { applyTimezoneOffsetToDate } from '../../shared/dateUtils';
 import RCEGlobals from '../../../RCEGlobals';
 export default function Link(props) {
-  var _RCEGlobals$getConfig;
   const [isHovering, setIsHovering] = useState(false);
   const {
     filename,
@@ -48,7 +47,7 @@ export default function Link(props) {
   const Icon = getIconFromType(content_type);
   const color = published ? 'success' : 'primary';
   // Uses user locale and timezone
-  const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
+  const configuredTimezone = RCEGlobals.getConfig()?.timezone;
   const dateString = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
   const publishedMsg = published ? formatMessage('published') : formatMessage('unpublished');
   function linkAttrsFromDoc() {

package/es/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -30,7 +30,7 @@ import formatMessage from '../../../../format-message';
 import MemoizedEquationEditorToolbar from '../EquationEditorToolbar';
 import { containsAdvancedSyntax } from './advancedOnlySyntax';
 import * as advancedPreference from './advancedPreference';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 import { css } from 'aphrodite';
 import { MathJaxDirective, Mathml } from '../../../../enhance-user-content/mathml';
 import styles from './styles';
@@ -51,9 +51,8 @@ export default class EquationEditorModal extends Component {
     this.advancedEditor = /*#__PURE__*/React.createRef();
     this.executeCommand = (cmd, advancedCmd) => {
       if (this.state.advanced) {
-        var _this$advancedEditor$;
         const insertionText = advancedCmd || cmd;
-        const textarea = (_this$advancedEditor$ = this.advancedEditor.current) === null || _this$advancedEditor$ === void 0 ? void 0 : _this$advancedEditor$._textarea;
+        const textarea = this.advancedEditor.current?._textarea;
         if (textarea) {
           insertTextIntoLatexTextarea(textarea, insertionText);
           this.setState({
@@ -151,14 +150,13 @@ export default class EquationEditorModal extends Component {
       }));
     };
     this.render = () => {
-      var _RCEGlobals$getFeatur;
       const {
         onModalClose
       } = this.props;
       return /*#__PURE__*/React.createElement(Modal, {
         "data-mce-component": true,
         label: formatMessage('Equation Editor'),
-        mountNode: instuiPopupMountNode,
+        mountNode: instuiPopupMountNodeFn,
         onClose: onModalClose,
         onDismiss: this.handleModalCancel,
         open: true,
@@ -220,7 +218,7 @@ export default class EquationEditorModal extends Component {
       }, /*#__PURE__*/React.createElement("span", {
         "data-testid": "mathml-preview-element",
         ref: this.previewElement,
-        className: (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.explicit_latex_typesetting ? MathJaxDirective.Process : null
+        className: RCEGlobals.getFeatures()?.explicit_latex_typesetting ? MathJaxDirective.Process : null
       })))), /*#__PURE__*/React.createElement(Modal.Footer, null, this.renderFooter()));
     };
     this.mathml = new Mathml(RCEGlobals.getFeatures(), RCEGlobals.getConfig());
@@ -279,12 +277,11 @@ export default class EquationEditorModal extends Component {
     }
   }
   stubMacros() {
-    var _this$mathField;
     // Mathlive's macros exist for a different use case;
     // we don't intend for our users to utilize them.
     // This effectively disables all of them to prevent
     // weird behaviors that users don't expect.
-    (_this$mathField = this.mathField) === null || _this$mathField === void 0 ? void 0 : _this$mathField.setOptions({
+    this.mathField?.setOptions({
       macros: {}
     });
   }