@instructure/canvas-rce 5.14.0 → 5.14.2

package/es/rce/plugins/instructure_record/MediaPanel/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 React, { useRef } from 'react';
 import { func, oneOf, shape, string } from 'prop-types';
 import { contentTrayDocumentShape } from '../../shared/fileShape';
@@ -24,23 +25,18 @@ import { View } from '@instructure/ui-view';
 import Link from '../../instructure_documents/components/Link';
 import { LoadMoreButton, LoadingIndicator, LoadingStatus, useIncrementalLoading } from '../../../../common/incremental-loading';
 const PENDING_MEDIA_ENTRY_ID = 'maybe';
-
 function hasFiles(media) {
   return media.files.length > 0;
 }
-
 function isEmpty(media) {
   return !hasFiles(media) && !media.hasMore && !media.isLoading;
 }
-
 function renderLinks(files, handleClick, lastItemRef) {
   return files.map((f, index) => {
     let focusRef = null;
-
     if (index === files.length - 1) {
       focusRef = lastItemRef;
     }
-
     return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: f.id
     }, f, {
@@ -51,7 +47,6 @@ function renderLinks(files, handleClick, lastItemRef) {
     }));
   });
 }
-
 function renderLoadingError(_error) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -61,7 +56,6 @@ function renderLoadingError(_error) {
     color: "danger"
   }, formatMessage('Loading failed.')));
 }
-
 export default function MediaPanel(props) {
   const {
     fetchInitialMedia,
@@ -89,11 +83,9 @@ export default function MediaPanel(props) {
     sortBy,
     searchString
   });
-
   const handleFileClick = file => {
     props.onMediaEmbed(file);
   };
-
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     "data-testid": "instructure_links-MediaPanel"

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.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 React from 'react';
 import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
@@ -27,7 +28,6 @@ export const VIDEO_SIZE_DEFAULT = {
   height: '225px',
   width: '400px'
 }; // AKA "LARGE"
-
 export const AUDIO_PLAYER_SIZE = {
   width: '320px',
   height: '14.25rem'
@@ -39,77 +39,57 @@ export default class TrayController {
     this._shouldOpen = false;
     this._renderId = 0;
   }
-
   get $container() {
     let $container = document.getElementById(CONTAINER_ID);
-
     if ($container == null) {
       $container = document.createElement('div');
       $container.id = CONTAINER_ID;
       document.body.appendChild($container);
     }
-
     return $container;
   }
-
   get isOpen() {
     return this._isOpen;
   }
-
   showTrayForEditor(editor) {
     this._editor = editor;
     this.$videoContainer = findMediaPlayerIframe(editor.selection.getNode());
     this._shouldOpen = true;
-
     if (bridge.focusedEditor) {
       // Dismiss any content trays that may already be open
       bridge.hideTrays();
     }
-
     const trayProps = bridge.trayProps.get(editor);
-
     this._renderTray(trayProps);
   }
-
   hideTrayForEditor(editor) {
     if (this._editor === editor) {
       this._dismissTray();
     }
   }
-
   _applyVideoOptions(videoOptions) {
     var _this$$videoContainer;
-
     if (((_this$$videoContainer = this.$videoContainer) === null || _this$$videoContainer === void 0 ? void 0 : _this$$videoContainer.tagName) === 'IFRAME') {
       const $tinymceIframeShim = this.$videoContainer.parentElement;
-
       if (videoOptions.displayAs === 'embed') {
         var _videoOptions$subtitl;
-
-        const isVertical = videoOptions.appliedHeight > videoOptions.appliedWidth; // player v5 requires more space for the CC button
+        const isVertical = videoOptions.appliedHeight > videoOptions.appliedWidth;
+        // player v5 requires more space for the CC button
         // TODO: remove when using v7
-
         const minWidth = (_videoOptions$subtitl = videoOptions.subtitles) !== null && _videoOptions$subtitl !== void 0 && _videoOptions$subtitl.length ? 400 : 320;
         const styl = {
           height: `${videoOptions.appliedHeight}px`,
           width: `${Math.max(minWidth, isVertical ? videoOptions.appliedHeight : videoOptions.appliedWidth)}px`
         };
-
         this._editor.dom.setStyles($tinymceIframeShim, styl);
-
         this._editor.dom.setStyles(this.$videoContainer, styl);
-
         const title = videoOptions.titleText;
-
         this._editor.dom.setAttrib($tinymceIframeShim, 'data-mce-p-title', title);
-
         this._editor.dom.setAttrib($tinymceIframeShim, 'data-mce-p-data-titleText', videoOptions.titleText);
-
         this._editor.dom.setAttrib(this.$videoContainer, 'title', title);
+        this._editor.dom.setAttrib(this.$videoContainer, 'data-titleText', videoOptions.titleText);
 
-        this._editor.dom.setAttrib(this.$videoContainer, 'data-titleText', videoOptions.titleText); // tell tinymce so the context toolbar resets
-
-
+        // tell tinymce so the context toolbar resets
         this._editor.fire('ObjectResized', {
           target: this.$videoContainer,
           width: videoOptions.appliedWidth,
@@ -117,37 +97,29 @@ export default class TrayController {
         });
       } else {
         const href = this._editor.dom.getAttrib($tinymceIframeShim, 'data-mce-p-src');
-
         const title = videoOptions.titleText || this._editor.dom.getAttrib(this.$videoContainer, 'title');
-
         const link = document.createElement('a');
         link.setAttribute('href', href);
         link.setAttribute('target', '_blank');
         link.setAttribute('rel', 'noreferrer noopener');
         link.textContent = title;
-
         this._editor.dom.replace(link, $tinymceIframeShim);
-
         this._editor.selection.select(link);
-
         this.$videoContainer = null;
       }
-
       const data = {
         media_object_id: videoOptions.media_object_id,
         title: videoOptions.titleText,
         subtitles: videoOptions.subtitles
       };
-
       if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
         data.attachment_id = videoOptions.attachment_id;
-      } // If the video just edited came from a file uploaded to canvas
+      }
+
+      // If the video just edited came from a file uploaded to canvas
       // and not notorious, we probably don't have a media_object_id.
       // If not, we can't update the MediaObject in the canvas db.
-
-
       const hasMediaId = videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' || data.attachment_id && data.attachment_id !== 'undefined';
-
       if (hasMediaId && !videoOptions.editLocked) {
         videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
@@ -162,35 +134,25 @@ export default class TrayController {
         });
       }
     }
-
     this._dismissTray();
   }
-
   _dismissTray() {
     if (this.$videoContainer) {
       var _this$_editor, _this$_editor$selecti;
-
       (_this$_editor = this._editor) === null || _this$_editor === void 0 ? void 0 : (_this$_editor$selecti = _this$_editor.selection) === null || _this$_editor$selecti === void 0 ? void 0 : _this$_editor$selecti.select(this.$videoContainer);
     }
-
     this._shouldOpen = false;
-
     this._renderTray();
-
     this._editor = null;
   }
-
   requestSubtitlesFromIframe(cb) {
     var _this$$videoContainer2, _this$$videoContainer3;
-
     if (!bridge.canvasOrigin) return;
     this._subtitleListener = new AbortController();
     window.addEventListener('message', event => {
       var _event$data;
-
       if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === 'media_tracks_response') {
         var _event$data2;
-
         cb(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : _event$data2.payload);
       }
     }, {
@@ -200,10 +162,8 @@ export default class TrayController {
       subject: 'media_tracks_request'
     }, bridge.canvasOrigin);
   }
-
   _renderTray(trayProps) {
     let vo = {};
-
     if (this._shouldOpen) {
       /*
        * When the tray is being opened again, it should be rendered fresh
@@ -213,7 +173,6 @@ export default class TrayController {
       this._renderId++;
       vo = asVideoElement(this.$videoContainer) || {};
     }
-
     const element = /*#__PURE__*/React.createElement(VideoOptionsTray, {
       id: "video-options-tray",
       key: this._renderId,
@@ -223,7 +182,6 @@ export default class TrayController {
       },
       onExited: () => {
         var _this$_subtitleListen;
-
         bridge.focusActiveEditor(false);
         this._isOpen = false;
         (_this$_subtitleListen = this._subtitleListener) === null || _this$_subtitleListen === void 0 ? void 0 : _this$_subtitleListen.abort();
@@ -239,5 +197,4 @@ export default class TrayController {
     });
     ReactDOM.render(element, this.$container);
   }
-
 }

package/es/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -40,9 +40,7 @@ import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInpu
 import { getTrayHeight } from '../../shared/trayUtils';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
-
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
-
 export default function VideoOptionsTray(_ref) {
   let {
     videoOptions,
@@ -54,7 +52,8 @@ export default function VideoOptionsTray(_ref) {
     onEntered = null,
     onExited = null,
     id = 'video-options-tray',
-    studioOptions = null
+    studioOptions = null,
+    forBlockEditorUse = false
   } = _ref;
   const {
     naturalHeight,
@@ -74,8 +73,8 @@ export default function VideoOptionsTray(_ref) {
   const [editLocked, setEditLocked] = useState(null);
   const [loading, setLoading] = useState(true);
   const isStudio = !!studioOptions;
-  const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
-  const showSizeControls = !isStudio || studioOptions.resizable;
+  const showDisplayOptions = (!isStudio || studioOptions.convertibleToLink) && !forBlockEditorUse;
+  const showSizeControls = (!isStudio || studioOptions.resizable) && !forBlockEditorUse;
   const dimensionsState = useDimensionsState(videoOptions, {
     minHeight,
     minWidth,
@@ -97,19 +96,15 @@ export default function VideoOptionsTray(_ref) {
   useEffect(() => {
     if (subtitles.length === 0) requestSubtitlesFromIframe(setSubtitles);
   }, []);
-
   function handleTitleTextChange(event) {
     setTitleText(event.target.value);
   }
-
   function handleDisplayAsChange(event) {
     event.target.focus();
     setDisplayAs(event.target.value);
   }
-
   function handleVideoSizeChange(event, selectedOption) {
     setVideoSize(selectedOption.value);
-
     if (selectedOption.value === CUSTOM) {
       setVideoHeight(currentHeight);
       setVideoWidth(currentWidth);
@@ -122,21 +117,17 @@ export default function VideoOptionsTray(_ref) {
       setVideoWidth(width);
     }
   }
-
   function handleUpdateSubtitles(new_subtitles) {
     setSubtitles(new_subtitles);
   }
-
   function handleSave(event, updateMediaObject) {
     event.preventDefault();
     let appliedHeight = videoHeight;
     let appliedWidth = videoWidth;
-
     if (videoSize === CUSTOM) {
       appliedHeight = dimensionsState.height;
       appliedWidth = dimensionsState.width;
     }
-
     onSave({
       media_object_id: videoOptions.id,
       attachment_id: videoOptions.attachmentId,
@@ -149,7 +140,6 @@ export default function VideoOptionsTray(_ref) {
       editLocked
     });
   }
-
   const tooltipText = formatMessage('Used by screen readers to describe the video');
   const textAreaLabel = /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center"
@@ -171,7 +161,6 @@ export default function VideoOptionsTray(_ref) {
     withBorder: false
   }))));
   const messagesForSize = [];
-
   if (videoSize !== CUSTOM) {
     messagesForSize.push({
       text: formatMessage('{width} x {height}px', {
@@ -181,7 +170,6 @@ export default function VideoOptionsTray(_ref) {
       type: 'hint'
     });
   }
-
   const saveDisabled = displayAs === 'embed' && (titleText === '' || videoSize === CUSTOM && !dimensionsState.isValid);
   return /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(Tray, {
     key: "video-options-tray",
@@ -305,7 +293,6 @@ export default function VideoOptionsTray(_ref) {
       file: {
         name: st.language || st.locale
       } // this is an artifact of ClosedCaptionCreatorRow's inards
-
     })),
     uploadMediaTranslations: Bridge.uploadMediaTranslations,
     userLocale: Bridge.userLocale,

package/es/rce/plugins/instructure_record/clickCallback.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 React from 'react';
 import ReactDOM from 'react-dom';
 import Bridge from '../../../bridge';
@@ -25,23 +26,18 @@ import { instuiPopupMountNode } 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') {
     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,38 +46,34 @@ 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);
       Bridge.insertImagePlaceholder(fileProps);
       handleDismiss();
     };
-
     const trayProps = Bridge.trayProps.get(ed);
-    ReactDOM.render( /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => {
+    ReactDOM.render(/*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => {
       var _RCEGlobals$getFeatur;
-
       return /*#__PURE__*/React.createElement(UploadMedia, {
         "data-mce-component": true,
         rcsConfig: {

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,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 React from 'react';
 import ReactDOM from 'react-dom';
 import FindReplaceController from './components/FindReplaceTrayController';
@@ -22,26 +23,22 @@ 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({
     format: 'text'
   });
   if (initalSelection) (_editor$selection2 = editor.selection) === null || _editor$selection2 === void 0 ? void 0 : _editor$selection2.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,