@instructure/canvas-rce 5.12.1 → 5.12.2

package/lib/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -1,240 +0,0 @@
-/*
- * Copyright (C) 2019 - 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 React from 'react';
-import ReactDOM from 'react-dom';
-import bridge from '../../../../bridge';
-import { asVideoElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
-import VideoOptionsTray from '.';
-import { isStudioEmbeddedMedia, parseStudioOptions } from '../../shared/StudioLtiSupportUtils';
-import RCEGlobals from '../../../RCEGlobals';
-export const CONTAINER_ID = 'instructure-video-options-tray-container';
-export const VIDEO_SIZE_DEFAULT = {
-  height: '225px',
-  width: '400px'
-}; // AKA "LARGE"
-
-export const AUDIO_PLAYER_SIZE = {
-  width: '320px',
-  height: '14.25rem'
-};
-export default class TrayController {
-  constructor() {
-    this._editor = null;
-    this._isOpen = false;
-    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
-        // 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); // tell tinymce so the context toolbar resets
-
-
-        this._editor.fire('ObjectResized', {
-          target: this.$videoContainer,
-          width: videoOptions.appliedWidth,
-          height: videoOptions.appliedHeight
-        });
-      } 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
-      // and not notorious, we probably don't have a media_object_id.
-      // If not, we can't update the MediaObject in the canvas db.
-
-
-      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' && !videoOptions.editLocked) {
-        videoOptions.updateMediaObject(data).then(_r => {
-          if (this.$videoContainer && videoOptions.displayAs === 'embed') {
-            this.$videoContainer.contentWindow.postMessage({
-              subject: 'reload_media',
-              media_object_id: videoOptions.media_object_id
-            }, bridge.canvasOrigin);
-          }
-        }).catch(ex => {
-          console.error('failed updating video captions', ex); // eslint-disable-line no-console
-        });
-      }
-    }
-
-    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);
-      }
-    }, {
-      signal: this._subtitleListener.signal
-    });
-    (_this$$videoContainer2 = this.$videoContainer) === null || _this$$videoContainer2 === void 0 ? void 0 : (_this$$videoContainer3 = _this$$videoContainer2.contentWindow) === null || _this$$videoContainer3 === void 0 ? void 0 : _this$$videoContainer3.postMessage({
-      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
-       * (clearing the internal state) so that the currently-selected video can
-       * be used for initial video options.
-       */
-      this._renderId++;
-      vo = asVideoElement(this.$videoContainer) || {};
-    }
-
-    const element = /*#__PURE__*/React.createElement(VideoOptionsTray, {
-      id: "video-options-tray",
-      key: this._renderId,
-      videoOptions: vo,
-      onEntered: () => {
-        this._isOpen = true;
-      },
-      onExited: () => {
-        var _this$_subtitleListen;
-
-        bridge.focusActiveEditor(false);
-        this._isOpen = false;
-        (_this$_subtitleListen = this._subtitleListener) === null || _this$_subtitleListen === void 0 ? void 0 : _this$_subtitleListen.abort();
-      },
-      onSave: videoOptions => {
-        this._applyVideoOptions(videoOptions);
-      },
-      onRequestClose: () => this._dismissTray(),
-      open: this._shouldOpen,
-      trayProps: trayProps,
-      studioOptions: isStudioEmbeddedMedia(this.$videoContainer) ? parseStudioOptions(this.$videoContainer) : null,
-      requestSubtitlesFromIframe: cb => this.requestSubtitlesFromIframe(cb)
-    });
-    ReactDOM.render(element, this.$container);
-  }
-
-}

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

@@ -1,350 +0,0 @@
-/*
- * Copyright (C) 2019 - 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 React, { useState, useEffect } from 'react';
-import { arrayOf, bool, func, number, shape, string } from 'prop-types';
-import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
-import { SimpleSelect } from '@instructure/ui-simple-select';
-import { TextArea } from '@instructure/ui-text-area';
-import { Text } from '@instructure/ui-text';
-import { IconQuestionLine } from '@instructure/ui-icons';
-import { Flex } from '@instructure/ui-flex';
-import { FormFieldGroup } from '@instructure/ui-form-field';
-import { View } from '@instructure/ui-view';
-import { Spinner } from '@instructure/ui-spinner';
-import { Tooltip } from '@instructure/ui-tooltip';
-import { Tray } from '@instructure/ui-tray';
-import { StoreProvider } from '../../shared/StoreContext';
-import { ClosedCaptionPanel } from '@instructure/canvas-media';
-import { CUSTOM, MIN_WIDTH_VIDEO, MIN_PERCENTAGE, videoSizes, labelForImageSize, scaleToSize } from '../../instructure_image/ImageEmbedOptions';
-import Bridge from '../../../../bridge';
-import RceApiSource from '../../../../rcs/api';
-import formatMessage from '../../../../format-message';
-import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInput';
-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,
-    onRequestClose,
-    onSave,
-    open,
-    trayProps,
-    requestSubtitlesFromIframe = () => {},
-    onEntered = null,
-    onExited = null,
-    id = 'video-options-tray',
-    studioOptions = null
-  } = _ref;
-  const {
-    naturalHeight,
-    naturalWidth
-  } = videoOptions;
-  const currentHeight = videoOptions.appliedHeight || naturalHeight;
-  const currentWidth = videoOptions.appliedWidth || naturalWidth;
-  const [titleText, setTitleText] = useState(videoOptions.titleText);
-  const [displayAs, setDisplayAs] = useState('embed');
-  const [videoSize, setVideoSize] = useState(videoOptions.videoSize);
-  const [videoHeight, setVideoHeight] = useState(currentHeight);
-  const [videoWidth, setVideoWidth] = useState(currentWidth);
-  const [subtitles, setSubtitles] = useState(videoOptions.tracks || []);
-  const [minWidth] = useState(MIN_WIDTH_VIDEO);
-  const [minHeight] = useState(Math.round(videoHeight / videoWidth * MIN_WIDTH_VIDEO));
-  const [minPercentage] = useState(MIN_PERCENTAGE);
-  const [editLocked, setEditLocked] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const isStudio = !!studioOptions;
-  const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
-  const showSizeControls = !isStudio || studioOptions.resizable;
-  const dimensionsState = useDimensionsState(videoOptions, {
-    minHeight,
-    minWidth,
-    minPercentage
-  });
-  const api = new RceApiSource(trayProps);
-  useEffect(() => {
-    if (videoOptions.attachmentId) {
-      api.getFile(videoOptions.attachmentId, {
-        include: ['blueprint_course_status']
-      }).then(response => {
-        setEditLocked((response === null || response === void 0 ? void 0 : response.restricted_by_master_course) && (response === null || response === void 0 ? void 0 : response.is_master_course_child_content));
-        setLoading(false);
-      }).catch(error => {
-        setLoading(false);
-      });
-    }
-  }, [videoOptions.attachmentId]);
-  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);
-    } else {
-      const {
-        height,
-        width
-      } = scaleToSize(selectedOption.value, naturalWidth, naturalHeight);
-      setVideoHeight(height);
-      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,
-      titleText,
-      appliedHeight,
-      appliedWidth,
-      displayAs,
-      subtitles,
-      updateMediaObject,
-      editLocked
-    });
-  }
-
-  const tooltipText = formatMessage('Used by screen readers to describe the video');
-  const textAreaLabel = /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Flex.Item, null, formatMessage('Title')), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 0 0 xx-small"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    on: ['hover', 'focus'],
-    placement: "top",
-    renderTip: /*#__PURE__*/React.createElement(View, {
-      display: "block",
-      id: "alt-text-label-tooltip",
-      maxWidth: "14rem"
-    }, tooltipText)
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    renderIcon: IconQuestionLine,
-    size: "small",
-    screenReaderLabel: tooltipText,
-    withBackground: false,
-    withBorder: false
-  }))));
-  const messagesForSize = [];
-
-  if (videoSize !== CUSTOM) {
-    messagesForSize.push({
-      text: formatMessage('{width} x {height}px', {
-        height: videoHeight,
-        width: videoWidth
-      }),
-      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",
-    "data-mce-component": true,
-    label: isStudio ? formatMessage('Studio Media Options Tray') : formatMessage('Video Options Tray'),
-    mountNode: instuiPopupMountNode,
-    onDismiss: onRequestClose,
-    onEntered: onEntered,
-    onExited: onExited,
-    open: open,
-    placement: "end",
-    shouldCloseOnDocumentClick: true,
-    shouldContainFocus: true,
-    shouldReturnFocus: true,
-    size: "regular"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    height: getTrayHeight()
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "header",
-    padding: "medium"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "row"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Heading, {
-    as: "h2"
-  }, isStudio ? formatMessage('Studio Media Options') : formatMessage('Video Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    color: "primary",
-    onClick: onRequestClose,
-    screenReaderLabel: formatMessage('Close')
-  })))), loading && videoOptions.attachmentId ? /*#__PURE__*/React.createElement(Flex.Item, {
-    textAlign: "center",
-    margin: "xx-large",
-    padding: "xx-large"
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    renderTitle: formatMessage("Loading")
-  })) : /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "form",
-    shouldGrow: true,
-    margin: "none",
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Flex, {
-    justifyItems: "space-between",
-    direction: "column",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    padding: "small",
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column"
-  }, !editLocked && /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, isStudio ? /*#__PURE__*/React.createElement(Flex, {
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
-    weight: "bold"
-  }, formatMessage('Media Title'))), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small none none small"
-  }, titleText)) : /*#__PURE__*/React.createElement(TextArea, {
-    "aria-describedby": "alt-text-label-tooltip",
-    disabled: displayAs === 'link',
-    height: "4rem",
-    label: textAreaLabel,
-    onChange: handleTitleTextChange,
-    placeholder: formatMessage('(Describe the video)'),
-    resize: "vertical",
-    value: titleText
-  })), showDisplayOptions && /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "small none none none",
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(RadioInputGroup, {
-    description: formatMessage('Display Options'),
-    name: "display-video-as",
-    onChange: handleDisplayAsChange,
-    value: displayAs
-  }, /*#__PURE__*/React.createElement(RadioInput, {
-    label: formatMessage('Embed Video'),
-    value: "embed"
-  }), /*#__PURE__*/React.createElement(RadioInput, {
-    label: formatMessage('Display Text Link (Opens in a new tab)'),
-    value: "link"
-  }))), showSizeControls && /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "small none xx-small none"
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    padding: "small small xx-small small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    id: `${id}-size`,
-    mountNode: instuiPopupMountNode,
-    disabled: displayAs !== 'embed',
-    renderLabel: formatMessage('Size'),
-    messages: messagesForSize,
-    assistiveText: formatMessage('Use arrow keys to navigate options.'),
-    onChange: handleVideoSizeChange,
-    value: videoSize
-  }, videoSizes.map(size => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: `${id}-size-${size}`,
-    key: size,
-    value: size
-  }, labelForImageSize(size))))), videoSize === CUSTOM && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    padding: "xx-small small"
-  }, /*#__PURE__*/React.createElement(DimensionsInput, {
-    dimensionsState: dimensionsState,
-    disabled: displayAs !== 'embed',
-    minHeight: minHeight,
-    minWidth: minWidth,
-    minPercentage: minPercentage,
-    hidePercentage: true
-  }))), !isStudio && !editLocked && /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(FormFieldGroup, {
-    description: formatMessage('Closed Captions/Subtitles')
-  }, /*#__PURE__*/React.createElement(ClosedCaptionPanel, {
-    subtitles: subtitles.map(st => ({
-      locale: st.locale,
-      inherited: st.inherited,
-      file: {
-        name: st.language || st.locale
-      } // this is an artifact of ClosedCaptionCreatorRow's inards
-
-    })),
-    uploadMediaTranslations: Bridge.uploadMediaTranslations,
-    userLocale: Bridge.userLocale,
-    updateSubtitles: handleUpdateSubtitles,
-    liveRegion: getLiveRegion,
-    mountNode: instuiPopupMountNode
-  }))))), /*#__PURE__*/React.createElement(Flex.Item, {
-    background: "secondary",
-    borderWidth: "small none none none",
-    padding: "small medium",
-    textAlign: "end"
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: saveDisabled,
-    onClick: event => handleSave(event, contentProps.updateMediaObject),
-    color: "primary"
-  }, formatMessage('Done'))))))));
-}
-VideoOptionsTray.propTypes = {
-  videoOptions: shape({
-    titleText: string,
-    appliedHeight: number,
-    appliedWidth: number,
-    naturalHeight: number.isRequired,
-    naturalWidth: number.isRequired,
-    tracks: arrayOf(shape({
-      locale: string.isRequired,
-      inherited: bool
-    }))
-  }).isRequired,
-  onEntered: func,
-  onExited: func,
-  onRequestClose: func.isRequired,
-  onSave: func.isRequired,
-  open: bool.isRequired,
-  trayProps: shape({
-    host: string.isRequired,
-    jwt: string.isRequired
-  }),
-  id: string,
-  studioOptions: parsedStudioOptionsPropType,
-  requestSubtitlesFromIframe: func
-};

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

@@ -1,105 +0,0 @@
-/*
- * Copyright (C) 2019 - 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 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 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);
-  }
-};
-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.
-
-
-    let uploadBookmark = null; // 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 => /*#__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
-    })), container);
-  });
-}