@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -15,33 +15,29 @@
  * 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 Bridge from '../../../bridge';
 import { StoreProvider } from '../shared/StoreContext';
 import formatMessage from '../../../format-message';
 import { headerFor, originFromHost } from '../../../rcs/api';
-import { instuiPopupMountNode } from '../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../util/fullscreenHelpers';
 import RCEGlobals from '../../RCEGlobals';
 export const handleUpload = (error, uploadData, onUploadComplete, uploadBookmark) => {
   let err_msg = error && Bridge.uploadMediaTranslations.UploadMediaStrings.UPLOADING_ERROR;
-
-  if ((error === null || error === void 0 ? void 0 : error.name) === 'FileSizeError') {
+  if (error?.name === 'FileSizeError') {
     err_msg = formatMessage('Size of caption file is greater than the maximum {max} kb allowed file size.', {
       max: error.maxBytes / 1000
     });
   }
-
   const editorComponent = Bridge.activeEditor();
   let newBookmark;
-
   if (uploadBookmark) {
     newBookmark = editorComponent.editor.selection.getBookmark(2, true);
     editorComponent.editor.selection.moveToBookmark(uploadBookmark);
   }
-
   onUploadComplete(err_msg, uploadData);
-
   if (newBookmark) {
     editorComponent.editor.selection.moveToBookmark(newBookmark);
   }
@@ -50,61 +46,53 @@ export default function (ed, document) {
   return import('@instructure/canvas-media').then(CanvasMedia => {
     const UploadMedia = CanvasMedia.default;
     let container = document.querySelector('.canvas-rce-media-upload');
-
     if (!container) {
       container = document.createElement('div');
       container.className = 'canvas-rce-media-upload';
       document.body.appendChild(container);
     }
-
     const handleDismiss = () => {
       ReactDOM.unmountComponentAtNode(container);
       ed.focus(false);
-    }; // We need to have a place to store the bookmark location
-    // while the upload happens.
+    };
 
+    // We need to have a place to store the bookmark location
+    // while the upload happens.
+    let uploadBookmark = null;
 
-    let uploadBookmark = null; // redux's activateMediaUpload action does the image placeholder,
+    // redux's activateMediaUpload action does the image placeholder,
     // but it also does the upload. We need to separate them if we
     // want to stay within the redux approach
-
     const handleStartUpload = fileProps => {
-      var _editorComponent$edit;
-
       Bridge.focusEditor(ed.rceWrapper);
       const editorComponent = Bridge.activeEditor();
-      uploadBookmark = editorComponent === null || editorComponent === void 0 ? void 0 : (_editorComponent$edit = editorComponent.editor) === null || _editorComponent$edit === void 0 ? void 0 : _editorComponent$edit.selection.getBookmark(2, true);
+      uploadBookmark = editorComponent?.editor?.selection.getBookmark(2, true);
       Bridge.insertImagePlaceholder(fileProps);
       handleDismiss();
     };
-
     const trayProps = Bridge.trayProps.get(ed);
-    ReactDOM.render( /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => {
-      var _RCEGlobals$getFeatur;
-
-      return /*#__PURE__*/React.createElement(UploadMedia, {
-        "data-mce-component": true,
-        rcsConfig: {
-          contextType: ed.settings.canvas_rce_user_context.type,
-          contextId: ed.settings.canvas_rce_user_context.id,
-          origin: originFromHost(contentProps.host),
-          headers: headerFor(contentProps.jwt)
-        },
-        userLocale: Bridge.userLocale,
-        mountNode: instuiPopupMountNode,
-        open: true,
-        liveRegion: () => document.getElementById('flash_screenreader_holder'),
-        onStartUpload: fileProps => handleStartUpload(fileProps),
-        onUploadComplete: (err, data) => handleUpload(err, data, contentProps.mediaUploadComplete, uploadBookmark),
-        onDismiss: handleDismiss,
-        tabs: {
-          record: true,
-          upload: true
-        },
-        uploadMediaTranslations: Bridge.uploadMediaTranslations,
-        media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id,
-        useStudioPlayer: (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) === null || _RCEGlobals$getFeatur === void 0 ? void 0 : _RCEGlobals$getFeatur.consolidated_media_player
-      });
-    }), container);
+    ReactDOM.render(/*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(UploadMedia, {
+      "data-mce-component": true,
+      rcsConfig: {
+        contextType: ed.settings.canvas_rce_user_context.type,
+        contextId: ed.settings.canvas_rce_user_context.id,
+        origin: originFromHost(contentProps.host),
+        headers: headerFor(contentProps.jwt)
+      },
+      userLocale: Bridge.userLocale,
+      mountNode: instuiPopupMountNodeFn,
+      open: true,
+      liveRegion: () => document.getElementById('flash_screenreader_holder'),
+      onStartUpload: fileProps => handleStartUpload(fileProps),
+      onUploadComplete: (err, data) => handleUpload(err, data, contentProps.mediaUploadComplete, uploadBookmark),
+      onDismiss: handleDismiss,
+      tabs: {
+        record: true,
+        upload: true
+      },
+      uploadMediaTranslations: Bridge.uploadMediaTranslations,
+      media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id,
+      useStudioPlayer: RCEGlobals.getFeatures()?.consolidated_media_player
+    })), container);
   });
 }

package/es/rce/plugins/instructure_record/mediaTranslations.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/>.
  */
+
 // IMPORTANT!
 // Do not import this file directly, but get it via Bridge.uploadMediaTranslations
 // This is because the locale, which is lazy imported, has to be loaded and

package/es/rce/plugins/instructure_record/plugin.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -17,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 clickCallback from './clickCallback';
 import bridge from '../../../bridge';
 import formatMessage from '../../../format-message';
@@ -31,10 +30,10 @@ const COURSE_PLUGIN_KEY = 'course_media';
 const USER_PLUGIN_KEY = 'user_media';
 const GROUP_PLUGIN_KEY = 'group_media';
 
+// @ts-expect-error
 function getMenuItems(ed) {
   const contextType = ed.settings.canvas_rce_user_context.type;
   const items = [];
-
   if (ed.getParam('show_media_upload')) {
     // test if it's ok
     items.push({
@@ -42,7 +41,6 @@ function getMenuItems(ed) {
       value: 'instructure_upload_media'
     });
   }
-
   if (contextType === 'course') {
     items.push({
       text: formatMessage('Course Media'),
@@ -54,7 +52,6 @@ function getMenuItems(ed) {
       value: 'instructure_group_media'
     });
   }
-
   items.push({
     text: formatMessage('User Media'),
     value: 'instructure_user_media'
@@ -62,36 +59,35 @@ function getMenuItems(ed) {
   return items;
 }
 
+// @ts-expect-error
 function doMenuItem(ed, value) {
   switch (value) {
     case 'instructure_upload_media':
       ed.execCommand('instructureRecord');
       break;
-
     case 'instructure_course_media':
       ed.focus(true);
       ed.execCommand('instructureTrayForMedia', false, COURSE_PLUGIN_KEY);
       break;
-
     case 'instructure_group_media':
       ed.focus(true);
       ed.execCommand('instructureTrayForMedia', false, GROUP_PLUGIN_KEY);
       break;
-
     case 'instructure_user_media':
       ed.focus(true);
       ed.execCommand('instructureTrayForMedia', false, USER_PLUGIN_KEY);
       break;
   }
-} // Register plugin
-
+}
 
+// Register plugin
 tinymce.PluginManager.add('instructure_record', function (ed) {
   ed.addCommand('instructureRecord', () => clickCallback(ed, document));
   ed.addCommand('instructureTrayForMedia', (ui, plugin_key) => {
     bridge.showTrayForPlugin(plugin_key, ed.id);
-  }); // Register menu items
+  });
 
+  // Register menu items
   ed.ui.registry.addNestedMenuItem('instructure_media', {
     text: formatMessage('Media'),
     icon: 'video',
@@ -106,8 +102,9 @@ tinymce.PluginManager.add('instructure_record', function (ed) {
         }
       };
     })
-  }); // Register buttons
+  });
 
+  // Register buttons
   ed.ui.registry.addMenuButton('instructure_record', {
     tooltip: formatMessage('Record/Upload Media'),
     icon: 'video',
@@ -117,32 +114,29 @@ tinymce.PluginManager.add('instructure_record', function (ed) {
       value: item.value,
       onAction: () => doMenuItem(ed, item.value)
     }))),
-
     onSetup(api) {
+      // @ts-expect-error
       function handleNodeChange(_e) {
         api.setDisabled(!isOKToLink(ed.selection.getContent()));
       }
-
       setTimeout(handleNodeChange);
       ed.on('NodeChange', handleNodeChange);
       return () => {
         ed.off('NodeChange', handleNodeChange);
       };
     }
-
   });
+
   /*
    * Register the Video "Options" button that will open the Video Options
    * tray.
    */
-
   const buttonAriaLabel = formatMessage('Show video options');
   ed.ui.registry.addButton('instructure-video-options', {
     onAction() {
       // show the tray
       videoTrayController.showTrayForEditor(ed);
     },
-
     text: formatMessage('Video Options'),
     tooltip: buttonAriaLabel
   });
@@ -156,7 +150,6 @@ tinymce.PluginManager.add('instructure_record', function (ed) {
     onAction() {
       audioTrayController.showTrayForEditor(ed);
     },
-
     text: formatMessage('Audio Options'),
     tooltip: formatMessage('Show audio options')
   });

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

@@ -15,33 +15,29 @@
  * 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 FindReplaceController from './components/FindReplaceTrayController';
 import { getSelectionContext } from './getSelectionContext';
 const CONTAINER_ID = 'instructure-find-replace-tray-container';
 export default function (editor, document) {
-  var _editor$selection, _editor$selection2;
-
   const plugin = editor.plugins.searchreplace;
-  const initalSelection = (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getContent({
+  const initalSelection = editor.selection?.getContent({
     format: 'text'
   });
-  if (initalSelection) (_editor$selection2 = editor.selection) === null || _editor$selection2 === void 0 ? void 0 : _editor$selection2.collapse(true);
+  if (initalSelection) editor.selection?.collapse(true);
   let container = document.getElementById(CONTAINER_ID);
-
   if (container == null) {
     container = document.createElement('div');
     container.id = CONTAINER_ID;
     document.body.appendChild(container);
   }
-
   const handleDismiss = () => {
     if (container) ReactDOM.unmountComponentAtNode(container);
     editor.focus(false);
   };
-
-  ReactDOM.render( /*#__PURE__*/React.createElement(FindReplaceController, {
+  ReactDOM.render(/*#__PURE__*/React.createElement(FindReplaceController, {
     plugin: plugin,
     onDismiss: handleDismiss,
     initialText: initalSelection,

package/es/rce/plugins/instructure_search_and_replace/components/FindReplaceTray.js

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -17,31 +16,32 @@ import _pt from "prop-types";
  * 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, { useEffect, useRef, useState } from 'react';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
+import { IconWarningSolid } from '@instructure/ui-icons';
 import { getTrayHeight } from '../../shared/trayUtils';
 import { View } from '@instructure/ui-view';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 import formatMessage from '../../../../format-message';
 import { Tray } from '@instructure/ui-tray';
 import { TextInput } from '@instructure/ui-text-input';
 import { Text } from '@instructure/ui-text';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
-export default function FindReplaceTray(_ref) {
-  let {
-    onNext,
-    onPrevious,
-    onFind,
-    onRequestClose,
-    onReplace,
-    index,
-    max,
-    initialText = '',
-    selectionContext = ['', '']
-  } = _ref;
+export default function FindReplaceTray({
+  onNext,
+  onPrevious,
+  onFind,
+  onRequestClose,
+  onReplace,
+  index,
+  max,
+  initialText = '',
+  selectionContext = ['', '']
+}) {
   const [findText, setFindText] = useState(initialText);
   const [replaceText, setReplaceText] = useState('');
   const [hasOpened, setHasOpened] = useState(false);
@@ -50,23 +50,19 @@ export default function FindReplaceTray(_ref) {
   const [alertReplaceText, setAlertReplaceText] = useState('');
   const trayRef = useRef(null);
   const liveRegionKey = useRef(0);
-  const srDupKey = useRef(0); // moves RCE when tray opens/closes, copied from CanvasContentTray
-
+  const srDupKey = useRef(0);
+  // moves RCE when tray opens/closes, copied from CanvasContentTray
   useEffect(() => {
-    var _trayRef$current;
-
     if (!hasOpened) return;
     let c = document.querySelector('[role="main"]');
     let target_w = 0;
     if (!c) return;
     const margin = window.getComputedStyle(c).direction === 'ltr' ? document.body.getBoundingClientRect().right - c.getBoundingClientRect().right : c.getBoundingClientRect().left;
-    target_w = c.offsetWidth - ((_trayRef$current = trayRef.current) === null || _trayRef$current === void 0 ? void 0 : _trayRef$current.offsetWidth) + margin;
-
+    target_w = c.offsetWidth - trayRef.current?.offsetWidth + margin;
     if (target_w >= 320 && target_w < c.offsetWidth) {
       c.style.boxSizing = 'border-box';
       c.style.width = `${target_w}px`;
     }
-
     return () => {
       c = document.querySelector('[role="main"]');
       if (!c) return;
@@ -76,10 +72,9 @@ export default function FindReplaceTray(_ref) {
   useEffect(() => {
     if (initialText) {
       onFind(initialText);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   function usePrevious(value) {
     const ref = useRef();
     useEffect(() => {
@@ -87,7 +82,6 @@ export default function FindReplaceTray(_ref) {
     }, [value]);
     return ref.current;
   }
-
   const prepend = selectionContext[0];
   const append = selectionContext[1];
   const srContextMsg = formatMessage('{prepend}{findText}{append}', {
@@ -97,15 +91,12 @@ export default function FindReplaceTray(_ref) {
   });
   const previousSrMsg = usePrevious(srContextMsg);
   const previousFindText = usePrevious(findText);
-
   const handleTextChange = e => {
     setFindText(e.target.value);
     onFind(e.target.value);
   };
-
   const handleFindKeyDown = e => {
     if (e.key !== 'Enter') return;
-
     if (e.shiftKey) {
       if (isButtonDisabled('previous')) return;
       onPrevious();
@@ -115,33 +106,27 @@ export default function FindReplaceTray(_ref) {
         onFind(findText);
         return;
       }
-
       if (isButtonDisabled('next')) return;
       onNext();
     }
   };
-
   const handleReplaceKeyDown = e => {
     if (e.key !== 'Enter') return;
     if (isButtonDisabled('replace')) return;
     const forward = !e.shiftKey;
     replace(replaceText, forward, false);
   };
-
   const replace = (newText, forward, all) => {
     onReplace(newText, forward, all);
-
     if (all) {
       setShowReplaceAlert('replaceAll');
     } else {
       setShowReplaceAlert('replace');
     }
-
     setAlertFindText(findText);
     setAlertReplaceText(newText);
     liveRegionKey.current++;
   };
-
   const alertText = showReplaceAlert === '' ? '' : showReplaceAlert === 'replace' ? formatMessage('Replaced {alertFindText} with {alertReplaceText}', {
     alertFindText,
     alertReplaceText
@@ -149,13 +134,11 @@ export default function FindReplaceTray(_ref) {
     alertFindText,
     alertReplaceText
   });
-
   const renderReplaceAlert = () => {
     if (!showReplaceAlert) {
       liveRegionKey.current = 0;
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
-
     return /*#__PURE__*/React.createElement(Alert, {
       variant: "success",
       renderCloseButtonLabel: "Close Alert",
@@ -165,26 +148,31 @@ export default function FindReplaceTray(_ref) {
       timeout: 3000
     }, alertText);
   };
-
   const renderScreenReaderAlert = () => {
     return /*#__PURE__*/React.createElement(ScreenReaderContent, null, alertText);
   };
-
-  const errMsg = formatMessage('No results found');
+  const errMsg = /*#__PURE__*/React.createElement(Flex, {
+    gap: "xx-small",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(IconWarningSolid, {
+    color: "error",
+    "data-testid": "error-icon"
+  }), /*#__PURE__*/React.createElement(Text, {
+    color: "danger",
+    size: "small"
+  }, formatMessage('No results found')));
   const messages = findText && max === 0 ? [{
     text: errMsg,
     type: 'error'
   }] : [];
-
   const resultText = () => {
-    const srErrMsg = messages.length === 0 ? '' : errMsg; // resolves issue where focus is lost when this (dis)appears
-
+    const srErrMsg = messages.length === 0 ? '' : errMsg;
+    // resolves issue where focus is lost when this (dis)appears
     if (max === 0) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, {
         "aria-live": "polite"
       }, srErrMsg), /*#__PURE__*/React.createElement(Text, null));
     }
-
     const msg = formatMessage('{index} of {max}', {
       index,
       max
@@ -192,12 +180,12 @@ export default function FindReplaceTray(_ref) {
     const srResultMsg = formatMessage('Result {index} of {max}.', {
       index,
       max
-    }); // necessary to force screen reader to read the same message while typing
+    });
 
+    // necessary to force screen reader to read the same message while typing
     if (srContextMsg === previousSrMsg && previousFindText != findText) {
       srDupKey.current++;
     } else srDupKey.current = 0;
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
       as: "span",
       key: srDupKey.current,
@@ -208,28 +196,23 @@ export default function FindReplaceTray(_ref) {
       "aria-hidden": "true"
     }, msg));
   };
-
   const isButtonDisabled = button => {
     switch (button) {
       case 'next':
       case 'previous':
         return max < 2;
-
       case 'replace':
         return !replaceText || index === 0;
-
       case 'replaceAll':
         return !replaceText || max < 2 || index === 0;
-
       default:
         return false;
     }
   };
-
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
     label: formatMessage('Find and Replace'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn(),
     onDismiss: onRequestClose,
     open: true,
     placement: "end",

package/es/rce/plugins/instructure_search_and_replace/components/FindReplaceTrayController.js

@@ -1,5 +1,4 @@
 import _pt from "prop-types";
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -17,29 +16,26 @@ import _pt from "prop-types";
  * 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, { useState } from 'react';
 import FindReplaceTray from './FindReplaceTray';
-export default function FindReplaceTrayController(_ref) {
-  let {
-    plugin,
-    onDismiss,
-    initialText = '',
-    undoManager,
-    getSelectionContext
-  } = _ref;
+export default function FindReplaceTrayController({
+  plugin,
+  onDismiss,
+  initialText = '',
+  undoManager,
+  getSelectionContext
+}) {
   // this component really just exists to make the index easier to track
   const [findIndex, setFindIndex] = useState(0);
   const [findCount, setFindCount] = useState(0);
   const [selectionContext, setSelectionContext] = useState(['', '']);
-
   const updateSelectionContext = () => {
     const srText = getSelectionContext();
     setSelectionContext(srText);
   };
-
   const newFindIndex = direction => {
     let newIndex = 0;
-
     if (findCount === 0) {
       newIndex = 0;
     } else if (direction === 1) {
@@ -53,34 +49,28 @@ export default function FindReplaceTrayController(_ref) {
         newIndex = findCount;
       } else newIndex = findIndex - 1;
     }
-
     return newIndex;
   };
-
   const done = () => {
     plugin.done(false);
     setFindCount(0);
     setFindIndex(0);
     setSelectionContext([]);
   };
-
   const handleDismiss = () => {
     done();
     onDismiss();
   };
-
   const handleNext = () => {
     plugin.next();
     setFindIndex(newFindIndex(1));
     updateSelectionContext();
   };
-
   const handlePrevious = () => {
     plugin.prev();
     setFindIndex(newFindIndex(-1));
     updateSelectionContext();
   };
-
   const handleFind = text => {
     if (!text) {
       done();
@@ -92,34 +82,26 @@ export default function FindReplaceTrayController(_ref) {
       updateSelectionContext();
     }
   };
-
-  const handleReplace = function (text) {
-    let forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    let all = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const handleReplace = (text, forward = true, all = false) => {
     if (!text) return;
-    undoManager === null || undoManager === void 0 ? void 0 : undoManager.add();
+    undoManager?.add();
     plugin.replace(text, forward, all);
-
     if (findCount === 1 || all) {
       done();
       return;
-    } // we can't just find again, because that will reset index to 1
-
-
+    }
+    // we can't just find again, because that will reset index to 1
     let newIndex;
     const newFindCount = findCount - 1;
-
     if (forward) {
       newIndex = findIndex === findCount ? 1 : findIndex;
     } else {
       newIndex = findIndex === 1 ? newFindCount : findIndex - 1;
     }
-
     setFindCount(newFindCount);
     setFindIndex(newIndex);
     updateSelectionContext();
   };
-
   return /*#__PURE__*/React.createElement(FindReplaceTray, {
     onRequestClose: handleDismiss,
     onNext: handleNext,